@seafile/sdoc-editor 0.1.58 → 0.1.60

package/dist/assets/css/simple-editor.css

@@ -12,6 +12,8 @@
   margin-left: 0.5rem;
   color: #999;
   cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
 }
 
 .sdoc-editor-page-header .doc-info .doc-icon:hover {

package/dist/basic-sdk/assets/css/code-block.css

@@ -1,22 +1,116 @@
-.code-block-container {
+.sdoc-code-block-container {
   position: relative;
 }
 
-.language-type {
-  font-size: 12px;
+.sdoc-code-block-pre {
+  border: 1px solid #ccc;
+}
+
+.sdoc-code-block-pre .sdoc-code-no-wrap {
+  white-space: nowrap;
+}
+
+.sdoc-code-block-pre .sdoc-code-no-wrap .sdoc-code-line > span {
+  white-space: pre;
+}
+
+.sdoc-code-block-code .sdoc-code-line {
+  position: relative;
+  padding-left: 5px;
+}
+
+.sdoc-code-block-code .sdoc-code-line .sdoc-code-line-index {
   position: absolute;
-  right: 0;
-  top: 0; 
-}
-
-.language-type select {
-  background-color: #eeeeee;
-  cursor: pointer;
-  appearance: none;
-  outline: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  border-radius: 4px;
-  padding: 0 5px; 
+  left: -10px;
+  color: #ccc;
+  width: 10px;
+  height: 10px;
+  caret-color: transparent;
+  pointer-events: none;
+}
+
+.sdoc-code-line
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.sdoc-code-line
+.token.punctuation {
+  color: #999;
+}
+
+.sdoc-code-line
+.token.namespace {
+  opacity: .7;
+}
+
+.sdoc-code-line
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+  padding: 0rem;
+}
+
+.sdoc-code-line
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.sdoc-code-line
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+}
+
+.sdoc-code-line
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.sdoc-code-line
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.sdoc-code-line
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.sdoc-code-line
+.sdoc-code-line
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.sdoc-code-line
+.token.italic {
+  font-style: italic;
+}
+
+.sdoc-code-line
+.token.entity {
+  cursor: help;
 }

package/dist/basic-sdk/editor.js

@@ -9,9 +9,11 @@ import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { useCursors } from './cursor/use-cursors';
+import { useHighlightDecorate } from './highlight-decorate';
 import EventBus from './utils/event-bus';
 import { EXTERNAL_EVENT } from '../constants';
 import { isAllInTable } from './extension/plugins/table/helpers';
+import { SetNodeToDecorations } from './highlight-decorate/setNodeToDecorations';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
@@ -42,6 +44,8 @@ var SDocEditor = function SDocEditor(_ref) {
     setMenuPosition = _useState6[1];
   var _useCursors = useCursors(editor),
     cursors = _useCursors.cursors;
+  var _useHighlightDecorate = useHighlightDecorate(editor),
+    highlightDecorate = _useHighlightDecorate.highlightDecorate;
 
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -100,20 +104,22 @@ var SDocEditor = function SDocEditor(_ref) {
     doc: slateValue,
     docUuid: config.docUuid
   }), /*#__PURE__*/React.createElement("div", {
-    className: "flex-fill o-auto sdoc-editor-article-container"
+    className: "flex-fill o-auto sdoc-editor-article-container",
+    id: "sdoc-editor-article-container"
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: slateValue,
     onChange: onChange
   }, /*#__PURE__*/React.createElement("div", {
     className: "article"
-  }, /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: eventProxy.onKeyDown,
     cursors: cursors,
     onContextMenu: onContextMenu,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    decorate: highlightDecorate
   })))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
     editor: editor,
     contextMenuPosition: menuPosition

package/dist/basic-sdk/extension/menu/menu.css

@@ -8,7 +8,8 @@
 
 .menu-group .menu-group-item {
   width: 30px;
-  height: 100%;
+  height: 30px;
+  line-height: 30px;
   margin-right: 10px;
   border: 1px solid transparent;
   color: #555555;

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { Transforms, Editor, Node } from '@seafile/slate';
-import { CODE_BLOCK, PARAGRAPH } from '../../constants';
+import slugid from 'slugid';
+import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
 import { getNodeType, getSelectedNodeByType, getSelectedElems } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   var selection = editor.selection;
@@ -25,13 +26,6 @@ export var getSelectCodeElem = function getSelectCodeElem(editor) {
   if (codeNode == null) return null;
   return codeNode;
 };
-export var updateLanguageSetting = function updateLanguageSetting(editor, language) {
-  Transforms.setNodes(editor, {
-    language: language
-  }, {
-    mode: 'highest'
-  });
-};
 export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
   // Summarizes the strings for the selected highest-level node
   var strArr = [];
@@ -65,16 +59,21 @@ export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
   // Insert the codeBlockNode node
   var newCodeBlockNode = {
     type: CODE_BLOCK,
+    language: language,
+    style: {
+      white_space: 'nowrap' // default nowrap
+    },
+
     children: [{
-      type: 'code-line',
+      id: slugid.nice(),
+      type: CODE_LINE,
       children: [{
         text: strArr.join('\n')
       } // Select the plain text of the node
       ]
-    }],
-
-    language: language
+    }]
   };
