x-star-editor 0.2.6 → 0.3.1

package/dist/utils/history.js

@@ -27,43 +27,6 @@ var stateReducer = function stateReducer(_ref, action) {
           selection: createSelection(startOffset + text.length)
         };
       }
-    case 'delete':
-      {
-        // 选区不为空
-        if (startOffset < endOffset) {
-          return {
-            sourceCode: "".concat(before).concat(after),
-            selection: createSelection(startOffset)
-          };
-        }
-
-        // 选区为空，根据删除方向和边界生成新状态
-        if (action.payload) {
-          var _action$payload = action.payload,
-            direction = _action$payload.direction,
-            boundary = _action$payload.boundary;
-          if (direction === 'backward' && startOffset) {
-            var index = before.lastIndexOf('\n');
-            var length = boundary === 'char' || index === before.length - 1 ? 1 : before.length - 1 - index;
-            return {
-              sourceCode: "".concat(before.slice(0, before.length - length)).concat(after),
-              selection: createSelection(startOffset - length)
-            };
-          }
-          if (direction === 'forward' && startOffset < sourceCode.length) {
-            var _index = "".concat(after, "\n").indexOf('\n');
-            var _length = boundary === 'char' || !_index ? 1 : _index;
-            return {
-              sourceCode: "".concat(before).concat(after.slice(_length)),
-              selection: createSelection(startOffset)
-            };
-          }
-        }
-        return {
-          sourceCode: sourceCode,
-          selection: action.selection
-        };
-      }
     case 'toggle':
       {
         var lineStartOffset = before.lastIndexOf('\n') + 1;
@@ -97,10 +60,10 @@ var stateReducer = function stateReducer(_ref, action) {
             }
           case 'code':
             {
-              var _action$payload2 = action.payload,
-                lang = _action$payload2.lang,
-                value = _action$payload2.value,
-                showLineNumbers = _action$payload2.showLineNumbers;
+              var _action$payload = action.payload,
+                lang = _action$payload.lang,
+                value = _action$payload.value,
+                showLineNumbers = _action$payload.showLineNumbers;
               var _startOffset = lineEndOffset + lang.length + (showLineNumbers ? 21 : 5);
               return {
                 sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n```").concat(lang).concat(showLineNumbers ? ' showLineNumbers' : '', "\n").concat(value, "\n```\n").concat(lineAfter),
@@ -164,13 +127,13 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'image':
           case 'link':
             {
-              var _action$payload3 = action.payload,
-                _type = _action$payload3.type,
-                url = _action$payload3.url,
-                description = _action$payload3.description;
+              var _action$payload2 = action.payload,
+                _type = _action$payload2.type,
+                url = _action$payload2.url,
+                description = _action$payload2.description;
               return {
-                sourceCode: "".concat(before).concat(_type === 'link' ? '' : '!', "[").concat(description, "](").concat(url, ")").concat(after),
-                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'link' ? 0 : 1))
+                sourceCode: "".concat(before).concat(_type === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
+                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'image' ? 1 : 0))
               };
             }
           case 'math':
