x-star-editor 0.6.0 → 0.6.2

package/dist/components/Toolbar.js

@@ -140,48 +140,48 @@ var headingOptions = [{
   depth: 6,
   fontSize: '0.9em'
 }];
-var mermaidOptions = [{
-  label: 'Flowchart',
-  value: "flowchart TD\n    A[Start] --> B{Is it?}\n    B -- Yes --> C[OK]\n    C --> D[Rethink]\n    D --> B\n    B -- No ----> E[End]"
-}, {
-  label: 'Sequence Diagram',
-  value: "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!"
-}, {
-  label: 'Class Diagram',
-  value: "classDiagram\n    Animal <|-- Duck\n    Animal <|-- Fish\n    Animal <|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck{\n      +String beakColor\n      +swim()\n      +quack()\n    }\n    class Fish{\n      -int sizeInFeet\n      -canEat()\n    }\n    class Zebra{\n      +bool is_wild\n      +run()\n    }"
-}, {
-  label: 'State Diagram',
-  value: "stateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]"
-}, {
-  label: 'Entity Relationship Diagram',
-  value: "erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses"
-}, {
-  label: 'User Journey',
-  value: "journey\n    title My working day\n    section Go to work\n      Make tea: 5: Me\n      Go upstairs: 3: Me\n      Do work: 1: Me, Cat\n    section Go home\n      Go downstairs: 5: Me\n      Sit down: 5: Me"
-}, {
-  label: 'Gantt',
-  value: "gantt\n    title A Gantt Diagram\n    dateFormat YYYY-MM-DD\n    section Section\n        A task          :a1, 2014-01-01, 30d\n        Another task    :after a1, 20d\n    section Another\n        Task in Another :2014-01-12, 12d\n        another task    :24d"
-}, {
-  label: 'Pie Chart',
-  value: "pie title Pets adopted by volunteers\n    \"Dogs\" : 386\n    \"Cats\" : 85\n    \"Rats\" : 15"
-}, {
-  label: 'Quadrant Chart',
-  value: "quadrantChart\n    title Reach and engagement of campaigns\n    x-axis Low Reach --> High Reach\n    y-axis Low Engagement --> High Engagement\n    quadrant-1 We should expand\n    quadrant-2 Need to promote\n    quadrant-3 Re-evaluate\n    quadrant-4 May be improved\n    Campaign A: [0.3, 0.6]\n    Campaign B: [0.45, 0.23]\n    Campaign C: [0.57, 0.69]\n    Campaign D: [0.78, 0.34]\n    Campaign E: [0.40, 0.34]\n    Campaign F: [0.35, 0.78]"
-}, {
-  label: 'Requirement Diagram',
-  value: "requirementDiagram\n\n    requirement test_req {\n    id: 1\n    text: the test text.\n    risk: high\n    verifymethod: test\n    }\n\n    element test_entity {\n    type: simulation\n    }\n\n    test_entity - satisfies -> test_req"
-}, {
-  label: 'Gitgraph (Git) Diagram',
-  value: "gitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit"
-}, {
-  label: 'Mindmaps',
-  value: "mindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness<br/>and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid"
-}, {
-  label: 'Timeline',
-  value: "timeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook\n         : Google\n    2005 : Youtube\n    2006 : Twitter"
-}];
 export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale, onInsertFile) {
   var t = getFormat(locale, 'toolbarItem');
+  var mermaidOptions = [{
+    label: t('flowChat'),
+    value: "flowchart TD\n      A[Start] --> B{Is it?}\n      B -- Yes --> C[OK]\n      C --> D[Rethink]\n      D --> B\n      B -- No ----> E[End]"
+  }, {
+    label: t('sequenceDiagram'),
+    value: "sequenceDiagram\n      Alice->>John: Hello John, how are you?\n      John-->>Alice: Great!\n      Alice-)John: See you later!"
+  }, {
+    label: t('classDiagram'),
+    value: "classDiagram\n      Animal <|-- Duck\n      Animal <|-- Fish\n      Animal <|-- Zebra\n      Animal : +int age\n      Animal : +String gender\n      Animal: +isMammal()\n      Animal: +mate()\n      class Duck{\n        +String beakColor\n        +swim()\n        +quack()\n      }\n      class Fish{\n        -int sizeInFeet\n        -canEat()\n      }\n      class Zebra{\n        +bool is_wild\n        +run()\n      }"
+  }, {
+    label: t('stateDiagram'),
+    value: "stateDiagram-v2\n      [*] --> Still\n      Still --> [*]\n  \n      Still --> Moving\n      Moving --> Still\n      Moving --> Crash\n      Crash --> [*]"
+  }, {
+    label: t('ERDiagram'),
+    value: "erDiagram\n      CUSTOMER ||--o{ ORDER : places\n      ORDER ||--|{ LINE-ITEM : contains\n      CUSTOMER }|..|{ DELIVERY-ADDRESS : uses"
+  }, {
+    label: t('userJourney'),
+    value: "journey\n      title My working day\n      section Go to work\n        Make tea: 5: Me\n        Go upstairs: 3: Me\n        Do work: 1: Me, Cat\n      section Go home\n        Go downstairs: 5: Me\n        Sit down: 5: Me"
+  }, {
+    label: t('Gantt'),
+    value: "gantt\n      title A Gantt Diagram\n      dateFormat YYYY-MM-DD\n      section Section\n          A task          :a1, 2014-01-01, 30d\n          Another task    :after a1, 20d\n      section Another\n          Task in Another :2014-01-12, 12d\n          another task    :24d"
+  }, {
+    label: t('pieChart'),
+    value: "pie title Pets adopted by volunteers\n      \"Dogs\" : 386\n      \"Cats\" : 85\n      \"Rats\" : 15"
+  }, {
+    label: t('quadrantChart'),
+    value: "quadrantChart\n      title Reach and engagement of campaigns\n      x-axis Low Reach --> High Reach\n      y-axis Low Engagement --> High Engagement\n      quadrant-1 We should expand\n      quadrant-2 Need to promote\n      quadrant-3 Re-evaluate\n      quadrant-4 May be improved\n      Campaign A: [0.3, 0.6]\n      Campaign B: [0.45, 0.23]\n      Campaign C: [0.57, 0.69]\n      Campaign D: [0.78, 0.34]\n      Campaign E: [0.40, 0.34]\n      Campaign F: [0.35, 0.78]"
+  }, {
+    label: t('requirementDiagram'),
+    value: "requirementDiagram\n  \n      requirement test_req {\n      id: 1\n      text: the test text.\n      risk: high\n      verifymethod: test\n      }\n  \n      element test_entity {\n      type: simulation\n      }\n  \n      test_entity - satisfies -> test_req"
+  }, {
+    label: t('gitGraphDiagram'),
+    value: "gitGraph\n     commit\n     commit\n     branch develop\n     checkout develop\n     commit\n     commit\n     checkout main\n     merge develop\n     commit\n     commit"
+  }, {
+    label: t('mindMaps'),
+    value: "mindmap\n    root((mindmap))\n      Origins\n        Long history\n        ::icon(fa fa-book)\n        Popularisation\n          British popular psychology author Tony Buzan\n      Research\n        On effectiveness<br/>and features\n        On Automatic creation\n          Uses\n              Creative techniques\n              Strategic planning\n              Argument mapping\n      Tools\n        Pen and paper\n        Mermaid"
+  }, {
+    label: t('timeLine'),
+    value: "timeline\n      title History of Social Media Platform\n      2002 : LinkedIn\n      2004 : Facebook\n           : Google\n      2005 : Youtube\n      2006 : Twitter"
+  }];
   return {
     blockquote: {
       children: /*#__PURE__*/React.createElement(SvgBlockquote, {

package/dist/locales/en_US.d.ts

@@ -34,6 +34,19 @@ declare const _default: {
         readonly undo: "Undo";
         readonly unorderedList: "Unordered List";
         readonly viewOnly: "View Only";
+        readonly flowChat: "Flowchart";
+        readonly sequenceDiagram: "sequenceDiagram";
+        readonly classDiagram: "Class Diagram";
+        readonly stateDiagram: "State Diagram";
+        readonly ERDiagram: "Entity Relationship Diagram";
+        readonly userJourney: "User Journey";
+        readonly Gantt: "Gantt";
+        readonly pieChart: "Pie Chart";
+        readonly quadrantChart: "Quadrant Chart";
+        readonly requirementDiagram: "Requirement Diagram";
+        readonly gitGraphDiagram: "Gitgraph (Git) Diagram";
+        readonly mindMaps: "Mindmaps";
+        readonly timeLine: "Timeline";
     };
 };
 export default _default;

package/dist/locales/en_US.js

@@ -33,6 +33,19 @@ export default {
     toMarkdown: 'To Markdown',
     undo: 'Undo',
     unorderedList: 'Unordered List',
-    viewOnly: 'View Only'
+    viewOnly: 'View Only',
+    flowChat: 'Flowchart',
+    sequenceDiagram: 'sequenceDiagram',
+    classDiagram: 'Class Diagram',
+    stateDiagram: 'State Diagram',
+    ERDiagram: 'Entity Relationship Diagram',
+    userJourney: 'User Journey',
+    Gantt: 'Gantt',
+    pieChart: 'Pie Chart',
+    quadrantChart: 'Quadrant Chart',
+    requirementDiagram: 'Requirement Diagram',
+    gitGraphDiagram: 'Gitgraph (Git) Diagram',
+    mindMaps: 'Mindmaps',
+    timeLine: 'Timeline'
   }
 };

package/dist/locales/index.d.ts

@@ -45,6 +45,19 @@ export declare const useLocale: <T extends "fileInput" | "toolbarItem">(slice: T
             readonly undo: "撤销";
             readonly unorderedList: "无序列表";
             readonly viewOnly: "仅查看";
+            readonly flowChat: "流程图";
+            readonly sequenceDiagram: "时序图";
+            readonly classDiagram: "类图";
+            readonly stateDiagram: "状态图";
+            readonly ERDiagram: "实体关系图";
+            readonly userJourney: "用户旅程图";
+            readonly Gantt: "甘特图";
+            readonly pieChart: "饼图";
+            readonly quadrantChart: "四象限图";
+            readonly requirementDiagram: "需求图";
+            readonly gitGraphDiagram: "Git图";
+            readonly mindMaps: "思维导图";
+            readonly timeLine: "时间线图";
         };
     } | {
         readonly fileInput: {
@@ -82,6 +95,19 @@ export declare const useLocale: <T extends "fileInput" | "toolbarItem">(slice: T
             readonly undo: "Undo";
             readonly unorderedList: "Unordered List";
             readonly viewOnly: "View Only";
+            readonly flowChat: "Flowchart";
+            readonly sequenceDiagram: "sequenceDiagram";
+            readonly classDiagram: "Class Diagram";
+            readonly stateDiagram: "State Diagram";
+            readonly ERDiagram: "Entity Relationship Diagram";
+            readonly userJourney: "User Journey";
+            readonly Gantt: "Gantt";
+            readonly pieChart: "Pie Chart";
+            readonly quadrantChart: "Quadrant Chart";
+            readonly requirementDiagram: "Requirement Diagram";
+            readonly gitGraphDiagram: "Gitgraph (Git) Diagram";
+            readonly mindMaps: "Mindmaps";
+            readonly timeLine: "Timeline";
         };
     })[T][U];
 };
@@ -121,6 +147,19 @@ export declare const getFormat: <T extends "fileInput" | "toolbarItem">(locale:
         readonly undo: "撤销";
         readonly unorderedList: "无序列表";
         readonly viewOnly: "仅查看";
+        readonly flowChat: "流程图";
+        readonly sequenceDiagram: "时序图";
+        readonly classDiagram: "类图";
+        readonly stateDiagram: "状态图";
+        readonly ERDiagram: "实体关系图";
+        readonly userJourney: "用户旅程图";
+        readonly Gantt: "甘特图";
+        readonly pieChart: "饼图";
+        readonly quadrantChart: "四象限图";
+        readonly requirementDiagram: "需求图";
+        readonly gitGraphDiagram: "Git图";
+        readonly mindMaps: "思维导图";
+        readonly timeLine: "时间线图";
     };
 } | {
     readonly fileInput: {
@@ -158,6 +197,19 @@ export declare const getFormat: <T extends "fileInput" | "toolbarItem">(locale:
         readonly undo: "Undo";
         readonly unorderedList: "Unordered List";
         readonly viewOnly: "View Only";
+        readonly flowChat: "Flowchart";
+        readonly sequenceDiagram: "sequenceDiagram";
+        readonly classDiagram: "Class Diagram";
+        readonly stateDiagram: "State Diagram";
+        readonly ERDiagram: "Entity Relationship Diagram";
+        readonly userJourney: "User Journey";
+        readonly Gantt: "Gantt";
+        readonly pieChart: "Pie Chart";
+        readonly quadrantChart: "Quadrant Chart";
+        readonly requirementDiagram: "Requirement Diagram";
+        readonly gitGraphDiagram: "Gitgraph (Git) Diagram";
+        readonly mindMaps: "Mindmaps";
+        readonly timeLine: "Timeline";
     };
 })[T][U];
 export {};

