Move editor stuff to its own folder

src/lib/editor/Suggestions.ts

@@ -0,0 +1,105 @@
+import type {SvelteComponent, ComponentType} from "svelte"
+import type {Readable} from "svelte/store"
+import tippy, {type Instance} from "tippy.js"
+import type {Editor} from "@tiptap/core"
+import {PluginKey} from "@tiptap/pm/state"
+import Suggestion from "@tiptap/suggestion"
+import type {Search} from "@welshman/app"
+
+export type SuggestionsOptions = {
+  char: string
+  name: string
+  editor: Editor
+  search: Readable<Search<any, any>>
+  select: (value: any, props: any) => void
+  allowCreate?: boolean
+  suggestionComponent: ComponentType
+  suggestionsComponent: ComponentType
+}
+
+export const createSuggestions = (options: SuggestionsOptions) =>
+  Suggestion({
+    char: options.char,
+    editor: options.editor,
+    pluginKey: new PluginKey(`suggest-${options.name}`),
+    command: ({editor, range, props}) => {
+      // increase range.to by one when the next node is of type "text"
+      // and starts with a space character
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter
+      const overrideSpace = nodeAfter?.text?.startsWith(" ")
+
+      if (overrideSpace) {
+        range.to += 1
+      }
+
+      editor
+        .chain()
+        .focus()
+        .insertContentAt(range, [
+          {type: options.name, attrs: props},
+          {type: "text", text: " "},
+        ])
+        .run()
+
+      window.getSelection()?.collapseToEnd()
+    },
+    allow: ({state, range}) => {
+      const $from = state.doc.resolve(range.from)
+      const type = state.schema.nodes[options.name]
+
+      return !!$from.parent.type.contentMatch.matchType(type)
+    },
+    render: () => {
+      let popover: Instance[]
+      let target: HTMLElement
+      let suggestions: SvelteComponent
+
+      const mapProps = (props: any) => ({
+        term: props.query,
+        search: options.search,
+        allowCreate: options.allowCreate,
+        component: options.suggestionComponent,
+        select: (value: string) => options.select(value, props),
+      })
+
+      return {
+        onStart: props => {
+          target = document.createElement("div")
+
+          popover = tippy("body", {
+            getReferenceClientRect: props.clientRect as any,
+            appendTo: document.querySelector("dialog[open]") || document.body,
+            content: target,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
+          })
+
+          suggestions = new options.suggestionsComponent({target, props: mapProps(props)})
+        },
+        onUpdate: props => {
+          suggestions.$set(mapProps(props))
+
+          if (props.clientRect) {
+            popover[0].setProps({
+              getReferenceClientRect: props.clientRect as any,
+            })
+          }
+        },
+        onKeyDown: props => {
+          if (props.event.key === "Escape") {
+            popover[0].hide()
+
+            return true
+          }
+
+          return Boolean(suggestions.onKeyDown?.(props.event))
+        },
+        onExit: () => {
+          popover[0].destroy()
+          suggestions.$destroy()
+        },
+      }
+    },
+  })