@seafile/sdoc-editor 0.1.19 → 0.1.21-test

package/dist/assets/css/collaborator-popover.css

@@ -22,6 +22,7 @@
   font-size: 16px;
   border-bottom: 1px solid #ededed;
   color: #212529;
+  background: #fff;
 }
 
 .collaborators-popover .popover-container .content-list {

package/dist/basic-sdk/assets/css/layout.css

@@ -23,15 +23,16 @@
 
 .sdoc-editor-container .sdoc-editor-content {
   flex: 1;
+  display: flex;
   background: #f5f5f5;
   overflow: auto;
 }
 
 .sdoc-editor-container .sdoc-editor-content .article {
-  max-width: 950px;
+  width: 794px;
   min-height: calc(100% - 40px);
-  margin: 20px auto;
   padding: 40px 60px;
+  margin: 20px 0;
   background-color: #fff;
   border: 1px solid #e5e6e8;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);

package/dist/basic-sdk/assets/css/outline.css

@@ -0,0 +1,51 @@
+.display-outline-icon {
+  font-size: 14px;
+  color: #888;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  border-radius: 0 50% 50% 0;
+  box-shadow: 0 0 6px rgba(0,0,0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 230px 0 0;
+}
+
+.display-outline-icon:hover {
+  color: #333;
+}
+
+.sdoc-outline {
+  font-size: 14px;
+  width: 220px; 
+  margin: 20px 30px 20px 16px;
+}
+
+.sdoc-outline-header {
+  color: #999;
+  border-bottom: 1px solid #dbdbdb;
+}
+
+.font-size-inherit {
+  font-size: inherit;
+}
+
+.sdoc-outline-header .close-icon {
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.sdoc-outline-header .close-icon:hover {
+  color: #555;
+}
+
+.outline-item {
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.outline-item.active {
+  color: #ff8000;
+}

package/dist/basic-sdk/editor.js

@@ -7,6 +7,7 @@ import { Editable, Slate } from '@seafile/slate-react';
 import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
+import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
@@ -62,12 +63,17 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
       var slateValue = this.state.slateValue;
+      var doc = this.props.document;
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
         editor: this.editor
       }), /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-content"
+      }, /*#__PURE__*/React.createElement(SDocOutline, {
+        doc: doc
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "flex-fill o-auto"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
@@ -83,7 +89,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
           return _renderLeaf(props, _this2.editor);
         },
         onKeyDown: this.eventProxy.onKeyDown
-      })))));
+      }))))));
     }
   }]);
   return SDocEditor;

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 export var BLOCKQUOTE = 'blockquote';
-export var BOLD = 'blod';
+export var BOLD = 'bold';
 export var ITALIC = 'italic';
 export var HEADER = 'header';
 export var HEADER1 = 'header1';
@@ -29,6 +29,7 @@ export var TABLE_ROW = 'table-row';
 export var FORMULA = 'formula';
 export var COLUMN = 'column';
 export var TEXTSTYLE = 'text-style';
+export var BOLD_ITALIC = 'bold-italic';
 
 // menus config
 export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CONFIG_MAP, BLOCKQUOTE, {

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

@@ -7,6 +7,7 @@ var renderHeader = function renderHeader(props, editor) {
   var level = type.split('header')[1];
   var Tag = "h".concat(level);
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
+    id: element.id,
     "data-id": element.id
   }, attributes), children);
 };

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

@@ -1,3 +1,4 @@
+import MarkDownPlugin from './markdown';
 import HeaderPlugin from './header';
 import LinkPlugin from './link';
 import BlockquotePlugin from './blockquote';
@@ -5,6 +6,6 @@ import ListPlugin from './list';
 import CheckListPlugin from './check-list';
 import TextPlugin from './text-style';
 import CodeBlockPlugin from './code-block';
-var Plugins = [HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin];
+var Plugins = [MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin];
 export default Plugins;
-export { HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin };

package/dist/basic-sdk/extension/plugins/markdown/index.js

