@seafile/sdoc-editor 0.1.0 → 0.1.1

package/dist/editors/seatable-editor.js

@@ -1,210 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { Node, Editor } from 'slate';
-import { Editable, Slate } from '@seafile/slate-react';
-import Toolbar, { HelpGroup } from '../components/toolbar';
-import ModalPortal from '../components/modal-portal';
-import ContextMenu from '../components/context-menu';
-import TextLinkHoverMenu from '../components/text-link-hover-menu';
-import AddLinkDialog from '../components/dialogs/add-link-dialog';
-import KeyboardShortcuts from '../components/dialogs/shortcut-dialog';
-import ErrorBoundary from '../components/error-boundary';
-import { deserialize, serialize } from '../utils/slate2markdown/index';
-import { isRangeCollapsed } from '../containers/editor-utils/range-utils';
-import { renderNode, renderLeaf, decorationNode } from '../containers/render-utils/editor-utils';
-import EditorContext from '../containers/editor-context';
-import '../containers/code-highlight-package';
-import '../assets/editor/seatable-editor.css';
-import '../assets/css/image.css';
-import '../assets/css/link.css';
-import '../assets/css/navbar-imgbutton.css';
-var SeatableEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(SeatableEditor, _React$Component);
-  var _super = _createSuper(SeatableEditor);
-  function SeatableEditor(props) {
-    var _this;
-    _classCallCheck(this, SeatableEditor);
-    _this = _super.call(this, props);
-    _this.onChange = function (value) {
-      _this.setState({
-        value: value
-      });
-
-      // hide context menu when content change
-      if (_this.state.isShowContextMenu === true) {
-        _this.setState({
-          isShowContextMenu: false
-        });
-        _this.contextMenuPosition = {};
-      }
-      var operations = _this.editor.operations;
-      var hasChange = operations.some(function (o) {
-        return o.type !== 'set_selection' && o.type !== 'set_value';
-      });
-      if (hasChange) _this.contentChanged = true;
-    };
-    _this.onFocusEditor = function () {
-      var value = _this.state.value;
-      if (value.length === 1 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0) {
-        _this.editorRef.firstChild.focus();
-      }
-    };
-    _this.focusText = function () {
-      // In dtable long text editor, press the key to open the editor.
-      // Then the cursor should move to the end of this character.
-      var _this$props = _this.props,
-        focusEnd = _this$props.focusEnd,
-        value = _this$props.value;
-      if (focusEnd === true && value.length === 1) {
-        setTimeout(function () {
-          Editor.select(_this.editor, {
-            path: [0, 0],
-            offset: 1
-          });
-        }, 1);
-      }
-    };
-    _this.hasContentChange = function () {
-      return _this.contentChanged;
-    };
-    _this.onContextMenu = function (event) {
-      if (_this.tableUtils.isInTable()) {
-        event.preventDefault();
-        _this.contextMenuPosition = {
-          left: event.clientX,
-          top: event.clientY
-        };
-        _this.setState({
-          isShowContextMenu: !_this.state.isShowContextMenu
-        });
-      }
-    };
-    _this.onCut = function (event) {
-      _this.editorUtils.onCut(event);
-    };
-    _this.onCopy = function (event) {
-      _this.editorUtils.onCopy(event, _this.editor);
-    };
-    _this.onKeyDown = function (event) {
-      _this.editorUtils.onKeyDown(event);
-    };
-    _this.toggleShortcutDialog = function () {
-      _this.setState({
-        isShowShortcutDialog: !_this.state.isShowShortcutDialog
-      });
-    };
-    _this.onToggleLinkDialog = function () {
-      _this.setState({
-        isShowLinkDialog: !_this.state.isShowLinkDialog
-      });
-    };
-    _this.setEditorRef = function (ref) {
-      _this.editorRef = ref;
-    };
-    var _value = props.value ? JSON.parse(props.value) : deserialize('');
-    _this.state = {
-      value: _value,
-      isShowBigImage: false,
-      isShowContextMenu: false,
-      isShowShortcutDialog: false,
-      isShowLinkDialog: false
-    };
-    _this.editor = EditorContext.getEditor(props);
-    _this.editorUtils = EditorContext.getEditorUtils();
-    _this.tableUtils = EditorContext.getTableUtils();
-    _this.contextMenuPosition = {};
-    return _this;
-  }
-  _createClass(SeatableEditor, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.onRef(this);
-      this.focusText();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      EditorContext.resetEditor();
-    }
-  }, {
-    key: "getMarkdown",
-    value: function getMarkdown() {
-      this.contentChanged = false;
-      return serialize(this.state.value);
-    }
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      return JSON.stringify(this.state.value);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var editor = this.editor;
-      var value = this.state.value;
-      var toolbarStatus = this.editorUtils.getToolbarStatus();
-      var _this$props2 = this.props,
-        readOnly = _this$props2.readOnly,
-        canInsertColumn = _this$props2.canInsertColumn,
-        columns = _this$props2.columns,
-        t = _this$props2.t;
-      var supportInsertColumn = canInsertColumn && columns.length > 0;
-      var selectionCollapsed = isRangeCollapsed(editor.selection);
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
-        className: "seatable-simple-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-topbar"
-      }, /*#__PURE__*/React.createElement(Toolbar, {
-        isSimpleEditor: true,
-        canInsertColumn: supportInsertColumn
-      }), /*#__PURE__*/React.createElement(HelpGroup, {
-        onHelpToggle: this.toggleShortcutDialog
-      })), /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: value,
-        onChange: this.onChange
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-module editor-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorRef,
-        onClick: this.onFocusEditor,
-        className: "editor article"
-      }, /*#__PURE__*/React.createElement(Editable, {
-        autoFocus: true,
-        className: 'editor-component',
-        renderElement: function renderElement(props) {
-          return renderNode(props, editor, readOnly);
-        },
-        renderLeaf: renderLeaf,
-        onContextMenu: this.onContextMenu,
-        onCut: this.onCut,
-        onCopy: this.onCopy,
-        onKeyDown: this.onKeyDown,
-        decorate: decorationNode
-      })), toolbarStatus.isLinkActive && selectionCollapsed ? /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
-        onToggleLinkDialog: this.onToggleLinkDialog,
-        editorUtils: this.editorUtils
-      })) : null, this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
-        tableUtils: this.tableUtils,
-        contextMenuPosition: this.contextMenuPosition
-      })), this.state.isShowShortcutDialog && /*#__PURE__*/React.createElement(KeyboardShortcuts, {
-        userHelp: t('userHelp', {
-          returnObjects: true
-        }),
-        toggleShortcutDialog: this.toggleShortcutDialog
-      }), this.state.isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
-        toggleLinkDialog: this.onToggleLinkDialog
-      })))));
-    }
-  }]);
-  return SeatableEditor;
-}(React.Component);
-SeatableEditor.defaultProps = {
-  columns: [],
-  canInsertColumn: false
-};
-export default withTranslation('seafile-editor')(SeatableEditor);

