@seafile/sdoc-editor 0.4.7 → 0.4.8

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

@@ -7,7 +7,9 @@
 
 .sdoc-editor-container .sdoc-editor-toolbar {
   display: flex;
+  flex: 1;
   justify-content: center;
+  position: relative;
   height: 44px;
   align-items: center;
   padding: 0 10px;
@@ -18,6 +20,14 @@
   z-index: 102;
 }
 
+.sdoc-editor-container .sdoc-editor-toolbar .sdoc-editor-toolbar-right-menu {
+  display: flex;
+  flex-direction: row-reverse;
+  position: absolute;
+  right: 20px;
+  border-right: none;
+}
+
 .sdoc-editor-container .sdoc-editor-content {
   width: 100%;
   height: calc(100% - 44px);
@@ -64,7 +74,7 @@
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
 }
 
-.sdoc-editor-container .sdoc-editor-content .article > div {
+.sdoc-editor-container .sdoc-editor-content .article>div {
   caret-color: blue;
 }
 
@@ -77,7 +87,7 @@
 }
 
 .sdoc-editor-container .sdoc-editor-content .article .sdoc-draging {
-  border-bottom: 2px solid rgba(35,131,226);
+  border-bottom: 2px solid rgba(35, 131, 226);
 }
 
 .sdoc-editor-container .seafile-block-container {

package/dist/basic-sdk/constants/index.js

@@ -14,7 +14,9 @@ export const INTERNAL_EVENT = {
   UPDATE_TAG_VIEW: 'update_tag_view',
   COMMENT_LIST_CLICK: 'comment_list_click',
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
-  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker'
+  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker',
+  OPEN_SEARCH_REPLACE_MODAL: 'open_search_replace_modal',
+  UPDATE_SEARCH_REPLACE_HIGHLIGHT: 'update_search_replace_highlight'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

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

@@ -4,7 +4,7 @@ import { Editor } from '@seafile/slate';
 import deepCopy from 'deep-copy';
 import context from '../../context';
 import CommonLoading from '../../components/common-loading';
-import { PAGE_EDIT_AREA_WIDTH } from '../constants';
+import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../constants';
 import { createDefaultEditor } from '../extension';
 import withNodeId from '../node-id';
 import { withSocketIO } from '../socket';
@@ -143,6 +143,11 @@ const SdocEditor = forwardRef((_ref, ref) => {
       isShowComment: true
     })))));
   }
+  const onValueChange = value => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
+    setSlateValue(value);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: validEditor
   }, /*#__PURE__*/React.createElement(CollaboratorsProvider, null, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
@@ -153,7 +158,7 @@ const SdocEditor = forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: validEditor,
     slateValue: slateValue,
-    updateSlateValue: setSlateValue
+    updateSlateValue: onValueChange
   }))))), /*#__PURE__*/React.createElement(InsertElementDialog, {
     editor: validEditor
   }));

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -5,6 +5,7 @@ export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
 export const REMOVE_TABLE = 'remove_table';
 export const COMBINE_CELL = 'combine_cell';
+export const SEARCH_REPLACE = 'search_replace';
 
 // text style
 export const TEXT_STYLE = 'text_style';
@@ -195,6 +196,11 @@ export const MENUS_CONFIG_MAP = {
     id: "sdoc_".concat(CALL_OUT),
     iconClass: 'sdocfont sdoc-callout',
     text: 'Callout'
+  },
+  [SEARCH_REPLACE]: {
+    id: "sdoc_".concat(SEARCH_REPLACE),
+    iconClass: 'sdocfont sdoc-find-replace',
+    text: 'Search_and_replace'
   }
 };
 

package/dist/basic-sdk/extension/plugins/code-block/render-elem.js

