@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/es2019/utils/index.js

@@ -0,0 +1,249 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { searchMatchClass, selectedSearchMatchClass } from '../styles';
+export function getSelectedText(selection) {
+  let text = '';
+  const selectedContent = selection.content().content;
+  for (let i = 0; i < selectedContent.childCount; i++) {
+    text += selectedContent.child(i).textContent;
+  }
+  return text;
+}
+export const createDecorations = (selectedIndex, matches) => matches.map(({
+  start,
+  end
+}, i) => createDecoration(start, end, i === selectedIndex));
+export const createDecoration = (start, end, isSelected) => {
+  let className = searchMatchClass;
+  if (isSelected) {
+    className += ` ${selectedSearchMatchClass}`;
+  }
+  return Decoration.inline(start, end, {
+    class: className
+  });
+};
+export function findMatches(content, searchText, shouldMatchCase, contentIndex = 0) {
+  let matches = [];
+  const searchTextLength = searchText.length;
+  let textGrouping = null;
+  const collectMatch = textGrouping => {
+    if (!textGrouping) {
+      return;
+    }
+    let {
+      text,
+      pos: relativePos
+    } = textGrouping;
+    const pos = contentIndex + relativePos;
+    if (!shouldMatchCase) {
+      searchText = searchText.toLowerCase();
+      text = text.toLowerCase();
+    }
+    let index = text.indexOf(searchText);
+    while (index !== -1) {
+      // Find the next substring from the end of the first, so that they don't overlap
+      const end = index + searchTextLength;
+      // Add the substring index to the position of the node
+      matches.push({
+        start: pos + index,
+        end: pos + end
+      });
+      index = text.indexOf(searchText, end);
+    }
+  };
+  if (searchTextLength > 0) {
+    content.descendants((node, pos) => {
+      if (node.isText) {
+        if (textGrouping === null) {
+          textGrouping = {
+            text: node.text,
+            pos
+          };
+        } else {
+          textGrouping.text = textGrouping.text + node.text;
+        }
+      } else {
+        collectMatch(textGrouping);
+        textGrouping = null;
+      }
+    });
+    // if there's a dangling text grouping and no non-text node to trigger collectMatch, manually collectMatch
+    if (textGrouping) {
+      collectMatch(textGrouping);
+    }
+  }
+  return matches;
+}
+
+/**
+ * Finds index of first item in matches array that comes after user's cursor pos.
+ * If `backward` is `true`, finds index of first item that comes before instead.
+ */
+export function findSearchIndex(selectionPos, matches, backward = false) {
+  if (backward) {
+    let matchIndex = matches.findIndex(match => match.start >= selectionPos) - 1;
+    if (matchIndex < 0) {
+      matchIndex = matches.length - 1; // wrap around from the end
+    }
+
+    return matchIndex;
+  }
+  return Math.max(matches.findIndex(match => match.start >= selectionPos), 0);
+}
+export const nextIndex = (currentIndex, total) => (currentIndex + 1) % total;
+export const prevIndex = (currentIndex, total) => (currentIndex - 1 + total) % total;
+export const getSelectionForMatch = (selection, doc, index, matches, offset = 0) => {
+  if (matches[index]) {
+    return TextSelection.create(doc, matches[index].start + offset);
+  }
+  return selection;
+};
+export const findDecorationFromMatch = (decorationSet, match) => {
+  if (!match) {
+    return;
+  }
+  const decorations = decorationSet.find(match.start, match.end);
+  return decorations.length ? decorations.find(
+  // decorationSet.find() returns any decorations that touch the specifided
+  // positions, but we want to be stricter
+  decoration => decoration.from === match.start && decoration.to === match.end) : undefined;
+};
+export const removeDecorationsFromSet = (decorationSet, decorationsToRemove, doc) => {
+  const prevDecorations = decorationSet.find();
+
+  // it is essential that we copy the decorations otherwise in some rare cases
+  // prosemirror-view will update our decorationsToRemove array to contain nulls
+  // instead of Decorations which ruins our check for lost decorations below
+  decorationSet = decorationSet.remove(decorationsToRemove.map(decoration =>
+  // copy exists but isn't on the type definition
+  decoration.copy(decoration.from, decoration.to)));
+  const newDecorations = decorationSet.find();
+
+  // there is a bug in prosemirror-view where it can't cope with deleting inline
+  // decorations from a set in some cases (where there are multiple levels of nested
+  // children arrays), and it deletes more decorations than it should
+  // todo: ticket link
+  const lostDecorations = findLostAdjacentDecorations(decorationsToRemove, prevDecorations, newDecorations);
+  if (lostDecorations.length > 0) {
+    decorationSet = decorationSet.add(doc, lostDecorations);
+  }
+  return decorationSet;
+};
+export const removeMatchesFromSet = (decorationSet, matches, doc) => {
+  const decorationsToRemove = matches.filter(match => !!match).map(match => findDecorationFromMatch(decorationSet, match));
+  decorationsToRemove.forEach(decoration => {
+    if (decoration) {
+      decorationSet = removeDecorationsFromSet(decorationSet, [decoration], doc);
+    }
+  });
+  return decorationSet;
+};
+
+/**
+ * Finds decorations in prevDecorations that are not in newDecorations or decorationsToRemove
+ * These decorations have been lost by Prosemirror during an over eager decoration removal
+ * We need to be smart to cope with thousands of decorations without crashing everything
+ */
+export const findLostAdjacentDecorations = (decorationsToRemove, prevDecorations, newDecorations) => {
+  let lostDecorations = [];
+  if (prevDecorations.length - decorationsToRemove.length > newDecorations.length) {
+    const position = decorationsToRemove.length > 0 ? decorationsToRemove[0].from : 0;
+    const prevDecorationsStartIdx = findIndexBeforePosition(prevDecorations, position);
+    const newDecorationsStartIdx = findIndexBeforePosition(newDecorations, position);
+    const startIdx = Math.min(prevDecorationsStartIdx, newDecorationsStartIdx);
+    const prevDecorationsToCheck = prevDecorations.slice(startIdx);
+    const newDecorationsToCheck = newDecorations.slice(startIdx);
+    const uniqueInPrev = [];
+    const numToFind = prevDecorationsToCheck.length - newDecorationsToCheck.length;
+    let foundAll = false;
+    let newDecorationsIdxOffset = 0;
+    for (let i = 0; i < prevDecorationsToCheck.length; i++) {
+      const prevDecoration = prevDecorationsToCheck[i];
+      // this was a legit removal, skip and continue
+      if (decorationsToRemove.find(decoration => decoration.from === prevDecoration.from)) {
+        newDecorationsIdxOffset -= 1;
+        continue;
+      }
+      let j = i + newDecorationsIdxOffset;
+
+      // this is a lost decoration
+      if (j >= newDecorationsToCheck.length) {
+        uniqueInPrev.push(prevDecoration);
+        if (uniqueInPrev.length === numToFind) {
+          foundAll = true;
+        }
+      }
+      for (; j < newDecorationsToCheck.length; j++) {
+        const newDecoration = newDecorationsToCheck[j];
+
+        // decoration found in both arrays, skip and continue
+        if (prevDecoration.from === newDecoration.from) {
+          break;
+        }
+
+        // this is a lost decoration
+        if (newDecoration.from > prevDecoration.from || j === newDecorationsToCheck.length - 1) {
+          uniqueInPrev.push(prevDecoration);
+          newDecorationsIdxOffset -= 1;
+          if (uniqueInPrev.length === numToFind) {
+            foundAll = true;
+          }
+          break;
+        }
+      }
+      if (foundAll) {
+        break;
+      }
+    }
+
+    // make sure we ignore any that we wanted to delete
+    lostDecorations = uniqueInPrev.filter(decoration => !decorationsToRemove.find(decorationToRemove => decoration.from === decorationToRemove.from));
+  }
+  return lostDecorations;
+};
+
+/**
+ * Searches through array in bumps of 100 to return the index of the first
+ * decoration whose 'from' value is before or equal to the position
+ */
+export const findIndexBeforePosition = (items, position) => {
+  // jump in batches to cope with arrays with thousands of decorations
+  const increment = 100;
+  let index = 0;
+  for (let i = items.length - 1; i >= 0; i -= increment) {
+    if (items[i].from < position) {
+      // now we have found the 100 range, we can narrow it down to exact index
+      index = i;
+      for (let j = i; j <= items.length - 1; j++) {
+        if (items[j].from <= position) {
+          index = j;
+        } else {
+          break;
+        }
+      }
+      break;
+    }
+    if (i < 100 && i > 0) {
+      i = 100;
+    }
+  }
+  return index;
+};
+
+/**
+ * Determines whether a find/replace text Match will be changed as a result
+ * of a Step modification to the document. This is evaluated by checking
+ * both mapped and unmapped versions of the Step as in different cases the
+ * matches will match.
+ *
+ * **Note:** Match state received here is after step has been applied.
+ */
+export const isMatchAffectedByStep = (match, step, tr) => {
+  const {
+    from,
+    to,
+    slice
+  } = step;
+  const sliceSize = slice.content.size;
+  return from + sliceSize >= match.start && to - sliceSize <= match.end || tr.mapping.map(from) + sliceSize >= match.start && tr.mapping.map(to) - sliceSize <= match.end;
+};

