@seafile/comment-editor 0.0.1 → 0.0.2-alpha.1

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

@@ -1,355 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.scrollIntoView = exports.handleReplaceKeyword = exports.getHighlightInfos = exports.drawHighlights = exports.clearCanvas = void 0;
-var _slate = require("@seafile/slate");
-var _slateReact = require("@seafile/slate-react");
-var _constants = require("../../constants");
-var _constant = require("./constant");
-// Check the node iff contains text or inline node
-const isInlineContainer = (editor, node) => {
-  if (_slate.Text.isText(node)) return false;
-  if (node.children) {
-    return node.children.every(child => _slate.Text.isText(child) || _slate.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 === _constants.IMAGE) {
-      pre.push({
-        ...node,
-        children: []
-      });
-    } else {
-      pre[pre.length - 1].children.push(cur);
-    }
-    return pre;
-  }, [{
-    ...node,
-    children: []
-  }]);
-};
-const matchSearchWordPosition = (node, searchWord) => {
-  const content = _slate.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(_slate.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: _slateReact.ReactEditor.findPath(editor, textEntry[0]),
-                offset: position - passedNodeLength
-              };
-            }
-            if (passedLength >= position + keyword.length) {
-              const range = {
-                anchor,
-                focus: {
-                  path: _slateReact.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 = _slateReact.ReactEditor.toDOMRange(editor, subSplitRange);
-    const subRangeHeight = Math.round(subRange.getBoundingClientRect().height);
-    if (subRangeHeight === 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 = [..._slate.Editor.nodes(editor, {
-    match: n => {
-      if (_slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n)) {
-        try {
-          const blockString = _slate.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
-    }
-  };
-  const letterHeight = _slateReact.ReactEditor.toDOMRange(editor, subRange).getBoundingClientRect().height;
-  const baseHeight = Math.round(letterHeight);
-  return baseHeight;
-};
-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 = _slateReact.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
-    // Windows systems may have precision issues. truncate decimal to avoid this problem
-    const currentRangeHeight = Math.round(rangeInfo.height);
-    if (currentRangeHeight > baseHeight) return generateRangeWhenWrapLine(editor, range.anchor.path, range.anchor.offset, keyword.length, domRange, baseHeight);
-    return [{
-      rangeInfo,
-      domRange
-    }];
-  });
-  return rangeList;
-};
-exports.getHighlightInfos = getHighlightInfos;
-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 = _slateReact.ReactEditor.toSlateRange(editor, domRange, {
-      exactMatch: true
-    });
-    _slate.Transforms.insertText(editor, replacedContent, {
-      at: _slate.Editor.end(editor, slateRange)
-    });
-    _slate.Transforms.delete(editor, {
-      at: slateRange
-    });
-  });
-};
-exports.handleReplaceKeyword = handleReplaceKeyword;
-const clearCanvas = canvases => {
-  canvases.forEach(canvas => canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height));
-};
-exports.clearCanvas = clearCanvas;
-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
-    });
-  }
-};
-exports.scrollIntoView = scrollIntoView;
-const getNowrapCodeBlockInfos = editor => {
-  const codeBlockEntries = _slate.Editor.nodes(editor, {
-    match: n => {
-      var _n$style;
-      const isCodeBlock = _slate.Element.isElement(n) && n.type === _constants.CODE_BLOCK;
-      if (!isCodeBlock) return false;
-      // To compatible with old version,which has no style property with white_space, by default, it is 'nowrap'
-      const nodeWhiteSpace = (n === null || n === void 0 ? void 0 : (_n$style = n.style) === null || _n$style === void 0 ? void 0 : _n$style['white_space']) || 'nowrap';
-      if (nodeWhiteSpace === 'nowrap') return true;
-      return false;
-    },
-    at: []
-  }) || [];
-
-  // Get code block dom and range info
-  const codeBlockInfos = Array.from(codeBlockEntries).map(_ref2 => {
-    let [codeBlockNode] = _ref2;
-    const codeBlockRange = _slateReact.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 = _slateReact.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
-  };
-};
-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 ? _constant.FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR : _constant.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);
-};
-exports.drawHighlights = drawHighlights;

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

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _menusConfig = require("../../constants/menus-config");
-var _menu = _interopRequireDefault(require("./menu"));
-var _plugin = _interopRequireDefault(require("./plugin"));
-const SearchReplacePlugin = {
-  type: _menusConfig.SEARCH_REPLACE,
-  editorMenus: [_menu.default],
-  editorPlugin: _plugin.default,
-  renderElements: []
-};
-var _default = exports.default = SearchReplacePlugin;

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

