x-star-editor 0.4.2 → 0.6.0

package/dist/components/FileInput.js

@@ -28,25 +28,25 @@ var FileInput = function FileInput(_ref) {
   var _useLocale = useLocale('fileInput'),
     t = _useLocale.format;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "file-input"))
+    className: classNames("".concat(prefix, "-file-input"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "tabs"))
+    className: classNames("".concat(prefix, "-tabs"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "tab"), _defineProperty({}, "".concat(prefix, "active"), type === 'file')),
+    className: classNames("".concat(prefix, "-tab"), _defineProperty({}, "".concat(prefix, "-active"), type === 'file')),
     onClick: function onClick() {
       return setType('file');
     }
   }, t('file')), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "tab"), _defineProperty({}, "".concat(prefix, "active"), type === 'url')),
+    className: classNames("".concat(prefix, "-tab"), _defineProperty({}, "".concat(prefix, "-active"), type === 'url')),
     onClick: function onClick() {
       return setType('url');
     }
   }, t('url'))), type === 'file' ? /*#__PURE__*/React.createElement("label", {
-    className: classNames("".concat(prefix, "field"))
+    className: classNames("".concat(prefix, "-field"))
   }, t('file'), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "file-container"))
+    className: classNames("".concat(prefix, "-file-container"))
   }, /*#__PURE__*/React.createElement("input", {
-    className: classNames("".concat(prefix, "hidden")),
+    className: classNames("".concat(prefix, "-hidden")),
     type: "file",
     accept: image ? 'image/*' : undefined,
     onChange: function onChange(e) {
@@ -54,30 +54,30 @@ var FileInput = function FileInput(_ref) {
       return setFile((_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]);
     }
   }), /*#__PURE__*/React.createElement("input", {
-    className: classNames("".concat(prefix, "input")),
+    className: classNames("".concat(prefix, "-input")),
     readOnly: true,
     value: (_file$name = file === null || file === void 0 ? void 0 : file.name) !== null && _file$name !== void 0 ? _file$name : ''
   }), /*#__PURE__*/React.createElement("button", {
-    className: classNames("".concat(prefix, "button")),
+    className: classNames("".concat(prefix, "-button")),
     type: "button"
   }, t('chooseFile')))) : /*#__PURE__*/React.createElement("label", {
-    className: classNames("".concat(prefix, "field"))
+    className: classNames("".concat(prefix, "-field"))
   }, t('url'), /*#__PURE__*/React.createElement("input", {
-    className: classNames("".concat(prefix, "input")),
+    className: classNames("".concat(prefix, "-input")),
     onChange: function onChange(e) {
       return setURL(e.target.value);
     }
   })), /*#__PURE__*/React.createElement("label", {
-    className: classNames("".concat(prefix, "field"))
+    className: classNames("".concat(prefix, "-field"))
   }, t('description'), /*#__PURE__*/React.createElement("input", {
-    className: classNames("".concat(prefix, "input")),
+    className: classNames("".concat(prefix, "-input")),
     onChange: function onChange(e) {
       return setDescription(e.target.value);
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "buttons"))
+    className: classNames("".concat(prefix, "-buttons"))
   }, /*#__PURE__*/React.createElement("button", {
-    className: classNames("".concat(prefix, "button"), "".concat(prefix, "primary")),
+    className: classNames("".concat(prefix, "-button"), "".concat(prefix, "-primary")),
     type: "button",
     onClick: function onClick() {
       if (type === 'file' && file) {
@@ -95,7 +95,7 @@ var FileInput = function FileInput(_ref) {
       }
     }
   }, t('confirm')), /*#__PURE__*/React.createElement("button", {
-    className: classNames("".concat(prefix, "button")),
+    className: classNames("".concat(prefix, "-button")),
     type: "button",
     onClick: onCancel
   }, t('cancel'))));

package/dist/components/Toolbar.js

@@ -76,9 +76,9 @@ var Item = function Item(_ref) {
     }
   }, [popoverMount]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "item-container"))