@@ -196,9 +159,9 @@ var stateReducer = function stateReducer(_ref, action) {
       }
     case 'set':
       {
-        var _action$payload4 = action.payload,
-          _sourceCode = _action$payload4.sourceCode,
-          selection = _action$payload4.selection;
+        var _action$payload3 = action.payload,
+          _sourceCode = _action$payload3.sourceCode,
+          selection = _action$payload3.selection;
         return {
           sourceCode: _sourceCode.replace(/\r\n?/g, '\n'),
           selection: selection
@@ -251,6 +214,20 @@ var historyReducer = function historyReducer(_ref2, action) {
           selection: states[index + 1].selection
         };
       }
+    case 'batch':
+      {
+        var _action$selection2, _action$selection3;
+        return {
+          states: [].concat(_toConsumableArray(states.slice(0, index)), [_objectSpread(_objectSpread({}, states[index]), {}, {
+            selection: (_action$selection2 = action.selection) !== null && _action$selection2 !== void 0 ? _action$selection2 : states[index].selection,
+            action: _objectSpread(_objectSpread({}, states[index].action), {}, {
+              batch: false
+            })
+          })]),
+          index: index,
+          selection: (_action$selection3 = action.selection) !== null && _action$selection3 !== void 0 ? _action$selection3 : selection
+        };
+      }
     case 'select':
       {
         return {
@@ -270,8 +247,19 @@ var historyReducer = function historyReducer(_ref2, action) {
             selection: selection
           };
         }
+        if (states[index].action.batch && action.batch) {
+          return {
+            states: [].concat(_toConsumableArray(states.slice(0, index)), [_objectSpread(_objectSpread({}, states[index]), state)]),
+            index: index,
+            selection: state.selection
+          };
+        }
         return {
-          states: [].concat(_toConsumableArray(states.slice(index < 100 ? 0 : index - 99, index + 1)), [_objectSpread(_objectSpread({}, state), {}, {
+          states: [].concat(_toConsumableArray(states.slice(index < 100 ? 0 : index - 99, index)), [_objectSpread(_objectSpread({}, states[index]), {}, {
+            action: _objectSpread(_objectSpread({}, states[index].action), {}, {
+              batch: false
+            })
+          }), _objectSpread(_objectSpread({}, state), {}, {
             action: action
           })]),
           index: index < 100 ? index + 1 : 100,

package/dist/utils/markdown.js

@@ -3,7 +3,6 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { toText as hastToText } from 'hast-util-to-text';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
@@ -32,20 +31,6 @@ import rehypeRawPositions from "./rehype/rehype-raw-positions";
  */
 var toMdastProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).freeze();
 
-/**
- * 带缓存的解析函数
- *
- * @param sourceCode Markdown 文本
- * @returns Mdast 树
- */
-var cachedParse = function () {
-  var cache = {};
-  return function (sourceCode) {
-    var _cache$sourceCode;
-    return (_cache$sourceCode = cache[sourceCode]) !== null && _cache$sourceCode !== void 0 ? _cache$sourceCode : (cache = _defineProperty({}, sourceCode, toMdastProcessor.parse(sourceCode)))[sourceCode];
-  };
-}();
-
 /**
  * 将 Markdown 文本映射到 DOM 树，第一层为 `<div>` 块元素，第二层为 `<div>` 行元素，之后均为 `<span>` 元素
  *
@@ -243,7 +228,7 @@ export var editorRender = function editorRender(sourceCode) {
     }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
-  getChildren(cachedParse(sourceCode).children, sourceCode.length);
+  getChildren(toMdastProcessor.parse(sourceCode).children, sourceCode.length);
   if (scanOffset <= sourceCode.length) {
     // 添加最后一行文本
     block.append(createLine(sourceCode.slice(scanOffset)));
@@ -289,7 +274,7 @@ export var preViewerRender = /*#__PURE__*/function () {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.next = 2;
-          return toHastProcessor.run(cachedParse(sourceCode));
+          return toHastProcessor.run(toMdastProcessor.parse(sourceCode));
         case 2:
           return _context.abrupt("return", _context.sent);
         case 3:

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import Toolbar, { getDefaultToolbarItemMap, getDefaultToolbarItems } from "../components/Toolbar";
 import { LocaleProvider } from "../locales";
-import { getRange, useContainer } from "../utils/container";
+import { createSelection, getRange, useContainer } from "../utils/container";
 import { prefix } from "../utils/global";
 import { composeHandlers, getDefaultKeyboardEventHandlers } from "../utils/handler";
 import { useHistory } from "../utils/history";
@@ -26,11 +26,14 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sourceCode = _useHistory.sourceCode,
     selection = _useHistory.selection,
     dispatch = _useHistory.dispatch;
+  var ignoreNext = useRef(false);
   var initialized = useRef(false);
 
   // 将文本同步到容器
   useEffect(function () {
-    container.setText(sourceCode);
+    if (!ignoreNext.current) {
+      container.setText(sourceCode);
+    }
     if (initialized.current) {
       onChange === null || onChange === void 0 ? void 0 : onChange(sourceCode);
     }
@@ -38,16 +41,14 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // 将选区同步到容器
   useEffect(function () {
-    if (initialized.current) {
+    if (!ignoreNext.current && initialized.current) {
       container.setSelection(selection);
     }
   }, [selection]);
   useEffect(function () {
+    ignoreNext.current = false;
     initialized.current = true;
-    return function () {
-      initialized.current = false;
-    };
-  }, []);
+  }, [sourceCode, selection]);
   var historyLatest = useRef(history);
   historyLatest.current = history;
   var sourceCodeLatest = useRef(sourceCode);
@@ -92,115 +93,52 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case 'copy':
       case 'cut':
         {
+          // 防止传输其他类型数据
           e.preventDefault();
           if (startOffset < endOffset) {
             e.clipboardData.setData('text/plain', sourceCode.slice(startOffset, endOffset));
             if (e.type === 'cut') {
               dispatch({
-                type: 'delete',
+                type: 'insert',
+                payload: {
+                  text: ''
+                },
                 selection: selection
               });
             }
           }
           break;
         }
-      case 'paste':
-        {
-          e.preventDefault();
-          if (e.clipboardData.types.includes('text/plain')) {
-            dispatch({
-              type: 'insert',
-              payload: {
-                text: e.clipboardData.getData('text/plain')
-              },
-              selection: selection
-            });
-          } else if (e.clipboardData.types.includes('Files')) {
-            var _file = e.clipboardData.files[0];
-            onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(_file, {
-              description: _file.name,
-              image: _file.type.startsWith('image/')
-            });
-          }
-          break;
-        }
     }
   };
-
-  /**
-   * 开始组合时的选区
-   */
-  var compositionStartSelection = useRef();
-
-  /**
-   * 容器同步控制器
-   */
-  var syncController = useMemo(function () {
-    var timer = 0;
-
-    /**
-     * 将最新的文本和选区同步到容器
-     */
-    var sync = function sync() {
-      if (compositionStartSelection.current) {
-        var _selection = getSelection();
-        container.setText(sourceCodeLatest.current);
-        container.setSelection(_selection);
-        compositionStartSelection.current = undefined;
-      }
-      timer = 0;
-    };
-    return {
-      /**
-       * 在下个事件循环中同步
-       */
-      start: function start() {
-        if (!timer) {
-          timer = window.setTimeout(sync);
-        }
-      },
-      /**
-       * 立即执行下个事件循环中的同步
-       */
-      flush: function flush() {
-        if (timer) {
-          window.clearTimeout(timer);
-          sync();
-        }
-      }
-    };
-  }, []);
   var compositionEventHandler = function compositionEventHandler(e) {
     switch (e.type) {
       case 'compositionend':
         {
-          syncController.start();
-          break;
-        }
-      case 'compositionstart':
-        {
-          syncController.flush();
-          compositionStartSelection.current = getSelection();
+          // 组合时不更新 DOM，组合结束统一更新
+          var _selection = getSelection();
+          container.setText(sourceCodeLatest.current);
+          container.setSelection(_selection);
+          dispatch({
+            type: 'batch'
+          });
           break;
         }
     }
   };
   var dragEventHandler = function dragEventHandler(e) {
+    var selection = getSelection();
+    var _getRange2 = getRange(selection),
+      startOffset = _getRange2.startOffset,
+      endOffset = _getRange2.endOffset;
     switch (e.type) {
-      case 'drop':
+      case 'dragstart':
         {
-          var _selection2 = getSelection();
-          window.setTimeout(function () {
-            container.normalize();
-            dispatch({
-              type: 'set',
-              payload: {
-                sourceCode: container.getText(),
-                selection: getSelection()
-              },
-              selection: _selection2
-            });
-          });
+          if (startOffset < endOffset) {
+            // 防止传输其他类型数据
+            e.dataTransfer.clearData();
+            e.dataTransfer.setData('text/plain', sourceCode.slice(startOffset, endOffset));
+          }
           break;
         }
     }
@@ -214,26 +152,6 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
     }
   };
-  var formEventHandler = function formEventHandler(e) {
-    switch (e.type) {
-      case 'beforeinput':
-        {
-          e.preventDefault();
-          if ('data' in e && typeof e.data === 'string') {
-            var _compositionStartSele;
-            dispatch({
-              type: 'insert',
-              payload: {
-                text: e.data
-              },
-              selection: (_compositionStartSele = compositionStartSelection.current) !== null && _compositionStartSele !== void 0 ? _compositionStartSele : getSelection()
-            });
-            compositionStartSelection.current = undefined;
-          }
-          break;
-        }
-    }
-  };
   var onInsertFileLatest = useRef(onInsertFile);
   onInsertFileLatest.current = onInsertFile;
   var options = useMemo(function () {
@@ -250,9 +168,8 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (e.type) {
       case 'keydown':
         {
-          if (compositionStartSelection.current) {
-            e.preventDefault();
-          } else {
+          // 组合时不触发快捷键
+          if (!e.nativeEvent.isComposing) {
             composeHandlers(options.keyboardEventHandlers)({
               history: history,
               sourceCode: sourceCode,
@@ -265,6 +182,176 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
     }
   };
+  useEffect(function () {
+    var _containerRef$current;
+    var listener = function listener(e) {
+      var targetRange = e.getTargetRanges()[0];
+      if (!containerRef.current || !targetRange) {
+        return;
+      }
+      var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
+      var endOffset = container.getOffset(containerRef.current, targetRange.endContainer, targetRange.endOffset);
+      var selection = createSelection(startOffset, endOffset);
+      switch (e.inputType) {
+        case 'insertText':
+          {
+            e.preventDefault();
+            if (e.data !== null) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: e.data
+                },
+                selection: selection
+              });
+            }
+            break;
+          }
+        case 'insertReplacementText':
+        case 'insertFromDrop':
+        case 'insertFromPaste':
+          {
+            var _e$dataTransfer, _e$dataTransfer2;
+            e.preventDefault();
+            if ((_e$dataTransfer = e.dataTransfer) !== null && _e$dataTransfer !== void 0 && _e$dataTransfer.types.includes('text/plain')) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: e.dataTransfer.getData('text/plain')
+                },
+                selection: selection,
+                batch: true
+              });
+              dispatch({
+                type: 'batch'
+              });
+            } else if ((_e$dataTransfer2 = e.dataTransfer) !== null && _e$dataTransfer2 !== void 0 && _e$dataTransfer2.types.includes('Files')) {
+              var _file = e.dataTransfer.files[0];
+              onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(_file, {
+                description: _file.name,
+                image: _file.type.startsWith('image/')
+              });
+            }
+            break;
+          }
+        case 'insertLineBreak':
+        case 'insertParagraph':
+          {
+            e.preventDefault();
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: '\n'
+              },
+              selection: selection
+            });
+            break;
+          }
+        case 'insertCompositionText':
+        case 'insertFromComposition':
+          {
+            // 避免 DOM 更新扰乱组合
+            ignoreNext.current = true;
+            if (e.data !== null) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: e.data
+                },
+                selection: selection,
+                batch: true
+              });
+            }
+            break;
+          }
+        case 'deleteWordBackward':
+        case 'deleteWordForward':
+        case 'deleteContentBackward':
+        case 'deleteContentForward':
+          {
+            e.preventDefault();
+            if (startOffset < endOffset) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: ''
+                },
+                selection: selection
+              });
+            } else if (e.inputType.endsWith('Backward')) {
+              if (startOffset) {
+                dispatch({
+                  type: 'insert',
+                  payload: {
+                    text: ''
+                  },
+                  selection: createSelection(startOffset - 1, endOffset)
+                });
+              }
+            } else {
+              if (endOffset < sourceCodeLatest.current.length) {
+                dispatch({
+                  type: 'insert',
+                  payload: {
+                    text: ''
+                  },
+                  selection: createSelection(startOffset, endOffset + 1)
+                });
+              }
+            }
+            break;
+          }
+        case 'deleteByDrag':
+        case 'deleteCompositionText':
+          {
+            ignoreNext.current = true;
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: ''
+              },
+              selection: selection,
+              batch: true
+            });
+            break;
+          }
+        case 'formatBold':
+          {
+            e.preventDefault();
+            dispatch({
+              type: 'toggle',
+              payload: {
+                type: 'strong'
+              },
+              selection: selection
+            });
+            break;
+          }
+        case 'formatItalic':
+          {
+            e.preventDefault();
+            dispatch({
+              type: 'toggle',
+              payload: {
+                type: 'emphasis'
+              },
+              selection: selection
+            });
+            break;
+          }
+        default:
+          {
+            e.preventDefault();
+            break;
+          }
+      }
+    };
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.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 /*#__PURE__*/React.createElement(LocaleProvider, {
     locale: locale
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -280,15 +367,12 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       height: height
     }),
     contentEditable: true,
