x-star-editor 0.3.4 → 0.3.5

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') {

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

@@ -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";
 
 /**
@@ -268,7 +268,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 +292,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,21 @@ 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);
+    var observer = new MutationObserver(function () {
+      return listener({
+        currentTarget: editor
+      });
+    });
+    editor.addEventListener('scroll', listener);
+    viewer.addEventListener('scroll', listener);
+    observer.observe(viewer, {
+      subtree: true,
+      childList: true
+    });
     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);
+      observer.disconnect();
     };
   }, []);
   var _useState = useState(initialValue),
@@ -202,13 +217,21 @@ 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.stopPropagation();
+          setFullscreen(false);
+        }
+      });
       document.body.style.overflow = 'hidden';
+      document.addEventListener('keydown', listener);
       return function () {
         document.body.style.overflow = overflow;
+        document.removeEventListener('keydown', listener);
       };
     }
   }, [fullscreen]);
@@ -223,6 +246,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) {
@@ -369,6 +375,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.5",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",