+    className: classNames("".concat(prefix, "-item-container"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "active"), popoverMount), _classNames)),
+    className: classNames("".concat(prefix, "-item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "-active"), popoverMount), _classNames)),
     onClick: function onClick() {
       if (!disabled) {
         setTooltipOpen(false);
@@ -98,14 +98,14 @@ var Item = function Item(_ref) {
     timeout: 300
   }, /*#__PURE__*/React.createElement("div", {
     ref: tooltipRef,
-    className: classNames("".concat(prefix, "tooltip"))
+    className: classNames("".concat(prefix, "-tooltip"))
   }, tooltip)), /*#__PURE__*/React.createElement(Fade, {
     nodeRef: popoverRef,
     appear: popoverMount,
     timeout: 300
   }, /*#__PURE__*/React.createElement("div", {
     ref: popoverRef,
-    className: classNames("".concat(prefix, "popover"))
+    className: classNames("".concat(prefix, "-popover"))
   }, popover)));
 };
 var codeOptions = [{
@@ -140,42 +140,22 @@ var headingOptions = [{
   depth: 6,
   fontSize: '0.9em'
 }];
-var mermaidOptions = [
-// {
-//   label: 'Flowchart',
-//   value: `flowchart TD
-//   A[Start] --> B{Is it?}
-//   B -- Yes --> C[OK]
-//   C --> D[Rethink]
-//   D --> B
-//   B -- No ----> E[End]`,
-// },
-{
+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    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)"
-},
-// {
-//   label: 'State Diagram',
-//   value: `stateDiagram-v2
-//   [*] --> Still
-//   Still --> [*]
-
-//   Still --> Moving
-//   Moving --> Still
-//   Moving --> Crash
-//   Crash --> [*]`,
-// },
-// {
-//   label: 'Entity Relationship Diagram',
-//   value: `erDiagram
-//   CUSTOMER ||--o{ ORDER : places
-//   ORDER ||--|{ LINE-ITEM : contains
-//   CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`,
-// },
-{
+  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"
 }, {
@@ -187,25 +167,10 @@ var mermaidOptions = [
 }, {
   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
-
-//   requirement test_req {
-//   id: 1
-//   text: the test text.
-//   risk: high
-//   verifymethod: test
-//   }
-
-//   element test_entity {
-//   type: simulation
-//   }
-
-//   test_entity - satisfies -> test_req`,
-// },
-{
+}, {
+  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"
 }, {
@@ -220,7 +185,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
   return {
     blockquote: {
       children: /*#__PURE__*/React.createElement(SvgBlockquote, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('blockquote'),
       onClick: function onClick(exec) {
@@ -231,7 +196,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     code: {
       children: /*#__PURE__*/React.createElement(SvgCode, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('code'),
       popoverRender: function popoverRender(exec, close) {
@@ -240,7 +205,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
             lang = _ref2.lang;
           return /*#__PURE__*/React.createElement("div", {
             key: label,
-            className: classNames("".concat(prefix, "option")),
+            className: classNames("".concat(prefix, "-option")),
             onClick: function onClick() {
               exec(toggleHandler({
                 type: 'code',
@@ -256,7 +221,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     delete: {
       children: /*#__PURE__*/React.createElement(SvgDelete, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('delete'),
       onClick: function onClick(exec) {
@@ -267,7 +232,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     emphasis: {
       children: /*#__PURE__*/React.createElement(SvgEmphasis, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('emphasis'),
       onClick: function onClick(exec) {
@@ -278,7 +243,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     heading: {
       children: /*#__PURE__*/React.createElement(SvgHeading, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('heading'),
       popoverRender: function popoverRender(exec, close) {
@@ -287,7 +252,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
             fontSize = _ref3.fontSize;
           return /*#__PURE__*/React.createElement("div", {
             key: depth,
-            className: classNames("".concat(prefix, "option")),
+            className: classNames("".concat(prefix, "-option")),
             style: {
               fontSize: fontSize
             },
@@ -304,13 +269,13 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     help: {
       children: /*#__PURE__*/React.createElement(SvgHelp, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('help')
     },
     image: {
       children: /*#__PURE__*/React.createElement(SvgImage, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('image'),
       popoverRender: function popoverRender(exec, close) {
@@ -337,7 +302,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     inlineCode: {
       children: /*#__PURE__*/React.createElement(SvgInlineCode, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('inlineCode'),
       onClick: function onClick(exec) {
@@ -348,7 +313,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     inlineMath: {
       children: /*#__PURE__*/React.createElement(SvgInlineMath, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('inlineMath'),
       onClick: function onClick(exec) {
@@ -359,7 +324,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     link: {
       children: /*#__PURE__*/React.createElement(SvgLink, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('link'),
       popoverRender: function popoverRender(exec, close) {
@@ -385,7 +350,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     math: {
       children: /*#__PURE__*/React.createElement(SvgMath, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('math'),
       onClick: function onClick(exec) {
@@ -396,7 +361,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     mermaid: {
       children: /*#__PURE__*/React.createElement(SvgMermaid, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('mermaid'),
       popoverRender: function popoverRender(exec, close) {
@@ -405,7 +370,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
             value = _ref4.value;
           return /*#__PURE__*/React.createElement("div", {
             key: label,
-            className: classNames("".concat(prefix, "option")),
+            className: classNames("".concat(prefix, "-option")),
             onClick: function onClick() {
               exec(toggleHandler({
                 type: 'code',
@@ -421,7 +386,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     orderedList: {
       children: /*#__PURE__*/React.createElement(SvgOrderedList, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('orderedList'),
       onClick: function onClick(exec) {
@@ -434,7 +399,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       var history = _ref5.history;
       return {
         children: /*#__PURE__*/React.createElement(SvgRedo, {
-          className: classNames("".concat(prefix, "icon"))
+          className: classNames("".concat(prefix, "-icon"))
         }),
         disabled: history.index === history.states.length - 1,
         tooltip: t('redo'),
@@ -445,7 +410,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     strong: {
       children: /*#__PURE__*/React.createElement(SvgStrong, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('strong'),
       onClick: function onClick(exec) {
@@ -456,7 +421,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     table: {
       children: /*#__PURE__*/React.createElement(SvgTable, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('table'),
       onClick: function onClick(exec) {
@@ -467,7 +432,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     taskList: {
       children: /*#__PURE__*/React.createElement(SvgTaskList, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('taskList'),
       onClick: function onClick(exec) {
@@ -478,7 +443,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     thematicBreak: {
       children: /*#__PURE__*/React.createElement(SvgThematicBreak, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('thematicBreak'),
       onClick: function onClick(exec) {
@@ -489,7 +454,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     toHTML: {
       children: /*#__PURE__*/React.createElement(SvgToHTML, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('toHTML'),
       onClick: function onClick(exec) {
@@ -510,7 +475,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     toMarkdown: {
       children: /*#__PURE__*/React.createElement(SvgToMarkdown, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('toMarkdown'),
       onClick: function onClick(exec) {
@@ -533,7 +498,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       var history = _ref8.history;
       return {
         children: /*#__PURE__*/React.createElement(SvgUndo, {
-          className: classNames("".concat(prefix, "icon"))
+          className: classNames("".concat(prefix, "-icon"))
         }),
         disabled: !history.index,
         tooltip: t('undo'),
@@ -544,7 +509,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
     },
     unorderedList: {
       children: /*#__PURE__*/React.createElement(SvgUnorderedList, {
-        className: classNames("".concat(prefix, "icon"))
+        className: classNames("".concat(prefix, "-icon"))
       }),
       tooltip: t('unorderedList'),
       onClick: function onClick(exec) {
@@ -573,13 +538,13 @@ var Toolbar = function Toolbar(_ref9) {
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: toolbarRef,
-    className: classNames("".concat(prefix, "toolbar"), className),
+    className: classNames("".concat(prefix, "-toolbar"), className),
     style: style
   }, items.map(function (group, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, !!index && /*#__PURE__*/React.createElement("div", {
-      className: classNames("".concat(prefix, "divider"))
+      className: classNames("".concat(prefix, "-divider"))
     }), group.map(function (item, index) {
       var toolbarItem = typeof item === 'string' ? itemMap[item] : item;
       if (!toolbarItem) {

package/dist/index.d.ts

@@ -9,3 +9,5 @@ export { default as XStarMdEditor, useMdEditorRef } from './x-star-md-editor';
 export type { XStarMdEditorHandle, XStarMdEditorPlugin, XStarMdEditorProps, } from './x-star-md-editor';
 export { default as XStarMdViewer, useMdViewerRef } from './x-star-md-viewer';
 export type { XStarMdViewerHandle, XStarMdViewerPlugin, XStarMdViewerProps, } from './x-star-md-viewer';
+export { default as XStarSlideViewer, useSlideViewerRef, } from './x-star-slide-viewer';
+export type { XStarSlideViewerHandle, XStarSlideViewerPlugin, XStarSlideViewerProps, } from './x-star-slide-viewer';

package/dist/index.js

@@ -3,4 +3,5 @@ export { batchHandler, insertHandler, mutateHandler, redoHandler, selectHandler,
 export { toHTML, toMarkdown, toText } from "./utils/markdown";
 export { default as XStarEditor, useEditorRef } from "./x-star-editor";
 export { default as XStarMdEditor, useMdEditorRef } from "./x-star-md-editor";
-export { default as XStarMdViewer, useMdViewerRef } from "./x-star-md-viewer";
+export { default as XStarMdViewer, useMdViewerRef } from "./x-star-md-viewer";
+export { default as XStarSlideViewer, useSlideViewerRef } from "./x-star-slide-viewer";