-    onBeforeInput: formEventHandler,
     onBlur: focusEventHandler,
     onCompositionEnd: compositionEventHandler,
-    onCompositionStart: compositionEventHandler,
     onCopy: clipboardEventHandler,
     onCut: clipboardEventHandler,
-    onDrop: dragEventHandler,
-    onKeyDown: keyboardEventHandler,
-    onPaste: clipboardEventHandler
+    onDragStart: dragEventHandler,
+    onKeyDown: keyboardEventHandler
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -36,6 +36,10 @@ export interface XStarMdViewerProps {
      * 查看器的高度
      */
     height?: React.CSSProperties['height'];
+    /**
+     * 内置主题
+     */
+    theme?: string;
     /**
      * 文本
      */

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

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -9,13 +10,11 @@ var workerRaw = "(()=>{var e={470:e=>{\"use strict\";var t=Object.prototype.hasO
 import { prefix } from "../utils/global";
 import { composeHandlers } from "../utils/handler";
 import { getDefaultSchema, postViewerRender, preViewerRender, viewerRender } from "../utils/markdown";
-var workerURL = URL.createObjectURL(new Blob([workerRaw], {
-  type: 'text/javascript'
-}));
 var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
     height = _ref.height,
+    theme = _ref.theme,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
     plugins = _ref.plugins,
@@ -44,7 +43,9 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var worker = useRef();
   useEffect(function () {
     if (enableWebWorker) {
-      worker.current = new Worker(workerURL);
+      worker.current = new Worker(URL.createObjectURL(new Blob([workerRaw], {
+        type: 'text/javascript'
+      })));
       worker.current.addEventListener('message', function (_ref2) {
         var data = _ref2.data;
         return setChildren(postViewerRender(data, optionsLatest.current));
@@ -79,7 +80,7 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [value, options]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classNames("".concat(prefix, "md-viewer"), className),
+    className: classNames("".concat(prefix, "md-viewer"), _defineProperty({}, "".concat(prefix, "theme-").concat(theme), theme), className),
     style: _objectSpread(_objectSpread({}, style), {}, {
       height: height
     })

package/package.json

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