x-star-editor 0.3.6 → 0.3.8

package/dist/components/Toolbar.js

@@ -458,7 +458,12 @@ 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, {
@@ -551,7 +556,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
   };
 };
 export var getDefaultToolbarItems = function getDefaultToolbarItems() {
-  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote' /** 'table' */], ['link', 'image', 'mermaid'], ['inlineCode', 'code', 'inlineMath', 'math'], ['orderedList', 'unorderedList', 'taskList'], ['toMarkdown', 'toHTML'], ['undo', 'redo']
+  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' | 'orderedList' | 'strong' | 'taskList' | 'thematicBreak' | 'unorderedList';
+        type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'orderedList' | 'strong' | 'table' | 'taskList' | 'thematicBreak' | 'unorderedList';
     } | {
         type: 'code';
         lang: string;

package/dist/utils/history.js

@@ -148,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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Root as HastRoot } from 'hast';
 import { defaultSchema } from 'rehype-sanitize';
 import type { ViewerOptions } from '../x-star-md-viewer';
@@ -36,7 +35,7 @@ export declare const viewerRender: (root: HastRoot, schema: Schema) => HastRoot;
  * @param options 配置项
  * @returns React 虚拟 DOM 树
  */
-export declare const postViewerRender: (root: HastRoot, options: ViewerOptions) => JSX.Element;
+export declare const postViewerRender: (root: HastRoot, options: ViewerOptions) => any;
 /**
  * 将 Markdown 文本转成 HTML 文本
  *

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'])
   });
 };
 
@@ -345,23 +341,33 @@ export var viewerRender = function viewerRender(root, schema) {
  * @returns React 虚拟 DOM 树
  */
 export var postViewerRender = function postViewerRender(root, options) {
-  var components = _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
-    input: function input(props) {
-      return jsx('input', props);
-    },
-    custom: function custom(props) {
-      var _options$customBlocks;
-      return jsx((_options$customBlocks = options.customBlocks[props.meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
-        children: props.value
-      });
-    }
-  });
-  return toJsxRuntime(unified().use(rehypeKatex).runSync(root), {
-    Fragment: Fragment,
-    jsx: jsx,
-    jsxs: jsxs,
-    components: components
-  });
+  try {
+    var components = _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
+      input: function input(props) {
+        return jsx('input', props);
+      },
+      custom: function custom(props) {
+        var _options$customBlocks;
+        return jsx((_options$customBlocks = options.customBlocks[props.meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
+          children: props.value
+        });
+      }
+    });
+    return toJsxRuntime(unified().use(rehypeKatex).runSync(root), {
+      Fragment: Fragment,
+      jsx: jsx,
+      jsxs: jsxs,
+      components: components
+    });
+  } catch (_unused) {
+    return jsx('div', {
+      style: {
+        fontStyle: 'italic',
+        color: 'red'
+      },
+      children: 'Parse error!'
+    });
+  }
 };
 var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).use(remarkRehype, {
   allowDangerousHtml: true,

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

@@ -149,11 +149,19 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         }
       }
     };
+    var render = function render() {
+      return listener({
+        currentTarget: editor
+      });
+    };
     editor.addEventListener('scroll', listener);
     viewer.addEventListener('scroll', listener);
+    // 查看器子节点更新时会手动触发该事件
+    viewer.addEventListener('render', render);
     return function () {
       editor.removeEventListener('scroll', listener);
       viewer.removeEventListener('scroll', listener);
+      viewer.removeEventListener('render', render);
     };
   }, []);
   var _useState = useState(initialValue),

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

@@ -125,11 +125,6 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           });
           break;
         }
-      case 'compositionstart':
-        {
-          container.normalizeSelection();
-          break;
-        }
     }
   };
   var dragEventHandler = function dragEventHandler(e) {
@@ -176,6 +171,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         {
           // 组合时不触发快捷键
           if (!e.nativeEvent.isComposing) {
+            container.normalizeSelection();
             composeHandlers(options.keyboardEventHandlers)({
               history: history,
               sourceCode: sourceCode,
@@ -377,7 +373,6 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     contentEditable: true,
     onBlur: focusEventHandler,
     onCompositionEnd: compositionEventHandler,
-    onCompositionStart: compositionEventHandler,
     onCopy: clipboardEventHandler,
     onCut: clipboardEventHandler,
     onDragStart: dragEventHandler,

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

@@ -57,7 +57,7 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [enableWebWorker]);
   useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var timer = window.setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var root, _worker$current2;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -76,8 +76,22 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             return _context.stop();
         }
       }, _callee);
-    }))();
+    })), 100);
+    return function () {
+      return window.clearTimeout(timer);
+    };
   }, [value, options]);
+
+  // 确保在末尾输入时能同步滚动
+  useEffect(function () {
+    var timer = window.setTimeout(function () {
+      var _containerRef$current;
+      return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.dispatchEvent(new Event('render'));
+    }, 100);
+    return function () {
+      return window.clearTimeout(timer);
+    };
+  }, [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.6",
+  "version": "0.3.8",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",