x-star-editor 0.3.1 → 0.3.3

package/dist/components/Toolbar.js

@@ -34,7 +34,7 @@ import { redoHandler, toggleHandler, undoHandler } from "../utils/handler";
 import { toHTML, toMarkdown } from "../utils/markdown";
 import Fade from "./Fade";
 import FileInput from "./FileInput";
-var Button = function Button(_ref) {
+var Item = function Item(_ref) {
   var _classNames;
   var children = _ref.children,
     toolbarRef = _ref.toolbarRef,
@@ -81,9 +81,9 @@ var Button = function Button(_ref) {
     }
   }, [popoverMount]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "button-container"))
+    className: classNames("".concat(prefix, "item-container"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "button"), (_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"), tooltipOpen || popoverMount), _classNames)),
     onClick: function onClick() {
       if (!disabled) {
         setPopoverOpen(true);
@@ -564,7 +564,7 @@ var Toolbar = function Toolbar(_ref9) {
         tooltip = _ref10.tooltip,
         _popoverRender = _ref10.popoverRender,
         _onClick2 = _ref10.onClick;
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/React.createElement(Item, {
         key: index,
         toolbarRef: toolbarRef,
         disabled: disabled,

package/dist/styles/index.css

@@ -86,10 +86,10 @@
   position: relative;
   color: rgba(0, 0, 0, 0.88);
 }
-.x-star-editor-toolbar .x-star-editor-button-container {
+.x-star-editor-toolbar .x-star-editor-item-container {
   position: relative;
 }
-.x-star-editor-toolbar .x-star-editor-button-container > .x-star-editor-button {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item {
   width: 2em;
   height: 2em;
   display: flex;
@@ -99,20 +99,20 @@
   cursor: pointer;
   user-select: none;
 }
-.x-star-editor-toolbar .x-star-editor-button-container > .x-star-editor-button.x-star-editor-disabled::before {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item.x-star-editor-disabled::before {
   content: "";
   position: absolute;
   inset: 0;
   background-color: rgba(230, 247, 255, 0.7);
   cursor: not-allowed;
 }
-.x-star-editor-toolbar .x-star-editor-button-container > .x-star-editor-button.x-star-editor-active {
+.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-button-container > .x-star-editor-button .x-star-editor-icon {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item .x-star-editor-icon {
   font-size: 1.75em;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-tooltip {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-tooltip {
   position: absolute;
   top: 3em;
   width: max-content;
@@ -127,7 +127,7 @@
   transform: translate(calc(1.25em - 50%));
   transition: opacity 0.3s;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-tooltip::before {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-tooltip::before {
   content: "";
   position: absolute;
   top: -0.3em;
@@ -137,7 +137,7 @@
   transform-origin: 0 0;
   transform: rotate(45deg);
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-popover {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-popover {
   position: absolute;
   width: max-content;
   background-color: #fff;
@@ -148,12 +148,12 @@
   z-index: 1;
   transition: opacity 0.3s;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-popover .x-star-editor-option {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-popover .x-star-editor-option {
   padding: 6px 12px;
   cursor: pointer;
   user-select: none;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-popover .x-star-editor-option:hover {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-popover .x-star-editor-option:hover {
   background-color: #e6f7ff;
 }
 .x-star-editor-toolbar .x-star-editor-divider {
@@ -173,15 +173,15 @@
   display: flex;
   flex-wrap: wrap;
 }
-.x-star-editor-editor .x-star-editor-toolbar {
+.x-star-editor-editor > .x-star-editor-toolbar {
   width: 100%;
 }
-.x-star-editor-editor .x-star-editor-md-editor {
+.x-star-editor-editor > .x-star-editor-md-editor {
   flex: 1;
   border-right: none;
   border-bottom-right-radius: 0;
 }
-.x-star-editor-editor .x-star-editor-md-viewer {
+.x-star-editor-editor > .x-star-editor-md-viewer {
   padding: 0 1em;
   flex: 1;
   background-color: #fff;

package/dist/utils/handler.js

@@ -1,6 +1,6 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { createKeybindingsHandler } from 'tinykeys';
-import { createSelection, getRange } from "./container";
+import { createSelection } from "./container";
 
 /**
  * 处理函数上下文
@@ -116,56 +116,22 @@ export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHan
           type: 'redo'
         });
       },
-      ArrowLeft: function ArrowLeft(e) {
-        e.preventDefault();
-        var _getRange = getRange(selection),
-          startOffset = _getRange.startOffset,
-          endOffset = _getRange.endOffset;
-        if (startOffset < endOffset) {
-          dispatch({
-            type: 'select',
-            selection: createSelection(startOffset)
-          });
-        } else if (startOffset) {
-          dispatch({
-            type: 'select',
-            selection: createSelection(startOffset - 1)
-          });
-        }
-      },
-      'Shift+ArrowLeft': function ShiftArrowLeft(e) {
-        e.preventDefault();
+      ArrowRight: function ArrowRight(e) {
         var anchorOffset = selection.anchorOffset,
           focusOffset = selection.focusOffset;
-        if (focusOffset) {
+        if (anchorOffset === focusOffset && sourceCode[focusOffset] === '\n') {
+          e.preventDefault();
           dispatch({
             type: 'select',
-            selection: createSelection(anchorOffset, focusOffset - 1)
-          });
-        }
-      },
-      ArrowRight: function ArrowRight(e) {
-        e.preventDefault();
-        var _getRange2 = getRange(selection),
-          startOffset = _getRange2.startOffset,
-          endOffset = _getRange2.endOffset;
-        if (startOffset < endOffset) {
-          dispatch({
-            type: 'select',
-            selection: createSelection(endOffset)
-          });
-        } else if (startOffset < sourceCode.length) {
-          dispatch({
-            type: 'select',
-            selection: createSelection(startOffset + 1)
+            selection: createSelection(focusOffset + 1)
           });
         }
       },
       'Shift+ArrowRight': function ShiftArrowRight(e) {
-        e.preventDefault();
         var anchorOffset = selection.anchorOffset,
           focusOffset = selection.focusOffset;
-        if (focusOffset < sourceCode.length) {
+        if (sourceCode[focusOffset] === '\n') {
+          e.preventDefault();
           dispatch({
             type: 'select',
             selection: createSelection(anchorOffset, focusOffset + 1)

package/dist/utils/markdown.js

@@ -331,6 +331,9 @@ export var viewerRender = function viewerRender(root, schema) {
  */
 export var postViewerRender = function postViewerRender(root, options) {
   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', {

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

@@ -37,6 +37,10 @@ export interface XStarEditorProps {
      * 查看器属性
      */
     viewerProps?: Omit<XStarMdViewerProps, 'height' | 'value' | 'enableWebWorker'>;
+    /**
+     * 自定义查看器渲染函数
+     */
+    viewerRender?: (value: string) => React.ReactNode;
     /**
      * 文本变化回调函数
      */

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

@@ -6,17 +6,40 @@ import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 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 className = _ref.className,
+var ViewerRenderWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
     style = _ref.style,
-    height = _ref.height,
-    locale = _ref.locale,
-    initialValue = _ref.initialValue,
-    enableWebWorker = _ref.enableWebWorker,
-    editorProps = _ref.editorProps,
-    viewerProps = _ref.viewerProps,
-    _onChange = _ref.onChange,
-    onInsertFile = _ref.onInsertFile;
+    height = _ref.height;
+  var containerRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      getViewerContainer: function getViewerContainer() {
+        return containerRef.current;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames("".concat(prefix, "md-viewer"), className),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      height: height
+    })
+  }, children);
+});
+var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    style = _ref2.style,
+    height = _ref2.height,
+    locale = _ref2.locale,
+    _ref2$initialValue = _ref2.initialValue,
+    initialValue = _ref2$initialValue === void 0 ? '' : _ref2$initialValue,
+    enableWebWorker = _ref2.enableWebWorker,
+    editorProps = _ref2.editorProps,
+    viewerProps = _ref2.viewerProps,
+    viewerRender = _ref2.viewerRender,
+    _onChange = _ref2.onChange,
+    onInsertFile = _ref2.onInsertFile;
   var editorRef = useMdEditorRef();
   var viewerRef = useMdViewerRef();
   var containerRef = useRef(null);
@@ -94,10 +117,10 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       if (ignore || !editor || !viewer) {
         return;
       }
-      var _ref2 = e.currentTarget === editor ? [editor, viewer] : [viewer, editor],
-        _ref3 = _slicedToArray(_ref2, 2),
-        fromElement = _ref3[0],
-        toElement = _ref3[1];
+      var _ref3 = e.currentTarget === editor ? [editor, viewer] : [viewer, editor],
+        _ref4 = _slicedToArray(_ref3, 2),
+        fromElement = _ref4[0],
+        toElement = _ref4[1];
       var _getOffsetTops = getOffsetTops(fromElement, toElement),
         _getOffsetTops2 = _slicedToArray(_getOffsetTops, 2),
         fromOffsetTops = _getOffsetTops2[0],
@@ -149,7 +172,12 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
     },
     onInsertFile: onInsertFile
-  })), /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
+  })), viewerRender ? /*#__PURE__*/React.createElement(ViewerRenderWrapper, {
+    ref: viewerRef,
+    className: 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({
     ref: viewerRef
   }, viewerProps, {
     height: height,

package/package.json

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