@milkdown/crepe 7.8.0 → 7.9.1

package/src/feature/block-edit/menu/component.tsx

@@ -0,0 +1,237 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+
+import { Icon } from '@milkdown/kit/component'
+import {
+  computed,
+  defineComponent,
+  onUnmounted,
+  ref,
+  watch,
+  watchEffect,
+  type Ref,
+  h,
+} from 'vue'
+
+import type { BlockEditFeatureConfig } from '..'
+
+import { getGroups } from './config'
+
+h
+
+type MenuProps = {
+  ctx: Ctx
+  show: Ref<boolean>
+  filter: Ref<string>
+  hide: () => void
+  config?: BlockEditFeatureConfig
+}
+
+export const Menu = defineComponent<MenuProps>({
+  props: {
+    ctx: {
+      type: Object,
+      required: true,
+    },
+    show: {
+      type: Object,
+      required: true,
+    },
+    filter: {
+      type: Object,
+      required: true,
+    },
+    hide: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+  setup({ ctx, show, filter, hide, config }) {
+    const host = ref<HTMLElement>()
+    const groupInfo = computed(() => getGroups(filter.value, config, ctx))
+    const hoverIndex = ref(0)
+    const prevMousePosition = ref({ x: -999, y: -999 })
+
+    const onPointerMove = (e: MouseEvent) => {
+      const { x, y } = e
+      prevMousePosition.value = { x, y }
+    }
+
+    watch([groupInfo, show], () => {
+      const { size } = groupInfo.value
+      if (size === 0 && show.value) hide()
+      else if (hoverIndex.value >= size) hoverIndex.value = 0
+    })
+
+    const onHover = (
+      index: number | ((prev: number) => number),
+      after?: (index: number) => void
+    ) => {
+      const prevHoverIndex = hoverIndex.value
+      const next = typeof index === 'function' ? index(prevHoverIndex) : index
+      after?.(next)
+      hoverIndex.value = next
+    }
+
+    const scrollToIndex = (index: number) => {
+      const target = host.value?.querySelector<HTMLElement>(
+        `[data-index="${index}"]`
+      )
+      const scrollRoot = host.value?.querySelector<HTMLElement>('.menu-groups')
+
+      if (!target || !scrollRoot) return
+
+      scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop
+    }
+
+    const runByIndex = (index: number) => {
+      const item = groupInfo.value.groups
+        .flatMap((group) => group.items)
+        .at(index)
+      if (item && ctx) item.onRun(ctx)
+
+      hide()
+    }
+
+    const onKeydown = (e: KeyboardEvent) => {
+      const { size, groups } = groupInfo.value
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        hide?.()
+        return
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        return onHover(
+          (index) => (index < size - 1 ? index + 1 : index),
+          scrollToIndex
+        )
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        return onHover(
+          (index) => (index <= 0 ? index : index - 1),
+          scrollToIndex
+        )
+      }
+
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        return onHover((index) => {
+          const group = groups.find(
+            (group) => group.range[0] <= index && group.range[1] > index
+          )
+          if (!group) return index
+
+          const prevGroup = groups[groups.indexOf(group) - 1]
+          if (!prevGroup) return index
+
+          return prevGroup.range[1] - 1
+        }, scrollToIndex)
+      }
+
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        return onHover((index) => {
+          const group = groups.find(
+            (group) => group.range[0] <= index && group.range[1] > index
+          )
+          if (!group) return index
+
+          const nextGroup = groups[groups.indexOf(group) + 1]
+          if (!nextGroup) return index
+
+          return nextGroup.range[0]
+        }, scrollToIndex)
+      }
+
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        runByIndex(hoverIndex.value)
+      }
+    }
+
+    const getOnPointerEnter = (index: number) => (e: MouseEvent) => {
+      const prevPos = prevMousePosition.value
+      if (!prevPos) return
+
+      const { x, y } = e
+      if (x === prevPos.x && y === prevPos.y) return
+
+      onHover(index)
+    }
+
+    watchEffect(() => {
+      const isShown = show.value
+      if (isShown) {
+        window.addEventListener('keydown', onKeydown, { capture: true })
+      } else {
+        window.removeEventListener('keydown', onKeydown, { capture: true })
+      }
+    })
+    onUnmounted(() => {
+      window.removeEventListener('keydown', onKeydown, { capture: true })
+    })
+
+    return () => {
+      return (
+        <div ref={host} onPointerdown={(e) => e.preventDefault()}>
+          <nav class="tab-group">
+            <ul>
+              {groupInfo.value.groups.map((group) => (
+                <li
+                  key={group.key}
+                  onPointerdown={() => onHover(group.range[0], scrollToIndex)}
+                  class={
+                    hoverIndex.value >= group.range[0] &&
+                    hoverIndex.value < group.range[1]
+                      ? 'selected'
+                      : ''
+                  }
+                >
+                  {group.label}
+                </li>
+              ))}
+            </ul>
+          </nav>
+          <div class="menu-groups" onPointermove={onPointerMove}>
+            {groupInfo.value.groups.map((group) => (
+              <div key={group.key} class="menu-group">
+                <h6>{group.label}</h6>
+                <ul>
+                  {group.items.map((item) => (
+                    <li
+                      key={item.key}
+                      data-index={item.index}
+                      class={hoverIndex.value === item.index ? 'hover' : ''}
+                      onPointerenter={getOnPointerEnter(item.index)}
+                      onPointerdown={() => {
+                        host.value
+                          ?.querySelector(`[data-index="${item.index}"]`)
+                          ?.classList.add('active')
+                      }}
+                      onPointerup={() => {
+                        host.value
+                          ?.querySelector(`[data-index="${item.index}"]`)
+                          ?.classList.remove('active')
+                        runByIndex(item.index)
+                      }}
+                    >
+                      <Icon icon={item.icon} />
+                      <span>{item.label}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    }
+  },
+})

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

@@ -1,6 +1,7 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+
 import { imageBlockSchema } from '@milkdown/kit/component/image-block'
 import { editorViewCtx } from '@milkdown/kit/core'
-import type { Ctx } from '@milkdown/kit/ctx'
 import {
   blockquoteSchema,
   bulletListSchema,
@@ -13,6 +14,10 @@ import {
 } from '@milkdown/kit/preset/commonmark'
 import { createTable } from '@milkdown/kit/preset/gfm'
 import { TextSelection } from '@milkdown/kit/prose/state'
+
+import type { BlockEditFeatureConfig } from '../index'
+import type { MenuItemGroup } from './utils'
+
 import { CrepeFeature } from '../../..'
 import { FeaturesCtx } from '../../../core/slice'
 import {
@@ -33,9 +38,7 @@ import {
   textIcon,
   todoListIcon,
 } from '../../../icons'
-import type { BlockEditFeatureConfig } from '../index'
 import { GroupBuilder } from './group-builder'
-import type { MenuItemGroup } from './utils'
 import {
   clearContentAndAddBlockType,
   clearContentAndSetBlockType,

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

@@ -1,17 +1,19 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { EditorView } from '@milkdown/kit/prose/view'
+
+import { SlashProvider, slashFactory } from '@milkdown/kit/plugin/slash'
 import {
   TextSelection,
   type PluginView,
   type Selection,
 } from '@milkdown/kit/prose/state'
-import type { EditorView } from '@milkdown/kit/prose/view'
-import { SlashProvider, slashFactory } from '@milkdown/kit/plugin/slash'
-import type { Ctx } from '@milkdown/kit/ctx'
-import type { AtomicoThis } from 'atomico/types/dom'
 import { $ctx } from '@milkdown/kit/utils'
-import { defIfNotExists, isInCodeBlock, isInList } from '../../../utils'
+import { createApp, ref, type App, type Ref } from 'vue'
+
 import type { BlockEditFeatureConfig } from '../index'
-import type { MenuProps } from './component'
-import { MenuElement } from './component'
+
+import { isInCodeBlock, isInList } from '../../../utils'
+import { Menu } from './component'
 
 export const menu = slashFactory('CREPE_MENU')
 
@@ -28,7 +30,6 @@ export const menuAPI = $ctx(
   'menuAPICtx'
 )
 
-defIfNotExists('milkdown-slash-menu', MenuElement)
 export function configureMenu(ctx: Ctx, config?: BlockEditFeatureConfig) {
   ctx.set(menu.key, {
     view: (view) => new MenuView(ctx, view, config),
@@ -36,16 +37,34 @@ export function configureMenu(ctx: Ctx, config?: BlockEditFeatureConfig) {
 }
 
 class MenuView implements PluginView {
-  readonly #content: AtomicoThis<MenuProps, HTMLElement>
+  readonly #content: HTMLElement
+  readonly #app: App
+  readonly #filter: Ref<string>
   readonly #slashProvider: SlashProvider
   #programmaticallyPos: number | null = null
 
   constructor(ctx: Ctx, view: EditorView, config?: BlockEditFeatureConfig) {
-    this.#content = new MenuElement()
-    this.#content.hide = this.hide
-    this.#content.ctx = ctx
-    this.#content.config = config
-    // eslint-disable-next-line ts/no-this-alias
+    const content = document.createElement('div')
+    content.classList.add('milkdown-slash-menu')
+    const show = ref(false)
+
+    const filter = ref('')
+    this.#filter = filter
+
+    const hide = this.hide
+
+    const app = createApp(Menu, {
+      ctx,
+      config,
+      show,
+      filter,
+      hide,
+    })
+    this.#app = app
+    app.mount(content)
+
+    this.#content = content
+    // oxlint-disable-next-line ts/no-this-alias
     const self = this
     this.#slashProvider = new SlashProvider({
       content: this.#content,
@@ -69,7 +88,7 @@ class MenuView implements PluginView {
 
         const pos = self.#programmaticallyPos
 
-        self.#content.filter = currentText.startsWith('/')
+        filter.value = currentText.startsWith('/')
           ? currentText.slice(1)
           : currentText
 
@@ -94,10 +113,10 @@ class MenuView implements PluginView {
     })
 
     this.#slashProvider.onShow = () => {
-      this.#content.show = true
+      show.value = true
     }
     this.#slashProvider.onHide = () => {
-      this.#content.show = false
+      show.value = false
     }
     this.update(view)
 
@@ -113,7 +132,7 @@ class MenuView implements PluginView {
 
   show = (pos: number) => {
     this.#programmaticallyPos = pos
-    this.#content.filter = ''
+    this.#filter.value = ''
     this.#slashProvider.show()
   }
 
@@ -124,6 +143,7 @@ class MenuView implements PluginView {
 
   destroy = () => {
     this.#slashProvider.destroy()
+    this.#app.unmount()
     this.#content.remove()
   }
 }

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

@@ -1,14 +1,14 @@
-import type { html } from 'atomico'
 import type { Ctx } from '@milkdown/kit/ctx'
-import type { Command, Transaction } from '@milkdown/kit/prose/state'
 import type { Attrs, NodeType } from '@milkdown/kit/prose/model'
+import type { Command, Transaction } from '@milkdown/kit/prose/state'
+
 import { findWrapping } from '@milkdown/kit/prose/transform'
 
 export interface MenuItem {
   index: number
   key: string
   label: string
-  icon: ReturnType<typeof html>
+  icon: string
   onRun: (ctx: Ctx) => void
 }
 

package/src/feature/code-mirror/index.ts

@@ -1,14 +1,16 @@
+import type { LanguageDescription } from '@codemirror/language'
+import type { Extension } from '@codemirror/state'
+
+import { defaultKeymap, indentWithTab } from '@codemirror/commands'
+import { keymap } from '@codemirror/view'
 import {
   codeBlockComponent,
   codeBlockConfig,
 } from '@milkdown/kit/component/code-block'
-import type { LanguageDescription } from '@codemirror/language'
-import type { Extension } from '@codemirror/state'
 import { basicSetup } from 'codemirror'
-import { keymap } from '@codemirror/view'
-import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-import { html } from 'atomico'
+
 import type { DefineFeature, Icon } from '../shared'
+
 import { chevronDownIcon, clearIcon, editIcon, searchIcon } from '../../icons'
 import { visibilityOffIcon } from '../../icons/visibility-off'
 
@@ -24,10 +26,7 @@ interface CodeMirrorConfig {
   searchPlaceholder: string
   noResultText: string
 
-  renderLanguage: (
-    language: string,
-    selected: boolean
-  ) => ReturnType<typeof html> | string
+  renderLanguage: (language: string, selected: boolean) => string
 
   renderPreview: (
     language: string,
@@ -35,8 +34,8 @@ interface CodeMirrorConfig {
   ) => string | HTMLElement | null
 
   previewToggleIcon: (previewOnlyMode: boolean) => ReturnType<Icon>
-  previewToggleText: (previewOnlyMode: boolean) => ReturnType<typeof html>
-  previewLabel: () => ReturnType<typeof html>
+  previewToggleText: (previewOnlyMode: boolean) => string
+  previewLabel: () => string
 }
 export type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>
 
@@ -66,20 +65,21 @@ export const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (
         ],
         languages,
 
-        expandIcon: config.expandIcon || (() => chevronDownIcon),
-        searchIcon: config.searchIcon || (() => searchIcon),
-        clearSearchIcon: config.clearSearchIcon || (() => clearIcon),
+        expandIcon: () => config.expandIcon?.() || chevronDownIcon,
+        searchIcon: () => config.searchIcon?.() || searchIcon,
+        clearSearchIcon: () => config.clearSearchIcon?.() || clearIcon,
         searchPlaceholder: config.searchPlaceholder || 'Search language',
         noResultText: config.noResultText || 'No result',
         renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,
         renderPreview: config.renderPreview || defaultConfig.renderPreview,
         previewToggleButton: (previewOnlyMode) => {
-          return html`
-            ${config.previewToggleIcon?.(previewOnlyMode) ||
-            (previewOnlyMode ? editIcon : visibilityOffIcon)}
-            ${config.previewToggleText?.(previewOnlyMode) ||
-            (previewOnlyMode ? 'Edit' : 'Hide')}
-          `
+          const icon =
+            config.previewToggleIcon?.(previewOnlyMode) ||
+            (previewOnlyMode ? editIcon : visibilityOffIcon)
+          const text =
+            config.previewToggleText?.(previewOnlyMode) ||
+            (previewOnlyMode ? 'Edit' : 'Hide')
+          return [icon, text].map((v) => v.trim()).join(' ')
         },
         previewLabel: config.previewLabel || defaultConfig.previewLabel,
       }))

package/src/feature/cursor/index.ts

@@ -1,8 +1,8 @@
 import { cursor, dropCursorConfig } from '@milkdown/kit/plugin/cursor'
+import { $prose } from '@milkdown/kit/utils'
 import { createVirtualCursor } from 'prosemirror-virtual-cursor'
 
 import type { DefineFeature } from '../shared'
-import { $prose } from '@milkdown/kit/utils'
 
 interface CursorConfig {
   color: string | false

package/src/feature/image-block/index.ts

@@ -6,8 +6,10 @@ import {
   imageInlineComponent,
   inlineImageConfig,
 } from '@milkdown/kit/component/image-inline'
+
 import type { DefineFeature, Icon } from '../shared'
-import { captionIcon, confirmIcon, imageIcon } from '../../icons'
+
+import { captionIcon, imageIcon, confirmIcon } from '../../icons'
 
 interface ImageBlockConfig {
   onUpload: (file: File) => Promise<string>

package/src/feature/index.ts

@@ -1,14 +1,15 @@
 import type { Editor } from '@milkdown/kit/core'
-import type { PlaceHolderFeatureConfig } from './placeholder'
-import type { CodeMirrorFeatureConfig } from './code-mirror'
+
 import type { BlockEditFeatureConfig } from './block-edit'
+import type { CodeMirrorFeatureConfig } from './code-mirror'
 import type { CursorFeatureConfig } from './cursor'
 import type { ImageBlockFeatureConfig } from './image-block'
+import type { LatexFeatureConfig } from './latex'
 import type { LinkTooltipFeatureConfig } from './link-tooltip'
 import type { ListItemFeatureConfig } from './list-item'
-import type { ToolbarFeatureConfig } from './toolbar'
+import type { PlaceHolderFeatureConfig } from './placeholder'
 import type { TableFeatureConfig } from './table'
-import type { LatexFeatureConfig } from './latex'
+import type { ToolbarFeatureConfig } from './toolbar'
 
 export enum CrepeFeature {
   CodeMirror = 'code-mirror',

package/src/feature/latex/index.ts

@@ -1,18 +1,19 @@
 import type { KatexOptions } from 'katex'
-import katex from 'katex'
+
 import { codeBlockConfig } from '@milkdown/kit/component/code-block'
+import katex from 'katex'
+
+import type { DefineFeature, Icon } from '../shared'
+
 import { CrepeFeature } from '../..'
 import { FeaturesCtx } from '../../core/slice'
-import type { DefineFeature, Icon } from '../shared'
-import { remarkMathBlockPlugin, remarkMathPlugin } from './remark'
+import { confirmIcon } from '../../icons'
+import { blockLatexSchema } from './block-latex'
 import { mathInlineSchema } from './inline-latex'
-import { defIfNotExists } from '../../utils'
-import { LatexInlineEditElement } from './inline-tooltip/component'
 import { inlineLatexTooltip } from './inline-tooltip/tooltip'
 import { LatexInlineTooltip } from './inline-tooltip/view'
-import { confirmIcon } from '../../icons'
 import { mathBlockInputRule, mathInlineInputRule } from './input-rule'
-import { blockLatexSchema } from './block-latex'
+import { remarkMathBlockPlugin, remarkMathPlugin } from './remark'
 
 export interface LatexConfig {
   katexOptions: KatexOptions
@@ -21,7 +22,6 @@ export interface LatexConfig {
 
 export type LatexFeatureConfig = Partial<LatexConfig>
 
-defIfNotExists('milkdown-latex-inline-edit', LatexInlineEditElement)
 export const defineFeature: DefineFeature<LatexFeatureConfig> = (
   editor,
   config

package/src/feature/latex/inline-tooltip/component.tsx

@@ -0,0 +1,57 @@
+import type { EditorView } from '@milkdown/kit/prose/view'
+
+import { Icon } from '@milkdown/kit/component'
+import { defineComponent, type ShallowRef, type VNodeRef, h } from 'vue'
+
+import type { LatexConfig } from '..'
+
+type LatexTooltipProps = {
+  config: Partial<LatexConfig>
+  innerView: ShallowRef<EditorView | null>
+  updateValue: ShallowRef<() => void>
+}
+
+h
+
+export const LatexTooltip = defineComponent<LatexTooltipProps>({
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    innerView: {
+      type: Object,
+      required: true,
+    },
+    updateValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const innerViewRef: VNodeRef = (el) => {
+      if (!el || !(el instanceof HTMLElement)) return
+      while (el.firstChild) {
+        el.removeChild(el.firstChild)
+      }
+      if (props.innerView.value) {
+        el.appendChild(props.innerView.value.dom)
+      }
+    }
+    const onUpdate = (e: Event) => {
+      e.preventDefault()
+      props.updateValue.value()
+    }
+
+    return () => {
+      return (
+        <div class="container">
+          {props.innerView && <div ref={innerViewRef} />}
+          <button onPointerdown={onUpdate}>
+            <Icon icon={props.config.inlineEditConfirm?.()} />
+          </button>
+        </div>
+      )
+    }
+  },
+})