@atlaskit/editor-plugin-base 2.0.12 → 2.1.1

package/dist/es2019/pm-plugins/scroll-gutter/plugin.js

@@ -1,155 +1,29 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { GUTTER_SELECTOR, GUTTER_SIZE_IN_PX, isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { scrollGutterPluginKey } from './plugin-key';
-import { getKeyboardHeight } from './util/get-keyboard-height';
-const MIN_TAP_SIZE_IN_PX = 40;
-function supportsIntersectionObserver() {
-  if (typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  window.IntersectionObserverEntry.prototype) {
-    return true;
-  }
-  return false;
-}
-function listenForGutterVisibilityChanges(scrollElement, gutterIsVisible) {
-  if (supportsIntersectionObserver()) {
-    const observer = new IntersectionObserver((entries, _) => {
-      entries.forEach(entry => {
-        gutterIsVisible(entry.intersectionRatio > 0);
-      });
-    }, {
-      root: scrollElement,
-      rootMargin: '0px',
-      threshold: 0
-    });
-    return observer;
-  }
-  return undefined;
-}
+const GUTTER_SIZE_IN_PX = 120;
+const GUTTER_SELECTOR_NAME = 'editor-scroll-gutter';
 
 /**
  * Create a gutter element that can be added or removed from the DOM.
  */
-function createGutter(gutterSize) {
+function createGutter(gutterSize, parent) {
   const gutter = document.createElement('div');
   gutter.style.paddingBottom = `${gutterSize}px`;
-  gutter.id = GUTTER_SELECTOR.substr(1);
-  let initialized = false;
-  let mounted = false;
-  let currentParent = null;
-  let observer;
-  let isVisible = false;
-  return {
-    addGutter(parent) {
-      if (parent) {
-        var _parent$deref;
-        currentParent = parent;
-        (_parent$deref = parent.deref()) === null || _parent$deref === void 0 ? void 0 : _parent$deref.appendChild(gutter);
-        mounted = true;
-        if (observer) {
-          observer.observe(gutter);
-        }
-      }
-    },
-    removeGutter() {
-      var _currentParent;
-      const parentRef = (_currentParent = currentParent) === null || _currentParent === void 0 ? void 0 : _currentParent.deref();
-      if (parentRef && mounted) {
-        mounted = false;
-        parentRef.removeChild(gutter);
-        if (observer) {
-          observer.unobserve(gutter);
-        }
-      }
-    },
-    element() {
-      return gutter;
-    },
-    isMounted() {
-      return mounted;
-    },
-    visible() {
-      // If we know whether it's visible we can avoid expensive calculations
-      if (observer) {
-        return isVisible;
-      }
-      // Fallback for legacy browsers assumes it's visible (if mounted)
-      return mounted;
-    },
-    observe(scrollElement) {
-      if (!initialized) {
-        initialized = true;
-        observer = listenForGutterVisibilityChanges(scrollElement, visible => isVisible = visible);
-      }
-    },
-    destroy() {
-      if (observer) {
-        observer.disconnect();
-      }
-      observer = undefined;
-      this.removeGutter();
-      initialized = mounted = false;
-    }
-  };
-}
-
-/**
- * Get caret top position given the current selection,
- * use start container position as fallback
- */
-function getCaretTopPosition() {
-  const windowSelection = window.getSelection();
-  if (windowSelection && windowSelection.rangeCount > 0) {
-    const range = windowSelection.getRangeAt(0);
-    if (range) {
-      const clientRects = range.getClientRects();
-      // Return client rects
-      if (clientRects && clientRects.length > 0) {
-        return clientRects[0].top;
-      }
-
-      // Return container top
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      const container = range.startContainer;
-      if (container && container.getBoundingClientRect) {
-        return container.getBoundingClientRect().top;
-      }
-    }
+  gutter.setAttribute('data-vc', 'scroll-gutter');
+  gutter.id = GUTTER_SELECTOR_NAME;
+  if (parent) {
+    parent.appendChild(gutter);
   }
-  return;
-}
-function scrollToGutterElement(scrollContainer, gutterElement, gutterSize) {
-  const viewportHeight = scrollContainer.offsetHeight;
-  const viewportOffsetY = scrollContainer.getBoundingClientRect().top;
-  const caretTopPosition = getCaretTopPosition();
-  if (!caretTopPosition) {
-    return false;
-  }
-  const caretTopFromContainer = caretTopPosition - viewportOffsetY;
-  const gutterThresholdTop = viewportHeight - gutterSize - MIN_TAP_SIZE_IN_PX * 2;
-  if (caretTopFromContainer < gutterThresholdTop) {
-    return false;
-  }
-
-  // Clamp the scroll position to above the scroll gutter element.
-  gutterElement.scrollIntoView(false);
-
-  // Mark scrolling as handled so that other plugin's don't override our position.
-  return true;
+  return () => parent === null || parent === void 0 ? void 0 : parent.removeChild(gutter);
 }
 export default ((pluginOptions = {}) => {
   const {
     getScrollElement,
-    allowCustomScrollHandler,
     gutterSize = GUTTER_SIZE_IN_PX
   } = pluginOptions;
   if (!getScrollElement) {
     return undefined;
   }
-  const gutter = createGutter(gutterSize);
-  let scrollElement = null; // | undefined;
-
   return new SafePlugin({
     key: scrollGutterPluginKey,
     state: {
@@ -165,104 +39,25 @@ export default ((pluginOptions = {}) => {
       // Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
       // when scrolling the cursor into view, scrolling takes place.
       // Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
-      scrollThreshold: gutterSize / 2,
+      scrollThreshold: gutterSize,
       // Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
       // Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
-      scrollMargin: gutterSize,
-      // Called when the view, after updating its state, tries to scroll the selection into view
-      // https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection
-      handleScrollToSelection: () => {
-        if (allowCustomScrollHandler === false) {
-          return false;
-        }
-        if (!gutter.isMounted() || !gutter.visible() || !scrollElement) {
-          // Avoid scrolling until applicable
-          return false;
-        }
-        return scrollToGutterElement(scrollElement, gutter.element(), gutterSize);
-      }
+      scrollMargin: gutterSize
     },
     view(view) {
+      var _editorElement;
       // Store references to avoid lookups on successive checks.
-      scrollElement = getScrollElement(view);
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      let editorElement = view.dom;
-      let editorParentElement = editorElement.parentElement;
-      let viewportElementHeight = 0;
-      let contentElementHeight = 0;
-      const addAndObserveGutter = () => {
-        if (!gutter.isMounted()) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          gutter.observe(scrollElement);
-          gutter.addGutter(editorParentElement ? new WeakRef(editorParentElement) : null);
-        }
-      };
-      const toggleGutter = (contentSize, threshold) => {
-        if (pluginOptions.persistScrollGutter) {
-          if (!isEmptyDocument(view.state.doc)) {
-            addAndObserveGutter();
-          } else {
-            gutter.removeGutter();
-          }
-          return;
-        }
-
-        // Add or remove the gutter based on whether the content is about to exceed the viewport height.
-        // We do this to ensure there is sufficient white space below the last content node in order to
-        // see any UI control elements which may sit beneath it.
-        if (contentSize >= threshold) {
-          addAndObserveGutter();
-        } else {
-          if (gutter.isMounted()) {
-            gutter.removeGutter();
-          }
-        }
-      };
-      const observerCallback = entries => {
-        for (const entry of entries) {
-          const elementHeight = Math.round(entry.contentRect.height);
-          if (entry.target === scrollElement) {
-            var _getKeyboardHeight;
-            const keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(view === null || view === void 0 ? void 0 : view.state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
-            viewportElementHeight = elementHeight - keyboardHeight;
-          } else if (entry.target === editorParentElement) {
-            contentElementHeight = elementHeight - (gutter.isMounted() ? gutterSize : 0);
-          }
-        }
-        toggleGutter(contentElementHeight, viewportElementHeight);
-      };
-
-      // Subscribe to updates of the height of the viewport and content elements
-      // We toggle the value when it is set here or when PM updates to ensure we're using
-      // the latest.
-      const resizeObserver = new ResizeObserver(observerCallback);
-      if (scrollElement && editorParentElement) {
-        resizeObserver.observe(scrollElement);
-        resizeObserver.observe(editorParentElement);
+      const scrollElement = getScrollElement(view);
+      let editorElement = view.dom instanceof HTMLElement ? view.dom : null;
+      let editorParentElement = (_editorElement = editorElement) === null || _editorElement === void 0 ? void 0 : _editorElement.parentElement;
+      let cleanup = () => {};
+      if (editorParentElement && scrollElement) {
+        cleanup = createGutter(gutterSize, editorParentElement);
       }
       return {
         destroy() {
-          // Remove if it's mounted
-          gutter.destroy();
-          scrollElement = editorParentElement = editorElement = null;
-          resizeObserver.disconnect();
-        },
-        /**
-         * Toggle the Scroll Gutter Element
-         */
-        update(view, prevState) {
-          if (!scrollElement || !editorParentElement) {
-            return;
-          }
-          const state = view.state;
-          if (prevState.selection === state.selection) {
-            // No need to recheck if the selected node hasn't changed.
-            return;
-          }
-          const gutterThresholdHeight = viewportElementHeight - gutterSize;
-          toggleGutter(contentElementHeight, gutterThresholdHeight);
+          cleanup();
+          editorParentElement = editorElement = null;
         }
       };
     }

package/dist/esm/basePlugin.js

@@ -5,7 +5,6 @@ import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import { keymap } from '@atlaskit/editor-common/keymaps';
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setKeyboardHeight } from './editor-commands/set-keyboard-height';
 import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
@@ -15,14 +14,64 @@ import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
 import { createLazyNodeViewDecorationPlugin } from './pm-plugins/lazy-node-view-decoration';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import scrollGutter from './pm-plugins/scroll-gutter/plugin';
-import scrollGutterNext from './pm-plugins/scroll-gutter/plugin-next';
 import { getKeyboardHeight } from './pm-plugins/scroll-gutter/util/get-keyboard-height';
 import { inputTracking } from './pm-plugins/utils/inputTrackingConfig';
+export function resolveCallbacks(from, to, tr, callbacks) {
+  var doc = tr.doc;
+  doc.nodesBetween(from, to, function (node, pos) {
+    callbacks.forEach(function (cb) {
+      return cb({
+        tr: tr,
+        node: node,
+        pos: pos,
+        from: from,
+        to: to
+      });
+    });
+  });
+}
+var SMART_TO_ASCII = {
+  '…': '...',
+  '→': '->',
+  '←': '<-',
+  '–': '--',
+  '“': '"',
+  '”': '"',
+  '‘': "'",
+  '’': "'"
+};
+
+// eslint-disable-next-line require-unicode-regexp
+var FIND_SMART_CHAR = new RegExp("[".concat(Object.keys(SMART_TO_ASCII).join(''), "]"), 'g');
 var basePlugin = function basePlugin(_ref) {
-  var _api$featureFlags;
+  var _api$featureFlags, _api$base;
   var options = _ref.config,
     api = _ref.api;
   var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  var callbacks = [];
+  api === null || api === void 0 || (_api$base = api.base) === null || _api$base === void 0 || _api$base.actions.registerMarks(function (_ref2) {
+    var tr = _ref2.tr,
+      node = _ref2.node,
+      pos = _ref2.pos,
+      from = _ref2.from,
+      to = _ref2.to;
+    var doc = tr.doc;
+    var schema = doc.type.schema;
+    var textNodeType = schema.nodes.text;
+    if (node.type === textNodeType && node.text) {
+      // Find a valid start and end position because the text may be partially selected.
+      var startPositionInSelection = Math.max(pos, from);
+      var endPositionInSelection = Math.min(pos + node.nodeSize, to);
+      var textForReplacing = doc.textBetween(startPositionInSelection, endPositionInSelection);
+      var newText = textForReplacing.replace(FIND_SMART_CHAR, function (match) {
+        var _SMART_TO_ASCII$match;
+        return (_SMART_TO_ASCII$match = SMART_TO_ASCII[match]) !== null && _SMART_TO_ASCII$match !== void 0 ? _SMART_TO_ASCII$match : match;
+      });
+      var currentStartPos = tr.mapping.map(startPositionInSelection);
+      var currentEndPos = tr.mapping.map(endPositionInSelection);
+      tr.replaceWith(currentStartPos, currentEndPos, schema.text(newText, node.marks));
+    }
+  });
   return {
     name: 'base',
     getSharedState: function getSharedState(editorState) {
@@ -31,13 +80,19 @@ var basePlugin = function basePlugin(_ref) {
       };
     },
     actions: {
-      setKeyboardHeight: setKeyboardHeight
+      setKeyboardHeight: setKeyboardHeight,
+      resolveMarks: function resolveMarks(from, to, tr) {
+        return resolveCallbacks(from, to, tr, callbacks);
+      },
+      registerMarks: function registerMarks(callback) {
+        callbacks.push(callback);
+      }
     },
     pmPlugins: function pmPlugins() {
       var plugins = [{
         name: 'filterStepsPlugin',
-        plugin: function plugin(_ref2) {
-          var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref3) {
+          var dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
           return filterStepsPlugin(dispatchAnalyticsEvent);
         }
       }];
@@ -74,8 +129,8 @@ var basePlugin = function basePlugin(_ref) {
         plugin: newlinePreserveMarksPlugin
       }, {
         name: 'frozenEditor',
-        plugin: function plugin(_ref3) {
-          var dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref4) {
+          var dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
           return frozenEditor(api === null || api === void 0 ? void 0 : api.contextIdentifier)(dispatchAnalyticsEvent, inputTracking, undefined);
         }
       }, {
@@ -99,21 +154,12 @@ var basePlugin = function basePlugin(_ref) {
         }
       });
       if (options && options.allowScrollGutter) {
-        if (fg('platform_editor_improved_scroll_gutter')) {
-          plugins.push({
-            name: 'scrollGutterPlugin',
-            plugin: function plugin() {
-              return scrollGutterNext(options.allowScrollGutter);
-            }
-          });
-        } else {
-          plugins.push({
-            name: 'scrollGutterPlugin',
-            plugin: function plugin() {
-              return scrollGutter(options.allowScrollGutter);
-            }
-          });
-        }
+        plugins.push({
+          name: 'scrollGutterPlugin',
+          plugin: function plugin() {
+            return scrollGutter(options.allowScrollGutter);
+          }
+        });
       }
       plugins.push({
         name: 'disableSpellcheckingPlugin',

package/dist/esm/pm-plugins/frozen-editor.js

@@ -19,10 +19,7 @@ var DEFAULT_TRACK_SEVERITY_ENABLED = false;
 export var DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL = 100;
 export var DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED = 500;
 var dispatchLongTaskEvent = function dispatchLongTaskEvent(contextIdentifierPlugin) {
-  return function (dispatchAnalyticsEvent, view, time, getNodeCount, interactionType, severity
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/max-params
-  ) {
+  return function (dispatchAnalyticsEvent, view, time, getNodeCount, interactionType, severity) {
     var _contextIdentifierPlu;
     var state = view.state;
     var nodesCount = getNodeCount(state);