package/dist/locales/zh_CN.d.ts

@@ -34,6 +34,19 @@ declare const _default: {
         readonly undo: "撤销";
         readonly unorderedList: "无序列表";
         readonly viewOnly: "仅查看";
+        readonly flowChat: "流程图";
+        readonly sequenceDiagram: "时序图";
+        readonly classDiagram: "类图";
+        readonly stateDiagram: "状态图";
+        readonly ERDiagram: "实体关系图";
+        readonly userJourney: "用户旅程图";
+        readonly Gantt: "甘特图";
+        readonly pieChart: "饼图";
+        readonly quadrantChart: "四象限图";
+        readonly requirementDiagram: "需求图";
+        readonly gitGraphDiagram: "Git图";
+        readonly mindMaps: "思维导图";
+        readonly timeLine: "时间线图";
     };
 };
 export default _default;

package/dist/locales/zh_CN.js

@@ -33,6 +33,19 @@ export default {
     toMarkdown: '转成 Markdown',
     undo: '撤销',
     unorderedList: '无序列表',
-    viewOnly: '仅查看'
+    viewOnly: '仅查看',
+    flowChat: '流程图',
+    sequenceDiagram: '时序图',
+    classDiagram: '类图',
+    stateDiagram: '状态图',
+    ERDiagram: '实体关系图',
+    userJourney: '用户旅程图',
+    Gantt: '甘特图',
+    pieChart: '饼图',
+    quadrantChart: '四象限图',
+    requirementDiagram: '需求图',
+    gitGraphDiagram: 'Git图',
+    mindMaps: '思维导图',
+    timeLine: '时间线图'
   }
 };

