@seafile/sdoc-editor 0.1.87 → 0.1.88-beta

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

@@ -1,116 +1,87 @@
-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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useCallback } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { getAlignType, isMenuDisabled, setAlignType } from '../helpers';
 import { TEXT_ALIGN, MENUS_CONFIG_MAP } from '../../../constants';
-import './style.css';
-var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextAlignMenu, _React$Component);
-  var _super = _createSuper(TextAlignMenu);
-  function TextAlignMenu(props) {
-    var _this;
-    _classCallCheck(this, TextAlignMenu);
-    _this = _super.call(this, props);
-    _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideTextAlignMenu, true);
-    };
-    _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideTextAlignMenu, true);
-    };
-    _this.onHideTextAlignMenu = function (e) {
-      var menu = _this.menu;
-      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.getCurrentType = function () {
-      var editor = _this.props.editor;
-      return getAlignType(editor);
-    };
-    _this.isActive = function (type) {
-      return _this.getCurrentType() === type;
-    };
-    _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
-    };
-    _this.onToggleClick = function (event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
-      if (isDropdownMenuOpen) {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.registerEventHandler();
-        });
-      } else {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.unregisterEventHandler();
-        });
+var TextAlignMenu = function TextAlignMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowMenu = _useState2[0],
+    setMenuShow = _useState2[1];
+  var popoverRef = useRef(null);
+  var disabled = isMenuDisabled(editor);
+  var buttonId = 'sdoc-button-text-align';
+  var toggle = useCallback(function (event) {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var getCurrentType = useCallback(function () {
+    return getAlignType(editor);
+  }, [editor]);
+  var setType = useCallback(function (type) {
+    setAlignType(editor, type);
+    toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isShowMenu]);
+  var validClassName = classnames(className, 'sdoc-menu-with-dropdown', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
+    'rich-icon-btn d-flex': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  var curType = getCurrentType();
+  var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
+    return item.type === curType;
+  })[0].iconClass;
+  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: validClassName,
+    id: buttonId,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: curIcon
+  })), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: caretIconClass
+  }))), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pt-2 pb-2"
+  }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "sdoc-dropdown-menu-item",
+      onClick: function onClick() {
+        return setType(item.type);
       }
-    };
-    _this.setType = function (type) {
-      var editor = _this.props.editor;
-      setAlignType(editor, type);
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.setMenuRef = function (ref) {
-      _this.menu = ref;
-    };
-    _this.state = {
-      isDropdownMenuOpen: false
-    };
-    return _this;
-  }
-  _createClass(TextAlignMenu, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
-      var caretIconClass = "caret-icon sdocfont sdoc-".concat(isDropdownMenuOpen ? 'caret-up' : 'drop-down');
-      var curType = this.getCurrentType();
-      var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
-        return item.type == curType;
-      })[0].iconClass;
-      var disabled = this.isDisabled();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "align-menu"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames('align-toggle px-2', {
-          'align-toggle-disabled': disabled
-        }),
-        onClick: disabled ? function () {} : this.onToggleClick
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "mr-1 ".concat(curIcon)
-      }), !disabled && /*#__PURE__*/React.createElement("span", {
-        className: caretIconClass
-      })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
-        ref: this.setMenuRef,
-        className: "align-popover sdoc-dropdown-menu"
-      }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
-        return /*#__PURE__*/React.createElement("span", {
-          key: index,
-          className: "sdoc-dropdown-menu-item ".concat(item.iconClass),
-          onClick: _this2.setType.bind(_this2, item.type)
-        });
-      })));
-    }
-  }]);
-  return TextAlignMenu;
-}(React.Component);
+    }, /*#__PURE__*/React.createElement("i", {
+      className: item.iconClass
+    }));
+  }))));
+};
+TextAlignMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
 export default withTranslation('sdoc-editor')(TextAlignMenu);

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

@@ -1,80 +1,80 @@
 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 { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP } from '../../../constants';