@@ -130,6 +130,9 @@ const CodeBlock = _ref => {
     eventBus.subscribe(INTERNAL_EVENT.HIDDEN_CODE_BLOCK_HOVER_MENU, onHiddenHoverMenu);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const handleScroll = () => {
+    EventBus.getInstance().dispatch(INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT);
+  };
   return /*#__PURE__*/React.createElement("div", Object.assign({
     "data-id": element.id,
     "data-root": "true"
@@ -138,6 +141,7 @@ const CodeBlock = _ref => {
     onClick: onFocusCodeBlock,
     onMouseLeave: onMouseLeave
   }), /*#__PURE__*/React.createElement("pre", {
+    onScroll: handleScroll,
     className: 'sdoc-code-block-pre',
     ref: codeBlockRef
   }, /*#__PURE__*/React.createElement("code", {

package/dist/basic-sdk/extension/plugins/image/hover-menu/index.js

@@ -18,6 +18,7 @@ const ImageHoverMenu = _ref => {
     menuPosition,
     element,
     parentNodeEntry,
+    imageCaptionInputRef,
     onHideImageHoverMenu,
     t
   } = _ref;
@@ -130,6 +131,11 @@ const ImageHoverMenu = _ref => {
         }, {
           at: path
         });
+        queueMicrotask(() => {
+          if (imageCaptionInputRef.current) {
+            imageCaptionInputRef.current.focus();
+          }
+        });
         return;
       }
     }

package/dist/basic-sdk/extension/plugins/image/plugin.js

@@ -1,9 +1,9 @@
-import { Transforms, Path, Editor, Element } from '@seafile/slate';
+import { Transforms, Path, Editor, Element, Range } from '@seafile/slate';
 import toaster from '../../../../components/toast';
 import context from '../../../../context';
 import EventBus from '../../../utils/event-bus';
 import { insertImage, hasSdocImages, getImageData, queryCopyMoveProgressView, resetCursor, isSingleImage } from './helpers';
-import { focusEditor, generateEmptyElement } from '../../core';
+import { focusEditor, generateEmptyElement, isBlockAboveEmpty } from '../../core';
 import { getErrorMsg } from '../../../../utils';
 import { getSlateFragmentAttribute } from '../../../utils/document-utils';
 import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE, IMAGE_BLOCK, PARAGRAPH } from '../../constants';
@@ -110,10 +110,16 @@ const withImage = editor => {
     const {
       selection
     } = editor;
+    const focusPoint = Editor.before(editor, selection);
     const point = Editor.before(editor, selection, {
       distance: 2
     });
     const [node, path] = Editor.node(editor, [point.path[0], point.path[1]]);
+    if (Range.isCollapsed(selection) && isBlockAboveEmpty(editor) && !Path.isCommon(path, selection.anchor.path)) {
+      deleteBackward(unit);
+      focusEditor(newEditor, Editor.end(newEditor, focusPoint));
+      return;
+    }
     if (Element.isElement(node) && node.type === IMAGE) {
       // If the wrapping element is image_block, delete the wrapping element
       const [parentNode, p] = Editor.node(editor, [path[0]]);

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

@@ -39,6 +39,7 @@ const Image = _ref => {
   const readOnly = useReadOnly();
   const imageRef = useRef(null);
   const resizerRef = useRef(null);
+  const imageCaptionInputRef = useRef(null);
   const scrollRef = useScrollContext();
   const [movingWidth, setMovingWidth] = useState(null);
   const [isResizing, setIsResizing] = useState(false);
@@ -231,15 +232,17 @@ const Image = _ref => {
     contentEditable: false
   }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === IMAGE_BLOCK && show_caption && /*#__PURE__*/React.createElement("input", {
     id: "sdoc-image-caption-input",
+    ref: imageCaptionInputRef,
     className: "sdoc-image-caption-input-wrapper",
     style: {
       width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth)
     },
     placeholder: t('Insert_caption'),
+    autoComplete: "off",
     value: caption,
     onBlur: onSetCaption,
     onChange: e => {
-      setCaption(e.target.value.trim());
+      setCaption(e.target.value);
     },
     onCompositionStart: e => {
       e.stopPropagation();
@@ -249,6 +252,7 @@ const Image = _ref => {
     menuPosition: menuPosition,
     element: element,
     parentNodeEntry: nodeEntry,
+    imageCaptionInputRef: imageCaptionInputRef,
     onHideImageHoverMenu: () => {
       setIsShowImageHoverMenu(false);
     }

package/dist/basic-sdk/extension/plugins/index.js

@@ -15,6 +15,7 @@ import SdocLinkPlugin from './sdoc-link';
 import FileLinkPlugin from './file-link';
 import ParagraphPlugin from './paragraph';
 import CalloutPlugin from './callout';
-const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin, CalloutPlugin];
+import SearchReplacePlugin from './search-replace';
+const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin];
 export default Plugins;
-export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin };

package/dist/basic-sdk/extension/plugins/search-replace/constant.js

@@ -0,0 +1,2 @@
+export const FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR = '#f19d38';
+export const DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR = '#fef500';

package/dist/basic-sdk/extension/plugins/search-replace/helper.js

@@ -0,0 +1,331 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Editor, Element, Node, Text, Transforms } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
+import { CODE_BLOCK, IMAGE } from '../../constants';
+import { DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR, FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR } from './constant';
+
+// Check the node iff contains text or inline node
+const isInlineContainer = (editor, node) => {
+  if (Text.isText(node)) return false;
+  if (node.children) {
+    return node.children.every(child => Text.isText(child) || Editor.isInline(editor, child));
+  }
+  return false;
+};
+const formatTextEntries = textEntries => {
+  return textEntries.reduce((pre, cur) => {
+    var _pre$passedLength, _pre;
+    const currentLength = cur[0].text.length;
+    const previousLength = (_pre$passedLength = (_pre = pre[pre.length - 1]) === null || _pre === void 0 ? void 0 : _pre.passedLength) !== null && _pre$passedLength !== void 0 ? _pre$passedLength : 0;
+    const currentItem = {
+      passedLength: previousLength + currentLength,
+      textEntry: [...cur]
+    };
+    return pre.concat(currentItem);
+  }, []);
+};
+const splitTextNode = node => {
+  return node.children.reduce((pre, cur) => {
+    if (cur.type === IMAGE) {
+      pre.push(_objectSpread(_objectSpread({}, node), {}, {
+        children: []
+      }));
+    } else {
+      pre[pre.length - 1].children.push(cur);
+    }
+    return pre;
+  }, [_objectSpread(_objectSpread({}, node), {}, {
+    children: []
+  })]);
+};
+const matchSearchWordPosition = (node, searchWord) => {
+  const content = Node.string(node);
+  const regex = new RegExp(searchWord, 'gi');
+  const matches = [...content.matchAll(regex)];
+  return matches.map(match => match.index) || [];
+};
+const getMatchedTextInfos = (editor, node, keyword) => {
+  const matchedTextNodeEntires = [];
+  if (node.children) {
+    // If node is text container, match keyword in text
+    if (isInlineContainer(editor, node)) {
+      const splitNodes = splitTextNode(node);
+      splitNodes.forEach(node => {
+        const textEntries = Array.from(Node.texts(node));
+        if (!textEntries) return;
+        const newTextEntries = formatTextEntries(textEntries);
+        const positions = matchSearchWordPosition(node, keyword);
+        const res = positions.reduce((pre, position) => {
+          const {
+            ranges,
+            startMatchIndex
+          } = pre;
+          let anchor;
+          for (let index = startMatchIndex; index < newTextEntries.length; index++) {
+            const {
+              passedLength,
+              textEntry
+            } = newTextEntries[index];
+            const passedNodeLength = passedLength - textEntry[0].text.length;
+            if (!anchor && passedLength > position) {
+              anchor = {
+                path: ReactEditor.findPath(editor, textEntry[0]),
+                offset: position - passedNodeLength
+              };
+            }
+            if (passedLength >= position + keyword.length) {
+              const range = {
+                anchor,
+                focus: {
+                  path: ReactEditor.findPath(editor, textEntry[0]),
+                  offset: position + keyword.length - passedNodeLength
+                }
+              };
+              return {
+                ranges: [...ranges, range],
+                startMatchIndex: index
+              };
+            }
+          }
+          return pre;
+        }, {
+          ranges: [],
+          startMatchIndex: 0
+        });
+        matchedTextNodeEntires.push(res.ranges);
+      });
+    }
+  }
+  return matchedTextNodeEntires;
+};
+const generateRangeWhenWrapLine = (editor, path, index, count, domRange, baseHeight) => {
+  let i = 0;
+  let j = 1;
+  let isOverrideForwardRange = true;
+  const subHighlightInfos = [];
+  while (j <= count) {
+    const subSplitRange = {
+      anchor: {
+        path,
+        offset: index + i
+      },
+      focus: {
+        path,
+        offset: index + j
+      }
+    };
+    const subRange = ReactEditor.toDOMRange(editor, subSplitRange);
+    if (subRange.getBoundingClientRect().height === baseHeight) {
+      isOverrideForwardRange && subHighlightInfos.pop();
+      if (!isOverrideForwardRange) isOverrideForwardRange = true;
+      subHighlightInfos.push({
+        rangeInfo: subRange.getBoundingClientRect(),
+        domRange
+      });
+      j++;
+    } else {
+      i = j - 1;
+      isOverrideForwardRange = false;
+    }
+  }
+  return subHighlightInfos;
+};
+const findHighlightTextInfos = (editor, keyword) => {
+  const matchedBlockEntries = [...Editor.nodes(editor, {
+    match: n => {
+      if (Element.isElement(n) && Editor.isBlock(editor, n)) {
+        try {
+          const blockString = Node.string(n);
+          return blockString.toLowerCase().includes(keyword.toLowerCase());
+        } catch (error) {
+          return false;
+        }
+      }
+    },
+    mode: 'lowest',
+    at: []
+  })];
+  const matchedTextEntriesList = Array.from(matchedBlockEntries).reduce((pre, _ref) => {
+    let [node] = _ref;
+    return [...pre, ...getMatchedTextInfos(editor, node, keyword.toLowerCase())];
+  }, []).flat();
+  return matchedTextEntriesList;
+};
+const getBaseHeight = (editor, range) => {
+  const {
+    anchor: {
+      path
+    }
+  } = range;
+  const subRange = {
+    anchor: {
+      path,
+      offset: 0
+    },
+    focus: {
+      path,
+      offset: 1
+    }
+  };
+  return ReactEditor.toDOMRange(editor, subRange).getBoundingClientRect().height;
+};
+export const getHighlightInfos = (editor, keyword) => {
+  if (keyword === '') return [];
+  const highlightTextInfos = findHighlightTextInfos(editor, keyword);
+  const rangeList = highlightTextInfos === null || highlightTextInfos === void 0 ? void 0 : highlightTextInfos.map(range => {
+    const domRange = ReactEditor.toDOMRange(editor, range);
+    const rangeInfo = domRange.getBoundingClientRect();
+    const baseHeight = getBaseHeight(editor, range);
+    // highlight word wrap line, assume line height is more then letter height
+    if (rangeInfo.height > baseHeight) return generateRangeWhenWrapLine(editor, range.anchor.path, range.anchor.offset, keyword.length, domRange, baseHeight);
+    return [{
+      rangeInfo,
+      domRange
+    }];
+  });
+  return rangeList;
+};
+export const handleReplaceKeyword = (editor, highlightInfos, replacedContent) => {
+  if (!highlightInfos || !highlightInfos.length) return;
+  // Delete from backward avoiding the range changed
+  highlightInfos.reverse().forEach(highlightInfo => {
+    const {
+      domRange
+    } = highlightInfo[highlightInfo.length - 1];
+    const slateRange = ReactEditor.toSlateRange(editor, domRange, {
+      exactMatch: true
+    });
+    Transforms.insertText(editor, replacedContent, {
+      at: Editor.end(editor, slateRange)
+    });
+    Transforms.delete(editor, {
+      at: slateRange
+    });
+  });
+};
+export const clearCanvas = canvases => {
+  canvases.forEach(canvas => canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height));
+};
+export const scrollIntoView = (articleContainerTop, highlightX, highlightY, codeBlockDom, width) => {
+  if (!articleContainerTop) return;
+  const scrollContainer = document.getElementById('sdoc-scroll-container');
+  // Scroll into view when highlight block overflow y
+  const scrollTop = highlightY - articleContainerTop - 20;
+  const isOverflowY = scrollContainer.scrollTop > scrollTop || scrollContainer.scrollTop + scrollContainer.clientHeight < scrollTop;
+  isOverflowY && scrollContainer.scrollTo({
+    top: scrollTop
+  });
+  // Scroll into view when code block overflow x
+  if (codeBlockDom) {
+    let isOverflowX = false;
+    const codeBlockDomLeft = codeBlockDom.getBoundingClientRect().left;
+    const leftDistance = codeBlockDomLeft + 50;
+    const rightDistance = leftDistance + codeBlockDom.clientWidth - 50;
+    isOverflowX = leftDistance > highlightX + width || rightDistance < highlightX + width;
+    isOverflowX && codeBlockDom.scrollTo({
+      left: highlightX - leftDistance + width
+    });
+  }
+};
+const getNowrapCodeBlockInfos = editor => {
+  const codeBlockEntries = Editor.nodes(editor, {
+    match: n => n.type === CODE_BLOCK && n.style['white_space'] === 'nowrap',
+    at: []
+  }) || [];
+
+  // Get code block dom and range info
+  const codeBlockInfos = Array.from(codeBlockEntries).map(_ref2 => {
+    let [codeBlockNode] = _ref2;
+    const codeBlockRange = ReactEditor.toDOMNode(editor, codeBlockNode).getBoundingClientRect();
+    return {
+      codeBlockRange,
+      codeBlockNode
+    };
+  });
+  return codeBlockInfos;
+};
+
+// Hide highlight block when overflow article container
+const updateInfoAsMatchedInCodeBlock = (editor, codeBlockInfos, highlightX, highlightY, highlightHeight, highlightWidth) => {
+  if (!codeBlockInfos.length) return;
+  let codeBlockDom = null;
+  codeBlockInfos.some(_ref3 => {
+    let {
+      codeBlockRange,
+      codeBlockNode
+    } = _ref3;
+    const isInCodeBlockArea = codeBlockRange.y <= highlightY && codeBlockRange.y + codeBlockRange.height > highlightY + highlightHeight;
+    if (isInCodeBlockArea) {
+      codeBlockDom = ReactEditor.toDOMNode(editor, codeBlockNode).querySelector('.sdoc-code-block-pre');
+      const codeBlockRightSidePosition = codeBlockRange.x + codeBlockRange.width;
+      const isOverflowX = codeBlockRange.x > highlightX || codeBlockRightSidePosition < highlightX + highlightWidth;
+      if (isOverflowX) {
+        // Calculate forward and backward hidden width
+        const overflowForward = codeBlockRange.x - highlightX > 0 ? codeBlockRange.x - highlightX : 0;
+        const overflowBackward = highlightX + highlightWidth - codeBlockRightSidePosition > 0 ? highlightX + highlightWidth - codeBlockRightSidePosition : 0;
+        highlightWidth = highlightWidth - overflowForward - overflowBackward;
+      }
+      if (highlightWidth < 0) highlightWidth = 0;
+      if (highlightX < codeBlockRange.x) highlightX = codeBlockRange.x;
+      return true;
+    }
+    return false;
+  });
+  return {
+    codeBlockDom,
+    highlightX,
+    highlightWidth
+  };
+};
+export const drawHighlights = function (editor, ranges, selectIndex) {
+  let isMoveIntoView = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const canvases = document.querySelectorAll('.sdoc-find-search-highlight-canvas');
+  clearCanvas(canvases);
+  if (ranges.length === 0) return;
+  const articleContainer = document.querySelector('.sdoc-article-container');
+  const {
+    top,
+    left
+  } = articleContainer.getBoundingClientRect();
+  let rangeIndex = 0;
+  let splitRangeIndex = 0;
+  let canvasIndex = 0;
+  const codeBlockInfos = getNowrapCodeBlockInfos(editor);
+  do {
+    let canvas = canvases[canvasIndex];
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const splitRanges = ranges[rangeIndex];
+    for (let j = splitRangeIndex; j < splitRanges.length; j++) {
+      const isFocussedHighlight = rangeIndex === selectIndex;
+      let {
+        x,
+        y,
+        width,
+        height
+      } = splitRanges[j].rangeInfo;
+      let codeBlockDom = null;
+      if (y - top < (canvasIndex + 1) * 5000) {
+        // Hide highlight block when overflow article container
+        const updateInfo = updateInfoAsMatchedInCodeBlock(editor, codeBlockInfos, x, y, height, width);
+        if (updateInfo) {
+          x = updateInfo.highlightX;
+          width = updateInfo.highlightWidth;
+          if (isFocussedHighlight) codeBlockDom = updateInfo.codeBlockDom;
+        }
+
+        // Draw highlight block
+        ctx.fillStyle = isFocussedHighlight ? FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR : DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR;
+        ctx.fillRect(x - left, y - top - canvasIndex * 5000, width, height);
+
+        // Scroll into view
+        isMoveIntoView && isFocussedHighlight && scrollIntoView(top, x, y, codeBlockDom, width);
+        if (j === splitRanges.length - 1) rangeIndex++;
+        splitRangeIndex = 0;
+      } else {
+        splitRangeIndex = j;
+        canvasIndex = Math.ceil((y - top) / 5000 - 1);
+      }
+    }
+  } while (rangeIndex < ranges.length);
+};

package/dist/basic-sdk/extension/plugins/search-replace/index.js

@@ -0,0 +1,10 @@
+import { SEARCH_REPLACE } from '../../constants/menus-config';
+import SearchReplaceMenu from './menu';
+import withSearchReplace from './plugin';
+const SearchReplacePlugin = {
+  type: SEARCH_REPLACE,
+  editorMenus: [SearchReplaceMenu],
+  editorPlugin: withSearchReplace,
+  renderElements: []
+};
+export default SearchReplacePlugin;

package/dist/basic-sdk/extension/plugins/search-replace/menu/index.css

@@ -0,0 +1,14 @@
+.sdoc-search-highlight-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  overflow: hidden;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+}
+
+.sdoc-find-search-highlight-canvas {
+  position: absolute;
+}

package/dist/basic-sdk/extension/plugins/search-replace/menu/index.js

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MenuItem } from '../../../commons';
+import { MENUS_CONFIG_MAP } from '../../../constants';
+import { SEARCH_REPLACE } from '../../../constants/menus-config';
+import SearchReplacePopover from '../popover';
+import EventBus from '../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../constants';
+import './index.css';
+const menuConfig = MENUS_CONFIG_MAP[SEARCH_REPLACE];
+const SearchReplaceMenu = _ref => {
+  let {
+    isRichEditor,
+    className,
+    editor
+  } = _ref;
+  const [isOpenPopover, setIsOpenPopover] = useState(false);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL, () => setIsOpenPopover(true));
+    return () => unsubscribe();
+  }, [isOpenPopover]);
+  const onMouseDown = useCallback(() => {
+    setIsOpenPopover(!isOpenPopover);
+  }, [isOpenPopover]);
+  const articleContainer = document.querySelector('.sdoc-article-container');
+  const articleContainerSize = useMemo(() => {
+    const articleContainer = document.querySelector('.sdoc-article-container');
+    if (!articleContainer) return null;
+    const {
+      offsetHeight,
+      offsetWidth,
+      clientHeight
+    } = articleContainer;
+    return {
+      offsetHeight,
+      offsetWidth,
+      clientHeight
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenPopover]);
+  const renderCanvasses = useMemo(() => {
+    if (!isOpenPopover) return false;
+    const generateCount = Math.ceil(articleContainerSize.offsetHeight / 5000);
+    const canvasList = [];
+    for (let index = 0; index < generateCount; index++) {
+      const top = index * 5000;
+      canvasList.push( /*#__PURE__*/React.createElement("canvas", {
+        key: 'sdoc-find-search-' + index,
+        id: "sdoc-find-search-".concat(index),
+        className: "sdoc-find-search-highlight-canvas",
+        width: articleContainerSize.offsetWidth,
+        height: 5000,
+        style: {
+          top
+        }
+      }));
+    }
+    return canvasList;
+  }, [articleContainerSize, isOpenPopover]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+    isRichEditor: isRichEditor,
+    className: className,
+    disabled: false,
+    isActive: isOpenPopover,
+    onMouseDown: onMouseDown
+  }, menuConfig)), isOpenPopover && /*#__PURE__*/React.createElement(SearchReplacePopover, {
+    editor: editor,
+    isOpen: isOpenPopover,
+    closePopover: onMouseDown
+  }), isOpenPopover && createPortal( /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: articleContainerSize.clientHeight
+    },
+    className: "sdoc-search-highlight-container"
+  }, renderCanvasses), articleContainer));
+};
+export default SearchReplaceMenu;

