@seafile/sdoc-editor 0.1.4 → 0.1.6

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

@@ -0,0 +1,22 @@
+.code-block-container {
+  position: relative;
+}
+
+.language-type {
+  font-size: 12px;
+  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; 
+}

package/dist/assets/css/{sdoc-editor.css → layout.css}

@@ -3,7 +3,7 @@
   padding-inline-start: 24px;
 }
 
-.sf-editor-container {
+.sdoc-editor-container {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -11,7 +11,7 @@
   min-height: 0;
 }
 
-.sf-editor-container .sf-editor-toolbar {
+.sdoc-editor-container .sdoc-editor-toolbar {
   display: flex;
   justify-content: center;
   height: 39px;
@@ -23,13 +23,13 @@
   box-shadow: 0 3px 2px -2px rgb(200 200 200 / 15%)
 }
 
-.sf-editor-container .sf-editor-content {
+.sdoc-editor-container .sdoc-editor-content {
   flex: 1;
   height: 100%;
   overflow: auto;
 }
 
-.sf-editor-container .sf-editor-content .editor-article {
+.sdoc-editor-container .sdoc-editor-content .article {
   max-width: 950px;
   min-height: calc(100% - 40px);
   margin: 20px auto;

package/dist/assets/css/sdoc-editor-content.css

@@ -0,0 +1,10 @@
+/* header */ 
+.sdoc-editor-container .article h2 {
+  border-bottom: none;
+}
+
+/* list  */
+.sdoc-editor-container .article .list-container {
+  margin: 0;
+  padding-inline-start: 24px;
+}

package/dist/assets/css/sdoc-editor-toolbar.css

@@ -49,4 +49,4 @@
 
 .header-menu .header-popover .header-menu-item:hover {
   background-color: rgb(245, 245, 245);
-}
+}

package/dist/editor.js

@@ -8,7 +8,8 @@ import isHotkey from 'is-hotkey';
 import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
-import './assets/css/sdoc-editor.css';
+import './assets/css/layout.css';
+import './assets/css/sdoc-editor-content.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SDocEditor, _React$Component);
   var _super = _createSuper(SDocEditor);
@@ -51,21 +52,19 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$state = this.state,
-        slateValue = _this$state.slateValue,
-        isEditorBlur = _this$state.isEditorBlur;
+      var slateValue = this.state.slateValue;
       return /*#__PURE__*/React.createElement("div", {
-        className: "sf-editor-container"
+        className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
         editor: this.editor
       }), /*#__PURE__*/React.createElement("div", {
-        className: "sf-editor-content"
+        className: "sdoc-editor-content"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
         onChange: this.onChange
       }, /*#__PURE__*/React.createElement("div", {
-        className: "editor-article"
+        className: "article"
       }, /*#__PURE__*/React.createElement(Editable, {
         placeholder: "Enter some text...",
         renderElement: function renderElement(props) {

package/dist/extension/constants/index.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 export var BLOCKQUOTE = 'blockquote';
-export var BLOB = 'blob';
+export var BOLD = 'blod';
+export var ITALIC = 'italic';
 export var HEADER = 'header';
 export var HEADER1 = 'header1';
 export var HEADER2 = 'header2';
@@ -27,6 +28,7 @@ export var TABLE_CELL = 'table-cell';
 export var TABLE_ROW = 'table-row';
 export var FORMULA = 'formula';
 export var COLUMN = 'column';
+export var TEXTSTYLE = 'text-style';
 
 // menus config
 export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CONFIG_MAP, BLOCKQUOTE, {
@@ -45,9 +47,23 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: CHECK_LIST,
   iconClass: 'iconfont icon-check-square',
   text: 'check_list_item'
+}), _defineProperty(_MENUS_CONFIG_MAP, CODE_BLOCK, {
+  id: CODE_BLOCK,
+  iconClass: 'iconfont icon-code-block',
+  text: 'code-block'
 }), _defineProperty(_MENUS_CONFIG_MAP, LINK, {
   id: LINK,
   iconClass: 'iconfont icon-link',
   text: 'link'
-}), _MENUS_CONFIG_MAP);
-export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_1'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_2'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_3'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_4'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_5'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_6'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'pargraph'), _HEADER_TITLE_MAP);
+}), _defineProperty(_MENUS_CONFIG_MAP, TEXTSTYLE, [{
+  id: ITALIC,
+  iconClass: 'iconfont icon-italic',
+  text: 'italic',
+  type: 'ITALIC'
+}, {
+  id: BOLD,
+  iconClass: 'iconfont icon-bold',
+  text: 'bold',
+  type: 'BOLD'
+}]), _MENUS_CONFIG_MAP);
+export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_1'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_2'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_3'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_4'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_5'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_6'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'paragraph'), _HEADER_TITLE_MAP);