+import React, { useCallback } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Editor } from '@seafile/slate';
+import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
 import { focusEditor } from '../../../core';
 import { MenuItem } from '../../../menu';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
 import MoreDropdown from '../../../../../components/more-dropdown';
-var TextStyleMenuList = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextStyleMenuList, _React$Component);
-  var _super = _createSuper(TextStyleMenuList);
-  function TextStyleMenuList() {
-    var _this;
-    _classCallCheck(this, TextStyleMenuList);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import ColorMenu from '../../../menu/color-menu';
+var TextStyleMenuList = function TextStyleMenuList(_ref) {
+  var editor = _ref.editor,
+    t = _ref.t,
+    isRichEditor = _ref.isRichEditor,
+    className = _ref.className;
+  var isActive = useCallback(function (type) {
+    var isMark = getValue(editor, type);
+    return !!isMark;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var isDisabled = useCallback(function () {
+    return isMenuDisabled(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var onMouseDown = useCallback(function (event, type) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isDisabled()) return;
+    var active = isActive(type);
+    if (active) {
+      removeMark(editor, type);
+    } else {
+      addMark(editor, type);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.isActive = function (editor, type) {
-      var isMark = getValue(editor, type);
-      return !!isMark;
-    };
-    _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
-    };
-    _this.onMouseDown = function (e, type) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (_this.isDisabled()) return;
-      var editor = _this.props.editor;
-      var active = _this.isActive(editor, type);
-      if (active) {
-        removeMark(editor, type);
-      } else {
-        addMark(editor, type);
-      }
-      focusEditor(editor);
-    };
-    _this.getTextStyleList = function (key) {
-      var _this$props = _this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className,
-        editor = _this$props.editor;
-      var list = MENUS_CONFIG_MAP[key].map(function (item) {
-        var itemProps = {
-          isRichEditor: isRichEditor,
-          className: className,
-          disabled: _this.isDisabled(),
-          isActive: _this.isActive(editor, item.type),
-          onMouseDown: _this.onMouseDown
+    focusEditor(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var setColor = useCallback(function (type, color) {
+    Editor.addMark(editor, type, color);
+    focusEditor(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var getTextStyleList = useCallback(function (key) {
+    return MENUS_CONFIG_MAP[key].map(function (item) {
+      var itemProps = {
+        isRichEditor: isRichEditor,
+        className: className,
+        disabled: isDisabled(),
+        isActive: isActive(item.type),
+        onMouseDown: item.isColor ? function () {} : onMouseDown
+      };
+      if (item.isColor) {
+        itemProps['setColor'] = function (color) {
+          return setColor(item.type, color);
         };
-        return _objectSpread(_objectSpread({}, itemProps), item);
-      });
-      return list;
-    };
-    return _this;
-  }
-  _createClass(TextStyleMenuList, [{
-    key: "render",
-    value: function render() {
-      var list = this.getTextStyleList(TEXT_STYLE);
-      var dropdownList = this.getTextStyleList(TEXT_STYLE_MORE);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (itemProps, index) {
-        return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
-          key: index
-        }, itemProps));
-      }), /*#__PURE__*/React.createElement(MoreDropdown, null, dropdownList.map(function (itemProps, index) {
-        return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
-          key: index
-        }, itemProps));
-      })));
-    }
-  }]);
-  return TextStyleMenuList;
-}(React.Component);
-export default TextStyleMenuList;
+        itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
+      }
+      return _objectSpread(_objectSpread({}, itemProps), item);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var list = getTextStyleList(TEXT_STYLE);
+  var dropdownList = getTextStyleList(TEXT_STYLE_MORE);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (itemProps, index) {
+    var Component = itemProps.isColor ? ColorMenu : MenuItem;
+    return /*#__PURE__*/React.createElement(Component, Object.assign({
+      key: index
+    }, itemProps));
+  }), /*#__PURE__*/React.createElement(MoreDropdown, null, dropdownList.map(function (itemProps, index) {
+    return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+      key: index
+    }, itemProps));
+  })));
+};
+export default withTranslation('sdoc-editor')(TextStyleMenuList);

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

