@jvs-milkdown/crepe 1.2.17 → 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
@@ -1631,6 +1665,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                         'toolbar-item',
                         ctx && checkActive(item.active) && 'active'
                       )}
+                      data-key={item.key}
                       onPointerdown={(e: PointerEvent) => {
                         if (isTable) {
                           e.preventDefault()
@@ -2547,11 +2582,13 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   onClick: ((e: MouseEvent) => void) | undefined,
                   hasDropdown = false,
                   onMouseEnter?: (e: MouseEvent) => void,
-                  onMouseLeave?: (e: MouseEvent) => void
+                  onMouseLeave?: (e: MouseEvent) => void,
+                  key?: string
                 ) => (
                   <button
                     type="button"
                     class={clsx('toolbar-item', isActive && 'active')}
+                    data-key={key}
                     title={title}
                     onPointerdown={(e: PointerEvent) => {
                       e.preventDefault()
@@ -2604,7 +2641,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 2: Font Family
-                if (2 >= cutoff) {
+                if (3 >= cutoff) {
                   items.push(
                     renderIconButton(
                       textIcon,
@@ -2618,7 +2655,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 3: Font Size
-                if (3 >= cutoff) {
+                if (4 >= cutoff) {
                   items.push(
                     renderIconButton(
                       textIcon,
@@ -2632,7 +2669,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 5: Alignment
-                if (5 >= cutoff) {
+                if (6 >= cutoff) {
                   items.push(
                     renderIconButton(
                       currentAlignIndent.value.align === 'center'
@@ -2650,7 +2687,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   )
                 }
                 // Section 6: Color
-                if (6 >= cutoff) {
+                if (7 >= cutoff) {
                   items.push(
                     renderIconButton(
                       fontColorIcon,
@@ -2664,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
@@ -2686,7 +2723,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
                               },
                           isTable,
                           isTable ? handleTableEnter : undefined,
-                          isTable ? handleTableLeave : undefined
+                          isTable ? handleTableLeave : undefined,
+                          item.key
                         )
                       )
                     }

package/src/icons/export.ts

@@ -0,0 +1,5 @@
+export const exportIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M452.288 725.12L246.016 537.6c-4.928-4.48-10.432-8.832-14.72-13.696-20.8-23.232-21.312-42.944-2.304-59.52 17.664-15.36 43.392-14.976 65.536 4.48 49.088 43.328 32.256 27.712 80.512 71.744l69.376 63.36 11.968 10.688v-173.44c0-33.92-0.128-80.96-0.32-128.448-0.192-51.52-0.32-103.616-0.32-140.16L455.68 163.84a183.04 183.04 0 0 1 0.704-24.896c3.52-29.248 19.328-43.712 45.248-42.88 25.344 0.768 41.088 15.872 42.688 45.504 1.28 22.848 1.024 45.888 0.768 68.864l-0.128 27.136c0 50.048 0.128 112.832 0.256 176.384 0.192 71.552 0.384 144.192 0.32 200.704 74.432-68.224 131.968-119.68 162.688-147.584 7.424-6.72 14.912-14.272 24-18.304 18.688-8.448 37.76-7.808 52.8 7.36 14.72 14.72 16.384 31.36 3.968 48.192-3.84 5.248-8.64 10.112-13.44 14.656-45.76 41.92-189.76 173.248-236.16 214.464a62.336 62.336 0 0 1-8.064 6.016 43.712 43.712 0 0 1-15.872 9.792c-20.544 7.104-37.504-0.512-51.968-13.952l-11.2-10.24z m430.784-37.248c24-0.576 42.176 13.44 43.328 39.04 1.728 38.208 2.944 76.992-1.088 115.136-5.312 50.752-51.52 84.16-114.752 85.312-50.112 0.832-100.224 0.64-150.4 0.512l-64.832-0.128H422.272a26252.8 26252.8 0 0 1-194.432-0.192c-90.624-0.512-130.752-37.696-131.392-120.64l-0.192-17.408c-0.32-19.84-0.576-39.68 0.768-59.392 1.92-27.904 20.48-43.648 45.76-42.368 23.488 1.152 37.312 15.296 40.064 42.368 0.896 9.152 0.832 18.432 0.704 27.648l-0.064 10.816c0.384 71.744 7.36 78.208 88.128 78.272 117.248 0.128 234.432 0.128 351.68 0l43.968 0.192c36.096 0.064 72.192 0.192 108.288-0.448 52.672-0.96 64-12.096 65.152-60.288a494.464 494.464 0 0 0 0-21.76 365.632 365.632 0 0 1 0.704-35.84c2.24-26.048 17.92-40.32 41.664-40.832z" fill="currentColor"></path>
+</svg>
+`

package/src/icons/import.ts

@@ -0,0 +1,6 @@
+export const importIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M838.656 594.432a41.152 41.152 0 0 0-40.768 41.472v176.128c0 0.384-0.384 0.96-1.216 0.96H210.688c-0.768 0-1.216-0.576-1.216-0.96V275.968c0-0.384 0.448-0.96 1.216-0.96h143.616a41.088 41.088 0 0 0 41.28-41.472A41.088 41.088 0 0 0 354.304 192H210.688C165.12 192 128 229.76 128 275.968v536.064C128 858.368 165.12 896 210.688 896h585.984c45.632 0 82.688-37.632 82.688-83.968V635.904a41.152 41.152 0 0 0-40.704-41.472z" fill="currentColor"></path>
+  <path d="M895.744 229.056a40.896 40.896 0 0 0-44.864-36.8c-4.032 0.448-99.456 11.52-200.576 68.352-106.24 59.776-179.2 147.648-214.656 257.28l-44.672-131.584a40.576 40.576 0 0 0-51.84-25.792 41.664 41.664 0 0 0-25.152 52.928l80.064 235.968a40.576 40.576 0 0 0 51.84 25.6l0.512-0.128 232.192-85.312a41.728 41.728 0 0 0 24-52.928 40.576 40.576 0 0 0-51.648-25.152l-144 52.928c26.048-99.2 86.464-176.256 180.416-229.76a508.672 508.672 0 0 1 172.416-59.904c22.336-2.56 38.4-22.976 35.968-45.696z" fill="currentColor"></path>
+</svg>
+`

package/src/icons/index.ts

@@ -53,3 +53,7 @@ export * from './word-wrap'
 export * from './crop'
 export * from './border'
 export * from './format-painter'
+export * from './undo'
+export * from './redo'
+export * from './export'
+export * from './import'

package/src/icons/redo.ts

@@ -0,0 +1,5 @@
+export const redoIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M755.584 183.168a42.688 42.688 0 0 0-60.352 60.352l97.856 97.792H341.44a256 256 0 0 0 0 512h213.312a42.688 42.688 0 0 0 0-85.312H341.44a170.688 170.688 0 0 1 0-341.312h451.648l-97.856 97.856a42.688 42.688 0 0 0 60.352 60.288l170.048-170.048a42.56 42.56 0 0 0 0-61.568l-170.048-170.048z" fill="currentColor"></path>
+</svg>
+`

package/src/icons/undo.ts

@@ -0,0 +1,5 @@
+export const undoIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M328.768 243.52a42.688 42.688 0 0 0-60.352-60.352L97.92 353.664A43.008 43.008 0 0 0 85.248 384a42.56 42.56 0 0 0 12.48 30.208l170.688 170.624a42.688 42.688 0 1 0 60.352-60.288l-97.92-97.92h451.712a170.688 170.688 0 1 1 0 341.376H469.248a42.688 42.688 0 1 0 0 85.312h213.312a256 256 0 1 0 0-512H230.912l97.856-97.792z" fill="currentColor"></path>
+</svg>
+`

package/src/theme/common/toolbar.css

@@ -73,6 +73,14 @@
           fill: var(--crepe-color-primary);
         }
       }
+
+      &[data-key='export'],
+      &[data-key='import'],
+      &[data-key='shortcuts'] {
+        svg {
+          --toolbar-icon-color: #363b4c;
+        }
+      }
     }
   }
 
@@ -89,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;
@@ -164,6 +175,14 @@
           fill: var(--crepe-color-primary);
         }
       }
+
+      &[data-key='export'],
+      &[data-key='import'],
+      &[data-key='shortcuts'] {
+        svg {
+          --toolbar-icon-color: #363b4c;
+        }
+      }
     }
   }
 }

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.