x-star-editor 0.3.11 → 0.4.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { ToolbarItem } from './components/Toolbar';
 export { createSelection, getRange } from './utils/container';
-export { batchHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
+export { batchHandler, insertHandler, mutateHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
 export type { Executor, Handler, KeyboardEventHandler } from './utils/handler';
 export { toHTML, toMarkdown, toText } from './utils/markdown';
 export { default as XStarEditor, useEditorRef } from './x-star-editor';

package/dist/index.js

@@ -1,5 +1,5 @@
 export { createSelection, getRange } from "./utils/container";
-export { batchHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
+export { batchHandler, insertHandler, mutateHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
 export { toHTML, toMarkdown, toText } from "./utils/markdown";
 export { default as XStarEditor, useEditorRef } from "./x-star-editor";
 export { default as XStarMdEditor, useMdEditorRef } from "./x-star-md-editor";

package/dist/styles/index.css

@@ -242,6 +242,12 @@
 .x-star-editor-md-editor > :last-child {
   margin-bottom: 0.5em;
 }
+.x-star-editor-md-editor.x-star-editor-empty::before {
+  content: attr(placeholder);
+  position: absolute;
+  margin-top: 0.5em;
+  color: rgba(0, 0, 0, 0.28);
+}
 
 .x-star-editor-md-viewer {
   position: relative;

package/dist/themes/lark.css

@@ -331,7 +331,7 @@
 .x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input:hover {
   border-color: #3370ff;
 }
-.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input[checked]::before {
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input:checked::before {
   content: "";
   position: absolute;
   top: 20%;
@@ -341,7 +341,7 @@
   transform: rotate(40deg);
   background: #3370ff;
 }
-.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input[checked]::after {
+.x-star-editor-md-viewer.x-star-editor-theme-lark .task-list-item > input:checked::after {
   content: "";
   position: absolute;
   top: 46%;

package/dist/utils/handler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { InsertAction, SelectAction, SetAction, ToggleAction, useHistory } from './history';
+import type { BatchAction, InsertAction, MutateAction, SelectAction, SetAction, ToggleAction, useHistory } from './history';
 /**
  * 处理函数上下文
  */
@@ -15,8 +15,9 @@ export declare const toggleHandler: (payload: ToggleAction['payload']) => Handle
 export declare const setHandler: (payload: SetAction['payload']) => Handler;
 export declare const undoHandler: () => Handler;
 export declare const redoHandler: () => Handler;
-export declare const batchHandler: () => Handler;
-export declare const selectHandler: (selection: SelectAction['selection']) => Handler;
+export declare const batchHandler: (payload?: BatchAction['payload']) => Handler;
+export declare const mutateHandler: (payload: MutateAction['payload']) => Handler;
+export declare const selectHandler: (payload: SelectAction['payload']) => Handler;
 /**
  * 执行函数
  *

package/dist/utils/handler.js

@@ -59,20 +59,30 @@ export var redoHandler = function redoHandler() {
     });
   };
 };
-export var batchHandler = function batchHandler() {
+export var batchHandler = function batchHandler(payload) {
   return function (_ref6) {
     var dispatch = _ref6.dispatch;
     return dispatch({
-      type: 'batch'
+      type: 'batch',
+      payload: payload
     });
   };
 };
-export var selectHandler = function selectHandler(selection) {
+export var mutateHandler = function mutateHandler(payload) {
   return function (_ref7) {
     var dispatch = _ref7.dispatch;
+    return dispatch({
+      type: 'mutate',
+      payload: payload
+    });
+  };
+};
+export var selectHandler = function selectHandler(payload) {
+  return function (_ref8) {
+    var dispatch = _ref8.dispatch;
     return dispatch({
       type: 'select',
-      selection: selection
+      payload: payload
     });
   };
 };
@@ -88,11 +98,11 @@ export var selectHandler = function selectHandler(selection) {
  */
 
 export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHandlers() {
-  return [function (_ref8) {
-    var sourceCode = _ref8.sourceCode,
-      selection = _ref8.selection,
-      dispatch = _ref8.dispatch,
-      e = _ref8.e;
+  return [function (_ref9) {
+    var sourceCode = _ref9.sourceCode,
+      selection = _ref9.selection,
+      dispatch = _ref9.dispatch,
+      e = _ref9.e;
     return createKeybindingsHandler({
       Tab: function Tab(e) {
         e.preventDefault();
@@ -123,7 +133,9 @@ export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHan
           e.preventDefault();
           dispatch({
             type: 'select',
-            selection: createSelection(focusOffset + 1)
+            payload: {
+              selection: createSelection(focusOffset + 1)
+            }
           });
         }
       },
@@ -134,7 +146,9 @@ export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHan
           e.preventDefault();
           dispatch({
             type: 'select',
-            selection: createSelection(anchorOffset, focusOffset + 1)
+            payload: {
+              selection: createSelection(anchorOffset, focusOffset + 1)
+            }
           });
         }
       }

package/dist/utils/history.d.ts

@@ -59,13 +59,23 @@ export interface RedoAction {
 }
 export interface BatchAction {
     type: 'batch';
-    selection?: ContainerSelection;
+    payload?: {
+        selection: ContainerSelection;
+    };
+}
+export interface MutateAction {
+    type: 'mutate';
+    payload: {
+        sourceCode: string;
+    };
 }
 export interface SelectAction {
     type: 'select';
-    selection: ContainerSelection;
+    payload: {
+        selection: ContainerSelection;
+    };
 }
-type HistoryAction = UndoAction | RedoAction | BatchAction | SelectAction;
+type HistoryAction = UndoAction | RedoAction | BatchAction | MutateAction | SelectAction;
 export declare const useHistory: (initialSourceCode: string, readOnly?: boolean) => {
     history: History;
     sourceCode: string;

package/dist/utils/history.js

@@ -228,16 +228,26 @@ var historyReducer = function historyReducer(_ref2, action) {
       }
     case 'batch':
       {
-        var _action$selection2, _action$selection3;
+        var _action$payload$selec, _action$payload4, _action$payload$selec2, _action$payload5;
         return {
           states: [].concat(_toConsumableArray(states.slice(0, index)), [_objectSpread(_objectSpread({}, states[index]), {}, {
-            selection: (_action$selection2 = action.selection) !== null && _action$selection2 !== void 0 ? _action$selection2 : states[index].selection,
+            selection: (_action$payload$selec = (_action$payload4 = action.payload) === null || _action$payload4 === void 0 ? void 0 : _action$payload4.selection) !== null && _action$payload$selec !== void 0 ? _action$payload$selec : states[index].selection,
             action: _objectSpread(_objectSpread({}, states[index].action), {}, {
               batch: false
             })
           })]),
           index: index,
-          selection: (_action$selection3 = action.selection) !== null && _action$selection3 !== void 0 ? _action$selection3 : selection
+          selection: (_action$payload$selec2 = (_action$payload5 = action.payload) === null || _action$payload5 === void 0 ? void 0 : _action$payload5.selection) !== null && _action$payload$selec2 !== void 0 ? _action$payload$selec2 : selection
+        };
+      }
+    case 'mutate':
+      {
+        return {
+          states: [].concat(_toConsumableArray(states.slice(0, index)), [_objectSpread(_objectSpread({}, states[index]), {}, {
+            sourceCode: action.payload.sourceCode
+          })], _toConsumableArray(states.slice(index + 1))),
+          index: index,
+          selection: selection
         };
       }
     case 'select':
@@ -245,7 +255,7 @@ var historyReducer = function historyReducer(_ref2, action) {
         return {
           states: states,
           index: index,
-          selection: action.selection
+          selection: action.payload.selection
         };
       }
     default:

package/dist/utils/markdown.js

@@ -1,9 +1,11 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["checked"];
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { toText as hastToText } from 'hast-util-to-text';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
@@ -23,6 +25,7 @@ import remarkStringify from 'remark-stringify';
 import strip from 'strip-markdown';
 import { unified } from 'unified';
 import { prefix } from "./global";
+import rehypeCustom from "./rehype/rehype-custom";
 import rehypeLine from "./rehype/rehype-line";
 import rehypeMath, { isMathNode } from "./rehype/rehype-math";
 import rehypeRawPositions from "./rehype/rehype-raw-positions";
@@ -332,6 +335,20 @@ export var getDefaultSchema = function getDefaultSchema() {
 export var viewerRender = function viewerRender(root, schema) {
   return unified().use(rehypeRawPositions).use(rehypeRaw).use(rehypeMath).use(rehypeSanitize, schema).use(rehypeLine).runSync(root);
 };
+var Input = function Input(_ref2) {
+  var checked = _ref2.checked,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return jsx('input', _objectSpread({
+    checked: !!checked
+  }, props));
+};
+var Custom = function Custom(_ref3) {
+  var component = _ref3.component,
+    value = _ref3.value;
+  return jsx(component, {
+    children: value
+  });
+};
 
 /**
  * 将 Hast 树映射到 React 虚拟 DOM 树
@@ -343,17 +360,11 @@ export var viewerRender = function viewerRender(root, schema) {
 export var postViewerRender = function postViewerRender(root, options) {
   try {
     var components = _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
-      input: function input(props) {
-        return jsx('input', props);
-      },
-      custom: function custom(props) {
-        var _options$customBlocks;
-        return jsx((_options$customBlocks = options.customBlocks[props.meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
-          children: props.value
-        });
-      }
+      // 直接在这里写函数会有重复渲染问题，因此用全局组件
+      input: Input,
+      custom: Custom
     });
-    return toJsxRuntime(unified().use(rehypeKatex).runSync(root), {
+    return toJsxRuntime(unified().use(rehypeKatex).use(rehypeCustom, options.customBlocks).runSync(root), {
       Fragment: Fragment,
       jsx: jsx,
       jsxs: jsxs,

package/dist/utils/rehype/rehype-custom.d.ts

@@ -0,0 +1,6 @@
+import type { Root as HastRoot } from 'hast';
+/**
+ * 为 Custom 节点添加组件属性
+ */
+declare const rehypeCustom: (customBlocks: any) => (root: HastRoot) => void;
+export default rehypeCustom;

package/dist/utils/rehype/rehype-custom.js

@@ -0,0 +1,20 @@
+import { SKIP, visit } from 'unist-util-visit';
+
+/**
+ * 为 Custom 节点添加组件属性
+ */
+var rehypeCustom = function rehypeCustom(customBlocks) {
+  return function (root) {
+    return visit(root, {
+      tagName: 'custom'
+    }, function (node) {
+      var _node$properties;
+      if (typeof ((_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.meta) === 'string') {
+        var _customBlocks$node$pr;
+        node.properties.component = (_customBlocks$node$pr = customBlocks[node.properties.meta]) !== null && _customBlocks$node$pr !== void 0 ? _customBlocks$node$pr : 'div';
+      }
+      return SKIP;
+    });
+  };
+};
+export default rehypeCustom;

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

@@ -21,10 +21,18 @@ export interface XStarEditorProps {
      * 语言
      */
     locale?: XStarMdEditorProps['locale'];
+    /**
+     * 配置未输入时的提示语
+     */
+    placeholder?: string;
     /**
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 文本
+     */
+    value?: string;
     /**
      * 是否只读
      */
@@ -36,7 +44,7 @@ export interface XStarEditorProps {
     /**
      * 编辑器属性
      */
-    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'readOnly' | 'onChange' | 'onInsertFile'>;
+    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'placeholder' | 'initialValue' | 'value' | 'readOnly' | 'onChange' | 'onInsertFile'>;
     /**
      * 查看器属性
      */

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

@@ -41,8 +41,10 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     style = _ref2.style,
     height = _ref2.height,
     locale = _ref2.locale,
+    placeholder = _ref2.placeholder,
     _ref2$initialValue = _ref2.initialValue,
     initialValue = _ref2$initialValue === void 0 ? '' : _ref2$initialValue,
+    value = _ref2.value,
     readOnly = _ref2.readOnly,
     enableWebWorker = _ref2.enableWebWorker,
     editorProps = _ref2.editorProps,
@@ -164,20 +166,16 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       viewer.removeEventListener('render', render);
     };
   }, []);
-  var _useState = useState(initialValue),
+  var _useState = useState(['editor', 'viewer']),
     _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var _useState3 = useState(['editor', 'viewer']),
-    _useState4 = _slicedToArray(_useState3, 2),
-    layout = _useState4[0],
-    setLayout = _useState4[1];
+    layout = _useState2[0],
+    setLayout = _useState2[1];
   var editOnly = layout.includes('editor') && !layout.includes('viewer');
   var viewOnly = !layout.includes('editor') && layout.includes('viewer');
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    fullscreen = _useState6[0],
-    setFullscreen = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullscreen = _useState4[0],
+    setFullscreen = _useState4[1];
   var editorPlugins = useMemo(function () {
     var _editorProps$plugins;
     return [function (ctx) {
@@ -237,6 +235,10 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       };
     }
   }, [fullscreen]);
+  var _useState5 = useState(initialValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sourceCode = _useState6[0],
+    setSourceCode = _useState6[1];
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: classNames("".concat(prefix, "editor"), _defineProperty({}, "".concat(prefix, "fullscreen"), fullscreen), className),
@@ -247,11 +249,12 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "active"), editOnly), _defineProperty(_classNames4, "".concat(prefix, "hidden"), viewOnly), _classNames4), editorProps === null || editorProps === void 0 ? void 0 : editorProps.className),
     height: height,
     locale: locale,
-    initialValue: initialValue,
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : sourceCode,
     readOnly: viewOnly || readOnly,
     plugins: editorPlugins,
     onChange: function onChange(value) {
-      setValue(value);
+      setSourceCode(value);
       _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
     },
     onInsertFile: onInsertFile
@@ -260,12 +263,12 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     className: classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefix, "active"), viewOnly), _defineProperty(_classNames5, "".concat(prefix, "hidden"), editOnly), _classNames5), viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.className),
     style: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style,
     height: height
-  }, viewerRender(value)) : /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
+  }, viewerRender(value !== null && value !== void 0 ? value : sourceCode)) : /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
     ref: viewerRef
   }, viewerProps, {
     className: classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(prefix, "active"), viewOnly), _defineProperty(_classNames6, "".concat(prefix, "hidden"), editOnly), _classNames6), viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.className),
     height: height,
