@seafile/sdoc-editor 0.5.4 → 0.5.6

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

@@ -10,7 +10,15 @@ import FontSizeScale from '../../font/menu/font-size/font-size-scale';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
 import { useColorContext } from '../../../../hooks/use-color-context';
 import { eventStopPropagation } from '../../../../utils/mouse-event';
-const TextStyleMenuList = _ref => {
+import { BOLD, ITALIC } from '../../../constants/menus-config';
+import { COMMENT_EDITOR } from '../../../../constants';
+const filterFontTypes = _ref => {
+  let {
+    id
+  } = _ref;
+  return [BOLD, ITALIC].includes(id);
+};
+const TextStyleMenuList = _ref2 => {
   let {
     editor,
     t,
@@ -18,9 +26,10 @@ const TextStyleMenuList = _ref => {
     className,
     idPrefix,
     readonly
-  } = _ref;
+  } = _ref2;
   let selectedFontSize = getFontSize(editor);
   let selectedFontSizeValue = selectedFontSize;
+  const isCommentEditor = editor.editorType === COMMENT_EDITOR;
   const {
     lastUsedFontColor,
     updateLastUsedFontColor,
@@ -94,18 +103,20 @@ const TextStyleMenuList = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, lastUsedFontColor, lastUsedHighlightColor, readonly]);
-  const list = getTextStyleList(TEXT_STYLE);
+  let list = getTextStyleList(TEXT_STYLE);
+  // Filter for comment editor
+  if (isCommentEditor) {
+    list = list.filter(filterFontTypes);
+  }
   const dropdownList = getTextStyleList(TEXT_STYLE_MORE);
   return /*#__PURE__*/React.createElement(React.Fragment, null, list.map((itemProps, index) => {
     const Component = itemProps.isColor ? ColorMenu : MenuItem;
     return /*#__PURE__*/React.createElement(Component, Object.assign({
       key: index
     }, itemProps));
-  }), /*#__PURE__*/React.createElement(MoreDropdown, null, dropdownList.map((itemProps, index) => {
-    return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
-      key: index
-    }, itemProps));
-  }), /*#__PURE__*/React.createElement(FontSizeScale, {
+  }), !isCommentEditor && /*#__PURE__*/React.createElement(MoreDropdown, null, dropdownList.map((itemProps, index) => /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+    key: index
+  }, itemProps))), /*#__PURE__*/React.createElement(FontSizeScale, {
     disabled: isDisabled(),
     onClick: increaseFontSize,
     id: "sdoc-increase-font-size",

package/dist/basic-sdk/extension/render/custom-element.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useReadOnly, useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, IMAGE_BLOCK, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE } from '../constants';
-import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin } from '../plugins';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, IMAGE_BLOCK, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE, MENTION, MENTION_TEMP } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, MentionPlugin } from '../plugins';
 import { onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
 import { getParentNode } from '../core';
 import { setMouseEnter } from './helper';
@@ -136,6 +136,16 @@ const CustomRenderElement = props => {
         const [renderCallout] = CalloutPlugin.renderElements;
         return renderCallout(props, editor);
       }
+    case MENTION:
+      {
+        const [renderMention] = MentionPlugin.renderElements;
+        return renderMention(props, editor);
+      }
+    case MENTION_TEMP:
+      {
+        const [, renderMentionTemporaryInput] = MentionPlugin.renderElements;
+        return renderMentionTemporaryInput(props, editor);
+      }
     default:
       {
         const [renderParagraph] = ParagraphPlugin.renderElements;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import useSelectionUpdate from '../../../hooks/use-selection-update';
+import { ORDERED_LIST, UNORDERED_LIST } from '../../constants';
+import { MenuGroup } from '../../commons';
+import ListMenu from '../../plugins/list/menu';
+import CommentEditorTextStyleMenuList from '../../plugins/text-style/menu/comemnt-editor-menu';
+import ImageMenu from '../../plugins/image/menu';
+import EventBus from '../../../utils/event-bus';
+import LinkMenu from '../../plugins/link/menu';
+const CommentEditorToolbar = _ref => {
+  let {
+    editor,
+    readonly
+  } = _ref;
+  useSelectionUpdate();
+  const eventBus = EventBus.getInstance();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comment-editor-toolbar"
+  }, /*#__PURE__*/React.createElement(MenuGroup, {
+    className: "menu-group sdoc-comment-editor-menu-group"
+  }, /*#__PURE__*/React.createElement(CommentEditorTextStyleMenuList, {
+    editor: editor,
+    readonly: readonly
+  }), /*#__PURE__*/React.createElement(ListMenu, {
+    editor: editor,
+    type: UNORDERED_LIST,
+    readonly: readonly
+  }), /*#__PURE__*/React.createElement(ListMenu, {
+    editor: editor,
+    type: ORDERED_LIST,
+    readonly: readonly
+  }), /*#__PURE__*/React.createElement(LinkMenu, {
+    editor: editor,
+    readonly: readonly,
+    eventBus: eventBus
+  }), /*#__PURE__*/React.createElement(ImageMenu, {
+    editor: editor,
+    readonly: readonly,
+    eventBus: eventBus
+  })));
+};
+CommentEditorToolbar.defaultProps = {
+  readonly: false
+};
+export default CommentEditorToolbar;

