@milkdown/crepe 7.3.3

package/src/feature/block-edit/menu/config.ts

@@ -0,0 +1,335 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { html } from 'atomico'
+import type { Ctx } from '@milkdown/ctx'
+import { editorViewCtx } from '@milkdown/core'
+import {
+  blockquoteSchema,
+  bulletListSchema,
+  codeBlockSchema,
+  headingSchema,
+  hrSchema,
+  orderedListSchema,
+  paragraphSchema,
+} from '@milkdown/preset-commonmark'
+import type { Attrs, NodeType } from '@milkdown/prose/model'
+import { findWrapping } from '@milkdown/prose/transform'
+import type { Command, Transaction } from '@milkdown/prose/state'
+import { imageBlockSchema } from '@milkdown/components'
+import {
+  bulletListIcon,
+  codeIcon,
+  dividerIcon,
+  h1Icon,
+  h2Icon,
+  h3Icon,
+  h4Icon,
+  h5Icon,
+  h6Icon,
+  imageIcon,
+  orderedListIcon,
+  quoteIcon,
+  textIcon,
+} from './icons'
+
+interface MenuItem {
+  index: number
+  key: string
+  label: string
+  icon: ReturnType<typeof html>
+  onRun: (ctx: Ctx) => void
+}
+
+type WithRange<T, HasIndex extends true | false = true> = HasIndex extends true ? T & { range: [start: number, end: number] } : T
+
+type MenuItemGroup<HasIndex extends true | false = true> = WithRange<{
+  key: string
+  label: string
+  items: HasIndex extends true ? MenuItem[] : Omit<MenuItem, 'index'>[]
+}, HasIndex>
+
+function clearRange(tr: Transaction) {
+  const { $from, $to } = tr.selection
+  const { pos: from } = $from
+  const { pos: to } = $to
+  tr = tr.deleteRange(from - $from.node().content.size, to)
+  return tr
+}
+
+function setBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
+  const { from, to } = tr.selection
+  return tr.setBlockType(from, to, nodeType, attrs)
+}
+
+function wrapInBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
+  const { $from, $to } = tr.selection
+
+  const range = $from.blockRange($to)
+  const wrapping = range && findWrapping(range, nodeType, attrs)
+  if (!wrapping)
+    return null
+
+  return tr.wrap(range, wrapping)
+}
+
+function addBlockType(tr: Transaction, nodeType: NodeType, attrs: Attrs | null = null) {
+  const node = nodeType.createAndFill(attrs)
+  if (!node)
+    return null
+
+  return tr.replaceSelectionWith(node)
+}
+
+function clearContentAndSetBlockType(nodeType: NodeType, attrs: Attrs | null = null): Command {
+  return (state, dispatch) => {
+    if (dispatch) {
+      const tr = setBlockType(clearRange(state.tr), nodeType, attrs)
+      dispatch(tr.scrollIntoView())
+    }
+    return true
+  }
+}
+
+function clearContentAndWrapInBlockType(nodeType: NodeType, attrs: Attrs | null = null): Command {
+  return (state, dispatch) => {
+    const tr = wrapInBlockType(clearRange(state.tr), nodeType, attrs)
+    if (!tr)
+      return false
+
+    if (dispatch)
+      dispatch(tr.scrollIntoView())
+
+    return true
+  }
+}
+
+function clearContentAndAddBlockType(nodeType: NodeType, attrs: Attrs | null = null): Command {
+  return (state, dispatch) => {
+    const tr = addBlockType(clearRange(state.tr), nodeType, attrs)
+    if (!tr)
+      return false
+
+    if (dispatch)
+      dispatch(tr.scrollIntoView())
+
+    return true
+  }
+}
+
+export function getGroups(filter?: string) {
+  let groups: MenuItemGroup<false>[] = [
+    {
+      key: 'text',
+      label: 'Text',
+      items: [
+        {
+          key: 'text',
+          label: 'Text',
+          icon: textIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(paragraphSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'h1',
+          label: 'Heading 1',
+          icon: h1Icon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 1 })
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'h2',
+          label: 'Heading 2',
+          icon: h2Icon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 2 })
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'h3',
+          label: 'Heading 3',
+          icon: h3Icon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 3 })
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'h4',
+          label: 'Heading 4',
+          icon: h4Icon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 4 })
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'h5',
+          label: 'Heading 5',
+          icon: h5Icon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 5 })
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'h6',
+          label: 'Heading 6',
+          icon: h6Icon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndSetBlockType(headingSchema.type(ctx), { level: 6 })
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'quote',
+          label: 'Quote',
+          icon: quoteIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndWrapInBlockType(blockquoteSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'divider',
+          label: 'Divider',
+          icon: dividerIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndAddBlockType(hrSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+      ],
+    },
+    {
+      key: 'list',
+      label: 'List',
+      items: [
+        {
+          key: 'bullet-list',
+          label: 'Bullet List',
+          icon: bulletListIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndWrapInBlockType(bulletListSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'ordered-list',
+          label: 'Ordered List',
+          icon: orderedListIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndWrapInBlockType(orderedListSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+      ],
+    },
+    {
+      key: 'advanced',
+      label: 'Advanced',
+      items: [
+        {
+          key: 'image',
+          label: 'Image',
+          icon: imageIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndAddBlockType(imageBlockSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+        {
+          key: 'code',
+          label: 'Code',
+          icon: codeIcon,
+          onRun: (ctx) => {
+            const view = ctx.get(editorViewCtx)
+            const { dispatch, state } = view
+
+            const command = clearContentAndAddBlockType(codeBlockSchema.type(ctx))
+            command(state, dispatch)
+          },
+        },
+      ],
+    },
+  ]
+
+  if (filter) {
+    groups = groups
+      .map((group) => {
+        const items = group
+          .items
+          .filter(item =>
+            item
+              .label
+              .toLowerCase()
+              .includes(filter.toLowerCase()))
+
+        return {
+          ...group,
+          items,
+        }
+      })
+      .filter(group => group.items.length > 0)
+  }
+
+  const items = groups.flatMap(groups => groups.items)
+  items
+    .forEach(((item, index) => {
+      Object.assign(item, {
+        index,
+      })
+    }))
+
+  groups.reduce((acc, group) => {
+    const end = acc + group.items.length
+    Object.assign(group, {
+      range: [acc, end],
+    })
+    return end
+  }, 0)
+
+  return {
+    groups: groups as unknown as MenuItemGroup[],
+    size: items.length,
+  }
+}

package/src/feature/block-edit/menu/icons.ts

@@ -0,0 +1,171 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { html } from 'atomico'
+
+export const textIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_992_5547)">
+      <path d="M5 5.5C5 6.33 5.67 7 6.5 7H10.5V17.5C10.5 18.33 11.17 19 12 19C12.83 19 13.5 18.33 13.5 17.5V7H17.5C18.33 7 19 6.33 19 5.5C19 4.67 18.33 4 17.5 4H6.5C5.67 4 5 4.67 5 5.5Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5547">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const h1Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_992_5553)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM12 17H14V7H10V9H12V17Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5553">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const h2Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_992_5559)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15H11V13H13C14.1 13 15 12.11 15 11V9C15 7.89 14.1 7 13 7H9V9H13V11H11C9.9 11 9 11.89 9 13V17H15V15Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5559">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const h3Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_992_5565)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15V13.5C15 12.67 14.33 12 13.5 12C14.33 12 15 11.33 15 10.5V9C15 7.89 14.1 7 13 7H9V9H13V11H11V13H13V15H9V17H13C14.1 17 15 16.11 15 15Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5565">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const h4Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_7757)">
+      <path d="M19.04 3H5.04004C3.94004 3 3.04004 3.9 3.04004 5V19C3.04004 20.1 3.94004 21 5.04004 21H19.04C20.14 21 21.04 20.1 21.04 19V5C21.04 3.9 20.14 3 19.04 3ZM19.04 19H5.04004V5H19.04V19ZM13.04 17H15.04V7H13.04V11H11.04V7H9.04004V13H13.04V17Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7757">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const h5Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_7760)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15V13C15 11.89 14.1 11 13 11H11V9H15V7H9V13H13V15H9V17H13C14.1 17 15 16.11 15 15Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7760">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const h6Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_7763)">
+      <path d="M11 17H13C14.1 17 15 16.11 15 15V13C15 11.89 14.1 11 13 11H11V9H15V7H11C9.9 7 9 7.89 9 9V15C9 16.11 9.9 17 11 17ZM11 13H13V15H11V13ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7763">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const bulletListIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_8070)">
+      <path d="M4 10.5C3.17 10.5 2.5 11.17 2.5 12C2.5 12.83 3.17 13.5 4 13.5C4.83 13.5 5.5 12.83 5.5 12C5.5 11.17 4.83 10.5 4 10.5ZM4 4.5C3.17 4.5 2.5 5.17 2.5 6C2.5 6.83 3.17 7.5 4 7.5C4.83 7.5 5.5 6.83 5.5 6C5.5 5.17 4.83 4.5 4 4.5ZM4 16.5C3.17 16.5 2.5 17.18 2.5 18C2.5 18.82 3.18 19.5 4 19.5C4.82 19.5 5.5 18.82 5.5 18C5.5 17.18 4.83 16.5 4 16.5ZM8 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H8C7.45 17 7 17.45 7 18C7 18.55 7.45 19 8 19ZM8 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM7 6C7 6.55 7.45 7 8 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H8C7.45 5 7 5.45 7 6Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8070">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const orderedListIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_8067)">
+      <path d="M8 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H8C7.45 5 7 5.45 7 6C7 6.55 7.45 7 8 7ZM20 17H8C7.45 17 7 17.45 7 18C7 18.55 7.45 19 8 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17ZM20 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11ZM4.5 16H2.5C2.22 16 2 16.22 2 16.5C2 16.78 2.22 17 2.5 17H4V17.5H3.5C3.22 17.5 3 17.72 3 18C3 18.28 3.22 18.5 3.5 18.5H4V19H2.5C2.22 19 2 19.22 2 19.5C2 19.78 2.22 20 2.5 20H4.5C4.78 20 5 19.78 5 19.5V16.5C5 16.22 4.78 16 4.5 16ZM2.5 5H3V7.5C3 7.78 3.22 8 3.5 8C3.78 8 4 7.78 4 7.5V4.5C4 4.22 3.78 4 3.5 4H2.5C2.22 4 2 4.22 2 4.5C2 4.78 2.22 5 2.5 5ZM4.5 10H2.5C2.22 10 2 10.22 2 10.5C2 10.78 2.22 11 2.5 11H3.8L2.12 12.96C2.04 13.05 2 13.17 2 13.28V13.5C2 13.78 2.22 14 2.5 14H4.5C4.78 14 5 13.78 5 13.5C5 13.22 4.78 13 4.5 13H3.2L4.88 11.04C4.96 10.95 5 10.83 5 10.72V10.5C5 10.22 4.78 10 4.5 10Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8067">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const quoteIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_7897)">
+      <path d="M7.17 17C7.68 17 8.15 16.71 8.37 16.26L9.79 13.42C9.93 13.14 10 12.84 10 12.53V8C10 7.45 9.55 7 9 7H5C4.45 7 4 7.45 4 8V12C4 12.55 4.45 13 5 13H7L5.97 15.06C5.52 15.95 6.17 17 7.17 17ZM17.17 17C17.68 17 18.15 16.71 18.37 16.26L19.79 13.42C19.93 13.14 20 12.84 20 12.53V8C20 7.45 19.55 7 19 7H15C14.45 7 14 7.45 14 8V12C14 12.55 14.45 13 15 13H17L15.97 15.06C15.52 15.95 16.17 17 17.17 17Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7897">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const dividerIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_7900)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M19 13H5C4.45 13 4 12.55 4 12C4 11.45 4.45 11 5 11H19C19.55 11 20 11.45 20 12C20 12.55 19.55 13 19 13Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7900">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const imageIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_8075)">
+      <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8075">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const codeIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_977_8081)">
+      <path d="M9.4 16.6L4.8 12L9.4 7.4L8 6L2 12L8 18L9.4 16.6ZM14.6 16.6L19.2 12L14.6 7.4L16 6L22 12L16 18L14.6 16.6Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8081">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/feature/block-edit/menu/index.ts