package/dist/editors/simple-editor.js

@@ -1,200 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { Node, Editor } from 'slate';
-import { Editable, Slate } from '@seafile/slate-react';
-import Toolbar, { HelpGroup } from '../components/toolbar';
-import ModalPortal from '../components/modal-portal';
-import ContextMenu from '../components/context-menu';
-import TextLinkHoverMenu from '../components//text-link-hover-menu';
-import AddLinkDialog from '../components/dialogs/add-link-dialog';
-import KeyboardShortcuts from '../components/dialogs/shortcut-dialog';
-import { deserialize, serialize } from '../utils/slate2markdown/index';
-import { isRangeCollapsed } from '../containers/editor-utils/range-utils';
-import { renderNode, renderLeaf, decorationNode } from '../containers/render-utils/editor-utils';
-import EditorContext from '../containers/editor-context';
-import '../containers/code-highlight-package';
-import '../assets/editor/simple-editor.css';
-import '../assets/css/image.css';
-import '../assets/css/link.css';
-import '../assets/css/navbar-imgbutton.css';
-var SimpleEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(SimpleEditor, _React$Component);
-  var _super = _createSuper(SimpleEditor);
-  function SimpleEditor(props) {
-    var _this;
-    _classCallCheck(this, SimpleEditor);
-    _this = _super.call(this, props);
-    _this.onChange = function (value) {
-      _this.setState({
-        value: value
-      });
-
-      // hide context menu when content change
-      if (_this.state.isShowContextMenu === true) {
-        _this.setState({
-          isShowContextMenu: false
-        });
-        _this.contextMenuPosition = {};
-      }
-      var operations = _this.editor.operations;
-      var hasChange = operations.some(function (o) {
-        return o.type !== 'set_selection' && o.type !== 'set_value';
-      });
-      if (hasChange) _this.contentChanged = true;
-    };
-    _this.onFocusEditor = function () {
-      var value = _this.state.value;
-      if (value.length === 1 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0) {
-        _this.editorRef.firstChild.focus();
-      }
-    };
-    _this.focusText = function () {
-      // In dtable long text editor, press the key to open the editor.
-      // Then the cursor should move to the end of this character.
-      var _this$props = _this.props,
-        focusEnd = _this$props.focusEnd,
-        value = _this$props.value;
-      if (focusEnd === true && value.length === 1) {
-        setTimeout(function () {
-          Editor.select(_this.editor, {
-            path: [0, 0],
-            offset: 1
-          });
-        }, 1);
-      }
-    };
-    _this.hasContentChange = function () {
-      return _this.contentChanged;
-    };
-    _this.onContextMenu = function (event) {
-      if (_this.tableUtils.isInTable()) {
-        event.preventDefault();
-        _this.contextMenuPosition = {
-          left: event.clientX,
-          top: event.clientY
-        };
-        _this.setState({
-          isShowContextMenu: !_this.state.isShowContextMenu
-        });
-      }
-    };
-    _this.onCut = function (event) {
-      _this.editorUtils.onCut(event);
-    };
-    _this.onCopy = function (event) {
-      _this.editorUtils.onCopy(event, _this.editor);
-    };
-    _this.onKeyDown = function (event) {
-      _this.editorUtils.onKeyDown(event);
-    };
-    _this.toggleShortcutDialog = function () {
-      _this.setState({
-        isShowShortcutDialog: !_this.state.isShowShortcutDialog
-      });
-    };
-    _this.onToggleLinkDialog = function () {
-      _this.setState({
-        isShowLinkDialog: !_this.state.isShowLinkDialog
-      });
-    };
-    _this.setEditorRef = function (ref) {
-      _this.editorRef = ref;
-    };
-    _this.state = {
-      value: deserialize(props.value),
-      isShowBigImage: false,
-      isShowContextMenu: false,
-      isShowShortcutDialog: false,
-      isShowLinkDialog: false
-    };
-    _this.editor = EditorContext.getEditor(props);
-    _this.editorUtils = EditorContext.getEditorUtils();
-    _this.tableUtils = EditorContext.getTableUtils();
-    _this.contextMenuPosition = {};
-    return _this;
-  }
-  _createClass(SimpleEditor, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.onRef(this);
-      this.focusText();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      EditorContext.resetEditor();
-    }
-  }, {
-    key: "getMarkdown",
-    value: function getMarkdown() {
-      this.contentChanged = false;
-      return serialize(this.state.value);
-    }
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      return this.state.value;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var editor = this.editor;
-      var value = this.state.value;
-      var toolbarStatus = this.editorUtils.getToolbarStatus();
-      var _this$props2 = this.props,
-        readOnly = _this$props2.readOnly,
-        t = _this$props2.t;
-      var selectionCollapsed = isRangeCollapsed(editor.selection);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "seafile-simple-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-topbar"
-      }, /*#__PURE__*/React.createElement(Toolbar, {
-        isSimpleEditor: true
-      }), /*#__PURE__*/React.createElement(HelpGroup, {
-        onHelpToggle: this.toggleShortcutDialog
-      })), /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: value,
-        onChange: this.onChange
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-module editor-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorRef,
-        onClick: this.onFocusEditor,
-        className: "editor article"
-      }, /*#__PURE__*/React.createElement(Editable, {
-        autoFocus: true,
-        renderElement: function renderElement(props) {
-          return renderNode(props, editor, readOnly);
-        },
-        className: 'editor-component',
-        renderLeaf: renderLeaf,
-        onContextMenu: this.onContextMenu,
-        onCut: this.onCut,
-        onCopy: this.onCopy,
-        onKeyDown: this.onKeyDown,
-        decorate: decorationNode
-      })), toolbarStatus.isLinkActive && selectionCollapsed ? /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
-        onToggleLinkDialog: this.onToggleLinkDialog,
-        editorUtils: this.editorUtils
-      })) : null, this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
-        tableUtils: this.tableUtils,
-        contextMenuPosition: this.contextMenuPosition
-      })), this.state.isShowShortcutDialog && /*#__PURE__*/React.createElement(KeyboardShortcuts, {
-        userHelp: t('userHelp', {
-          returnObjects: true
-        }),
-        toggleShortcutDialog: this.toggleShortcutDialog
-      }), this.state.isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
-        toggleLinkDialog: this.onToggleLinkDialog
-      }))));
-    }
-  }]);
-  return SimpleEditor;
-}(React.Component);
-export default withTranslation('seafile-editor')(SimpleEditor);