package/dist/basic-sdk/extension/plugins/search-replace/plugin.js

@@ -0,0 +1,21 @@
+import isHotkey from 'is-hotkey';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+const withSearchReplace = editor => {
+  const {
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+  newEditor.onHotKeyDown = event => {
+    if (isHotkey('mod+f', event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const eventBus = EventBus.getInstance();
+      eventBus.dispatch(INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL);
+      return false;
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  return newEditor;
+};
+export default withSearchReplace;

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.css

@@ -0,0 +1,82 @@
+.sdoc-search-replace-popover-container {
+  position: absolute;
+  width: 400px;
+  height: 280px;
+  z-index: 103;
+  background: #fff;
+  border: 1px solid #ebebeb;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  border-bottom: 1px solid #ebebeb;
+  pointer-events: none;
+  user-select: none;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title .sdoc-search-replace-title-text {
+  font-weight: 600;
+  color: #333;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title .sdoc-search-replace-title-close {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.sdoc-search-replace-popover-container .sdoc-search-replace-popover-body {
+  padding: 10px 15px;
+  pointer-events: visibleFill;
+  pointer-events: none;
+}
+
+.sdoc-search-replace-popover-body label,
+.sdoc-search-replace-popover-body input,
+.sdoc-search-replace-popover-body button {
+  pointer-events: auto;
+}
+
+.sdoc-search-replace-popover-body label {
+  user-select: none;
+}
+
+.sdoc-search-replace-popover-body .sdoc-replace-ipt-label {
+  margin-top: 10px;
+}
+
+.sdoc-search-replace-popover-body .sdoc-search-replace-popover-btn-group {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sdoc-replace-all-confirm-modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 104;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.sdoc-replace-ipt-container {
+  display: flex;
+  position: relative;
+}
+
+.sdoc-replace-ipt-container input {
+  padding-right: 85px;
+}
+
+.sdoc-replace-ipt-container .sdoc-replace-ipt-tip {
+  position: absolute;
+  right: 15px;
+  top: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.js

@@ -0,0 +1,211 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import isHotkey from 'is-hotkey';
+import { Input, Label } from 'reactstrap';
+import debounce from '../../../../utils/debounce';
+import { handleReplaceKeyword, getHighlightInfos, drawHighlights } from '../helper';
+import ReplaceAllConfirmModal from './replace-all-confirm-modal';
+import EventBus from '../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../constants';
+import './index.css';
+const SearchReplacePopover = _ref => {
+  let {
+    editor,
+    closePopover
+  } = _ref;
+  const [searchContent, setSearchContent] = useState('');
+  const [replacementContent, setReplacementContent] = useState('');
+  const [highlightInfos, setHighlightInfos] = useState([]);
+  const [isMoving, setIsMoving] = useState(false);
+  const [popoverPosition, setPopoverPosition] = useState({
+    x: 0,
+    y: 100
+  });
+  const [currentSelectIndex, setCurrentSelectIndex] = useState(0);
+  const [isOpenReplaceAllModal, setIsOpenReplaceAllModal] = useState(false);
+  const pageInnerSizeRef = useRef({
+    x: window.innerWidth,
+    y: window.innerHeight
+  });
+  const shouldScrollIntoView = useRef(false);
+  const popoverContainerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const {
+    t
+  } = useTranslation();
+  const searchInputSuffixContent = useMemo(() => {
+    if (!!searchContent.length && !highlightInfos.length) return t('Search_not_found');
+    if (highlightInfos.length) return "".concat(currentSelectIndex + 1, " / ").concat(highlightInfos.length);
+  }, [currentSelectIndex, highlightInfos.length, searchContent.length, t]);
+  useEffect(() => {
+    setPopoverPosition({
+      x: pageInnerSizeRef.current.x - 420,
+      y: 95
+    });
+  }, []);
+  const handleDrawHighlight = useCallback((editor, keyword) => {
+    const newHighlightInfos = getHighlightInfos(editor, keyword);
+    setHighlightInfos(newHighlightInfos);
+    let newSelectIndex = currentSelectIndex;
+    if (!shouldScrollIntoView.current && newHighlightInfos.length !== highlightInfos.length) {
+      newSelectIndex = 0;
+    }
+    if (newSelectIndex >= newHighlightInfos.length) {
+      newSelectIndex = newHighlightInfos.length - 1;
+    }
+    if (newSelectIndex < 0 && newHighlightInfos.length) {
+      newSelectIndex = 0;
+    }
+    setCurrentSelectIndex(newSelectIndex);
+  }, [currentSelectIndex, highlightInfos.length, shouldScrollIntoView]);
+  const handleDrawHighlightLister = useCallback(() => {
+    handleDrawHighlight(editor, searchContent);
+    pageInnerSizeRef.current = {
+      x: window.innerWidth,
+      y: window.innerHeight
+    };
+  }, [editor, handleDrawHighlight, searchContent]);
+  useEffect(() => {
+    const highlightInfos = getHighlightInfos(editor, searchContent);
+    drawHighlights(editor, highlightInfos, currentSelectIndex, shouldScrollIntoView.current);
+    shouldScrollIntoView.current = false;
+  }, [currentSelectIndex, editor, searchContent, highlightInfos, shouldScrollIntoView]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unSubscribe = eventBus.subscribe(INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, handleDrawHighlightLister);
+    return () => {
+      unSubscribe();
+    };
+  }, [editor, handleDrawHighlight, handleDrawHighlightLister, highlightInfos.length, searchContent]);
+  const handleSearchInputChange = useCallback(e => {
+    const keyword = e.target.value;
+    setSearchContent(keyword);
+    handleDrawHighlight(editor, keyword);
+    setCurrentSelectIndex(0);
+  }, [editor, handleDrawHighlight]);
+  const handleLast = useCallback(() => {
+    const currentIndex = currentSelectIndex === 0 ? highlightInfos.length - 1 : currentSelectIndex - 1;
+    setCurrentSelectIndex(currentIndex);
+    shouldScrollIntoView.current = true;
+  }, [currentSelectIndex, highlightInfos.length]);
+  const handleNext = useCallback(() => {
+    const currentIndex = currentSelectIndex === highlightInfos.length - 1 ? 0 : currentSelectIndex + 1;
+    setCurrentSelectIndex(currentIndex);
+    shouldScrollIntoView.current = true;
+  }, [currentSelectIndex, highlightInfos.length]);
+  const handleOpenReplaceAllModal = useCallback(() => {
+    setIsOpenReplaceAllModal(true);
+  }, []);
+  const handleCloseReplaceAllModal = useCallback(() => {
+    setIsOpenReplaceAllModal(false);
+  }, []);
+  const handleReplace = useCallback(() => {
+    handleReplaceKeyword(editor, [highlightInfos[currentSelectIndex]], replacementContent);
+    shouldScrollIntoView.current = true;
+  }, [currentSelectIndex, editor, highlightInfos, replacementContent]);
+  const handleReplaceAll = useCallback(() => {
+    handleReplaceKeyword(editor, highlightInfos, replacementContent);
+    handleCloseReplaceAllModal();
+  }, [editor, handleCloseReplaceAllModal, highlightInfos, replacementContent]);
+  const handleStartMove = useCallback(e => {
+    if (!e.target.className.includes('sdoc-search-replace-popover-container')) return;
+    setIsMoving(true);
+  }, []);
+  const handleMouseMove = useCallback(e => {
+    if (!isMoving) return;
+    const {
+      width,
+      height
+    } = popoverContainerRef.current.getBoundingClientRect();
+    const {
+      movementX,
+      movementY
+    } = e;
+    let x = popoverPosition.x + movementX;
+    let y = popoverPosition.y + movementY;
+    if (x <= 0) x = 0;
+    if (y < 0) y = 0;
+    if (x + width >= pageInnerSizeRef.current.x) x = pageInnerSizeRef.current.x - width;
+    if (y + height >= pageInnerSizeRef.current.y) y = pageInnerSizeRef.current.y - height;
+    setPopoverPosition({
+      x,
+      y
+    });
+  }, [isMoving, popoverPosition.x, popoverPosition.y]);
+  const handleFinishMove = useCallback(() => {
+    setIsMoving(false);
+  }, []);
+  const handleInputKeyDown = e => {
+    if (!highlightInfos.length) return;
+    if (isHotkey('enter', e)) handleNext();
+    if (isHotkey('enter+shift', e)) handleLast();
+  };
+  return createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-search-replace-popover-container",
+    onMouseDown: handleStartMove,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleFinishMove,
+    onMouseLeave: handleFinishMove,
+    ref: popoverContainerRef,
+    style: {
+      left: popoverPosition.x,
+      top: popoverPosition.y
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-search-replace-popover-title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-search-replace-title-text"
+  }, t('Search_and_replace')), /*#__PURE__*/React.createElement("i", {
+    onClick: closePopover,
+    className: "sdocfont sdoc-sm-close sdoc-search-replace-title-close"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-search-replace-popover-body"
+  }, /*#__PURE__*/React.createElement(Label, {
+    for: "sdoc-search-replace-search-ipt"
+  }, t('Search')), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-replace-ipt-container"
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: searchInputRef,
+    autoFocus: true,
+    onKeyUp: handleInputKeyDown,
+    onChange: debounce(handleSearchInputChange, 300),
+    id: "sdoc-search-replace-search-ipt",
+    placeholder: t('Type_search_content')
+  }), searchInputSuffixContent && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-replace-ipt-tip"
+  }, searchInputSuffixContent)), /*#__PURE__*/React.createElement(Label, {
+    className: "sdoc-replace-ipt-label",
+    for: "sdoc-search-replace-replace-ipt"
+  }, t('Replace_as')), /*#__PURE__*/React.createElement(Input, {
+    onChange: e => setReplacementContent(e.target.value),
+    id: "sdoc-search-replace-replace-ipt",
+    placeholder: t('Type_replace_content')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-search-replace-popover-btn-group"
+  }, /*#__PURE__*/React.createElement("button", {
+    disabled: !highlightInfos.length,
+    onClick: handleLast,
+    className: "btn btn-secondary"
+  }, t('Previous')), /*#__PURE__*/React.createElement("button", {
+    disabled: !highlightInfos.length,
+    onClick: handleNext,
+    className: "btn btn-secondary"
+  }, t('Next')), /*#__PURE__*/React.createElement("button", {
+    disabled: !highlightInfos.length,
+    onClick: handleReplace,
+    className: "btn btn-primary"
+  }, t('Replace')), /*#__PURE__*/React.createElement("button", {
+    disabled: !highlightInfos.length,
+    onClick: handleOpenReplaceAllModal,
+    className: "btn btn-primary"
+  }, t('Replace_all'))))), /*#__PURE__*/React.createElement(ReplaceAllConfirmModal, {
+    isOpen: isOpenReplaceAllModal,
+    handleConfirm: handleReplaceAll,
+    handleCancel: handleCloseReplaceAllModal,
+    number: highlightInfos.length,
+    originalWord: searchContent,
+    replacedWord: replacementContent
+  })), document.body);
+};
+export default SearchReplacePopover;

