x-star-editor 0.3.5 → 0.3.7

package/dist/components/Toolbar.js

@@ -423,7 +423,12 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       children: /*#__PURE__*/React.createElement(SvgOrderedList, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('orderedList')
+      tooltip: t('orderedList'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'orderedList'
+        }));
+      }
     },
     redo: function redo(_ref5) {
       var history = _ref5.history;
@@ -453,13 +458,23 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       children: /*#__PURE__*/React.createElement(SvgTable, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('table')
+      tooltip: t('table'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'table'
+        }));
+      }
     },
     taskList: {
       children: /*#__PURE__*/React.createElement(SvgTaskList, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('taskList')
+      tooltip: t('taskList'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'taskList'
+        }));
+      }
     },
     thematicBreak: {
       children: /*#__PURE__*/React.createElement(SvgThematicBreak, {
@@ -531,14 +546,17 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       children: /*#__PURE__*/React.createElement(SvgUnorderedList, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('unorderedList')
+      tooltip: t('unorderedList'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'unorderedList'
+        }));
+      }
     }
   };
 };
 export var getDefaultToolbarItems = function getDefaultToolbarItems() {
-  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote' /** 'table' */], ['link', 'image', 'mermaid'], ['inlineCode', 'code', 'inlineMath', 'math'], ['undo', 'redo'],
-  // ['orderedList', 'unorderedList', 'taskList'],
-  ['toMarkdown', 'toHTML']
+  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote', 'table'], ['link', 'image', 'mermaid'], ['inlineCode', 'code', 'inlineMath', 'math'], ['orderedList', 'unorderedList', 'taskList'], ['toMarkdown', 'toHTML'], ['undo', 'redo']
   // ['help'],
   ];
 };

package/dist/styles/index.css

@@ -255,6 +255,30 @@
 .x-star-editor-md-viewer ::selection {
   background-color: #c1def1;
 }
