x-star-editor 0.2.5 → 0.3.0

package/dist/components/Toolbar.js

@@ -59,7 +59,7 @@ var Button = function Button(_ref) {
   var popoverRef = useRef(null);
   useEffect(function () {
     if (popoverMount) {
-      if (toolbarRef.current && popoverRef.current) {
+      if (toolbarRef.current && popoverRef.current && !popoverRef.current.style.left) {
         var left = toolbarRef.current.getBoundingClientRect().right - popoverRef.current.getBoundingClientRect().right;
         popoverRef.current.style.left = "".concat(left < 0 ? left : 0, "px");
       }
@@ -112,6 +112,78 @@ var Button = function Button(_ref) {
     className: classNames("".concat(prefix, "popover"))
   }, popover)));
 };
+var codeOptions = [{
+  label: 'C++',
+  lang: 'cpp'
+}, {
+  label: 'Java',
+  lang: 'java'
+}, {
+  label: 'Python',
+  lang: 'py'
+}, {
+  label: 'Text',
+  lang: 'txt'
+}];
+var headingOptions = [{
+  depth: 1,
+  fontSize: '1.6em'
+}, {
+  depth: 2,
+  fontSize: '1.3em'
+}, {
+  depth: 3,
+  fontSize: '1.2em'
+}, {
+  depth: 4,
+  fontSize: '1.1em'
+}, {
+  depth: 5,
+  fontSize: '1em'
+}, {
+  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    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)"
+}, {
+  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() {
   var _SvgEnterFullscreen, _t;
   var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -135,8 +207,11 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('code'),
       popoverRender: function popoverRender(exec, close) {
-        var optionRender = function optionRender(label, lang) {
+        return codeOptions.map(function (_ref2) {
+          var label = _ref2.label,
+            lang = _ref2.lang;
           return /*#__PURE__*/React.createElement("div", {
+            key: label,
             className: classNames("".concat(prefix, "option")),
             onClick: function onClick() {
               exec(toggleHandler({
@@ -148,8 +223,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
               close();
             }
           }, label);
-        };
-        return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender('C++', 'cpp'), optionRender('Java', 'java'), optionRender('Python', 'py'), optionRender('Text', 'txt'));
+        });
       }
     },
     delete: {
@@ -194,8 +268,11 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('heading'),
       popoverRender: function popoverRender(exec, close) {
-        var optionRender = function optionRender(depth, fontSize) {
+        return headingOptions.map(function (_ref3) {
+          var depth = _ref3.depth,
+            fontSize = _ref3.fontSize;
           return /*#__PURE__*/React.createElement("div", {
+            key: depth,
             className: classNames("".concat(prefix, "option")),
             style: {
               fontSize: fontSize
@@ -208,8 +285,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
               close();
             }
           }, "H", depth, " ", t('heading'), " ", depth);
-        };
-        return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender(1, '1.6em'), optionRender(2, '1.3em'), optionRender(3, '1.2em'), optionRender(4, '1.1em'), optionRender(5, '1em'), optionRender(6, '0.9em'));
+        });
       }
     },
     help: {
@@ -308,13 +384,24 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         className: classNames("".concat(prefix, "icon"))
       }),
       tooltip: t('mermaid'),
-      onClick: function onClick(exec) {
-        return exec(toggleHandler({
-          type: 'code',
-          lang: 'mermaid',
-          value: "flowchart TB\n    A --> C\n    A --> D\n    B --> C\n    B --> D",
-          showLineNumbers: false
-        }));
+      popoverRender: function popoverRender(exec, close) {
+        return mermaidOptions.map(function (_ref4) {
+          var label = _ref4.label,
+            value = _ref4.value;
+          return /*#__PURE__*/React.createElement("div", {
+            key: label,
+            className: classNames("".concat(prefix, "option")),
+            onClick: function onClick() {
+              exec(toggleHandler({
+                type: 'code',
+                lang: 'mermaid',
+                value: value,
+                showLineNumbers: false
+              }));
+              close();
+            }
+          }, label);
+        });
       }
     },
     orderedList: {
@@ -323,8 +410,8 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('orderedList')
     },
-    redo: function redo(_ref2) {
-      var history = _ref2.history;
+    redo: function redo(_ref5) {
+      var history = _ref5.history;
       return {
         children: /*#__PURE__*/React.createElement(SvgRedo, {
           className: classNames("".concat(prefix, "icon"))
@@ -376,10 +463,10 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('toHTML'),
       onClick: function onClick(exec) {
-        return exec(function (_ref3) {
-          var sourceCode = _ref3.sourceCode,
-            selection = _ref3.selection,
-            dispatch = _ref3.dispatch;
+        return exec(function (_ref6) {
+          var sourceCode = _ref6.sourceCode,
+            selection = _ref6.selection,
+            dispatch = _ref6.dispatch;
           return dispatch({
             type: 'set',
             payload: {
@@ -397,10 +484,10 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('toMarkdown'),
       onClick: function onClick(exec) {
-        return exec(function (_ref4) {
-          var sourceCode = _ref4.sourceCode,
-            selection = _ref4.selection,
-            dispatch = _ref4.dispatch;
+        return exec(function (_ref7) {
+          var sourceCode = _ref7.sourceCode,
+            selection = _ref7.selection,
+            dispatch = _ref7.dispatch;
           return dispatch({
             type: 'set',
             payload: {
@@ -412,8 +499,8 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         });
       }
     },
-    undo: function undo(_ref5) {
-      var history = _ref5.history;
+    undo: function undo(_ref8) {
+      var history = _ref8.history;
       return {
         children: /*#__PURE__*/React.createElement(SvgUndo, {
           className: classNames("".concat(prefix, "icon"))
@@ -447,12 +534,12 @@ export var getDefaultToolbarItems = function getDefaultToolbarItems() {
   ];
 };
 
-var Toolbar = function Toolbar(_ref6) {
-  var className = _ref6.className,
-    style = _ref6.style,
-    itemMap = _ref6.itemMap,
-    items = _ref6.items,
-    exec = _ref6.exec;
+var Toolbar = function Toolbar(_ref9) {
+  var className = _ref9.className,
+    style = _ref9.style,
+    itemMap = _ref9.itemMap,
+    items = _ref9.items,
+    exec = _ref9.exec;
   var toolbarRef = useRef(null);
   var ctx = exec(function (ctx) {
     return ctx;
@@ -471,12 +558,12 @@ var Toolbar = function Toolbar(_ref6) {
       if (!toolbarItem) {
         return undefined;
       }
-      var _ref7 = typeof toolbarItem === 'function' ? toolbarItem(ctx) : toolbarItem,
-        children = _ref7.children,
-        disabled = _ref7.disabled,
-        tooltip = _ref7.tooltip,
-        _popoverRender = _ref7.popoverRender,
-        _onClick2 = _ref7.onClick;
+      var _ref10 = typeof toolbarItem === 'function' ? toolbarItem(ctx) : toolbarItem,
+        children = _ref10.children,
+        disabled = _ref10.disabled,
+        tooltip = _ref10.tooltip,
+        _popoverRender = _ref10.popoverRender,
+        _onClick2 = _ref10.onClick;
       return /*#__PURE__*/React.createElement(Button, {
         key: index,
         toolbarRef: toolbarRef,

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { ToolbarItem } from './components/Toolbar';
 export { createSelection, getRange } from './utils/container';
-export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
+export { insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
 export type { Executor, Handler, KeyboardEventHandler } from './utils/handler';
 export { toHTML, toMarkdown, toText } from './utils/markdown';
 export { default as XStarEditor, useEditorRef } from './x-star-editor';

package/dist/index.js

@@ -1,5 +1,5 @@
 export { createSelection, getRange } from "./utils/container";
-export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
+export { insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
 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";

package/dist/themes/lark.css

@@ -0,0 +1,353 @@
+@charset "UTF-8";
+.x-star-editor-md-viewer.x-star-editor-theme-lark {
+  line-height: 1.68;
+  text-size-adjust: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", "PingFang SC", "Microsoft Yahei", "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  color: #1f2329;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark * {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark > *:first-child {
+  margin-top: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark > *:last-child {
+  margin-top: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark p,
+.x-star-editor-md-viewer.x-star-editor-theme-lark details,
+.x-star-editor-md-viewer.x-star-editor-theme-lark dl,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul,
+.x-star-editor-md-viewer.x-star-editor-theme-lark xmp,
+.x-star-editor-md-viewer.x-star-editor-theme-lark plaintext,
+.x-star-editor-md-viewer.x-star-editor-theme-lark listing,
+.x-star-editor-md-viewer.x-star-editor-theme-lark blockquote,
+.x-star-editor-md-viewer.x-star-editor-theme-lark table,
+.x-star-editor-md-viewer.x-star-editor-theme-lark figure,
+.x-star-editor-md-viewer.x-star-editor-theme-lark hr {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h1 {
+  font-size: 26px;
+  font-weight: bold;
+  margin: 26px 0 10px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h2 {
+  font-size: 22px;
+  font-weight: bold;
+  margin: 22px 0 8px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h3 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 20px 0 8px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h4 {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 18px 0 8px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h5 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 16px 0 8px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h6 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 16px 0 8px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark p {
+  margin-left: 0;
+  margin-right: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark pre,
+.x-star-editor-md-viewer.x-star-editor-theme-lark xmp,
+.x-star-editor-md-viewer.x-star-editor-theme-lark plaintext,
+.x-star-editor-md-viewer.x-star-editor-theme-lark listing {
+  font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark blockquote > :first-child {
+  margin-top: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark blockquote > :last-child {
+  margin-bottom: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark hr {
+  border-style: inset;
+  border-width: 1px;
+  margin: 13px 0 12px;
+  border: 0;
+  height: 1px;
+  background-origin: content-box;
+  background-image: linear-gradient(90deg, #bbbfc4, #bbbfc4);
+  background-repeat: no-repeat;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark img {
+  max-width: 100%;
+  height: auto;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark li {
+  position: relative;
+  word-wrap: break-all;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark li + li {
+  margin-top: 4px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul ul,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol ul,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul ol,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item {
+  list-style-type: none;
+  padding-left: 0.3rem;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark a {
+  color: #3370ff;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  hyphens: auto;
+  word-break: break-word;
+  text-decoration: none;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark a img {
+  border: none;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark b,
+.x-star-editor-md-viewer.x-star-editor-theme-lark strong {
+  font-weight: bold;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark i,
+.x-star-editor-md-viewer.x-star-editor-theme-lark cite,
+.x-star-editor-md-viewer.x-star-editor-theme-lark em,
+.x-star-editor-md-viewer.x-star-editor-theme-lark var,
+.x-star-editor-md-viewer.x-star-editor-theme-lark address,
+.x-star-editor-md-viewer.x-star-editor-theme-lark dfn {
+  font-style: italic;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark code,
+.x-star-editor-md-viewer.x-star-editor-theme-lark kbd,
+.x-star-editor-md-viewer.x-star-editor-theme-lark tt,
+.x-star-editor-md-viewer.x-star-editor-theme-lark samp {
+  font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark mark {
+  color: #1f2329;
+  padding: 0.2em 0;
+  background-color: rgba(255, 246, 122, 0.8);
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark del,
+.x-star-editor-md-viewer.x-star-editor-theme-lark s {
+  color: inherit;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark table {
+  color: black;
+  border-collapse: collapse;
+  background-color: white;
+  border-spacing: 2px;
+  font-size: 1em;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark th,
+.x-star-editor-md-viewer.x-star-editor-theme-lark td {
+  border-color: #dee0e3;
+  border-width: 1px;
+  border-style: solid;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark th {
+  padding: 8px;
+  font-size: 1em;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark td {
+  padding: 8px;
+  font-size: 1em;
+  font-weight: normal;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark pre.md-fences,
+.x-star-editor-md-viewer.x-star-editor-theme-lark pre.md-meta-block,
+.x-star-editor-md-viewer.x-star-editor-theme-lark .md-rawblock-control:not(.md-rawblock-tooltip) .md-rawblock-input {
+  border-radius: 3px;
+  border: 1px solid #dee0e3;
+  padding: 10px;
+  background-color: #f5f6f7;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .md-math-block,
+.x-star-editor-md-viewer.x-star-editor-theme-lark .md-rawblock {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .md-rawblock > .md-rawblock-tooltip {
+  background-color: #f5f6f7;
+  transition: 0.5s;
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .md-rawblock:hover > .md-rawblock-tooltip {
+  transition: 0.5s;
+  visibility: visible;
+  opacity: 1;
+  animation: none;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .md-rawblock-control:not(.md-rawblock-tooltip) {
+  padding-left: 0;
+  padding-right: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark h1,
+.x-star-editor-md-viewer.x-star-editor-theme-lark h2,
+.x-star-editor-md-viewer.x-star-editor-theme-lark h3,
+.x-star-editor-md-viewer.x-star-editor-theme-lark h4,
+.x-star-editor-md-viewer.x-star-editor-theme-lark h5,
+.x-star-editor-md-viewer.x-star-editor-theme-lark h6 {
+  line-height: 1.4;
+  margin-top: 1em;
+  margin-bottom: 0.37em;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark blockquote {
+  display: block;
+  margin-left: 0;
+  padding-left: 14px;
+  border-left: 2px solid #3370ff;
+  color: rgba(31, 35, 41, 0.7);
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark :not(pre) > code {
+  border-radius: 4px;
+  margin-left: 2px;
+  margin-right: 2px;
+  border: 1px solid #dee0e3;
+  background-color: #f5f6f7;
+  word-spacing: normal;
+  line-height: 1.6;
+  padding: 0 2px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark a:hover {
+  text-decoration: underline;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul {
+  margin-left: 0;
+  padding-left: 22px;
+  list-style: none;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul > li:not([class*=task-list-item]) {
+  word-wrap: break-all;
+  padding-left: 0;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul > li:not([class*=task-list-item])::before {
+  position: absolute;
+  top: 2px;
+  content: "•";
+  color: #3370ff;
+  display: inline-block;
+  margin-left: -20px;
+  margin-right: 20px;
+  width: 0;
+  font-size: 0.8em;
+  transform: scale(1.25);
+  font-family: PingFangSC-Regular, "PingFang SC", Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul > li:not([class*=task-list-item]) li:not([class*=task-list-item])::before {
+  content: "◦";
+  transform: scale(1);
+  font-weight: 700;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul > li:not([class*=task-list-item]) li:not([class*=task-list-item]) li:not([class*=task-list-item])::before {
+  content: "▪";
+  transform: scale(1.25);
+  font-weight: normal;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol {
+  counter-reset: ol_counter;
+  margin-left: 0;
+  padding-left: 22px;
+  list-style: none;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol > li:not([class*=task-list-item]) {
+  word-wrap: break-all;
+  padding-left: 0;
+  position: relative;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol > li:not([class*=task-list-item])::before {
+  content: counter(ol_counter) ".";
+  counter-increment: ol_counter;
+  color: #3370ff;
+  position: absolute;
+  margin-left: -22px;
+  margin-right: 4px;
+  padding-left: 2px;
+  padding-right: 2px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: visible;
+  min-width: 18px;
+  border-radius: 2px;
+  transform: translateX(-2px);
+  font-family: "Helvetica Neue", Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark li + li,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul ul,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol ul,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ul ol,
+.x-star-editor-md-viewer.x-star-editor-theme-lark ol ol,
+.x-star-editor-md-viewer.x-star-editor-theme-lark li ul,
+.x-star-editor-md-viewer.x-star-editor-theme-lark li ol {
+  margin-top: 4px;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > p {
+  transition: color 0.3s, opacity 0.3s;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item.task-list-done > p {
+  color: #646a73;
+  text-decoration: line-through;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item.task-list-done > p > .md-emoji {
+  opacity: 0.5;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item.task-list-done > p > .md-link > a {
+  opacity: 0.6;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input {
+  appearance: initial;
+  display: block;
+  position: absolute;
+  border: 1px solid #2b2f36;
+  border-radius: 0.25rem;
+  margin-left: -1.5rem;
+  height: 1.2rem;
+  width: 1.2rem;
+  transition: border-color 0.3s;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input:focus {
+  outline: none;
+  box-shadow: none;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input:hover {
+  border-color: #3370ff;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input[checked]::before {
+  content: "";
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  height: 60%;
+  width: 2px;
+  transform: rotate(40deg);
+  background: #3370ff;
+}
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input[checked]::after {
+  content: "";
+  position: absolute;
+  top: 46%;
+  left: 25%;
+  height: 30%;
+  width: 2px;
+  transform: rotate(-40deg);
+  background: #3370ff;
+}

package/dist/utils/container.d.ts

@@ -36,9 +36,9 @@ export declare const getRange: ({ anchorOffset, focusOffset, }: ContainerSelecti
  * @returns 容器
  */
 export declare const useContainer: (ref: React.RefObject<HTMLDivElement>) => {
-    normalize: () => void;
     getText: () => string;
     setText: (text: string) => void;
+    getOffset: (root: Node, targetNode: Node, targetOffset: number) => number;
     getSelection: () => ContainerSelection;
     setSelection: ({ anchorOffset, focusOffset }: ContainerSelection) => void;
 };