@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/esm/utils/index.js

@@ -0,0 +1,280 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { searchMatchClass, selectedSearchMatchClass } from '../styles';
+export function getSelectedText(selection) {
+  var text = '';
+  var selectedContent = selection.content().content;
+  for (var i = 0; i < selectedContent.childCount; i++) {
+    text += selectedContent.child(i).textContent;
+  }
+  return text;
+}
+export var createDecorations = function createDecorations(selectedIndex, matches) {
+  return matches.map(function (_ref, i) {
+    var start = _ref.start,
+      end = _ref.end;
+    return createDecoration(start, end, i === selectedIndex);
+  });
+};
+export var createDecoration = function createDecoration(start, end, isSelected) {
+  var className = searchMatchClass;
+  if (isSelected) {
+    className += " ".concat(selectedSearchMatchClass);
+  }
+  return Decoration.inline(start, end, {
+    class: className
+  });
+};
+export function findMatches(content, searchText, shouldMatchCase) {
+  var contentIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var matches = [];
+  var searchTextLength = searchText.length;
+  var textGrouping = null;
+  var collectMatch = function collectMatch(textGrouping) {
+    if (!textGrouping) {
+      return;
+    }
+    var text = textGrouping.text,
+      relativePos = textGrouping.pos;
+    var pos = contentIndex + relativePos;
+    if (!shouldMatchCase) {
+      searchText = searchText.toLowerCase();
+      text = text.toLowerCase();
+    }
+    var index = text.indexOf(searchText);
+    while (index !== -1) {
+      // Find the next substring from the end of the first, so that they don't overlap
+      var 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(function (node, pos) {
+      if (node.isText) {
+        if (textGrouping === null) {
+          textGrouping = {
+            text: node.text,
+            pos: 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) {
+  var backward = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (backward) {
+    var matchIndex = matches.findIndex(function (match) {
+      return match.start >= selectionPos;
+    }) - 1;
+    if (matchIndex < 0) {
+      matchIndex = matches.length - 1; // wrap around from the end
+    }
+
+    return matchIndex;
+  }
+  return Math.max(matches.findIndex(function (match) {
+    return match.start >= selectionPos;
+  }), 0);
+}
+export var nextIndex = function nextIndex(currentIndex, total) {
+  return (currentIndex + 1) % total;
+};
+export var prevIndex = function prevIndex(currentIndex, total) {
+  return (currentIndex - 1 + total) % total;
+};
+export var getSelectionForMatch = function getSelectionForMatch(selection, doc, index, matches) {
+  var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  if (matches[index]) {
+    return TextSelection.create(doc, matches[index].start + offset);
+  }
+  return selection;
+};
+export var findDecorationFromMatch = function findDecorationFromMatch(decorationSet, match) {
+  if (!match) {
+    return;
+  }
+  var 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
+  function (decoration) {
+    return decoration.from === match.start && decoration.to === match.end;
+  }) : undefined;
+};
+export var removeDecorationsFromSet = function removeDecorationsFromSet(decorationSet, decorationsToRemove, doc) {
+  var 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(function (decoration) {
+    return (
+      // copy exists but isn't on the type definition
+      decoration.copy(decoration.from, decoration.to)
+    );
+  }));
+  var 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
+  var lostDecorations = findLostAdjacentDecorations(decorationsToRemove, prevDecorations, newDecorations);
+  if (lostDecorations.length > 0) {
+    decorationSet = decorationSet.add(doc, lostDecorations);
+  }
+  return decorationSet;
+};
+export var removeMatchesFromSet = function removeMatchesFromSet(decorationSet, matches, doc) {
+  var decorationsToRemove = matches.filter(function (match) {
+    return !!match;
+  }).map(function (match) {
+    return findDecorationFromMatch(decorationSet, match);
+  });
+  decorationsToRemove.forEach(function (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 var findLostAdjacentDecorations = function findLostAdjacentDecorations(decorationsToRemove, prevDecorations, newDecorations) {
+  var lostDecorations = [];
+  if (prevDecorations.length - decorationsToRemove.length > newDecorations.length) {
+    var position = decorationsToRemove.length > 0 ? decorationsToRemove[0].from : 0;
+    var prevDecorationsStartIdx = findIndexBeforePosition(prevDecorations, position);
+    var newDecorationsStartIdx = findIndexBeforePosition(newDecorations, position);
+    var startIdx = Math.min(prevDecorationsStartIdx, newDecorationsStartIdx);
+    var prevDecorationsToCheck = prevDecorations.slice(startIdx);
+    var newDecorationsToCheck = newDecorations.slice(startIdx);
+    var uniqueInPrev = [];
+    var numToFind = prevDecorationsToCheck.length - newDecorationsToCheck.length;
+    var foundAll = false;
+    var newDecorationsIdxOffset = 0;
+    var _loop = function _loop() {
+        var prevDecoration = prevDecorationsToCheck[i];
+        // this was a legit removal, skip and continue
+        if (decorationsToRemove.find(function (decoration) {
+          return decoration.from === prevDecoration.from;
+        })) {
+          newDecorationsIdxOffset -= 1;
+          return 0; // continue
+        }
+        var 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++) {
+          var 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) {
+          return 1; // break
+        }
+      },
+      _ret;
+    for (var i = 0; i < prevDecorationsToCheck.length; i++) {
+      _ret = _loop();
+      if (_ret === 0) continue;
+      if (_ret === 1) break;
+    }
+
+    // make sure we ignore any that we wanted to delete
+    lostDecorations = uniqueInPrev.filter(function (decoration) {
+      return !decorationsToRemove.find(function (decorationToRemove) {
+        return 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 var findIndexBeforePosition = function findIndexBeforePosition(items, position) {
+  // jump in batches to cope with arrays with thousands of decorations
+  var increment = 100;
+  var index = 0;
+  for (var 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 (var 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 var isMatchAffectedByStep = function isMatchAffectedByStep(match, step, tr) {
+  var from = step.from,
+    to = step.to,
+    slice = step.slice;
+  var 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/types/FindReplaceToolbarButtonWithState.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FindReplaceToolbarButtonWithStateProps } from './types';
+declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, featureFlags, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
+export default _default;

package/dist/types/actions.d.ts

@@ -0,0 +1,64 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { Match } from './types';
+export declare enum FindReplaceActionTypes {
+    ACTIVATE = "ACTIVATE",
+    FIND = "FIND",
+    UPDATE_DECORATIONS = "UPDATE_DECORATIONS",
+    FIND_NEXT = "FIND_NEXT",
+    FIND_PREVIOUS = "FIND_PREVIOUS",
+    REPLACE = "REPLACE",
+    REPLACE_ALL = "REPLACE_ALL",
+    CANCEL = "CANCEL",
+    BLUR = "BLUR",
+    TOGGLE_MATCH_CASE = "TOGGLE_MATCH_CASE"
+}
+export interface Activate {
+    type: FindReplaceActionTypes.ACTIVATE;
+    findText?: string;
+    matches?: Match[];
+    index?: number;
+}
+export interface Find {
+    type: FindReplaceActionTypes.FIND;
+    findText: string;
+    matches: Match[];
+    index: number;
+}
+export interface FindNext {
+    type: FindReplaceActionTypes.FIND_NEXT;
+    index: number;
+    decorationSet: DecorationSet;
+}
+export interface FindPrevious {
+    type: FindReplaceActionTypes.FIND_PREVIOUS;
+    index: number;
+    decorationSet: DecorationSet;
+}
+export interface Replace {
+    type: FindReplaceActionTypes.REPLACE;
+    replaceText: string;
+    decorationSet: DecorationSet;
+    matches: Match[];
+    index: number;
+}
+export interface ReplaceAll {
+    type: FindReplaceActionTypes.REPLACE_ALL;
+    replaceText: string;
+    decorationSet: DecorationSet;
+    matches: Match[];
+    index: number;
+}
+export interface Cancel {
+    type: FindReplaceActionTypes.CANCEL;
+}
+export interface Blur {
+    type: FindReplaceActionTypes.BLUR;
+}
+export interface UpdateDecorations {
+    type: FindReplaceActionTypes.UPDATE_DECORATIONS;
+    decorationSet: DecorationSet;
+}
+export interface ToggleMatchCase {
+    type: FindReplaceActionTypes.TOGGLE_MATCH_CASE;
+}
+export type FindReplaceAction = Activate | Find | FindNext | FindPrevious | Replace | ReplaceAll | Cancel | Blur | UpdateDecorations | ToggleMatchCase;

package/dist/types/commands-with-analytics.d.ts

@@ -0,0 +1,27 @@
+import type { EditorAnalyticsAPI, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const activateWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ triggerMethod, }: {
+    triggerMethod: TRIGGER_METHOD.SHORTCUT | TRIGGER_METHOD.TOOLBAR;
+}) => Command;
+export declare const findWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ editorView, containerElement, keyword, }: {
+    editorView: EditorView;
+    containerElement: HTMLElement | null;
+    keyword?: string | undefined;
+}) => Command;
+export declare const findNextWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ triggerMethod, }: {
+    triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+}) => Command;
+export declare const findPrevWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ triggerMethod, }: {
+    triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+}) => Command;
+export declare const replaceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ triggerMethod, replaceText, }: {
+    triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    replaceText: string;
+}) => Command;
+export declare const replaceAllWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ replaceText }: {
+    replaceText: string;
+}) => Command;
+export declare const cancelSearchWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ triggerMethod, }: {
+    triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
+}) => Command;

package/dist/types/commands.d.ts

@@ -0,0 +1,12 @@
+import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const activate: () => import("@atlaskit/editor-common/types").Command;
+export declare const find: (editorView: EditorView, containerElement: HTMLElement | null, keyword?: string) => import("@atlaskit/editor-common/types").Command;
+export declare const findNext: () => import("@atlaskit/editor-common/types").Command;
+export declare const findPrevious: () => import("@atlaskit/editor-common/types").Command;
+export declare const replace: (replaceText: string) => import("@atlaskit/editor-common/types").Command;
+export declare const replaceAll: (replaceText: string) => import("@atlaskit/editor-common/types").Command;
+export declare const addDecorations: (decorations: Decoration[]) => import("@atlaskit/editor-common/types").Command;
+export declare const removeDecorations: (decorations: Decoration[]) => import("@atlaskit/editor-common/types").Command;
+export declare const cancelSearch: () => import("@atlaskit/editor-common/types").Command;
+export declare const blur: () => import("@atlaskit/editor-common/types").Command;
+export declare const toggleMatchCase: () => import("@atlaskit/editor-common/types").Command;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { FindReplacePlugin, FindReplaceToolbarButtonActionProps, FindReplaceOptions, } from './types';
+export { findReplacePlugin } from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,2 @@
+import type { FindReplacePlugin } from './types';
+export declare const findReplacePlugin: FindReplacePlugin;

package/dist/types/pm-plugins/keymap.d.ts

@@ -0,0 +1,4 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+declare const keymapPlugin: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => SafePlugin<any>;
+export default keymapPlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -0,0 +1,5 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { FindReplacePluginState } from '../types';
+export declare const initialState: FindReplacePluginState;
+export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<FindReplacePluginState>;

package/dist/types/pm-plugins/plugin-factory.d.ts

@@ -0,0 +1,2 @@
+import type { FindReplacePluginState } from '../types';
+export declare const createCommand: <A = import("../actions").FindReplaceAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => FindReplacePluginState, createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: FindReplacePluginState | ((state: import("prosemirror-state").EditorState) => FindReplacePluginState)) => import("prosemirror-state").SafeStateField<FindReplacePluginState>;

package/dist/types/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { FindReplacePluginState } from '../types';
+export declare const findReplacePluginKey: PluginKey<FindReplacePluginState>;

package/dist/types/reducer.d.ts

@@ -0,0 +1,4 @@
+import type { FindReplaceAction } from './actions';
+import type { FindReplacePluginState } from './types';
+declare const reducer: (getInitialState: () => FindReplacePluginState) => (state: FindReplacePluginState, action: FindReplaceAction) => FindReplacePluginState;
+export default reducer;

package/dist/types/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const searchMatchClass = "search-match";
+export declare const selectedSearchMatchClass = "selected-search-match";
+export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;

package/dist/types/types.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI, FeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface FindReplacePluginState {
+    /** Whether find/replace is active, i.e. displayed */
+    isActive: boolean;
+    /**
+     * Whether we should set focus into and select all text of find textfield
+     * This will be true if user highlights a word and hits cmd+f
+     */
+    shouldFocus: boolean;
+    /** Search keyword */
+    findText: string;
+    /** Text to replace with */
+    replaceText: string;
+    /** Index of selected word in array of matches, this gets updated as user finds next/prev */
+    index: number;
+    /** Positions of find results */
+    matches: Match[];
+    /** Decorations for the search results */
+    decorationSet: DecorationSet;
+    /** Whether find/replace should match case when searching for results */
+    shouldMatchCase: boolean;
+}
+export type FindReplaceToolbarButtonWithStateProps = {
+    popupsBoundariesElement?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    isToolbarReducedSpacing?: boolean;
+    editorView: EditorView;
+    containerElement: HTMLElement | null;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    takeFullWidth?: boolean;
+    featureFlags: FeatureFlags;
+    api: ExtractInjectionAPI<FindReplacePlugin> | undefined;
+};
+export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'featureFlags' | 'api'>;
+type Config = {
+    takeFullWidth: boolean;
+    twoLineEditorToolbar: boolean;
+};
+export type FindReplacePlugin = NextEditorPlugin<'findReplace', {
+    pluginConfiguration: Config;
+    sharedState: FindReplacePluginState | undefined;
+    dependencies: [
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
+    ];
+    actions: {
+        getToolbarButton: (params: FindReplaceToolbarButtonActionProps) => React.ReactNode;
+    };
+}>;
+export type Match = {
+    /** Start position */
+    start: number;
+    /** End position */
+    end: number;
+};
+export type TextGrouping = {
+    /** The concatenated text across nodes */
+    text: string;
+    /** Start position */
+    pos: number;
+} | null;
+export type FindReplaceOptions = {
+    allowMatchCase?: boolean;
+};
+export type MatchCaseProps = {
+    allowMatchCase?: boolean;
+    shouldMatchCase?: boolean;
+    onToggleMatchCase?: () => void;
+};
+export {};

package/dist/types/ui/Find.d.ts

@@ -0,0 +1,71 @@
+/** @jsx jsx */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import type { MatchCaseProps } from '../types';
+export declare const FIND_DEBOUNCE_MS = 100;
+export type FindProps = {
+    findText?: string;
+    count: {
+        index: number;
+        total: number;
+    };
+    shouldFocus: boolean;
+    onFindBlur: () => void;
+    onFind: (findText?: string) => void;
+    onFindNext: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onFindPrev: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onFindTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
+    onCancel: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onArrowDown: () => void;
+} & MatchCaseProps;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    findText?: string | undefined;
+    count: {
+        index: number;
+        total: number;
+    };
+    shouldFocus: boolean;
+    onFindBlur: () => void;
+    onFind: (findText?: string | undefined) => void;
+    onFindNext: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD;
+    }) => void;
+    onFindPrev: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD;
+    }) => void;
+    onFindTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
+    onCancel: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR;
+    }) => void;
+    onArrowDown: () => void;
+} & MatchCaseProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        findText?: string | undefined;
+        count: {
+            index: number;
+            total: number;
+        };
+        shouldFocus: boolean;
+        onFindBlur: () => void;
+        onFind: (findText?: string | undefined) => void;
+        onFindNext: ({ triggerMethod, }: {
+            triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD;
+        }) => void;
+        onFindPrev: ({ triggerMethod, }: {
+            triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD;
+        }) => void;
+        onFindTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
+        onCancel: ({ triggerMethod, }: {
+            triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR;
+        }) => void;
+        onArrowDown: () => void;
+    } & MatchCaseProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/ui/FindReplace.d.ts

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { DispatchAnalyticsEvent, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import type { MatchCaseProps } from '../types';
+export type FindReplaceProps = {
+    findText?: string;
+    replaceText?: string;
+    count: {
+        index: number;
+        total: number;
+    };
+    shouldFocus: boolean;
+    onFindBlur: () => void;
+    onFind: (findText?: string) => void;
+    onFindNext: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onFindPrev: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onReplace: ({ triggerMethod, replaceText, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+        replaceText: string;
+    }) => void;
+    onReplaceAll: ({ replaceText }: {
+        replaceText: string;
+    }) => void;
+    onCancel: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+} & MatchCaseProps;
+declare class FindReplace extends React.PureComponent<FindReplaceProps> {
+    private findTextfield;
+    private replaceTextfield?;
+    setFindTextfieldRef: (findTextfieldRef: React.RefObject<HTMLInputElement>) => void;
+    setReplaceTextfieldRef: (replaceTextfieldRef: React.RefObject<HTMLInputElement>) => void;
+    setFocusToFind: () => void;
+    setFocusToReplace: () => void;
+    render(): jsx.JSX.Element;
+}
+export default FindReplace;

package/dist/types/ui/FindReplaceToolbarButton.d.ts

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { FindReplaceProps } from './FindReplace';
+export interface FindReplaceToolbarButtonProps extends Omit<FindReplaceProps, 'count'> {
+    index: number;
+    numMatches: number;
+    isActive: boolean;
+    onActivate: () => void;
+    isReducedSpacing?: boolean;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    takeFullWidth: boolean;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<FindReplaceToolbarButtonProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<FindReplaceToolbarButtonProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/ui/FindReplaceTooltipButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface Props {
+    title: string;
+    icon: JSX.Element;
+    keymapDescription: string;
+    onClick: (ref: React.RefObject<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    isPressed?: boolean;
+}
+export declare class FindReplaceTooltipButton extends React.PureComponent<Props> {
+    private buttonRef;
+    static defaultProps: {
+        keymapDescription: string;
+    };
+    handleClick: () => void;
+    render(): JSX.Element;
+}
+export {};