@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/es2019/ui/FindReplaceTooltipButton.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import { findKeymapByDescription, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import Tooltip from '@atlaskit/tooltip';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class FindReplaceTooltipButton extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "buttonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleClick", () => {
+      this.props.onClick(this.buttonRef);
+    });
+  }
+  render() {
+    const {
+      title,
+      icon,
+      keymapDescription,
+      disabled,
+      isPressed
+    } = this.props;
+    const pressedProps = {
+      ...(typeof isPressed === 'boolean' && {
+        'aria-pressed': isPressed
+      })
+    };
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: title,
+        keymap: findKeymapByDescription(keymapDescription)
+      }),
+      hideTooltipOnClick: true,
+      position: 'top'
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      label: title,
+      appearance: "subtle",
+      testId: title,
+      ref: this.buttonRef,
+      iconBefore: icon,
+      isDisabled: disabled,
+      onClick: this.handleClick,
+      isSelected: isPressed,
+      shouldFitContainer: true
+    }, pressedProps)));
+  }
+}
+_defineProperty(FindReplaceTooltipButton, "defaultProps", {
+  keymapDescription: 'no-keymap'
+});

package/dist/es2019/ui/Replace.js

@@ -0,0 +1,155 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import Textfield from '@atlaskit/textfield';
+import { replaceSectionButtonStyles, sectionWrapperStyles } from './styles';
+const messages = defineMessages({
+  replaceWith: {
+    id: 'fabric.editor.replaceWith',
+    defaultMessage: 'Replace with',
+    description: 'The value that will replace the word or phrase that was searched for'
+  },
+  replace: {
+    id: 'fabric.editor.replace',
+    defaultMessage: 'Replace',
+    description: 'Replace only the currently selected instance of the word or phrase'
+  },
+  replaceAll: {
+    id: 'fabric.editor.replaceAll',
+    defaultMessage: 'Replace all',
+    description: 'Replace all instances of the word or phrase throughout the entire document'
+  }
+});
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class Replace extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "replaceTextfieldRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "skipWhileComposing", fn => {
+      if (this.state.isComposing) {
+        return;
+      }
+      fn();
+    });
+    _defineProperty(this, "handleReplaceClick", () => this.skipWhileComposing(() => {
+      this.props.onReplace({
+        triggerMethod: TRIGGER_METHOD.BUTTON,
+        replaceText: this.state.replaceText
+      });
+    }));
+    _defineProperty(this, "handleReplaceChange", event => this.skipWhileComposing(() => {
+      this.updateReplaceValue(event.target.value);
+    }));
+    _defineProperty(this, "updateReplaceValue", replaceText => {
+      const {
+        dispatchAnalyticsEvent
+      } = this.props;
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          eventType: EVENT_TYPE.TRACK,
+          action: ACTION.CHANGED_REPLACEMENT_TEXT,
+          actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
+        });
+      }
+      this.setState({
+        replaceText
+      });
+    });
+    _defineProperty(this, "handleReplaceKeyDown", event => this.skipWhileComposing(() => {
+      if (event.key === 'Enter') {
+        this.props.onReplace({
+          triggerMethod: TRIGGER_METHOD.KEYBOARD,
+          replaceText: this.state.replaceText
+        });
+      } else if (event.key === 'ArrowUp') {
+        // we want to move focus between find & replace texfields when user hits up/down arrows
+        this.props.onArrowUp();
+      }
+    }));
+    _defineProperty(this, "handleReplaceAllClick", () => this.skipWhileComposing(() => {
+      this.props.onReplaceAll({
+        replaceText: this.state.replaceText
+      });
+    }));
+    _defineProperty(this, "handleCompositionStart", () => {
+      this.setState({
+        isComposing: true
+      });
+    });
+    _defineProperty(this, "handleCompositionEnd", event => {
+      this.setState({
+        isComposing: false
+      });
+      // type for React.CompositionEvent doesn't set type for target correctly
+      this.updateReplaceValue(event.target.value);
+    });
+    const {
+      replaceText: _replaceText,
+      intl: {
+        formatMessage
+      }
+    } = props;
+    this.state = {
+      replaceText: _replaceText || '',
+      isComposing: false
+    };
+    this.replaceWith = formatMessage(messages.replaceWith);
+    this.replace = formatMessage(messages.replace);
+    this.replaceAll = formatMessage(messages.replaceAll);
+  }
+  componentDidMount() {
+    this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
+  }
+  componentDidUpdate({
+    replaceText: prevReplaceText
+  }) {
+    const {
+      replaceText
+    } = this.props;
+    if (replaceText && replaceText !== prevReplaceText) {
+      this.setState({
+        replaceText,
+        isComposing: false
+      });
+    }
+  }
+  render() {
+    const {
+      replaceText
+    } = this.state;
+    const {
+      canReplace
+    } = this.props;
+    return jsx("div", {
+      css: sectionWrapperStyles
+    }, jsx(Textfield, {
+      name: "replace",
+      appearance: "none",
+      placeholder: this.replaceWith,
+      defaultValue: replaceText,
+      ref: this.replaceTextfieldRef,
+      autoComplete: "off",
+      onChange: this.handleReplaceChange,
+      onKeyDown: this.handleReplaceKeyDown,
+      onCompositionStart: this.handleCompositionStart,
+      onCompositionEnd: this.handleCompositionEnd
+    }), jsx(Button, {
+      css: replaceSectionButtonStyles,
+      testId: this.replace,
+      onClick: this.handleReplaceClick,
+      isDisabled: !canReplace
+    }, this.replace), jsx(Button, {
+      css: replaceSectionButtonStyles,
+      testId: this.replaceAll,
+      onClick: this.handleReplaceAllClick,
+      isDisabled: !canReplace
+    }, this.replaceAll));
+  }
+}
+export default injectIntl(Replace);

