@seafile/sdoc-editor 0.1.5 → 0.1.7

package/dist/api/sdoc-server-api.js

@@ -0,0 +1,53 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import axios from 'axios';
+var SDocServerApi = /*#__PURE__*/function () {
+  function SDocServerApi(options) {
+    _classCallCheck(this, SDocServerApi);
+    if (!options.docUuid) {
+      throw new Error('settings has no docUuid');
+    }
+    if (!options.sdocServer) {
+      throw new Error('settings has no sdocServer');
+    }
+    if (!options.accessToken) {
+      throw new Error('settings has no accessToken');
+    }
+    this.server = options.sdocServer;
+    this.docUuid = options.docUuid;
+    this.accessToken = options.accessToken;
+  }
+  _createClass(SDocServerApi, [{
+    key: "getDocContent",
+    value: function getDocContent(docPath, docName) {
+      var server = this.server,
+        docUuid = this.docUuid,
+        accessToken = this.accessToken;
+      var url = "".concat(server, "/api/v1/docs/").concat(docUuid, "/?doc_path=").concat(encodeURIComponent(docPath), "&doc_name=").concat(encodeURIComponent(docName));
+      return axios.get(url, {
+        headers: {
+          Authorization: "Token ".concat(accessToken)
+        }
+      });
+    }
+  }, {
+    key: "saveDocContent",
+    value: function saveDocContent(docPath, docName, content) {
+      var server = this.server,
+        docUuid = this.docUuid,
+        accessToken = this.accessToken;
+      var url = "".concat(server, "/api/v1/docs/").concat(docUuid, "/");
+      var formData = new FormData();
+      formData.append('doc_path', docPath);
+      formData.append('doc_name', docName);
+      formData.append('doc_content', content);
+      return axios.post(url, formData, {
+        headers: {
+          Authorization: "Token ".concat(accessToken)
+        }
+      });
+    }
+  }]);
+  return SDocServerApi;
+}();
+export default SDocServerApi;

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

@@ -0,0 +1,28 @@
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+.markdown-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.markdown-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 1rem;
+}
+
+.markdown-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}

package/dist/basic-sdk/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 → basic-sdk/assets/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/basic-sdk/assets/css/sdoc-editor-plugins.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 → basic-sdk/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 → basic-sdk/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-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SDocEditor, _React$Component);
   var _super = _createSuper(SDocEditor);
@@ -16,6 +17,9 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, SDocEditor);
     _this = _super.call(this, props);
+    _this.getSocketManager = function () {
+      return _this.socketManager;
+    };
     _this.onChange = function (slateValue) {
       var onValueChanged = _this.props.onValueChanged;
       _this.setState({
@@ -47,25 +51,29 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         this.socketManager = SocketManager.getInstance(this.editor, document, config);
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.socketManager.closeSocketConnect();
+      this.socketManager = null;
+    }
   }, {
     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 → basic-sdk/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 → basic-sdk/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 → basic-sdk/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 → basic-sdk/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/basic-sdk/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/basic-sdk/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/basic-sdk/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/basic-sdk/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;