package/dist/extension/core/queries/index.js

@@ -153,6 +153,14 @@ export var getSelectedElems = function getSelectedElems(editor) {
   }
   return elems;
 };
+export var genEmptyParagraph = function genEmptyParagraph() {
+  return {
+    type: 'paragraph',
+    children: [{
+      text: ''
+    }]
+  };
+};
 
 // siblings
 export var getNextSiblingNodes = function getNextSiblingNodes(ancestorEntry, path) {
@@ -324,4 +332,9 @@ export var isSelectionAtBlockStart = function isSelectionAtBlockStart(editor, op
   var path = (_getAboveBlockNode2 = getAboveBlockNode(editor, options)) === null || _getAboveBlockNode2 === void 0 ? void 0 : _getAboveBlockNode2[1];
   if (!path) return false;
   return isStartPoint(editor, selection.focus, path) || Range.isExpanded(editor.selection) && isStartPoint(editor, selection.anchor, path);
+};
+export var isLastNode = function isLastNode(editor, node) {
+  var editorChildren = editor.children || [];
+  var editorChildrenLength = editorChildren.length;
+  return editorChildren[editorChildrenLength - 1] === node;
 };

package/dist/extension/menu/menu-item.js

@@ -13,7 +13,7 @@ var MenuItem = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.onMouseDown = function (event) {
       if (_this.props.disabled) return;
-      _this.props.onMouseDown(event);
+      _this.props.onMouseDown(event, _this.props.type);
     };
     _this.onClick = function (event) {
       event.stopPropagation();

package/dist/extension/plugins/check-list/helpers.js

@@ -26,7 +26,7 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
   var notMatch = selectedElements.some(function (element) {
     if (Editor.isVoid(editor, element) && Editor.isBlock(editor, element)) return true;
     var type = element.type;
-    if (['pre', 'code', 'list-item'].includes(type)) return true;
+    if (['code-line', 'code-block', 'list-item'].includes(type)) return true;
     return false;
   });
   if (notMatch) return true;

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

@@ -0,0 +1,106 @@
+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 { getNodeType, getSelectedNodeByType, getSelectedElems } from '../../core';
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  var selection = editor.selection;
+  if (selection == null) return true;
+  var selectedElems = getSelectedElems(editor);
+  var hasVoid = selectedElems.some(function (elem) {
+    return editor.isVoid(elem);
+  });
+  if (hasVoid) return true;
+  var isMatch = selectedElems.some(function (elem) {
+    var type = getNodeType(elem);
+    if (type === CODE_BLOCK || type === PARAGRAPH) return true;
+    return false;
+  });
+  if (isMatch) return false; // enable
+  return true; // disable
+};
+
+export var getSelectCodeElem = function getSelectCodeElem(editor) {
+  var codeNode = getSelectedNodeByType(editor, CODE_BLOCK);
+  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 = [];
+  var nodeEntries = Editor.nodes(editor, {
+    match: function match(n) {
+      return editor.children.includes(n);
+    },
+    // Matches the selected node at the highest level
+    universal: true
+  });
+  var _iterator = _createForOfIteratorHelper(nodeEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var nodeEntry = _step.value;
+      var _nodeEntry = _slicedToArray(nodeEntry, 1),
+        n = _nodeEntry[0];
+      if (n) strArr.push(Node.string(n));
+    }
+
+    // Deletes the selected node at the highest level
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  Transforms.removeNodes(editor, {
+    mode: 'highest'
+  });
+
+  // Insert the codeBlockNode node
+  var newCodeBlockNode = {
+    type: CODE_BLOCK,
+    children: [{
+      type: 'code-line',
+      children: [{
+        text: strArr.join('\n')
+      } // Select the plain text of the node
+      ]
+    }],
+
+    language: language
+  };
+  Transforms.insertNodes(editor, newCodeBlockNode, {
+    mode: 'highest'
+  });
+};
+export var changeToPlainText = function changeToPlainText(editor) {
+  var elem = getSelectCodeElem(editor);
+  if (elem == null) return;
+
+  // Get code text
+  var str = Node.string(elem);
+
+  // Delete the highest level node, -> "the code-block node"
+  Transforms.removeNodes(editor, {
+    mode: 'highest'
+  });
+
+  // Insert p node
+  var pList = str.split('\n').map(function (s) {
+    return {
+      type: 'paragraph',
+      children: [{
+        text: s
+      }]
+    };
+  });
+  Transforms.insertNodes(editor, pList, {
+    mode: 'highest'
+  });
+};

package/dist/extension/plugins/code-block/index.js

@@ -0,0 +1,12 @@
+import { CODE_BLOCK } from '../../constants';
+import CodeBlockMenu from './menu';
+import withCodeBlock from './plugin';
+import { renderCodeBlock } from './render-elem';
+var CodeBlockPlugin = {
+  type: CODE_BLOCK,
+  nodeType: 'element',
+  editorMenus: [CodeBlockMenu],
+  editorPlugin: withCodeBlock,
+  renderElements: [renderCodeBlock]
+};
+export default CodeBlockPlugin;

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

@@ -0,0 +1,65 @@
+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 { focusEditor } from '../../../core';
+import { CODE_BLOCK, MENUS_CONFIG_MAP } from '../../../constants';
+import { MenuItem } from '../../../menu';
+import { getSelectCodeElem, isMenuDisabled, changeToCodeBlock, changeToPlainText } from '../helpers';
+var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(CodeBlockMenu, _React$Component);
+  var _super = _createSuper(CodeBlockMenu);
+  function CodeBlockMenu() {
+    var _this;
+    _classCallCheck(this, CodeBlockMenu);
+    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.isActive = function () {
+      var editor = _this.props.editor;
+      var elem = getSelectCodeElem(editor);
+      return !!elem;
+    };
+    _this.isDisabled = function () {
+      return isMenuDisabled(_this.props.editor);
+    };
+    _this.onMouseDown = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var editor = _this.props.editor;
+      var active = _this.isActive(editor);
+      if (active) {
+        // It is currently in a code-block and needs to be converted to plain text
+        changeToPlainText(editor);
+      } else {
+        // It is not currently in code-block, so it needs to be converted to code-block
+        changeToCodeBlock(editor, 'text');
+      }
+      focusEditor(editor);
+    };
+    return _this;
+  }
+  _createClass(CodeBlockMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className;
+      var menuConfig = MENUS_CONFIG_MAP[CODE_BLOCK];
+      var props = _objectSpread(_objectSpread({
+        isRichEditor: isRichEditor,
+        className: className
+      }, menuConfig), {}, {
+        disabled: this.isDisabled(),
+        isActive: this.isActive(),
+        onMouseDown: this.onMouseDown
+      });
+      return /*#__PURE__*/React.createElement(MenuItem, props);
+    }
+  }]);
+  return CodeBlockMenu;
+}(React.Component);
+export default CodeBlockMenu;

