@seafile/sdoc-editor 0.1.5 → 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/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/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);
+}), _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/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/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.5",
+  "version": "0.1.6",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",