@jvs-milkdown/crepe 1.2.12 → 1.2.14

package/src/feature/toolbar/component.tsx

@@ -93,6 +93,10 @@ import {
   splitCellIcon,
   formatPainterIcon,
 } from '../../icons'
+import {
+  incrementPopupCount,
+  decrementPopupCount,
+} from '../../utils/fixed-toolbar-popup-state'
 import { keepAlive } from '../../utils/keep-alive'
 import { menuAPI } from '../block-edit/menu'
 import { getGroups as getBlockGroups } from '../block-edit/menu/config'
@@ -147,6 +151,8 @@ type ToolbarProps = {
 interface FormatPainterState {
   marks: Mark[]
   align?: string | null
+  blockType?: string | null
+  blockAttrs?: Record<string, any> | null
   isPersistent: boolean
 }
 
@@ -238,6 +244,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
           const {
             marks: savedMarks,
             align: savedAlign,
+            blockType: savedBlockType,
+            blockAttrs: savedBlockAttrs,
             isPersistent,
           } = formatPainterState!.value
 
@@ -263,6 +271,30 @@ export const Toolbar = defineComponent<ToolbarProps>({
                 }
               )
             }
+            if (savedBlockType) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node: any, pos: number) => {
+                  if (node.type.name === 'paragraph') {
+                    tr.setNodeMarkup(
+                      pos,
+                      curState.schema.nodes[savedBlockType],
+                      {
+                        ...savedBlockAttrs,
+                        ...(savedAlign ? { align: savedAlign } : {}),
+                      }
+                    )
+                  } else if (node.type.name === 'heading' && savedBlockAttrs) {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      ...savedBlockAttrs,
+                      ...(savedAlign ? { align: savedAlign } : {}),
+                    })
+                  }
+                }
+              )
+            }
             dispatch(tr)
             applied = true
           } else {
@@ -301,6 +333,28 @@ export const Toolbar = defineComponent<ToolbarProps>({
                 })
               }
             }
+
+            if (savedBlockType) {
+              const pos = curSelection.$from.before(curSelection.$from.depth)
+              const node = curState.doc.nodeAt(pos)
+              if (node && node.type.name === 'paragraph') {
+                tr.setNodeMarkup(pos, curState.schema.nodes[savedBlockType], {
+                  ...savedBlockAttrs,
+                  ...(savedAlign ? { align: savedAlign } : {}),
+                })
+              } else if (
+                node &&
+                node.type.name === 'heading' &&
+                savedBlockAttrs
+              ) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  ...savedBlockAttrs,
+                  ...(savedAlign ? { align: savedAlign } : {}),
+                })
+              }
+            }
+
             tr.setStoredMarks(savedMarks)
             dispatch(tr)
             applied = true