package/dist/styles/index.css

@@ -1847,8 +1847,8 @@ body {
   background-color: #c1def1;
 }
 .x-star-editor-slide-viewer .x-star-editor-slide {
-  width: 960px;
-  height: 540px;
+  width: 1280px;
+  height: 720px;
   padding: 0 32px;
   display: flex;
   flex-direction: column;
@@ -1889,7 +1889,7 @@ body {
 .x-star-editor-slide-viewer .x-star-editor-slide pre {
   width: 70%;
 }
-.x-star-editor-slide-viewer .x-star-editor-slide img {
+.x-star-editor-slide-viewer .x-star-editor-slide img[id^=user-content-mermaid-] {
   width: 100%;
   max-height: 100%;
 }

package/dist/utils/markdown.d.ts

@@ -43,7 +43,7 @@ export declare const toHTML: (sourceCode: string) => string;
  * @returns Markdown 文本
  */
 export declare const toMarkdown: (sourceCode: string) => string;
-export interface ToTextOptions extends ToStringOptions {
+interface ToTextOptions extends ToStringOptions {
     /**
      * 替换图片的 alt 文本
      */
@@ -56,3 +56,4 @@ export interface ToTextOptions extends ToStringOptions {
  * @returns 纯文本
  */
 export declare const toText: (sourceCode: string, options?: ToTextOptions) => string;
+export {};

package/dist/utils/markdown.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["checked"];
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { toText as hastToText } from 'hast-util-to-text';
-import { toString } from 'mdast-util-to-string';
+import { toString as mdastToString } from 'mdast-util-to-string';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import rehypeKatex from 'rehype-katex';
 import rehypeMermaid from 'rehype-mermaidjs';
@@ -273,15 +273,28 @@ var toHastProcessor = unified().use(remarkBreaks).use(remarkRehype, {
     image: function image(h, node) {
       try {
         var _node$alt;
-        var styles = (_node$alt = node.alt) === null || _node$alt === void 0 ? void 0 : _node$alt.split(' ');
+        var alts = [];
+        var styles = [];
+        (_node$alt = node.alt) === null || _node$alt === void 0 ? void 0 : _node$alt.split(' ').forEach(function (word) {
+          var s = word.split(':');
+          if (s.length !== 2) {
+            alts.push(word);
+          } else {
+            if (s[0] === 'w') {
+              s[0] = 'width';
+            } else if (s[0] === 'h') {
+              s[0] = 'height';
+            }
+            if ((s[0] === 'width' || s[0] === 'height') && /^\d+$/.test(s[1])) {
+              s[1] += 'px';
+            }
+            styles.push(s.join(':'));
+          }
+        });
         return h(node, 'img', {
           src: node.url,
-          alt: styles === null || styles === void 0 ? void 0 : styles.filter(function (i) {
-            return !i.includes(':');
-          }).join(' '),
-          style: styles === null || styles === void 0 ? void 0 : styles.filter(function (i) {
-            return i.includes(':');
-          }).join(';')
+          alt: alts.join(' '),
+          style: styles.join(';')
         });
       } catch (_unused) {
         return h(node, 'img', {
@@ -453,5 +466,5 @@ export var toText = function toText(sourceCode, options) {
       node.alt = options.replaceImageAlt;
     });
   }
-  return toString(root, options);
+  return mdastToString(root, options);
 };

package/dist/utils/slide/index.js

@@ -1,5 +1,5 @@
 // import _ from 'lodash';
-// import { CanvasData } from 'x-star-editor/x-star-slide-viewer';
+// import { CanvasData } from '../../x-star-slide-viewer';
 
 // /**
 //  *

package/dist/x-star-md-editor/index.js

@@ -104,17 +104,14 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return sourceCodeLatest.current;
       },
       setValue: function setValue(value) {
-        return exec(function (_ref2) {
-          var selection = _ref2.selection,
-            dispatch = _ref2.dispatch;
-          return dispatch({
-            type: 'set',
-            payload: {
-              sourceCode: value,
-              selection: selection
-            },
+        var selection = getSelection();
+        dispatch({
+          type: 'set',
+          payload: {
+            sourceCode: value,
             selection: selection
-          });
+          },
+          selection: selection
         });
       }
     };

package/dist/x-star-slide-viewer/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewerOptions } from "../x-star-md-viewer/index.js";
+import type { ViewerOptions } from '../x-star-md-viewer';
 export interface XStarSlideViewerPlugin {
     (ctx: ViewerOptions): void;
 }