@jvs-milkdown/crepe 1.2.28 → 1.2.30

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

@@ -1,5 +1,5 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
-import type { 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 { Plugin, PluginKey, TextSelection } from '@jvs-milkdown/kit/prose/state'
@@ -23,6 +23,8 @@ import type { ToolbarItem } from '../toolbar/config'
 
 import { crepeFeatureConfig } from '../../core/slice'
 import { CrepeFeature } from '../index'
+import { colorPlugins } from '../toolbar/color'
+import { fontPlugins } from '../toolbar/font'
 import { highlightMark } from '../toolbar/highlight-mark'
 import { underline } from '../toolbar/underline'
 import { FixedToolbarComponent } from './component'
@@ -73,6 +75,8 @@ export interface FixedToolbarConfig {
   showCover?: boolean
   coverUrl?: string
   editorWidth?: EditorWidth
+  showFloatingToolbar?: boolean // Keep old option deprecated just in case
+  fixedToolbarVisible?: boolean
 }
 
 export type FixedToolbarFeatureConfig = Partial<FixedToolbarConfig>
@@ -92,7 +96,7 @@ class FixedToolbarView implements PluginView {
   #outlineContent?: HTMLElement
   #outlineApp?: App
   #watcher?: WatchStopHandle
-  #selection: ShallowRef<Selection>
+  #state: ShallowRef<EditorState>
   #show = ref(true)
   #canUndo = ref(false)
   #canRedo = ref(false)
@@ -121,6 +125,10 @@ class FixedToolbarView implements PluginView {
     if (config?.coverUrl !== undefined) viewState.coverUrl = config.coverUrl
     if (config?.editorWidth !== undefined)
       viewState.editorWidth = config.editorWidth
+    if (config?.showFloatingToolbar !== undefined)
+      viewState.fixedToolbarVisible = config.showFloatingToolbar
+    if (config?.fixedToolbarVisible !== undefined)
+      viewState.fixedToolbarVisible = config.fixedToolbarVisible
 
     // Load initial view menu state from localStorage if useLocalStorage is enabled
     if (config?.useLocalStorage) {
@@ -144,6 +152,10 @@ class FixedToolbarView implements PluginView {
             viewState.coverUrl = parsed.coverUrl
           if (parsed.editorWidth !== undefined)
             viewState.editorWidth = parsed.editorWidth
+          if (parsed.showFloatingToolbar !== undefined)
+            viewState.fixedToolbarVisible = parsed.showFloatingToolbar
+          if (parsed.fixedToolbarVisible !== undefined)
+            viewState.fixedToolbarVisible = parsed.fixedToolbarVisible
         }
       } catch (e) {
         console.error('Error loading view state from localStorage:', e)
@@ -169,6 +181,7 @@ class FixedToolbarView implements PluginView {
               showCover: newState.showCover,
               coverUrl: newState.coverUrl,
               editorWidth: newState.editorWidth,
+              fixedToolbarVisible: newState.fixedToolbarVisible,
             }
             localStorage.setItem('jvs-milkdown-data', JSON.stringify(merged))
           } catch (e) {
@@ -181,13 +194,13 @@ class FixedToolbarView implements PluginView {
 
     const content = document.createElement('div')
     content.className = 'milkdown-fixed-toolbar'
-    this.#selection = shallowRef(view.state.selection)
+    this.#state = shallowRef(view.state)
 
     const app = createApp(FixedToolbarComponent, {
       ctx,
       hide: () => {}, // No-op for fixed toolbar
       config,
-      selection: this.#selection,
+      state: this.#state,
       show: this.#show,
       canUndo: this.#canUndo,
       canRedo: this.#canRedo,
@@ -363,12 +376,19 @@ class FixedToolbarView implements PluginView {
           viewState.documentBackground,
           viewState.showCover,
           viewState.editorWidth,
+          viewState.fixedToolbarVisible,
         ],
         () => {
+          if (viewState.fixedToolbarVisible === false) {
+            this.#content.classList.add('collapsed')
+          } else {
+            this.#content.classList.remove('collapsed')
+          }
+          root.style.backgroundColor = ''
           if (viewState.documentBackground) {
-            root.style.backgroundColor = viewState.documentBackground
+            this.#view.dom.style.backgroundColor = viewState.documentBackground
           } else {
-            root.style.backgroundColor = ''
+            this.#view.dom.style.backgroundColor = ''
           }
 
           // Reset root and toolbar styles to default/full-width
@@ -395,7 +415,7 @@ class FixedToolbarView implements PluginView {
 
           const maxWidth = (editorWidthMap as any)[viewState.editorWidth]
           const isFull = maxWidth === 'none'
-          const px = isFull ? '80px' : '0'
+          const px = isFull ? '80px' : '10px'
           this.#view.dom.style.maxWidth = maxWidth
           this.#view.dom.style.width = isFull ? '100%' : maxWidth
           this.#view.dom.style.margin = isFull ? '0' : '0 auto'
@@ -422,7 +442,7 @@ class FixedToolbarView implements PluginView {
   }
 
   update = (view: EditorView) => {
-    this.#selection.value = view.state.selection
+    this.#state.value = view.state
     try {
       this.#canUndo.value = undo(view.state)
       this.#canRedo.value = redo(view.state)
@@ -489,5 +509,7 @@ export const fixedToolbar: DefineFeature<FixedToolbarFeatureConfig> = (
     .use(fixedToolbarConfig)
     .use(underline as any)
     .use(highlightMark as any)
+    .use(colorPlugins as any)
+    .use(fontPlugins as any)
     .use(fixedToolbarPlugin)
 }

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

@@ -452,8 +452,7 @@ export const OutlinePanel = defineComponent({
             width: `${state.outlineWidth}px`,
             minWidth: '200px',
             maxWidth: '400px',
-            backgroundColor:
-              state.documentBackground || 'var(--crepe-color-background)',
+            backgroundColor: 'transparent',
             borderRight: isLeft
               ? '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))'
               : 'none',

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-background);
+  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;