x-star-editor 0.1.2 → 0.2.1

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'];
     /**
      * 文本
      */