package/dist/es2019/ui/styles.js

@@ -0,0 +1,50 @@
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { css } from '@emotion/react';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { N30A, N60 } from '@atlaskit/theme/colors';
+export const replaceSectionButtonStyles = css({
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+export const ruleStyles = css({
+  width: '100%',
+  border: 'none',
+  backgroundColor: `${`var(--ds-border, ${N30A})`}`,
+  margin: `${"var(--ds-space-050, 4px)"} 0px`,
+  height: '1px',
+  borderRadius: '1px'
+});
+export const wrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: `0px ${"var(--ds-space-050, 4px)"}`
+  }
+});
+export const sectionWrapperStyles = css`
+  display: flex;
+
+  & > * {
+    display: inline-flex;
+    height: 32px;
+    flex: 0 0 auto;
+  }
+
+  & > [data-ds--text-field--container] {
+    display: flex;
+    flex: 1 1 auto;
+  }
+`;
+export const countStyles = css({
+  color: `${`var(--ds-text-subtlest, ${N60})`}`,
+  fontSize: `${relativeFontSizeToBase16(12)}`,
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-100, 8px)"
+});
+export const countWrapperStyles = css({
+  alignItems: 'center'
+});

package/dist/es2019/utils/array.js

@@ -0,0 +1,3 @@
+export function findUniqueItemsIn(findIn, checkWith, comparator) {
+  return findIn.filter(firstItem => checkWith.findIndex(secondItem => comparator ? comparator(firstItem, secondItem) : firstItem === secondItem) === -1);
+}

package/dist/es2019/utils/batch-decorations.js