+.x-star-editor-md-viewer h1,
+.x-star-editor-md-viewer h2,
+.x-star-editor-md-viewer h3,
+.x-star-editor-md-viewer h4,
+.x-star-editor-md-viewer h5,
+.x-star-editor-md-viewer h6 {
+  font-weight: bold;
+}
+.x-star-editor-md-viewer table {
+  margin: 1em 0;
+  border-collapse: collapse;
+}
+.x-star-editor-md-viewer th,
+.x-star-editor-md-viewer td {
+  padding: 0.5em;
+  border: 1px solid #dedede;
+}
+.x-star-editor-md-viewer th {
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.x-star-editor-md-viewer tr:nth-child(even) td {
+  background-color: rgba(0, 0, 0, 0.04);
+}
 
 /* stylelint-disable font-family-no-missing-generic-family-keyword */
 @font-face {

package/dist/utils/history.d.ts

@@ -17,7 +17,7 @@ export interface InsertAction {
 export interface ToggleAction {
     type: 'toggle';
     payload: {
-        type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'strong' | 'thematicBreak';
+        type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'orderedList' | 'strong' | 'table' | 'taskList' | 'thematicBreak' | 'unorderedList';
     } | {
         type: 'code';
         lang: string;

package/dist/utils/history.js

@@ -35,21 +35,26 @@ var stateReducer = function stateReducer(_ref, action) {
         var lineAfter = sourceCode.slice(lineEndOffset);
         switch (action.payload.type) {
           case 'blockquote':
+          case 'orderedList':
+          case 'taskList':
+          case 'unorderedList':
             {
+              var type = action.payload.type;
+              var prefixes = type === 'blockquote' ? ['>', '>'] : type === 'orderedList' ? ['\\d+\\.', '1.'] : type === 'taskList' ? ['[*+-] \\[[ x]]', '* [ ]'] : ['[*+-]', '*'];
               var lines = sourceCode.slice(lineStartOffset, lineEndOffset).split('\n');
               var values = lines.map(function (line) {
-                return /^ {0,3}> */.test(line);
+                return new RegExp("^ {0,3}".concat(prefixes[0], " +")).test(line);
               });
               for (var i = 0; i < values.length; i++) {
                 if (values[i]) {
-                  lines[i] = lines[i].replace(/^ {0,3}> */, '');
+                  lines[i] = lines[i].replace(new RegExp("^ {0,3}".concat(prefixes[0], " +")), '');
                 }
               }
               if (values.some(function (value) {
                 return !value;
               })) {
                 for (var _i = 0; _i < lines.length; _i++) {
-                  lines[_i] = "> ".concat(lines[_i]);
+                  lines[_i] = "".concat(prefixes[1], " ").concat(lines[_i]);
                 }
               }
               var _text = lines.join('\n');
@@ -76,8 +81,8 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'inlineMath':
           case 'strong':
             {
-              var type = action.payload.type;
-              var delimiters = type === 'emphasis' ? ['*', '_'] : type === 'strong' ? ['**', '__'] : type === 'inlineCode' ? ['`'] : type === 'delete' ? ['~~'] : ['$'];
+              var _type = action.payload.type;
+              var delimiters = _type === 'emphasis' ? ['*', '_'] : _type === 'strong' ? ['**', '__'] : _type === 'inlineCode' ? ['`'] : _type === 'delete' ? ['~~'] : ['$'];
               var _text2 = sourceCode.slice(startOffset, endOffset);
               for (var _i2 = 0, _delimiters = delimiters; _i2 < _delimiters.length; _i2++) {
                 var _delimiter = _delimiters[_i2];
@@ -128,12 +133,12 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'link':
             {
               var _action$payload2 = action.payload,
-                _type = _action$payload2.type,
+                _type2 = _action$payload2.type,
                 url = _action$payload2.url,
                 description = _action$payload2.description;
               return {
-                sourceCode: "".concat(before).concat(_type === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
-                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'image' ? 1 : 0))
+                sourceCode: "".concat(before).concat(_type2 === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
+                selection: createSelection(startOffset + url.length + description.length + 4 + (_type2 === 'image' ? 1 : 0))
               };
             }
           case 'math':
@@ -143,6 +148,13 @@ var stateReducer = function stateReducer(_ref, action) {
                 selection: createSelection(lineEndOffset + 4)
               };
             }
+          case 'table':
+            {
+              return {
+                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n|  |  |\n| - | - |\n|  |  |\n|  |  |\n").concat(lineAfter),
+                selection: createSelection(lineEndOffset + 3)
+              };
+            }
           case 'thematicBreak':
             {
               return {

package/dist/utils/markdown.js

@@ -308,21 +308,17 @@ export var preViewerRender = /*#__PURE__*/function () {
  */
 
 export var getDefaultSchema = function getDefaultSchema() {
-  var _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8, _defaultSchema$protoc, _defaultSchema$protoc2, _defaultSchema$tagNam;
+  var _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$protoc, _defaultSchema$protoc2, _defaultSchema$tagNam;
   return _objectSpread(_objectSpread({}, defaultSchema), {}, {
     attributes: _objectSpread(_objectSpread({}, defaultSchema.attributes), {}, {
-      pre: [].concat(_toConsumableArray((_defaultSchema$attrib = (_defaultSchema$attrib2 = defaultSchema.attributes) === null || _defaultSchema$attrib2 === void 0 ? void 0 : _defaultSchema$attrib2.pre) !== null && _defaultSchema$attrib !== void 0 ? _defaultSchema$attrib : []), ['className', 'style']),
-      code: [].concat(_toConsumableArray((_defaultSchema$attrib3 = (_defaultSchema$attrib4 = defaultSchema.attributes) === null || _defaultSchema$attrib4 === void 0 ? void 0 : _defaultSchema$attrib4.code) !== null && _defaultSchema$attrib3 !== void 0 ? _defaultSchema$attrib3 : []), ['className', 'style']),
-      div: [].concat(_toConsumableArray((_defaultSchema$attrib5 = (_defaultSchema$attrib6 = defaultSchema.attributes) === null || _defaultSchema$attrib6 === void 0 ? void 0 : _defaultSchema$attrib6.div) !== null && _defaultSchema$attrib5 !== void 0 ? _defaultSchema$attrib5 : []), ['className', 'style']),
-      span: [].concat(_toConsumableArray((_defaultSchema$attrib7 = (_defaultSchema$attrib8 = defaultSchema.attributes) === null || _defaultSchema$attrib8 === void 0 ? void 0 : _defaultSchema$attrib8.span) !== null && _defaultSchema$attrib7 !== void 0 ? _defaultSchema$attrib7 : []), ['className', 'style', 'line']),
-      svg: ['xmlns', 'viewBox', 'preserveAspectRatio'],
-      path: ['d'],
-      custom: ['meta', 'value']
+      custom: ['meta', 'value'],
+      span: ['line'],
+      '*': [].concat(_toConsumableArray((_defaultSchema$attrib = (_defaultSchema$attrib2 = defaultSchema.attributes) === null || _defaultSchema$attrib2 === void 0 ? void 0 : _defaultSchema$attrib2['*']) !== null && _defaultSchema$attrib !== void 0 ? _defaultSchema$attrib : []), ['className', 'style'])
     }),
     protocols: _objectSpread(_objectSpread({}, defaultSchema.protocols), {}, {
       src: [].concat(_toConsumableArray((_defaultSchema$protoc = (_defaultSchema$protoc2 = defaultSchema.protocols) === null || _defaultSchema$protoc2 === void 0 ? void 0 : _defaultSchema$protoc2.src) !== null && _defaultSchema$protoc !== void 0 ? _defaultSchema$protoc : []), ['data'])
     }),
-    tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['svg', 'path', 'custom'])
+    tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['custom'])
   });
 };
 

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

@@ -149,21 +149,19 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         }
       }
     };
-    var observer = new MutationObserver(function () {
+    var render = function render() {
       return listener({
         currentTarget: editor
       });
-    });
+    };
     editor.addEventListener('scroll', listener);
     viewer.addEventListener('scroll', listener);
-    observer.observe(viewer, {
-      subtree: true,
-      childList: true
-    });
+    // 查看器子节点更新时会手动触发该事件
+    viewer.addEventListener('render', render);
     return function () {
       editor.removeEventListener('scroll', listener);
       viewer.removeEventListener('scroll', listener);
-      observer.disconnect();
+      viewer.removeEventListener('render', render);
     };
   }, []);
   var _useState = useState(initialValue),
@@ -223,15 +221,19 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       var overflow = document.body.style.overflow;
       var listener = createKeybindingsHandler({
         Escape: function Escape(e) {
-          e.stopPropagation();
+          e.stopImmediatePropagation();
           setFullscreen(false);
         }
       });
       document.body.style.overflow = 'hidden';
-      document.addEventListener('keydown', listener);
+      document.addEventListener('keydown', listener, {
+        capture: true
+      });
       return function () {
         document.body.style.overflow = overflow;
-        document.removeEventListener('keydown', listener);
+        document.removeEventListener('keydown', listener, {
+          capture: true
+        });
       };
     }
   }, [fullscreen]);

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

@@ -189,14 +189,17 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   useEffect(function () {
-    var _containerRef$current;
+    var editor = containerRef.current;
+    if (!editor) {
+      return;
+    }
     var listener = function listener(e) {
       var targetRange = e.getTargetRanges()[0];
-      if (!targetRange || !containerRef.current) {
+      if (!targetRange) {
         return;
       }
-      var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
-      var endOffset = container.getOffset(containerRef.current, targetRange.endContainer, targetRange.endOffset);
+      var startOffset = container.getOffset(editor, targetRange.startContainer, targetRange.startOffset);
+      var endOffset = container.getOffset(editor, targetRange.endContainer, targetRange.endOffset);
       var selection = createSelection(startOffset, endOffset);
       switch (e.inputType) {
         case 'insertText':
@@ -352,10 +355,9 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           }
       }
     };
-    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.addEventListener('beforeinput', listener);
+    editor.addEventListener('beforeinput', listener);
     return function () {
-      var _containerRef$current2;
-      return (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.removeEventListener('beforeinput', listener);
+      return editor.removeEventListener('beforeinput', listener);
     };
   }, []);
   return /*#__PURE__*/React.createElement(LocaleProvider, {

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

@@ -78,6 +78,12 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, _callee);
     }))();
   }, [value, options]);
+
+  // 确保在末尾输入时能同步滚动
+  useEffect(function () {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.dispatchEvent(new Event('render'));
+  }, [children]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: classNames("".concat(prefix, "md-viewer"), _defineProperty({}, "".concat(prefix, "theme-").concat(theme), theme), className),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",