@@ -363,7 +417,24 @@ export const Toolbar = defineComponent<ToolbarProps>({
       }
       align = foundAlign
 
-      formatPainterState!.value = { marks, align, isPersistent }
+      // Capture block type (heading level) if selection is within a heading
+      let blockType: string | null = null
+      let blockAttrs: Record<string, any> | null = null
+      {
+        const parent = selection.$from.parent
+        if (parent.type.name === 'heading') {
+          blockType = 'heading'
+          blockAttrs = { level: parent.attrs.level }
+        }
+      }
+
+      formatPainterState!.value = {
+        marks,
+        align,
+        blockType,
+        blockAttrs,
+        isPersistent,
+      }
       document.removeEventListener('pointerup', formatPainterHandler!)
 
       setTimeout(() => {
@@ -432,6 +503,23 @@ export const Toolbar = defineComponent<ToolbarProps>({
     }>({ top: 0 })
     const cachedWidths = new Map<number, number>()
 
+    // Track popup state for fixed toolbar → notify floating toolbar
+    const anyFixedPopup = computed(
+      () =>
+        !!isFixed &&
+        (showBlockMenu.value ||
+          showAlignMenu.value ||
+          showColorMenu.value ||
+          showFontFamilyMenu.value ||
+          showFontSizeMenu.value ||
+          showTableMenu.value ||
+          showOverflowMenu.value)
+    )
+    watch(anyFixedPopup, (val) => {
+      if (val) incrementPopupCount()
+      else decrementPopupCount()
+    })
+
     const getMenuLeftPos = (rect: DOMRect, menuWidth: number) => {
       let left = rect.left
       if (left + menuWidth > window.innerWidth) {
@@ -483,7 +571,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
           containerWidth = container.clientWidth
         }
       } else {
-        containerWidth = container.clientWidth
+        const view = ctx.get(editorViewCtx)
+        containerWidth = view.dom.clientWidth - 32
       }
 
       if (containerWidth === lastContainerWidth) {
@@ -697,6 +786,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
       if (hideFontFamilyTimer) clearTimeout(hideFontFamilyTimer)
       if (hideFontSizeTimer) clearTimeout(hideFontSizeTimer)
       if (hideTableTimer) clearTimeout(hideTableTimer)
+      if (anyFixedPopup.value) decrementPopupCount()
     })
 
     // --- Overflow lifecycle (fixed toolbar only) ---
@@ -1240,13 +1330,11 @@ export const Toolbar = defineComponent<ToolbarProps>({
       })
 
       // Ensure proper formatting tools are visible
-      const nonHeadingGroups = toolbarGroupInfo.value.filter(
-        (group: any) => {
-          if ((group as any).key === 'heading') return false
-          if (props.isFixed && (group as any).key === 'function') return false
-          return true
-        }
-      )
+      const nonHeadingGroups = toolbarGroupInfo.value.filter((group: any) => {
+        if ((group as any).key === 'heading') return false
+        if (props.isFixed && (group as any).key === 'function') return false
+        return true
+      })
 
       const isSectionOverflowed = (idx: number) =>
         idx >= overflowVisibleCount.value

package/src/feature/toolbar/index.ts

@@ -25,6 +25,10 @@ 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'
 
 interface ToolbarConfig {
   boldIcon: string
@@ -55,6 +59,8 @@ class ToolbarView implements PluginView {
   #selection: ShallowRef<Selection>
   #show = ref(false)
   #mousePressed = false
+  #removePopupListener: (() => void) | undefined
+  #onDocumentMouseUp: ((ev: MouseEvent) => void) | undefined
 
   constructor(ctx: Ctx, view: EditorView, config?: ToolbarFeatureConfig) {
     const content = document.createElement('div')
@@ -83,12 +89,25 @@ class ToolbarView implements PluginView {
       }, 0)
     })
 
+    // Handle mouseup outside the editor view (finish selection outside)
+    const onDocumentMouseUp = () => {
+      if (this.#mousePressed) {
+        this.#mousePressed = false
+        setTimeout(() => {
+          this.update(view)
+        }, 0)
+      }
+    }
+    document.addEventListener('mouseup', onDocumentMouseUp)
+    this.#onDocumentMouseUp = onDocumentMouseUp
+
     this.#tooltipProvider = new TooltipProvider({
       content: this.#content,
       debounce: 20,
       offset: 10,
       shouldShow: (view: EditorView) => {
         if (this.#mousePressed) return false
+        if (getIsAnyPopupOpen()) return false
 
         const { doc, selection } = view.state
         const { empty, from, to } = selection
@@ -127,6 +146,16 @@ class ToolbarView implements PluginView {
     this.#tooltipProvider.onHide = () => {
       this.#show.value = false
     }
+
+    // React to fixed toolbar popup state changes
+    this.#removePopupListener = addPopupChangeListener(() => {
+      if (getIsAnyPopupOpen()) {
+        this.#tooltipProvider.hide()
+      } else {
+        this.#tooltipProvider.update(view)
+      }
+    })
+
     this.update(view)
   }
 
@@ -136,6 +165,10 @@ class ToolbarView implements PluginView {
   }
 
   destroy = () => {
+    this.#removePopupListener?.()
+    if (this.#onDocumentMouseUp) {
+      document.removeEventListener('mouseup', this.#onDocumentMouseUp)
+    }
     this.#tooltipProvider.destroy()
     this.#app.unmount()
     this.#content.remove()

package/src/icons/remove.ts

@@ -7,6 +7,7 @@ export const removeIcon = `
   >
     <path
       d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"
+      fill="#363B4C"
     />
   </svg>
 `

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

@@ -0,0 +1,43 @@
+.milkdown {
+  .milkdown-diff-block {
+    display: block;
+    position: relative;
+    padding: 16px 0;
+    margin: 20px 0;
+    border-radius: 8px;
+    background: var(--crepe-color-surface-low);
+    overflow: hidden;
+
+    .cm-editor {
+      outline: none !important;
+      background: transparent;
+    }
+
+    .cm-merge-a .cm-merge-chunk {
+      background-color: rgba(244, 63, 94, 0.15) !important;
+    }
+
+    .cm-merge-b .cm-merge-chunk {
+      background-color: rgba(16, 185, 129, 0.15) !important;
+    }
+
+    .cm-merge-chunk-a {
+      background-color: rgba(244, 63, 94, 0.3) !important;
+    }
+
+    .cm-merge-chunk-b {
+      background-color: rgba(16, 185, 129, 0.3) !important;
+    }
+
+    .cm-merge-spacer {
+      background-color: transparent !important;
+      background-image: repeating-linear-gradient(
+        45deg,
+        rgba(150, 150, 150, 0.05),
+        rgba(150, 150, 150, 0.05) 10px,
+        transparent 10px,
+        transparent 20px
+      );
+    }
+  }
+}

package/src/theme/common/inline-diff.css

@@ -0,0 +1,148 @@
+.milkdown {
+  .crepe-diff-added,
+  .crepe-diff-deleted {
+    position: relative;
+    display: block;
+    border-radius: 0;
+    padding: 2px 4px 2px 12px !important;
+    margin: 0 !important;
+  }
+
+  .crepe-diff-added {
+    background-color: rgba(46, 160, 67, 0.08);
+    border-left: 3px solid #2ea043;
+  }
+
+  .crepe-diff-deleted {
+    background-color: rgba(248, 81, 73, 0.08);
+    border-left: 3px solid #f85149;
+  }
+
+  .crepe-diff-inline-added {
+    background-color: rgba(46, 160, 67, 0.25);
+    border-radius: 2px;
+  }
+
+  .crepe-diff-inline-deleted {
+    background-color: rgba(248, 81, 73, 0.25);
+    border-radius: 2px;
+  }
+}
+
+.crepe-diff-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+  border-left: 1px solid #e8e8e8;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  color: #333;
+}
+
+.crepe-diff-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border-bottom: 1px solid #eee;
+  flex-shrink: 0;
+}
+
+.crepe-diff-panel-close {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  font-size: 16px;
+  color: #999;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.crepe-diff-panel-close:hover {
+  background: #f0f0f0;
+  color: #333;
+}
+
+.crepe-diff-panel-tabs {
+  display: flex;
+  border-bottom: 1px solid #eee;
+  padding: 0 8px;
+  flex-shrink: 0;
+}
+
+.crepe-diff-panel-tab {
+  padding: 6px 10px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 12px;
+  color: #666;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s;
+}
+
+.crepe-diff-panel-tab:hover {
+  color: #333;
+}
+
+.crepe-diff-panel-tab.active {
+  color: #1890ff;
+  border-bottom-color: #1890ff;
+}
+
+.crepe-diff-panel-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.crepe-diff-panel-item {
+  padding: 8px 10px;
+  border-radius: 4px;
+  margin-bottom: 6px;
+  background: #fafafa;
+  border: 1px solid #eee;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.crepe-diff-panel-item:hover {
+  border-color: #1890ff;
+  background: #f0f7ff;
+}
+
+.crepe-diff-panel-item-header {
+  margin-bottom: 4px;
+}
+
+.crepe-diff-panel-item-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.crepe-diff-panel-item-row {
+  margin-top: 3px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #555;
+  word-break: break-all;
+}
+
+.crepe-diff-panel-item-label {
+  color: #999;
+  font-size: 11px;
+}

package/src/theme/common/style.css

@@ -11,3 +11,5 @@
 @import './table.css';
 @import './latex.css';
 @import './attachment-block.css';
+@import './inline-diff.css';
+@import './diff-block.css';

package/src/theme/common/table.css

@@ -91,7 +91,7 @@
       left: 0;
       right: 0;
       height: 8px;
-      z-index: 50;
+      z-index: 102;
       overflow: visible;
     }
 
@@ -101,7 +101,7 @@
       left: -8px;
       bottom: 0;
       width: 8px;
-      z-index: 50;
+      z-index: 102;
       overflow: visible;
     }
 
