x-star-editor 0.2.6 → 0.3.0

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);
@@ -97,110 +98,41 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             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();
+          var _selection = getSelection();
+          container.setText(sourceCodeLatest.current);
+          container.setSelection(_selection);
           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 +146,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 +162,7 @@ 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 +175,174 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
     }
   };
+  useEffect(function () {
+    var _containerRef$current;
+    var listener = function listener(e) {
+      switch (e.type) {
+        case 'beforeinput':
+          {
+            var targetRange = e.getTargetRanges()[0];
+            if (containerRef.current && targetRange) {
+              var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
+              var endOffset = container.getOffset(containerRef.current, targetRange.endContainer, targetRange.endOffset);
+              var _selection2 = createSelection(startOffset, endOffset);
+              switch (e.inputType) {
+                case 'insertText':
+                  {
+                    e.preventDefault();
+                    if (e.data !== null) {
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: e.data
+                        },
+                        selection: _selection2
+                      });
+                    }
+                    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: _selection2
+                      });
+                    } 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: _selection2
+                    });
+                    break;
+                  }
+                case 'insertCompositionText':
+                case 'insertFromComposition':
+                  {
+                    if (e.data !== null) {
+                      ignoreNext.current = true;
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: e.data
+                        },
+                        selection: _selection2
+                      });
+                    }
+                    break;
+                  }
+                case 'deleteWordBackward':
+                case 'deleteWordForward':
+                case 'deleteContentBackward':
+                case 'deleteContentForward':
+                  {
+                    e.preventDefault();
+                    if (startOffset < endOffset) {
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: ''
+                        },
+                        selection: _selection2
+                      });
+                    } else if (e.inputType.endsWith('Backward')) {
+                      if (startOffset) {
+                        dispatch({
+                          type: 'insert',
+                          payload: {
+                            text: ''
+                          },
+                          selection: createSelection(startOffset - 1, endOffset)
+                        });
+                      }
+                    } else {
+                      if (endOffset < sourceCodeLatest.current.length - 1) {
+                        dispatch({
+                          type: 'insert',
+                          payload: {
+                            text: ''
+                          },
+                          selection: createSelection(startOffset, endOffset + 1)
+                        });
+                      }
+                    }
+                    break;
+                  }
+                case 'deleteByDrag':
+                case 'deleteCompositionText':
+                  {
+                    ignoreNext.current = true;
+                    dispatch({
+                      type: 'insert',
+                      payload: {
+                        text: ''
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                case 'formatBold':
+                  {
+                    e.preventDefault();
+                    dispatch({
+                      type: 'toggle',
+                      payload: {
+                        type: 'strong'
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                case 'formatItalic':
+                  {
+                    e.preventDefault();
+                    dispatch({
+                      type: 'toggle',
+                      payload: {
+                        type: 'emphasis'
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                default:
+                  {
+                    e.preventDefault();
+                    break;
+                  }
+              }
+            }
+            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 +358,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.0",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",