@jvs-milkdown/crepe 1.2.5 → 1.2.7

package/src/feature/fixed-toolbar/config.ts

@@ -2,6 +2,7 @@ import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { Node as ProseNode } from '@jvs-milkdown/kit/prose/model'
 
 import { imageBlockSchema } from '@jvs-milkdown/kit/component/image-block'
+import { toggleLinkCommand } from '@jvs-milkdown/kit/component/link-tooltip'
 import { commandsCtx, editorViewCtx } from '@jvs-milkdown/kit/core'
 import {
   addBlockTypeCommand,
@@ -19,6 +20,10 @@ import {
   setBlockTypeCommand,
   selectTextNearPosCommand,
   liftListItemCommand,
+  inlineCodeSchema,
+  isMarkSelectedCommand,
+  linkSchema,
+  toggleInlineCodeCommand,
 } from '@jvs-milkdown/kit/preset/commonmark'
 import { createTable } from '@jvs-milkdown/kit/preset/gfm'
 import { findNodeInSelection } from '@jvs-milkdown/kit/prose'
@@ -42,10 +47,17 @@ import {
   codeIcon,
   tableIcon,
   functionsIcon,
+  highLineCodeIcon,
+  linCodeIcon,
+  linkIcon,
 } from '../../icons'
 import { attachmentSchema } from '../attachment/schema'
 import { CrepeFeature } from '../index'
 import { toggleLatexCommand } from '../latex/command'
+import {
+  toggleHighlightMarkCommand,
+  highlightMarkSchema,
+} from '../toolbar/highlight-mark'
 
 /**
  * Convert any headings in the selection to paragraphs before wrapping in a list.
@@ -79,151 +91,10 @@ export function buildDefaultFixedToolbar(
   const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
   const isImageBlockEnabled = flags?.includes(CrepeFeature.ImageBlock)
   const isTableEnabled = flags?.includes(CrepeFeature.Table)
-
-  const hasFunctionGroup = builder.build().some((g) => g.key === 'function')
-  const embedGroup = hasFunctionGroup
-    ? builder.getGroup('function')
-    : builder.addGroup('embed', 'Embed')
-  if (isImageBlockEnabled) {
-    embedGroup.addItem('image', {
-      label: ctx ? i18n(ctx, 'menu.item.image') : 'Image',
-      icon: imageIcon,
-      active: () => false,
-      onRun: (ctx) => {
-        const commands = ctx.get(commandsCtx)
-        commands.call(addBlockTypeCommand.key, {
-          nodeType: imageBlockSchema.type(ctx),
-        })
-      },
-    })
-  }
-
   const isAttachmentEnabled = flags?.includes(CrepeFeature.Attachment)
-  if (isAttachmentEnabled) {
-    embedGroup.addItem('attachment', {
-      label: ctx ? i18n(ctx, 'menu.item.attachment') : 'Video or File',
-      icon: fileLinkIcon,
-      active: () => false,
-      onRun: (ctx) => {
-        const commands = ctx.get(commandsCtx)
-        commands.call(addBlockTypeCommand.key, {
-          nodeType: attachmentSchema.type(ctx),
-        })
-      },
-    })
-  }
 
-  embedGroup.addItem('code-block', {
-    label: ctx ? i18n(ctx, 'menu.item.code') : 'Code Block',
-    icon: codeIcon,
-    active: (ctx) => {
-      const view = ctx.get(editorViewCtx)
-      const result = findNodeInSelection(view.state, codeBlockSchema.type(ctx))
-      return result.hasNode && result.target?.attrs?.language !== 'LaTex'
-    },
-    onRun: (ctx) => {
-      const commands = ctx.get(commandsCtx)
-      const view = ctx.get(editorViewCtx)
-      const { state, dispatch } = view
-      const { selection, tr } = state
-      const { from, to } = selection
-
-      let text = ''
-      let blockCount = 0
-
-      state.doc.nodesBetween(from, to, (node) => {
-        if (node.isTextblock) {
-          text += (blockCount > 0 ? '\n' : '') + node.textContent
-          blockCount++
-        }
-      })
-
-      if (blockCount > 1) {
-        if (dispatch) {
-          const range = selection.$from.blockRange(selection.$to)
-          const codeBlock = codeBlockSchema
-            .type(ctx)
-            .createAndFill({}, text ? state.schema.text(text) : undefined)
-          if (range && codeBlock) {
-            tr.replaceWith(range.start, range.end, codeBlock)
-            dispatch(tr.scrollIntoView())
-          }
-        }
-        return
-      }
-
-      commands.call(setBlockTypeCommand.key, {
-        nodeType: codeBlockSchema.type(ctx),
-      })
-    },
-  })
-
-  if (isTableEnabled) {
-    embedGroup.addItem('table', {
-      label: ctx ? i18n(ctx, 'menu.item.table') : 'Table',
-      icon: tableIcon,
-      active: () => false,
-      onRun: (ctx) => {
-        const commands = ctx.get(commandsCtx)
-        const view = ctx.get(editorViewCtx)
-        const { from } = view.state.selection
-        commands.call(addBlockTypeCommand.key, {
-          nodeType: createTable(ctx, 3, 3),
-        })
-        commands.call(selectTextNearPosCommand.key, { pos: from })
-      },
-    })
-  }
-
-  if (isLatexEnabled) {
-    embedGroup.addItem('math-block', {
-      label: ctx ? i18n(ctx, 'menu.item.math') : 'Math Block',
-      icon: functionsIcon,
-      active: (ctx) => {
-        const view = ctx.get(editorViewCtx)
-        const result = findNodeInSelection(
-          view.state,
-          codeBlockSchema.type(ctx)
-        )
-        return result.hasNode && result.target?.attrs?.language === 'LaTex'
-      },
-      onRun: (ctx) => {
-        const commands = ctx.get(commandsCtx)
-        commands.call(toggleLatexCommand.key)
-      },
-    })
-  }
-
-  const blockGroup = builder.addGroup('block', 'Block')
-  blockGroup
-    .addItem('quote', {
-      label: ctx ? i18n(ctx, 'menu.item.quote') : 'Quote',
-      icon: quoteIcon,
-      active: (ctx) => {
-        const view = ctx.get(editorViewCtx)
-        const result = findNodeInSelection(
-          view.state,
-          blockquoteSchema.type(ctx)
-        )
-        return result.hasNode
-      },
-      onRun: (ctx) => {
-        const view = ctx.get(editorViewCtx)
-        const commands = ctx.get(commandsCtx)
-        const isActive = findNodeInSelection(
-          view.state,
-          blockquoteSchema.type(ctx)
-        ).hasNode
-
-        if (isActive) {
-          lift(view.state, view.dispatch)
-        } else {
-          commands.call(wrapInBlockTypeCommand.key, {
-            nodeType: blockquoteSchema.type(ctx),
-          })
-        }
-      },
-    })
+  const listGroup = builder.addGroup('list', 'List')
+  listGroup
     .addItem('divider', {
       label: ctx ? i18n(ctx, 'menu.item.divider') : 'Divider',
       icon: dividerIcon,
@@ -233,9 +104,6 @@ export function buildDefaultFixedToolbar(
         commands.call(addBlockTypeCommand.key, { nodeType: hrSchema.type(ctx) })
       },
     })
-
-  const listGroup = blockGroup
-  listGroup
     .addItem('bullet-list', {
       label: ctx ? i18n(ctx, 'menu.item.bulletList') : 'Bullet List',
       icon: bulletListIcon,
@@ -498,4 +366,188 @@ export function buildDefaultFixedToolbar(
         if (result) return
       },
     })
+
+  const blockGroup = builder.addGroup('block', 'Block')
+  blockGroup
+    .addItem('quote', {
+      label: ctx ? i18n(ctx, 'menu.item.quote') : 'Quote',
+      icon: quoteIcon,
+      active: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const result = findNodeInSelection(
+          view.state,
+          blockquoteSchema.type(ctx)
+        )
+        return result.hasNode
+      },
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const commands = ctx.get(commandsCtx)
+        const isActive = findNodeInSelection(
+          view.state,
+          blockquoteSchema.type(ctx)
+        ).hasNode
+
+        if (isActive) {
+          lift(view.state, view.dispatch)
+        } else {
+          commands.call(wrapInBlockTypeCommand.key, {
+            nodeType: blockquoteSchema.type(ctx),
+          })
+        }
+      },
+    })
+    .addItem('highlight', {
+      label: ctx ? i18n(ctx, 'menu.item.highlight') : 'Highlight',
+      icon: highLineCodeIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(
+          isMarkSelectedCommand.key,
+          highlightMarkSchema.type(ctx)
+        )
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleHighlightMarkCommand.key)
+      },
+    })
+    .addItem('code', {
+      label: ctx ? i18n(ctx, 'menu.item.lineCode') : 'Inline Code',
+      icon: linCodeIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(
+          isMarkSelectedCommand.key,
+          inlineCodeSchema.type(ctx)
+        )
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleInlineCodeCommand.key)
+      },
+    })
+    .addItem('link', {
+      label: ctx ? i18n(ctx, 'menu.item.link') : 'Link',
+      icon: linkIcon,
+      active: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        return commands.call(isMarkSelectedCommand.key, linkSchema.type(ctx))
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleLinkCommand.key)
+      },
+    })
+
+  if (isImageBlockEnabled) {
+    blockGroup.addItem('image', {
+      label: ctx ? i18n(ctx, 'menu.item.image') : 'Image',
+      icon: imageIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: imageBlockSchema.type(ctx),
+        })
+      },
+    })
+  }
+
+  if (isAttachmentEnabled) {
+    blockGroup.addItem('attachment', {
+      label: ctx ? i18n(ctx, 'menu.item.attachment') : 'Video or File',
+      icon: fileLinkIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: attachmentSchema.type(ctx),
+        })
+      },
+    })
+  }
+
+  blockGroup.addItem('code-block', {
+    label: ctx ? i18n(ctx, 'menu.item.code') : 'Code Block',
+    icon: codeIcon,
+    active: (ctx) => {
+      const view = ctx.get(editorViewCtx)
+      const result = findNodeInSelection(view.state, codeBlockSchema.type(ctx))
+      return result.hasNode && result.target?.attrs?.language !== 'LaTex'
+    },
+    onRun: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      const view = ctx.get(editorViewCtx)
+      const { state, dispatch } = view
+      const { selection, tr } = state
+      const { from, to } = selection
+
+      let text = ''
+      let blockCount = 0
+
+      state.doc.nodesBetween(from, to, (node) => {
+        if (node.isTextblock) {
+          text += (blockCount > 0 ? '\n' : '') + node.textContent
+          blockCount++
+        }
+      })
+
+      if (blockCount > 1) {
+        if (dispatch) {
+          const range = selection.$from.blockRange(selection.$to)
+          const codeBlock = codeBlockSchema
+            .type(ctx)
+            .createAndFill({}, text ? state.schema.text(text) : undefined)
+          if (range && codeBlock) {
+            tr.replaceWith(range.start, range.end, codeBlock)
+            dispatch(tr.scrollIntoView())
+          }
+        }
+        return
+      }
+
+      commands.call(setBlockTypeCommand.key, {
+        nodeType: codeBlockSchema.type(ctx),
+      })
+    },
+  })
+
+  if (isTableEnabled) {
+    blockGroup.addItem('table', {
+      label: ctx ? i18n(ctx, 'menu.item.table') : 'Table',
+      icon: tableIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const view = ctx.get(editorViewCtx)
+        const { from } = view.state.selection
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: createTable(ctx, 3, 3),
+        })
+        commands.call(selectTextNearPosCommand.key, { pos: from })
+      },
+    })
+  }
+
+  if (isLatexEnabled) {
+    blockGroup.addItem('math-block', {
+      label: ctx ? i18n(ctx, 'menu.item.math') : 'Math Block',
+      icon: functionsIcon,
+      active: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const result = findNodeInSelection(
+          view.state,
+          codeBlockSchema.type(ctx)
+        )
+        return result.hasNode && result.target?.attrs?.language === 'LaTex'
+      },
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleLatexCommand.key)
+      },
+    })
+  }
+
+  return builder.build()
 }

package/src/feature/fixed-toolbar/document-header.tsx

@@ -1,6 +1,14 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
-import { defineComponent, computed, ref, watch, h, onMounted, onUnmounted } from 'vue'
+// @ts-ignore
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onUnmounted,
+} from 'vue'
 
 import type { FixedToolbarConfig } from './index'
 
@@ -12,7 +20,7 @@ export const DocumentHeader = defineComponent({
     ctx: { type: Object as () => Ctx, required: true },
     config: { type: Object as () => FixedToolbarConfig, required: false },
   },
-  setup(props) {
+  setup(props: any) {
     const viewState = computed(() => props.ctx.get(viewMenuStateCtx.key))
     const title = ref('')
 
@@ -57,7 +65,7 @@ export const DocumentHeader = defineComponent({
 
     watch(
       () => viewState.value.showCover,
-      (newVal) => {
+      (newVal: any) => {
         if (newVal && !viewState.value.coverUrl) {
           viewState.value.coverUrl = randomCover(
             props.config?.defaultCoverImages
@@ -185,11 +193,11 @@ export const DocumentHeader = defineComponent({
                         onClick={() => {
                           state.coverUrl = src
                         }}
-                        onMouseenter={(e) => {
+                        onMouseenter={(e: any) => {
                           if (state.coverUrl !== src)
                             (e.currentTarget as HTMLElement).style.opacity = '1'
                         }}
-                        onMouseleave={(e) => {
+                        onMouseleave={(e: MouseEvent) => {
                           if (state.coverUrl !== src)
                             (e.currentTarget as HTMLElement).style.opacity =
                               '0.7'
@@ -213,11 +221,11 @@ export const DocumentHeader = defineComponent({
                     flexShrink: 0,
                     userSelect: 'none',
                   }}
-                  onMouseenter={(e) => {
+                  onMouseenter={(e: any) => {
                     ;(e.currentTarget as HTMLElement).style.backgroundColor =
                       'rgba(255,255,255,0.35)'
                   }}
-                  onMouseleave={(e) => {
+                  onMouseleave={(e: MouseEvent) => {
                     ;(e.currentTarget as HTMLElement).style.backgroundColor =
                       'rgba(255,255,255,0.2)'
                   }}
@@ -255,12 +263,14 @@ export const DocumentHeader = defineComponent({
               style={{
                 width: '100%',
                 maxWidth:
-                  editorWidthMap[state.editorWidth] === 'none'
+                  (editorWidthMap as any)[state.editorWidth] === 'none'
                     ? undefined
-                    : editorWidthMap[state.editorWidth],
+                    : (editorWidthMap as any)[state.editorWidth],
                 margin:
-                  editorWidthMap[state.editorWidth] === 'none' ? '0' : '0 auto',
-                padding: `40px ${editorWidthMap[state.editorWidth] === 'none' ? '80px' : '0'} 0`,
+                  (editorWidthMap as any)[state.editorWidth] === 'none'
+                    ? '0'
+                    : '0 auto',
+                padding: `40px ${(editorWidthMap as any)[state.editorWidth] === 'none' ? '80px' : '0'} 0`,
               }}
             >
               <style>{`.milkdown-document-title::placeholder { color: #BFBFBF; }`}</style>
@@ -269,7 +279,7 @@ export const DocumentHeader = defineComponent({
                 class="milkdown-document-title"
                 placeholder="请输入标题"
                 value={title.value}
-                onInput={(e) => {
+                onInput={(e: any) => {
                   title.value = (e.target as HTMLTextAreaElement).value
                   adjustTitleHeight()
                 }}

package/src/feature/fixed-toolbar/index.ts

@@ -4,6 +4,7 @@ import type { EditorView } from '@jvs-milkdown/kit/prose/view'
 
 import { Plugin, PluginKey } from '@jvs-milkdown/kit/prose/state'
 import { $ctx, $prose } from '@jvs-milkdown/kit/utils'
+// @ts-ignore
 import {
   createApp,
   ref,
@@ -218,7 +219,7 @@ class FixedToolbarView implements PluginView {
             this.#content.style.marginRight = '0'
           }
 
-          const maxWidth = editorWidthMap[viewState.editorWidth]
+          const maxWidth = (editorWidthMap as any)[viewState.editorWidth]
           const isFull = maxWidth === 'none'
           const px = isFull ? '80px' : '0'
           this.#view.dom.style.maxWidth = maxWidth

package/src/feature/fixed-toolbar/menu-bar.tsx

@@ -1,7 +1,8 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { Icon } from '@jvs-milkdown/kit/component'
-import { defineComponent, ref, onUnmounted, computed, onMounted, h } from 'vue'
+// @ts-ignore
+import { defineComponent, ref, onUnmounted, computed, onMounted } from 'vue'
 
 import type { FixedToolbarConfig } from './index'
 
@@ -16,10 +17,10 @@ const ToggleSwitch = defineComponent({
     modelValue: { type: Boolean, required: true },
   },
   emits: ['update:modelValue'],
-  setup(props, { emit }) {
+  setup(props: any, { emit }: any) {
     return () => (
       <div
-        onClick={(e) => {
+        onClick={(e: MouseEvent) => {
           e.stopPropagation()
           emit('update:modelValue', !props.modelValue)
         }}
@@ -58,7 +59,7 @@ export const MenuBar = defineComponent({
     ctx: { type: Object as () => Ctx, required: true },
     config: { type: Object as () => FixedToolbarConfig, required: false },
   },
-  setup(props) {
+  setup(props: any) {
     const showMenu = ref(false)
     const activeSubmenu = ref<string | null>(null)
     const mainRef = ref<HTMLElement | null>(null)
@@ -163,11 +164,11 @@ export const MenuBar = defineComponent({
               color: 'var(--crepe-color-on-surface)',
               userSelect: 'none',
             }}
-            onMouseenter={(e) => {
+            onMouseenter={(e: MouseEvent) => {
               ;(e.currentTarget as HTMLElement).style.backgroundColor =
                 'var(--crepe-color-hover)'
             }}
-            onMouseleave={(e) => {
+            onMouseleave={(e: MouseEvent) => {
               if (!showMenu.value)
                 (e.currentTarget as HTMLElement).style.backgroundColor =
                   'transparent'
@@ -216,7 +217,9 @@ export const MenuBar = defineComponent({
                 boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                 cursor: 'default',
               }}
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e: MouseEvent) => {
+                e.stopPropagation()
+              }}
             >
               {menuKeys.map((menuKey) => {
                 const isHovered = activeSubmenu.value === menuKey
@@ -226,7 +229,9 @@ export const MenuBar = defineComponent({
                 return (
                   <div
                     key={menuKey}
-                    onMouseenter={() => onMouseEnterItem(menuKey)}
+                    onMouseenter={() => {
+                      onMouseEnterItem(menuKey)
+                    }}
                     onMouseleave={() => {
                       if (hasSubmenu(menuKey)) {
                         activeSubmenu.value = null
@@ -410,7 +415,7 @@ export const MenuBar = defineComponent({
                           {bgColors.map((bg) => (
                             <div
                               key={bg.value || 'default'}
-                              onClick={(e) => {
+                              onClick={(e: MouseEvent) => {
                                 e.stopPropagation()
                                 state.documentBackground = bg.value
                               }}
@@ -513,7 +518,7 @@ export const MenuBar = defineComponent({
                             <button
                               key={key}
                               type="button"
-                              onClick={(e) => {
+                              onClick={(e: MouseEvent) => {
                                 e.stopPropagation()
                                 state.editorWidth = key
                               }}