-    value: value,
+    value: value !== null && value !== void 0 ? value : sourceCode,
     enableWebWorker: enableWebWorker
   })));
 });

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

@@ -49,10 +49,18 @@ export interface XStarMdEditorProps {
      * 语言
      */
     locale?: string;
+    /**
+     * 配置未输入时的提示语
+     */
+    placeholder?: string;
     /**
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 文本
+     */
+    value?: string;
     /**
      * 是否只读
      */

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

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import Toolbar, { getDefaultToolbarItemMap, getDefaultToolbarItems } from "../components/Toolbar";
@@ -14,8 +15,10 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     toolbarClassName = _ref.toolbarClassName,
     toolbarStyle = _ref.toolbarStyle,
     locale = _ref.locale,
+    placeholder = _ref.placeholder,
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    value = _ref.value,
     readOnly = _ref.readOnly,
     plugins = _ref.plugins,
     onChange = _ref.onChange,
@@ -50,6 +53,20 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ignoreNext.current = false;
     initialized.current = true;
   }, [sourceCode, selection]);
+
+  // 受控时将内部文本与外部文本同步
+  useEffect(function () {
+    if (value !== undefined && sourceCode !== value) {
+      // 不触发 onChange 事件
+      initialized.current = false;
+      dispatch({
+        type: 'mutate',
+        payload: {
+          sourceCode: value
+        }
+      });
+    }
+  }, [value]);
   var historyLatest = useRef(history);
   historyLatest.current = history;
   var sourceCodeLatest = useRef(sourceCode);
@@ -84,15 +101,12 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return containerRef.current;
       },
       getValue: function getValue() {
-        return exec(function (_ref2) {
-          var sourceCode = _ref2.sourceCode;
-          return sourceCode;
-        });
+        return sourceCodeLatest.current;
       },
       setValue: function setValue(value) {
-        return exec(function (_ref3) {
-          var selection = _ref3.selection,
-            dispatch = _ref3.dispatch;
+        return exec(function (_ref2) {
+          var selection = _ref2.selection,
+            dispatch = _ref2.dispatch;
           return dispatch({
             type: 'set',
             payload: {
@@ -387,10 +401,11 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     exec: exec
   }), /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classNames("".concat(prefix, "md-editor"), className),
+    className: classNames("".concat(prefix, "md-editor"), _defineProperty({}, "".concat(prefix, "empty"), !sourceCode), className),
     style: _objectSpread(_objectSpread({}, style), {}, {
       height: height
     }),
+    placeholder: placeholder,
     contentEditable: true,
     onBlur: focusEventHandler,
     onCompositionEnd: compositionEventHandler,

package/package.json

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