@jvs-milkdown/crepe 1.2.18 → 1.2.20

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())
+}

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2020-present Mirone
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.