@jvs-milkdown/crepe 1.2.4 → 1.2.7

package/src/feature/fixed-toolbar/outline-panel.tsx

@@ -1,7 +1,8 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { editorViewCtx } from '@jvs-milkdown/kit/core'
-import { defineComponent, onMounted, onUnmounted, ref, computed, h } from 'vue'
+// @ts-ignore
+import { defineComponent, onMounted, onUnmounted, ref, computed } from 'vue'
 
 import { i18n } from '../../core/locale'
 import { viewMenuStateCtx } from './view-menu-state'
@@ -17,7 +18,7 @@ export const OutlinePanel = defineComponent({
   props: {
     ctx: { type: Object as () => Ctx, required: true },
   },
-  setup(props) {
+  setup(props: any) {
     const items = ref<OutlineItem[]>([])
     const viewState = computed(() => props.ctx.get(viewMenuStateCtx.key))
     const isResizing = ref(false)
@@ -75,7 +76,7 @@ export const OutlinePanel = defineComponent({
         const view = props.ctx.get(editorViewCtx)
         if (!view) return
         const newItems: OutlineItem[] = []
-        view.state.doc.descendants((node, pos) => {
+        view.state.doc.descendants((node: any, pos: number) => {
           if (node.type.name === 'heading' && node.textContent.trim()) {
             newItems.push({
               text: node.textContent,
@@ -119,7 +120,7 @@ export const OutlinePanel = defineComponent({
       const threshold = containerRect.top + toolbarHeight + 50
 
       let active = headings[0]
-      for (const h of headings) {
+      for (const h of headings as HTMLElement[]) {
         const rect = h.getBoundingClientRect()
         if (rect.top <= threshold) {
           active = h
@@ -127,7 +128,7 @@ export const OutlinePanel = defineComponent({
           break
         }
       }
-      activeId.value = active?.id || ''
+      activeId.value = (active as any)?.id || ''
     }
 
     const scrollToHeading = (id: string) => {
@@ -305,13 +306,13 @@ export const OutlinePanel = defineComponent({
                 color: 'var(--crepe-color-outline)',
               }}
               onClick={() => (viewState.value.outlineVisible = false)}
-              onMouseenter={(e) => {
+              onMouseenter={(e: MouseEvent) => {
                 ;(e.currentTarget as HTMLElement).style.backgroundColor =
                   'var(--crepe-color-hover)'
                 ;(e.currentTarget as HTMLElement).style.color =
                   'var(--crepe-color-on-surface)'
               }}
-              onMouseleave={(e) => {
+              onMouseleave={(e: MouseEvent) => {
                 ;(e.currentTarget as HTMLElement).style.backgroundColor =
                   'transparent'
                 ;(e.currentTarget as HTMLElement).style.color =
@@ -348,7 +349,7 @@ export const OutlinePanel = defineComponent({
                 暂无标题
               </div>
             ) : null}
-            {visibleItems.value.map(({ item, hasChildren: hasKids }) => {
+            {visibleItems.value.map(({ item, hasChildren: hasKids }: any) => {
               const isActive = activeId.value === item.id
               const collapsed = collapsedIds.value.has(item.id)
               return (
@@ -372,7 +373,7 @@ export const OutlinePanel = defineComponent({
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                   }}
-                  onMouseenter={(e) => {
+                  onMouseenter={(e: MouseEvent) => {
                     ;(e.currentTarget as HTMLElement).style.backgroundColor =
                       'var(--crepe-color-hover)'
                     if (!isActive) {
@@ -380,7 +381,7 @@ export const OutlinePanel = defineComponent({
                         'var(--crepe-color-on-surface)'
                     }
                   }}
-                  onMouseleave={(e) => {
+                  onMouseleave={(e: MouseEvent) => {
                     ;(e.currentTarget as HTMLElement).style.backgroundColor =
                       'transparent'
                     if (!isActive) {
@@ -391,7 +392,7 @@ export const OutlinePanel = defineComponent({
                 >
                   {/* Toggle arrow */}
                   <span
-                    onClick={(e) => {
+                    onClick={(e: MouseEvent) => {
                       e.stopPropagation()
                       toggleCollapse(item.id)
                     }}
@@ -414,19 +415,19 @@ export const OutlinePanel = defineComponent({
                           ? 'rotate(0deg)'
                           : 'rotate(-90deg)',
                     }}
-                    onMouseenter={(e) => {
+                    onMouseenter={(e: MouseEvent) => {
                       if (hasKids) {
                         ;(
                           e.currentTarget as HTMLElement
                         ).style.backgroundColor = 'var(--crepe-color-hover)'
                       }
                     }}
-                    onMouseleave={(e) => {
+                    onMouseleave={(e: MouseEvent) => {
                       ;(e.currentTarget as HTMLElement).style.backgroundColor =
                         'transparent'
                     }}
                   >
-                    ▼
+                    �?{' '}
                   </span>
                   {/* Text - click to scroll */}
                   <span
@@ -459,13 +460,13 @@ export const OutlinePanel = defineComponent({
               zIndex: 10,
               opacity: isResizing.value ? 1 : 0,
             }}
-            onMouseenter={(e) => {
+            onMouseenter={(e: MouseEvent) => {
               if (!isResizing.value)
                 (e.currentTarget as HTMLElement).style.opacity = '0.5'
               ;(e.currentTarget as HTMLElement).style.backgroundColor =
                 'var(--crepe-color-primary)'
             }}
-            onMouseleave={(e) => {
+            onMouseleave={(e: MouseEvent) => {
               if (!isResizing.value)
                 (e.currentTarget as HTMLElement).style.opacity = '0'
               ;(e.currentTarget as HTMLElement).style.backgroundColor =

package/src/feature/fixed-toolbar/shortcut-help-modal.tsx

@@ -1,6 +1,7 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { Icon } from '@jvs-milkdown/kit/component'
+// @ts-ignore
 import { defineComponent, type Ref, h, onMounted, onBeforeUnmount } from 'vue'
 
 import type { CrepeTranslations } from '../../core/locale'
@@ -144,7 +145,7 @@ export const ShortcutHelpModal = defineComponent<ModalProps>({
     ctx: { type: Object, required: true },
     visible: { type: Object, required: true },
   },
-  setup(props) {
+  setup(props: any) {
     const close = () => {
       props.visible.value = false
     }
@@ -179,7 +180,7 @@ export const ShortcutHelpModal = defineComponent<ModalProps>({
             boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
             padding: '20px 24px',
           }}
-          onClick={(e) => e.stopPropagation()}
+          onClick={(e: MouseEvent) => e.stopPropagation()}
         >
           <div
             style={{

package/src/feature/fixed-toolbar/view-menu-state.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { reactive } from 'vue'
 
 export type OutlinePosition = 'left' | 'right'

package/src/feature/index.ts

@@ -1,3 +1,4 @@
+import type { AttachmentFeatureConfig } from './attachment/config'
 import type { BlockEditFeatureConfig } from './block-edit'
 import type { CodeMirrorFeatureConfig } from './code-mirror'
 import type { CursorFeatureConfig } from './cursor'
@@ -9,7 +10,6 @@ import type { ListItemFeatureConfig } from './list-item'
 import type { PlaceholderFeatureConfig } from './placeholder'
 import type { TableFeatureConfig } from './table'
 import type { ToolbarFeatureConfig } from './toolbar'
-import type { AttachmentFeatureConfig } from './attachment/config'
 
 /// The crepe editor feature flags.
 /// Every feature is enabled by default.

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

@@ -2,6 +2,7 @@ import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { EditorView } from '@jvs-milkdown/kit/prose/view'
 
 import { Icon } from '@jvs-milkdown/kit/component'
+// @ts-ignore
 import {
   defineComponent,
   type ShallowRef,
@@ -44,8 +45,8 @@ export const LatexTooltip = defineComponent<LatexTooltipProps>({
       required: true,
     },
   },
-  setup(props) {
-    const innerViewRef: VNodeRef = (el) => {
+  setup(props: any) {
+    const innerViewRef: VNodeRef = (el: any) => {
       if (!el || !(el instanceof HTMLElement)) return
       while (el.firstChild) {
         el.removeChild(el.firstChild)

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

@@ -16,6 +16,7 @@ import {
   DecorationSet,
   EditorView,
 } from '@jvs-milkdown/kit/prose/view'
+// @ts-ignore
 import { createApp, shallowRef, type App, type ShallowRef } from 'vue'
 
 import type { LatexConfig } from '..'

package/src/feature/loader.ts

@@ -1,5 +1,6 @@
 import type { Editor } from '@jvs-milkdown/kit/core'
 
+import { attachment } from './attachment'
 import { blockEdit } from './block-edit'
 import { codeMirror } from './code-mirror'
 import { cursor } from './cursor'
@@ -12,7 +13,6 @@ import { listItem } from './list-item'
 import { placeholder } from './placeholder'
 import { table } from './table'
 import { toolbar } from './toolbar'
-import { attachment } from './attachment'
 
 export function loadFeature(
   feature: CrepeFeature,

package/src/feature/placeholder/index.ts

@@ -62,7 +62,8 @@ export const placeholderPlugin = $prose((ctx) => {
         if (crepe.readonly) return DecorationSet.empty
 
         const config = ctx.get(placeholderConfig.key)
-        if (config.mode === 'doc' && !isDocEmpty(state.doc)) return DecorationSet.empty
+        if (config.mode === 'doc' && !isDocEmpty(state.doc))
+          return DecorationSet.empty
 
         if (isInCodeBlock(state.selection) || isInList(state.selection))
           return DecorationSet.empty

package/src/feature/toolbar/color.ts

@@ -1,3 +1,4 @@
+import type { Command } from '@jvs-milkdown/kit/prose/state'
 
 import {
   $command,
@@ -5,7 +6,6 @@ import {
   $markSchema,
   $remark,
 } from '@jvs-milkdown/kit/utils'
-import type { Command } from '@jvs-milkdown/kit/prose/state'
 import { visit } from 'unist-util-visit'
 
 export const remarkTextColorPlugin = $remark(
@@ -40,9 +40,11 @@ export const remarkTextColorPlugin = $remark(
             parent &&
             index != null
           ) {
-            const hasTextColor = node.value.includes('color:') && !node.value.match(/background-color:\s*([^"';>]+)/)
+            const hasTextColor =
+              node.value.includes('color:') &&
+              !node.value.match(/background-color:\s*([^"';>]+)/)
             const hasBgColor = node.value.includes('background-color:')
-            
+
             if (!hasTextColor && !hasBgColor) return
 
             let color = null
@@ -156,98 +158,100 @@ export const bgColorSchema = $markSchema('bgColor', (_ctx) => ({
 
 export const toggleTextColorCommand = $command(
   'ToggleTextColor',
-  (ctx) => (color?: string | null): Command => {
-    return (state, dispatch) => {
-      const markType = textColorSchema.type(ctx)
-      const { $cursor, ranges } = state.selection as any
+  (ctx) =>
+    (color?: string | null): Command => {
+      return (state, dispatch) => {
+        const markType = textColorSchema.type(ctx)
+        const { $cursor, ranges } = state.selection as any
 
-      if (dispatch) {
-        let tr = state.tr
-        if ($cursor) {
-          const marks = state.storedMarks || $cursor.marks()
-          const currentMark = markType.isInSet(marks)
-          
-          if (currentMark && currentMark.attrs.color === color) {
-            tr = tr.removeStoredMark(markType)
+        if (dispatch) {
+          let tr = state.tr
+          if ($cursor) {
+            const marks = state.storedMarks || $cursor.marks()
+            const currentMark = markType.isInSet(marks)
+
+            if (currentMark && currentMark.attrs.color === color) {
+              tr = tr.removeStoredMark(markType)
+            } else {
+              tr = tr.removeStoredMark(markType)
+              if (color) tr = tr.addStoredMark(markType.create({ color }))
+            }
           } else {
-            tr = tr.removeStoredMark(markType)
-            if (color) tr = tr.addStoredMark(markType.create({ color }))
-          }
-        } else {
-          let hasSameColor = false
-          for (let i = 0; i < ranges.length; i++) {
-            let { $from, $to } = ranges[i]
-            state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-              if (node.isText) {
-                const mark = markType.isInSet(node.marks)
-                if (mark && mark.attrs.color === color) {
-                  hasSameColor = true
+            let hasSameColor = false
+            for (let i = 0; i < ranges.length; i++) {
+              let { $from, $to } = ranges[i]
+              state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+                if (node.isText) {
+                  const mark = markType.isInSet(node.marks)
+                  if (mark && mark.attrs.color === color) {
+                    hasSameColor = true
+                  }
                 }
-              }
-            })
-          }
+              })
+            }
 
-          for (let i = 0; i < ranges.length; i++) {
-            let { $from, $to } = ranges[i]
-            tr = tr.removeMark($from.pos, $to.pos, markType)
-            if (!hasSameColor && color) {
-              tr = tr.addMark($from.pos, $to.pos, markType.create({ color }))
+            for (let i = 0; i < ranges.length; i++) {
+              let { $from, $to } = ranges[i]
+              tr = tr.removeMark($from.pos, $to.pos, markType)
+              if (!hasSameColor && color) {
+                tr = tr.addMark($from.pos, $to.pos, markType.create({ color }))
+              }
             }
           }
+          dispatch(tr.scrollIntoView())
         }
-        dispatch(tr.scrollIntoView())
+        return true
       }
-      return true
     }
-  }
 )
 
 export const toggleBgColorCommand = $command(
   'ToggleBgColor',
-  (ctx) => (color?: string | null): Command => {
-    return (state, dispatch) => {
-      const markType = bgColorSchema.type(ctx)
-      const { $cursor, ranges } = state.selection as any
+  (ctx) =>
+    (color?: string | null): Command => {
+      return (state, dispatch) => {
+        const markType = bgColorSchema.type(ctx)
+        const { $cursor, ranges } = state.selection as any
+
+        if (dispatch) {
+          let tr = state.tr
+          if ($cursor) {
+            const marks = state.storedMarks || $cursor.marks()
+            const currentMark = markType.isInSet(marks)
 
-      if (dispatch) {
-        let tr = state.tr
-        if ($cursor) {
-          const marks = state.storedMarks || $cursor.marks()
-          const currentMark = markType.isInSet(marks)
-          
-          if (currentMark && currentMark.attrs.color === color) {
-            tr = tr.removeStoredMark(markType)
+            if (currentMark && currentMark.attrs.color === color) {
+              tr = tr.removeStoredMark(markType)
+            } else {
+              tr = tr.removeStoredMark(markType)
+              if (color) tr = tr.addStoredMark(markType.create({ color }))
+            }
           } else {
-            tr = tr.removeStoredMark(markType)
-            if (color) tr = tr.addStoredMark(markType.create({ color }))
-          }
-        } else {
-          let hasSameColor = false
-          for (let i = 0; i < ranges.length; i++) {
-            let { $from, $to } = ranges[i]
-            state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-              if (node.isText) {
-                const mark = markType.isInSet(node.marks)
-                if (mark && mark.attrs.color === color) {
-                  hasSameColor = true
+            let hasSameColor = false
+            for (let i = 0; i < ranges.length; i++) {
+              let { $from, $to } = ranges[i]
+              state.doc.nodesBetween($from.pos, $to.pos, (node) => {
+                if (node.isText) {
+                  const mark = markType.isInSet(node.marks)
+                  if (mark && mark.attrs.color === color) {
+                    hasSameColor = true
+                  }
                 }
-              }
-            })
-          }
+              })
+            }
 
-          for (let i = 0; i < ranges.length; i++) {
-            let { $from, $to } = ranges[i]
-            tr = tr.removeMark($from.pos, $to.pos, markType)
-            if (!hasSameColor && color) {
-              tr = tr.addMark($from.pos, $to.pos, markType.create({ color }))
+            for (let i = 0; i < ranges.length; i++) {
+              let { $from, $to } = ranges[i]
+              tr = tr.removeMark($from.pos, $to.pos, markType)
+              if (!hasSameColor && color) {
+                tr = tr.addMark($from.pos, $to.pos, markType.create({ color }))
+              }
             }
           }
+          dispatch(tr.scrollIntoView())
         }
-        dispatch(tr.scrollIntoView())
+        return true
       }
-      return true
     }
-  }
 )
 
 export const colorPlugins = [