@jvs-milkdown/crepe 1.2.34 → 1.2.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/cjs/index.js +166 -193
  2. package/lib/cjs/index.js.map +1 -1
  3. package/lib/esm/index.js +172 -199
  4. package/lib/esm/index.js.map +1 -1
  5. package/lib/tsconfig.tsbuildinfo +1 -1
  6. package/lib/types/feature/fixed-toolbar/component.d.ts.map +1 -1
  7. package/package.json +4 -4
  8. package/src/feature/fixed-toolbar/component.tsx +31 -51
package/lib/cjs/index.js CHANGED
@@ -8655,241 +8655,214 @@ const FixedToolbarComponent = vue.defineComponent({
8655
8655
  const isFull = vue.computed(() => maxWidth.value === "none");
8656
8656
  if (!viewState.fixedToolbarVisible) {
8657
8657
  return /* @__PURE__ */ vue.h(
8658
- "div",
8658
+ "button",
8659
8659
  {
8660
+ type: "button",
8661
+ class: "fixed-toolbar-expand-btn",
8662
+ title: "\u5C55\u5F00\u5DE5\u5177\u680F",
8663
+ onClick: (e) => {
8664
+ e.preventDefault();
8665
+ e.stopPropagation();
8666
+ viewState.fixedToolbarVisible = true;
8667
+ },
8660
8668
  style: {
8661
- position: "relative",
8662
- width: "100%",
8663
- height: "100%",
8669
+ position: "absolute",
8670
+ top: "0",
8671
+ right: "40px",
8664
8672
  display: "flex",
8665
8673
  alignItems: "center",
8666
- justifyContent: "center"
8674
+ justifyContent: "center",
8675
+ width: "28px",
8676
+ height: "24px",
8677
+ border: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))",
8678
+ borderTop: "none",
8679
+ background: "var(--crepe-color-surface, #ffffff)",
8680
+ cursor: "pointer",
8681
+ borderRadius: "0 0 6px 6px",
8682
+ boxShadow: "0 4px 8px rgba(0, 0, 0, 0.06)",
8683
+ color: "var(--crepe-color-on-surface, #363b4c)",
8684
+ pointerEvents: "auto",
8685
+ zIndex: 200
8667
8686
  }
8668
8687
  },
8688
+ /* @__PURE__ */ vue.h(
8689
+ "span",
8690
+ {
8691
+ style: { display: "inline-flex", alignItems: "center" },
8692
+ innerHTML: chevronDownIcon
8693
+ }
8694
+ )
8695
+ );
8696
+ }
8697
+ return /* @__PURE__ */ vue.h(Fragment, null, /* @__PURE__ */ vue.h(
8698
+ "div",
8699
+ {
8700
+ style: {
8701
+ position: "relative",
8702
+ display: "flex",
8703
+ alignItems: "center",
8704
+ justifyContent: "flex-start",
8705
+ width: "100%",
8706
+ maxWidth: isFull.value ? "100%" : maxWidth.value,
8707
+ margin: isFull.value ? "0" : "0 auto",
8708
+ padding: "0px 10px",
8709
+ gap: "0px",
8710
+ minWidth: "0",
8711
+ overflow: "hidden"
8712
+ }
8713
+ },
8714
+ ((_d = props.config) == null ? void 0 : _d.showMenuBar) !== false && [
8715
+ /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
8716
+ /* @__PURE__ */ vue.h(
8717
+ "div",
8718
+ {
8719
+ style: {
8720
+ width: "1px",
8721
+ minWidth: "1px",
8722
+ height: "20px",
8723
+ backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
8724
+ }
8725
+ }
8726
+ )
8727
+ ],
8728
+ ((_e = props.config) == null ? void 0 : _e.showHistory) !== false && [
8669
8729
  /* @__PURE__ */ vue.h(
8670
8730
  "button",
8671
8731
  {
8672
8732
  type: "button",
8673
- class: "fixed-toolbar-expand-btn",
8674
- title: "\u5C55\u5F00\u5DE5\u5177\u680F",
8733
+ class: ["toolbar-item", !canUndo && "disabled"],
8734
+ disabled: !canUndo,
8735
+ title: "\u64A4\u9500",
8736
+ onPointerdown: (e) => {
8737
+ e.preventDefault();
8738
+ e.stopPropagation();
8739
+ },
8675
8740
  onClick: (e) => {
8676
8741
  e.preventDefault();
8677
8742
  e.stopPropagation();
8678
- viewState.fixedToolbarVisible = true;
8743
+ if (canUndo) {
8744
+ props.ctx.get(core.commandsCtx).call("Undo");
8745
+ }
8679
8746
  },
8680
8747
  style: {
8681
- position: "absolute",
8682
- top: "0",
8683
- right: "40px",
8684
8748
  display: "flex",
8685
8749
  alignItems: "center",
8686
8750
  justifyContent: "center",
8687
- width: "28px",
8688
- height: "24px",
8689
- border: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))",
8690
- borderTop: "none",
8691
- background: "var(--crepe-color-surface, #ffffff)",
8692
- cursor: "pointer",
8693
- borderRadius: "0 0 6px 6px",
8694
- boxShadow: "0 4px 8px rgba(0, 0, 0, 0.06)",
8695
- color: "var(--crepe-color-on-surface, #363b4c)",
8696
- pointerEvents: "auto",
8697
- zIndex: 200
8751
+ border: "none",
8752
+ background: "transparent",
8753
+ cursor: canUndo ? "pointer" : "default",
8754
+ padding: "6px",
8755
+ borderRadius: "4px",
8756
+ color: canUndo ? "#363b4c" : "#c0c4cc",
8757
+ "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
8698
8758
  }
8699
8759
  },
8700
8760
  /* @__PURE__ */ vue.h(
8701
8761
  "span",
8702
8762
  {
8703
8763
  style: { display: "inline-flex", alignItems: "center" },
8704
- innerHTML: chevronDownIcon
8764
+ innerHTML: undoIcon
8705
8765
  }
8706
8766
  )
8707
- )
8708
- );
8709
- }
8710
- return /* @__PURE__ */ vue.h(
8711
- "div",
8712
- {
8713
- style: {
8714
- position: "relative",
8715
- width: "100%",
8716
- height: "100%",
8717
- display: "flex",
8718
- alignItems: "center",
8719
- justifyContent: "center"
8720
- }
8721
- },
8722
- /* @__PURE__ */ vue.h(
8723
- "div",
8724
- {
8725
- style: {
8726
- position: "relative",
8727
- display: "flex",
8728
- alignItems: "center",
8729
- justifyContent: "flex-start",
8730
- width: "100%",
8731
- maxWidth: isFull.value ? "100%" : maxWidth.value,
8732
- margin: isFull.value ? "0" : "0 auto",
8733
- padding: "0px 10px",
8734
- gap: "0px",
8735
- minWidth: "0",
8736
- overflow: "hidden"
8737
- }
8738
- },
8739
- ((_d = props.config) == null ? void 0 : _d.showMenuBar) !== false && [
8740
- /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
8741
- /* @__PURE__ */ vue.h(
8742
- "div",
8743
- {
8744
- style: {
8745
- width: "1px",
8746
- minWidth: "1px",
8747
- height: "20px",
8748
- backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
8749
- }
8750
- }
8751
- )
8752
- ],
8753
- ((_e = props.config) == null ? void 0 : _e.showHistory) !== false && [
8754
- /* @__PURE__ */ vue.h(
8755
- "button",
8756
- {
8757
- type: "button",
8758
- class: ["toolbar-item", !canUndo && "disabled"],
8759
- disabled: !canUndo,
8760
- title: "\u64A4\u9500",
8761
- onPointerdown: (e) => {
8762
- e.preventDefault();
8763
- e.stopPropagation();
8764
- },
8765
- onClick: (e) => {
8766
- e.preventDefault();
8767
- e.stopPropagation();
8768
- if (canUndo) {
8769
- props.ctx.get(core.commandsCtx).call("Undo");
8770
- }
8771
- },
8772
- style: {
8773
- display: "flex",
8774
- alignItems: "center",
8775
- justifyContent: "center",
8776
- border: "none",
8777
- background: "transparent",
8778
- cursor: canUndo ? "pointer" : "default",
8779
- padding: "6px",
8780
- borderRadius: "4px",
8781
- color: canUndo ? "#363b4c" : "#c0c4cc",
8782
- "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
8783
- }
8767
+ ),
8768
+ /* @__PURE__ */ vue.h(
8769
+ "button",
8770
+ {
8771
+ type: "button",
8772
+ class: ["toolbar-item", !canRedo && "disabled"],
8773
+ disabled: !canRedo,
8774
+ title: "\u6062\u590D",
8775
+ onPointerdown: (e) => {
8776
+ e.preventDefault();
8777
+ e.stopPropagation();
8784
8778
  },
8785
- /* @__PURE__ */ vue.h(
8786
- "span",
8787
- {
8788
- style: { display: "inline-flex", alignItems: "center" },
8789
- innerHTML: undoIcon
8790
- }
8791
- )
8792
- ),
8793
- /* @__PURE__ */ vue.h(
8794
- "button",
8795
- {
8796
- type: "button",
8797
- class: ["toolbar-item", !canRedo && "disabled"],
8798
- disabled: !canRedo,
8799
- title: "\u6062\u590D",
8800
- onPointerdown: (e) => {
8801
- e.preventDefault();
8802
- e.stopPropagation();
8803
- },
8804
- onClick: (e) => {
8805
- e.preventDefault();
8806
- e.stopPropagation();
8807
- if (canRedo) {
8808
- props.ctx.get(core.commandsCtx).call("Redo");
8809
- }
8810
- },
8811
- style: {
8812
- display: "flex",
8813
- alignItems: "center",
8814
- justifyContent: "center",
8815
- border: "none",
8816
- background: "transparent",
8817
- cursor: canRedo ? "pointer" : "default",
8818
- padding: "6px",
8819
- borderRadius: "4px",
8820
- color: canRedo ? "#363b4c" : "#c0c4cc",
8821
- "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
8779
+ onClick: (e) => {
8780
+ e.preventDefault();
8781
+ e.stopPropagation();
8782
+ if (canRedo) {
8783
+ props.ctx.get(core.commandsCtx).call("Redo");
8822
8784
  }
8823
8785
  },
8824
- /* @__PURE__ */ vue.h(
8825
- "span",
8826
- {
8827
- style: { display: "inline-flex", alignItems: "center" },
8828
- innerHTML: redoIcon
8829
- }
8830
- )
8831
- ),
8786
+ style: {
8787
+ display: "flex",
8788
+ alignItems: "center",
8789
+ justifyContent: "center",
8790
+ border: "none",
8791
+ background: "transparent",
8792
+ cursor: canRedo ? "pointer" : "default",
8793
+ padding: "6px",
8794
+ borderRadius: "4px",
8795
+ color: canRedo ? "#363b4c" : "#c0c4cc",
8796
+ "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
8797
+ }
8798
+ },
8832
8799
  /* @__PURE__ */ vue.h(
8833
- "div",
8800
+ "span",
8834
8801
  {
8835
- style: {
8836
- width: "1px",
8837
- minWidth: "1px",
8838
- height: "20px",
8839
- backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
8840
- }
8802
+ style: { display: "inline-flex", alignItems: "center" },
8803
+ innerHTML: redoIcon
8841
8804
  }
8842
8805
  )
8843
- ],
8806
+ ),
8844
8807
  /* @__PURE__ */ vue.h(
8845
- Toolbar,
8808
+ "div",
8846
8809
  {
8847
- ctx: props.ctx,
8848
- hide: props.hide,
8849
- show: props.show,
8850
- state: props.state,
8851
- config: props.config,
8852
- isFixed: true
8810
+ style: {
8811
+ width: "1px",
8812
+ minWidth: "1px",
8813
+ height: "20px",
8814
+ backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
8815
+ }
8853
8816
  }
8854
- ),
8855
- showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
8817
+ )
8818
+ ],
8819
+ /* @__PURE__ */ vue.h(
8820
+ Toolbar,
8821
+ {
8822
+ ctx: props.ctx,
8823
+ hide: props.hide,
8824
+ show: props.show,
8825
+ state: props.state,
8826
+ config: props.config,
8827
+ isFixed: true
8828
+ }
8856
8829
  ),
8830
+ showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
8831
+ ), /* @__PURE__ */ vue.h(
8832
+ "button",
8833
+ {
8834
+ type: "button",
8835
+ class: "toolbar-item collapse-btn",
8836
+ title: "\u6298\u53E0\u5DE5\u5177\u680F",
8837
+ onClick: (e) => {
8838
+ e.preventDefault();
8839
+ e.stopPropagation();
8840
+ viewState.fixedToolbarVisible = false;
8841
+ },
8842
+ style: {
8843
+ position: "absolute",
8844
+ top: "6px",
8845
+ right: "40px",
8846
+ margin: "0",
8847
+ display: "flex",
8848
+ alignItems: "center",
8849
+ justifyContent: "center",
8850
+ pointerEvents: "auto",
8851
+ zIndex: 200
8852
+ }
8853
+ },
8857
8854
  /* @__PURE__ */ vue.h(
8858
- "button",
8855
+ "span",
8859
8856
  {
8860
- type: "button",
8861
- class: "toolbar-item collapse-btn",
8862
- title: "\u6298\u53E0\u5DE5\u5177\u680F",
8863
- onClick: (e) => {
8864
- e.preventDefault();
8865
- e.stopPropagation();
8866
- viewState.fixedToolbarVisible = false;
8867
- },
8868
8857
  style: {
8869
- position: "absolute",
8870
- top: "6px",
8871
- right: "40px",
8872
- margin: "0",
8873
- display: "flex",
8858
+ display: "inline-flex",
8874
8859
  alignItems: "center",
8875
- justifyContent: "center",
8876
- pointerEvents: "auto",
8877
- zIndex: 200
8878
- }
8879
- },
8880
- /* @__PURE__ */ vue.h(
8881
- "span",
8882
- {
8883
- style: {
8884
- display: "inline-flex",
8885
- alignItems: "center",
8886
- transform: "rotate(180deg)"
8887
- },
8888
- innerHTML: chevronDownIcon
8889
- }
8890
- )
8860
+ transform: "rotate(180deg)"
8861
+ },
8862
+ innerHTML: chevronDownIcon
8863
+ }
8891
8864
  )
8892
- );
8865
+ ));
8893
8866
  };
8894
8867
  }
8895
8868
  });