package/dist/basic-sdk/utils/diff.js

@@ -17,6 +17,19 @@ const generatorDiffTextElement = function (textElement, diffType) {
     [diffType]: true
   }, style);
 };
+export const getTopLevelChanges = changes => {
+  const topLevelChanges = [];
+  changes.forEach(item => {
+    let dom = document.querySelectorAll("[data-id=".concat(item, "]"))[0];
+    while (((_dom = dom) === null || _dom === void 0 ? void 0 : (_dom$dataset = _dom.dataset) === null || _dom$dataset === void 0 ? void 0 : _dom$dataset.root) !== 'true') {
+      var _dom, _dom$dataset, _dom2;
+      if (!((_dom2 = dom) === null || _dom2 === void 0 ? void 0 : _dom2.parentNode)) break;
+      dom = dom.parentNode;
+    }
+    topLevelChanges.push(dom.dataset.id);
+  });
+  return Array.from(new Set(topLevelChanges));
+};
 
 // Depth facilitates each child node, adding diffType to each end node
 const generatorDiffElement = function (element, diffType) {

package/dist/basic-sdk/utils/event-handler.js

@@ -92,6 +92,27 @@ class EventProxy {
       }
     });
     _defineProperty(this, "onPaste", event => {});
+    _defineProperty(this, "onCompositionStart", event => {
+      const editor = this.editor;
+      if (editor.onCompositionStart) {
+        const isHandled = editor.onCompositionStart(event);
+        if (isHandled) return;
+      }
+    });
+    _defineProperty(this, "onCompositionUpdate", event => {
+      const editor = this.editor;
+      if (editor.onCompositionUpdate) {
+        const isHandled = editor.onCompositionUpdate(event);
+        if (isHandled) return;
+      }
+    });
+    _defineProperty(this, "onCompositionEnd", event => {
+      const editor = this.editor;
+      if (editor.onCompositionUpdate) {
+        const isHandled = editor.onCompositionEnd(event);
+        if (isHandled) return;
+      }
+    });
     this.editor = _editor;
   }
 }

package/dist/components/doc-operations/revision-operations/changes-count/index.js

