@jvs-milkdown/crepe 1.2.30 → 1.2.32

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,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAIhE,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,GAAG,EAKT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAA;AAalD,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAA;IAC9B,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,oXAuPhC,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,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGhE,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,GAAG,EAMT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAA;AAalD,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAA;IAC9B,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,oXAgRhC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/crepe",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "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.30",
-    "@jvs-milkdown/prose": "^1.2.30",
-    "@jvs-milkdown/utils": "^1.2.30",
+    "@jvs-milkdown/kit": "^1.2.32",
+    "@jvs-milkdown/prose": "^1.2.32",
+    "@jvs-milkdown/utils": "^1.2.32",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",

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

@@ -2,12 +2,12 @@ import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { EditorState } from '@jvs-milkdown/kit/prose/state'
 
 import { commandsCtx } from '@jvs-milkdown/kit/core'
-// @ts-ignore
 import {
   defineComponent,
   type ShallowRef,
   type Ref,
   ref,
+  computed,
   onMounted,
   onUnmounted,
   h,
@@ -78,46 +78,69 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
           : props.canRedo?.value) || false
 
       const viewState = props.ctx.get(viewMenuStateCtx.key)
-      const maxWidth = editorWidthMap[viewState.editorWidth as EditorWidth]
-      const isFull = maxWidth === 'none'
+      const maxWidth = computed(
+        () => editorWidthMap[viewState.editorWidth as EditorWidth]
+      )
+      const isFull = computed(() => maxWidth.value === 'none')
 
       if (!viewState.fixedToolbarVisible) {
         return (
-          <button
-            type="button"
-            class="fixed-toolbar-expand-btn"
-            title="展开工具栏"
-            onClick={(e: MouseEvent) => {
-              e.preventDefault()
-              e.stopPropagation()
-              viewState.fixedToolbarVisible = true
-            }}
+          <div
             style={{
-              position: 'absolute',
-              top: '0',
-              right: '32px',
+              position: 'relative',
+              width: '100%',
+              height: '100%',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: '32px',
-              height: '24px',
-              border:
-                '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))',
-              borderTop: 'none',
-              background: 'var(--crepe-color-surface, #ffffff)',
-              cursor: 'pointer',
-              borderRadius: '0 0 6px 6px',
-              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.06)',
-              color: 'var(--crepe-color-on-surface, #363b4c)',
-              pointerEvents: 'auto',
-              zIndex: 200,
             }}
           >
-            <span
-              style={{ display: 'inline-flex', alignItems: 'center' }}
-              innerHTML={chevronDownIcon}
-            />
-          </button>
+            <div
+              style={{
+                position: 'relative',
+                width: '100%',
+                maxWidth: isFull.value ? '100%' : maxWidth.value,
+                margin: isFull.value ? '0' : '0 auto',
+                height: '100%',
+              }}
+            >
+              <button
+                type="button"
+                class="fixed-toolbar-expand-btn"
+                title="展开工具栏"
+                onClick={(e: MouseEvent) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  viewState.fixedToolbarVisible = true
+                }}
+                style={{
+                  position: 'absolute',
+                  top: '0',
+                  right: '6px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '28px',
+                  height: '24px',
+                  border:
+                    '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))',
+                  borderTop: 'none',
+                  background: 'var(--crepe-color-surface, #ffffff)',
+                  cursor: 'pointer',
+                  borderRadius: '0 0 6px 6px',
+                  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.06)',
+                  color: 'var(--crepe-color-on-surface, #363b4c)',
+                  pointerEvents: 'auto',
+                  zIndex: 200,
+                }}
+              >
+                <span
+                  style={{ display: 'inline-flex', alignItems: 'center' }}
+                  innerHTML={chevronDownIcon}
+                />
+              </button>
+            </div>
+          </div>
         )
       }
 
@@ -134,12 +157,14 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
         >
           <div
             style={{
+              position: 'relative',
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'center',
+              justifyContent: 'flex-start',
               width: '100%',
-              maxWidth: isFull ? '100%' : maxWidth,
-              margin: isFull ? '0' : '0 auto',
+              maxWidth: isFull.value ? '100%' : maxWidth.value,
+              margin: isFull.value ? '0' : '0 auto',
+              paddingRight: '40px',
               gap: '0px',
               minWidth: '0',
               overflow: 'hidden',
@@ -247,38 +272,38 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
             {showShortcuts.value && (
               <ShortcutHelpModal ctx={props.ctx} visible={showShortcuts} />
             )}
-          </div>
 
-          <button
-            type="button"
-            class="toolbar-item collapse-btn"
-            title="折叠工具栏"
-            onClick={(e: MouseEvent) => {
-              e.preventDefault()
-              e.stopPropagation()
-              viewState.fixedToolbarVisible = false
-            }}
-            style={{
-              position: 'absolute',
-              top: '6px',
-              right: '32px',
-              margin: '0',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              pointerEvents: 'auto',
-              zIndex: 200,
-            }}
-          >
-            <span
+            <button
+              type="button"
+              class="toolbar-item collapse-btn"
+              title="折叠工具栏"
+              onClick={(e: MouseEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+                viewState.fixedToolbarVisible = false
+              }}
               style={{
-                display: 'inline-flex',
+                position: 'absolute',
+                top: '6px',
+                right: '6px',
+                margin: '0',
+                display: 'flex',
                 alignItems: 'center',
-                transform: 'rotate(180deg)',
+                justifyContent: 'center',
+                pointerEvents: 'auto',
+                zIndex: 200,
               }}
-              innerHTML={chevronDownIcon}
-            />
-          </button>
+            >
+              <span
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  transform: 'rotate(180deg)',
+                }}
+                innerHTML={chevronDownIcon}
+              />
+            </button>
+          </div>
         </div>
       )
     }

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

@@ -415,7 +415,7 @@ class FixedToolbarView implements PluginView {
 
           const maxWidth = (editorWidthMap as any)[viewState.editorWidth]
           const isFull = maxWidth === 'none'
-          const px = isFull ? '80px' : '10px'
+          const px = isFull ? '80px' : '0px'
           this.#view.dom.style.maxWidth = maxWidth
           this.#view.dom.style.width = isFull ? '100%' : maxWidth
           this.#view.dom.style.margin = isFull ? '0' : '0 auto'