@@ -0,0 +1,5 @@
+import withMarkDown from './plugin';
+var MarkDownPlugin = {
+  editorPlugin: withMarkDown
+};
+export default MarkDownPlugin;

package/dist/basic-sdk/extension/plugins/markdown/plugin.js

@@ -0,0 +1,165 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Editor, Transforms, Range } from '@seafile/slate';
+import { toggleList } from '../list/transforms';
+import { getSelectedNodeByType } from '../../core';
+import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, UNORDERED_LIST, BLOCKQUOTE, BOLD, ITALIC, BOLD_ITALIC } from '../../constants';
+var KEY_TO_TYPE_FOR_SPACE = {
+  // Title shortcut
+  '#': HEADER1,
+  '##': HEADER2,
+  '###': HEADER3,
+  '####': HEADER4,
+  '#####': HEADER5,
+  '######': HEADER6,
+  // List shortcut
+  '*': UNORDERED_LIST,
+  '-': UNORDERED_LIST,
+  // Reference shortcut key
+  '>': BLOCKQUOTE
+};
+var KEY_TO_INLINE_TYPE_FOR_SPACE = {
+  // Inline shortcut keys
+  '**': BOLD,
+  '*': ITALIC,
+  '***': BOLD_ITALIC
+};
+var getBeforeText = function getBeforeText(editor) {
+  var selection = editor.selection;
+  if (selection == null) return {
+    beforeText: '',
+    range: null
+  };
+  var anchor = selection.anchor;
+  // Find the block element above the current text
+  var block = Editor.above(editor, {
+    match: function match(n) {
+      return Editor.isBlock(editor, n);
+    }
+  });
+  if (block == null) return {
+    beforeText: '',
+    range: null
+  };
+  var blockPath = block[1];
+  var blockStart = Editor.start(editor, blockPath); // The starting position of the block element
+  var range = {
+    anchor: anchor,
+    focus: blockStart
+  };
+  var beforeText = Editor.string(editor, range) || '';
+  return {
+    beforeText: beforeText,
+    range: range
+  };
+};
+var withMarkDown = function withMarkDown(editor) {
+  var insertText = editor.insertText;
+  var newEditor = editor;
+
+  // When entering a space, convert markdown
+  newEditor.insertText = function (text) {
+    var selection = editor.selection;
+    if (selection == null) return insertText(text);
+    if (Range.isExpanded(selection)) return insertText(text);
+    if (getSelectedNodeByType(editor, 'paragraph') == null) return insertText(text); // It must be in paragraph
+    if (text !== ' ') return insertText(text); // The value must be an input space
+
+    // Gets the text before the space
+    var _getBeforeText = getBeforeText(editor),
+      beforeText = _getBeforeText.beforeText,
+      range = _getBeforeText.range;
+    if (!beforeText || !range) return insertText(text);
+
+    // Based on the keyword, find the type of element you want to convert
+    var type = KEY_TO_TYPE_FOR_SPACE[beforeText.trim()];
+    var boldType = KEY_TO_INLINE_TYPE_FOR_SPACE[beforeText.slice(-2)];
+    var italicType = KEY_TO_INLINE_TYPE_FOR_SPACE[beforeText.slice(-1)];
+    var italicAndBoldType = KEY_TO_INLINE_TYPE_FOR_SPACE[beforeText.slice(-3)];
+    if (!type && !boldType && !italicType && !italicAndBoldType) return insertText(text);
+    if (italicAndBoldType === BOLD_ITALIC) {
+      var restStr = beforeText === null || beforeText === void 0 ? void 0 : beforeText.slice(0, beforeText.length - 3);
+      var startOffset = restStr === null || restStr === void 0 ? void 0 : restStr.lastIndexOf('***');
+      var endOffset = (beforeText === null || beforeText === void 0 ? void 0 : beforeText.lastIndexOf('***')) + 3;
+      if (startOffset !== -3) {
+        Transforms.delete(editor, {
+          at: {
+            anchor: {
+              path: range.focus.path,
+              offset: startOffset
+            },
+            focus: _objectSpread({}, selection.focus)
+          },
+          voids: true
+        });
+        var newText = beforeText.slice(startOffset + 3, endOffset - 3);
+        Editor.addMark(editor, 'BOLD', true);
+        Editor.addMark(editor, 'ITALIC', true);
+        return insertText(newText);
+      }
+    }
+    if (boldType === BOLD) {
+      var _restStr = beforeText.slice(0, beforeText.length - 2);
+      var _startOffset = _restStr.lastIndexOf('**');
+      var _endOffset = beforeText.lastIndexOf('**') + 2;
+      if (_startOffset === -1) {
+        return insertText(text);
+      }
+      Transforms.delete(editor, {
+        at: {
+          anchor: {
+            path: range.focus.path,
+            offset: _startOffset
+          },
+          focus: _objectSpread({}, selection.focus)
+        },
+        voids: true
+      });
+      var newType = boldType.toUpperCase();
+      var _newText = beforeText.slice(_startOffset + 2, _endOffset - 2);
+      Editor.addMark(editor, newType, true);
+      return insertText(_newText);
+    }
+    if (italicType === ITALIC) {
+      var _restStr2 = beforeText === null || beforeText === void 0 ? void 0 : beforeText.slice(0, beforeText.length - 1);
+      var _startOffset2 = _restStr2 === null || _restStr2 === void 0 ? void 0 : _restStr2.lastIndexOf('*');
+      var _endOffset2 = (beforeText === null || beforeText === void 0 ? void 0 : beforeText.lastIndexOf('*')) + 1;
+      if (_startOffset2 !== -1) {
+        Transforms.delete(editor, {
+          at: {
+            anchor: {
+              path: range.focus.path,
+              offset: _startOffset2
+            },
+            focus: _objectSpread({}, selection.focus)
+          },
+          voids: true
+        });
+        var _newType = italicType.toUpperCase();
+        var _newText2 = beforeText.slice(_startOffset2 + 1, _endOffset2 - 1);
+        Editor.addMark(editor, _newType, true);
+        return insertText(_newText2);
+      }
+    }
+
+    // Delete element
+    Transforms.select(editor, range);
+    Transforms.delete(editor);
+    if (type === UNORDERED_LIST) {
+      toggleList(editor, type);
+      return;
+    }
+    if (type === BLOCKQUOTE) {
+      Transforms.setNodes(editor, {
+        type: type
+      }, {
+        mode: 'highest'
+      });
+      return;
+    }
+    Transforms.setNodes(editor, {
+      type: type
+    });
+  };
+  return newEditor;
+};
+export default withMarkDown;