package/dist/utils/deserialize-html.js

@@ -1,260 +0,0 @@
-import { generateTableRow, generateTableCell } from '../containers/element-model/table';
-import { jsx } from 'slate-hyperscript';
-var ELEMENT_TAGS = {
-  A: function A(el) {
-    return {
-      type: 'link',
-      data: {
-        href: el.getAttribute('href')
-      }
-    };
-  },
-  BLOCKQUOTE: function BLOCKQUOTE() {
-    return {
-      type: 'blockquote'
-    };
-  },
-  H1: function H1() {
-    return {
-      type: 'header_one'
-    };
-  },
-  H2: function H2() {
-    return {
-      type: 'header_two'
-    };
-  },
-  H3: function H3() {
-    return {
-      type: 'header_three'
-    };
-  },
-  H4: function H4() {
-    return {
-      type: 'header_four'
-    };
-  },
-  H5: function H5() {
-    return {
-      type: 'header_five'
-    };
-  },
-  H6: function H6() {
-    return {
-      type: 'header_six'
-    };
-  },
-  IMG: function IMG(el) {
-    return {
-      type: 'image',
-      children: [{
-        text: ''
-      }],
-      data: {
-        src: el.getAttribute('src')
-      }
-    };
-  },
-  LI: function LI() {
-    return {
-      type: 'list_item',
-      data: {}
-    };
-  },
-  OL: function OL() {
-    return {
-      type: 'ordered_list'
-    };
-  },
-  P: function P() {
-    return {
-      type: 'paragraph'
-    };
-  },
-  UL: function UL() {
-    return {
-      type: 'unordered_list'
-    };
-  },
-  TABLE: function TABLE() {
-    return {
-      type: 'table'
-    };
-  },
-  BR: function BR() {
-    return {
-      text: ''
-    };
-  }
-};
-var HEADER_LIST = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
-var TEXT_TAGS = {
-  CODE: function CODE() {
-    return {
-      CODE: true
-    };
-  },
-  DEL: function DEL() {
-    return {
-      DELETE: true
-    };
-  },
-  EM: function EM() {
-    return {
-      ITALIC: true
-    };
-  },
-  I: function I() {
-    return {
-      ITALIC: true
-    };
-  },
-  STRONG: function STRONG() {
-    return {
-      BOLD: true
-    };
-  },
-  INS: function INS() {
-    return {
-      INS: true
-    };
-  }
-};
-var parseTable = function parseTable(el) {
-  if (el.parentNode.nodeName !== 'BODY') {
-    return null;
-  }
-  var tableWidth = 0;
-  Array.from(el.rows[0].childNodes).forEach(function (cell, index) {
-    if (cell.nodeName === 'TD' || cell.nodeName === 'TH') {
-      tableWidth += Number(cell.getAttribute('colspan')) || 1;
-    }
-  });
-  var rowList = [];
-  for (var rowIndex = 0; rowIndex < el.rows.length; rowIndex++) {
-    var cells = el.rows[rowIndex].cells;
-    var cellsList = [];
-    for (var columnIndex = 0; columnIndex < cells.length; columnIndex++) {
-      var cell = cells[columnIndex];
-      cellsList.push(generateTableCell({
-        children: [{
-          type: 'paragraph',
-          children: [{
-            text: cell.textContent
-          }]
-        }]
-      }));
-    }
-    if (cellsList.length < tableWidth) {
-      var count = tableWidth - cellsList.length;
-      for (var i = 0; i < count; i++) {
-        cellsList.push(generateTableCell({
-          children: [{
-            type: 'paragraph',
-            children: [{
-              text: ''
-            }]
-          }]
-        }));
-      }
-    }
-    rowList.push(generateTableRow({
-      children: cellsList
-    }));
-  }
-  return rowList;
-};
-var deserializeHtml = function deserializeHtml(el) {
-  if (el.nodeType === 3) {
-    // remove \n character
-    if (el.textContent === '\n' || el.textContent === '\r') {
-      return null;
-    }
-    if (el.parentElement.nodeName === 'BODY') {
-      var text = el.textContent.replace(/(\n|\r\n)/g, '');
-      if (text.length === 0) return null;
-      return {
-        type: 'paragraph',
-        children: [{
-          text: text
-        }]
-      };
-    }
-    return el.textContent;
-  } else if (el.nodeType !== 1) {
-    return null;
-  }
-  var nodeName = el.nodeName;
-  var parent = el;
-  var children = Array.from(parent.childNodes).map(deserializeHtml).flat();
-
-  // deserialize task list
-  if (nodeName === 'LI') {
-    if (el.className && el.className.indexOf('task-list-item') >= 0) {
-      return jsx('element', {
-        data: {
-          checked: false
-        },
-        type: 'list_item'
-      }, children);
-    }
-  }
-  if (nodeName === 'PRE' && el.childNodes[0] && el.childNodes[0].nodeName === 'CODE') {
-    // deserialize code block
-    var code = el.childNodes[0];
-    var codeChildren = [];
-    code.childNodes.forEach(function (codeLine, index) {
-      if (codeLine.innerText) {
-        codeChildren.push({
-          type: 'code_line',
-          children: [{
-            text: codeLine.innerText
-          }]
-        });
-      }
-    });
-    return {
-      data: {
-        syntax: null
-      },
-      children: codeChildren,
-      type: 'code_block'
-    };
-  }
-  if (el.nodeName === 'BODY') {
-    return jsx('fragment', {}, children);
-  }
-  if (ELEMENT_TAGS[nodeName]) {
-    var attrs = ELEMENT_TAGS[nodeName](el);
-    if (nodeName === 'IMG') {
-      return jsx('element', attrs, [{
-        text: ''
-      }]);
-    }
-
-    // modify BR into an empty text node
-    if (nodeName === 'BR') {
-      return '';
-    }
-    if (nodeName === 'TABLE') {
-      return jsx('element', attrs, parseTable(el));
-    }
-    if (nodeName === 'A' || HEADER_LIST.includes(nodeName)) {
-      return jsx('element', attrs, [{
-        text: el.textContent
-      }]);
-    }
-    return jsx('element', attrs, children);
-  }
-  if (TEXT_TAGS[nodeName]) {
-    var _attrs = TEXT_TAGS[nodeName](el);
-    return children.map(function (child) {
-      return jsx('text', _attrs, child);
-    });
-  }
-  return children;
-};
-export var htmlDeserializer = function htmlDeserializer(html) {
-  var parsed = new DOMParser().parseFromString(html, 'text/html');
-  return deserializeHtml(parsed.body);
-};