package/dist/basic-sdk/extension/plugins/search-replace/popover/replace-all-confirm-modal.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+const ReplaceAllConfirmModal = _ref => {
+  let {
+    isOpen,
+    handleConfirm,
+    handleCancel,
+    number,
+    originalWord,
+    replacedWord
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const modalContent = replacedWord === '' ? t('Are_you_sure_to_clear_all_number_xxx_in_this_document', {
+    number,
+    originalWord
+  }) : t('Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy', {
+    number,
+    originalWord,
+    replacedWord
+  });
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    toggle: handleCancel
+  }, t('Tip')), /*#__PURE__*/React.createElement(ModalBody, null, "".concat(modalContent)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleCancel,
+    className: "btn btn-secondary"
+  }, t('Cancel')), /*#__PURE__*/React.createElement("button", {
+    onClick: handleConfirm,
+    className: "btn btn-primary"
+  }, t('Confirm'))));
+};
+export default ReplaceAllConfirmModal;

package/dist/basic-sdk/extension/toolbar/header-toolbar/index.js

@@ -14,6 +14,7 @@ import Font from '../../plugins/font/menu';
 import InsertToolbar from './insert-toolbar';
 import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
 import CalloutMenu from '../../plugins/callout/menu';
+import SearchReplaceMenu from '../../plugins/search-replace/menu';
 const HeaderToolbar = _ref => {
   let {
     editor,
@@ -63,7 +64,12 @@ const HeaderToolbar = _ref => {
   })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
     editor: editor,
     readonly: readonly
-  }));
+  }), /*#__PURE__*/React.createElement(MenuGroup, {
+    className: "menu-group sdoc-editor-toolbar-right-menu"
+  }, /*#__PURE__*/React.createElement(SearchReplaceMenu, {
+    editor: editor,
+    readonly: readonly
+  })));
 };
 HeaderToolbar.defaultProps = {
   readonly: false

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

@@ -0,0 +1,14 @@
+/**
+ * @param {Function} fn
+ * @param {Number} delay
+ */
+const debounce = (fn, delay) => {
+  let timeout = null;
+  return function () {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn.apply(this, arguments);
+    }, delay);
+  };
+};
+export default debounce;