package/dist/basic-sdk/index.js

@@ -1,4 +1,5 @@
 import SDocEditor from './editor';
 import SDocViewer from './viewer';
+import SDocOutline from './outline';
 import EventBus from './utils/event-bus';
-export { SDocEditor, SDocViewer, EventBus };
+export { SDocEditor, SDocViewer, SDocOutline, EventBus };

package/dist/basic-sdk/outline.js

@@ -0,0 +1,114 @@
+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 { withTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
+import './assets/css/outline.css';
+var SDocOutline = /*#__PURE__*/function (_React$Component) {
+  _inherits(SDocOutline, _React$Component);
+  var _super = _createSuper(SDocOutline);
+  function SDocOutline(props) {
+    var _this;
+    _classCallCheck(this, SDocOutline);
+    _this = _super.call(this, props);
+    _this.toggleShow = function () {
+      _this.setState({
+        isShown: !_this.state.isShown
+      });
+    };
+    _this.state = {
+      isShown: false
+    };
+    return _this;
+  }
+  _createClass(SDocOutline, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        doc = _this$props.doc,
+        t = _this$props.t;
+      var isShown = this.state.isShown;
+      var list = doc.children.filter(function (item) {
+        return item.type == 'header2' || item.type == 'header3';
+      });
+      return isShown ? /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-outline d-flex flex-column"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-outline-header d-flex align-items-center justify-content-between py-1"
+      }, /*#__PURE__*/React.createElement("h2", {
+        className: "font-weight-normal m-0 font-size-inherit"
+      }, t('Outline')), /*#__PURE__*/React.createElement("span", {
+        onClick: this.toggleShow,
+        className: "close-icon iconfont icon-cancel"
+      })), list.length ? /*#__PURE__*/React.createElement("ol", {
+        className: "list-unstyled py-2 flex-fill o-auto"
+      }, list.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(OutlineItem, {
+          key: index,
+          item: item
+        });
+      })) : /*#__PURE__*/React.createElement("p", {
+        className: "mt-4 text-secondary"
+      }, t('Headings_you_add_to_the_document_will_appear_here'))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        onClick: this.toggleShow,
+        id: "display-outline-icon",
+        className: "display-outline-icon iconfont icon-table-of-content",
+        style: {
+          'marginRight': (window.innerWidth - 794) / 2 - 36
+        }
+      }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+        placement: "right",
+        target: "display-outline-icon"
+      }, t('Outline')));
+    }
+  }]);
+  return SDocOutline;
+}(React.Component);
+var OutlineItem = /*#__PURE__*/function (_React$Component2) {
+  _inherits(OutlineItem, _React$Component2);
+  var _super2 = _createSuper(OutlineItem);
+  function OutlineItem(props) {
+    var _this2;
+    _classCallCheck(this, OutlineItem);
+    _this2 = _super2.call(this, props);
+    _this2.onItemClick = function () {
+      var item = _this2.props.item;
+      var id = item.id;
+      document.getElementById(id).scrollIntoView();
+    };
+    _this2.onMouseOver = function () {
+      _this2.setState({
+        isHighlighted: true
+      });
+    };
+    _this2.onMouseOut = function () {
+      _this2.setState({
+        isHighlighted: false
+      });
+    };
+    _this2.state = {
+      isHighlighted: false
+    };
+    return _this2;
+  }
+  _createClass(OutlineItem, [{
+    key: "render",
+    value: function render() {
+      var isHighlighted = this.state.isHighlighted;
+      var item = this.props.item;
+      var id = item.id,
+        type = item.type,
+        children = item.children;
+      return /*#__PURE__*/React.createElement("li", {
+        className: "outline-item ".concat(type == 'header3' ? 'pl-5' : '', " ").concat(isHighlighted ? 'active' : ''),
+        onClick: this.onItemClick,
+        onMouseOver: this.onMouseOver,
+        onMouseOut: this.onMouseOut
+      }, children[0].text);
+    }
+  }]);
+  return OutlineItem;
+}(React.Component);
+export default withTranslation('sdoc-editor')(SDocOutline);

