@seafile/sdoc-editor 2.0.65 → 2.0.67

package/dist/plugin-module/assets/css/sdoc-editor-plugins.css

@@ -0,0 +1,320 @@
+/* header */
+.sdoc-editor__article .sdoc-header-title,
+.sdoc-editor__article .sdoc-header-subtitle,
+.sdoc-editor__article .sdoc-header-1,
+.sdoc-editor__article .sdoc-header-2,
+.sdoc-editor__article .sdoc-header-3,
+.sdoc-editor__article .sdoc-header-4,
+.sdoc-editor__article .sdoc-header-5,
+.sdoc-editor__article .sdoc-header-6 {
+  line-height: 1.1;
+  margin: 1.2em 0 0.4em;
+  font-weight: bold;
+}
+
+.sdoc-editor__article .sdoc-header-2,
+.sdoc-editor__article .sdoc-header-3 {
+  line-height: 1.5;
+}
+
+.sdoc-editor__article .sdoc-header-4 {
+  line-height: 1.125;
+}
+
+/* list  */
+.sdoc-editor__article .list-container {
+  margin: 0;
+  /* override seafile-ui padding */
+  padding-left: 1.2em !important;
+}
+
+.sdoc-editor__article .list-container .sdoc-li-bold::marker {
+  font-weight: bold;
+}
+
+/* check list  */
+.sdoc-editor__article .sdoc-checkbox-container {
+  padding: 0px 2px;
+}
+
+.sdoc-editor__article .sdoc-checkbox-container .sdoc-checkbox-input-wrapper {
+  display: flex;
+  align-items: normal;
+}
+
+.sdoc-editor__article .sdoc-checkbox-container .sdoc-checkbox-input-wrapper .sdoc-checkbox-input {
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.sdoc-editor__article .sdoc-checkbox-container .sdoc-checkbox-input-wrapper .sdoc-checkbox-content-container {
+  word-break: normal;
+  width: calc(100% - 1em);
+  margin: 0;
+  padding: 5px 0;
+}
+
+/* image */
+.sdoc-editor__article .sdoc-image-wrapper {
+  position: relative;
+  display: inline-block;
+  margin: 5px 0.15em;
+  caret-color: transparent;
+}
+
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-placeholder-wrapper {
+  width: 100%;
+  aspect-ratio: 1;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 0 3%;
+  max-width: 100%;
+  user-select: all;
+  pointer-events: all;
+}
+
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-tip-content,
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-title {
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-exclamation-circle {
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+  display: flex;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-image-tip-title {
+  color: red;
+  font-size: 18px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-inner {
+  position: relative;
+  display: inline-block;
+  margin: 0 3px;
+}
+
+.sdoc-editor__article .sdoc-image-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sdoc-editor__article .sdoc-image-content :first-child {
+  position: relative;
+}
+
+.sdoc-editor__article .sdoc-image-content .sdoc-image-caption-input-wrapper {
+  border: 0;
+  outline: none;
+  margin-top: 8px;
+  color: #8A8F8D;
+  background-color: transparent;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  caret-color: blue;
+}
+
+.sdoc-editor__article .sdoc-image-content .sdoc-image-caption-input-wrapper::placeholder {
+  color: #bec0bf
+}
+
+.sdoc-editor__article .image-selected {
+  box-shadow: 0 0 0 2px #007bff;
+}
+
+.sdoc-editor__article .image-resizer {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  background-color: #007bff;
+  border: 1px solid #fff;
+  cursor: se-resize;
+}
+
+.sdoc-editor__article .image-full-screen {
+  position: absolute;
+  height: 26px;
+  display: inline-block;
+  width: 26px;
+  top: 0;
+  right: -32px;
+  text-align: center;
+  line-height: 20px;
+  padding: 2px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  background-color: #fff;
+  user-select: none !important;
+  z-index: 1000;
+}
+
+.sdoc-editor__article .image-full-screen:hover {
+  display: block;
+  background-color: #efefef;
+}
+
+.sdoc-editor__article .image-size {
+  display: inline-block;
+  padding: 5px;
+  white-space: nowrap;
+  height: 22px;
+  position: absolute;
+  bottom: -25px;
+  left: 100%;
+  z-index: 1;
+  transform: translateX(5px);
+  border-radius: 3px;
+  line-height: 12px;
+  color: #fff;
+  background-color: #4c4c4c;
+  font-size: 12px;
+}
+
+.sdoc-insert-image-menu-popover-container {
+  padding: 8px 0;
+}
+
+.sdoc-insert-video-menu-popover-container {
+  padding: 8px 0;
+}
+
+/* caret */
+.sdoc-editor__article .caret-item .caret-name::before {
+  content: attr(name);
+}
+
+.sdoc-editor__article .caret-item .caret-name {
+  display: none;
+}
+
+.sdoc-editor__article .caret-item:hover .caret-name {
+  display: block;
+}
+
+/* link */
+.sdoc-editor__article .virtual-link {
+  color: #eb8205;
+}
+
+.sdoc-editor__article .virtual-link:hover {
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+/* code_block */
+.sdoc-code-block-container {
+  position: relative;
+}
+
+.sdoc-code-block-pre {
+  background: #FAFAFA;
+  border: 1px solid #f0f0f0;
+}
+
+.sdoc-code-block-pre .sdoc-code-no-wrap {
+  white-space: nowrap;
+}
+
+.sdoc-code-block-pre .sdoc-code-no-wrap .sdoc-code-line>span {
+  white-space: pre;
+}
+
+.sdoc-code-block-code .sdoc-code-line {
+  position: relative;
+  counter-increment: number;
+  margin-left: 32px;
+}
+
+.sdoc-code-block-code .sdoc-code-line::before {
+  content: counter(number);
+  color: #ccc;
+  width: 40px;
+  text-align: end;
+  position: absolute;
+  left: -50px;
+}
+
+.sdoc-code-line .token.comment,
+.sdoc-code-line .token.prolog,
+.sdoc-code-line .token.doctype,
+.sdoc-code-line .token.cdata {
+  color: slategray;
+}
+
+.sdoc-code-line .token.punctuation {
+  color: #999;
+}
+
+.sdoc-code-line .token.namespace {
+  opacity: .7;
+}
+
+.sdoc-code-line .token.property,
+.sdoc-code-line .token.tag,
+.sdoc-code-line .token.boolean,
+.sdoc-code-line .token.number,
+.sdoc-code-line .token.constant,
+.sdoc-code-line .token.symbol,
+.sdoc-code-line .token.deleted {
+  color: #905;
+  padding: 0rem;
+}
+
+.sdoc-code-line .token.selector,
+.sdoc-code-line .token.attr-name,
+.sdoc-code-line .token.string,
+.sdoc-code-line .token.char,
+.sdoc-code-line .token.builtin,
+.sdoc-code-line .token.inserted {
+  color: #690;
+}
+
+.sdoc-code-line .token.operator,
+.sdoc-code-line .token.entity,
+.sdoc-code-line .token.url,
+.sdoc-code-line .language-css .token.string,
+.sdoc-code-line .style .token.string {
+  color: #9a6e3a;
+}
+
+.sdoc-code-line .token.atrule,
+.sdoc-code-line .token.attr-value,
+.sdoc-code-line .token.keyword {
+  color: #07a;
+}
+
+.sdoc-code-line .token.function,
+.sdoc-code-line .token.class-name {
+  color: #DD4A68;
+}
+
+.sdoc-code-line .token.regex,
+.sdoc-code-line .token.important,
+.sdoc-code-line .token.variable {
+  color: #e90;
+}
+
+.sdoc-code-line .sdoc-code-line .token.important,
+.sdoc-code-line .token.bold {
+  font-weight: bold;
+}
+
+.sdoc-code-line .token.italic {
+  font-style: italic;
+}
+
+.sdoc-code-line .token.entity {
+  cursor: help;
+}

package/dist/plugin-module/assets/css/sdoc-viewer.css

@@ -0,0 +1,14 @@
+.sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-article-container {
+  margin-left: 0 !important;
+}
+
+.sdoc-editor-container.mobile .sdoc-editor-content.readonly .sdoc-article-container {
+  padding: 0;
+  width: 100% !important;
+  min-width: 100% !important;
+}
+
+.sdoc-editor-container.mobile .sdoc-editor-content.readonly .article {
+  width: 100vw !important;
+  padding: 1rem;
+}

package/dist/plugin-module/assets/css/sdoc-wiki-viewer.css

@@ -0,0 +1,28 @@
+.sdoc-editor-container {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.sdoc-wiki-scroll-container {
+  display: flex;
+  overflow: auto;
+}
+
+.sdoc-wiki-scroll-container .sdoc-article-container {
+  width: 100%;
+}
+
+.sdoc-wiki-scroll-container .sdoc-article-container .article .sdoc-header-2 {
+  border-bottom: 1px solid #ccc;
+}
+
+.sdoc-wiki-outline-container {
+  height: 80%;
+  overflow-y: auto;
+  padding-right: 1rem;
+  position: fixed;
+  right: 0;
+  top: 97px;
+  width: 300px;
+}

package/dist/plugin-module/constants/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SUPPORTED_SIDE_OPERATION_TYPE = exports.SEATABLE_TABLE = exports.SEATABLE_ROW = exports.SEATABLE_COLUMN = exports.MENUS_CONFIG_MAP = exports.CHART_PREVIEW_TYPE = exports.CHART = void 0;
+// extension plugins
+const CHART = exports.CHART = 'chart';
+const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
+const SEATABLE_ROW = exports.SEATABLE_ROW = 'seatable_row';
+const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';
+const CHART_PREVIEW_TYPE = exports.CHART_PREVIEW_TYPE = {
+  VIEW: 'view',
+  EDITOR: 'editor',
+  FULL_SCREEN: 'fullScreen'
+};
+const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [SEATABLE_TABLE, SEATABLE_ROW];
+const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
+  [SEATABLE_ROW]: {
+    id: `sdoc_${SEATABLE_ROW}`,
+    iconClass: 'sdocfont sdoc-seatable-row',
+    text: 'SeaTable_row'
+  },
+  [SEATABLE_COLUMN]: {
+    id: `sdoc_${SEATABLE_COLUMN}`,
+    iconClass: 'sdocfont sdoc-choose-column',
+    text: 'SeaTable_column'
+  },
+  [SEATABLE_TABLE]: {
+    id: SEATABLE_TABLE,
+    iconClass: 'sdocfont sdoc-seatable-table',
+    type: SEATABLE_TABLE,
+    text: 'SeaTable_table'
+  },
+  [CHART]: {
+    id: `sdoc_${CHART}`,
+    iconClass: 'sdocfont sdoc-chart',
+    text: 'chart'
+  }
+};

package/dist/plugin-module/editor/editable-article.js

@@ -0,0 +1,243 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
+var _comment = _interopRequireDefault(require("@/basic-sdk/comment"));
+var _constants = require("@/basic-sdk/constants");
+var _useCursors = require("@/basic-sdk/cursor/use-cursors");
+var _decorates = require("@/basic-sdk/decorates");
+var _extension = require("@/basic-sdk/extension");
+var _constants2 = require("@/basic-sdk/extension/constants");
+var _core = require("@/basic-sdk/extension/core");
+var _helpers = require("@/basic-sdk/extension/plugins/table/helpers");
+var _highlight = require("@/basic-sdk/highlight");
+var _useForceUpdate = _interopRequireDefault(require("@/basic-sdk/hooks/use-force-update"));
+var _useScrollContext = require("@/basic-sdk/hooks/use-scroll-context");
+var _domUtils = require("@/basic-sdk/utils/dom-utils");
+var _eventBus = _interopRequireDefault(require("@/basic-sdk/utils/event-bus"));
+var _eventHandler = _interopRequireDefault(require("@/basic-sdk/utils/event-handler"));
+var _layout = require("../layout");
+var _renderElements = _interopRequireDefault(require("../render/render-elements"));
+const EditableArticle = _ref => {
+  let {
+    showComment = true,
+    editor,
+    slateValue,
+    updateSlateValue
+  } = _ref;
+  const {
+    cursors
+  } = (0, _useCursors.useCursors)(editor);
+  const decorate = (0, _decorates.usePipDecorate)(editor);
+  const forceUpdate = (0, _useForceUpdate.default)();
+
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
+  const onMouseDown = (0, _react.useCallback)(event => {
+    if (event.button === 0) {
+      const isPreventReset = (0, _helpers.isPreventResetTableSelectedRange)(event);
+      if (!isPreventReset) {
+        editor.reSetTableSelectedRange();
+        const eventBus = _eventBus.default.getInstance();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const onReloadComment = () => {
+    forceUpdate();
+  };
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeReloadComment = eventBus.subscribe(_constants.INTERNAL_EVENT.RELOAD_COMMENT, onReloadComment);
+    return () => {
+      unsubscribeReloadComment();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    const {
+      scrollTop,
+      clientHeight
+    } = scrollRef.current;
+    eventProxy.onKeyDown(event);
+    if (event.key === 'ArrowLeft') {
+      if (!(0, _core.isSelectionAtBlockStart)(editor)) return;
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      if (scrollTop === 0) return;
+      let prevNode = (0, _core.getPrevNode)(editor);
+      if (!prevNode) return;
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, prevNode[0]);
+      const domHeight = (0, _domUtils.getDomHeight)(domNode);
+      const isScrollUp = true;
+      const {
+        y
+      } = (0, _domUtils.getCursorPosition)(isScrollUp);
+      if (y >= domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      if (!(0, _core.isSelectionAtBlockEnd)(editor)) return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      let nextNode = (0, _core.getNextNode)(editor);
+      if (!nextNode) return;
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, nextNode[0]);
+      const domHeight = (0, _domUtils.getDomHeight)(domNode);
+      const isScrollUp = false;
+      const {
+        y
+      } = (0, _domUtils.getCursorPosition)(isScrollUp);
+      if (clientHeight - y >= domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop + domHeight));
+      return;
+    }
+    if (event.key === 'Backspace') {
+      const [currentNode] = (0, _core.getCurrentNode)(editor);
+      let prevNode = null;
+      let prevPath = null;
+      if ((0, _core.getPrevNode)(editor)) {
+        [prevNode, prevPath] = (0, _core.getPrevNode)(editor);
+      }
+      // If the cursor is collapsed at the beginning, and the current line is not empty, is not a CODE_LINE, and the previous line is a CODE_LINE.
+      const isCursorCollapsed = _slate.Range.isCollapsed(editor.selection);
+      if (isCursorCollapsed && prevNode && (0, _core.isSelectionAtBlockStart)(editor) && !(0, _core.isCurrentLineEmpty)(editor) && prevNode.type === _constants2.CODE_LINE && currentNode.type !== _constants2.CODE_LINE) {
+        if (!(0, _core.isCurrentLineHasText)(currentNode)) {
+          const prevNodeText = _slate.Node.string(prevNode);
+          _slate.Transforms.removeNodes(editor, {
+            at: prevPath
+          });
+          _slate.Transforms.insertText(editor, prevNodeText);
+          event.preventDefault();
+        } else {
+          const path = prevPath;
+          path[path.length] = 0;
+          const end = prevNode.children[0].text.length;
+          const range = {
+            anchor: {
+              path,
+              offset: end
+            },
+            focus: {
+              path,
+              offset: end
+            }
+          };
+          _slate.Transforms.select(editor, range);
+          event.preventDefault();
+        }
+      }
+      const {
+        y
+      } = (0, _domUtils.getCursorPosition)();
+
+      // above viewport
+      if (y < 0) {
+        const newY = Math.abs(y);
+        if ((0, _core.isSelectionAtBlockStart)(editor)) {
+          const prevNode = (0, _core.getPrevNode)(editor);
+          if (!prevNode) return;
+          const domNode = _slateReact.ReactEditor.toDOMNode(editor, prevNode[0]);
+          const domHeight = (0, _domUtils.getDomHeight)(domNode);
+          const node = (0, _core.getAboveBlockNode)(editor);
+          if (!node) return;
+          const currentDomNode = _slateReact.ReactEditor.toDOMNode(editor, node[0]);
+          const marginTop = (0, _domUtils.getDomMarginTop)(currentDomNode);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + domHeight + marginTop)));
+        } else {
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
+        }
+        return;
+      }
+
+      // insider viewport
+      if (y >= 0 && y <= clientHeight) {
+        if ((0, _core.isSelectionAtBlockStart)(editor)) {
+          const prevNode = (0, _core.getPrevNode)(editor);
+          if (!prevNode) return;
+          const domNode = _slateReact.ReactEditor.toDOMNode(editor, prevNode[0]);
+          const domHeight = (0, _domUtils.getDomHeight)(domNode);
+          if (y >= domHeight) return;
+          // Scroll up the height of the previous block
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
+          return;
+        }
+      }
+
+      // below viewport
+      if (y > clientHeight) {
+        if ((0, _core.isSelectionAtBlockStart)(editor)) {
+          // y: text top border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (y - clientHeight)));
+        } else {
+          const marginBottom = 11.2;
+          const {
+            y: newY
+          } = (0, _domUtils.getCursorPosition)(false);
+          const rectBottom = newY + marginBottom; // text bottom border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (rectBottom - clientHeight)));
+        }
+        return;
+      }
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollRef]);
+  const handleScrollIntoView = (0, _react.useCallback)((editor, domRange) => {
+    try {
+      const {
+        selection
+      } = editor;
+      // Do not scroll into view, when focus on image
+      const [imageNodeEntry] = _slate.Editor.nodes(editor, {
+        match: n => [_constants2.IMAGE, _constants2.IMAGE_BLOCK].includes(n.type),
+        at: selection
+      });
+      if (imageNodeEntry) return;
+      const focusedNode = _slate.Node.get(editor, selection.focus.path);
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, focusedNode);
+      if (!domNode) return;
+      (0, _scrollIntoViewIfNeeded.default)(domNode, {
+        'scrollMode': 'if-needed'
+      });
+    } catch (error) {
+      //
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: updateSlateValue
+  }, /*#__PURE__*/_react.default.createElement(_layout.ArticleContainer, {
+    editor: editor
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_extension.ContextToolbar, null), /*#__PURE__*/_react.default.createElement(_highlight.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
+    scrollSelectionIntoView: handleScrollIntoView,
+    cursors: cursors,
+    renderElement: _renderElements.default,
+    renderLeaf: _extension.renderLeaf,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    decorate: decorate,
+    onCut: eventProxy.onCut,
+    onCopy: eventProxy.onCopy,
+    onCompositionStart: eventProxy.onCompositionStart,
+    id: "sdoc-editor",
+    "aria-label": "textbox"
+  })), /*#__PURE__*/_react.default.createElement(_extension.SideToolbar, null), showComment && /*#__PURE__*/_react.default.createElement(_comment.default, {
+    editor: editor,
+    type: "editor"
+  })));
+};
+var _default = exports.default = EditableArticle;