@milkdown/crepe 7.8.0 → 7.9.0

package/src/feature/latex/inline-tooltip/view.ts

@@ -1,26 +1,41 @@
 import type { Ctx } from '@milkdown/kit/ctx'
-import { TooltipProvider } from '@milkdown/kit/plugin/tooltip'
 import type { PluginView } from '@milkdown/kit/prose/state'
+
+import { TooltipProvider } from '@milkdown/kit/plugin/tooltip'
+import { redo, undo } from '@milkdown/kit/prose/history'
+import { keymap } from '@milkdown/kit/prose/keymap'
+import { Schema } from '@milkdown/kit/prose/model'
 import { EditorState, NodeSelection } from '@milkdown/kit/prose/state'
 import { EditorView } from '@milkdown/kit/prose/view'
-import { mathInlineId } from '../inline-latex'
-import { LatexInlineEditElement } from './component'
+import { createApp, shallowRef, type App, type ShallowRef } from 'vue'
+
 import type { LatexConfig } from '..'
-import { keymap } from '@milkdown/kit/prose/keymap'
-import { redo, undo } from '@milkdown/kit/prose/history'
-import { Schema } from '@milkdown/kit/prose/model'
+
+import { mathInlineId } from '../inline-latex'
+import { LatexTooltip } from './component'
 
 export class LatexInlineTooltip implements PluginView {
-  #content = new LatexInlineEditElement()
+  #content: HTMLElement
   #provider: TooltipProvider
   #dom: HTMLElement
-  #innerView: EditorView | null
+  #innerView: ShallowRef<EditorView | null> = shallowRef(null)
+  #updateValue: ShallowRef<() => void> = shallowRef(() => {})
+  #app: App
 
   constructor(
     readonly ctx: Ctx,
     view: EditorView,
     config: Partial<LatexConfig>
   ) {
+    const content = document.createElement('div')
+    content.className = 'milkdown-latex-inline-edit'
+    this.#content = content
+    this.#app = createApp(LatexTooltip, {
+      config,
+      innerView: this.#innerView,
+      updateValue: this.#updateValue,
+    })
+    this.#app.mount(content)
     this.#provider = new TooltipProvider({
       debounce: 0,
       content: this.#content,
@@ -30,16 +45,14 @@ export class LatexInlineTooltip implements PluginView {
         placement: 'bottom',
       },
     })
-    this.#content.config = config
     this.#provider.update(view)
     this.#dom = document.createElement('div')
-    this.#innerView = null
   }
 
   #onHide = () => {
-    if (this.#innerView) {
-      this.#innerView.destroy()
-      this.#innerView = null
+    if (this.#innerView.value) {
+      this.#innerView.value.destroy()
+      this.#innerView.value = null
     }
   }
 
@@ -85,7 +98,7 @@ export class LatexInlineTooltip implements PluginView {
               'Mod-Z': redo,
               'Mod-y': redo,
               Enter: () => {
-                this.#content.updateValue?.()
+                this.#updateValue.value()
                 return true
               },
             }),
@@ -93,9 +106,8 @@ export class LatexInlineTooltip implements PluginView {
         }),
       })
 
-      this.#innerView = innerView
-      this.#content.innerView = this.#innerView
-      this.#content.updateValue = () => {
+      this.#innerView.value = innerView
+      this.#updateValue.value = () => {
         const { tr } = view.state
         tr.setNodeAttribute(textFrom, 'value', innerView.state.doc.textContent)
         view.dispatch(tr)
@@ -116,6 +128,7 @@ export class LatexInlineTooltip implements PluginView {
   }
 
   destroy = () => {
+    this.#app.unmount()
     this.#provider.destroy()
     this.#content.remove()
   }

package/src/feature/latex/input-rule.ts

@@ -1,8 +1,9 @@
-import { $inputRule } from '@milkdown/kit/utils'
-import { nodeRule } from '@milkdown/kit/prose'
-import { mathInlineSchema } from './inline-latex'
 import { codeBlockSchema } from '@milkdown/kit/preset/commonmark'