package/dist/basic-sdk/socket/socket-client.js

@@ -9,9 +9,12 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   _classCallCheck(this, SocketClient);
   this.getParams = function () {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var docUuid = _this.config.docUuid;
+    var _this$config = _this.config,
+      docUuid = _this$config.docUuid,
+      user = _this$config.user;
     return _objectSpread({
-      doc_uuid: docUuid
+      doc_uuid: docUuid,
+      user: user
     }, params);
   };
   this.onConnected = function () {

package/dist/basic-sdk/viewer.js

@@ -52,12 +52,14 @@ var SDocViewer = /*#__PURE__*/function (_React$Component) {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex-fill o-auto"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
         onChange: function onChange() {}
       }, /*#__PURE__*/React.createElement("div", {
-        className: "article"
+        className: "article mx-auto"
       }, /*#__PURE__*/React.createElement(Editable, {
         readOnly: true,
         placeholder: "",
@@ -73,7 +75,7 @@ var SDocViewer = /*#__PURE__*/function (_React$Component) {
             editor.handleTab && editor.handleTab(event);
           }
         }
-      })))));
+      }))))));
     }
   }]);
   return SDocViewer;

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

@@ -3,32 +3,49 @@ 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, { Fragment } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import CollaboratorsOperation from './collaborators-operation';
 import context from '../../context';
