fix: adjust slash menu

Author: denisebroekman

src/app/app.html

@@ -124,23 +124,6 @@
         class="block inspector-block"
       ></qti-attributes-panel>
 
-      @if (savedFiles.length) {
-        <section class="panel-card">
-          <h2>Saved files</h2>
-          <div class="saved-files">
-            @for (file of savedFiles; track trackFile($index, file)) {
-              <div class="saved-file-row">
-                <button type="button" class="saved-file-link" (click)="loadFile(file.id)">
-                  {{ file.name }}
-                </button>
-                <button type="button" class="saved-file-delete" (click)="deleteFile(file.id)">
-                  Delete
-                </button>
-              </div>
-            }
-          </div>
-        </section>
-      }
     </aside>
   </section>
 </main>

src/components/editor/ui/slash-menu/slash-menu.js

@@ -9,7 +9,8 @@ if (!customElements.get('prosekit-autocomplete-item')) customElements.define('pr
 if (!customElements.get('prosekit-autocomplete-empty')) customElements.define('prosekit-autocomplete-empty', AutocompleteEmpty)
 
 import { html, LitElement } from 'lit';
-import { canUseRegexLookbehind } from 'prosekit/core'
+import { canUseRegexLookbehind, defineUpdateHandler } from 'prosekit/core'
+import { Selection } from 'prosekit/pm/state'
 import { insertChoiceInteraction } from '@qti-editor/interaction-choice';
 import { insertExtendedTextInteraction } from '@qti-editor/interaction-extended-text';
 import { insertInlineChoiceInteraction } from '@qti-editor/interaction-inline-choice';
@@ -35,24 +36,90 @@ function canInsert(view, nodeType) {
   return false;
 }
 
+function isSelectionInsideNodeType(view, nodeType) {
+  const { $from } = view.state.selection;
+
+  for (let depth = $from.depth; depth >= 0; depth -= 1) {
+    if ($from.node(depth).type === nodeType) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 class SlashMenuElement extends LitElement {
   static properties = {
     editor: {
       attribute: false
     },
   };
 
+  removeUpdateExtension;
+  lastSelectionJson = null;
+
   createRenderRoot() {
     return this
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    this.attachEditorListener()
+  }
+
+  disconnectedCallback() {
+    this.detachEditorListener()
+    super.disconnectedCallback()
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties)
+    if (changedProperties.has('editor')) {
+      this.attachEditorListener()
+    }
+  }
+
   getView() {
     return this.editor?.view ?? null
   }
 
+  attachEditorListener() {
+    this.detachEditorListener()
+    if (!this.editor) return
+    this.removeUpdateExtension = this.editor.use(defineUpdateHandler(() => {
+      this.snapshotSelection()
+      this.requestUpdate()
+    }))
+    this.snapshotSelection()
+  }
+
+  detachEditorListener() {
+    this.removeUpdateExtension?.()
+    this.removeUpdateExtension = undefined
+  }
+
+  snapshotSelection() {
+    const view = this.getView()
+    if (!view) return
+    this.lastSelectionJson = view.state.selection.toJSON()
+  }
+
+  restoreSelection() {
+    const view = this.getView()
+    if (!view || !this.lastSelectionJson) return
+
+    try {
+      const restored = Selection.fromJSON(view.state.doc, this.lastSelectionJson)
+      view.dispatch(view.state.tr.setSelection(restored))
+    } catch {
+      return
+    }
+  }
+
   runCommand = (command) => {
     const view = this.getView()
     if (!view) return
+    this.restoreSelection()
     command(view)
     view.focus()
   };
@@ -61,6 +128,8 @@ class SlashMenuElement extends LitElement {
     const view = this.getView()
     if (!view) return
 
+    this.restoreSelection()
+
     const nodeType = view.state.schema.nodes.qtiTextEntryInteraction
     if (!nodeType) return
 
@@ -107,7 +176,7 @@ class SlashMenuElement extends LitElement {
               <lit-editor-slash-menu-item
                 class="contents"
                 label="Inline choice"
-                ?disabled=${!canInsert(view, schema.nodes.qtiInlineChoiceInteraction)}
+                ?disabled=${isSelectionInsideNodeType(view, schema.nodes.qtiInlineChoiceInteraction) || !canInsert(view, schema.nodes.qtiInlineChoiceInteraction)}
                 @select=${() => this.runCommand((currentView) => insertInlineChoiceInteraction(currentView.state, currentView.dispatch, currentView))}
               ></lit-editor-slash-menu-item>
             `