@@ -0,0 +1,189 @@
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { createDecorations, findDecorationFromMatch } from './index';
+
+// max number of decorations to apply at once
+const batchIncrement = 100;
+// position range to apply decorations between before alternating above or below viewport
+const posIncrement = 2000;
+/**
+ * Provides support for applying search match highlight decorations in batches
+ */
+class BatchDecorations {
+  stop() {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+    }
+  }
+
+  /**
+   * Applies the decorations needed for the current search results
+   * It does so async, splitting them up into batches to help with performance
+   */
+  async applyAllSearchDecorations(editorView, containerElement, addDecorations, removeDecorations) {
+    this.stop();
+    this.addDecorations = addDecorations;
+    this.removeDecorations = removeDecorations;
+    if (!containerElement) {
+      return;
+    }
+    const pmElement = containerElement.querySelector('.ProseMirror');
+    if (!pmElement) {
+      return;
+    }
+    const positions = this.calcDecorationPositions(editorView, containerElement, pmElement);
+    const {
+      startPos,
+      endPos,
+      viewportStartPos,
+      viewportEndPos
+    } = positions;
+    let dir = 0;
+    let before = viewportStartPos;
+    let after = viewportEndPos - posIncrement;
+    await this.updateDecorationsBetween(editorView, viewportStartPos, viewportEndPos);
+    while (before > startPos || after < endPos) {
+      if (dir++ % 2 === 0 && before > startPos || after >= endPos) {
+        const diff = before - startPos;
+        before = Math.max(before - posIncrement, startPos);
+        await this.updateDecorationsBetween(editorView, before, before + Math.min(diff, posIncrement));
+      } else {
+        after = Math.min(after + posIncrement, endPos);
+        await this.updateDecorationsBetween(editorView, after, Math.min(after + posIncrement, endPos));
+      }
+    }
+  }
+  async updateDecorationsBetween(editorView, startPos, endPos) {
+    await this.removeDecorationsBetween(editorView, startPos, endPos);
+    await this.addDecorationsBetween(editorView, startPos, endPos);
+  }
+  async addDecorationsBetween(editorView, startPos, endPos) {
+    const {
+      selection
+    } = editorView.state;
+    const {
+      matches,
+      decorationSet
+    } = getPluginState(editorView.state);
+    if (matches.length === 0) {
+      return;
+    }
+    const matchesBetween = matches.filter(m => m.start >= startPos && (endPos === undefined || m.start < endPos));
+    const selectionMatch = matches.find(match => match.start >= selection.from);
+    const selectionIndex = matchesBetween.findIndex(match => match === selectionMatch);
+    return await this.batchRequests(counter => {
+      let matchesToDecorate = matchesBetween.slice(counter, counter + batchIncrement);
+      if (matchesToDecorate.length === 0) {
+        return false;
+      }
+      let useSelectionIndex = selectionIndex >= counter && selectionIndex < counter + batchIncrement;
+      if (selectionMatch && useSelectionIndex) {
+        const selectionMatchDecoration = findDecorationFromMatch(decorationSet, selectionMatch);
+        if (selectionMatchDecoration) {
+          matchesToDecorate.splice(selectionIndex % batchIncrement, 1);
+          useSelectionIndex = false;
+        }
+      }
+      if (this.addDecorations) {
+        this.addDecorations(createDecorations(useSelectionIndex ? selectionIndex % batchIncrement : -1, matchesToDecorate));
+      }
+    }, {
+      increment: batchIncrement,
+      until: matchesBetween.length
+    });
+  }
+  async removeDecorationsBetween(editorView, startPos, endPos) {
+    const {
+      decorationSet
+    } = getPluginState(editorView.state);
+    const decorations = decorationSet.find(startPos, endPos);
+    if (decorations.length === 0) {
+      return;
+    }
+    return await this.batchRequests(counter => {
+      let decorationsToRemove = decorations.slice(counter, counter + batchIncrement);
+      if (decorationsToRemove.length === 0) {
+        return false;
+      }
+      // only get those decorations whose from >= startPos
+      for (let i = 0; i < decorationsToRemove.length; i++) {
+        if (decorationsToRemove[i].from >= startPos) {
+          break;
+        }
+        decorationsToRemove = decorationsToRemove.slice(1);
+      }
+      if (this.removeDecorations) {
+        this.removeDecorations(decorationsToRemove);
+      }
+    }, {
+      increment: batchIncrement,
+      until: decorations.length
+    });
+  }
+
+  /**
+   * Calculates Prosemirror start and end positions we want to apply the decorations
+   * between
+   * Also calculates the positions the are the start and end of the user's viewport
+   * so we can apply decorations there first and work outwards
+   */
+  calcDecorationPositions(editorView, containerElement, pmElement) {
+    const containerRect = containerElement.getBoundingClientRect();
+    const pmRect = pmElement.getBoundingClientRect();
+    const viewportStartPos = this.getStartPos(editorView, 0, pmRect.left);
+    const viewportEndPos = this.getEndPos(editorView, containerRect.top + containerRect.height, pmRect.left);
+    return {
+      viewportStartPos,
+      viewportEndPos,
+      startPos: 1,
+      endPos: editorView.state.doc.nodeSize
+    };
+  }
+  getStartPos(editorView, y, x) {
+    const startPos = editorView.posAtCoords({
+      top: y,
+      left: x
+    });
+    return startPos ? startPos.pos : 1;
+  }
+  getEndPos(editorView, y, x) {
+    const maxPos = editorView.state.doc.nodeSize;
+    const endPos = editorView.posAtCoords({
+      top: y,
+      left: x
+    });
+    return endPos ? endPos.pos : maxPos;
+  }
+
+  /**
+   * Util to batch function calls by animation frames
+   * A counter will start at 0 and increment by provided value until reaches limit
+   * Passed in fn receives the counter as a param, return false to skip waiting
+   * for the animation frame for the next call
+   */
+  batchRequests(fn, opts) {
+    let counter = 0;
+    const {
+      increment,
+      until
+    } = opts;
+    return new Promise(resolve => {
+      const batchedFn = () => {
+        let result = fn(counter);
+        while (result === false && counter < until) {
+          counter += increment;
+          result = fn(counter);
+        }
+        if (counter < until) {
+          counter += increment;
+          this.rafId = requestAnimationFrame(batchedFn);
+        } else {
+          this.rafId = undefined;
+          resolve();
+        }
+      };
+      this.rafId = requestAnimationFrame(batchedFn);
+    });
+  }
+}
+const batchDecorations = new BatchDecorations();
+export default batchDecorations;

package/dist/es2019/utils/commands.js

@@ -0,0 +1,6 @@
+export const withScrollIntoView = command => (state, dispatch, view) => command(state, tr => {
+  tr.scrollIntoView();
+  if (dispatch) {
+    dispatch(tr);
+  }
+}, view);