x-star-editor 0.1.2 → 0.2.0

package/dist/types/worker.js.d.ts

@@ -0,0 +1,3 @@
+declare module '*.worker.js' {
+  export default string;
+}

package/dist/utils/handler.js

@@ -1,4 +1,5 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { createKeybindingsHandler } from 'tinykeys';
 import { createSelection, getRange } from "./container";
 
 /**
@@ -90,111 +91,255 @@ export var selectHandler = function selectHandler(selection) {
  */
 
 export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHandlers() {
-  return [
-  // 处理 Enter 和 Tab
-  function (_ref8) {
-    var selection = _ref8.selection,
+  return [function (_ref8) {
+    var sourceCode = _ref8.sourceCode,
+      selection = _ref8.selection,
       dispatch = _ref8.dispatch,
       e = _ref8.e;
-    if (!e.altKey && !e.ctrlKey && !e.metaKey && (e.key === 'Enter' || e.key === 'Tab')) {
-      e.preventDefault();
-      dispatch({
-        type: 'insert',
-        payload: {
-          text: e.key === 'Enter' ? '\n' : '\t'
-        },
-        selection: selection
-      });
-    }
-  },
-  // 处理 Backspace 和 Delete
-  function (_ref9) {
-    var selection = _ref9.selection,
-      dispatch = _ref9.dispatch,
-      e = _ref9.e;
-    if (!e.altKey && !e.metaKey && (e.key === 'Backspace' || e.key === 'Delete')) {
-      e.preventDefault();
-      dispatch({
-        type: 'delete',
-        payload: {
-          direction: e.key === 'Backspace' ? 'backward' : 'forward',
-          boundary: !e.ctrlKey ? 'char' : 'line'
-        },
-        selection: selection
-      });
-    }
-  },
-  // 处理斜体和粗体
-  function (_ref10) {
-    var selection = _ref10.selection,
-      dispatch = _ref10.dispatch,
-      e = _ref10.e;
-    if (!e.altKey && e.ctrlKey && !e.metaKey && (e.key === 'i' || e.key === 'b')) {
-      e.preventDefault();
-      dispatch({
-        type: 'toggle',
-        payload: {
-          type: e.key === 'i' ? 'emphasis' : 'strong'
-        },
-        selection: selection
-      });
-    }
-  },
-  // 处理撤销和恢复
-  function (_ref11) {
-    var dispatch = _ref11.dispatch,
-      e = _ref11.e;
-    if (!e.altKey && e.ctrlKey && !e.metaKey && (e.key === 'z' || e.key === 'y')) {
-      e.preventDefault();
-      dispatch({
-        type: e.key === 'z' ? 'undo' : 'redo'
-      });
-    }
-  },
-  // 处理左键和右键
-  function (_ref12) {
-    var sourceCode = _ref12.sourceCode,
-      selection = _ref12.selection,
-      dispatch = _ref12.dispatch,
-      e = _ref12.e;
-    if (!e.altKey && !e.ctrlKey && !e.metaKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-      e.preventDefault();
-      var anchorOffset = selection.anchorOffset,
-        focusOffset = selection.focusOffset;
-      var _getRange = getRange(selection),
-        startOffset = _getRange.startOffset,
-        endOffset = _getRange.endOffset;
-      if (e.shiftKey) {
-        if (e.key === 'ArrowLeft' && focusOffset) {
+    return createKeybindingsHandler({
+      Tab: function Tab(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'insert',
+          payload: {
+            text: '\t'
+          },
+          selection: selection
+        });
+      },
+      Backspace: function Backspace(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'delete',
+          payload: {
+            direction: 'backward',
+            boundary: 'char'
+          },
+          selection: selection
+        });
+      },
+      '$mod+Backspace': function $modBackspace(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'delete',
+          payload: {
+            direction: 'backward',
+            boundary: 'line'
+          },
+          selection: selection
+        });
+      },
+      'Shift+Backspace': function ShiftBackspace(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'delete',
+          payload: {
+            direction: 'backward',
+            boundary: 'char'
+          },
+          selection: selection
+        });
+      },
+      'Meta+Backspace': function MetaBackspace(e) {
+        return e.preventDefault();
+      },
+      'Alt+Backspace': function AltBackspace(e) {
+        return e.preventDefault();
+      },
+      'Control+Backspace': function ControlBackspace(e) {
+        return e.preventDefault();
+      },
+      'Shift+Meta+Backspace': function ShiftMetaBackspace(e) {
+        return e.preventDefault();
+      },
+      'Shift+Alt+Backspace': function ShiftAltBackspace(e) {
+        return e.preventDefault();
+      },
+      'Shift+Control+Backspace': function ShiftControlBackspace(e) {
+        return e.preventDefault();
+      },
+      'Meta+Alt+Backspace': function MetaAltBackspace(e) {
+        return e.preventDefault();
+      },
+      'Meta+Control+Backspace': function MetaControlBackspace(e) {
+        return e.preventDefault();
+      },
+      'Alt+Control+Backspace': function AltControlBackspace(e) {
+        return e.preventDefault();
+      },
+      'Shift+Meta+Alt+Backspace': function ShiftMetaAltBackspace(e) {
+        return e.preventDefault();
+      },
+      'Shift+Meta+Control+Backspace': function ShiftMetaControlBackspace(e) {
+        return e.preventDefault();
+      },
+      'Shift+Alt+Control+Backspace': function ShiftAltControlBackspace(e) {
+        return e.preventDefault();
+      },
+      'Meta+Alt+Control+Backspace': function MetaAltControlBackspace(e) {
+        return e.preventDefault();
+      },
+      Delete: function Delete(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'delete',
+          payload: {
+            direction: 'forward',
+            boundary: 'char'
+          },
+          selection: selection
+        });
+      },
+      '$mod+Delete': function $modDelete(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'delete',
+          payload: {
+            direction: 'forward',
+            boundary: 'line'
+          },
+          selection: selection
+        });
+      },
+      'Shift+Delete': function ShiftDelete(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'delete',
+          payload: {
+            direction: 'forward',
+            boundary: 'char'
+          },
+          selection: selection
+        });
+      },
+      'Meta+Delete': function MetaDelete(e) {
+        return e.preventDefault();
+      },
+      'Alt+Delete': function AltDelete(e) {
+        return e.preventDefault();
+      },
+      'Control+Delete': function ControlDelete(e) {
+        return e.preventDefault();
+      },
+      'Shift+Meta+Delete': function ShiftMetaDelete(e) {
+        return e.preventDefault();
+      },
+      'Shift+Alt+Delete': function ShiftAltDelete(e) {
+        return e.preventDefault();
+      },
+      'Shift+Control+Delete': function ShiftControlDelete(e) {
+        return e.preventDefault();
+      },
+      'Meta+Alt+Delete': function MetaAltDelete(e) {
+        return e.preventDefault();
+      },
+      'Meta+Control+Delete': function MetaControlDelete(e) {
+        return e.preventDefault();
+      },
+      'Alt+Control+Delete': function AltControlDelete(e) {
+        return e.preventDefault();
+      },
+      'Shift+Meta+Alt+Delete': function ShiftMetaAltDelete(e) {
+        return e.preventDefault();
+      },
+      'Shift+Meta+Control+Delete': function ShiftMetaControlDelete(e) {
+        return e.preventDefault();
+      },
+      'Shift+Alt+Control+Delete': function ShiftAltControlDelete(e) {
+        return e.preventDefault();
+      },
+      'Meta+Alt+Control+Delete': function MetaAltControlDelete(e) {
+        return e.preventDefault();
+      },
+      '$mod+KeyI': function $modKeyI(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'toggle',
+          payload: {
+            type: 'emphasis'
+          },
+          selection: selection
+        });
+      },
+      '$mod+KeyB': function $modKeyB(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'toggle',
+          payload: {
+            type: 'strong'
+          },
+          selection: selection
+        });
+      },
+      '$mod+KeyZ': function $modKeyZ(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'undo'
+        });
+      },
+      '$mod+KeyY': function $modKeyY(e) {
+        e.preventDefault();
+        dispatch({
+          type: 'redo'
+        });
+      },
+      ArrowLeft: function ArrowLeft(e) {
+        e.preventDefault();
+        var _getRange = getRange(selection),
+          startOffset = _getRange.startOffset,
+          endOffset = _getRange.endOffset;
+        if (startOffset < endOffset) {
           dispatch({
             type: 'select',
-            selection: createSelection(anchorOffset, focusOffset - 1)
+            selection: createSelection(startOffset)
           });
-        } else if (e.key === 'ArrowRight' && focusOffset < sourceCode.length) {
+        } else if (startOffset) {
           dispatch({
             type: 'select',
-            selection: createSelection(anchorOffset, focusOffset + 1)
+            selection: createSelection(startOffset - 1)
           });
         }
-      } else {
-        if (startOffset < endOffset) {
+      },
+      'Shift+ArrowLeft': function ShiftArrowLeft(e) {
+        e.preventDefault();
+        var anchorOffset = selection.anchorOffset,
+          focusOffset = selection.focusOffset;
+        if (focusOffset) {
           dispatch({
             type: 'select',
-            selection: createSelection(e.key === 'ArrowLeft' ? startOffset : endOffset)
+            selection: createSelection(anchorOffset, focusOffset - 1)
           });
-        } else if (e.key === 'ArrowLeft' && startOffset) {
+        }
+      },
+      ArrowRight: function ArrowRight(e) {
+        e.preventDefault();
+        var _getRange2 = getRange(selection),
+          startOffset = _getRange2.startOffset,
+          endOffset = _getRange2.endOffset;
+        if (startOffset < endOffset) {
           dispatch({
             type: 'select',
-            selection: createSelection(startOffset - 1)
+            selection: createSelection(endOffset)
           });
-        } else if (e.key === 'ArrowRight' && startOffset < sourceCode.length) {
+        } else if (startOffset < sourceCode.length) {
           dispatch({
             type: 'select',
             selection: createSelection(startOffset + 1)
           });
         }
+      },
+      'Shift+ArrowRight': function ShiftArrowRight(e) {
+        e.preventDefault();
+        var anchorOffset = selection.anchorOffset,
+          focusOffset = selection.focusOffset;
+        if (focusOffset < sourceCode.length) {
+          dispatch({
+            type: 'select',
+            selection: createSelection(anchorOffset, focusOffset + 1)
+          });
+        }
       }
-    }
+    })(e.nativeEvent);
   }];
 };
 

