@atlaskit/editor-plugin-find-replace 0.1.0

package/dist/esm/ui/Replace.js

@@ -0,0 +1,171 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/* 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';
+var 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
+var Replace = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Replace, _React$PureComponent);
+  var _super = _createSuper(Replace);
+  function Replace(props) {
+    var _this;
+    _classCallCheck(this, Replace);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "replaceTextfieldRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "skipWhileComposing", function (fn) {
+      if (_this.state.isComposing) {
+        return;
+      }
+      fn();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleReplaceClick", function () {
+      return _this.skipWhileComposing(function () {
+        _this.props.onReplace({
+          triggerMethod: TRIGGER_METHOD.BUTTON,
+          replaceText: _this.state.replaceText
+        });
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleReplaceChange", function (event) {
+      return _this.skipWhileComposing(function () {
+        _this.updateReplaceValue(event.target.value);
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateReplaceValue", function (replaceText) {
+      var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          eventType: EVENT_TYPE.TRACK,
+          action: ACTION.CHANGED_REPLACEMENT_TEXT,
+          actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
+        });
+      }
+      _this.setState({
+        replaceText: replaceText
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleReplaceKeyDown", function (event) {
+      return _this.skipWhileComposing(function () {
+        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(_assertThisInitialized(_this), "handleReplaceAllClick", function () {
+      return _this.skipWhileComposing(function () {
+        _this.props.onReplaceAll({
+          replaceText: _this.state.replaceText
+        });
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCompositionStart", function () {
+      _this.setState({
+        isComposing: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCompositionEnd", function (event) {
+      _this.setState({
+        isComposing: false
+      });
+      // type for React.CompositionEvent doesn't set type for target correctly
+      _this.updateReplaceValue(event.target.value);
+    });
+    var _replaceText = props.replaceText,
+      formatMessage = props.intl.formatMessage;
+    _this.state = {
+      replaceText: _replaceText || '',
+      isComposing: false
+    };
+    _this.replaceWith = formatMessage(messages.replaceWith);
+    _this.replace = formatMessage(messages.replace);
+    _this.replaceAll = formatMessage(messages.replaceAll);
+    return _this;
+  }
+  _createClass(Replace, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_ref) {
+      var prevReplaceText = _ref.replaceText;
+      var replaceText = this.props.replaceText;
+      if (replaceText && replaceText !== prevReplaceText) {
+        this.setState({
+          replaceText: replaceText,
+          isComposing: false
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var replaceText = this.state.replaceText;
+      var canReplace = this.props.canReplace;
+      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));
+    }
+  }]);
+  return Replace;
+}(React.PureComponent);
+export default injectIntl(Replace);

package/dist/esm/ui/styles.js

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/* 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 var replaceSectionButtonStyles = css({
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+export var ruleStyles = css({
+  width: '100%',
+  border: 'none',
+  backgroundColor: "".concat("var(--ds-border, ".concat(N30A, ")")),
+  margin: "var(--ds-space-050, 4px)".concat(" 0px"),
+  height: '1px',
+  borderRadius: '1px'
+});
+export var wrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: "0px ".concat("var(--ds-space-050, 4px)")
+  }
+});
+export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
+export var countStyles = css({
+  color: "".concat("var(--ds-text-subtlest, ".concat(N60, ")")),
+  fontSize: "".concat(relativeFontSizeToBase16(12)),
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-100, 8px)"
+});
+export var countWrapperStyles = css({
+  alignItems: 'center'
+});

package/dist/esm/utils/array.js

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

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

@@ -0,0 +1,304 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { createDecorations, findDecorationFromMatch } from './index';
+
+// max number of decorations to apply at once
+var batchIncrement = 100;
+// position range to apply decorations between before alternating above or below viewport
+var posIncrement = 2000;
+/**
+ * Provides support for applying search match highlight decorations in batches
+ */
+var BatchDecorations = /*#__PURE__*/function () {
+  function BatchDecorations() {
+    _classCallCheck(this, BatchDecorations);
+  }
+  _createClass(BatchDecorations, [{
+    key: "stop",
+    value: function 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
+     */
+  }, {
+    key: "applyAllSearchDecorations",
+    value: function () {
+      var _applyAllSearchDecorations = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(editorView, containerElement, addDecorations, removeDecorations) {
+        var pmElement, positions, startPos, endPos, viewportStartPos, viewportEndPos, dir, before, after, diff;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              this.stop();
+              this.addDecorations = addDecorations;
+              this.removeDecorations = removeDecorations;
+              if (containerElement) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return");
+            case 5:
+              pmElement = containerElement.querySelector('.ProseMirror');
+              if (pmElement) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              positions = this.calcDecorationPositions(editorView, containerElement, pmElement);
+              startPos = positions.startPos, endPos = positions.endPos, viewportStartPos = positions.viewportStartPos, viewportEndPos = positions.viewportEndPos;
+              dir = 0;
+              before = viewportStartPos;
+              after = viewportEndPos - posIncrement;
+              _context.next = 15;
+              return this.updateDecorationsBetween(editorView, viewportStartPos, viewportEndPos);
+            case 15:
+              if (!(before > startPos || after < endPos)) {
+                _context.next = 28;
+                break;
+              }
+              if (!(dir++ % 2 === 0 && before > startPos || after >= endPos)) {
+                _context.next = 23;
+                break;
+              }
+              diff = before - startPos;
+              before = Math.max(before - posIncrement, startPos);
+              _context.next = 21;
+              return this.updateDecorationsBetween(editorView, before, before + Math.min(diff, posIncrement));
+            case 21:
+              _context.next = 26;
+              break;
+            case 23:
+              after = Math.min(after + posIncrement, endPos);
+              _context.next = 26;
+              return this.updateDecorationsBetween(editorView, after, Math.min(after + posIncrement, endPos));
+            case 26:
+              _context.next = 15;
+              break;
+            case 28:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function applyAllSearchDecorations(_x, _x2, _x3, _x4) {
+        return _applyAllSearchDecorations.apply(this, arguments);
+      }
+      return applyAllSearchDecorations;
+    }()
+  }, {
+    key: "updateDecorationsBetween",
+    value: function () {
+      var _updateDecorationsBetween = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(editorView, startPos, endPos) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return this.removeDecorationsBetween(editorView, startPos, endPos);
+            case 2:
+              _context2.next = 4;
+              return this.addDecorationsBetween(editorView, startPos, endPos);
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function updateDecorationsBetween(_x5, _x6, _x7) {
+        return _updateDecorationsBetween.apply(this, arguments);
+      }
+      return updateDecorationsBetween;
+    }()
+  }, {
+    key: "addDecorationsBetween",
+    value: function () {
+      var _addDecorationsBetween = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(editorView, startPos, endPos) {
+        var _this = this;
+        var selection, _getPluginState, matches, decorationSet, matchesBetween, selectionMatch, selectionIndex;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              selection = editorView.state.selection;
+              _getPluginState = getPluginState(editorView.state), matches = _getPluginState.matches, decorationSet = _getPluginState.decorationSet;
+              if (!(matches.length === 0)) {
+                _context3.next = 4;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 4:
+              matchesBetween = matches.filter(function (m) {
+                return m.start >= startPos && (endPos === undefined || m.start < endPos);
+              });
+              selectionMatch = matches.find(function (match) {
+                return match.start >= selection.from;
+              });
+              selectionIndex = matchesBetween.findIndex(function (match) {
+                return match === selectionMatch;
+              });
+              _context3.next = 9;
+              return this.batchRequests(function (counter) {
+                var matchesToDecorate = matchesBetween.slice(counter, counter + batchIncrement);
+                if (matchesToDecorate.length === 0) {
+                  return false;
+                }
+                var useSelectionIndex = selectionIndex >= counter && selectionIndex < counter + batchIncrement;
+                if (selectionMatch && useSelectionIndex) {
+                  var 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
+              });
+            case 9:
+              return _context3.abrupt("return", _context3.sent);
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function addDecorationsBetween(_x8, _x9, _x10) {
+        return _addDecorationsBetween.apply(this, arguments);
+      }
+      return addDecorationsBetween;
+    }()
+  }, {
+    key: "removeDecorationsBetween",
+    value: function () {
+      var _removeDecorationsBetween = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(editorView, startPos, endPos) {
+        var _this2 = this;
+        var _getPluginState2, decorationSet, decorations;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _getPluginState2 = getPluginState(editorView.state), decorationSet = _getPluginState2.decorationSet;
+              decorations = decorationSet.find(startPos, endPos);
+              if (!(decorations.length === 0)) {
+                _context4.next = 4;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 4:
+              _context4.next = 6;
+              return this.batchRequests(function (counter) {
+                var decorationsToRemove = decorations.slice(counter, counter + batchIncrement);
+                if (decorationsToRemove.length === 0) {
+                  return false;
+                }
+                // only get those decorations whose from >= startPos
+                for (var i = 0; i < decorationsToRemove.length; i++) {
+                  if (decorationsToRemove[i].from >= startPos) {
+                    break;
+                  }
+                  decorationsToRemove = decorationsToRemove.slice(1);
+                }
+                if (_this2.removeDecorations) {
+                  _this2.removeDecorations(decorationsToRemove);
+                }
+              }, {
+                increment: batchIncrement,
+                until: decorations.length
+              });
+            case 6:
+              return _context4.abrupt("return", _context4.sent);
+            case 7:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function removeDecorationsBetween(_x11, _x12, _x13) {
+        return _removeDecorationsBetween.apply(this, arguments);
+      }
+      return removeDecorationsBetween;
+    }()
+    /**
+     * 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
+     */
+  }, {
+    key: "calcDecorationPositions",
+    value: function calcDecorationPositions(editorView, containerElement, pmElement) {
+      var containerRect = containerElement.getBoundingClientRect();
+      var pmRect = pmElement.getBoundingClientRect();
+      var viewportStartPos = this.getStartPos(editorView, 0, pmRect.left);
+      var viewportEndPos = this.getEndPos(editorView, containerRect.top + containerRect.height, pmRect.left);
+      return {
+        viewportStartPos: viewportStartPos,
+        viewportEndPos: viewportEndPos,
+        startPos: 1,
+        endPos: editorView.state.doc.nodeSize
+      };
+    }
+  }, {
+    key: "getStartPos",
+    value: function getStartPos(editorView, y, x) {
+      var startPos = editorView.posAtCoords({
+        top: y,
+        left: x
+      });
+      return startPos ? startPos.pos : 1;
+    }
+  }, {
+    key: "getEndPos",
+    value: function getEndPos(editorView, y, x) {
+      var maxPos = editorView.state.doc.nodeSize;
+      var 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
+     */
+  }, {
+    key: "batchRequests",
+    value: function batchRequests(fn, opts) {
+      var _this3 = this;
+      var counter = 0;
+      var increment = opts.increment,
+        until = opts.until;
+      return new Promise(function (resolve) {
+        var batchedFn = function batchedFn() {
+          var result = fn(counter);
+          while (result === false && counter < until) {
+            counter += increment;
+            result = fn(counter);
+          }
+          if (counter < until) {
+            counter += increment;
+            _this3.rafId = requestAnimationFrame(batchedFn);
+          } else {
+            _this3.rafId = undefined;
+            resolve();
+          }
+        };
+        _this3.rafId = requestAnimationFrame(batchedFn);
+      });
+    }
+  }]);
+  return BatchDecorations;
+}();
+var batchDecorations = new BatchDecorations();
+export default batchDecorations;

package/dist/esm/utils/commands.js

@@ -0,0 +1,10 @@
+export var withScrollIntoView = function withScrollIntoView(command) {
+  return function (state, dispatch, view) {
+    return command(state, function (tr) {
+      tr.scrollIntoView();
+      if (dispatch) {
+        dispatch(tr);
+      }
+    }, view);
+  };
+};