@seafile/sdoc-editor 0.5.25 → 0.5.27

package/dist/basic-sdk/assets/css/layout.css

@@ -117,15 +117,16 @@
 
 .sdoc-comment-editor-toolbar {
   display: flex;
-  flex: 1;
-  position: relative;
-  height: 32px;
+  justify-content: space-between;
   align-items: center;
+  height: 32px;
   user-select: none;
-  position: relative;
+  border-top: 1px solid #e5e6e8;
   z-index: 102;
+  margin: 0 8px;
 }
 
 .sdoc-comment-editor-menu-group {
   border-right: none;
+  padding-left: 0 !important;
 }

package/dist/basic-sdk/comment/components/comment-editor.js

@@ -14,6 +14,7 @@ import { PARAGRAPH } from '../../extension/constants';
 import slateToMdString from '../../../slate-convert/slate-to-md';
 import mdStringToSlate from '../../../slate-convert/md-to-slate';
 import { COMMENT_EDITOR, COMMENT_EDITOR_EDIT_AREA_WIDTH } from '../../constants';
+import { KeyCodes } from '../../../constants';
 const getSubmitTip = (type, content) => {
   if (content) return 'Save';
   return type === 'comment' ? 'Comment' : 'Reply';
@@ -91,6 +92,24 @@ const CommentEditor = _ref => {
   }, [editor, updateValue, addParticipants, userInfo.username, placeholder]);
   const onCancel = useCallback(event => {
     event.stopPropagation();
+    const {
+      type: eventType,
+      keyCode,
+      target
+    } = event;
+    if (eventType === 'keydown' && keyCode !== KeyCodes.Esc) return;
+    if (eventType === 'click') {
+      const listContainer = window.document.querySelector('#global-comment-list-container');
+      const addCommentSideBtn = window.document.querySelector('.comment-add-wrapper');
+      const addCommentPopover = window.document.querySelector('.sdoc-doc-comment-editor-container');
+      const globalCommentPopover = window.document.querySelector('.comment-ui-container');
+      const isClickOnListContainer = listContainer && listContainer.contains(target);
+      const isClickOnAddCommentPopover = type === 'comment' && addCommentPopover && addCommentPopover.contains(target);
+      const isClickOnAddCommentSideBtn = addCommentSideBtn && addCommentSideBtn.contains(target);
+      const isClickOnGlobalCommentPopover = globalCommentPopover && globalCommentPopover.contains(target);
+      const isPreventCancel = isClickOnListContainer || isClickOnAddCommentPopover || isClickOnAddCommentSideBtn || isClickOnGlobalCommentPopover;
+      if (isPreventCancel) return;
+    }
     setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
 
@@ -118,16 +137,11 @@ const CommentEditor = _ref => {
   }, userInfo.name)), /*#__PURE__*/React.createElement(SdocCommentEditor, {
     editor: editor,
     type: type,
-    document: document
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "comment-operations"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "mr-2",
-    onClick: onCancel
-  }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    onClick: onSubmit
-  }, t(submitTip))));
+    document: document,
+    onSubmit: onSubmit,
+    submitBtnText: t(submitTip),
+    onCancel: onCancel
+  }));
 };
 CommentEditor.defaultProps = {
   placeholder: 'Enter_a_comment'

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -278,7 +278,6 @@ const CommentItemWrapper = _ref => {
       reply: reply
     });
   })), isActive && /*#__PURE__*/React.createElement(CommentEditor, {
-    className: "p-3",
     type: "reply",
     placeholder: tip,
     insertContent: insertContent,

package/dist/basic-sdk/comment/components/comment-list.css

@@ -8,7 +8,7 @@
   background-color: #edf2fa;
   border-radius: 8px;
   box-shadow: 0 0 2px rgba(0, 0, 0, .04);
-  padding: 16px 0;
+  padding: 16px;
   margin-bottom: 10px;
   cursor: pointer;
 }
@@ -225,7 +225,6 @@
   border: 1px solid #ececec;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  margin-bottom: 15px;
   border-radius: 3px;
 }
 
@@ -250,7 +249,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0 10px;
   cursor: text;
 }
 

package/dist/basic-sdk/comment/components/global-comment/global-comment-editor.js