+import { nodeRule } from '@milkdown/kit/prose'
 import { textblockTypeInputRule } from '@milkdown/kit/prose/inputrules'
+import { $inputRule } from '@milkdown/kit/utils'
+
+import { mathInlineSchema } from './inline-latex'
 
 /// Input rule for inline math.
 /// When you type $E=MC^2$, it will create an inline math node.

package/src/feature/latex/remark.ts

@@ -1,6 +1,7 @@
-import remarkMath from 'remark-math'
-import { $remark } from '@milkdown/kit/utils'
 import type { Node } from '@milkdown/kit/transformer'
+
+import { $remark } from '@milkdown/kit/utils'
+import remarkMath from 'remark-math'
 import { visit } from 'unist-util-visit'
 
 export const remarkMathPlugin = $remark<'remarkMath', undefined>(

package/src/feature/link-tooltip/index.ts

@@ -3,8 +3,10 @@ import {
   linkTooltipConfig,
   linkTooltipPlugin,
 } from '@milkdown/kit/component/link-tooltip'
+
 import type { DefineFeature, Icon } from '../shared'
-import { confirmIcon, copyIcon, editIcon, removeIcon } from '../../icons'
+
+import { copyIcon, editIcon, removeIcon, confirmIcon } from '../../icons'
 
 interface LinkTooltipConfig {
   linkIcon: Icon

package/src/feature/list-item/index.ts

@@ -1,11 +1,12 @@
 import type { Ctx } from '@milkdown/kit/ctx'
+
 import {
   listItemBlockComponent,
   listItemBlockConfig,
 } from '@milkdown/kit/component/list-item-block'
-import { html } from 'atomico'
-import clsx from 'clsx'
+
 import type { DefineFeature, Icon } from '../shared'
+
 import {
   bulletIcon,
   checkBoxCheckedIcon,
@@ -22,25 +23,16 @@ export type ListItemFeatureConfig = Partial<ListItemConfig>
 
 function configureListItem(ctx: Ctx, config?: ListItemFeatureConfig) {
   ctx.set(listItemBlockConfig.key, {
-    renderLabel: ({ label, listType, checked, readonly }) => {
+    renderLabel: ({ label, listType, checked }) => {
       if (checked == null) {
-        if (listType === 'bullet')
-          return html`<span class="label"
-            >${config?.bulletIcon?.() ?? bulletIcon}</span
-          >`
+        if (listType === 'bullet') return config?.bulletIcon?.() ?? bulletIcon
 
-        return html`<span class="label">${label}</span>`
+        return label
       }
 
-      if (checked)
-        return html`<span
-          class=${clsx('label checkbox', readonly && 'readonly')}
-          >${config?.checkBoxCheckedIcon?.() ?? checkBoxCheckedIcon}</span
-        >`
+      if (checked) return config?.checkBoxCheckedIcon?.() ?? checkBoxCheckedIcon
 
-      return html`<span class=${clsx('label checkbox', readonly && 'readonly')}
-        >${config?.checkBoxUncheckedIcon?.() ?? checkBoxUncheckedIcon}</span
-      >`
+      return config?.checkBoxUncheckedIcon?.() ?? checkBoxUncheckedIcon
     },
   })
 }

package/src/feature/placeholder/index.ts

@@ -1,10 +1,13 @@
-import { $ctx, $prose } from '@milkdown/kit/utils'
+import type { Node } from '@milkdown/kit/prose/model'
 import type { EditorState } from '@milkdown/kit/prose/state'
+
+import { findParent } from '@milkdown/kit/prose'
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state'
-import type { Node } from '@milkdown/kit/prose/model'
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view'
-import { findParent } from '@milkdown/kit/prose'
+import { $ctx, $prose } from '@milkdown/kit/utils'
+
 import type { DefineFeature } from '../shared'
+
 import { isInCodeBlock, isInList } from '../../utils'
 
 function isDocEmpty(doc: Node) {

package/src/feature/shared.ts

@@ -1,9 +1,8 @@
 import type { Editor } from '@milkdown/kit/core'
-import type { html } from 'atomico'
 
 export type DefineFeature<Config = unknown> = (
   editor: Editor,
   config?: Config
 ) => void | Promise<void>
 
-export type Icon = () => ReturnType<typeof html> | string | null
+export type Icon = () => string

package/src/feature/table/index.ts

@@ -2,7 +2,9 @@ import {
   tableBlock,
   tableBlockConfig,
 } from '@milkdown/kit/component/table-block'
+
 import type { DefineFeature, Icon } from '../shared'
+
 import {
   alignCenterIcon,
   alignLeftIcon,

package/src/feature/toolbar/component.tsx

@@ -0,0 +1,256 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { MarkType, NodeType, Node } from '@milkdown/kit/prose/model'
+
+import { Icon } from '@milkdown/kit/component'
+import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
+import {
+  emphasisSchema,
+  inlineCodeSchema,
+  linkSchema,
+  strongSchema,
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleStrongCommand,
+} from '@milkdown/kit/preset/commonmark'
+import {
+  strikethroughSchema,
+  toggleStrikethroughCommand,
+} from '@milkdown/kit/preset/gfm'
+import {
+  NodeSelection,
+  TextSelection,
+  type Selection,
+} from '@milkdown/kit/prose/state'
+import clsx from 'clsx'
+import { defineComponent, type Ref, type ShallowRef, h, Fragment } from 'vue'
+
+import type { ToolbarFeatureConfig } from '.'
+
+import { CrepeFeature } from '../..'
+import { FeaturesCtx } from '../../core/slice'
+import {
+  boldIcon,
+  codeIcon,
+  functionsIcon,
+  italicIcon,
+  linkIcon,
+  strikethroughIcon,
+} from '../../icons'
+import { mathInlineSchema } from '../latex/inline-latex'
+
+h
+Fragment
+
+type ToolbarProps = {
+  ctx: Ctx
+  hide: () => void
+  show: Ref<boolean>
+  selection: ShallowRef<Selection>
+  config?: ToolbarFeatureConfig
+}
+
+export const Toolbar = defineComponent<ToolbarProps>({
+  props: {
+    ctx: {
+      type: Object,
+      required: true,
+    },
+    hide: {
+      type: Function,
+      required: true,
+    },
+    show: {
+      type: Object,
+      required: true,
+    },
+    selection: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+  setup(props) {
+    const { ctx, hide, config } = props
+
+    const onClick = (fn: (ctx: Ctx) => void) => (e: MouseEvent) => {
+      e.preventDefault()
+      ctx && fn(ctx)
+    }
+
+    const isActive = (mark: MarkType) => {
+      const selection = props.selection.value
+      if (!ctx || !selection) return false
+      const { state } = ctx.get(editorViewCtx)
+      if (!state) return false
+      const { doc } = state
+      return doc.rangeHasMark(selection.from, selection.to, mark)
+    }
+
+    const containsNode = (node: NodeType) => {
+      const selection = props.selection.value
+      if (!ctx || !selection) return false
+      const { state } = ctx.get(editorViewCtx)
+      if (!state) return false
+      const { doc } = state
+      if (selection instanceof NodeSelection) {
+        return selection.node.type === node
+      }
+
+      const { from, to } = selection
+
+      let hasNode = false
+      doc.nodesBetween(from, to, (n) => {
+        if (n.type === node) {
+          hasNode = true
+          return false
+        }
+        return true
+      })
+
+      return hasNode
+    }
+
+    const flags = ctx?.get(FeaturesCtx)
+    const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
+
+    const toggleLatex = (ctx: Ctx) => {
+      const hasLatex = containsNode(mathInlineSchema.type(ctx))
+      const view = ctx.get(editorViewCtx)
+      const { selection, doc, tr } = view.state
+      if (!hasLatex) {
+        const text = doc.textBetween(selection.from, selection.to)
+        let _tr = tr.replaceSelectionWith(
+          mathInlineSchema.type(ctx).create({
+            value: text,
+          })
+        )
+        view.dispatch(
+          _tr.setSelection(NodeSelection.create(_tr.doc, selection.from))
+        )
+        return
+      }
+
+      const { from, to } = selection
+      let pos = -1
+      let node: Node | null = null
+      doc.nodesBetween(from, to, (n, p) => {
+        if (node) return false
+        if (n.type === mathInlineSchema.type(ctx)) {
+          pos = p
+          node = n
+          return false
+        }
+        return true
+      })
+      if (!node || pos < 0) return
+
+      let _tr = tr.delete(pos, pos + 1)
+      const content = (node as Node).attrs.value
+      _tr = _tr.insertText(content, pos)
+      view.dispatch(
+        _tr.setSelection(
+          TextSelection.create(_tr.doc, from, to + content.length - 1)
+        )
+      )
+    }
+
+    return () => {
+      return (
+        <>
+          <button
+            type="button"
+            class={clsx(
+              'toolbar-item',
+              ctx && isActive(strongSchema.type(ctx)) && 'active'
+            )}
+            onPointerdown={onClick((ctx) => {
+              const commands = ctx.get(commandsCtx)
+              commands.call(toggleStrongCommand.key)
+            })}
+          >
+            <Icon icon={config?.boldIcon?.() ?? boldIcon} />
+          </button>
+          <button
+            type="button"
+            class={clsx(
+              'toolbar-item',
+              ctx && isActive(emphasisSchema.type(ctx)) && 'active'
+            )}
+            onPointerdown={onClick((ctx) => {
+              const commands = ctx.get(commandsCtx)
+              commands.call(toggleEmphasisCommand.key)
+            })}
+          >
+            <Icon icon={config?.italicIcon?.() ?? italicIcon} />
+          </button>
+          <button
+            type="button"
+            class={clsx(
+              'toolbar-item',
+              ctx && isActive(strikethroughSchema.type(ctx)) && 'active'
+            )}
+            onPointerdown={onClick((ctx) => {
+              const commands = ctx.get(commandsCtx)
+              commands.call(toggleStrikethroughCommand.key)
+            })}
+          >
+            <Icon icon={config?.strikethroughIcon?.() ?? strikethroughIcon} />
+          </button>
+          <div class="divider"></div>
+          <button
+            type="button"
+            class={clsx(
+              'toolbar-item',
+              ctx && isActive(inlineCodeSchema.type(ctx)) && 'active'
+            )}
+            onPointerdown={onClick((ctx) => {
+              const commands = ctx.get(commandsCtx)
+              commands.call(toggleInlineCodeCommand.key)
+            })}
+          >
+            <Icon icon={config?.codeIcon?.() ?? codeIcon} />
+          </button>
+          {isLatexEnabled && (
+            <button
+              type="button"
+              class={clsx(
+                'toolbar-item',
+                ctx && containsNode(mathInlineSchema.type(ctx)) && 'active'
+              )}
+              onPointerdown={onClick(toggleLatex)}
+            >
+              <Icon icon={config?.latexIcon?.() ?? functionsIcon} />
+            </button>
+          )}
+          <button
+            type="button"
+            class={clsx(
+              'toolbar-item',
+              ctx && isActive(linkSchema.type(ctx)) && 'active'
+            )}
+            onPointerdown={onClick((ctx) => {
+              const view = ctx.get(editorViewCtx)
+              const { selection } = view.state
+
+              if (isActive(linkSchema.type(ctx))) {
+                ctx
+                  .get(linkTooltipAPI.key)
+                  .removeLink(selection.from, selection.to)
+                return
+              }
+
+              ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)
+              hide?.()
+            })}
+          >
+            <Icon icon={config?.linkIcon?.() ?? linkIcon} />
+          </button>
+        </>
+      )
+    }
+  },
+})

package/src/feature/toolbar/index.ts

@@ -1,13 +1,18 @@
-import { TooltipProvider, tooltipFactory } from '@milkdown/kit/plugin/tooltip'
-import type { EditorState, PluginView } from '@milkdown/kit/prose/state'
-import { TextSelection } from '@milkdown/kit/prose/state'
 import type { Ctx } from '@milkdown/kit/ctx'
+import type {
+  EditorState,
+  PluginView,
+  Selection,
+} from '@milkdown/kit/prose/state'
 import type { EditorView } from '@milkdown/kit/prose/view'
-import type { AtomicoThis } from 'atomico/types/dom'
+
+import { TooltipProvider, tooltipFactory } from '@milkdown/kit/plugin/tooltip'
+import { TextSelection } from '@milkdown/kit/prose/state'
+import { createApp, ref, shallowRef, type App, type ShallowRef } from 'vue'
+
 import type { DefineFeature, Icon } from '../shared'
-import { defIfNotExists } from '../../utils'
-import type { ToolbarProps } from './component'
-import { ToolbarElement } from './component'
+
+import { Toolbar } from './component'
 
 interface ToolbarConfig {
   boldIcon: Icon
@@ -24,14 +29,26 @@ const toolbar = tooltipFactory('CREPE_TOOLBAR')
 
 class ToolbarView implements PluginView {
   #tooltipProvider: TooltipProvider
-  #content: AtomicoThis<ToolbarProps>
+  #content: HTMLElement
+  #app: App
+  #selection: ShallowRef<Selection>
+  #show = ref(false)
+
   constructor(ctx: Ctx, view: EditorView, config?: ToolbarFeatureConfig) {
-    const content = new ToolbarElement()
+    const content = document.createElement('div')
+    content.className = 'milkdown-toolbar'
+    this.#selection = shallowRef(view.state.selection)
+    const app = createApp(Toolbar, {
+      ctx,
+      hide: this.hide,
+      config,
+      selection: this.#selection,
+      show: this.#show,
+    })
+    app.mount(content)
     this.#content = content
-    this.#content.ctx = ctx
-    this.#content.hide = this.hide
-    this.#content.config = config
-    this.#content.selection = view.state.selection
+    this.#app = app
+
     this.#tooltipProvider = new TooltipProvider({
       content: this.#content,
       debounce: 20,
@@ -67,21 +84,22 @@ class ToolbarView implements PluginView {
       },
     })
     this.#tooltipProvider.onShow = () => {
-      this.#content.show = true
+      this.#show.value = true
     }
     this.#tooltipProvider.onHide = () => {
-      this.#content.show = false
+      this.#show.value = false
     }
     this.update(view)
   }
 
   update = (view: EditorView, prevState?: EditorState) => {
     this.#tooltipProvider.update(view, prevState)
-    this.#content.selection = view.state.selection
+    this.#selection.value = view.state.selection
   }
 
   destroy = () => {
     this.#tooltipProvider.destroy()
+    this.#app.unmount()
     this.#content.remove()
   }
 
@@ -90,7 +108,6 @@ class ToolbarView implements PluginView {
   }
 }
 
-defIfNotExists('milkdown-toolbar', ToolbarElement)
 export const defineFeature: DefineFeature<ToolbarFeatureConfig> = (
   editor,
   config

package/src/icons/align-center.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const alignCenterIcon = html`
+export const alignCenterIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/align-left.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const alignLeftIcon = html`
+export const alignLeftIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/align-right.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const alignRightIcon = html`
+export const alignRightIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/bold.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const boldIcon = html`
+export const boldIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/bullet-list.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const bulletListIcon = html`
+export const bulletListIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/bullet.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const bulletIcon = html`
+export const bulletIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/caption.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const captionIcon = html`
+export const captionIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="32"

package/src/icons/check-box-checked.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const checkBoxCheckedIcon = html`
+export const checkBoxCheckedIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/check-box-unchecked.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const checkBoxUncheckedIcon = html`
+export const checkBoxUncheckedIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/chevron-down.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const chevronDownIcon = html`
+export const chevronDownIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"

package/src/icons/clear.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const clearIcon = html`
+export const clearIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

package/src/icons/code.ts

@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const codeIcon = html`
+export const codeIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"