@@ -1,6 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../../tooltip';
+import { getTopLevelChanges } from '../../../../basic-sdk/utils/diff';
 import './index.css';
 const ChangesCount = _ref => {
   let {
@@ -10,9 +11,18 @@ const ChangesCount = _ref => {
     t
   } = useTranslation();
   const [currentDiffIndex, setDiffIndex] = useState(0);
+  const [topLevelChanges, setTopLevelChanges] = useState([]);
+  useEffect(() => {
+    if (changes.length !== 0) {
+      queueMicrotask(() => {
+        const topLevelChanges = getTopLevelChanges(changes);
+        setTopLevelChanges([...topLevelChanges]);
+      });
+    }
+  }, [changes]);
   const jumpToElement = useCallback(currentDiffIndex => {
     setDiffIndex(currentDiffIndex);
-    const change = changes[currentDiffIndex];
+    const change = topLevelChanges[currentDiffIndex];
     const changeElement = document.querySelectorAll("[data-id=".concat(change, "]"))[0];
     if (changeElement) {
       const scrollContainer = document.getElementById('sdoc-scroll-container');
@@ -22,31 +32,31 @@ const ChangesCount = _ref => {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes, currentDiffIndex]);
+  }, [topLevelChanges, currentDiffIndex]);
   const lastChange = useCallback(() => {
     if (currentDiffIndex === 0) {
-      jumpToElement(changes.length - 1);
+      jumpToElement(topLevelChanges.length - 1);
       return;
     }
     jumpToElement(currentDiffIndex - 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes, currentDiffIndex]);
+  }, [topLevelChanges, currentDiffIndex]);
   const nextChange = useCallback(() => {
-    if (currentDiffIndex === changes.length - 1) {
+    if (currentDiffIndex === topLevelChanges.length - 1) {
       jumpToElement(0);
       return;
     }
     jumpToElement(currentDiffIndex + 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes, currentDiffIndex]);
-  if (!Array.isArray(changes) || changes.length === 0) {
+  }, [topLevelChanges, currentDiffIndex]);
+  if (!Array.isArray(topLevelChanges) || topLevelChanges.length === 0) {
     return /*#__PURE__*/React.createElement("div", {
       className: "sdoc-revision-changes-container d-flex align-items-center pl-2 pr-2 ml-4"
     }, t('No_changes'));
   }
-  const changesCount = changes.length;
+  const changesCount = topLevelChanges.length;
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-revision-changes-container d-flex align-items-center ml-4"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/slate-convert/md-to-slate/transform.js

@@ -17,10 +17,27 @@ const applyMarkForInlineItem = function (result, item) {
     value
   } = item;
   if (type === LINK) {
+    var _item$title, _item$title$startsWit;
     const child = children.length === 0 ? {
       type: 'text',
       value: ''
     } : children[0];
+
+    // Mention node
+    if ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : (_item$title$startsWit = _item$title.startsWith) === null || _item$title$startsWit === void 0 ? void 0 : _item$title$startsWit.call(_item$title, '__sdoc_mention__username')) {
+      const username = item.title.split('__sdoc_mention__username')[1];
+      const mention = {
+        id: slugid.nice(),
+        username,
+        type: 'mention',
+        children: [{
+          id: slugid.nice(),
+          text: child.value
+        }]
+      };
+      result.push(mention);
+      return result;
+    }
     const linkChildren = [{
       id: slugid.nice(),
       text: child.value

package/dist/slate-convert/slate-to-md/transform.js

@@ -99,13 +99,31 @@ const transformInlineChildren = (result, item) => {
   if (item.type && item.type === 'link') {
     const link = {
       type: 'link',
-      url: item.url,
+      url: item.href,
       title: item.title || null,
       children: [transformTextNode(item.children[0])]
     };
     result.push(link);
     return result;
   }
+
+  // mention
+  if (item.type && item.type === 'mention') {
+    const text = item.children[0].text;
+    const username = item.username;
+    const mention = {
+      type: 'link',
+      // eslint-disable-next-line no-script-url
+      url: 'javascript:void(0)',
+      title: "__sdoc_mention__username".concat(username),
+      children: [{
+        type: 'text',
+        value: text
+      }]
+    };
+    result.push(mention);
+    return result;
+  }
   if (item.type && item.type === 'column') {
     const data = item.data;
     const newNode = {
@@ -286,6 +304,13 @@ const transformFormula = node => {
     value: data.formula
   };
 };
+const transformMention = node => {
+  const data = node.data;
+  return {
+    type: 'mention',
+    value: data.value
+  };
+};
 const elementHandlers = {
   'paragraph': transformParagraph,
   'header1': transformHeader,
@@ -300,7 +325,8 @@ const elementHandlers = {
   'ordered_list': transformList,
   'unordered_list': transformList,
   'code_block': transformCodeBlock,
-  'formula': transformFormula
+  'formula': transformFormula,
+  'mention': transformMention
 };
 export const formatSlateToMd = children => {
   const validChildren = children.filter(child => elementHandlers[child.type]);

package/package.json

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

package/dist/basic-sdk/comment/components/comment-input/helpers.js

@@ -1,15 +0,0 @@
-import context from '../../../../context';
-
-// Sort collaborators by participants, move mentioned members to the top
-export const sortCollaborators = function (collaborators) {
-  let participants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  const loginEmail = context.getUserInfo().email;
-  const participantsMap = {};
-  participants.forEach(item => {
-    if (item.email === loginEmail) return;
-    participantsMap[item.email] = item;
-  });
-  const newCollaborators = collaborators.filter(item => !participantsMap[item.email] && item.email !== loginEmail);
-  const newParticipants = Object.values(participantsMap);
-  return [...newParticipants, ...newCollaborators];
-};

package/dist/basic-sdk/comment/components/comment-input/index.js

@@ -1,306 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCollaborators } from '../../../../hooks';
-import { useParticipantsContext } from '../../hooks/use-participants';
-import ModalPortal from '../../../../components/modal-portal';
-import { KeyCodes } from '../../../../constants';
-import { searchCollaborators, CommentUtilities, convertComment, checkMentionOperation } from '../../utils';
-import { DOWN, UP, POPOVER_ADDING_HEIGHT, FONT_SIZE_WIDTH, LINE_HEIGHT } from '../../constants';
-import { eventStopPropagation } from '../../../utils/mouse-event';
-import CommentParticipantItem from './comment-participant-item';
-import { Hotkey, getSelectionCoords } from '../../../../utils';
-import { sortCollaborators } from './helpers';
-import './index.css';
-const CommentInput = forwardRef((_ref, ref) => {
-  let {
-    placeholder,
-    content,
-    type,
-    onCancel,
-    onSubmit
-  } = _ref;
-  const commentRef = useRef();
-  const collaboratorsPopoverRef = useRef();
-  const {
-    t
-  } = useTranslation();
-  const {
-    collaborators
-  } = useCollaborators();
-  const {
-    addParticipants,
-    participants
-  } = useParticipantsContext();
-  const [range, setRange] = useState();
-  const [searchedCollaborators, setSearchedCollaborators] = useState([]);
-  const [activeCollaboratorIndex, setActiveCollaboratorIndex] = useState(-1);
-  const [validCollaborators, setValidCollaborators] = useState([]);
-  const commentUtilities = new CommentUtilities();
-
-  // onMount: comment content
-  useEffect(() => {
-    if (!content) return;
-    commentRef.current.textContent = content;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    const sortedCollaborators = sortCollaborators(collaborators, participants);
-    setValidCollaborators(sortedCollaborators);
-  }, [collaborators, participants]);
-
-  // onMount: set input focus
-  useEffect(() => {
-    if (type !== 'comment') return;
-    commentRef.current && commentRef.current.focus();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // onMount: handleCommentPopover
-  useEffect(() => {
-    document.addEventListener('mousedown', handleCommentPopover);
-    return () => {
-      document.removeEventListener('mousedown', handleCommentPopover);
-    };
-  });
-
-  // The parent component can call the method of this component through ref
-  useImperativeHandle(ref, () => ({
-    getValue: () => {
-      const comment = convertComment(commentRef.current.textContent);
-      return comment;
-    },
-    setValue: value => {
-      commentRef.current.textContent = value || '';
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [commentRef]);
-  const hideCommentPopover = useCallback(() => {
-    if (searchedCollaborators.length === 0) return;
-    setSearchedCollaborators([]);
-    setActiveCollaboratorIndex(-1);
-  }, [searchedCollaborators]);
-  const handleCommentPopover = useCallback(event => {
-    if (collaboratorsPopoverRef.current && event && !collaboratorsPopoverRef.current.contains(event.target)) {
-      hideCommentPopover();
-    }
-  }, [hideCommentPopover, collaboratorsPopoverRef]);
-  const setScrollTop = useCallback((offsetTop, itemOffsetHeight, mouseDownType) => {
-    const {
-      offsetHeight,
-      scrollTop
-    } = collaboratorsPopoverRef.current;
-    if (mouseDownType === DOWN) {
-      if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + POPOVER_ADDING_HEIGHT > 0) {
-        let top = offsetTop + itemOffsetHeight - offsetHeight + POPOVER_ADDING_HEIGHT;
-        collaboratorsPopoverRef.current.scrollTop = top;
-      }
-    }
-    if (mouseDownType === UP) {
-      if (offsetTop < scrollTop) {
-        collaboratorsPopoverRef.current.scrollTop = offsetTop - POPOVER_ADDING_HEIGHT;
-      }
-    }
-  }, []);
-  const setCollaboratorsPopoverPosition = useCallback(caretPosition => {
-    const {
-      height,
-      width
-    } = collaboratorsPopoverRef.current.getBoundingClientRect();
-    const {
-      offsetHeight
-    } = collaboratorsPopoverRef.current;
-
-    // Whether the vertical direction exceeds the screen
-    const isVerticalDirectionBeyondScreen = height + caretPosition.y + LINE_HEIGHT > window.innerHeight;
-
-    // if the vertical direction exceeds the screen, collaboratorsPopoverRef appear above the cursor
-    const top = isVerticalDirectionBeyondScreen ? "".concat(caretPosition.y - offsetHeight + LINE_HEIGHT, "px") : "".concat(caretPosition.y + LINE_HEIGHT, "px");
-    collaboratorsPopoverRef.current.style.top = top;
-
-    // Whether the horizontal direction exceeds the screen
-    const isHorizontalDirectionBeyondScreen = caretPosition.x + FONT_SIZE_WIDTH + width > window.innerWidth;
-
-    // if the horizontal direction exceeds the screen, collaboratorsPopoverRef is displayed against the right side of the screen
-    const left = isHorizontalDirectionBeyondScreen ? "".concat(window.innerWidth - width, "px") : "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
-    collaboratorsPopoverRef.current.style.left = left;
-  }, [collaboratorsPopoverRef]);
-  const getAtInfo = useCallback(event => {
-    const isValidOperation = checkMentionOperation(event);
-    if (!isValidOperation) return {
-      index: -1
-    };
-    const selection = window.getSelection();
-    const {
-      isCollapsed,
-      anchorNode,
-      anchorOffset
-    } = selection;
-    if (!isCollapsed || !anchorNode || !anchorNode.data) return {
-      index: -1
-    };
-    const text = anchorNode.data;
-    const index = commentUtilities.getAtIndexWithAnchorPosition(anchorOffset, text);
-    return {
-      index,
-      text,
-      selection
-    };
-  }, [commentUtilities]);
-  const getSearchedCollaborators = useCallback(_ref2 => {
-    let {
-      atIndex,
-      text,
-      anchorOffset
-    } = _ref2;
-    if (atIndex !== 0 && text[atIndex - 1] !== ' ') return [];
-    if (atIndex === anchorOffset - 1) return validCollaborators;
-    const searchingText = text.substring(atIndex + 1);
-    if (searchingText) return searchCollaborators(validCollaborators, searchingText);
-    return [];
-  }, [validCollaborators]);
-  const handleInvolvedKeyUp = useCallback(event => {
-    // atIndex: Positional index of @
-    const {
-      index: atIndex,
-      text,
-      selection
-    } = getAtInfo(event);
-    if (atIndex === -1) {
-      hideCommentPopover();
-      return;
-    }
-    const {
-      anchorOffset
-    } = selection;
-    const searchedCollaborators = getSearchedCollaborators({
-      atIndex,
-      text,
-      anchorOffset
-    });
-    if (searchedCollaborators.length === 0) {
-      hideCommentPopover();
-      return;
-    }
-    setActiveCollaboratorIndex(0);
-    setRange(selection.getRangeAt(0));
-    setSearchedCollaborators(searchedCollaborators);
-    setTimeout(() => {
-      const caretPosition = getSelectionCoords();
-      setCollaboratorsPopoverPosition(caretPosition);
-    }, 1);
-  }, [getSearchedCollaborators, getAtInfo, hideCommentPopover, setCollaboratorsPopoverPosition]);
-  const handleSelectingCollaborator = useCallback((event, direction) => {
-    eventStopPropagation(event);
-    const collaboratorsLen = searchedCollaborators.length;
-    if (collaboratorsLen === 0) return;
-    let nextActiveCollaboratorIndex = activeCollaboratorIndex;
-    if (direction === DOWN) {
-      nextActiveCollaboratorIndex++;
-      if (nextActiveCollaboratorIndex >= collaboratorsLen) {
-        nextActiveCollaboratorIndex = 0;
-      }
-    } else {
-      nextActiveCollaboratorIndex--;
-      if (nextActiveCollaboratorIndex < 0) {
-        nextActiveCollaboratorIndex = collaboratorsLen - 1;
-      }
-    }
-    setActiveCollaboratorIndex(nextActiveCollaboratorIndex);
-  }, [searchedCollaborators, activeCollaboratorIndex]);
-  const onSelectCollaborator = useCallback(collaborator => {
-    const selection = window.getSelection();
-    const callBack = () => {
-      hideCommentPopover();
-      addParticipants(collaborator.username);
-    };
-    const newRange = commentUtilities.onSelectParticipant({
-      selection,
-      range,
-      participant: collaborator,
-      callBack,
-      commentRef: commentRef
-    });
-    setRange(newRange);
-  }, [range, commentUtilities, hideCommentPopover, addParticipants]);
-  const handleSelectCollaborator = useCallback(event => {
-    if (searchedCollaborators.length === 0) return;
-    onSelectCollaborator(searchedCollaborators[activeCollaboratorIndex]);
-  }, [searchedCollaborators, activeCollaboratorIndex, onSelectCollaborator]);
-  const onKeyDown = useCallback(event => {
-    if (Hotkey.isModZ(event)) {
-      event.preventDefault();
-      event.stopPropagation();
-      hideCommentPopover();
-      event.nativeEvent.stopImmediatePropagation();
-      commentRef.current.innerHTML = '';
-      return;
-    }
-    if (Hotkey.isShiftEnter(event)) return;
-    if (Hotkey.isModP(event)) {
-      commentRef.current.blur();
-    }
-    if (event.keyCode === KeyCodes.Enter) {
-      event.preventDefault();
-      if (searchedCollaborators.length > 0) return;
-      onSubmit();
-    }
-    if (event.keyCode === KeyCodes.Esc) {
-      event.preventDefault();
-      onCancel();
-    }
-    if (event.keyCode === KeyCodes.UpArrow || event.keyCode === KeyCodes.DownArrow) {
-      event.stopPropagation();
-      if (searchedCollaborators.length > 0) {
-        event.preventDefault();
-      }
-    }
-  }, [onCancel, onSubmit, searchedCollaborators, commentRef, hideCommentPopover]);
-  const onKeyUp = useCallback(event => {
-    const selection = window.getSelection();
-    setRange(selection.getRangeAt(0));
-    if (event.keyCode === KeyCodes.DownArrow) {
-      handleSelectingCollaborator(event, DOWN);
-      return;
-    }
-    if (event.keyCode === KeyCodes.UpArrow) {
-      handleSelectingCollaborator(event, UP);
-      return;
-    }
-    if (event.keyCode === KeyCodes.Enter) {
-      handleSelectCollaborator();
-      return;
-    }
-    handleInvolvedKeyUp(event);
-  }, [handleSelectingCollaborator, handleInvolvedKeyUp, handleSelectCollaborator]);
-  const onMouseUp = useCallback(() => {
-    const selection = window.getSelection();
-    setRange(selection.getRangeAt(0));
-  }, []);
-  const onPaste = useCallback(event => {
-    commentUtilities.onPaste(event);
-  }, [commentUtilities]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: commentRef,
-    contentEditable: "true",
-    className: "comment-editor",
-    placeholder: t(placeholder),
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onMouseUp: onMouseUp,
-    onPaste: onPaste
-  }), searchedCollaborators.length > 0 && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-comment-caret-list",
-    ref: collaboratorsPopoverRef
-  }, searchedCollaborators.map((participant, index) => {
-    return /*#__PURE__*/React.createElement(CommentParticipantItem, {
-      key: participant.username,
-      participantIndex: index,
-      activeParticipantIndex: activeCollaboratorIndex,
-      participant: participant,
-      setScrollTop: setScrollTop,
-      onSelectParticipant: onSelectCollaborator
-    });
-  }))));
-});
-export default CommentInput;