x-star-editor 0.1.2 → 0.2.1

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

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

package/dist/utils/container.js

@@ -1,5 +1,5 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { editorRender } from "./markdown";
 
 /**
@@ -343,38 +343,24 @@ export var useContainer = function useContainer() {
       return;
     }
     selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
-  };
+    if (!ref.current) {
+      return;
+    }
+    var range = document.createRange();
+    range.setStart(focus.node, focus.offset);
+    range.setEnd(focus.node, focus.offset);
+    var rangeRect = range.getBoundingClientRect();
+    var containerRect = ref.current.getBoundingClientRect();
+    var topOffset = rangeRect.top - containerRect.top;
+    var bottomOffset = rangeRect.bottom - containerRect.bottom;
 
-  // 容器选区改变后将光标滚动到视口内
-  useEffect(function () {
-    var listener = function listener() {
-      var selection = window.getSelection();
-      if (!selection || !selection.focusNode || !ref.current || !ref.current.contains(selection.focusNode)) {
-        return;
-      }
-      var range = document.createRange();
-      range.setStart(selection.focusNode, selection.focusOffset);
-      range.setEnd(selection.focusNode, selection.focusOffset);
-      var rangeRect = range.getBoundingClientRect();
-      var containerRect = ref.current.getBoundingClientRect();
-      var topOffset = rangeRect.top - containerRect.top;
-      var bottomOffset = rangeRect.bottom - containerRect.bottom;
-      if (topOffset < 10) {
-        ref.current.scrollTop += topOffset - 10;
-      } else if (bottomOffset > -10) {
-        ref.current.scrollTop += bottomOffset + 10;
-      }
-    };
-    document.addEventListener('selectionchange', listener, {
-      capture: true,
-      passive: true
-    });
-    return function () {
-      return document.removeEventListener('selectionchange', listener, {
-        capture: true
-      });
-    };
-  }, []);
+    // 将光标滚动到视口内
+    if (topOffset < 0) {
+      ref.current.scrollTop += topOffset;
+    } else if (bottomOffset > 0) {
+      ref.current.scrollTop += bottomOffset;
+    }
+  };
   return useRef({
     ref: ref,
     normalize: normalize,

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;
     /**
      * 编辑器和浏览器的高度（不包括工具栏）
      */
@@ -25,11 +31,11 @@ export interface XStarEditorProps {
     /**
      * 编辑器属性
      */
-    editorProps?: Omit<XStarMdEditorProps, 'locale' | 'initialValue' | 'onChange' | 'onInsertFile'>;
+    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'onChange' | 'onInsertFile'>;
     /**
      * 浏览器属性
      */
-    viewerProps?: Omit<XStarMdViewerProps, 'value' | 'enableWebWorker'>;
+    viewerProps?: Omit<XStarMdViewerProps, 'height' | 'value' | 'enableWebWorker'>;
     /**
      * 文本变化回调函数
      */

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

@@ -7,7 +7,7 @@ interface EditorOptions {
      */
     toolbarItemMap: ToolbarItemMap;
     /**
-     * 工具栏项
+     * 工具栏项数组
      */
     toolbarItems: ToolbarItems;
     /**
@@ -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 类名
      */