+
   Transforms.insertNodes(editor, newCodeBlockNode, {
     mode: 'highest'
   });

package/dist/basic-sdk/extension/plugins/code-block/menu/index.js

@@ -36,7 +36,7 @@ var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
         changeToPlainText(editor);
       } else {
         // It is not currently in code-block, so it needs to be converted to code-block
-        changeToCodeBlock(editor, 'text');
+        changeToCodeBlock(editor, 'plaintext');
       }
       focusEditor(editor);
     };

package/dist/basic-sdk/extension/plugins/code-block/plugin.js

@@ -1,46 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Transforms, Node } from '@seafile/slate';
-import { getSelectedNodeByType, getNodeType, isLastNode, genEmptyParagraph } from '../../core';
+import { Transforms } from '@seafile/slate';
+import { getNodeType, isLastNode, genEmptyParagraph } from '../../core';
 import { CODE_BLOCK } from '../../constants';
-var getLastTextLineBeforeSelection = function getLastTextLineBeforeSelection(codeNode, editor) {
-  var selection = editor.selection;
-  if (selection == null) return '';
-  var codeText = Node.string(codeNode);
-  var anchorOffset = selection.anchor.offset;
-  var textBeforeAnchor = codeText.slice(0, anchorOffset); // The text before the selection
-  var arr = textBeforeAnchor.split('\n'); // text before selection, split by line break
-  var length = arr.length;
-  if (length === 0) return '';
-  return arr[length - 1];
-};
 var withCodeBlock = function withCodeBlock(editor) {
-  var insertBreak = editor.insertBreak,
-    normalizeNode = editor.normalizeNode;
+  var normalizeNode = editor.normalizeNode;
   var newEditor = editor;
 
-  // Rewrite insertBreak
-  newEditor.insertBreak = function () {
-    var codeNode = getSelectedNodeByType(newEditor, CODE_BLOCK);
-    if (codeNode == null) {
-      insertBreak(); // Perform the default line feed
-      return;
-    }
-
-    // When press Enter, the space is automatically inserted according to the space in the current line
-    var lastLineBeforeSelection = getLastTextLineBeforeSelection(codeNode, newEditor);
-    if (lastLineBeforeSelection) {
-      var arr = lastLineBeforeSelection.match(/^\s+/); // The space at the beginning of a line
-      if (arr != null && arr[0] != null) {
-        var spaces = arr[0];
-        newEditor.insertText("\n".concat(spaces)); // Insert a space after a newline
-        return;
-      }
-    }
-
-    // Normal line feed
-    newEditor.insertText('\n');
-  };
-
   // Rewrite normalizeNode
   newEditor.normalizeNode = function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),

package/dist/basic-sdk/extension/plugins/code-block/render-elem.js

@@ -1,104 +1,128 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import { updateLanguageSetting } from './helpers';
-import { getSelectedNodeByType } from '../../core';
-import { CODE_BLOCK } from '../../constants';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import CodeBlockHoverMenu from '../../../../components/code-block-hover-menu';
 import '../../../assets/css/code-block.css';