@@ -1,14 +0,0 @@
-.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

@@ -1,89 +0,0 @@
-"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 _reactDom = require("react-dom");
-var _constants = require("../../../../constants");
-var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
-var _commons = require("../../../commons");
-var _constants2 = require("../../../constants");
-var _menusConfig = require("../../../constants/menus-config");
-var _popover = _interopRequireDefault(require("../popover"));
-require("./index.css");
-const menuConfig = _constants2.MENUS_CONFIG_MAP[_menusConfig.SEARCH_REPLACE];
-const SearchReplaceMenu = _ref => {
-  let {
-    isRichEditor,
-    className,
-    editor,
-    readonly
-  } = _ref;
-  const [isOpenPopover, setIsOpenPopover] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL, () => setIsOpenPopover(true));
-    return () => unsubscribe();
-  }, [isOpenPopover]);
-  const onMouseDown = (0, _react.useCallback)(() => {
-    setIsOpenPopover(!isOpenPopover);
-  }, [isOpenPopover]);
-  const articleContainer = document.querySelector('.sdoc-article-container');
-  const articleContainerSize = (0, _react.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 = (0, _react.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.default.createElement("canvas", {
-        key: 'sdoc-find-search-' + index,
-        id: `sdoc-find-search-${index}`,
-        className: "sdoc-find-search-highlight-canvas",
-        width: articleContainerSize.offsetWidth,
-        height: 5000,
-        style: {
-          top
-        }
-      }));
-    }
-    return canvasList;
-  }, [articleContainerSize, isOpenPopover]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
-    isRichEditor: isRichEditor,
-    className: className,
-    ariaLabel: "search",
-    disabled: false,
-    isActive: isOpenPopover,
-    onMouseDown: onMouseDown
-  }, menuConfig)), isOpenPopover && /*#__PURE__*/_react.default.createElement(_popover.default, {
-    editor: editor,
-    readonly: readonly,
-    isOpen: isOpenPopover,
-    closePopover: onMouseDown
-  }), isOpenPopover && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: articleContainerSize.clientHeight
-    },
-    className: "sdoc-search-highlight-container"
-  }, renderCanvasses), articleContainer));
-};
-var _default = exports.default = SearchReplaceMenu;

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

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
-var _constants = require("../../../constants");
-var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
-const withSearchReplace = editor => {
-  const {
-    onHotKeyDown
-  } = editor;
-  const newEditor = editor;
-  newEditor.onHotKeyDown = event => {
-    if ((0, _isHotkey.default)('mod+f', event)) {
-      event.preventDefault();
-      event.stopPropagation();
-      const eventBus = _eventBus.default.getInstance();
-      eventBus.dispatch(_constants.INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL);
-      return false;
-    }
-    return onHotKeyDown && onHotKeyDown(event);
-  };
-  return newEditor;
-};
-var _default = exports.default = withSearchReplace;

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

@@ -1,98 +0,0 @@
-.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;
-  width: 24px;
-  display: flex;
-  justify-content: center;
-  border-radius: 2px;
-}
-
-.sdoc-search-replace-popover-container .sdoc-search-replace-popover-title .sdoc-search-replace-title-close:hover {
-  background-color: #EFEFEF;
-  cursor: pointer;
-}
-
-.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-search-replace-popover-body .sdoc-search-replace-popover-btn-group .btn {
-  padding: 0;
-  width: 23%;
-  min-height: 35px;
-  border-radius: 5px;
-}
-
-.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;
-}