@milkdown/crepe 7.5.9 → 7.6.1

package/src/feature/toolbar/component.ts

@@ -11,7 +11,8 @@ import {
   toggleInlineCodeCommand,
   toggleStrongCommand,
 } from '@milkdown/kit/preset/commonmark'
-import type { MarkType } from '@milkdown/kit/prose/model'
+import type { MarkType, Node, NodeType } from '@milkdown/kit/prose/model'
+import type { Selection } from '@milkdown/kit/prose/state'
 import clsx from 'clsx'
 import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
 import {
@@ -26,11 +27,17 @@ import {
   strikethroughIcon,
 } from '../../icons'
 import type { ToolbarFeatureConfig } from './index'
+import { functionsIcon } from '../../icons/functions'
+import { NodeSelection, TextSelection } from '@milkdown/kit/prose/state'
+import { mathInlineSchema } from '../latex/inline-latex'
+import { FeaturesCtx } from '../../core/slice'
+import { CrepeFeature } from '../..'
 
 export interface ToolbarProps {
   ctx: Ctx
   hide: () => void
   show: boolean
+  selection: Selection
   config?: ToolbarFeatureConfig
 }
 
@@ -39,6 +46,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({
   hide,
   show,
   config,
+  selection,
 }) => {
   const update = useUpdate()
   useEffect(() => {
@@ -52,14 +60,82 @@ export const toolbarComponent: Component<ToolbarProps> = ({
   }
 
   const isActive = (mark: MarkType) => {
-    if (!ctx) return false
+    if (!ctx || !selection) return false
     const view = ctx.get(editorViewCtx)
     const {
-      state: { doc, selection },
+      state: { doc },
     } = view
     return doc.rangeHasMark(selection.from, selection.to, mark)
   }
 
+  const containsNode = (node: NodeType) => {
+    if (!ctx || !selection) return false
+    const view = ctx.get(editorViewCtx)
+    const {
+      state: { doc },
+    } = view
+    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 html`<host>
     <button
       type="button"
@@ -114,6 +190,17 @@ export const toolbarComponent: Component<ToolbarProps> = ({
     >
       ${config?.codeIcon?.() ?? codeIcon}
     </button>
+    ${isLatexEnabled &&
+    html`<button
+      type="button"
+      class=${clsx(
+        'toolbar-item',
+        ctx && containsNode(mathInlineSchema.type(ctx)) && 'active'
+      )}
+      onmousedown=${onClick(toggleLatex)}
+    >
+      ${config?.latexIcon?.() ?? functionsIcon}
+    </button>`}
     <button
       type="button"
       class=${clsx(
@@ -143,6 +230,7 @@ toolbarComponent.props = {
   hide: Function,
   show: Boolean,
   config: Object,
+  selection: Object,
 }
 
 export const ToolbarElement = c(toolbarComponent)

package/src/feature/toolbar/index.ts

@@ -15,6 +15,7 @@ interface ToolbarConfig {
   italicIcon: Icon
   linkIcon: Icon
   strikethroughIcon: Icon
+  latexIcon: Icon
 }
 
 export type ToolbarFeatureConfig = Partial<ToolbarConfig>
@@ -30,7 +31,7 @@ class ToolbarView implements PluginView {
     this.#content.ctx = ctx
     this.#content.hide = this.hide
     this.#content.config = config
-
+    this.#content.selection = view.state.selection
     this.#tooltipProvider = new TooltipProvider({
       content: this.#content,
       debounce: 20,
@@ -76,6 +77,7 @@ class ToolbarView implements PluginView {
 
   update = (view: EditorView, prevState?: EditorState) => {
     this.#tooltipProvider.update(view, prevState)
+    this.#content.selection = view.state.selection
   }
 
   destroy = () => {

package/src/icons/functions.ts

@@ -0,0 +1,15 @@
+import { html } from 'atomico'
+
+export const functionsIcon = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M7 19v-.808L13.096 12L7 5.808V5h10v1.25H9.102L14.727 12l-5.625 5.77H17V19z"
+    />
+  </svg>
+`

package/src/icons/index.ts

@@ -1,19 +1,19 @@
-export * from './alignCenter'
-export * from './alignLeft'
-export * from './alignRight'
+export * from './align-center'
+export * from './align-left'
+export * from './align-right'
 export * from './bold'
 export * from './bullet'
-export * from './bulletList'
+export * from './bullet-list'
 export * from './caption'
-export * from './checkBoxChecked'
-export * from './checkBoxUnchecked'
-export * from './chevronDown'
+export * from './check-box-checked'
+export * from './check-box-unchecked'
+export * from './chevron-down'
 export * from './clear'
 export * from './code'
 export * from './confirm'
 export * from './copy'
 export * from './divider'
-export * from './dragHandle'
+export * from './drag-handle'
 export * from './edit'
 export * from './h1'
 export * from './h2'
@@ -25,7 +25,7 @@ export * from './image'
 export * from './italic'
 export * from './link'
 export * from './menu'
-export * from './orderedList'
+export * from './ordered-list'
 export * from './plus'
 export * from './quote'
 export * from './remove'
@@ -33,4 +33,4 @@ export * from './search'
 export * from './strikethrough'
 export * from './table'
 export * from './text'
-export * from './todoList'
+export * from './todo-list'

package/src/icons/visibility-off.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const visibilityOffIcon = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 -960 960 960"
+    width="24px"
+  >
+    <path
+      d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"
+    />
+  </svg>
+`

package/src/theme/common/code-mirror.css

@@ -19,7 +19,7 @@
     }
 
     .hidden {
-      display: none;
+      display: none !important;
     }
 
     &.selected {
@@ -36,49 +36,79 @@
       background: var(--crepe-color-surface);
     }
 
-    .language-button {
+    .tools {
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      font-family: var(--crepe-font-default);
-      gap: 6px;
-      padding: 2px 4px 2px 8px;
-      background: var(--crepe-color-surface-low);
-      color: var(--crepe-color-on-surface-variant);
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 600;
-      line-height: 16px;
-      margin-bottom: 8px;
-      opacity: 0;
-      cursor: pointer;
-      transition: opacity 0.2s ease-in-out;
 
-      &:hover {
-        background: var(--crepe-color-hover);
+      .preview-toggle-button {
+        background: var(--crepe-color-secondary);
+        color: var(--crepe-color-on-surface-variant);
+        padding: 4px 10px;
+        opacity: 0;
+        cursor: pointer;
+        border-radius: 100px;
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 600;
+        font-family: var(--crepe-font-default);
+        transition: opacity 0.2s ease-in-out;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+
+        svg {
+          width: 14px;
+          height: 14px;
+          fill: var(--crepe-color-on-surface-variant);
+        }
       }
 
-      .expand-icon {
-        transition: transform 0.2s ease-in-out;
-        width: 18px;
-        height: 18px;
+      .language-button {
         display: flex;
-        justify-content: center;
         align-items: center;
-      }
+        font-family: var(--crepe-font-default);
+        gap: 6px;
+        padding: 2px 4px 2px 8px;
+        background: var(--crepe-color-surface-low);
+        color: var(--crepe-color-on-surface-variant);
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 16px;
+        margin-bottom: 8px;
+        opacity: 0;
+        cursor: pointer;
+        transition: opacity 0.2s ease-in-out;
 
-      .expand-icon svg {
-        width: 14px;
-        height: 14px;
-        color: var(--crepe-color-outline);
-      }
+        &:hover {
+          background: var(--crepe-color-hover);
+        }
 
-      &[data-expanded='true'] .expand-icon {
-        transform: rotate(180deg);
-      }
+        .expand-icon {
+          transition: transform 0.2s ease-in-out;
+          width: 18px;
+          height: 18px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
 
-      .expand-icon svg:focus,
-      .expand-icon:focus-visible {
-        outline: none;
+        .expand-icon svg {
+          width: 14px;
+          height: 14px;
+          color: var(--crepe-color-outline);
+        }
+
+        &[data-expanded='true'] .expand-icon {
+          transform: rotate(180deg);
+        }
+
+        .expand-icon svg:focus,
+        .expand-icon:focus-visible {
+          outline: none;
+        }
       }
     }
 
@@ -86,6 +116,10 @@
       opacity: 1;
     }
 
+    &:hover .preview-toggle-button {
+      opacity: 1;
+    }
+
     .list-wrapper {
       background: var(--crepe-color-surface-low);
       border-radius: 12px;
@@ -185,5 +219,32 @@
         outline: none;
       }
     }
+
+    .preview-panel {
+      .preview-divider {
+        height: 1px;
+        opacity: 0.2;
+        background: var(--crepe-color-outline);
+        margin: 6px 0;
+      }
+
+      .preview-label {
+        margin: 6px 0;
+        font-size: 12px;
+        color: color-mix(
+          in srgb,
+          var(--crepe-color-on-surface),
+          transparent 40%
+        );
+        font-weight: 600;
+        text-transform: uppercase;
+        font-family: var(--crepe-font-default);
+      }
+
+      .preview {
+        text-align: center;
+        overflow-x: auto;
+      }
+    }
   }
 }

package/src/theme/common/latex.css

@@ -0,0 +1,44 @@
+@import 'katex/dist/katex.min.css';
+
+.milkdown {
+  span[data-type='math_inline'] {
+    padding: 0 4px;
+    display: inline-block;
+    vertical-align: bottom;
+    color: var(--crepe-color-primary);
+  }
+
+  milkdown-latex-inline-edit {
+    &[data-show='false'] {
+      display: none;
+    }
+    position: absolute;
+    background: var(--crepe-color-surface);
+    box-shadow: var(--crepe-shadow-1);
+    border-radius: 8px;
+    padding: 2px 6px 2px 12px;
+
+    .container {
+      display: flex;
+      gap: 6px;
+      align-items: flex-start;
+
+      button {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        border-radius: 8px;
+        &:hover {
+          background: var(--crepe-color-hover);
+        }
+      }
+    }
+
+    .ProseMirror {
+      padding: 0;
+      min-width: 174px;
+      max-width: 294px;
+      font-family: var(--crepe-font-code);
+    }
+  }
+}

package/src/theme/common/style.css

@@ -8,3 +8,4 @@
 @import './placeholder.css';
 @import './toolbar.css';
 @import './table.css';
+@import './latex.css';

package/lib/cjs/index-3mj4YaCA.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var codeBlock = require('@milkdown/kit/component/code-block');
-var codemirror = require('codemirror');
-var view = require('@codemirror/view');
-var commands = require('@codemirror/commands');
-var todoList = require('./todoList-V4JWO5-M.js');
-require('atomico');
-
-const defineFeature = (editor, config = {}) => {
-  editor.config(async (ctx) => {
-    let { languages, theme } = config;
-    if (!languages) {
-      const { languages: langList } = await import('@codemirror/language-data');
-      languages = langList;
-    }
-    if (!theme) {
-      const { oneDark } = await import('@codemirror/theme-one-dark');
-      theme = oneDark;
-    }
-    ctx.update(codeBlock.codeBlockConfig.key, (defaultConfig) => {
-      var _a;
-      return {
-        extensions: [
-          view.keymap.of(commands.defaultKeymap.concat(commands.indentWithTab)),
-          codemirror.basicSetup,
-          theme,
-          ...(_a = config == null ? void 0 : config.extensions) != null ? _a : []
-        ],
-        languages,
-        expandIcon: config.expandIcon || (() => todoList.chevronDownIcon),
-        searchIcon: config.searchIcon || (() => todoList.searchIcon),
-        clearSearchIcon: config.clearSearchIcon || (() => todoList.clearIcon),
-        searchPlaceholder: config.searchPlaceholder || "Search language",
-        noResultText: config.noResultText || "No result",
-        renderLanguage: config.renderLanguage || defaultConfig.renderLanguage
-      };
-    });
-  }).use(codeBlock.codeBlockComponent);
-};
-
-exports.defineFeature = defineFeature;
-//# sourceMappingURL=index-3mj4YaCA.js.map

package/lib/cjs/index-3mj4YaCA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-3mj4YaCA.js","sources":["../../src/feature/code-mirror/index.ts"],"sourcesContent":["import {\n  codeBlockComponent,\n  codeBlockConfig,\n} from '@milkdown/kit/component/code-block'\nimport type { LanguageDescription } from '@codemirror/language'\nimport type { Extension } from '@codemirror/state'\nimport { basicSetup } from 'codemirror'\nimport { keymap } from '@codemirror/view'\nimport { defaultKeymap, indentWithTab } from '@codemirror/commands'\nimport type { html } from 'atomico'\nimport type { DefineFeature, Icon } from '../shared'\nimport { chevronDownIcon, clearIcon, searchIcon } from '../../icons'\n\ninterface CodeMirrorConfig {\n  extensions: Extension[]\n  languages: LanguageDescription[]\n  theme: Extension\n\n  expandIcon: Icon\n  searchIcon: Icon\n  clearSearchIcon: Icon\n\n  searchPlaceholder: string\n  noResultText: string\n\n  renderLanguage: (\n    language: string,\n    selected: boolean\n  ) => ReturnType<typeof html> | string | HTMLElement\n}\nexport type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>\n\nexport const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (\n  editor,\n  config = {}\n) => {\n  editor\n    .config(async (ctx) => {\n      let { languages, theme } = config\n      if (!languages) {\n        const { languages: langList } = await import(\n          '@codemirror/language-data'\n        )\n        languages = langList\n      }\n      if (!theme) {\n        const { oneDark } = await import('@codemirror/theme-one-dark')\n        theme = oneDark\n      }\n      ctx.update(codeBlockConfig.key, (defaultConfig) => ({\n        extensions: [\n          keymap.of(defaultKeymap.concat(indentWithTab)),\n          basicSetup,\n          theme,\n          ...(config?.extensions ?? []),\n        ],\n        languages,\n\n        expandIcon: config.expandIcon || (() => chevronDownIcon),\n        searchIcon: config.searchIcon || (() => searchIcon),\n        clearSearchIcon: config.clearSearchIcon || (() => clearIcon),\n        searchPlaceholder: config.searchPlaceholder || 'Search language',\n        noResultText: config.noResultText || 'No result',\n        renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,\n      }))\n    })\n    .use(codeBlockComponent)\n}\n"],"names":["codeBlockConfig","keymap","defaultKeymap","indentWithTab","basicSetup","chevronDownIcon","searchIcon","clearIcon","codeBlockComponent"],"mappings":";;;;;;;;;AAgCO,MAAM,aAAwD,GAAA,CACnE,MACA,EAAA,MAAA,GAAS,EACN,KAAA;AACH,EACG,MAAA,CAAA,MAAA,CAAO,OAAO,GAAQ,KAAA;AACrB,IAAI,IAAA,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,MAAA;AAC3B,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAa,GAAA,MAAM,OACpC,2BACF,CAAA;AACA,MAAY,SAAA,GAAA,QAAA;AAAA;AAEd,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAA,MAAM,EAAE,OAAA,EAAY,GAAA,MAAM,OAAO,4BAA4B,CAAA;AAC7D,MAAQ,KAAA,GAAA,OAAA;AAAA;AAEV,IAAA,GAAA,CAAI,MAAO,CAAAA,yBAAA,CAAgB,GAAK,EAAA,CAAC,aAAe,KAAA;AAjDtD,MAAA,IAAA,EAAA;AAiD0D,MAAA,OAAA;AAAA,QAClD,UAAY,EAAA;AAAA,UACVC,WAAO,CAAA,EAAA,CAAGC,sBAAc,CAAA,MAAA,CAAOC,sBAAa,CAAC,CAAA;AAAA,UAC7CC,qBAAA;AAAA,UACA,KAAA;AAAA,UACA,GAAI,CAAA,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,UAAR,KAAA,IAAA,GAAA,EAAA,GAAsB;AAAC,SAC7B;AAAA,QACA,SAAA;AAAA,QAEA,UAAA,EAAY,MAAO,CAAA,UAAA,KAAe,MAAMC,wBAAA,CAAA;AAAA,QACxC,UAAA,EAAY,MAAO,CAAA,UAAA,KAAe,MAAMC,mBAAA,CAAA;AAAA,QACxC,eAAA,EAAiB,MAAO,CAAA,eAAA,KAAoB,MAAMC,kBAAA,CAAA;AAAA,QAClD,iBAAA,EAAmB,OAAO,iBAAqB,IAAA,iBAAA;AAAA,QAC/C,YAAA,EAAc,OAAO,YAAgB,IAAA,WAAA;AAAA,QACrC,cAAA,EAAgB,MAAO,CAAA,cAAA,IAAkB,aAAc,CAAA;AAAA,OACzD;AAAA,KAAE,CAAA;AAAA,GACH,CACA,CAAA,GAAA,CAAIC,4BAAkB,CAAA;AAC3B;;;;"}

package/lib/cjs/index-A8IrOmzS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-A8IrOmzS.js","sources":["../../src/feature/toolbar/component.ts","../../src/feature/toolbar/index.ts"],"sourcesContent":["import type { Component } from 'atomico'\nimport { c, html, useEffect, useUpdate } from 'atomico'\nimport type { Ctx } from '@milkdown/kit/ctx'\nimport { commandsCtx, editorViewCtx } from '@milkdown/kit/core'\nimport {\n  emphasisSchema,\n  inlineCodeSchema,\n  linkSchema,\n  strongSchema,\n  toggleEmphasisCommand,\n  toggleInlineCodeCommand,\n  toggleStrongCommand,\n} from '@milkdown/kit/preset/commonmark'\nimport type { MarkType } from '@milkdown/kit/prose/model'\nimport clsx from 'clsx'\nimport { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'\nimport {\n  strikethroughSchema,\n  toggleStrikethroughCommand,\n} from '@milkdown/kit/preset/gfm'\nimport {\n  boldIcon,\n  codeIcon,\n  italicIcon,\n  linkIcon,\n  strikethroughIcon,\n} from '../../icons'\nimport type { ToolbarFeatureConfig } from './index'\n\nexport interface ToolbarProps {\n  ctx: Ctx\n  hide: () => void\n  show: boolean\n  config?: ToolbarFeatureConfig\n}\n\nexport const toolbarComponent: Component<ToolbarProps> = ({\n  ctx,\n  hide,\n  show,\n  config,\n}) => {\n  const update = useUpdate()\n  useEffect(() => {\n    update()\n  }, [show])\n\n  const onClick = (fn: (ctx: Ctx) => void) => (e: MouseEvent) => {\n    e.preventDefault()\n    ctx && fn(ctx)\n    update()\n  }\n\n  const isActive = (mark: MarkType) => {\n    if (!ctx) return false\n    const view = ctx.get(editorViewCtx)\n    const {\n      state: { doc, selection },\n    } = view\n    return doc.rangeHasMark(selection.from, selection.to, mark)\n  }\n\n  return html`<host>\n    <button\n      type=\"button\"\n      class=${clsx(\n        'toolbar-item',\n        ctx && isActive(strongSchema.type(ctx)) && 'active'\n      )}\n      onmousedown=${onClick((ctx) => {\n        const commands = ctx.get(commandsCtx)\n        commands.call(toggleStrongCommand.key)\n      })}\n    >\n      ${config?.boldIcon?.() ?? boldIcon}\n    </button>\n    <button\n      type=\"button\"\n      class=${clsx(\n        'toolbar-item',\n        ctx && isActive(emphasisSchema.type(ctx)) && 'active'\n      )}\n      onmousedown=${onClick((ctx) => {\n        const commands = ctx.get(commandsCtx)\n        commands.call(toggleEmphasisCommand.key)\n      })}\n    >\n      ${config?.italicIcon?.() ?? italicIcon}\n    </button>\n    <button\n      type=\"button\"\n      class=${clsx(\n        'toolbar-item',\n        ctx && isActive(strikethroughSchema.type(ctx)) && 'active'\n      )}\n      onmousedown=${onClick((ctx) => {\n        const commands = ctx.get(commandsCtx)\n        commands.call(toggleStrikethroughCommand.key)\n      })}\n    >\n      ${config?.strikethroughIcon?.() ?? strikethroughIcon}\n    </button>\n    <div class=\"divider\"></div>\n    <button\n      type=\"button\"\n      class=${clsx(\n        'toolbar-item',\n        ctx && isActive(inlineCodeSchema.type(ctx)) && 'active'\n      )}\n      onmousedown=${onClick((ctx) => {\n        const commands = ctx.get(commandsCtx)\n        commands.call(toggleInlineCodeCommand.key)\n      })}\n    >\n      ${config?.codeIcon?.() ?? codeIcon}\n    </button>\n    <button\n      type=\"button\"\n      class=${clsx(\n        'toolbar-item',\n        ctx && isActive(linkSchema.type(ctx)) && 'active'\n      )}\n      onmousedown=${onClick((ctx) => {\n        const view = ctx.get(editorViewCtx)\n        const { selection } = view.state\n\n        if (isActive(linkSchema.type(ctx))) {\n          ctx.get(linkTooltipAPI.key).removeLink(selection.from, selection.to)\n          return\n        }\n\n        ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)\n        hide?.()\n      })}\n    >\n      ${config?.linkIcon?.() ?? linkIcon}\n    </button>\n  </host>`\n}\n\ntoolbarComponent.props = {\n  ctx: Object,\n  hide: Function,\n  show: Boolean,\n  config: Object,\n}\n\nexport const ToolbarElement = c(toolbarComponent)\n","import { TooltipProvider, tooltipFactory } from '@milkdown/kit/plugin/tooltip'\nimport type { EditorState, PluginView } from '@milkdown/kit/prose/state'\nimport { TextSelection } from '@milkdown/kit/prose/state'\nimport type { Ctx } from '@milkdown/kit/ctx'\nimport type { EditorView } from '@milkdown/kit/prose/view'\nimport type { AtomicoThis } from 'atomico/types/dom'\nimport type { DefineFeature, Icon } from '../shared'\nimport { defIfNotExists } from '../../utils'\nimport type { ToolbarProps } from './component'\nimport { ToolbarElement } from './component'\n\ninterface ToolbarConfig {\n  boldIcon: Icon\n  codeIcon: Icon\n  italicIcon: Icon\n  linkIcon: Icon\n  strikethroughIcon: Icon\n}\n\nexport type ToolbarFeatureConfig = Partial<ToolbarConfig>\n\nconst toolbar = tooltipFactory('CREPE_TOOLBAR')\n\nclass ToolbarView implements PluginView {\n  #tooltipProvider: TooltipProvider\n  #content: AtomicoThis<ToolbarProps>\n  constructor(ctx: Ctx, view: EditorView, config?: ToolbarFeatureConfig) {\n    const content = new ToolbarElement()\n    this.#content = content\n    this.#content.ctx = ctx\n    this.#content.hide = this.hide\n    this.#content.config = config\n\n    this.#tooltipProvider = new TooltipProvider({\n      content: this.#content,\n      debounce: 20,\n      offset: 10,\n      shouldShow(view: EditorView) {\n        const { doc, selection } = view.state\n        const { empty, from, to } = selection\n\n        const isEmptyTextBlock =\n          !doc.textBetween(from, to).length &&\n          selection instanceof TextSelection\n\n        const isNotTextBlock = !(selection instanceof TextSelection)\n\n        const activeElement = (view.dom.getRootNode() as ShadowRoot | Document)\n          .activeElement\n        const isTooltipChildren = content.contains(activeElement)\n\n        const notHasFocus = !view.hasFocus() && !isTooltipChildren\n\n        const isReadonly = !view.editable\n\n        if (\n          notHasFocus ||\n          isNotTextBlock ||\n          empty ||\n          isEmptyTextBlock ||\n          isReadonly\n        )\n          return false\n\n        return true\n      },\n    })\n    this.#tooltipProvider.onShow = () => {\n      this.#content.show = true\n    }\n    this.#tooltipProvider.onHide = () => {\n      this.#content.show = false\n    }\n    this.update(view)\n  }\n\n  update = (view: EditorView, prevState?: EditorState) => {\n    this.#tooltipProvider.update(view, prevState)\n  }\n\n  destroy = () => {\n    this.#tooltipProvider.destroy()\n    this.#content.remove()\n  }\n\n  hide = () => {\n    this.#tooltipProvider.hide()\n  }\n}\n\ndefIfNotExists('milkdown-toolbar', ToolbarElement)\nexport const defineFeature: DefineFeature<ToolbarFeatureConfig> = (\n  editor,\n  config\n) => {\n  editor\n    .config((ctx) => {\n      ctx.set(toolbar.key, {\n        view: (view) => new ToolbarView(ctx, view, config),\n      })\n    })\n    .use(toolbar)\n}\n"],"names":["useUpdate","useEffect","editorViewCtx","html","strongSchema","ctx","commandsCtx","toggleStrongCommand","boldIcon","emphasisSchema","toggleEmphasisCommand","italicIcon","strikethroughSchema","toggleStrikethroughCommand","strikethroughIcon","inlineCodeSchema","toggleInlineCodeCommand","codeIcon","linkSchema","linkTooltipAPI","linkIcon","c","tooltipFactory","TooltipProvider","view","TextSelection","defIfNotExists"],"mappings":"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"}

package/lib/cjs/index-BIXWL4Or.js

@@ -1,26 +0,0 @@
-'use strict';
-
-var linkTooltip = require('@milkdown/kit/component/link-tooltip');
-var todoList = require('./todoList-V4JWO5-M.js');
-require('atomico');
-
-const defineFeature = (editor, config) => {
-  editor.config(linkTooltip.configureLinkTooltip).config((ctx) => {
-    ctx.update(linkTooltip.linkTooltipConfig.key, (prev) => {
-      var _a, _b, _c, _d, _e, _f;
-      return {
-        ...prev,
-        linkIcon: (_a = config == null ? void 0 : config.linkIcon) != null ? _a : () => todoList.copyIcon,
-        editButton: (_b = config == null ? void 0 : config.editButton) != null ? _b : () => todoList.editIcon,
-        removeButton: (_c = config == null ? void 0 : config.removeButton) != null ? _c : () => todoList.removeIcon,
-        confirmButton: (_d = config == null ? void 0 : config.confirmButton) != null ? _d : () => todoList.confirmIcon,
-        inputPlaceholder: (_e = config == null ? void 0 : config.inputPlaceholder) != null ? _e : "Paste link...",
-        onCopyLink: (_f = config == null ? void 0 : config.onCopyLink) != null ? _f : () => {
-        }
-      };
-    });
-  }).use(linkTooltip.linkTooltipPlugin);
-};
-
-exports.defineFeature = defineFeature;
-//# sourceMappingURL=index-BIXWL4Or.js.map