@@ -21,6 +21,9 @@ var renderText = function renderText(props, editor) {
   if (leaf.color) {
     style['color'] = leaf.color;
   }
+  if (leaf['highlight-color']) {
+    style['backgroundColor'] = leaf['highlight-color'];
+  }
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }

package/dist/basic-sdk/extension/toolbar/index.js

@@ -13,6 +13,7 @@ import CodeBlockMenu from '../plugins/code-block/menu';
 import TextAlignMenu from '../plugins/text-align/menu';
 import HistoryMenu from './redo-undo';
 import { TableMenu, ActiveTableMenu } from '../plugins/table/menu';
+import ClearFormatMenu from '../plugins/clear-format/menu';
 var Toolbar = function Toolbar(_ref) {
   var editor = _ref.editor;
   useSelectionUpdate();
@@ -20,6 +21,8 @@ var Toolbar = function Toolbar(_ref) {
     className: "sdoc-editor-toolbar"
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {
     editor: editor
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ClearFormatMenu, {
+    editor: editor
   })), /*#__PURE__*/React.createElement(HeaderMenu, {
     editor: editor
   }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {

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

@@ -4,7 +4,7 @@ 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 Prism, { normalizeTokens, normalizeTokensByLanguageType } from '../extension/plugins/code-block/prismjs';
 import { CODE_BLOCK } from '../extension/constants';
 var mergeMaps = function mergeMaps() {
   var map = new Map();

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -17,9 +17,17 @@ export var useSelectionPosition = function useSelectionPosition() {
     x: 0,
     y: 0
   };
-  var domNode = ReactEditor.toDOMNode(editor, node[0]);
-  var rect = domNode.getBoundingClientRect();
-  return rect;
+  try {
+    var domNode = ReactEditor.toDOMNode(editor, node[0]);
+    var rect = domNode.getBoundingClientRect();
+    return rect;
+  } catch (error) {
+    // A new node has not yet been indexed, it cannot be retrieved, and the new node has no comment information, just do not display it
+    return {
+      x: 0,
+      y: 0
+    };
+  }
 };
 export var useCommentListPosition = function useCommentListPosition() {
   var selectionPosition = useSelectionPosition();

package/dist/components/more-dropdown/index.js

@@ -1,75 +1,38 @@
-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 './style.css';
-var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(MoreDropdownMenu, _React$Component);
-  var _super = _createSuper(MoreDropdownMenu);
-  function MoreDropdownMenu(props) {
-    var _this;
-    _classCallCheck(this, MoreDropdownMenu);
-    _this = _super.call(this, props);
-    _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideMoreDropdownMenu, true);
-    };
-    _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideMoreDropdownMenu, true);
-    };
-    _this.onHideMoreDropdownMenu = function (e) {
-      var menu = _this.menu;
-      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.onToggleClick = function (event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
-      if (isDropdownMenuOpen) {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.registerEventHandler();
-        });
-      } else {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.unregisterEventHandler();
-        });
-      }
-    };
-    _this.setMenuRef = function (ref) {
-      _this.menu = ref;
-    };
-    _this.state = {
-      isDropdownMenuOpen: false
-    };
-    return _this;
-  }
-  _createClass(MoreDropdownMenu, [{
-    key: "render",
-    value: function render() {
-      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-more-menu"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "more-toggle px-2",
-        onClick: this.onToggleClick
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "sdocfont sdoc-more"
-      })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
-        ref: this.setMenuRef,
-        className: "more-popover"
-      }, this.props.children));
-    }
-  }]);
-  return MoreDropdownMenu;
-}(React.Component);
+import classnames from 'classnames';
+import { UncontrolledPopover } from 'reactstrap';
+var MoreDropdownMenu = function MoreDropdownMenu(_ref) {
+  var className = _ref.className,
+    disabled = _ref.disabled,
+    isRichEditor = _ref.isRichEditor,
+    children = _ref.children;
+  var validClassName = classnames(className, 'sdoc-more-text-button', {
+    'disabled': disabled,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active': !isRichEditor
+  });
+  var buttonId = 'sdoc-more-text-operations';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: validClassName,
+    type: "button",
+    id: buttonId
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-more"
+  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu",
+    trigger: "legacy",
+    placement: "bottom-end",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "menu-group"
+  }, children)));
+};
+MoreDropdownMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
 export default MoreDropdownMenu;

