x-star-editor 0.0.9 → 0.1.0

package/dist/utils/container.js

@@ -49,6 +49,16 @@ export var useContainer = function useContainer() {
    */
   var ref = useRef(null);
 
+  /**
+   * 是否在遍历时忽略节点及其子节点
+   *
+   * @param node 节点
+   * @returns 是否忽略
+   */
+  var isIgnore = function isIgnore(node) {
+    return node instanceof HTMLElement && node.dataset.ignore !== undefined;
+  };
+
   /**
    * 将 DOM 树规范化
    *
@@ -59,6 +69,9 @@ export var useContainer = function useContainer() {
       return;
     }
     var traverse = function traverse(node, depth) {
+      if (isIgnore(node)) {
+        return;
+      }
       if (depth === 2) {
         var _node$lastChild;
         // 检查行节点的末尾
@@ -102,6 +115,9 @@ export var useContainer = function useContainer() {
     }
     var text = '';
     var traverse = function traverse(node) {
+      if (isIgnore(node)) {
+        return;
+      }
       if (node.nodeType === Node.TEXT_NODE) {
         if (node.nodeValue) {
           text += node.nodeValue;
@@ -152,7 +168,7 @@ export var useContainer = function useContainer() {
           }
         } else {
           // 节点名称相同，更新属性和子节点
-          if (newChild instanceof Element && oldChild instanceof Element) {
+          if (newChild instanceof HTMLElement && oldChild instanceof HTMLElement) {
             var _iterator = _createForOfIteratorHelper(oldChild.getAttributeNames()),
               _step;
             try {
@@ -234,6 +250,9 @@ export var useContainer = function useContainer() {
       }
       var offset = 0;
       var traverse = function traverse(node) {
+        if (isIgnore(node)) {
+          return;
+        }
         if (node === targetNode) {
           if (node.nodeType === Node.TEXT_NODE) {
             if (node.nodeValue) {
@@ -296,6 +315,9 @@ export var useContainer = function useContainer() {
       }
       var offset = targetOffset;
       var traverse = function traverse(node) {
+        if (isIgnore(node)) {
+          return;
+        }
         if (node.nodeType === Node.TEXT_NODE) {
           if (node.nodeValue) {
             if (offset < node.nodeValue.length || offset === node.nodeValue.length && !node.nodeValue.endsWith("\u200B")) {

package/dist/utils/global.d.ts

@@ -1 +1 @@
-export declare const prefix = "x-star-";
+export declare const prefix = "x-star-editor-";

package/dist/utils/global.js

@@ -1 +1 @@
-export var prefix = 'x-star-';
+export var prefix = 'x-star-editor-';

package/dist/utils/history.d.ts

@@ -25,15 +25,15 @@ export interface DeleteAction {
 export interface ToggleAction {
     type: 'toggle';
     payload: {
-        type: 'heading';
-        depth: 1 | 2 | 3 | 4 | 5 | 6;
+        type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'strong' | 'thematicBreak';
     } | {
         type: 'code';
         language: string;
     } | {
-        type: 'thematicBreak' | 'blockquote' | 'emphasis' | 'strong' | 'inlineCode' | 'delete' | 'math' | 'inlineMath';
+        type: 'heading';
+        depth: 1 | 2 | 3 | 4 | 5 | 6;
     } | {
-        type: 'link' | 'image';
+        type: 'image' | 'link';
         url: string;
         description: string;
     };
@@ -44,6 +44,17 @@ export interface SetAction {
     payload: State;
     selection: ContainerSelection;
 }
+type StateAction = InsertAction | DeleteAction | ToggleAction | SetAction;
+/**
+ * 编辑器历史
+ */
+interface History {
+    states: (State & {
+        action: StateAction;
+    })[];
+    index: number;
+    selection: ContainerSelection;
+}
 export interface UndoAction {
     type: 'undo';
 }
@@ -54,9 +65,11 @@ export interface SelectAction {
     type: 'select';
     selection: ContainerSelection;
 }
+type HistoryAction = UndoAction | RedoAction | SelectAction;
 export declare const useHistory: (initialSourceCode: string) => {
+    history: History;
     sourceCode: string;
     selection: ContainerSelection;
-    dispatch: import("react").Dispatch<InsertAction | DeleteAction | ToggleAction | SetAction | UndoAction | RedoAction | SelectAction>;
+    dispatch: import("react").Dispatch<StateAction | HistoryAction>;
 };
 export {};

package/dist/utils/history.js

@@ -84,26 +84,22 @@ var stateReducer = function stateReducer(_ref, action) {
         var lineBefore = sourceCode.slice(0, lineStartOffset);
         var lineAfter = sourceCode.slice(lineEndOffset);
         switch (action.payload.type) {
-          case 'heading':
+          case 'blockquote':
             {
-              var depth = action.payload.depth;
               var lines = sourceCode.slice(lineStartOffset, lineEndOffset).split('\n');
               var values = lines.map(function (line) {
-                return [1, 2, 3, 4, 5, 6].find(function (value) {
-                  return new RegExp("^ {0,3}#{".concat(value, "} +")).test(line);
-                });
+                return /^ {0,3}> */.test(line);
               });
               for (var i = 0; i < values.length; i++) {
-                var value = values[i];
-                if (value) {
-                  lines[i] = lines[i].replace(new RegExp("^ {0,3}#{".concat(value, "} +")), '');
+                if (values[i]) {
+                  lines[i] = lines[i].replace(/^ {0,3}> */, '');
                 }
               }
               if (values.some(function (value) {
-                return value !== depth;
+                return !value;
               })) {
                 for (var _i = 0; _i < lines.length; _i++) {
-                  lines[_i] = "".concat('#'.repeat(depth), " ").concat(lines[_i]);
+                  lines[_i] = "> ".concat(lines[_i]);
                 }
               }
               var _text = lines.join('\n');
@@ -120,59 +116,21 @@ var stateReducer = function stateReducer(_ref, action) {
                 selection: createSelection(lineEndOffset + language.length + 21)
               };
             }
-          case 'thematicBreak':
-            {
-              return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n***\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + 5)
-              };
-            }
-          case 'blockquote':
-            {
-              var _lines = sourceCode.slice(lineStartOffset, lineEndOffset).split('\n');
-              var _values = _lines.map(function (line) {
-                return /^ {0,3}> */.test(line);
-              });
-              for (var _i2 = 0; _i2 < _values.length; _i2++) {
-                if (_values[_i2]) {
-                  _lines[_i2] = _lines[_i2].replace(/^ {0,3}> */, '');
-                }
-              }
-              if (_values.some(function (value) {
-                return !value;
-              })) {
-                for (var _i3 = 0; _i3 < _lines.length; _i3++) {
-                  _lines[_i3] = "> ".concat(_lines[_i3]);
-                }
-              }
-              var _text2 = _lines.join('\n');
-              return {
-                sourceCode: "".concat(lineBefore).concat(_text2).concat(lineAfter),
-                selection: createSelection(lineStartOffset + _text2.length)
-              };
-            }
-          case 'math':
-            {
-              return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n$$\n\n$$\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + 4)
-              };
-            }
+          case 'delete':
           case 'emphasis':