package/dist/extension/plugins/code-block/model.js

@@ -0,0 +1,11 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import { BLOCKQUOTE } from '../../constants';
+var Blockquote = /*#__PURE__*/_createClass(function Blockquote(options) {
+  _classCallCheck(this, Blockquote);
+  this.type = options.type || BLOCKQUOTE;
+  this.children = options.children || [{
+    text: ''
+  }];
+});
+export default Blockquote;

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

@@ -0,0 +1,89 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Transforms, Node } from '@seafile/slate';
+import { getSelectedNodeByType, 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,
+    insertData = editor.insertData;
+  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),
+      node = _ref2[0],
+      path = _ref2[1];
+    var type = getNodeType(node);
+    if (type === CODE_BLOCK) {
+      // code-block is the last node in the editor and needs to be followed by a p node
+      var isLast = isLastNode(newEditor, node);
+      if (isLast) {
+        Transforms.insertNodes(newEditor, genEmptyParagraph(), {
+          at: [path[0] + 1]
+        });
+      }
+
+      // There must be a code node below code-block
+      if (getNodeType(node.children[0]) !== 'code-line') {
+        Transforms.unwrapNodes(newEditor);
+        Transforms.setNodes(newEditor, {
+          type: 'paragraph'
+        }, {
+          mode: 'highest'
+        });
+      }
+    }
+
+    // Perform default behavior
+    return normalizeNode([node, path]);
+  };
+
+  // Rewrite insertData - Paste text
+  newEditor.insertData = function (data) {
+    var codeNode = getSelectedNodeByType(newEditor, CODE_BLOCK);
+    if (codeNode == null) {
+      insertData(data); // Perform default insertData
+      return;
+    }
+
+    // Gets the text and inserts it into the code block
+    var text = data.getData('text/plain');
+    Editor.insertText(newEditor, text);
+  };
+  return newEditor;
+};
+export default withCodeBlock;

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