package/dist/x-star-editor/index.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 import type { XStarMdEditorHandle, XStarMdEditorProps } from '../x-star-md-editor';
 import type { XStarMdViewerHandle, XStarMdViewerProps } from '../x-star-md-viewer';
-export interface XStarEditorHandle {
-    getEditor: () => XStarMdEditorHandle | null;
-    getViewer: () => XStarMdViewerHandle | null;
+export interface XStarEditorHandle extends XStarMdEditorHandle, XStarMdViewerHandle {
 }
 export interface XStarEditorProps {
+    /**
+     * CSS 类名
+     */
+    className?: string;
+    /**
+     * CSS 样式
+     */
+    style?: React.CSSProperties;
     /**
      * 编辑器和浏览器的高度（不包括工具栏）
      */

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

@@ -7,7 +7,9 @@ import { prefix } from "../utils/global";
 import XStarMdEditor, { useMdEditorRef } from "../x-star-md-editor";
 import XStarMdViewer, { useMdViewerRef } from "../x-star-md-viewer";
 var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var height = _ref.height,
+  var className = _ref.className,
+    style = _ref.style,
+    height = _ref.height,
     locale = _ref.locale,
     initialValue = _ref.initialValue,
     enableWebWorker = _ref.enableWebWorker,
@@ -22,21 +24,14 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var editorRef = useMdEditorRef();
   var viewerRef = useMdViewerRef();
   useImperativeHandle(ref, function () {
-    return {
-      getEditor: function getEditor() {
-        return editorRef.current;
-      },
-      getViewer: function getViewer() {
-        return viewerRef.current;
-      }
-    };
+    return _objectSpread(_objectSpread({}, editorRef.current), viewerRef.current);
   }, []);
 
   // 同步滚动
   useEffect(function () {
     var _editorRef$current, _viewerRef$current;
-    var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getContainer();
-    var viewer = (_viewerRef$current = viewerRef.current) === null || _viewerRef$current === void 0 ? void 0 : _viewerRef$current.getContainer();
+    var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getEditorContainer();
+    var viewer = (_viewerRef$current = viewerRef.current) === null || _viewerRef$current === void 0 ? void 0 : _viewerRef$current.getViewerContainer();
 
     /**
      * 获取两个父元素的子元素到各自父元素顶部的距离
@@ -135,13 +130,12 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "editor"))
+    className: classNames("".concat(prefix, "editor"), className),
+    style: style
   }, /*#__PURE__*/React.createElement(XStarMdEditor, _extends({
     ref: editorRef
   }, editorProps, {
-    style: _objectSpread(_objectSpread({}, editorProps === null || editorProps === void 0 ? void 0 : editorProps.style), {}, {
-      height: height
-    }),
+    height: height,
     locale: locale,
     initialValue: initialValue,
     onChange: function onChange(value) {
@@ -152,9 +146,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })), /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
     ref: viewerRef
   }, viewerProps, {
-    style: _objectSpread(_objectSpread({}, viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style), {}, {
-      height: height
-    }),
+    height: height,
     value: value,
     enableWebWorker: enableWebWorker
   })));

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

@@ -20,7 +20,7 @@ export interface XStarMdEditorPlugin {
 }
 export interface XStarMdEditorHandle {
     exec: Executor;
-    getContainer: () => HTMLDivElement | null;
+    getEditorContainer: () => HTMLDivElement;
 }
 export interface XStarMdEditorProps {
     /**
@@ -31,6 +31,10 @@ export interface XStarMdEditorProps {
      * CSS 样式
      */
     style?: React.CSSProperties;
+    /**
+     * 编辑器的高度（不包括工具栏）
+     */
+    height?: React.CSSProperties['height'];
     /**
      * 工具栏 CSS 类名
      */

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

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import Toolbar, { getDefaultToolbarItemMap, getDefaultToolbarItems } from "../components/Toolbar";
@@ -9,6 +10,7 @@ import { useHistory } from "../utils/history";
 var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
+    height = _ref.height,
     toolbarClassName = _ref.toolbarClassName,
     toolbarStyle = _ref.toolbarStyle,
     locale = _ref.locale,
@@ -75,7 +77,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useImperativeHandle(ref, function () {
     return {
       exec: exec,
-      getContainer: function getContainer() {
+      getEditorContainer: function getEditorContainer() {
         return container.ref.current;
       }
     };
@@ -128,29 +130,55 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * 开始组合时的选区
    */
   var compositionStartSelection = useRef();
-  var compositionEndTimer = 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':
         {
-          if (compositionStartSelection.current) {
-            dispatch({
-              type: 'insert',
-              payload: {
-                text: e.data
-              },
-              selection: compositionStartSelection.current
-            });
-            // 确保组合事件屏蔽表单和键盘事件
-            compositionEndTimer.current = window.setTimeout(function () {
-              return compositionStartSelection.current = undefined;
-            });
-          }
+          syncController.start();
           break;
         }
       case 'compositionstart':
         {
-          window.clearTimeout(compositionEndTimer.current);
+          syncController.flush();
           compositionStartSelection.current = getSelection();
           break;
         }
@@ -160,7 +188,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (e.type) {
       case 'drop':
         {
-          var _selection = getSelection();
+          var _selection2 = getSelection();
           window.setTimeout(function () {
             container.normalize();
             dispatch({
@@ -169,7 +197,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
                 sourceCode: container.getText(),
                 selection: getSelection()
               },
-              selection: _selection
+              selection: _selection2
             });
           });
           break;
@@ -181,58 +209,60 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case 'blur':
         {
           blurSelection.current = getSelection();
-          window.setTimeout(function () {
-            compositionStartSelection.current = undefined;
-            container.setText(sourceCodeLatest.current);
-          });
           break;
         }
     }
   };
   var formEventHandler = function formEventHandler(e) {
-    if (compositionStartSelection.current) {
-      e.preventDefault();
-      return;
-    }
     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: getSelection()
+              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 () {
     return composeHandlers(plugins)({
-      toolbarItemMap: getDefaultToolbarItemMap(locale, onInsertFile),
+      toolbarItemMap: getDefaultToolbarItemMap(locale, function () {
+        var _onInsertFileLatest$c;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return (_onInsertFileLatest$c = onInsertFileLatest.current) === null || _onInsertFileLatest$c === void 0 ? void 0 : _onInsertFileLatest$c.call.apply(_onInsertFileLatest$c, [onInsertFileLatest].concat(args));
+      }),
       toolbarItems: getDefaultToolbarItems(),
       keyboardEventHandlers: getDefaultKeyboardEventHandlers()
     });
-  }, [plugins]);
+  }, [locale, plugins]);
   var keyboardEventHandler = function keyboardEventHandler(e) {
-    if (compositionStartSelection.current) {
-      e.preventDefault();
-      return;
-    }
     switch (e.type) {
       case 'keydown':
         {
-          composeHandlers(options.keyboardEventHandlers)({
-            history: history,
-            sourceCode: sourceCode,
-            selection: getSelection(),
-            dispatch: dispatch,
-            e: e
-          });
+          if (compositionStartSelection.current) {
+            e.preventDefault();
+          } else {
+            composeHandlers(options.keyboardEventHandlers)({
+              history: history,
+              sourceCode: sourceCode,
+              selection: getSelection(),
+              dispatch: dispatch,
+              e: e
+            });
+          }
           break;
         }
     }
@@ -248,7 +278,9 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: container.ref,
     className: classNames("".concat(prefix, "md-editor"), className),
-    style: style,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      height: height
+    }),
     contentEditable: true,
     onBeforeInput: formEventHandler,
     onBlur: focusEventHandler,

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

@@ -21,7 +21,7 @@ export interface XStarMdViewerPlugin {
     (ctx: ViewerOptions): void;
 }
 export interface XStarMdViewerHandle {
-    getContainer: () => HTMLDivElement | null;
+    getViewerContainer: () => HTMLDivElement;
 }
 export interface XStarMdViewerProps {
     /**
@@ -32,6 +32,10 @@ export interface XStarMdViewerProps {
      * CSS 样式
      */
     style?: React.CSSProperties;
+    /**
+     * 浏览器的高度
+     */
+    height?: React.CSSProperties['height'];
     /**
      * 文本
      */