package/package.json

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

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

@@ -424,9 +424,21 @@
   "Row_number": "Row number",
   "Column_number": "Column number",
   "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Unfreeze",
   "Other_modification": "Other's modification",
   "My_modification": "My modification",
-  "Document_history": "Document history"
+  "Document_history": "Document history",
+  "Freeze_Document": "Freeze Document",
+  "Unfreeze": "Unfreeze",
+  "Search_and_replace": "Search and replace",
+  "Search": "Hledat",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Předchozí",
+  "Next": "Další",
+  "Replace": "Nahradit",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "Row number",
   "Column_number": "Column number",
   "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Unfreeze",
   "Other_modification": "Other's modification",
   "My_modification": "My modification",
-  "Document_history": "Document history"
+  "Document_history": "Document history",
+  "Freeze_Document": "Freeze Document",
+  "Unfreeze": "Unfreeze",
+  "Search_and_replace": "Search and replace",
+  "Search": "Suchen",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Vorherige",
+  "Next": "Nächste Seite",
+  "Replace": "Ersetzen",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "Row number",
   "Column_number": "Column number",
   "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Unfreeze",
   "Other_modification": "Other's modification",
   "My_modification": "My modification",
-  "Document_history": "Document history"
+  "Document_history": "Document history",
+  "Freeze_Document": "Freeze Document",
+  "Unfreeze": "Unfreeze",
+  "Search_and_replace": "Search and replace",
+  "Search": "Search",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Previous",
+  "Next": "Next",
+  "Replace": "Replace",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "Row number",
   "Column_number": "Column number",
   "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Unfreeze",
   "Other_modification": "Other's modification",
   "My_modification": "My modification",