@@ -0,0 +1,107 @@
+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 '../../../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];
+    }
+    _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);
+    }
+  }, {
+    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")));
+    }
+  }]);
+  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 _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);
+export var renderCodeBlock = function renderCodeBlock(props, editor) {
+  return /*#__PURE__*/React.createElement(CodeBlock, {
+    codeBlockProps: _objectSpread({}, props),
+    editor: editor
+  });
+};

package/dist/extension/plugins/header/helpers.js

@@ -1,12 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Editor, Transforms } from "@seafile/slate";
-import { getNodeType } from "../../core";
+import { Editor, Transforms } from '@seafile/slate';
+import { getNodeType } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   if (!editor.selection) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {
         var type = getNodeType(n);
-        if (type === 'paragraph') return true;
+        if (['code-line', 'code-block', 'paragraph'].includes(type)) return true;
         if (type.startsWith('header')) return true;
         return false;
       },

package/dist/extension/plugins/index.js

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

package/dist/extension/plugins/link/helpers.js

@@ -10,7 +10,7 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
   var notMatch = selectedElems.some(function (elem) {
     var type = elem.type;
     if (editor.isVoid(elem)) return true;
-    if (['pre', 'code', 'link'].includes(type)) return true;
+    if (['code-block', 'code-line', 'link'].includes(type)) return true;
     return false;
   });
   if (notMatch) return true; // disabled

package/dist/extension/plugins/link/menu/add-link-dialog.js

@@ -143,4 +143,4 @@ var AddLinkDialog = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return AddLinkDialog;
 }(React.PureComponent);
-export default withTranslation('seafile-editor')(AddLinkDialog);
+export default withTranslation('sdoc-editor')(AddLinkDialog);

package/dist/extension/plugins/list/helpers.js

@@ -27,7 +27,7 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
   var notMatch = selectedElements.some(function (element) {
     if (Editor.isVoid(editor, element) && Editor.isBlock(editor, element)) return true;
     var type = element.type;
-    if (['pre', 'code', 'table', 'check-list-item'].includes(type)) return true;
+    if (['code-line', 'code-block', 'table', 'check-list-item'].includes(type)) return true;
     return false;
   });
   if (notMatch) return true;

package/dist/extension/plugins/list/render-elem.js