@@ -0,0 +1,113 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { PluginView } from '@milkdown/prose/state'
+import type { EditorView } from '@milkdown/prose/view'
+import { SlashProvider, slashFactory } from '@milkdown/plugin-slash'
+import type { Ctx } from '@milkdown/ctx'
+import type { AtomicoThis } from 'atomico/types/dom'
+import { $ctx } from '@milkdown/utils'
+import { isInCodeBlock, isInList } from '../../../utils'
+import type { MenuProps } from './component'
+import { MenuElement } from './component'
+
+export const menu = slashFactory('CREPE_MENU')
+
+export interface MenuAPI {
+  show: (pos: number) => void
+  hide: () => void
+}
+
+export const menuAPI = $ctx({
+  show: () => {},
+  hide: () => {},
+} as MenuAPI, 'menuAPICtx')
+
+customElements.define('milkdown-slash-menu', MenuElement)
+export function configureMenu(ctx: Ctx) {
+  ctx.set(menu.key, {
+    view: view => new MenuView(ctx, view),
+  })
+}
+
+class MenuView implements PluginView {
+  readonly #content: AtomicoThis<MenuProps, HTMLElement>
+  readonly #slashProvider: SlashProvider
+  #programmaticallyPos: number | null = null
+
+  constructor(ctx: Ctx, view: EditorView) {
+    this.#content = new MenuElement()
+    this.#content.hide = this.hide
+    this.#content.ctx = ctx
+    // eslint-disable-next-line ts/no-this-alias
+    const self = this
+    this.#slashProvider = new SlashProvider({
+      content: this.#content,
+      debounce: 20,
+      tippyOptions: {
+        arrow: false,
+        delay: 0,
+        duration: 0,
+        onShow: () => {
+          this.#content.show = true
+        },
+        onHidden: () => {
+          this.#content.show = false
+        },
+      },
+      shouldShow(this: SlashProvider, view: EditorView) {
+        if (isInCodeBlock(view.state.selection) || isInList(view.state.selection))
+          return false
+
+        const currentText = this.getContent(view, node =>
+          ['paragraph', 'heading'].includes(node.type.name))
+
+        if (currentText == null)
+          return false
+
+        const pos = self.#programmaticallyPos
+
+        self.#content.filter = currentText.startsWith('/') ? currentText.slice(1) : currentText
+
+        if (typeof pos === 'number') {
+          if (view.state.doc.resolve(pos).node() !== view.state.doc.resolve(view.state.selection.from).node()) {
+            self.#programmaticallyPos = null
+
+            return false
+          }
+
+          return true
+        }
+
+        if (!currentText.startsWith('/'))
+          return false
+
+        return true
+      },
+    })
+    this.update(view)
+
+    ctx.set(menuAPI.key, {
+      show: pos => this.show(pos),
+      hide: () => this.hide(),
+    })
+  }
+
+  update = (view: EditorView) => {
+    this.#slashProvider.update(view)
+  }
+
+  show = (pos: number) => {
+    this.#programmaticallyPos = pos
+    this.#content.filter = ''
+    this.#slashProvider.show()
+  }
+
+  hide = () => {
+    this.#programmaticallyPos = null
+    this.#slashProvider.hide()
+  }
+
+  destroy = () => {
+    this.#slashProvider.destroy()
+    this.#content.remove()
+  }
+}