@@ -290,7 +290,7 @@
         background-color: var(--crepe-color-surface);
         border-radius: 8px;
         box-shadow: var(--crepe-shadow-1);
-        z-index: 60;
+        z-index: 102;
 
         &::after {
           content: '';
@@ -455,7 +455,7 @@
 
     .cell-toolbar {
       position: absolute;
-      z-index: 60;
+      z-index: 102;
       display: flex;
       gap: 2px;
       background-color: var(--crepe-color-surface);

package/src/utils/fixed-toolbar-popup-state.ts

@@ -0,0 +1,27 @@
+type Listener = () => void
+const listeners = new Set<Listener>()
+let _popupCount = 0
+
+export function getIsAnyPopupOpen(): boolean {
+  return _popupCount > 0
+}
+
+export function addPopupChangeListener(fn: Listener): () => void {
+  listeners.add(fn)
+  return () => listeners.delete(fn)
+}
+
+export function incrementPopupCount(): void {
+  const wasZero = _popupCount === 0
+  _popupCount++
+  if (wasZero) {
+    listeners.forEach((fn) => fn())
+  }
+}
+
+export function decrementPopupCount(): void {
+  _popupCount = Math.max(0, _popupCount - 1)
+  if (_popupCount === 0) {
+    listeners.forEach((fn) => fn())
+  }
+}