@@ -8,7 +8,8 @@ const GlobalCommentEditor = _ref => {
   const ref = useRef(null);
   useEffect(() => {
     const hidden = event => {
-      if (!ref.current.contains(event.target)) {
+      var _ref$current;
+      if (!((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target))) {
         hiddenCommentEditor();
       }
     };

package/dist/basic-sdk/comment/components/global-comment/index.css

@@ -73,7 +73,7 @@
   font-size: 12px;
 }
 
-.global-comments-popover .comments-panel-body__header .comment-type{
+.global-comments-popover .comments-panel-body__header .comment-type {
   color: #212529;
   font-size: 12px;
 }
@@ -87,7 +87,8 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 16px;
+  padding-top: 0px;
   overflow: auto;
 }
 

package/dist/basic-sdk/editor/sdoc-comment-editor.js

@@ -20,7 +20,10 @@ const SdocCommentEditor = forwardRef((_ref, ref) => {
     editor: propsEditor,
     document,
     isReloading,
-    type
+    type,
+    onSubmit,
+    submitBtnText,
+    onCancel
   } = _ref;
   const [slateValue, setSlateValue] = useState(document.children);
   const commentEditorContainerRef = useRef(null);
@@ -113,7 +116,10 @@ const SdocCommentEditor = forwardRef((_ref, ref) => {
     slateValue: slateValue,
     updateSlateValue: setSlateValue
   })), /*#__PURE__*/React.createElement(CommentEditorToolbar, {
-    editor: validEditor
+    editor: validEditor,
+    onSubmit: onSubmit,
+    submitBtnText: submitBtnText,
+    onCancel: onCancel
   }))));
 });
 export default SdocCommentEditor;

package/dist/basic-sdk/extension/plugins/callout/helper.js

