@jvs-milkdown/crepe 1.2.29 → 1.2.31

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

@@ -13,6 +13,7 @@ export interface ViewMenuState {
   showCover: boolean
   coverUrl: string
   editorWidth: EditorWidth
+  fixedToolbarVisible: boolean
 }
 
 export const editorWidthMap: Record<EditorWidth, string> = {
@@ -31,6 +32,7 @@ export const createViewMenuState = () =>
     showCover: false,
     coverUrl: '',
     editorWidth: 'default',
+    fixedToolbarVisible: true,
   })
 
 import { $ctx } from '@jvs-milkdown/kit/utils'

package/src/feature/toolbar/component.tsx

@@ -1,5 +1,6 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { Mark } from '@jvs-milkdown/kit/prose/model'
+import type { EditorState } from '@jvs-milkdown/kit/prose/state'
 
 import { Icon } from '@jvs-milkdown/kit/component'
 import {
@@ -14,11 +15,7 @@ import {
   selectTextNearPosCommand,
 } from '@jvs-milkdown/kit/preset/commonmark'
 import { createTable, mergeCellsCommand } from '@jvs-milkdown/kit/preset/gfm'
-import {
-  type Selection,
-  TextSelection,
-  NodeSelection,
-} from '@jvs-milkdown/kit/prose/state'
+import { TextSelection, NodeSelection } from '@jvs-milkdown/kit/prose/state'
 import {
   mergeCells,
   splitCell,
@@ -144,7 +141,7 @@ type ToolbarProps = {
   ctx: Ctx
   hide: () => void
   show: Ref<boolean>
-  selection: ShallowRef<Selection>
+  state: ShallowRef<EditorState>
   config?: ToolbarFeatureConfig
   isFixed?: boolean
 }
@@ -167,7 +164,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     ctx: { type: Object as any, required: true },
     hide: { type: Function as any, required: true },
     show: { type: Object as any, required: true },
-    selection: { type: Object as any, required: true },
+    state: { type: Object as any, required: true },
     config: { type: Object as any, required: false },
     isFixed: { type: Boolean, required: false },
   },
@@ -903,7 +900,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     }
 
     function checkActive(checker: ToolbarItem['active']) {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const status = ctx?.get(editorCtx)?.status
       if (status !== EditorStatus.Created) return false
       return checker(ctx)
@@ -912,7 +909,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     const blockGroups = computed(() => getBlockGroups('', undefined, ctx))
 
     const activeBlockItem = computed(() => {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const status = ctx?.get(editorCtx)?.status
       if (status !== EditorStatus.Created) return null
 
@@ -957,7 +954,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     })
 
     const currentAlignIndent = computed(() => {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const status = ctx?.get(editorCtx)?.status
       if (status !== EditorStatus.Created) return { align: 'left', indent: 0 }
       const view = ctx.get(editorViewCtx)
@@ -1052,14 +1049,14 @@ export const Toolbar = defineComponent<ToolbarProps>({
     }
 
     const canMerge = computed(() => {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const view = ctx?.get(editorViewCtx)
       if (!view) return false
       return mergeCells(view.state)
     })
 
     const canSplit = computed(() => {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const view = ctx?.get(editorViewCtx)
       if (!view) return false
       return splitCell(view.state)
@@ -1136,7 +1133,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     }
 
     const currentColorState = computed(() => {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const status = ctx?.get(editorCtx)?.status
       if (status !== EditorStatus.Created)
         return { textColor: null, bgColor: null }
@@ -1145,8 +1142,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
       const { state } = view
       const schema = ctx.get(schemaCtx)
 
-      const tcHasMark = schema.marks[textColorSchema.id]
-      const bcHasMark = schema.marks[bgColorSchema.id]
+      const tcHasMark = schema.marks['textColor']
+      const bcHasMark = schema.marks['bgColor']
 
       if (!tcHasMark || !bcHasMark) return { textColor: null, bgColor: null }
 
@@ -1204,8 +1201,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
       const { from, to, empty } = state.selection
       const schema = ctx.get(schemaCtx)
 
-      const tcHasMark = schema.marks[textColorSchema.id]
-      const bcHasMark = schema.marks[bgColorSchema.id]
+      const tcHasMark = schema.marks['textColor']
+      const bcHasMark = schema.marks['bgColor']
 
       if (!tcHasMark || !bcHasMark) return
 
@@ -1227,7 +1224,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     }
 
     const currentFontState = computed(() => {
-      keepAlive(props.selection.value)
+      keepAlive(props.state, props.state?.value)
       const status = ctx?.get(editorCtx)?.status
       if (status !== EditorStatus.Created)
         return { fontFamily: null, fontSize: null }
@@ -1236,24 +1233,32 @@ export const Toolbar = defineComponent<ToolbarProps>({
       const { state } = view
       const schema = ctx.get(schemaCtx)
 
-      const ffHasMark = schema.marks[fontFamilySchema.id]
-      const fsHasMark = schema.marks[fontSizeSchema.id]
+      const ffHasMark = schema.marks['fontFamily']
+      const fsHasMark = schema.marks['fontSize']
 
-      if (!ffHasMark || !fsHasMark) return { fontFamily: null, fontSize: null }
+      if (!ffHasMark || !fsHasMark) {
+        return { fontFamily: null, fontSize: null }
+      }
 
       const ffType = fontFamilySchema.type(ctx)
       const fsType = fontSizeSchema.type(ctx)
       const { $cursor, ranges } = state.selection as any
 
+      let result: { fontFamily: string | null; fontSize: string | null } = {
+        fontFamily: null,
+        fontSize: null,
+      }
       if ($cursor) {
-        let fontFamily = null
-        let fontSize = null
+        let fontFamily: string | null = null
+        let fontSize: string | null = null
         const marks = state.storedMarks || $cursor.marks()
         for (const mark of marks) {
-          if (mark.type === ffType) fontFamily = mark.attrs.fontFamily
-          if (mark.type === fsType) fontSize = mark.attrs.fontSize
+          if (mark.type === ffType)
+            fontFamily = (mark.attrs.fontFamily as string | null) || null
+          if (mark.type === fsType)
+            fontSize = (mark.attrs.fontSize as string | null) || null
         }
-        return { fontFamily, fontSize }
+        result = { fontFamily, fontSize }
       } else {
         const fontFamilies = new Set<string | null>()
         const fontSizes = new Set<string | null>()
@@ -1264,19 +1269,24 @@ export const Toolbar = defineComponent<ToolbarProps>({
             if (node.isText) {
               const ffMark = ffType.isInSet(node.marks)
               const fsMark = fsType.isInSet(node.marks)
-              fontFamilies.add(ffMark ? ffMark.attrs.fontFamily : null)
-              fontSizes.add(fsMark ? fsMark.attrs.fontSize : null)
+              fontFamilies.add(
+                ffMark ? (ffMark.attrs.fontFamily as string | null) : null
+              )
+              fontSizes.add(
+                fsMark ? (fsMark.attrs.fontSize as string | null) : null
+              )
             }
           })
         }
 
         const fontFamily =
-          fontFamilies.size === 1 ? Array.from(fontFamilies)[0] : 'mixed'
+          fontFamilies.size === 1 ? Array.from(fontFamilies)[0]! : 'mixed'
         const fontSize =
-          fontSizes.size === 1 ? Array.from(fontSizes)[0] : 'mixed'
+          fontSizes.size === 1 ? Array.from(fontSizes)[0]! : 'mixed'
 
-        return { fontFamily, fontSize }
+        result = { fontFamily, fontSize }
       }
+      return result
     })
 
     const setFontFamily = (fontFamily: string | null) => {
@@ -1521,15 +1531,18 @@ export const Toolbar = defineComponent<ToolbarProps>({
                 color: '#363B4C',
               }}
             >
-              {currentFontState.value.fontFamily &&
-              currentFontState.value.fontFamily !== 'mixed'
-                ? currentFontState.value.fontFamily
-                    .split(',')[0]
-                    .replace(/['"]/g, '') ||
-                  (ctx ? i18n(ctx, 'customMenu.fontDefault' as any) : '默认')
-                : ctx
-                  ? i18n(ctx, 'customMenu.fontDefault' as any)
-                  : '默认'}
+              {(() => {
+                const fontState = currentFontState.value
+                const fontFamily = fontState?.fontFamily
+                return fontFamily && fontFamily !== 'mixed'
+                  ? fontFamily.split(',')[0]!.replace(/['"]/g, '') ||
+                      (ctx
+                        ? i18n(ctx, 'customMenu.fontDefault' as any)
+                        : '默认')
+                  : ctx
+                    ? i18n(ctx, 'customMenu.fontDefault' as any)
+                    : '默认'
+              })()}
             </span>
             <span
               style={{
@@ -1558,10 +1571,10 @@ export const Toolbar = defineComponent<ToolbarProps>({
             }}
           >
             <span style={{ fontSize: '13px', color: '#363B4C' }}>
-              {currentFontState.value.fontSize &&
-              currentFontState.value.fontSize !== 'mixed'
-                ? currentFontState.value.fontSize
-                : '16px'}
+              {(() => {
+                const fs = currentFontState.value.fontSize
+                return fs && fs !== 'mixed' ? fs : '16px'
+              })()}
             </span>
             <span
               style={{

package/src/feature/toolbar/index.ts

@@ -1,9 +1,5 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
-import type {
-  EditorState,
-  PluginView,
-  Selection,
-} from '@jvs-milkdown/kit/prose/state'
+import type { EditorState, PluginView } from '@jvs-milkdown/kit/prose/state'
 import type { EditorView } from '@jvs-milkdown/kit/prose/view'
 
 import { editorViewOptionsCtx } from '@jvs-milkdown/kit/core'
@@ -21,14 +17,14 @@ import type { ToolbarItem } from './config'
 
 import { crepeFeatureConfig } from '../../core/slice'
 import { CrepeFeature } from '../../feature'
-import { colorPlugins } from './color'
-import { Toolbar } from './component'
-import { highlightMark } from './highlight-mark'
-import { underline } from './underline'
 import {
   getIsAnyPopupOpen,
   addPopupChangeListener,
 } from '../../utils/fixed-toolbar-popup-state'
+import { colorPlugins } from './color'
+import { Toolbar } from './component'
+import { highlightMark } from './highlight-mark'
+import { underline } from './underline'
 
 interface ToolbarConfig {
   boldIcon: string
@@ -56,7 +52,7 @@ class ToolbarView implements PluginView {
   #tooltipProvider: TooltipProvider
   #content: HTMLElement
   #app: App
-  #selection: ShallowRef<Selection>
+  #state: ShallowRef<EditorState>
   #show = ref(false)
   #mousePressed = false
   #removePopupListener: (() => void) | undefined
@@ -65,12 +61,12 @@ class ToolbarView implements PluginView {
   constructor(ctx: Ctx, view: EditorView, config?: ToolbarFeatureConfig) {
     const content = document.createElement('div')
     content.className = 'milkdown-toolbar'
-    this.#selection = shallowRef(view.state.selection)
+    this.#state = shallowRef(view.state)
     const app = createApp(Toolbar, {
       ctx,
       hide: this.hide,
       config,
-      selection: this.#selection,
+      state: this.#state,
       show: this.#show,
     })
     app.mount(content)
@@ -161,7 +157,7 @@ class ToolbarView implements PluginView {
 
   update = (view: EditorView, prevState?: EditorState) => {
     this.#tooltipProvider.update(view, prevState)
-    this.#selection.value = view.state.selection
+    this.#state.value = view.state
   }
 
   destroy = () => {

package/src/theme/common/image-block.css

@@ -155,7 +155,7 @@
     position: relative;
 
     &:hover {
-      z-index: 120;
+      z-index: 210;
     }
 
     & > .image-wrapper {
@@ -325,6 +325,11 @@
       &:hover {
         background: var(--crepe-color-hover);
       }
+
+      &.active {
+        background: var(--crepe-color-selected);
+        color: var(--crepe-color-primary);
+      }
     }
 
     .image-wrapper .image-resize-handle {

package/src/theme/common/reset.css

@@ -36,7 +36,7 @@
 
   font-family: var(--crepe-font-default);
   color: var(--crepe-color-on-background);
-  background: var(--crepe-color-surface);
+  background: transparent;
 
   .milkdown-icon {
     display: inline-flex;

package/src/theme/common/table.css

@@ -4,6 +4,11 @@
   .milkdown-table-block {
     display: block;
     margin: 12px 0 4px 0;
+    position: relative;
+
+    &:hover {
+      z-index: 210;
+    }
 
     table {
       width: auto;

package/src/theme/common/toolbar.css

@@ -100,6 +100,36 @@
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
+    transition: all 0.2s ease-in-out;
+
+    &.collapsed {
+      background: transparent !important;
+      border-bottom: none !important;
+      height: 0 !important;
+      min-height: 0 !important;
+      padding: 0 !important;
+      overflow: visible !important;
+      pointer-events: none;
+    }
+
+    .fixed-toolbar-expand-btn {
+      svg {
+        width: 20px !important;
+        height: 20px !important;
+        path {
+          fill: var(--crepe-color-on-surface, #363b4c);
+        }
+      }
+    }
+
+    .toolbar-item.collapse-btn {
+      --toolbar-icon-color: #363b4c;
+      svg {
+        path {
+          fill: currentColor !important;
+        }
+      }
+    }
 
     .toolbar-shortcut-btn {
       display: flex;