package/dist/utils/diff/compare-strings.js

@@ -1,35 +0,0 @@
-function compareTwoStrings(str1, str2) {
-  if (!str1.length && !str2.length) return 1; // if both are empty strings
-  if (!str1.length || !str2.length) return 0; // if only one is empty string
-  if (str1.toUpperCase() === str2.toUpperCase()) return 1; // identical
-  if (str1.length === 1 && str2.length === 1) return 0; // both are 1-letter strings
-
-  var pairs1 = wordLetterPairs(str1);
-  var pairs2 = wordLetterPairs(str2);
-  var union = pairs1.length + pairs2.length;
-  var intersection = 0;
-  pairs1.forEach(function (pair1) {
-    for (var i = 0, pair2; pair2 = pairs2[i]; i++) {
-      if (pair1 !== pair2) continue;
-      intersection++;
-      pairs2.splice(i, 1);
-      break;
-    }
-  });
-  return intersection * 2 / union;
-}
-function flattenDeep(arr) {
-  return Array.isArray(arr) ? arr.reduce(function (a, b) {
-    return a.concat(flattenDeep(b));
-  }, []) : [arr];
-}
-function letterPairs(str) {
-  var pairs = [];
-  for (var i = 0, max = str.length - 1; i < max; i++) pairs[i] = str.substring(i, i + 2);
-  return pairs;
-}
-function wordLetterPairs(str) {
-  var pairs = str.toUpperCase().split(' ').map(letterPairs);
-  return flattenDeep(pairs);
-}
-export { compareTwoStrings };