-  "Document_history": "Document history"
+  "Document_history": "Document history",
+  "Freeze_Document": "Freeze Document",
+  "Unfreeze": "Unfreeze",
+  "Search_and_replace": "Search and replace",
+  "Search": "Buscar",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Anterior",
+  "Next": "Siguiente",
+  "Replace": "Reemplazar",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "Row number",
   "Column_number": "Column number",
   "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Unfreeze",
   "Other_modification": "Other's modification",
   "My_modification": "My modification",
-  "Document_history": "Document history"
+  "Document_history": "Document history",
+  "Freeze_Document": "Freeze Document",
+  "Unfreeze": "Unfreeze",
+  "Search_and_replace": "Search and replace",
+  "Search": "Chercher",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Précédent",
+  "Next": "Suivant",
+  "Replace": "Remplacer",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "Row number",
   "Column_number": "Column number",
   "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Unfreeze",
   "Other_modification": "Other's modification",
   "My_modification": "My modification",
-  "Document_history": "Document history"
+  "Document_history": "Document history",
+  "Freeze_Document": "Freeze Document",
+  "Unfreeze": "Unfreeze",
+  "Search_and_replace": "Search and replace",
+  "Search": "Search",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Precedente",
+  "Next": "Successivo",
+  "Replace": "Sostituire",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "Номер строки",
   "Column_number": "Номер столбца",
   "The_maximum_row_number_is_{number}": "Максимальное количество строк - {number}",
