x-star-editor 0.1.1 → 0.2.0

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

@@ -1,5 +1,6 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
-import React, { useEffect, useImperativeHandle, useRef } from 'react';
+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";
@@ -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,
@@ -24,17 +26,12 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     selection = _useHistory.selection,
     dispatch = _useHistory.dispatch;
   var initialized = useRef(false);
-  var onChangeLatest = useRef(onChange);
-  onChangeLatest.current = onChange;
-  var onInsertFileLatest = useRef(onInsertFile);
-  onInsertFileLatest.current = onInsertFile;
 
   // 将文本同步到容器
   useEffect(function () {
     container.setText(sourceCode);
     if (initialized.current) {
-      var _onChangeLatest$curre;
-      (_onChangeLatest$curre = onChangeLatest.current) === null || _onChangeLatest$curre === void 0 ? void 0 : _onChangeLatest$curre.call(onChangeLatest, sourceCode);
+      onChange === null || onChange === void 0 ? void 0 : onChange(sourceCode);
     }
   }, [sourceCode]);
 
@@ -80,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;
       }
     };
@@ -96,7 +93,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         {
           e.preventDefault();
           if (startOffset < endOffset) {
-            e.clipboardData.setData('text/plain', sourceCodeLatest.current.slice(startOffset, endOffset));
+            e.clipboardData.setData('text/plain', sourceCode.slice(startOffset, endOffset));
             if (e.type === 'cut') {
               dispatch({
                 type: 'delete',
@@ -118,9 +115,8 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               selection: selection
             });
           } else if (e.clipboardData.types.includes('Files')) {
-            var _onInsertFileLatest$c;
             var _file = e.clipboardData.files[0];
-            (_onInsertFileLatest$c = onInsertFileLatest.current) === null || _onInsertFileLatest$c === void 0 ? void 0 : _onInsertFileLatest$c.call(onInsertFileLatest, _file, {
+            onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(_file, {
               description: _file.name,
               image: _file.type.startsWith('image/')
             });
@@ -134,27 +130,55 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * 开始组合时的选区
    */
   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':
         {
-          if (compositionStartSelection.current) {
-            dispatch({
-              type: 'insert',
-              payload: {
-                text: e.data
-              },
-              selection: compositionStartSelection.current
-            });
-            // 确保组合事件屏蔽表单和键盘事件
-            window.setTimeout(function () {
-              return compositionStartSelection.current = undefined;
-            });
-          }
+          syncController.start();
           break;
         }
       case 'compositionstart':
         {
+          syncController.flush();
           compositionStartSelection.current = getSelection();
           break;
         }
@@ -164,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({
@@ -173,7 +197,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
                 sourceCode: container.getText(),
                 selection: getSelection()
               },
-              selection: _selection
+              selection: _selection2
             });
           });
           break;
@@ -185,57 +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) {
-      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 _composeHandlers = composeHandlers(plugins)({
-      toolbarItemMap: getDefaultToolbarItemMap(locale, onInsertFileLatest.current),
+  var onInsertFileLatest = useRef(onInsertFile);
+  onInsertFileLatest.current = onInsertFile;
+  var options = useMemo(function () {
+    return composeHandlers(plugins)({
+      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()
-    }),
-    toolbarItemMap = _composeHandlers.toolbarItemMap,
-    toolbarItems = _composeHandlers.toolbarItems,
-    keyboardEventHandlers = _composeHandlers.keyboardEventHandlers;
+    });
+  }, [locale, plugins]);
   var keyboardEventHandler = function keyboardEventHandler(e) {
-    if (compositionStartSelection.current) {
-      return;
-    }
     switch (e.type) {
       case 'keydown':
         {
-          composeHandlers(keyboardEventHandlers)({
-            history: historyLatest.current,
-            sourceCode: sourceCodeLatest.current,
-            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;
         }
     }
@@ -245,13 +272,15 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: classNames(toolbarClassName),
     style: toolbarStyle,
-    itemMap: toolbarItemMap,
-    items: toolbarItems,
+    itemMap: options.toolbarItemMap,
+    items: options.toolbarItems,
     exec: exec
   }), /*#__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

@@ -1,10 +1,27 @@
+import type { Components } from 'hast-util-to-jsx-runtime';
 import React from 'react';
-import type { ViewerOptions } from '../utils/markdown';
+import type { Schema } from '../utils/markdown';
+export interface ViewerOptions {
+    /**
+     * 自定义过滤模式
+     */
+    customSchema: Schema;
+    /**
+     * 自定义 HTML 元素
+     */
+    customHTMLElements: Partial<Components>;
+    /**
+     * 自定义块
+     */
+    customBlocks: Partial<Record<string, React.ComponentType<{
+        children: string;
+    }>>>;
+}
 export interface XStarMdViewerPlugin {
     (ctx: ViewerOptions): void;
 }
 export interface XStarMdViewerHandle {
-    getContainer: () => HTMLDivElement | null;
+    getViewerContainer: () => HTMLDivElement;
 }
 export interface XStarMdViewerProps {
     /**
@@ -15,6 +32,10 @@ export interface XStarMdViewerProps {
      * CSS 样式
      */
     style?: React.CSSProperties;
+    /**
+     * 浏览器的高度
+     */
+    height?: React.CSSProperties['height'];
     /**
      * 文本
      */
@@ -23,6 +44,10 @@ export interface XStarMdViewerProps {
      * 插件
      */
     plugins?: XStarMdViewerPlugin[];
+    /**
+     * 是否启用 Web Worker
+     */
+    enableWebWorker?: boolean;
 }
 declare const XStarMdViewer: React.ForwardRefExoticComponent<XStarMdViewerProps & React.RefAttributes<XStarMdViewerHandle>>;
 export default XStarMdViewer;