@@ -32,7 +32,7 @@ export const isMenuDisabled = (editor, readonly) => {
  * @param {keyof CALLOUT_COLOR_MAP} [background_color] fill color
  */
 export const generateCallout = function () {
-  let background_color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.keys(CALLOUT_COLOR_MAP)[0];
+  let background_color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.keys(CALLOUT_COLOR_MAP)[5];
   const props = {
     style: {
       background_color

package/dist/basic-sdk/extension/plugins/sdoc-link/render-elem.js

@@ -1,12 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { Range, Transforms } from '@seafile/slate';
+import { Editor, Range } from '@seafile/slate';
 import { ReactEditor, useReadOnly } from '@seafile/slate-react';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { unwrapLinkNode, getUrl } from './helpers';
 import HoverMenu from './hover-menu';
 import { DELETED_STYLE, ADDED_STYLE } from '../../constants';
 import { SDOC_LINK_TYPE } from './constants';
+import { focusEditor } from '../../core';
 import './render-elem.css';
 const SdocFileLink = _ref => {
   let {
@@ -78,16 +79,8 @@ const SdocFileLink = _ref => {
       e.stopPropagation();
     }
     const path = ReactEditor.findPath(editor, element);
-    Transforms.setSelection(editor, {
-      anchor: {
-        offset: 1,
-        path: [path[0], path[1], 0]
-      },
-      focus: {
-        offset: 1,
-        path: [path[0], path[1], 0]
-      }
-    });
+    const focusPoint = Editor.end(editor, path);
+    focusEditor(editor, focusPoint);
     setPosition(e.currentTarget);
     setIsShowInsertHoverMenu(true);
     setTimeout(() => {

package/dist/basic-sdk/extension/plugins/text-align/menu/index.js

@@ -1,9 +1,10 @@
 import React, { useRef, useState, useCallback } from 'react';
 import { UncontrolledPopover } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation, withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { getAlignType, isMenuDisabled, setAlignType } from '../helpers';
 import { TEXT_ALIGN, MENUS_CONFIG_MAP } from '../../../constants';
+import Tooltip from '../../../../../components/tooltip';
 const TextAlignMenu = _ref => {
   let {
     isRichEditor,
@@ -15,6 +16,9 @@ const TextAlignMenu = _ref => {
   const popoverRef = useRef(null);
   const disabled = isMenuDisabled(editor, readonly);
   const buttonId = 'sdoc-button-text-align';
+  const {
+    t
+  } = useTranslation();
   const toggle = useCallback(event => {
     popoverRef.current.toggle();
     setMenuShow(!isShowMenu);
@@ -54,7 +58,9 @@ const TextAlignMenu = _ref => {
     className: "sdoc-menu-with-dropdown-triangle"
   }, /*#__PURE__*/React.createElement("span", {
     className: caretIconClass
-  }))), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    target: buttonId
+  }, t('Alignment_type')), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: buttonId,
     className: "sdoc-menu-popover sdoc-dropdown-menu",
     trigger: "legacy",

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js

@@ -7,10 +7,14 @@ import CommentEditorTextStyleMenuList from '../../plugins/text-style/menu/comemn
 import ImageMenu from '../../plugins/image/menu';
 import EventBus from '../../../utils/event-bus';
 import LinkMenu from '../../plugins/link/menu';
+import PostCommentBtn from './post-comment';
 const CommentEditorToolbar = _ref => {
   let {
     editor,
-    readonly
+    readonly,
+    onSubmit,
+    submitBtnText,
+    onCancel
   } = _ref;
   useSelectionUpdate();
   const eventBus = EventBus.getInstance();
@@ -37,6 +41,13 @@ const CommentEditorToolbar = _ref => {
     editor: editor,
     readonly: readonly,
     eventBus: eventBus
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comment-editor-toolbar-right"
+  }, /*#__PURE__*/React.createElement(PostCommentBtn, {
+    editor: editor,
+    onSubmit: onSubmit,
+    submitBtnText: submitBtnText,
+    onCancel: onCancel
   })));
 };
 CommentEditorToolbar.defaultProps = {

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/index.js

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import Tooltip from '../../../../../components/tooltip';
+import './style.css';
+const PostCommentBtn = _ref => {
+  let {
+    onSubmit,
+    submitBtnText,
+    onCancel
+  } = _ref;
+  useEffect(() => {
+    document.addEventListener('keydown', onCancel, false);
+    document.addEventListener('click', onCancel, false);
+    return () => {
+      document.removeEventListener('keydown', onCancel, false);
+      document.removeEventListener('click', onCancel, false);
+    };
+  }, [onCancel]);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    id: "sdoc-comment-editor-comment-btn"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-save sdoc-comment-btn",
+    onClick: onSubmit
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    target: "sdoc-comment-editor-comment-btn"
+  }, submitBtnText));
+};
+export default PostCommentBtn;

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/style.css

@@ -0,0 +1,7 @@
+.sdoc-comment-btn {
+  color: #ff8e03;
+}
+
+.sdoc-comment-btn:hover {
+  color: #d47604;
+}

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -451,5 +451,6 @@
   "Bottom_align": "Bottom",
   "Move_column_count": "Moving {{count}} column(s)",
   "Move_row_count": "Moving {{count}} row(s)",
-  "Mark_all_as_read": "Mark all as read"
+  "Mark_all_as_read": "Mark all as read",
+  "Alignment_type": "Alignment"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -451,5 +451,6 @@
   "Bottom_align": "底端对齐",
   "Move_column_count": "移动{{count}}列",
   "Move_row_count": "移动{{count}}行",
-  "Mark_all_as_read": "全部标记为已读"
+  "Mark_all_as_read": "全部标记为已读",
+  "Alignment_type": "对齐方式"
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-save" unicode="&#58987;" d="M972.8 828.8L38.4 448c-51.2-22.4-51.2-51.2 3.2-70.4l227.2-70.4 92.8-288c12.8-38.4 44.8-44.8 70.4-16l118.4 124.8 233.6-179.2c28.8-22.4 60.8-9.6 70.4 28.8L1024 784c6.4 38.4-16 57.6-51.2 44.8zM832 646.4L432 272c-6.4-6.4-12.8-19.2-16-28.8l-19.2-172.8c-3.2-19.2-9.6-19.2-12.8-3.2l-76.8 243.2c-3.2 9.6 0 22.4 9.6 25.6l505.6 320c32 19.2 38.4 16 9.6-9.6z"  horiz-adv-x="1025" />
+      
       <glyph glyph-name="sdoc-center-alignment" unicode="&#58984;" d="M560 896v-128H832v-320h-272v-128H928v-320H560v-128h-96v128H96V320h368v128H192V768h272V896h96zM832 224H192v-128h640v128zM736 672H288v-128h448V672z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-bottom-alignment" unicode="&#58985;" d="M0-64v96h1024v-96H0z m448 192V832H128v-704h320z m-96 96H224V736h128v-512z m544-96V640H576v-512h320z m-96 96h-128V544h128v-320z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -16,6 +16,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-save:before {
+  content: "\e66b";
+}
+
 .sdoc-center-alignment:before {
   content: "\e668";
 }