-  "Freeze_Document": "Freeze document",
-  "Unfreeze": "Разморозить",
   "Other_modification": "Другая модификация",
   "My_modification": "Моя модификация",
-  "Document_history": "История документа"
+  "Document_history": "История документа",
+  "Freeze_Document": "Заморозить документ",
+  "Unfreeze": "Разморозить",
+  "Search_and_replace": "Search and replace",
+  "Search": "Поиск",
+  "Type_search_content": "Type search content",
+  "Replace_as": "Replace as",
+  "Type_replace_content": "Type replace content",
+  "Previous": "Предыдущий",
+  "Next": "Следующий",
+  "Replace": "Заменить",
+  "Replace_all": "Replace all",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
+  "Search_not_found": "Not found"
 }

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

@@ -424,9 +424,21 @@
   "Row_number": "行数",
   "Column_number": "列数",
   "The_maximum_row_number_is_{number}": "最大行数为 {number}",
-  "Freeze_Document": "冻结文档",
-  "Unfreeze": "取消冻结",
   "Other_modification": "他人更改",
   "My_modification": "我的更改",
-  "Document_history": "文档历史"
+  "Document_history": "文档历史",
+  "Freeze_Document": "冻结文档",
+  "Unfreeze": "取消冻结",
+  "Search_and_replace": "查找和替换",
+  "Search": "搜索",
+  "Type_search_content": "输入查找内容",
+  "Replace_as": "替换为",
+  "Type_replace_content": "输入替换内容",
+  "Previous": "上一个",
+  "Next": "下一页",
+  "Replace": "替换",
+  "Replace_all": "下一个",
+  "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "确定要将此文档内的 {{number}} 处 \"{{originalWord}} \" 替换为 \"{{replacedWord}} \" 吗？",
+  "Are_you_sure_to_clear_all_number_xxx_in_this_document": "确定将此文档内的 {{number}} 处 \"{{originalWord}}\" 全部清除吗?",
+  "Search_not_found": "未找到"
 }