x-star-editor 0.3.4 → 0.3.6

package/dist/components/FileInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface FileInputProps {
+    image?: boolean;
     onCancel: () => void;
     onOk: (data: ({
         type: 'file';
@@ -11,5 +12,5 @@ interface FileInputProps {
         description: string;
     }) => void;
 }
-declare const FileInput: ({ onCancel, onOk }: FileInputProps) => React.JSX.Element;
+declare const FileInput: ({ image, onCancel, onOk }: FileInputProps) => React.JSX.Element;
 export default FileInput;

package/dist/components/FileInput.js

@@ -6,7 +6,8 @@ import { useLocale } from "../locales";
 import { prefix } from "../utils/global";
 var FileInput = function FileInput(_ref) {
   var _file$name;
-  var onCancel = _ref.onCancel,
+  var image = _ref.image,
+    onCancel = _ref.onCancel,
     onOk = _ref.onOk;
   var _useState = useState('file'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47,6 +48,7 @@ var FileInput = function FileInput(_ref) {
   }, /*#__PURE__*/React.createElement("input", {
     className: classNames("".concat(prefix, "hidden")),
     type: "file",
+    accept: image ? 'image/*' : undefined,
     onChange: function onChange(e) {
       var _e$target$files;
       return setFile((_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]);

package/dist/components/Toolbar.js

@@ -78,7 +78,7 @@ var Item = function Item(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefix, "item-container"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "active"), tooltipOpen || popoverMount), _classNames)),
+    className: classNames("".concat(prefix, "item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "active"), popoverMount), _classNames)),
     onClick: function onClick() {
       if (!disabled) {
         setTooltipOpen(false);
@@ -315,6 +315,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       tooltip: t('image'),
       popoverRender: function popoverRender(exec, close) {
         return /*#__PURE__*/React.createElement(FileInput, {
+          image: true,
           onCancel: close,
           onOk: function onOk(data) {
             if (data.type === 'file') {
@@ -422,7 +423,12 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       children: /*#__PURE__*/React.createElement(SvgOrderedList, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('orderedList')
+      tooltip: t('orderedList'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'orderedList'
+        }));
+      }
     },
     redo: function redo(_ref5) {
       var history = _ref5.history;
@@ -458,7 +464,12 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       children: /*#__PURE__*/React.createElement(SvgTaskList, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('taskList')
+      tooltip: t('taskList'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'taskList'
+        }));
+      }
     },
     thematicBreak: {
       children: /*#__PURE__*/React.createElement(SvgThematicBreak, {
@@ -530,14 +541,17 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale,
       children: /*#__PURE__*/React.createElement(SvgUnorderedList, {
         className: classNames("".concat(prefix, "icon"))
       }),
-      tooltip: t('unorderedList')
+      tooltip: t('unorderedList'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'unorderedList'
+        }));
+      }
     }
   };
 };
 export var getDefaultToolbarItems = function getDefaultToolbarItems() {
-  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote' /** 'table' */], ['link', 'image', 'mermaid'], ['inlineCode', 'code', 'inlineMath', 'math'], ['undo', 'redo'],
-  // ['orderedList', 'unorderedList', 'taskList'],
-  ['toMarkdown', 'toHTML']
+  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote' /** 'table' */], ['link', 'image', 'mermaid'], ['inlineCode', 'code', 'inlineMath', 'math'], ['orderedList', 'unorderedList', 'taskList'], ['toMarkdown', 'toHTML'], ['undo', 'redo']
   // ['help'],
   ];
 };

package/dist/styles/index.css

@@ -114,7 +114,7 @@
   background-color: rgba(230, 247, 255, 0.7);
   cursor: not-allowed;
 }
-.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item.x-star-editor-active {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item:hover, .x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item.x-star-editor-active {
   background-color: #cbedfd;
 }
 .x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item .x-star-editor-icon {
@@ -179,7 +179,7 @@
 .x-star-editor-editor.x-star-editor-fullscreen {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 9999;
 }
 .x-star-editor-editor.x-star-editor-fullscreen > .x-star-editor-md-editor,
 .x-star-editor-editor.x-star-editor-fullscreen > .x-star-editor-md-viewer {
@@ -237,10 +237,10 @@
   background-color: #c1def1;
 }
 .x-star-editor-md-editor > :first-child {
-  margin-top: 1em;
+  margin-top: 0.5em;
 }
 .x-star-editor-md-editor > :last-child {
-  margin-bottom: 1em;
+  margin-bottom: 0.5em;
 }
 
 .x-star-editor-md-viewer {

package/dist/utils/container.d.ts

@@ -41,4 +41,5 @@ export declare const useContainer: (ref: React.RefObject<HTMLDivElement>) => {
     getOffset: (root: Node, targetNode: Node, targetOffset: number) => number;
     getSelection: () => ContainerSelection;
     setSelection: ({ anchorOffset, focusOffset }: ContainerSelection) => void;
+    normalizeSelection: () => void;
 };

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";
 
 /**
@@ -294,52 +294,49 @@ export var useContainer = function useContainer(ref) {
     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;
+    var topOffset = Math.round(rangeRect.top - containerRect.top);
+    var bottomOffset = Math.round(rangeRect.bottom - containerRect.bottom);
 
     // 将光标滚动到视口内
-    if (topOffset < 0) {
-      ref.current.scrollTop += topOffset;
-    } else if (bottomOffset > 0) {
-      ref.current.scrollTop += bottomOffset;
+    if (topOffset < 1) {
+      ref.current.scrollTop += topOffset - 1;
+    } else if (bottomOffset > -1) {
+      ref.current.scrollTop += bottomOffset + 1;
     }
   };
 
-  // 确保光标不在零宽空格后
-  useEffect(function () {
-    var listener = function listener() {
-      var _ref$current, _anchorNode$nodeValue, _focusNode$nodeValue;
-      var selection = window.getSelection();
-      if (!selection || !selection.anchorNode || !selection.focusNode || !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(selection.anchorNode))) {
-        return;
-      }
-      var update = false;
-      var anchorNode = selection.anchorNode,
-        anchorOffset = selection.anchorOffset,
-        focusNode = selection.focusNode,
-        focusOffset = selection.focusOffset;
-      if (anchorNode.nodeType === Node.TEXT_NODE && ((_anchorNode$nodeValue = anchorNode.nodeValue) === null || _anchorNode$nodeValue === void 0 ? void 0 : _anchorNode$nodeValue[anchorOffset - 1]) === "\u200B") {
-        update = true;
-        anchorOffset--;
-      }
-      if (focusNode.nodeType === Node.TEXT_NODE && ((_focusNode$nodeValue = focusNode.nodeValue) === null || _focusNode$nodeValue === void 0 ? void 0 : _focusNode$nodeValue[focusOffset - 1]) === "\u200B") {
-        update = true;
-        focusOffset--;
-      }
-      if (update) {
-        selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
-      }
-    };
-    document.addEventListener('selectionchange', listener);
-    return function () {
-      return document.removeEventListener('selectionchange', listener);
-    };
-  }, []);
+  /**
+   * 标准化容器选区，确保光标不在零宽空格后
+   */
+  var normalizeSelection = function normalizeSelection() {
+    var _anchorNode$nodeValue, _focusNode$nodeValue;
+    var selection = window.getSelection();
+    if (!selection || !selection.anchorNode || !selection.focusNode || !ref.current) {
+      return;
+    }
+    var update = false;
+    var anchorNode = selection.anchorNode,
+      anchorOffset = selection.anchorOffset,
+      focusNode = selection.focusNode,
+      focusOffset = selection.focusOffset;
+    if (anchorNode.nodeType === Node.TEXT_NODE && ((_anchorNode$nodeValue = anchorNode.nodeValue) === null || _anchorNode$nodeValue === void 0 ? void 0 : _anchorNode$nodeValue[anchorOffset - 1]) === "\u200B") {
+      update = true;
+      anchorOffset--;
+    }
+    if (focusNode.nodeType === Node.TEXT_NODE && ((_focusNode$nodeValue = focusNode.nodeValue) === null || _focusNode$nodeValue === void 0 ? void 0 : _focusNode$nodeValue[focusOffset - 1]) === "\u200B") {
+      update = true;
+      focusOffset--;
+    }
+    if (update) {
+      selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    }
+  };
   return useRef({
     getText: getText,
     setText: setText,
     getOffset: getOffset,
     getSelection: getSelection,
-    setSelection: setSelection
+    setSelection: setSelection,
+    normalizeSelection: normalizeSelection
   }).current;
 };

package/dist/utils/history.d.ts

@@ -17,7 +17,7 @@ export interface InsertAction {
 export interface ToggleAction {
     type: 'toggle';
     payload: {
-        type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'strong' | 'thematicBreak';
+        type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'orderedList' | 'strong' | 'taskList' | 'thematicBreak' | 'unorderedList';
     } | {
         type: 'code';
         lang: string;
@@ -66,7 +66,7 @@ export interface SelectAction {
     selection: ContainerSelection;
 }
 type HistoryAction = UndoAction | RedoAction | BatchAction | SelectAction;
-export declare const useHistory: (initialSourceCode: string) => {
+export declare const useHistory: (initialSourceCode: string, readOnly?: boolean) => {
     history: History;
     sourceCode: string;
     selection: ContainerSelection;

package/dist/utils/history.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { useReducer } from 'react';
+import { useReducer, useRef } from 'react';
 import { createSelection, getRange } from "./container";
 
 /**
@@ -35,21 +35,26 @@ var stateReducer = function stateReducer(_ref, action) {
         var lineAfter = sourceCode.slice(lineEndOffset);
         switch (action.payload.type) {
           case 'blockquote':
+          case 'orderedList':
+          case 'taskList':
+          case 'unorderedList':
             {
+              var type = action.payload.type;
+              var prefixes = type === 'blockquote' ? ['>', '>'] : type === 'orderedList' ? ['\\d+\\.', '1.'] : type === 'taskList' ? ['[*+-] \\[[ x]]', '* [ ]'] : ['[*+-]', '*'];
               var lines = sourceCode.slice(lineStartOffset, lineEndOffset).split('\n');
               var values = lines.map(function (line) {
-                return /^ {0,3}> */.test(line);
+                return new RegExp("^ {0,3}".concat(prefixes[0], " +")).test(line);
               });
               for (var i = 0; i < values.length; i++) {
                 if (values[i]) {
-                  lines[i] = lines[i].replace(/^ {0,3}> */, '');
+                  lines[i] = lines[i].replace(new RegExp("^ {0,3}".concat(prefixes[0], " +")), '');
                 }
               }
               if (values.some(function (value) {
                 return !value;
               })) {
                 for (var _i = 0; _i < lines.length; _i++) {
-                  lines[_i] = "> ".concat(lines[_i]);
+                  lines[_i] = "".concat(prefixes[1], " ").concat(lines[_i]);
                 }
               }
               var _text = lines.join('\n');
@@ -76,8 +81,8 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'inlineMath':
           case 'strong':
             {
-              var type = action.payload.type;
-              var delimiters = type === 'emphasis' ? ['*', '_'] : type === 'strong' ? ['**', '__'] : type === 'inlineCode' ? ['`'] : type === 'delete' ? ['~~'] : ['$'];
+              var _type = action.payload.type;
+              var delimiters = _type === 'emphasis' ? ['*', '_'] : _type === 'strong' ? ['**', '__'] : _type === 'inlineCode' ? ['`'] : _type === 'delete' ? ['~~'] : ['$'];
               var _text2 = sourceCode.slice(startOffset, endOffset);
               for (var _i2 = 0, _delimiters = delimiters; _i2 < _delimiters.length; _i2++) {
                 var _delimiter = _delimiters[_i2];
@@ -128,12 +133,12 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'link':
             {
               var _action$payload2 = action.payload,
-                _type = _action$payload2.type,
+                _type2 = _action$payload2.type,
                 url = _action$payload2.url,
                 description = _action$payload2.description;
               return {
-                sourceCode: "".concat(before).concat(_type === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
-                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'image' ? 1 : 0))
+                sourceCode: "".concat(before).concat(_type2 === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
+                selection: createSelection(startOffset + url.length + description.length + 4 + (_type2 === 'image' ? 1 : 0))
               };
             }
           case 'math':
@@ -268,7 +273,7 @@ var historyReducer = function historyReducer(_ref2, action) {
       }
   }
 };
-export var useHistory = function useHistory(initialSourceCode) {
+export var useHistory = function useHistory(initialSourceCode, readOnly) {
   var _useReducer = useReducer(historyReducer, initialSourceCode, function (text) {
       var action = {
         type: 'insert',
@@ -292,10 +297,16 @@ export var useHistory = function useHistory(initialSourceCode) {
     _useReducer2 = _slicedToArray(_useReducer, 2),
     history = _useReducer2[0],
     dispatch = _useReducer2[1];
+  var readOnlyLatest = useRef(readOnly);
+  readOnlyLatest.current = readOnly;
   return {
     history: history,
     sourceCode: history.states[history.index].sourceCode,
     selection: history.selection,
-    dispatch: dispatch
+    dispatch: useRef(function (action) {
+      if (!readOnlyLatest.current) {
+        dispatch(action);
+      }
+    }).current
   };
 };

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

@@ -25,6 +25,10 @@ export interface XStarEditorProps {
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 是否只读
+     */
+    readOnly?: XStarMdEditorProps['readOnly'];
     /**
      * 是否启用 Web Worker
      */
@@ -32,7 +36,7 @@ export interface XStarEditorProps {
     /**
      * 编辑器属性
      */
-    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'onChange' | 'onInsertFile'>;
+    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'readOnly' | 'onChange' | 'onInsertFile'>;
     /**
      * 查看器属性
      */

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

@@ -5,6 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createKeybindingsHandler } from 'tinykeys';
 import SvgEditOnly from "../icons/EditOnly";
 import SvgEnterFullscreen from "../icons/EnterFullscreen";
 import SvgExitFullscreen from "../icons/ExitFullscreen";
@@ -42,6 +43,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     locale = _ref2.locale,
     _ref2$initialValue = _ref2.initialValue,
     initialValue = _ref2$initialValue === void 0 ? '' : _ref2$initialValue,
+    readOnly = _ref2.readOnly,
     enableWebWorker = _ref2.enableWebWorker,
     editorProps = _ref2.editorProps,
     viewerProps = _ref2.viewerProps,
@@ -64,6 +66,9 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     var _editorRef$current, _viewerRef$current;
     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();
+    if (!editor || !viewer) {
+      return;
+    }
 
     /**
      * 获取两个父元素的子元素到各自父元素顶部的距离
@@ -122,7 +127,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     var listener = function listener(e) {
       var ignore = ignoreNext;
       ignoreNext = false;
-      if (ignore || !editor || !viewer) {
+      if (ignore) {
         return;
       }
       var _ref3 = e.currentTarget === editor ? [editor, viewer] : [viewer, editor],
@@ -135,7 +140,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         toOffsetTops = _getOffsetTops2[1];
       for (var i = 0; i < fromOffsetTops.length - 1; i++) {
         if (fromOffsetTops[i] <= fromElement.scrollTop && fromElement.scrollTop < fromOffsetTops[i + 1]) {
-          var scrollTop = (fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i];
+          var scrollTop = Math.round((fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i]);
           if (toElement.scrollTop !== scrollTop) {
             ignoreNext = true;
             toElement.scrollTop = scrollTop;
@@ -144,11 +149,11 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         }
       }
     };
-    editor === null || editor === void 0 ? void 0 : editor.addEventListener('scroll', listener);
-    viewer === null || viewer === void 0 ? void 0 : viewer.addEventListener('scroll', listener);
+    editor.addEventListener('scroll', listener);
+    viewer.addEventListener('scroll', listener);
     return function () {
-      editor === null || editor === void 0 ? void 0 : editor.removeEventListener('scroll', listener);
-      viewer === null || viewer === void 0 ? void 0 : viewer.removeEventListener('scroll', listener);
+      editor.removeEventListener('scroll', listener);
+      viewer.removeEventListener('scroll', listener);
     };
   }, []);
   var _useState = useState(initialValue),
@@ -202,13 +207,25 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }].concat(_toConsumableArray((_editorProps$plugins = editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) !== null && _editorProps$plugins !== void 0 ? _editorProps$plugins : []));
   }, [locale, editOnly, viewOnly, fullscreen, editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins]);
 
-  // 防止出现两个滚动条
+  // 防止出现两个滚动条，按下 Esc 退出全屏
   useEffect(function () {
     if (fullscreen) {
       var overflow = document.body.style.overflow;
+      var listener = createKeybindingsHandler({
+        Escape: function Escape(e) {
+          e.stopImmediatePropagation();
+          setFullscreen(false);
+        }
+      });
       document.body.style.overflow = 'hidden';
+      document.addEventListener('keydown', listener, {
+        capture: true
+      });
       return function () {
         document.body.style.overflow = overflow;
+        document.removeEventListener('keydown', listener, {
+          capture: true
+        });
       };
     }
   }, [fullscreen]);
@@ -223,6 +240,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     height: height,
     locale: locale,
     initialValue: initialValue,
+    readOnly: viewOnly || readOnly,
     plugins: editorPlugins,
     onChange: function onChange(value) {
       setValue(value);

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

@@ -51,6 +51,10 @@ export interface XStarMdEditorProps {
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 是否只读
+     */
+    readOnly?: boolean;
     /**
      * 插件
      */

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

@@ -16,12 +16,13 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     locale = _ref.locale,
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    readOnly = _ref.readOnly,
     plugins = _ref.plugins,
     onChange = _ref.onChange,
     onInsertFile = _ref.onInsertFile;
   var containerRef = useRef(null);
   var container = useContainer(containerRef);
-  var _useHistory = useHistory(initialValue),
+  var _useHistory = useHistory(initialValue, readOnly),
     history = _useHistory.history,
     sourceCode = _useHistory.sourceCode,
     selection = _useHistory.selection,
@@ -124,6 +125,11 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           });
           break;
         }
+      case 'compositionstart':
+        {
+          container.normalizeSelection();
+          break;
+        }
     }
   };
   var dragEventHandler = function dragEventHandler(e) {
@@ -183,14 +189,17 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   useEffect(function () {
-    var _containerRef$current;
+    var editor = containerRef.current;
+    if (!editor) {
+      return;
+    }
     var listener = function listener(e) {
       var targetRange = e.getTargetRanges()[0];
-      if (!targetRange || !containerRef.current) {
+      if (!targetRange) {
         return;
       }
-      var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
-      var endOffset = container.getOffset(containerRef.current, targetRange.endContainer, targetRange.endOffset);
+      var startOffset = container.getOffset(editor, targetRange.startContainer, targetRange.startOffset);
+      var endOffset = container.getOffset(editor, targetRange.endContainer, targetRange.endOffset);
       var selection = createSelection(startOffset, endOffset);
       switch (e.inputType) {
         case 'insertText':
@@ -346,10 +355,9 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           }
       }
     };
-    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.addEventListener('beforeinput', listener);
+    editor.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 editor.removeEventListener('beforeinput', listener);
     };
   }, []);
   return /*#__PURE__*/React.createElement(LocaleProvider, {
@@ -369,6 +377,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     contentEditable: true,
     onBlur: focusEventHandler,
     onCompositionEnd: compositionEventHandler,
+    onCompositionStart: compositionEventHandler,
     onCopy: clipboardEventHandler,
     onCut: clipboardEventHandler,
     onDragStart: dragEventHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",