@jvs-milkdown/crepe 1.2.18 → 1.2.21

package/lib/types/core/crepe.d.ts

@@ -8,5 +8,6 @@ export interface CrepeConfig extends CrepeBuilderConfig {
 export declare class Crepe extends CrepeBuilder {
     static Feature: typeof CrepeFeature;
     constructor(config?: CrepeConfig);
+    destroy: () => Promise<import("@jvs-milkdown/core").Editor>;
 }
 //# sourceMappingURL=crepe.d.ts.map

package/lib/types/core/crepe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crepe.d.ts","sourceRoot":"","sources":["../../../src/core/crepe.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAmB,MAAM,YAAY,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGjE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IAErD,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAGjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;CACpC;AAGD,qBAAa,KAAM,SAAQ,YAAY;IAErC,MAAM,CAAC,OAAO,sBAAe;gBAKjB,MAAM,GAAE,WAAgB;CA2ErC"}
+{"version":3,"file":"crepe.d.ts","sourceRoot":"","sources":["../../../src/core/crepe.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAGpD,OAAO,EAAE,YAAY,EAAmB,MAAM,YAAY,CAAA;AAG1D,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGjE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IAErD,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAGjD,cAAc,CAAC,EAAE,kBAAkB,CAAA;CACpC;AAGD,qBAAa,KAAM,SAAQ,YAAY;IAErC,MAAM,CAAC,OAAO,sBAAe;gBAKjB,MAAM,GAAE,WAAgB;IA0G3B,OAAO,qDAGf;CACF"}

package/lib/types/feature/fixed-toolbar/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAO9D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,GAAG,EAKT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAA;AAQlD,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,yBAAyB,CAAA;IAClC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,qBAAqB,oXA4JhC,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAI9D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,GAAG,EAIT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAA;AAOlD,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,yBAAyB,CAAA;IAClC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,qBAAqB,oXA8JhC,CAAA"}

package/lib/types/feature/fixed-toolbar/menu-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/menu-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAchD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAsDjD,eAAO,MAAM,OAAO;;cAEO,MAAM,GAAG;;;;cACN,MAAM,kBAAkB;;;;;cAD3B,MAAM,GAAG;;;;cACN,MAAM,kBAAkB;;;+GAkgBpD,CAAA"}
+{"version":3,"file":"menu-bar.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/menu-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAahD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAsDjD,eAAO,MAAM,OAAO;;cAEO,MAAM,GAAG;;;;cACN,MAAM,kBAAkB;;;;;cAD3B,MAAM,GAAG;;;;cACN,MAAM,kBAAkB;;;+GAkgBpD,CAAA"}

package/lib/types/feature/toolbar/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAgBhD,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,+BAA+B,CAAA;AAUtC,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,UAAU,EAQhB,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAmG7C,KAAK,YAAY,GAAG;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAeD,eAAO,MAAM,OAAO,0WA++ElB,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAgBhD,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,+BAA+B,CAAA;AAUtC,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,UAAU,EAQhB,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAmG7C,KAAK,YAAY,GAAG;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAeD,eAAO,MAAM,OAAO,0WAihFlB,CAAA"}

package/lib/types/utils/fixed-toolbar-popup-state.d.ts

@@ -3,5 +3,6 @@ export declare function getIsAnyPopupOpen(): boolean;
 export declare function addPopupChangeListener(fn: Listener): () => void;
 export declare function incrementPopupCount(): void;
 export declare function decrementPopupCount(): void;
+export declare function resetPopupCount(): void;
 export {};
 //# sourceMappingURL=fixed-toolbar-popup-state.d.ts.map

package/lib/types/utils/fixed-toolbar-popup-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fixed-toolbar-popup-state.d.ts","sourceRoot":"","sources":["../../../src/utils/fixed-toolbar-popup-state.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAA;AAI1B,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,IAAI,CAG/D;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAM1C;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAK1C"}
+{"version":3,"file":"fixed-toolbar-popup-state.d.ts","sourceRoot":"","sources":["../../../src/utils/fixed-toolbar-popup-state.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAA;AAI1B,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,IAAI,CAG/D;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAM1C;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAK1C;AAED,wBAAgB,eAAe,IAAI,IAAI,CAGtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/crepe",
-  "version": "1.2.18",
+  "version": "1.2.21",
   "keywords": [
     "crepe",
     "editor",
@@ -107,9 +107,9 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.26.0",
     "@floating-ui/dom": "^1.7.6",
-    "@jvs-milkdown/kit": "^1.2.18",
-    "@jvs-milkdown/prose": "^1.2.18",
-    "@jvs-milkdown/utils": "^1.2.18",
+    "@jvs-milkdown/kit": "^1.2.21",
+    "@jvs-milkdown/prose": "^1.2.21",
+    "@jvs-milkdown/utils": "^1.2.21",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",

package/src/core/crepe.ts

@@ -6,6 +6,7 @@ import type { CrepeFeatureConfig } from '../feature'
 import { defaultConfig } from '../default-config'
 import { CrepeFeature, defaultFeatures } from '../feature'
 import { loadFeature } from '../feature/loader'
+import { resetPopupCount } from '../utils/fixed-toolbar-popup-state'
 import { CrepeBuilder, type CrepeBuilderConfig } from './builder'
 
 /// The crepe editor configuration.
@@ -26,6 +27,7 @@ export class Crepe extends CrepeBuilder {
   /// You can pass configs to the editor to configure the editor.
   /// Calling the constructor will not create the editor, you need to call `create` to create the editor.
   constructor(config: CrepeConfig = {}) {
+    resetPopupCount()
     const { features = {}, featureConfigs = {}, ...crepeBuilderConfig } = config
     const finalConfigs = defaultsDeep(featureConfigs, defaultConfig)
     const fixedToolbarConfig = finalConfigs[CrepeFeature.FixedToolbar]
@@ -67,31 +69,60 @@ export class Crepe extends CrepeBuilder {
       this.on((listener) => {
         listener.markdownUpdated((_, markdown) => {
           try {
-            const stored = localStorage.getItem('jvs-milkdown-data')
-            let parsed: any = {}
-            if (stored) {
-              parsed = JSON.parse(stored)
-            }
-            if (!parsed.content) {
-              parsed.content = {}
-            }
             const html = this.editor.action(getHTML())
             const docId = fixedToolbarConfig.id || 'default'
 
-            const currentEntry = parsed.content[docId]
-            const hasChanged =
-              !currentEntry ||
-              (typeof currentEntry === 'string' && currentEntry !== markdown) ||
-              (typeof currentEntry === 'object' &&
-                (currentEntry.markdown !== markdown ||
-                  currentEntry.html !== html))
-
-            if (hasChanged) {
-              parsed.content[docId] = {
-                markdown,
-                html,
+            const saveToLocalStorage = (mdVal: string, htmlVal: string) => {
+              try {
+                const stored = localStorage.getItem('jvs-milkdown-data')
+                let parsed: any = {}
+                if (stored) {
+                  parsed = JSON.parse(stored)
+                }
+                if (!parsed.content) {
+                  parsed.content = {}
+                }
+                const currentEntry = parsed.content[docId]
+                const hasChanged =
+                  !currentEntry ||
+                  (typeof currentEntry === 'string' &&
+                    currentEntry !== mdVal) ||
+                  (typeof currentEntry === 'object' &&
+                    (currentEntry.markdown !== mdVal ||
+                      currentEntry.html !== htmlVal))
+
+                if (hasChanged) {
+                  parsed.content[docId] = {
+                    markdown: mdVal,
+                    html: htmlVal,
+                  }
+                  localStorage.setItem(
+                    'jvs-milkdown-data',
+                    JSON.stringify(parsed)
+                  )
+                }
+              } catch (e) {
+                console.error('Error saving content to localStorage:', e)
               }
-              localStorage.setItem('jvs-milkdown-data', JSON.stringify(parsed))
+            }
+
+            const hasBlobUrl =
+              /blob:https?:\/\//.test(markdown) || /blob:https?:\/\//.test(html)
+
+            if (hasBlobUrl) {
+              Promise.all([
+                replaceBlobUrlsWithBase64(markdown),
+                replaceBlobUrlsWithBase64(html),
+              ])
+                .then(([base64Markdown, base64Html]) => {
+                  saveToLocalStorage(base64Markdown, base64Html)
+                })
+                .catch((e) => {
+                  console.error('Error converting blob URLs:', e)
+                  saveToLocalStorage(markdown, html)
+                })
+            } else {
+              saveToLocalStorage(markdown, html)
             }
           } catch (e) {
             console.error('Error saving content to localStorage:', e)
@@ -100,4 +131,35 @@ export class Crepe extends CrepeBuilder {
       })
     }
   }
+
+  override destroy = () => {
+    resetPopupCount()
+    return this.editor.destroy()
+  }
+}
+
+async function replaceBlobUrlsWithBase64(content: string): Promise<string> {
+  const blobRegex = /blob:https?:\/\/[^\s'")>]+/g
+  const matches = content.match(blobRegex)
+  if (!matches) return content
+
+  let result = content
+  const uniqueBlobs = Array.from(new Set(matches))
+
+  for (const blobUrl of uniqueBlobs) {
+    try {
+      const response = await fetch(blobUrl)
+      const blob = await response.blob()
+      const base64 = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+      result = result.replaceAll(blobUrl, base64)
+    } catch (e) {
+      console.error('Failed to convert blob URL to base64:', blobUrl, e)
+    }
+  }
+  return result
 }

package/src/feature/fixed-toolbar/component.tsx

@@ -1,24 +1,19 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { Selection } from '@jvs-milkdown/kit/prose/state'
 
-import { Icon } from '@jvs-milkdown/kit/component'
-import { commandsCtx, editorViewCtx } from '@jvs-milkdown/kit/core'
-import { getMarkdown } from '@jvs-milkdown/kit/utils'
-import { replaceAll } from '@jvs-milkdown/utils'
+import { commandsCtx } from '@jvs-milkdown/kit/core'
 // @ts-ignore
 import {
   defineComponent,
   type ShallowRef,
   type Ref,
   ref,
-  h,
   onMounted,
   onUnmounted,
 } from 'vue'
 
 import type { FixedToolbarFeatureConfig } from '.'
 
-import { i18n } from '../../core/locale'
 import { undoIcon, redoIcon } from '../../icons'
 import { Toolbar } from '../toolbar/component'
 import { MenuBar } from './menu-bar'
@@ -82,6 +77,8 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
             justifyContent: 'center',
             width: '100%',
             gap: '0px',
+            minWidth: '0',
+            overflow: 'hidden',
           }}
         >
           {props.config?.showMenuBar !== false && [

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

@@ -3,7 +3,7 @@ import type { PluginView, Selection } 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'
-import { $ctx, $prose, getMarkdown } from '@jvs-milkdown/kit/utils'
+import { $ctx, $prose } from '@jvs-milkdown/kit/utils'
 import { undo, redo } from '@jvs-milkdown/prose/history'
 // @ts-ignore
 import {

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

@@ -8,7 +8,6 @@ import {
   onUnmounted,
   computed,
   onMounted,
-  h,
   watch,
 } from 'vue'
 

package/src/feature/toolbar/component.tsx

@@ -549,7 +549,11 @@ export const Toolbar = defineComponent<ToolbarProps>({
 
       if (!isFixed) {
         const view = ctx.get(editorViewCtx)
-        container.style.maxWidth = `${view.dom.clientWidth - 32}px`
+        const containerDOM =
+          view.dom.closest('.milkdown-editor-container') ||
+          view.dom.closest('.milkdown') ||
+          view.dom
+        container.style.maxWidth = `${containerDOM.clientWidth - 32}px`
       }
 
       // For fixed toolbar: use available space in parent (minus MenuBar & separator)
@@ -573,18 +577,17 @@ export const Toolbar = defineComponent<ToolbarProps>({
         }
       } else {
         const view = ctx.get(editorViewCtx)
-        containerWidth = view.dom.clientWidth - 32
+        const containerDOM =
+          view.dom.closest('.milkdown-editor-container') ||
+          view.dom.closest('.milkdown') ||
+          view.dom
+        containerWidth = containerDOM.clientWidth - 32
       }
 
-      if (containerWidth === lastContainerWidth) {
-        return
-      }
-      lastContainerWidth = containerWidth
-
       if (showOverflowMenu.value) {
         showOverflowMenu.value = false
       }
-      const MORE_BUTTON_WIDTH = 44
+      const MORE_BUTTON_WIDTH = 56
       const children = Array.from(container.children) as HTMLElement[]
       const toolbarChildren = children.filter(
         (el): el is HTMLElement =>
@@ -598,6 +601,15 @@ export const Toolbar = defineComponent<ToolbarProps>({
         totalWidth += measureChild(child, i)
       }
 
+      if (totalWidth === 0) {
+        return
+      }
+
+      if (containerWidth === lastContainerWidth) {
+        return
+      }
+      lastContainerWidth = containerWidth
+
       if (totalWidth <= containerWidth) {
         overflowVisibleCount.value = Infinity
         totalSectionCount.value = toolbarChildren.length
@@ -808,6 +820,16 @@ export const Toolbar = defineComponent<ToolbarProps>({
       } else {
         const view = ctx.get(editorViewCtx)
         overflowResizeObserver.observe(view.dom)
+
+        const containerDOM = view.dom.closest('.milkdown-editor-container')
+        if (containerDOM) {
+          overflowResizeObserver.observe(containerDOM)
+        }
+
+        const rootDOM = view.dom.closest('.milkdown')
+        if (rootDOM) {
+          overflowResizeObserver.observe(rootDOM)
+        }
       }
       computeOverflow()
     }
@@ -849,6 +871,18 @@ export const Toolbar = defineComponent<ToolbarProps>({
       setTimeout(computeOverflow, 0)
     })
 
+    watch(
+      () => props.show?.value,
+      (val) => {
+        if (val) {
+          cachedWidths.clear()
+          overflowVisibleCount.value = Infinity
+          lastContainerWidth = 0
+          setTimeout(computeOverflow, 0)
+        }
+      }
+    )
+
     const onClick = (fn: (ctx: Ctx) => void) => (e: MouseEvent) => {
       e.preventDefault()
       if (ctx) fn(ctx)
@@ -1398,7 +1432,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
           <div
             style={{
               position: 'relative',
-              display: isSectionOverflowed(0) ? 'none' : 'flex',
+              display: isSectionOverflowed(1) ? 'none' : 'flex',
               flexShrink: 0,
             }}
           >
@@ -1444,7 +1478,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
             style={{
               margin: '0 4px',
               alignSelf: 'center',
-              display: isSectionOverflowed(1) ? 'none' : undefined,
+              display: isSectionOverflowed(2) ? 'none' : undefined,
               flexShrink: 0,
             }}
           ></div>
@@ -1456,7 +1490,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
             onMouseleave={handleFontFamilyLeave}
             style={{
               position: 'relative',
-              display: isSectionOverflowed(2) ? 'none' : 'flex',
+              display: isSectionOverflowed(3) ? 'none' : 'flex',
               alignItems: 'center',
               padding: '0 6px',
               minWidth: '50px',
@@ -1502,7 +1536,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
             onMouseleave={handleFontSizeLeave}
             style={{
               position: 'relative',
-              display: isSectionOverflowed(3) ? 'none' : 'flex',
+              display: isSectionOverflowed(4) ? 'none' : 'flex',
               alignItems: 'center',
               padding: '0 6px',
               minWidth: '40px',
@@ -1533,7 +1567,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
             style={{
               margin: '0 4px',
               alignSelf: 'center',
-              display: isSectionOverflowed(4) ? 'none' : undefined,
+              display: isSectionOverflowed(5) ? 'none' : undefined,
               flexShrink: 0,
             }}
           ></div>
@@ -1545,7 +1579,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
             onMouseleave={handleAlignLeave}
             style={{
               position: 'relative',
-              display: isSectionOverflowed(5) ? 'none' : 'flex',
+              display: isSectionOverflowed(6) ? 'none' : 'flex',
               alignItems: 'center',
               padding: '0 6px',
               flexShrink: 0,
@@ -1575,7 +1609,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
             onMouseleave={handleColorLeave}
             style={{
               position: 'relative',
-              display: isSectionOverflowed(6) ? 'none' : 'flex',
+              display: isSectionOverflowed(7) ? 'none' : 'flex',
               alignItems: 'center',
               padding: '0 4px',
               flexShrink: 0,
@@ -1608,7 +1642,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
 
           {/* Formatting Tools (sections 7+) */}
           {(() => {
-            let sectionIdx = 7
+            let sectionIdx = 8
             return nonHeadingGroups.map((group: any, groupIndex: number) => {
               const items = group.items.map((item: any) => {
                 const idx = sectionIdx
@@ -2607,7 +2641,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 2: Font Family
-                if (2 >= cutoff) {
+                if (3 >= cutoff) {
                   items.push(
                     renderIconButton(
                       textIcon,
@@ -2621,7 +2655,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 3: Font Size
-                if (3 >= cutoff) {
+                if (4 >= cutoff) {
                   items.push(
                     renderIconButton(
                       textIcon,
@@ -2635,7 +2669,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 5: Alignment
-                if (5 >= cutoff) {
+                if (6 >= cutoff) {
                   items.push(
                     renderIconButton(
                       currentAlignIndent.value.align === 'center'
@@ -2653,7 +2687,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 6: Color
-                if (6 >= cutoff) {
+                if (7 >= cutoff) {
                   items.push(
                     renderIconButton(
                       fontColorIcon,
@@ -2667,7 +2701,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Formatting buttons (section 7+)
-                let fmtIdx = 7
+                let fmtIdx = 8
                 for (const group of nonHeadingGroups) {
                   for (const item of group.items) {
                     const idx = fmtIdx

package/src/theme/common/toolbar.css

@@ -97,6 +97,9 @@
     position: sticky;
     top: 0;
     flex-shrink: 0;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
 
     .toolbar-shortcut-btn {
       display: flex;

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

@@ -25,3 +25,8 @@ export function decrementPopupCount(): void {
     listeners.forEach((fn) => fn())
   }
 }
+
+export function resetPopupCount(): void {
+  _popupCount = 0
+  listeners.forEach((fn) => fn())
+}