-var LanguageSet = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LanguageSet, _React$PureComponent);
-  var _super = _createSuper(LanguageSet);
-  function LanguageSet() {
-    var _this;
-    _classCallCheck(this, LanguageSet);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var CodeBlock = function CodeBlock(_ref) {
+  var codeBlockProps = _ref.codeBlockProps;
+  var codeBlockRef = useRef();
+  var attributes = codeBlockProps.attributes,
+    children = codeBlockProps.children,
+    element = codeBlockProps.element;
+  var _element$style = element.style,
+    style = _element$style === void 0 ? {
+      white_space: 'nowrap'
+    } : _element$style;
+  var white_space = style.white_space;
+  var editor = useSlateStatic();
+  var _useState = useState({
+      top: '',
+      left: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuPosition = _useState2[0],
+    setMenuPosition = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showHoverMenu = _useState4[0],
+    setShowHoverMenu = _useState4[1];
+  var onChangeLanguage = useCallback(function (lang) {
+    var language = lang.value;
+    var path = ReactEditor.findPath(editor, element);
+    Transforms.setNodes(editor, {
+      language: language
+    }, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onChangeAutoLineWrap = useCallback(function (autoWrap) {
+    var path = ReactEditor.findPath(editor, element);
+    var newStyle = _objectSpread(_objectSpread({}, style), {}, {
+      white_space: autoWrap
+    });
+    Transforms.setNodes(editor, {
+      style: newStyle
+    }, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onDeleteCodeBlock = useCallback(function () {
+    var path = ReactEditor.findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onMouseEnter = useCallback(function (e) {
+    if (codeBlockRef.current) {
+      var _codeBlockRef$current = codeBlockRef.current.getBoundingClientRect(),
+        top = _codeBlockRef$current.top,
+        left = _codeBlockRef$current.left;
+      var menuTop = top - 42; // top = top distance - menu height
+      var newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+
+      setMenuPosition(newMenuPosition);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.stopPropagation = function (event) {
-      event.stopPropagation();
-    };
-    return _this;
-  }
-  _createClass(LanguageSet, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // Compat chrome browser in windows, stop propagation to prevent emit the click event added to document
-      this.selector.addEventListener('click', this.stopPropagation);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.selector.removeEventListener('click', this.stopPropagation);
+    setShowHoverMenu(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onMouseLeave = useCallback(function (e) {
+    setShowHoverMenu(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = useCallback(function (e) {
+    if (e.currentTarget.scrollTop) {
+      var _codeBlockRef$current2 = codeBlockRef.current.getBoundingClientRect(),
+        top = _codeBlockRef$current2.top,
+        left = _codeBlockRef$current2.left;
+      var menuTop = top - 42; // top = top distance - menu height
+      var newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+
+      setMenuPosition(newMenuPosition);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        language = _this$props.language,
-        onChange = _this$props.onChange;
-      return /*#__PURE__*/React.createElement("div", {
-        contentEditable: false,
-        className: "language-type"
-      }, /*#__PURE__*/React.createElement("select", {
-        ref: function ref(_ref) {
-          return _this2.selector = _ref;
-        },
-        value: language,
-        name: "language",
-        onInput: function onInput(event) {
-          return event.stopPropagation();
-        },
-        onChange: onChange
-      }, /*#__PURE__*/React.createElement("option", {
-        value: "none"
-      }, "Text")));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (showHoverMenu) {
+      document.getElementById('sdoc-editor-article-container').addEventListener('scroll', onScroll);
+    } else {
+      document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
     }
-  }]);
-  return LanguageSet;
-}(React.PureComponent);
-var CodeBlock = /*#__PURE__*/function (_React$PureComponent2) {
-  _inherits(CodeBlock, _React$PureComponent2);
-  var _super2 = _createSuper(CodeBlock);
-  function CodeBlock() {
-    var _this3;
-    _classCallCheck(this, CodeBlock);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    _this3.onChange = function (event) {
-      var editor = _this3.props.editor;
-      var language = event.target.value;
-      updateLanguageSetting(editor, language);
+    return function () {
+      document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
     };
-    return _this3;
-  }
-  _createClass(CodeBlock, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        codeBlockProps = _this$props2.codeBlockProps,
-        editor = _this$props2.editor;
-      var attributes = codeBlockProps.attributes,
-        children = codeBlockProps.children,
-        element = codeBlockProps.element;
-      var language = element.language;
-      var codeNode = getSelectedNodeByType(editor, CODE_BLOCK);
-      return /*#__PURE__*/React.createElement("div", {
-        className: 'code-block-container'
-      }, /*#__PURE__*/React.createElement("pre", attributes, children), (codeNode === null || codeNode === void 0 ? void 0 : codeNode.id) === (element === null || element === void 0 ? void 0 : element.id) && /*#__PURE__*/React.createElement(LanguageSet, {
-        language: language,
-        onChange: this.onChange
-      }));
-    }
-  }]);
-  return CodeBlock;
-}(React.PureComponent);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showHoverMenu]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: codeBlockRef,
+    className: 'sdoc-code-block-container',
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement("pre", Object.assign({
+    className: 'sdoc-code-block-pre'
+  }, attributes), /*#__PURE__*/React.createElement("code", {
+    className: "sdoc-code-block-code ".concat(white_space === 'nowrap' ? 'sdoc-code-no-wrap' : '')
+  }, children)), showHoverMenu && /*#__PURE__*/React.createElement(CodeBlockHoverMenu, {
+    menuPosition: menuPosition,
+    onChangeLanguage: onChangeLanguage,
+    language: element.language,
+    style: element.style || {
+      white_space: 'nowrap'
+    },
+    onChangeAutoLineWrap: onChangeAutoLineWrap,
+    onDeleteCodeBlock: onDeleteCodeBlock
+  }));
+};
 export var renderCodeBlock = function renderCodeBlock(props, editor) {
   return /*#__PURE__*/React.createElement(CodeBlock, {
     codeBlockProps: _objectSpread({}, props),

package/dist/basic-sdk/extension/plugins/text-align/menu/index.js

@@ -70,7 +70,6 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var t = this.props.t;
       var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
       var caretIconClass = "caret-icon sdocfont sdoc-".concat(isDropdownMenuOpen ? 'caret-up' : 'drop-down');
       var curType = this.getCurrentType();

package/dist/basic-sdk/extension/plugins/text-align/menu/style.css

@@ -26,6 +26,7 @@
   align-items: center;
   font-size: 14px;
   cursor: pointer;
+  line-height: 1;
 }
 
 .align-menu .align-toggle .caret-icon {

package/dist/basic-sdk/extension/plugins/text-style/render-elem.js

@@ -1,9 +1,13 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text"];
 import React from 'react';
 import Caret from './caret';
 var renderText = function renderText(props, editor) {
   var attributes = props.attributes,
     children = props.children,
     leaf = props.leaf;
+  var text = leaf.text,
+    rest = _objectWithoutProperties(leaf, _excluded);
   var markedChildren = React.cloneElement(children);
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
@@ -49,7 +53,8 @@ var renderText = function renderText(props, editor) {
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id
   }, attributes, {
-    style: style
+    style: style,
+    className: Object.keys(rest).join(' ')
   }), leaf.isCaret ? /*#__PURE__*/React.createElement(Caret, leaf) : null, markedChildren);
 };
 export default renderText;

package/dist/basic-sdk/extension/render/render-element.js

@@ -3,9 +3,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { Node } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, IMAGE, ELEMENT_TYPE } from '../constants';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin } from '../plugins';
-import { Placeholder } from '../core';
+import { Placeholder, findPath } from '../core';
 var CustomElement = function CustomElement(props) {
   var editor = useSlateStatic();
   var attributes = props.attributes,
@@ -92,6 +92,16 @@ var CustomElement = function CustomElement(props) {
           renderCodeBlock = _CodeBlockPlugin$rend[0];
         return renderCodeBlock(props, editor);
       }
+    case CODE_LINE:
+      {
+        var path = findPath(editor, element);
+        var lineNumber = path.at(-1) + 1;
+        return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+          className: 'sdoc-code-line'
+        }), lineNumber && /*#__PURE__*/React.createElement("span", {
+          className: "sdoc-code-line-index"
+        }, lineNumber), children);
+      }
     case IMAGE:
       {
         var _ImagePlugin$renderEl = _slicedToArray(ImagePlugin.renderElements, 1),

package/dist/basic-sdk/highlight-decorate/index.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback } from 'react';
+import { Element } from '@seafile/slate';
+import { CODE_LINE } from '../extension/constants';
+import { SetNodeToDecorations } from './setNodeToDecorations';
+export var useHighlightDecorate = function useHighlightDecorate(editor) {
+  var highlightDecorate = useCallback(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      node = _ref2[0],
+      path = _ref2[1];
+    if (Element.isElement(node) && node.type === CODE_LINE) {
+      var ranges = editor.nodeToDecorations.get(node) || [];
+      return ranges;
+    }
+    return [];
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [editor.nodeToDecorations]);
+  return {
+    highlightDecorate: highlightDecorate
+  };
+};

package/dist/basic-sdk/highlight-decorate/setNodeToDecorations.js

@@ -0,0 +1,104 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { Node, Element, Editor } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import Prism, { normalizeTokens, normalizeTokensByLanguageType } from '../utils/prismjs';
+import { CODE_BLOCK } from '../extension/constants';
+var mergeMaps = function mergeMaps() {
+  var map = new Map();
+  for (var _len = arguments.length, maps = new Array(_len), _key = 0; _key < _len; _key++) {
+    maps[_key] = arguments[_key];
+  }
+  for (var _i = 0, _maps = maps; _i < _maps.length; _i++) {
+    var m = _maps[_i];
+    var _iterator = _createForOfIteratorHelper(m),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        map.set.apply(map, _toConsumableArray(item));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  return map;
+};
+var getChildNodeToDecorations = function getChildNodeToDecorations(_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    block = _ref2[0],
+    blockPath = _ref2[1];
+  var nodeToDecorations = new Map();
+  var text = block.children.map(function (line) {
+    return Node.string(line);
+  }).join('\n');
+  var language = block.language || 'plaintext'; // default 'plaintext'
+  var tokens = Prism.tokenize(text, Prism.languages[language]);
+  if (Object.keys(normalizeTokensByLanguageType).includes(language)) {
+    tokens = normalizeTokensByLanguageType[language](tokens);
+  }
+  var normalizedTokens = normalizeTokens(tokens); // make tokens flat and grouped by line
+  var blockChildren = block.children;
+  for (var index = 0; index < normalizedTokens.length; index++) {
+    var _tokens = normalizedTokens[index];
+    var element = blockChildren[index];
+    if (element) {
+      if (!nodeToDecorations.has(element)) {
+        nodeToDecorations.set(element, []);
+      }
+    }
+    var start = 0;
+    var _iterator2 = _createForOfIteratorHelper(_tokens),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var token = _step2.value;
+        var length = token.content.length;
+        if (!length) {
+          continue;
+        }
+        var end = start + length;
+        var path = [].concat(_toConsumableArray(blockPath), [index, 0]);
+        var range = _objectSpread({
+          anchor: {
+            path: path,
+            offset: start
+          },
+          focus: {
+            path: path,
+            offset: end
+          },
+          token: true
+        }, Object.fromEntries(token.types.map(function (type) {
+          return [type, true];
+        })));
+        if (nodeToDecorations.get(element)) {
+          nodeToDecorations.get(element).push(range);
+        }
+        start = end;
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  }
+  return nodeToDecorations;
+};
+export var SetNodeToDecorations = function SetNodeToDecorations() {
+  var editor = useSlateStatic();
+  var blockEntries = Array.from(Editor.nodes(editor, {
+    at: [],
+    mode: 'highest',
+    match: function match(n) {
+      return Element.isElement(n) && n.type === CODE_BLOCK;
+    }
+  }));
+  var nodeToDecorations = mergeMaps.apply(void 0, _toConsumableArray(blockEntries.map(getChildNodeToDecorations)));
+  editor.nodeToDecorations = nodeToDecorations;
+  return null;
+};

package/dist/basic-sdk/utils/prismjs.js

@@ -0,0 +1,172 @@
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+
+// languages
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-lua';
+var newlineRe = /\r\n|\r|\n/;
+export var genCodeLangs = function genCodeLangs() {
+  return [{
+    text: 'Plain Text',
+    value: 'plaintext'
+  }, {
+    text: 'CSS',
+    value: 'css'
+  }, {
+    text: 'HTML',
+    value: 'html'
+  }, {
+    text: 'XML',
+    value: 'xml'
+  }, {
+    text: 'Javascript',
+    value: 'javascript'
+  }, {
+    text: 'Typescript',
+    value: 'typescript'
+  }, {
+    text: 'Go',
+    value: 'go'
+  }, {
+    text: 'PHP',
+    value: 'php'
+  }, {
+    text: 'C',
+    value: 'c'
+  }, {
+    text: 'Python',
+    value: 'python'
+  }, {
+    text: 'Java',
+    value: 'java'
+  }, {
+    text: 'C++',
+    value: 'cpp'
+  }, {
+    text: 'C#',
+    value: 'csharp'
+  }, {
+    text: 'SQL',
+    value: 'sql'
+  }, {
+    text: 'Ruby',
+    value: 'ruby'
+  }, {
+    text: 'Swift',
+    value: 'swift'
+  }, {
+    text: 'Bash',
+    value: 'bash'
+  }];
+};
+export var normalizeTokensByLanguageType = {
+  'php': function php(tokens) {
+    tokens.forEach(function (token) {
+      if (['<?', '?>'].includes(token.content)) {
+        token.type = 'operator';
+        token.alias = '';
+      }
+    });
+    return tokens;
+  }
+};
+var normalizeEmptyLines = function normalizeEmptyLines(line) {
+  if (line.length === 0) {
+    line.push({
+      types: ['plain'],
+      content: '\n',
+      empty: true
+    });
+  } else if (line.length === 1 && line[0].content === '') {
+    line[0].content = '\n';
+    line[0].empty = true;
+  }
+};
+var appendTypes = function appendTypes(types, add) {
+  var typesSize = types.length;
+  if (typesSize > 0 && types[typesSize - 1] === add) {
+    return types;
+  }
+  return types.concat(add);
+};
+export var normalizeTokens = function normalizeTokens(tokens) {
+  var typeArrStack = [[]];
+  var tokenArrStack = [tokens];
+  var tokenArrIndexStack = [0];
+  var tokenArrSizeStack = [tokens.length];
+  var i = 0;
+  var stackIndex = 0;
+  var currentLine = [];
+  var acc = [currentLine];
+  while (stackIndex > -1) {
+    while ((i = tokenArrIndexStack[stackIndex]++) < tokenArrSizeStack[stackIndex]) {
+      var content = void 0;
+      var types = typeArrStack[stackIndex];
+      var tokenArr = tokenArrStack[stackIndex];
+      var token = tokenArr[i];
+
+      // Determine content and append type to types if necessary
+      if (typeof token === 'string') {
+        types = stackIndex > 0 ? types : ['plain'];
+        content = token;
+      } else {
+        types = appendTypes(types, token.type);
+        if (token.alias) {
+          types = appendTypes(types, token.alias);
+        }
+        content = token.content;
+      }
+
+      // If token.content is an array, increase the stack depth and repeat this while-loop
+      if (typeof content !== 'string') {
+        stackIndex++;
+        typeArrStack.push(types);
+        tokenArrStack.push(content);
+        tokenArrIndexStack.push(0);
+        tokenArrSizeStack.push(content.length);
+        continue;
+      }
+
+      // Split by newlines
+      var splitByNewlines = content.split(newlineRe);
+      var newlineCount = splitByNewlines.length;
+      currentLine.push({
+        types: types,
+        content: splitByNewlines[0]
+      });
+
+      // Create a new line for each string on a new line
+      for (var _i = 1; _i < newlineCount; _i++) {
+        normalizeEmptyLines(currentLine);
+        acc.push(currentLine = []);
+        currentLine.push({
+          types: types,
+          content: splitByNewlines[_i]
+        });
+      }
+    }
+
+    // Decreate the stack depth
+    stackIndex--;
+    typeArrStack.pop();
+    tokenArrStack.pop();
+    tokenArrIndexStack.pop();
+    tokenArrSizeStack.pop();
+  }
+  normalizeEmptyLines(currentLine);
+  return acc;
+};
+export default Prism;

package/dist/components/code-block-hover-menu/index.css

@@ -0,0 +1,84 @@
+.sdoc-code-block-hover-menu-container {
+  position: absolute;
+  height: 42px;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container {
+  height: 36px;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 5px;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+  z-index: 1000;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .active {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .op-item {
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}
+
+.sdoc-langs-list-container {
+  position: absolute;
+  top: 36px;
+  left: 8px;
+  width: 90%;
+  height: 400px;
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-langs-list-container .langs-list-ul {
+  list-style: none;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li {
+  padding: 7px;
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li:hover {
+  background: #f1f1f1;;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li .active {
+  background: #f1f1f1;;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li .li-check-mark {
+  opacity: 0;
+  padding: 0 10px;
+}
+
+.sdoc-langs-list-container .langs-list-ul .langs-list-li .li-checked {
+  opacity: 1;
+}

package/dist/components/code-block-hover-menu/index.js

@@ -0,0 +1,110 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { withTranslation } from 'react-i18next';
+import { genCodeLangs } from '../../basic-sdk/utils/prismjs';
+import './index.css';
+var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
+  var style = _ref.style,
+    language = _ref.language,
+    menuPosition = _ref.menuPosition,
+    onChangeLanguage = _ref.onChangeLanguage,
+    onChangeAutoLineWrap = _ref.onChangeAutoLineWrap,
+    onDeleteCodeBlock = _ref.onDeleteCodeBlock,
+    t = _ref.t;
+  var _style$white_space = style.white_space,
+    white_space = _style$white_space === void 0 ? 'nowrap' : _style$white_space;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowlangsList = _useState2[0],
+    setIsShowlangsList = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedLanguageText = _useState4[0],
+    setSelectedLanguageText = _useState4[1];
+  var onHiddenLangsList = useCallback(function () {
+    setIsShowlangsList(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    window.addEventListener('click', onHiddenLangsList);
+    return function () {
+      window.removeEventListener('click', onHiddenLangsList);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onShowLangs = useCallback(function (e) {
+    e.stopPropagation();
+    setIsShowlangsList(!isShowlangsList);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowlangsList]);
+  var onAutoLineWrap = useCallback(function () {
+    if (white_space === 'normal') {
+      onChangeAutoLineWrap('nowrap');
+    } else {
+      onChangeAutoLineWrap('normal');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [white_space]);
+  var onDelete = useCallback(function () {
+    onDeleteCodeBlock();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onSelectLang = useCallback(function (lang) {
+    var text = lang.text;
+    setSelectedLanguageText(text);
+    onChangeLanguage(lang);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    // Compatible with legacy code
+    var selectedLanguage = language;
+    if (language === 'text') {
+      selectedLanguage = 'plaintext';
+    }
+    var selectedLanguageText = genCodeLangs().find(function (item) {
+      return item.value === selectedLanguage;
+    }).text;
+    setSelectedLanguageText(selectedLanguageText);
+  }, [language]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "op-item ".concat(isShowlangsList ? 'active' : ''),
+    onClick: onShowLangs
+  }, /*#__PURE__*/React.createElement("span", null, selectedLanguageText), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-drop-down ml-1 icon-font"
+  })), /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "op-item ".concat(white_space === 'normal' ? 'active' : ''),
+    onClick: onAutoLineWrap
+  }, /*#__PURE__*/React.createElement("span", null, t('Auto_wrap'))), /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: 'op-item',
+    onClick: onDelete
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-delete icon-font"
+  })), isShowlangsList && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-langs-list-container"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "langs-list-ul"
+  }, genCodeLangs().map(function (item) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "langs-list-li ".concat(selectedLanguageText === item.text ? 'active' : ''),
+      id: item.value,
+      key: item.value,
+      onClick: function onClick() {
+        onSelectLang(item);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "li-check-mark ".concat(selectedLanguageText === item.text ? 'li-checked' : '')
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-square icon-font"
+    })), item.text);
+  })))))), document.body));
+};
+export default withTranslation('sdoc-editor')(CodeBlockHoverMenu);

package/dist/components/doc-info/index.js

@@ -22,21 +22,34 @@ var DocInfo = /*#__PURE__*/function (_React$Component) {
       var eventBus = EventBus.getInstance();
       eventBus.dispatch(EXTERNAL_EVENT.INTERNAL_LINK_CLICK);
     };
+    _this.toggleStar = function () {
+      var eventBus = EventBus.getInstance();
+      eventBus.dispatch(EXTERNAL_EVENT.TOGGLE_STAR);
+    };
     return _this;
   }
   _createClass(DocInfo, [{
     key: "render",
     value: function render() {
-      var t = this.props.t;
+      var _this$props = this.props,
+        t = _this$props.t,
+        isStarred = _this$props.isStarred;
       var docName = context.getSetting('docName');
-      var isShowInternalLink = context.getSetting('isShowInternalLink');
+      var _context$getSettings = context.getSettings(),
+        isShowInternalLink = _context$getSettings.isShowInternalLink,
+        isStarIconShown = _context$getSettings.isStarIconShown;
       return /*#__PURE__*/React.createElement("div", {
         className: "doc-info"
       }, /*#__PURE__*/React.createElement("div", {
         className: "doc-name"
-      }, docName), /*#__PURE__*/React.createElement("span", {
+      }, docName), isStarIconShown && /*#__PURE__*/React.createElement("button", {
+        className: "doc-icon sdocfont ".concat(isStarred ? 'sdoc-starred' : 'sdoc-unstarred', " border-0 p-0 bg-transparent"),
+        title: isStarred ? t('starred') : t('unstarred'),
+        "aria-label": isStarred ? t('Unstar') : t('Star'),
+        onClick: this.toggleStar
+      }), isShowInternalLink && /*#__PURE__*/React.createElement("span", {
         className: "doc-icon"
-      }, isShowInternalLink && /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         className: "internal-link sdocfont sdoc-link",
         title: t('internal_link'),
         onClick: this.onInternalLinkClick

package/dist/constants/index.js

@@ -1,4 +1,5 @@
 export var EXTERNAL_EVENT = {
   INTERNAL_LINK_CLICK: 'internal_link_click',
+  TOGGLE_STAR: 'toggle_star',
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range'
 };

package/dist/pages/simple-editor.js

@@ -112,7 +112,9 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
         }, errorMessage);
       }
       var isOpenSocket = context.getSetting('isOpenSocket');
-      return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, null), /*#__PURE__*/React.createElement(DocOperations, null)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+      return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, {
+        isStarred: this.props.isStarred
+      }), /*#__PURE__*/React.createElement(DocOperations, null)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
         config: context.getEditorConfig(),
         document: document,
         isOpenSocket: isOpenSocket,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -17,6 +17,7 @@
     "is-url": "^1.2.4",
     "lodash.throttle": "4.1.1",
     "randomcolor": "0.6.2",
+    "prismjs": "^1.29.0",
     "react-cookies": "0.1.1",
     "reactstrap": "8.9.0",
     "slugid": "3.2.0",
@@ -149,8 +150,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

package/public/locales/en/sdoc-editor.json

@@ -247,5 +247,10 @@
   "Insert_below": "Insert below",
   "Insert_above": "Insert above",
   "Insert_on_the_right": "Insert on the right",
-  "Insert_on_the_left": "Insert on the left"
+  "Insert_on_the_left": "Insert on the left",
+  "starred": "starred",
+  "unstarred": "unstarred",
+  "Star": "Star",
+  "Unstar": "Unstar",
+  "Auto_wrap": "Auto wrap"
 }

package/public/locales/zh-CN/sdoc-editor.json

@@ -244,5 +244,6 @@
   "Insert_above": "在上方插入",
   "Insert_below": "在下方插入",
   "Insert_on_the_right": "在右侧插入",
-  "Insert_on_the_left": "在左侧插入"
+  "Insert_on_the_left": "在左侧插入",
+  "Auto_wrap": "自动换行"
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,12 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-caret-up" unicode="&#58934;" d="M550.4 588.8l265.6-336c32-38.4 6.4-102.4-38.4-102.4H246.4c-44.8 0-70.4 60.8-38.4 102.4l265.6 336c19.2 25.6 57.6 25.6 76.8 0z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-starred" unicode="&#58941;" d="M995.2 412.8c54.4 54.4 25.6 153.6-51.2 163.2l-192 28.8c-28.8 3.2-57.6 25.6-70.4 54.4l-86.4 182.4C579.2 876.8 544 896 512 896s-67.2-19.2-83.2-54.4l-86.4-182.4c-12.8-28.8-38.4-48-70.4-51.2l-192-28.8C3.2 566.4-25.6 470.4 28.8 416l140.8-140.8c22.4-22.4 32-54.4 25.6-86.4l-32-201.6c-9.6-64 38.4-112 92.8-112 12.8 0 28.8 3.2 41.6 12.8l172.8 96c12.8 6.4 28.8 9.6 41.6 9.6 16 0 28.8-3.2 41.6-9.6l172.8-96c12.8-6.4 28.8-12.8 41.6-12.8 54.4 0 102.4 51.2 92.8 112l-32 201.6c-6.4 32 3.2 64 25.6 86.4l140.8 137.6z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-unstarred" unicode="&#58942;" d="M816 368c-60.8-60.8-86.4-150.4-73.6-236.8L768-32l-137.6 76.8c-35.2 19.2-76.8 32-118.4 32s-83.2-9.6-118.4-32L256-32l25.6 163.2c12.8 86.4-12.8 176-73.6 236.8L96 483.2l153.6 22.4c83.2 12.8 153.6 67.2 192 147.2L512 800l70.4-147.2c38.4-80 108.8-134.4 192-147.2l153.6-22.4-112-115.2z m179.2 44.8c54.4 54.4 25.6 153.6-51.2 163.2l-192 28.8c-28.8 3.2-57.6 25.6-70.4 54.4l-86.4 182.4C579.2 876.8 544 896 512 896s-67.2-19.2-83.2-54.4l-86.4-182.4c-12.8-28.8-38.4-48-70.4-51.2l-192-28.8C3.2 566.4-25.6 470.4 28.8 416l140.8-140.8c22.4-22.4 32-54.4 25.6-86.4l-32-201.6c-9.6-64 38.4-112 92.8-112 12.8 0 28.8 3.2 41.6 12.8l172.8 96c12.8 6.4 28.8 9.6 41.6 9.6 16 0 28.8-3.2 41.6-9.6l172.8-96c12.8-6.4 28.8-12.8 41.6-12.8 54.4 0 102.4 51.2 92.8 112l-32 201.6c-6.4 32 3.2 64 25.6 86.4l140.8 137.6z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-more" unicode="&#58938;" d="M259.2 380.8c0-54.4-41.6-96-96-96s-96 41.6-96 96 41.6 96 96 96 96-44.8 96-96z m352 6.4c0-54.4-41.6-96-96-96s-96 41.6-96 96 41.6 96 96 96 96-41.6 96-96z m352 0c0-54.4-41.6-96-96-96s-96 41.6-96 96 41.6 96 96 96 96-41.6 96-96z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-comment" unicode="&#58939;" d="M886.4 800C928 800 960 768 960 726.4v-537.6c0-41.6-32-73.6-73.6-73.6h-192l-156.8-140.8c-12.8-12.8-35.2-12.8-48 0l-156.8 140.8h-192c-41.6 0-73.6 32-73.6 73.6V726.4C64 768 96 800 137.6 800h748.8z m0-73.6H137.6v-537.6h220.8l153.6-137.6 153.6 137.6h220.8V726.4zM665.6 480c19.2 0 38.4-16 38.4-38.4 0-19.2-16-35.2-38.4-38.4h-310.4c-19.2 0-38.4 16-38.4 38.4 0 19.2 16 35.2 38.4 38.4h310.4z m-115.2-192c0-19.2-16-38.4-38.4-38.4-19.2 0-35.2 16-38.4 38.4V598.4c0 19.2 16 38.4 38.4 38.4 19.2 0 35.2-16 38.4-38.4V288z"  horiz-adv-x="1024" />
@@ -30,8 +36,6 @@
       
       <glyph glyph-name="sdoc-delete-table" unicode="&#58935;" d="M800 352c124.8 0 224-102.4 224-220.8S921.6-96 800-96s-224 102.4-224 220.8 99.2 227.2 224 227.2z m128 448c35.2 0 60.8-25.6 64-60.8v-396.8c-35.2 32-80 54.4-128 67.2V544h-288v-160h92.8C576 336 512 240 512 128c0-60.8 19.2-115.2 48-160H96c-35.2 0-60.8 25.6-64 60.8V736c0 35.2 25.6 60.8 60.8 64H928z m-38.4-640h-176c-25.6 0-38.4-12.8-38.4-32 0-12.8 19.2-32 38.4-32h176c25.6 0 38.4 12.8 38.4 32 0 12.8-16 32-38.4 32zM448 256H160v-160h288v160z m0 288H160v-160h288v160z"  horiz-adv-x="1024" />
       
-      <glyph glyph-name="sdoc-caret-up" unicode="&#58934;" d="M870.4 137.6H153.6c-51.2 0-73.6 60.8-38.4 96L473.6 592c22.4 22.4 57.6 22.4 80 0L912 233.6c35.2-38.4 9.6-96-41.6-96z"  horiz-adv-x="1024" />
-      
       <glyph glyph-name="sdoc-align-right" unicode="&#58928;" d="M393.6 697.6V771.2c0 16 12.8 28.8 28.8 28.8h476.8c16 0 28.8-12.8 28.8-28.8v-73.6c0-16-12.8-28.8-28.8-28.8H422.4c-16 0-28.8 12.8-28.8 28.8z m-268.8-262.4H896c16 0 28.8 12.8 28.8 28.8v73.6c0 16-12.8 28.8-28.8 28.8H124.8c-16 0-28.8-12.8-28.8-28.8v-73.6c0-16 12.8-28.8 28.8-28.8z m0-467.2H896c16 0 28.8 12.8 28.8 28.8v73.6c0 16-12.8 28.8-28.8 28.8H124.8c-16 0-28.8-12.8-28.8-28.8v-73.6c0-16 12.8-28.8 28.8-28.8z m297.6 233.6h476.8c16 0 28.8 12.8 28.8 28.8v73.6c0 16-12.8 28.8-28.8 28.8H422.4c-16 0-28.8-12.8-28.8-28.8v-73.6c0-16 12.8-28.8 28.8-28.8z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-cancel" unicode="&#58929;" d="M512 441.6L214.4 742.4 185.6 768 128 710.4l25.6-28.8 300.8-297.6-300.8-297.6-25.6-28.8L185.6 0l28.8 25.6 297.6 300.8 297.6-300.8 28.8-25.6 57.6 57.6-25.6 28.8-300.8 297.6 300.8 297.6 25.6 28.8L838.4 768l-28.8-25.6-297.6-300.8z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sdocfont"; /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1687923893165'); /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1687923893165#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./sdoc-editor-font/iconfont.woff2?t=1687923893165') format('woff2'),
-       url('./sdoc-editor-font/iconfont.woff?t=1687923893165') format('woff'),
-       url('./sdoc-editor-font/iconfont.ttf?t=1687923893165') format('truetype'),
-       url('./sdoc-editor-font/iconfont.svg?t=1687923893165#sdocfont') format('svg');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1688352029576'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1688352029576#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1688352029576') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1688352029576') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1688352029576') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1688352029576#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -16,6 +16,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-caret-up:before {
+  content: "\e636";
+}
+
+.sdoc-starred:before {
+  content: "\e63d";
+}
+
+.sdoc-unstarred:before {
+  content: "\e63e";
+}
+
 .sdoc-more:before {
   content: "\e63a";
 }
@@ -48,10 +60,6 @@
   content: "\e637";
 }
 
-.sdoc-caret-up:before {
-  content: "\e636";
-}
-
 .sdoc-align-right:before {
   content: "\e630";
 }