@@ -7,7 +7,7 @@ var renderList = function renderList(props, editor) {
   var Tag = node.type === ORDERED_LIST ? 'ol' : 'ul';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
     "data-id": node.id,
-    className: "dlThau"
+    className: "list-container"
   }, attributes), children);
 };
 var renderListItem = function renderListItem(props, editor) {

package/dist/extension/plugins/text-style/helpers.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Transforms } from '@seafile/slate';
+import { getNodeType } from '../../core';
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  if (editor.selection == null) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if (type === 'code-block') return true; // Code block
+        if (Editor.isVoid(editor, n)) return true; // void node
+
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+
+  // If yes, it is disabled
+  if (match) return true;
+  return false;
+};
+export var addMark = function addMark(editor, type) {
+  Editor.addMark(editor, type, true);
+};
+export var removeMark = function removeMark(editor, type) {
+  Editor.removeMark(editor, type);
+  Transforms.setNodes(editor, {
+    type: 'paragraph'
+  }, {
+    mode: 'highest'
+  });
+};
+
+// Whether mark is included
+export var getValue = function getValue(editor, mark) {
+  var curMarks = Editor.marks(editor);
+
+  // If curMarks exists, you need to set this parameter manually. curMarks prevails
+  if (curMarks) {
+    return curMarks[mark];
+  } else {
+    var _Editor$nodes3 = Editor.nodes(editor, {
+        match: function match(n) {
+          return n[mark] === true;
+        }
+      }),
+      _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
+      match = _Editor$nodes4[0];
+    return !!match;
+  }
+};

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

@@ -0,0 +1,81 @@
+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 { TEXTSTYLE, MENUS_CONFIG_MAP } from '../../../constants';
+import { focusEditor } from '../../../core';
+import { MenuItem } from '../../../menu';
+import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
+var TextStyleMenuList = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextStyleMenuList, _React$Component);
+  var _super = _createSuper(TextStyleMenuList);
+  function TextStyleMenuList(props) {
+    var _this;
+    _classCallCheck(this, TextStyleMenuList);
+    _this = _super.call(this, props);
+    _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.state = {
+      isShowLinkDialog: false
+    };
+    return _this;
+  }
+  _createClass(TextStyleMenuList, [{
+    key: "getTextStyleMenuList",
+    value: function getTextStyleMenuList() {
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className,
+        editor = _this$props.editor;
+      var textStyleMenuList = [{
+        isRichEditor: isRichEditor,
+        className: className,
+        disabled: this.isDisabled(),
+        isActive: this.isActive(editor, 'ITALIC'),
+        onMouseDown: this.onMouseDown
+      }, {
+        isRichEditor: isRichEditor,
+        className: className,
+        disabled: this.isDisabled(),
+        isActive: this.isActive(editor, 'BOLD'),
+        onMouseDown: this.onMouseDown
+      }];
+      return textStyleMenuList;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var textStyleMenuList = this.getTextStyleMenuList();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, textStyleMenuList.map(function (menuItem, index) {
+        var menuItemConfig = MENUS_CONFIG_MAP[TEXTSTYLE][index];
+        var menuItemProps = _objectSpread(_objectSpread({}, menuItem), menuItemConfig);
+        return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+          key: index
+        }, menuItemProps));
+      }));
+    }
+  }]);
+  return TextStyleMenuList;
+}(React.Component);
+export default TextStyleMenuList;

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST } from '../constants';
-import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin } from '../plugins';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin } from '../plugins';
 var renderElement = function renderElement(props, editor) {
   var attributes = props.attributes,
     children = props.children,
@@ -61,6 +61,12 @@ var renderElement = function renderElement(props, editor) {
           editor: editor
         }));
       }
+    case CODE_BLOCK:
+      {
+        var _CodeBlockPlugin$rend = _slicedToArray(CodeBlockPlugin.renderElements, 1),
+          renderCodeBlock = _CodeBlockPlugin$rend[0];
+        return renderCodeBlock(props, editor);
+      }
     default:
       {
         return /*#__PURE__*/React.createElement("p", Object.assign({

package/dist/extension/toolbar/index.js

@@ -10,6 +10,8 @@ import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
 import HeaderMenu from '../plugins/header/menu';
 import CheckListMenu from '../plugins/check-list/menu';
 import { MenuGroup } from '../menu';
+import TextStyleMenuList from '../plugins/text-style/menu';
+import CodeBlockMenu from '../plugins/code-block/menu';
 import '../../assets/css/sdoc-editor-toolbar.css';
 var Toolbar = /*#__PURE__*/function (_React$Component) {
   _inherits(Toolbar, _React$Component);
@@ -22,10 +24,12 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement("div", {
-        className: "sf-editor-toolbar"
+        className: "sdoc-editor-toolbar"
       }, /*#__PURE__*/React.createElement(HeaderMenu, {
         editor: this.props.editor
-      }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(LinkMenu, {
+      }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
+        editor: this.props.editor
+      }), /*#__PURE__*/React.createElement(LinkMenu, {
         editor: this.props.editor
       }), /*#__PURE__*/React.createElement(QuoteMenu, {
         editor: this.props.editor
@@ -37,6 +41,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         type: ORDERED_LIST
       }), /*#__PURE__*/React.createElement(CheckListMenu, {
         editor: this.props.editor
+      }), /*#__PURE__*/React.createElement(CodeBlockMenu, {
+        editor: this.props.editor
       })));
     }
   }]);