-          case 'strong':
           case 'inlineCode':
-          case 'delete':
           case 'inlineMath':
+          case 'strong':
             {
               var type = action.payload.type;
               var delimiters = type === 'emphasis' ? ['*', '_'] : type === 'strong' ? ['**', '__'] : type === 'inlineCode' ? ['`'] : type === 'delete' ? ['~~'] : ['$'];
-              var _text3 = sourceCode.slice(startOffset, endOffset);
-              for (var _i4 = 0, _delimiters = delimiters; _i4 < _delimiters.length; _i4++) {
-                var _delimiter = _delimiters[_i4];
+              var _text2 = sourceCode.slice(startOffset, endOffset);
+              for (var _i2 = 0, _delimiters = delimiters; _i2 < _delimiters.length; _i2++) {
+                var _delimiter = _delimiters[_i2];
                 if (before.endsWith(_delimiter) && after.startsWith(_delimiter)) {
                   // 删除分隔文本
                   return {
-                    sourceCode: "".concat(before.slice(0, before.length - _delimiter.length)).concat(_text3).concat(after.slice(_delimiter.length)),
+                    sourceCode: "".concat(before.slice(0, before.length - _delimiter.length)).concat(_text2).concat(after.slice(_delimiter.length)),
                     selection: createSelection(anchorOffset - _delimiter.length, focusOffset - _delimiter.length)
                   };
                 }
@@ -180,12 +138,40 @@ var stateReducer = function stateReducer(_ref, action) {
               var delimiter = delimiters[0];
               // 插入分隔文本
               return {
-                sourceCode: "".concat(before).concat(delimiter).concat(_text3).concat(delimiter).concat(after),
+                sourceCode: "".concat(before).concat(delimiter).concat(_text2).concat(delimiter).concat(after),
                 selection: createSelection(anchorOffset + delimiter.length, focusOffset + delimiter.length)
               };
             }
-          case 'link':
+          case 'heading':
+            {
+              var depth = action.payload.depth;
+              var _lines = sourceCode.slice(lineStartOffset, lineEndOffset).split('\n');
+              var _values = _lines.map(function (line) {
+                return [1, 2, 3, 4, 5, 6].find(function (value) {
+                  return new RegExp("^ {0,3}#{".concat(value, "} +")).test(line);
+                });
+              });
+              for (var _i3 = 0; _i3 < _values.length; _i3++) {
+                var value = _values[_i3];
+                if (value) {
+                  _lines[_i3] = _lines[_i3].replace(new RegExp("^ {0,3}#{".concat(value, "} +")), '');
+                }
+              }
+              if (_values.some(function (value) {
+                return value !== depth;
+              })) {
+                for (var _i4 = 0; _i4 < _lines.length; _i4++) {
+                  _lines[_i4] = "".concat('#'.repeat(depth), " ").concat(_lines[_i4]);
+                }
+              }
+              var _text3 = _lines.join('\n');
+              return {
+                sourceCode: "".concat(lineBefore).concat(_text3).concat(lineAfter),
+                selection: createSelection(lineStartOffset + _text3.length)
+              };
+            }
           case 'image':
+          case 'link':
             {
               var _action$payload2 = action.payload,
                 _type = _action$payload2.type,
@@ -196,6 +182,20 @@ var stateReducer = function stateReducer(_ref, action) {
                 selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'link' ? 0 : 1))
               };
             }
+          case 'math':
+            {
+              return {
+                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n$$\n\n$$\n").concat(lineAfter),
+                selection: createSelection(lineEndOffset + 4)
+              };
+            }
+          case 'thematicBreak':
+            {
+              return {
+                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n***\n").concat(lineAfter),
+                selection: createSelection(lineEndOffset + 5)
+              };
+            }
           default:
             {
               var _ = action.payload;
@@ -242,7 +242,7 @@ var historyReducer = function historyReducer(_ref2, action) {
         return {
           states: states,
           index: index - 1,
-          selection: states[index].actionSelection
+          selection: states[index].action.selection
         };
       }
     case 'redo':
@@ -280,29 +280,41 @@ var historyReducer = function historyReducer(_ref2, action) {
           };
         }
         return {
-          states: [].concat(_toConsumableArray(states.slice(index < 32 ? 0 : index - 31, index + 1)), [_objectSpread(_objectSpread({}, state), {}, {
-            actionSelection: action.selection
+          states: [].concat(_toConsumableArray(states.slice(index < 100 ? 0 : index - 99, index + 1)), [_objectSpread(_objectSpread({}, state), {}, {
+            action: action
           })]),
-          index: index < 32 ? index + 1 : 32,
+          index: index < 100 ? index + 1 : 100,
           selection: state.selection
         };
       }
   }
 };
 export var useHistory = function useHistory(initialSourceCode) {
-  var _useReducer = useReducer(historyReducer, {
-      states: [{
-        sourceCode: initialSourceCode,
-        selection: createSelection(0),
-        actionSelection: createSelection(0)
-      }],
-      index: 0,
-      selection: createSelection(0)
+  var _useReducer = useReducer(historyReducer, initialSourceCode, function (text) {
+      var action = {
+        type: 'insert',
+        payload: {
+          text: text
+        },
+        selection: createSelection(0)
+      };
+      var state = stateReducer({
+        sourceCode: '',
+        selection: createSelection(0)
+      }, action);
+      return {
+        states: [_objectSpread(_objectSpread({}, state), {}, {
+          action: action
+        })],
+        index: 0,
+        selection: state.selection
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     history = _useReducer2[0],
     dispatch = _useReducer2[1];
   return {
+    history: history,
     sourceCode: history.states[history.index].sourceCode,
     selection: history.selection,
     dispatch: dispatch

package/dist/utils/markdown.d.ts

@@ -56,4 +56,11 @@ export declare const toHTML: (sourceCode: string) => string;
  * @returns Markdown 文本
  */
 export declare const toMarkdown: (sourceCode: string) => string;
+/**
+ * 将 Markdown 文本转成纯文本
+ *
+ * @param sourceCode Markdown 文本
+ * @returns 纯文本
+ */
+export declare const toText: (sourceCode: string) => string;
 export {};

package/dist/utils/markdown.js

@@ -25,6 +25,7 @@ import remarkMath from 'remark-math';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import remarkStringify from 'remark-stringify';
+import strip from 'strip-markdown';
 import { unified } from 'unified';
 import { prefix } from "./global";
 export var getDefaultSchema = function getDefaultSchema() {
@@ -78,7 +79,7 @@ export var editorRender = function editorRender(sourceCode) {
   /**
    * CSS 类名前缀
    */
-  var classNamePrefix = "".concat(prefix, "md-editor-");
+  var mdPrefix = "".concat(prefix, "md-");
 
   /**
    * 扫描偏移量，表示已经添加到 DOM 树的文本
@@ -86,7 +87,7 @@ export var editorRender = function editorRender(sourceCode) {
   var scanOffset = 0;
 
   /**
-   * 遍历 Mdast 树时的栈，保存 Mdast 节点、对应的 DOM 元素、是否为 Mdast 节点的第一个子元素
+   * 遍历 Mdast 树时的栈，保存 Mdast 节点、对应的 DOM 元素、为第几个子元素
    */
   var stack = [];
 
@@ -107,47 +108,35 @@ export var editorRender = function editorRender(sourceCode) {
    * @returns 子节点是否为流内容
    */
   var isFlowContent = function isFlowContent(node) {
-    return node.type === 'blockquote' || node.type === 'listItem' || node.type === 'footnoteDefinition';
+    return node.type === 'blockquote' || node.type === 'footnoteDefinition' || node.type === 'listItem';
   };
 
   /**
    * 将栈中指定索引的 DOM 元素推到对应的父元素中
    *
    * @param index 索引
-   * @param last 是否为 Mdast 节点的最后一个子元素，默认为 `false`
    */
   var pushElement = function pushElement(index) {
-    var last = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var _stack$index = stack[index],
-      node = _stack$index.node,
-      first = _stack$index.first;
+    var node = stack[index].node;
 
     // 如果节点为流内容，则将样式添加到该行的 `<div>` 元素上，否则添加到该节点的元素上
     var styleElement = stack[index && !isFlowContent(stack[index - 1].node) ? index : 0].el;
-    styleElement.classList.add("".concat(classNamePrefix).concat(node.type));
+    styleElement.classList.add("".concat(mdPrefix).concat(node.type));
     if (node.type === 'heading') {
-      styleElement.classList.add("".concat(classNamePrefix, "heading").concat(node.depth));
-    } else if (node.type === 'html' || node.type === 'code' || node.type === 'math') {
-      if (first) {
-        styleElement.classList.add("".concat(classNamePrefix, "first"));
-      }
-      if (last) {
-        styleElement.classList.add("".concat(classNamePrefix, "last"));
-      }
+      styleElement.classList.add("".concat(mdPrefix, "heading").concat(node.depth));
     }
 
     // 如果索引为 0，则父节点为块级元素，否则为前一个索引的 DOM 元素
     var parentElement = index ? stack[index - 1].el : block;
     parentElement.append(stack[index].el);
     stack[index].el = document.createElement(index ? 'span' : 'div');
-    stack[index].first = false;
+    stack[index].counter++;
   };
 
   /**
    * 将块级元素推到 DOM 树根元素中
    */
   var pushBlock = function pushBlock() {
-    block.classList.add("".concat(classNamePrefix, "block"));
     el.append(block);
     block = document.createElement('div');
   };
@@ -161,7 +150,7 @@ export var editorRender = function editorRender(sourceCode) {
   var createDelimiter = function createDelimiter(text) {
     var temp = document.createElement('span');
     temp.append(text);
-    temp.classList.add("".concat(classNamePrefix, "delimiter"));
+    temp.classList.add("".concat(mdPrefix, "delimiter"));
     return temp;
   };
 
@@ -247,7 +236,7 @@ export var editorRender = function editorRender(sourceCode) {
         stack.push({
           node: node,
           el: document.createElement(stack.length ? 'span' : 'div'),
-          first: true
+          counter: 0
         });
         if ('children' in node) {
           getChildren(node.children, endOffset);
@@ -255,13 +244,13 @@ export var editorRender = function editorRender(sourceCode) {
           addText(sourceCode.slice(scanOffset, endOffset));
         }
         if (stack.length > 1) {
-          pushElement(stack.length - 1, true);
+          pushElement(stack.length - 1);
         } else {
           var _node$position3;
           // 如果栈大小为 1，说明为块级元素终点
           stack[0].el.append("\u200B");
-          pushElement(0, true);
-          block.setAttribute('line', "".concat((_node$position3 = node.position) === null || _node$position3 === void 0 ? void 0 : _node$position3.start.line));
+          pushElement(0);
+          block.dataset.line = "".concat((_node$position3 = node.position) === null || _node$position3 === void 0 ? void 0 : _node$position3.start.line);
           pushBlock();
           scanOffset++;
         }
@@ -301,7 +290,7 @@ export var viewerRender = function viewerRender(sourceCode, options) {
           var node = _step2.value;
           if ('properties' in node && node.properties) {
             var _node$position4;
-            node.properties.line = (_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line;
+            node.properties['data-line'] = (_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line;
           }
         }
       } catch (err) {
@@ -350,4 +339,15 @@ var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkB
  */
 export var toMarkdown = function toMarkdown(sourceCode) {
   return toMarkdownProcessor.stringify(toMarkdownProcessor.runSync(toHastProcessor.runSync(toHastProcessor.parse(sourceCode))));
+};
+var toTextProcessor = unified().use(strip).freeze();
+
+/**
+ * 将 Markdown 文本转成纯文本
+ *
+ * @param sourceCode Markdown 文本
+ * @returns 纯文本
+ */
+export var toText = function toText(sourceCode) {
+  return toTextProcessor.processSync(sourceCode).toString();
 };

package/dist/{XStarEditor → x-star-editor}/index.d.ts

@@ -1,15 +1,34 @@
 import React from 'react';
-import type { XStarMdEditorHandle, XStarMdEditorProps } from '../XStarMdEditor';
-import type { XStarMdViewerHandle, XStarMdViewerProps } from '../XStarMdViewer';
+import type { XStarMdEditorHandle, XStarMdEditorProps } from '../x-star-md-editor';
+import type { XStarMdViewerHandle, XStarMdViewerProps } from '../x-star-md-viewer';
 export interface XStarEditorHandle {
     getEditor: () => XStarMdEditorHandle | null;
     getViewer: () => XStarMdViewerHandle | null;
 }
 export interface XStarEditorProps {
+    /**
+     * 编辑器和浏览器的高度（不包括工具栏）
+     */
     height?: React.CSSProperties['height'];
+    /**
+     * 语言
+     */
+    locale?: string;
+    /**
+     * 初始文本
+     */
     initialValue?: string;
-    editorProps?: Omit<XStarMdEditorProps, 'initialValue' | 'onChange'>;
+    /**
+     * 编辑器属性
+     */
+    editorProps?: Omit<XStarMdEditorProps, 'locale' | 'initialValue' | 'onChange'>;
+    /**
+     * 浏览器属性
+     */
     viewerProps?: Omit<XStarMdViewerProps, 'value'>;
+    /**
+     * 文本变化回调函数
+     */
     onChange?: (value: string) => void;
 }
 declare const XStarEditor: React.ForwardRefExoticComponent<XStarEditorProps & React.RefAttributes<XStarEditorHandle>>;

package/dist/{XStarEditor → x-star-editor}/index.js

@@ -13,11 +13,12 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import XStarMdEditor, { useMdEditorRef } from "../XStarMdEditor";
-import XStarMdViewer, { useMdViewerRef } from "../XStarMdViewer";
 import { prefix } from "../utils/global";
+import XStarMdEditor, { useMdEditorRef } from "../x-star-md-editor";
+import XStarMdViewer, { useMdViewerRef } from "../x-star-md-viewer";
 var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var height = _ref.height,
+    locale = _ref.locale,
     initialValue = _ref.initialValue,
     editorProps = _ref.editorProps,
     viewerProps = _ref.viewerProps,
@@ -59,24 +60,30 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var toLimit = toElement.scrollHeight - toElement.clientHeight;
       if (fromLimit > 0 && toLimit > 0) {
         for (var i = 0, j = 0; i < fromElement.children.length && j < toElement.children.length;) {
-          var _fromChild$getAttribu, _toChild$getAttribute;
           var fromChild = fromElement.children[i];
           var toChild = toElement.children[j];
-          var fromLine = parseInt((_fromChild$getAttribu = fromChild.getAttribute('line')) !== null && _fromChild$getAttribu !== void 0 ? _fromChild$getAttribu : '');
-          var toLine = parseInt((_toChild$getAttribute = toChild.getAttribute('line')) !== null && _toChild$getAttribute !== void 0 ? _toChild$getAttribute : '');
-          if (!(fromChild instanceof HTMLElement) || !fromLine) {
+          if (!(fromChild instanceof HTMLElement)) {
             i++;
-          } else if (!(toChild instanceof HTMLElement) || !toLine) {
-            j++;
-          } else if (fromLine < toLine) {
-            i++;
-          } else if (fromLine > toLine) {
+          } else if (!(toChild instanceof HTMLElement)) {
             j++;
           } else {
-            fromOffsetTops.push(fromChild.offsetTop);
-            toOffsetTops.push(toChild.offsetTop);
-            i++;
-            j++;
+            var _fromChild$dataset$li, _toChild$dataset$line;
+            var fromLine = parseInt((_fromChild$dataset$li = fromChild.dataset.line) !== null && _fromChild$dataset$li !== void 0 ? _fromChild$dataset$li : '');
+            var toLine = parseInt((_toChild$dataset$line = toChild.dataset.line) !== null && _toChild$dataset$line !== void 0 ? _toChild$dataset$line : '');
+            if (!fromLine) {
+              i++;
+            } else if (!toLine) {
+              j++;
+            } else if (fromLine < toLine) {
+              i++;
+            } else if (fromLine > toLine) {
+              j++;
+            } else {
+              fromOffsetTops.push(fromChild.offsetTop);
+              toOffsetTops.push(toChild.offsetTop);
+              i++;
+              j++;
+            }
           }
         }
         for (; fromOffsetTops[fromOffsetTops.length - 1] >= fromLimit || toOffsetTops[toOffsetTops.length - 1] >= toLimit;) {
@@ -140,9 +147,10 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(XStarMdEditor, _extends({
     ref: editorRef
   }, editorProps, {
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({}, editorProps === null || editorProps === void 0 ? void 0 : editorProps.style), {}, {
       height: height
-    }, editorProps === null || editorProps === void 0 ? void 0 : editorProps.style),
+    }),
+    locale: locale,
     initialValue: initialValue,
     onChange: function onChange(value) {
       setValue(value);
@@ -151,13 +159,15 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })), /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
     ref: viewerRef
   }, viewerProps, {
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({}, viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style), {}, {
       height: height
-    }, viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style),
+    }),
     value: value
   })));
 });
-XStarEditor.displayName = 'XStarEditor';
+if (process.env.NODE_ENV !== 'production') {
+  XStarEditor.displayName = 'XStarEditor';
+}
 export default XStarEditor;
 export var useEditorRef = function useEditorRef() {
   return useRef(null);