+import { withTranslation } from 'react-i18next';
 import './style.css';
 var DocOperations = /*#__PURE__*/function (_React$Component) {
   _inherits(DocOperations, _React$Component);
   var _super = _createSuper(DocOperations);
-  function DocOperations() {
+  function DocOperations(props) {
     var _this;
     _classCallCheck(this, DocOperations);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
+    _this.toggleDropdown = function () {
+      _this.setState({
+        isDropdownOpen: !_this.state.isDropdownOpen
+      });
+    };
     _this.toggleHistory = function (event) {
       event.stopPropagation();
       event.nativeEvent.stopImmediatePropagation();
       var historyURL = context.getSetting('historyURL');
       window.location.href = historyURL;
     };
+    _this.state = {
+      isDropdownOpen: false
+    };
     return _this;
   }
   _createClass(DocOperations, [{
     key: "render",
     value: function render() {
+      var t = this.props.t;
+      var isDropdownOpen = this.state.isDropdownOpen;
       var docPerm = context.getSetting('docPerm');
       var historyURL = context.getSetting('historyURL');
+      var parentFolderURL = context.getSetting('parentFolderURL');
+      var dropdownItems = [];
+      if (parentFolderURL) {
+        dropdownItems.push({
+          text: t('Open_parent_folder'),
+          URL: parentFolderURL
+        });
+      }
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "doc-ops"
       }, /*#__PURE__*/React.createElement("span", {
@@ -40,13 +57,25 @@ var DocOperations = /*#__PURE__*/function (_React$Component) {
         onClick: this.toggleHistory
       }, /*#__PURE__*/React.createElement("i", {
         className: "iconfont icon-history"
-      })), /*#__PURE__*/React.createElement(CollaboratorsOperation, null), /*#__PURE__*/React.createElement("span", {
-        className: "op-item"
+      })), /*#__PURE__*/React.createElement(CollaboratorsOperation, null), dropdownItems.length > 0 && /*#__PURE__*/React.createElement(Dropdown, {
+        isOpen: isDropdownOpen,
+        toggle: this.toggleDropdown
+      }, /*#__PURE__*/React.createElement(DropdownToggle, {
+        className: "op-item",
+        tag: "span"
       }, /*#__PURE__*/React.createElement("i", {
         className: "iconfont icon-menu"
-      }))));
+      })), /*#__PURE__*/React.createElement(DropdownMenu, {
+        right: true
+      }, dropdownItems.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(DropdownItem, {
+          tag: "a",
+          href: item.URL,
+          key: index
+        }, item.text);
+      })))));
     }
   }]);
   return DocOperations;
 }(React.Component);
-export default DocOperations;
+export default withTranslation('sdoc-editor')(DocOperations);

package/dist/config.js

@@ -0,0 +1,16 @@
+var serverConfig = {
+  //serviceUrl: "http://127.0.0.1:8000",
+  serviceUrl: "http://192.168.1.100:8000",
+  username: "lj@11.com",
+  password: "11",
+  repoID: "79d1fa93-4b5f-4d6c-8fb5-ad3958e1fa47",
+  userInfo: {
+    username: 'lj@11.com',
+    name: 'lj-',
+    contact_email: 'lj@11.com'
+  },
+  filePath: '/xxx.md',
+  fileName: 'xxx.md',
+  dirPath: '/'
+};
+export { serverConfig };

package/dist/context.js

@@ -82,7 +82,8 @@ var Context = /*#__PURE__*/function () {
       this.config = {
         docUuid: docUuid,
         accessToken: accessToken,
-        sdocServer: new Url(sdocServer).origin
+        sdocServer: new Url(sdocServer).origin,
+        user: this.getUserInfo()
       };
       return this.config;
     }