package/dist/socket/helpers.js

@@ -61,11 +61,13 @@ export var validateOperation = function validateOperation(editor, operation) {
         }
 
         // reset insert node path
-        var parentNode = Node.get(editor, _path);
-        var childLength = parentNode.children.length;
-        var index = Math.min(_path[_path.length - 1], childLength);
-        newOperation.path = parentNodePath.concat([index]);
-        isValid = true;
+        var parentNode = getNode(editor, _path);
+        if (parentNode) {
+          var childLength = parentNode.children.length;
+          var index = Math.min(_path[_path.length - 1], childLength);
+          newOperation.path = parentNodePath.concat([index]);
+          isValid = true;
+        }
         break;
       }
     case OPERATION.REMOVE_NODE:

package/dist/socket/socket-client.js

@@ -2,9 +2,8 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import io from 'socket.io-client';
-import Debug from 'debug';
 import SocketManager from './socket-manager';
-var debug = Debug('sdoc:socket-client');
+import debug from '../utils/debug';
 var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   var _this = this;
   _classCallCheck(this, SocketClient);

package/dist/socket/socket-manager.js

@@ -1,10 +1,9 @@
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import Debug from 'debug';
 import EventBus from '../utils/event-bus';
 import { syncRemoteOperations, reExecRevertOperationList, revertOperationList } from './helpers';
 import SocketClient from './socket-client';
-var debug = Debug('sdoc:socket-client');
+import debug from '../utils/debug';
 var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, document, config) {
   var _this = this;
   _classCallCheck(this, SocketManager);
@@ -111,7 +110,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
           _this.revertOperationList = [];
         });
       } else {
-        // conflict: 
+        // conflict:
         // remote operations is not empty, waiting until remote operations all executed
         debug('remote operations is not empty, and local version is not match remote version.');
       }

package/dist/utils/debug.js

@@ -0,0 +1,5 @@
+import Debug from 'debug';
+var debug = Debug('sdoc:socket-client');
+debug.enabled = true;
+debug.log = console.log;
+export default debug;

package/dist/viewer.js