package/dist/utils/local-storage-utils.js

@@ -7,12 +7,26 @@ var LocalStorage = /*#__PURE__*/function () {
   _createClass(LocalStorage, null, [{
     key: "setItem",
     value: function setItem(key, value) {
-      return window.localStorage.setItem(key, JSON.stringify(value));
+      var savedValue;
+      var valueType = typeof value;
+      if (valueType === 'string') {
+        savedValue = value;
+      } else if (valueType === 'number') {
+        savedValue = value + '';
+      } else {
+        savedValue = JSON.stringify(value);
+      }
+      return window.localStorage.setItem(key, savedValue);
     }
   }, {
     key: "getItem",
     value: function getItem(key, defaultValue) {
-      return JSON.parse(window.localStorage.getItem(key)) || defaultValue;
+      var value = window.localStorage.getItem(key);
+      try {
+        return JSON.parse(value) || defaultValue;
+      } catch (_unused) {
+        return value || defaultValue;
+      }
     }
   }, {
     key: "removeItem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.87",
+  "version": "0.1.88beta",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

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

@@ -305,5 +305,8 @@
   "Standard_light_blue": "Standard light blue",
   "Standard_blue": "Standard blue",
   "Standard_dark_blue": "Standard dark blue",
-  "Standard_purple": "Standard purple"
+  "Standard_purple": "Standard purple",
+  "Highlight_color": "Highlight",
+  "Font_color": "Font color",
+  "Default": "Default"
 }

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

@@ -305,5 +305,8 @@
   "Standard_light_blue": "标准浅蓝",
   "Standard_blue": "标准蓝",
   "Standard_dark_blue": "标准深蓝",
-  "Standard_purple": "标准紫"
+  "Standard_purple": "标准紫",
+  "Highlight_color": "突出显示",
+  "Font_color": "字体颜色",
+  "Default": "默认"
 }

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

@@ -14,6 +14,12 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-font-color" unicode="&#58886;" d="M960-96h-160l-80 224h-416L224-96H64L403.2 864h211.2L960-96zM512 704l-160-448h320L512 704z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-highlight-color" unicode="&#58885;" d="M992 528L640-67.2l-144 80-64-108.8H32l163.2 278.4L32 275.2 380.8 896 992 528zM198.4 320l406.4-224 233.6 390.4L428.8 736 198.4 320z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-format-clear" unicode="&#58883;" d="M519.488 64H279.552L64 279.552 584.448 800l384.64-384.64L617.728 64h-98.176z m64 64l92.608 92.608-288.64 288.64L161.28 282.88 316.16 128h267.328zM128 0h832v-64H128v64z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-bg-color" unicode="&#58884;" d="M906.4-64c60.8 0 105.6 48 105.6 105.6 0 38.4-35.2 124.8-105.6 246.4C836 160 800.8 80 800.8 41.6c0-60.8 48-105.6 105.6-105.6zM512.8 761.6l358.4-352c35.2-35.2 35.2-92.8 0-128l-358.4-352c-35.2-35.2-92.8-35.2-131.2 0l-355.2 352c-35.2 35.2-35.2 92.8 0 128L356 736l-19.2 19.2c-25.6 22.4-25.6 64 0 89.6s64 22.4 89.6 0l86.4-83.2z m-368-400h614.4L452 649.6c0-3.2-307.2-288-307.2-288z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-right-slide" unicode="&#58882;" d="M806.4 438.4L336 812.8c-54.4 44.8-144 9.6-144-54.4v-748.8c0-64 86.4-99.2 144-54.4l470.4 374.4c35.2 28.8 35.2 80 0 108.8z"  horiz-adv-x="1024" />