package/dist/esm/FindReplaceToolbarButtonWithState.js

@@ -0,0 +1,157 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useLayoutEffect, useState } from 'react';
+import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { blur, toggleMatchCase } from './commands';
+import { activateWithAnalytics, cancelSearchWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, findWithAnalytics, replaceAllWithAnalytics, replaceWithAnalytics } from './commands-with-analytics';
+import FindReplaceToolbarButton from './ui/FindReplaceToolbarButton';
+
+// light implementation of useSharedPluginState(). This is due to findreplace
+// being the only plugin that previously used WithPluginState with
+// debounce=false. That was implemented because of text sync issues
+// between editor & findreplace dialog.
+// To address under ENGHEALTH-5853
+var useSharedPluginStateNoDebounce = function useSharedPluginStateNoDebounce(api) {
+  var _useState = useState(api === null || api === void 0 ? void 0 : api.findReplace.sharedState.currentState()),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useLayoutEffect(function () {
+    var unsub = api === null || api === void 0 ? void 0 : api.findReplace.sharedState.onChange(function (_ref) {
+      var nextSharedState = _ref.nextSharedState;
+      setState(nextSharedState);
+    });
+    return function () {
+      unsub === null || unsub === void 0 || unsub();
+    };
+  }, [api]);
+  return {
+    findReplaceState: state
+  };
+};
+var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithState(_ref2) {
+  var _api$analytics;
+  var popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+    editorView = _ref2.editorView,
+    containerElement = _ref2.containerElement,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    featureFlags = _ref2.featureFlags,
+    takeFullWidth = _ref2.takeFullWidth,
+    api = _ref2.api;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var _useSharedPluginState = useSharedPluginStateNoDebounce(api),
+    findReplaceState = _useSharedPluginState.findReplaceState;
+  if (!editorView) {
+    return null;
+  }
+
+  // we need the editor to be in focus for scrollIntoView() to work
+  // so we focus it while we run the command, then put focus back into
+  // whatever element was previously focused in find replace component
+  var runWithEditorFocused = function runWithEditorFocused(fn) {
+    var activeElement = document.activeElement;
+    editorView.focus();
+    fn();
+    activeElement === null || activeElement === void 0 || activeElement.focus();
+  };
+  var dispatchCommand = function dispatchCommand(cmd) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    cmd(state, dispatch);
+  };
+  var handleActivate = function handleActivate() {
+    runWithEditorFocused(function () {
+      return dispatchCommand(activateWithAnalytics(editorAnalyticsAPI)({
+        triggerMethod: TRIGGER_METHOD.TOOLBAR
+      }));
+    });
+  };
+  var handleFind = function handleFind(keyword) {
+    runWithEditorFocused(function () {
+      return dispatchCommand(findWithAnalytics(editorAnalyticsAPI)({
+        editorView: editorView,
+        containerElement: containerElement,
+        keyword: keyword
+      }));
+    });
+  };
+  var handleFindNext = function handleFindNext(_ref3) {
+    var triggerMethod = _ref3.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand(findNextWithAnalytics(editorAnalyticsAPI)({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+  var handleFindPrev = function handleFindPrev(_ref4) {
+    var triggerMethod = _ref4.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand(findPrevWithAnalytics(editorAnalyticsAPI)({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+  var handleReplace = function handleReplace(_ref5) {
+    var triggerMethod = _ref5.triggerMethod,
+      replaceText = _ref5.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand(replaceWithAnalytics(editorAnalyticsAPI)({
+        triggerMethod: triggerMethod,
+        replaceText: replaceText
+      }));
+    });
+  };
+  var handleReplaceAll = function handleReplaceAll(_ref6) {
+    var replaceText = _ref6.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand(replaceAllWithAnalytics(editorAnalyticsAPI)({
+        replaceText: replaceText
+      }));
+    });
+  };
+  var handleFindBlur = function handleFindBlur() {
+    dispatchCommand(blur());
+  };
+  var handleCancel = function handleCancel(_ref7) {
+    var triggerMethod = _ref7.triggerMethod;
+    dispatchCommand(cancelSearchWithAnalytics(editorAnalyticsAPI)({
+      triggerMethod: triggerMethod
+    }));
+    editorView.focus();
+  };
+  var handleToggleMatchCase = function handleToggleMatchCase() {
+    dispatchCommand(toggleMatchCase());
+  };
+  var findReplaceMatchCase = featureFlags.findReplaceMatchCase;
+  if (!findReplaceState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
+    allowMatchCase: findReplaceMatchCase,
+    shouldMatchCase: findReplaceState.shouldMatchCase,
+    onToggleMatchCase: handleToggleMatchCase,
+    isActive: findReplaceState.isActive,
+    findText: findReplaceState.findText,
+    index: findReplaceState.index,
+    numMatches: findReplaceState.matches.length,
+    replaceText: findReplaceState.replaceText,
+    shouldFocus: findReplaceState.shouldFocus,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    isReducedSpacing: !!isToolbarReducedSpacing,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onFindBlur: handleFindBlur,
+    onCancel: handleCancel,
+    onActivate: handleActivate,
+    onFind: handleFind,
+    onFindNext: handleFindNext,
+    onFindPrev: handleFindPrev,
+    onReplace: handleReplace,
+    onReplaceAll: handleReplaceAll,
+    takeFullWidth: !!takeFullWidth
+  });
+};
+export default /*#__PURE__*/React.memo(FindReplaceToolbarButtonWithState);

package/dist/esm/actions.js

@@ -0,0 +1,13 @@
+export var FindReplaceActionTypes = /*#__PURE__*/function (FindReplaceActionTypes) {
+  FindReplaceActionTypes["ACTIVATE"] = "ACTIVATE";
+  FindReplaceActionTypes["FIND"] = "FIND";
+  FindReplaceActionTypes["UPDATE_DECORATIONS"] = "UPDATE_DECORATIONS";
+  FindReplaceActionTypes["FIND_NEXT"] = "FIND_NEXT";
+  FindReplaceActionTypes["FIND_PREVIOUS"] = "FIND_PREVIOUS";
+  FindReplaceActionTypes["REPLACE"] = "REPLACE";
+  FindReplaceActionTypes["REPLACE_ALL"] = "REPLACE_ALL";
+  FindReplaceActionTypes["CANCEL"] = "CANCEL";
+  FindReplaceActionTypes["BLUR"] = "BLUR";
+  FindReplaceActionTypes["TOGGLE_MATCH_CASE"] = "TOGGLE_MATCH_CASE";
+  return FindReplaceActionTypes;
+}({});

package/dist/esm/commands-with-analytics.js

@@ -0,0 +1,95 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { activate, cancelSearch, find, findNext, findPrevious, replace, replaceAll } from './commands';
+export var activateWithAnalytics = function activateWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref) {
+    var triggerMethod = _ref.triggerMethod;
+    return withAnalytics(editorAnalyticsAPI, function (state) {
+      return {
+        eventType: EVENT_TYPE.UI,
+        action: ACTION.ACTIVATED,
+        actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG,
+        attributes: {
+          inputMethod: state.selection instanceof TextSelection && !state.selection.empty ? INPUT_METHOD.PREFILL : INPUT_METHOD.KEYBOARD,
+          triggerMethod: triggerMethod
+        }
+      };
+    })(activate());
+  };
+};
+export var findWithAnalytics = function findWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref2) {
+    var editorView = _ref2.editorView,
+      containerElement = _ref2.containerElement,
+      keyword = _ref2.keyword;
+    return withAnalytics(editorAnalyticsAPI, {
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.FIND_PERFORMED,
+      actionSubject: ACTION_SUBJECT.TEXT
+    })(find(editorView, containerElement, keyword));
+  };
+};
+export var findNextWithAnalytics = function findNextWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref3) {
+    var triggerMethod = _ref3.triggerMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.FIND_NEXT_PERFORMED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })(findNext());
+  };
+};
+export var findPrevWithAnalytics = function findPrevWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref4) {
+    var triggerMethod = _ref4.triggerMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.FIND_PREV_PERFORMED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })(findPrevious());
+  };
+};
+export var replaceWithAnalytics = function replaceWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref5) {
+    var triggerMethod = _ref5.triggerMethod,
+      replaceText = _ref5.replaceText;
+    return withAnalytics(editorAnalyticsAPI, {
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.REPLACED_ONE,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })(replace(replaceText));
+  };
+};
+export var replaceAllWithAnalytics = function replaceAllWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref6) {
+    var replaceText = _ref6.replaceText;
+    return withAnalytics(editorAnalyticsAPI, {
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.REPLACED_ALL,
+      actionSubject: ACTION_SUBJECT.TEXT
+    })(replaceAll(replaceText));
+  };
+};
+export var cancelSearchWithAnalytics = function cancelSearchWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref7) {
+    var triggerMethod = _ref7.triggerMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      eventType: EVENT_TYPE.UI,
+      action: ACTION.DEACTIVATED,
+      actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG,
+      attributes: {
+        triggerMethod: triggerMethod
+      }
+    })(cancelSearch());
+  };
+};