@@ -8,7 +8,8 @@ import isHotkey from 'is-hotkey';
 import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from './extension';
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
-import './assets/css/sdoc-editor.css';
+import './assets/css/layout.css';
+import './assets/css/sdoc-editor-content.css';
 var SDocViewer = /*#__PURE__*/function (_React$Component) {
   _inherits(SDocViewer, _React$Component);
   var _super = _createSuper(SDocViewer);

package/package.json

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

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

@@ -0,0 +1,225 @@
+{
+  "bold": "粗体",
+  "italic": "斜体",
+  "inline_code": "代码",
+  "header_one": "一级标题",
+  "header_two": "二级标题",
+  "header_three": "三级标题",
+  "header_four": "四级标题",
+  "header_five": "五级标题",
+  "header_six": "六级标题",
+  "paragraph": "段落",
+  "quote": "引用",
+  "ordered_list": "有序列表",
+  "unordered_list": "无序列表",
+  "check_list_item": "任务列表",
+  "insert_image": "插入图片",
+  "insert_formula": "插入公式",
+  "formula": "公式",
+  "insert_file": "插入文件",
+  "code": "行内代码",
+  "code_block": "代码块",
+  "insert_link": "添加链接",
+  "insert_table": "添加表格",
+  "save": "保存",
+  "more": "更多",
+  "invalid_url": "无效链接",
+  "link_address": "链接地址",
+  "image_address": "图片地址",
+  "submit": "提交",
+  "cancel": "取消",
+  "switch_to_plain_text_editor": "切换至普通文本编辑器",
+  "switch_to_rich_text_editor": "切换至富文本编辑器",
+  "switch_to_viewer": "切换到只读模式",
+  "help": "帮助",
+  "remove_table": "删除表格",
+  "column": "列",
+  "row": "行",
+  "Insert_Row_Before": "上方插入行",
+  "Insert_Row_After": "下方插入行",
+  "Insert_Column_Before": "左边插入列",
+  "Insert_Column_After": "右边插入列",
+  "Remove_Row": "删除当前行",
+  "Remove_Column": "删除当前列",
+  "Insert_Row": "插入行",
+  "Insert_Column": "插入列",
+  "set_align": "对齐方式",
+  "left": "左对齐",
+  "center": "居中",
+  "right": "右对齐",
+  "file_saved": "保存文件成功",
+  "file_failed_to_save": "保存文件失败",
+  "star": "添加星标",
+  "unstar": "移除星标",
+  "back_to_parent_directory":"返回上级目录",
+  "edit": "编辑",
+  "copy": "复制",
+  "copied": "已复制",
+  "internal_link": "内部链接",
+  "copy_internal_link": "内部链接已复制到剪贴板",
+  "internal_link_desc": "内部链接是指向文件或目录的链接，只有对该文件或目录有访问权限的人可以访问。",
+  "share": "共享",
+  "share_link": "共享链接",
+  "generate": "生成链接",
+  "add_password_protection": "增加密码保护",
+  "password": "密码",
+  "at_least_8_characters": "至少8个字符",
+  "password_again": "请再次输入密码",
+  "add_auto_expiration": "增加自动过期",
+  "days": "天",
+  "please_enter_password": "请输入密码",
+  "greater_than_or_equal_to": "大于或等于",
+  "less_than_or_equal_to": "小于或等于",
+  "set_permission": "设置权限",
+  "preview_and_download": "预览与下载",
+  "preview_only": "仅查看",
+  "please_enter_valid_days": "请输入有效的天数",
+  "please_enter_a_non-negative_integer": "请输入一个非负整数",
+  "please_enter_days": "请输入天数",
+  "password_is_too_short": "密码长度太短",
+  "passwords_do_not_match": "两次输入的密码不一致",
+  "return_to_wiki_page": "返回维基页面",
+  "insert_network_image": "插入网络图片",
+  "upload_local_image": "上传本地图片",
+  "add_link": "加入链接",
+  "file_history": "文件历史",
+  "history_version": "历史版本",
+  "back_to_viewer": "返回查看页面",
+  "link_title": "链接标题",
+  "local_draft": "本地草稿",
+  "use_draft": "使用草稿",
+  "delete_draft": "删除草稿",
+  "you_have_an_unsaved_draft_do_you_like_to_use_it": "有未保存的草稿，使用草稿吗？",
+  "local_draft_saved": "本地草稿已保存",
+  "new_draft": "创建草稿",
+  "view_draft": "查看草稿",
+  "publish": "发布",
+  "this_file_has_a_draft": "这个文件有一个草稿.", 
+  "delete": "删除",
+  "comments": "评论",
+  "add_a_comment": "增加评论",
+  "no_comment_yet": "还没有评论",
+  "Mark_as_Resolved": "标记为已解决",
+  "ask_for_review": "发起评审",
+  "review_already_exists": "评审已存在",
+  "view_review": "查看评审",
+  "there_is_an_associated_review_with_this_file": "有一个与此文件相关联的评审。",
+  "start_review": "开始评审",
+  "this_file_is_in_draft_stage": "该文件处于草稿阶段。",
+  "this_file_is_in_review_stage": "该文件处于评审阶段。",
+  "this_file_has_been_updated": "这个文件已被修改。",
+  "refresh": "刷新",
+  "related_files": "相关文件",
+  "related_file": "相关文件",
+  "no_tags": "没有标签",
+  "Date": "日期",
+  "Participants": "参与人",
+  "Meeting_note": "会议记录",
+  "Chooser_document_type": "选择文档类型",
+  "Empty": "空",
+  "no_related_files": "没有相关文件",
+  "no_out_line": "没有大纲",
+  "Editing_files_in_this_browser_can_lead_to_slight_display_problems": "在此浏览器中，编辑文件可能导致轻微的显示问题。",
+  "no_document_improvement_suggestion": "没有文档改进建议",
+  "Hide_side_panel": "隐藏侧旁栏",
+  "Show_side_panel": "显示侧旁栏",
+  "Show_resolved_comments": "显示已解决的评论",
+  "Update": "更新",
+  "Width": "宽度",
+  "Height": "高度",
+  "Full_screen": "全屏",
+  "Insert_library_image": "插入资料库图片",
+  "Size": "大小",
+  "Location": "位置",
+  "Last_Update": "更新时间",
+  "Tags": "标签",
+  "Related_Files": "相关文档",
+  "Add_participants": "增加文件参与人",
+  "markdownLint": {
+    "missing_h1": {
+      "description": "文档缺少一级标题",
+      "issue" : "缺少一级标题"
+    },
+    "heading_end_with_colon": {
+      "description": "标题末尾的标点符号不应该是冒号",
+      "issue": "标题末尾是冒号"
+    },
+    "heading_increase_irregular": {
+      "description": "标题级别一次只能增加一级",
+      "issue": "标题级别不规范"
+    }
+  },
+  "Shortcut_help": "快捷键帮助",
+  "userHelp": {
+    "title": "键盘快捷键",
+    "userHelpData": [
+      {
+        "shortcutType":"列表快捷键",
+        "shortcutData": {
+          "Make_list": "生成列表",
+          "Make_ordered_list": "生成有序列表",
+          "Insert_new_item": "插入列表项",
+          "Insert_child_in_item": "插入新段落",
+          "Increase_depth": "增加列表项深度"
+        }
+      }, {
+        "shortcutType": "标题快捷键",
+        "shortcutData": {
+          "Heading_1": "一级标题",
+          "Heading_2": "二级标题",
+          "Heading_3": "三级标题",
+          "Heading_4": "四级标题",
+          "Heading_5": "五级标题",
+          "Heading_6": "六级标题"
+        }
+      }, {
+        "shortcutType": "代码块快捷键",
+        "shortcutData": {
+          "Make_code_block": "生成代码块",
+          "Insert_new_line": "插入行",
+          "Escape_code_block": "退出代码块",
+          "Insert_indent": "缩进"
+        }
+      }, {
+        "shortcutType": "引用快捷键",
+        "shortcutData": {
+          "Make_Block_quote": "生成引用",
+          "Escape_Block_quote": "退出引用"
+        }
+      }, {
+        "shortcutType": "表格快捷键",
+        "shortcutData": {
+          "Insert_Table_Row": "插入行",
+          "Escape_table": "退出表格"
+        }
+      }, {
+        "shortcutType": "公式快捷键",
+        "shortcutData": {
+          "Insert_Formula": "插入公式"
+        }
+      }, {
+        "shortcutType":"行内快捷键",
+        "shortcutData": {
+          "Bold": "粗体",
+          "Italic": "斜体",
+          "Italic_Bold": "斜体粗体",
+          "Inline_code": "行内代码"
+        }
+      }, {
+        "shortcutType": "保存快捷键",
+        "shortcutData": {
+          "Save_file": "保存文件"
+        }
+      }, {
+        "shortcutType": "图片快捷键",
+        "shortcutData": {
+          "Paste_screen_shot": "粘贴屏幕截图",
+          "Drag_image_from_anywhere_to_upload_it": "从任意地方拖动图像以上传"
+        }
+      }
+    ]
+  },
+  "The_link_address_is_required": "链接地址是必填项。",
+  "The_link_title_is_required": "链接标题是必填项。",
+  "The_link_address_is_invalid": "链接地址不合法，请输入一个正确的链接地址。"
+}