package/package.json

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

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

@@ -233,5 +233,8 @@
   "me": "me",
   "Server_is_not_connected_Operation_will_be_sent_to_server_later": "Server is not connected. Operation will be sent to server later.",
   "Server_is_disconnected_Reconnecting": "Server is disconnected. Reconnecting...",
-  "Server_is_reconnected": "Server is reconnected."
+  "Server_is_reconnected": "Server is reconnected.",
+  "Outline": "Outline",
+  "Headings_you_add_to_the_document_will_appear_here": "Headings you add to the document will appear here",
+  "Open_parent_folder": "Open parent folder"
 }

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

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="cancel" unicode="&#58945;" 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" />
+      
+      <glyph glyph-name="table-of-content" unicode="&#58946;" d="M64 800h512c35.2 0 64-28.8 64-64s-28.8-64-64-64H64C28.8 672 0 700.8 0 736s28.8 64 64 64zM998.4 355.2l-12.8-12.8-172.8-172.8c-25.6-25.6-64-25.6-89.6 0s-25.6 64 0 89.6l134.4 134.4-134.4 134.4c-25.6 25.6-25.6 64 0 89.6s64 25.6 89.6 0l172.8-172.8 9.6-9.6c12.8-12.8 19.2-25.6 19.2-41.6v-3.2c0-12.8-9.6-28.8-16-35.2zM64 448h800c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64zM64 96h512c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="history" unicode="&#58944;" d="M544 864c265.6 0 480-214.4 480-480S809.6-96 544-96c-115.2 0-224 41.6-304 108.8-6.4 6.4-12.8 12.8-22.4 19.2l-9.6 9.6c-9.6 25.6-6.4 51.2 12.8 73.6l3.2 6.4c22.4 22.4 44.8 32 70.4 22.4l6.4-3.2 6.4-6.4c3.2-3.2 9.6-9.6 16-12.8 60.8-51.2 137.6-83.2 220.8-83.2 188.8 0 342.4 153.6 342.4 342.4S732.8 726.4 544 726.4C387.2 726.4 256 624 214.4 480h44.8c19.2 0 32-12.8 32-32 0-6.4-3.2-12.8-6.4-19.2L169.6 262.4c-9.6-12.8-28.8-19.2-44.8-6.4l-9.6 9.6L0 432c-9.6 16-6.4 35.2 9.6 44.8C16 480 22.4 480 28.8 480h44.8C115.2 697.6 304 860.8 531.2 864H544z m-6.4-224c32 0 60.8-25.6 60.8-60.8V400l115.2-89.6 3.2-3.2c22.4-19.2 22.4-54.4 3.2-76.8-22.4-25.6-60.8-25.6-86.4-6.4L476.8 348.8V582.4c0 28.8 28.8 57.6 60.8 57.6z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="share" unicode="&#58895;" d="M662.4 681.6c0 83.2 67.2 150.4 150.4 150.4S960 764.8 960 681.6s-67.2-150.4-150.4-150.4-147.2 70.4-147.2 150.4zM371.2 502.4l246.4 124.8c6.4-25.6 16-48 32-67.2L403.2 435.2c-3.2 25.6-16 48-32 67.2zM64 384c0 83.2 67.2 150.4 150.4 150.4S364.8 467.2 364.8 384s-67.2-150.4-150.4-150.4S64 300.8 64 384z m307.2-118.4c16 19.2 25.6 41.6 32 67.2L649.6 208c-16-19.2-25.6-41.6-32-67.2L371.2 265.6z m291.2-179.2c0 83.2 67.2 150.4 150.4 150.4s150.4-67.2 150.4-150.4S892.8-64 809.6-64s-147.2 67.2-147.2 150.4z"  horiz-adv-x="1024" />

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

@@ -16,6 +16,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-cancel:before {
+  content: "\e641";
+}
+
+.icon-table-of-content:before {
+  content: "\e642";
+}
 
 .icon-history:before {
   content: "\e640";