@atlaskit/editor-core 178.0.1 → 178.1.0

package/dist/es2019/plugins/selection/pm-plugins/events/keydown.js

@@ -0,0 +1,77 @@
+import { TextSelection } from 'prosemirror-state';
+
+const isCollpasedExpand = node => {
+  return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && !node.attrs.__expanded);
+};
+
+const findFixedProblematicNodePosition = ($pos, direction) => {
+  if ($pos.pos === 0 || $pos.depth === 0) {
+    return null;
+  }
+
+  const pos = direction === 'up' ? $pos.before() : $pos.after();
+  const $posResolved = $pos.doc.resolve(pos);
+  const maybeExpandNode = direction === 'up' ? $posResolved.nodeBefore : $posResolved.nodeAfter;
+
+  if (maybeExpandNode && isCollpasedExpand(maybeExpandNode)) {
+    const nodeSize = maybeExpandNode.nodeSize;
+    const expandPosition = direction === 'up' ? pos - nodeSize : pos + nodeSize;
+    const startPosNode = Math.max(expandPosition, 0);
+    const $startPosNode = $pos.doc.resolve(Math.min(startPosNode, $pos.doc.content.size));
+    return $startPosNode;
+  }
+
+  return null;
+};
+
+export const onKeydown = (view, event) => {
+  /*
+   * This workaround is needed for some specific situation with collapsed expand.
+   *
+   * The way expand was built, no browser reconize selection on it.
+   * For instance, when a selection going to a "collapsed" expand
+   * the browser will try to send the cursor to inside the expand content (wrong),
+   * this behavior is caused because the expand content is never true hidden
+   * we just set the height to 1px.
+   *
+   * So, we need to capture a possible selection event
+   * when a collapsed exxpand is the next node in the common depth.
+   * If that is true, we create a new TextSelection and stop the event bubble
+   */
+  if (!(event instanceof KeyboardEvent)) {
+    return false;
+  }
+
+  if (!event.shiftKey || event.ctrlKey || event.metaKey) {
+    return false;
+  }
+
+  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
+    return false;
+  }
+
+  const {
+    selection: {
+      $head,
+      $anchor
+    }
+  } = view.state;
+
+  if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
+    return false;
+  }
+
+  const direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
+  const $fixedProblematicNodePosition = findFixedProblematicNodePosition($head, direction);
+
+  if ($fixedProblematicNodePosition) {
+    const forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, $fixedProblematicNodePosition.pos);
+    const tr = view.state.tr;
+    tr.setSelection(forcedTextSelection);
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+
+  return false;
+};

package/dist/es2019/plugins/selection/pm-plugins/selection-main.js

@@ -4,29 +4,12 @@ import { SelectionActionTypes } from '../actions';
 import { createPluginState, getPluginState } from '../plugin-factory';
 import { selectionPluginKey } from '../types';
 import { getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, getDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, shouldRecalcDecorations } from '../utils';
+import { onKeydown } from './events/keydown';
+import { onCreateSelectionBetween } from './events/create-selection-between';
 export const getInitialState = state => ({
   decorationSet: getDecorations(state.tr),
   selection: state.selection
 });
-
-const toggleContentEditable = (node, root = false) => {
-  if (root || node.getAttribute('contenteditable') === 'true') {
-    const wasTrue = node.getAttribute('contenteditable') === 'true';
-    node.setAttribute('contenteditable', 'false');
-    requestAnimationFrame(() => {
-      if (wasTrue) {
-        node.setAttribute('contenteditable', 'true');
-      } else {
-        node.removeAttribute('contenteditable');
-      }
-    });
-  } // any children with contenteditable = true block selection from proceeding
-
-
-  const children = Array.from(node.children);
-  children.forEach(child => toggleContentEditable(child));
-};
-
 export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) => {
   return new SafePlugin({
     key: selectionPluginKey,
@@ -94,11 +77,14 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
     },
 
     props: {
+      createSelectionBetween: onCreateSelectionBetween,
+
       decorations(state) {
         return getPluginState(state).decorationSet;
       },
 
       handleDOMEvents: {
+        keydown: onKeydown,
         // We only want to fire analytics for a click and drag range/cell selection when
         // the user has finished, otherwise we will get an event almost every time they move
         // their mouse which is too much
@@ -113,42 +99,6 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
             }
           }
 
-          return false;
-        },
-        keydown: (editorView, event) => {
-          // Bugfix for block ReactNodeViews like table and extension
-          // They could not be selected with Shift + ArrowDown/ArrowUp
-          // Fixed when contenteditable = false, but then you couldn't edit their contents
-          // Therefore, briefly set contenteditable=false to allow the selection through, then set it back to true
-          if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            const {
-              state
-            } = editorView; // If current depth is on the top most level, skip that
-
-            if (state.selection.$head.depth <= 0) {
-              return false;
-            }
-
-            let pos;
-
-            if (event.key === 'ArrowDown') {
-              pos = state.selection.$head.after();
-            } else {
-              pos = Math.max(state.selection.$head.before() - 1, 0); // block extensions only take up one position, dont need to get before()
-
-              if (!editorView.nodeDOM(pos)) {
-                pos = state.doc.resolve(pos).before();
-              }
-            }
-
-            const node = editorView.nodeDOM(pos);
-
-            if (node instanceof HTMLDivElement && node.className.includes('View-content-wrap') // class added by ReactNodeView
-            ) {
-              toggleContentEditable(node, true);
-            }
-          }
-
           return false;
         }
       }

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -171,7 +171,7 @@ export class ToolbarTextColor extends React.Component {
       zIndex: akEditorMenuZIndex,
       fitWidth: fitWidth,
       onOpenChange: this.onOpenChange,
-      closeonTab: true,
+      closeOnTab: true,
       trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
         spacing: isReducedSpacing ? 'none' : 'default',

package/dist/es2019/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -18,10 +18,14 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
     items
   }], [items]);
   const onItemActivated = useCallback(({
-    item
+    item,
+    shouldCloseMenu = true
   }) => {
     item.command(editorView.state, editorView.dispatch);
-    closeMenu();
+
+    if (shouldCloseMenu) {
+      closeMenu();
+    }
   }, [editorView.state, editorView.dispatch, closeMenu]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,

package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -40,9 +40,10 @@ export function ToolbarDropdown(props) {
   const items = useItems(props);
 
   const handleOnItemActivated = ({
-    item
+    item,
+    shouldCloseMenu = true
   }) => {
-    setIsDropdownOpen(false);
+    setIsDropdownOpen(!shouldCloseMenu);
     return onItemActivated({
       editorView: props.editorView,
       buttonName: item.value.name

package/dist/es2019/ui/Addon/ClickAreaBlock/index.js

@@ -1,5 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -8,33 +6,24 @@ const clickWrapper = css`
   flex-grow: 1;
   height: 100%;
 `;
-export default class ClickAreaBlock extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleClick", event => {
-      const {
-        editorView: view,
-        editorDisabled
-      } = this.props;
-
-      if (!view) {
-        return;
-      }
-
-      if (!editorDisabled) {
-        // if the editor is disabled -- we don't want to intercept any click events
-        clickAreaClickHandler(view, event);
-      }
-    });
-  }
-
-  render() {
-    return jsx("div", {
-      "data-testid": "click-wrapper",
-      css: clickWrapper,
-      onClick: this.handleClick
-    }, this.props.children);
-  }
+export const ClickAreaBlock = ({
+  editorView,
+  editorDisabled,
+  children
+}) => {
+  const handleMouseDown = React.useCallback(event => {
+    if (!editorView) {
+      return;
+    }
 
-}
+    if (!editorDisabled) {
+      clickAreaClickHandler(editorView, event);
+    }
+  }, [editorView, editorDisabled]);
+  return jsx("div", {
+    "data-testid": "click-wrapper",
+    css: clickWrapper,
+    onMouseDown: handleMouseDown
+  }, children);
+};
+export default ClickAreaBlock;

package/dist/es2019/ui/Addon/ClickAreaInline/index.js

@@ -1,5 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -7,29 +5,24 @@ import { createParagraphAtEnd } from '../../../commands';
 const clickArea = css`
   flex-grow: 1;
 `;
-export default class ClickAreaInline extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleClick", event => {
-      const {
-        editorView
-      } = this.props;
-
-      if (editorView) {
-        if (createParagraphAtEnd()(editorView.state, editorView.dispatch)) {
-          editorView.focus();
-          event.stopPropagation();
-        }
-      }
-    });
-  }
-
-  render() {
-    return jsx("div", {
-      css: clickArea,
-      onClick: this.handleClick
-    });
-  }
+export const ClickAreaInline = ({
+  editorView,
+  children
+}) => {
+  const handleMouseDown = React.useCallback(event => {
+    if (!editorView) {
+      return;
+    }
 
-}
+    if (createParagraphAtEnd()(editorView.state, editorView.dispatch)) {
+      editorView.focus();
+      event.stopPropagation();
+    }
+  }, [editorView]);
+  return jsx("div", {
+    "data-testid": "click-wrapper",
+    css: clickArea,
+    onMouseDown: handleMouseDown
+  });
+};
+export default ClickAreaInline;

package/dist/es2019/ui/Addon/click-area-helper.js

@@ -13,6 +13,10 @@ const insideContentArea = ref => {
 
   return false;
 };
+
+const insideProseMirrorEditableArea = ref => {
+  return Boolean(ref === null || ref === void 0 ? void 0 : ref.closest('.ProseMirror'));
+};
 /**
  * @see ED-14699 - check if editor is inside a modal to continue to bring cursor to input when
  * any part of the editor container is clicked
@@ -37,11 +41,19 @@ export const checkForModal = target => {
 };
 
 const clickAreaClickHandler = (view, event) => {
-  var _view$hasFocus;
+  var _view$hasFocus, _event$currentTarget;
 
-  const isTargetContentArea = event.currentTarget.querySelector('.ak-editor-content-area');
   const isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
-  const target = event.target; // @see https://product-fabric.atlassian.net/browse/ED-4287
+  const target = event.target;
+  const isTargetContentArea = target.classList.contains('ak-editor-content-area');
+  const isTargetChildOfContentArea = insideContentArea(target.parentNode);
+  const isTargetInsideEditableArea = insideProseMirrorEditableArea(target); // Any click inside ProseMirror should be managed by ProseMirror
+
+  if (isTargetInsideEditableArea) {
+    return false;
+  }
+
+  const isEventComingFromContentArea = Boolean(event.currentTarget.querySelector('.ak-editor-content-area')); // @see https://product-fabric.atlassian.net/browse/ED-4287
   // click event gets triggered twice on a checkbox (on <label> first and then on <input>)
   // by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
   // which doesn't pass the check !contentArea.contains(event.target)
@@ -52,10 +64,20 @@ const clickAreaClickHandler = (view, event) => {
 
   const isTextAreaClicked = target.nodeName === 'TEXTAREA';
   const isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
-  const isTargetChildOfContentArea = insideContentArea(target.parentNode);
   const selection = window.getSelection();
-  const isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
-  const isClickOutsideEditor = (!isTargetContentArea || !isTargetChildOfContentArea || !isEditorFocused) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target); // click was within editor container and focus should be brought to input
+  const isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]'); // This is a super workaround to find when events are coming from Confluence InlineComment modal
+  // We don't own those components, so we can't change them
+
+  const isEventComingFromInlineCommentPopup = Boolean(closestElement(event.currentTarget, 'div[offset]')) || Boolean(closestElement(target, 'div[offset]'));
+  const isButtonClicked = Boolean(closestElement(event.currentTarget, 'button')) || Boolean(closestElement(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || target.nodeName === 'BUTTON';
+  const isTargetInsideContentArea = Boolean(isTargetChildOfContentArea);
+  const isBetweenContentAreaAndEditableContent = isTargetInsideContentArea && !isTargetInsideEditableArea;
+  const edgeCaseScenario1 = (isBetweenContentAreaAndEditableContent || !isEventComingFromContentArea) && !isEditorFocused;
+  const edgeCaseScenario2 = !isTargetInsideContentArea && isEditorFocused;
+  const edgeCaseScenario3 = isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
+  const edgeCaseScenario4 = isEventComingFromContentArea && !isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
+  const edgeCases = edgeCaseScenario1 || edgeCaseScenario2 || edgeCaseScenario3 || edgeCaseScenario4;
+  const isClickOutsideEditor = edgeCases && !isEventComingFromInlineCommentPopup && !isButtonClicked && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target); // click was within editor container and focus should be brought to input
 
   if (isClickOutsideEditor && view) {
     outsideProsemirrorEditorClickHandler(view, event);

package/dist/es2019/ui/Alignment/AlignmentButton/index.js

@@ -13,9 +13,11 @@ class AlignmentButton extends PureComponent {
       const {
         onClick,
         value
-      } = this.props;
+      } = this.props; // detect if the click event comes from keyboard where screenX and screenY are 0
+
+      const isMouseEvent = e instanceof MouseEvent;
       e.preventDefault();
-      onClick(value);
+      onClick(value, isMouseEvent);
     });
   }
 

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -21,6 +21,7 @@ import { ELEMENT_ITEM_HEIGHT } from './constants';
 const InsertMenu = ({
   editorView,
   dropdownItems,
+  showElementBrowserLink,
   onInsert,
   toggleVisiblity
 }) => {
@@ -40,7 +41,7 @@ const InsertMenu = ({
     value: item.value
   }), [onInsert]);
   const quickInsertDropdownItems = dropdownItems.map(transform);
-  const viewMoreItem = quickInsertDropdownItems.pop();
+  const viewMoreItem = showElementBrowserLink && quickInsertDropdownItems.pop();
   const onInsertItem = useCallback(item => {
     toggleVisiblity();
 

package/dist/es2019/ui/ToolbarArrowKeyNavigationProvider/index.js

@@ -29,18 +29,24 @@ export const ToolbarArrowKeyNavigationProvider = ({
   const wrapperRef = useRef(null);
   const selectedItemIndex = useRef(0);
   const incrementIndex = useCallback(list => {
-    if (selectedItemIndex.current === list.length - 1) {
-      selectedItemIndex.current = 0;
-    } else {
-      selectedItemIndex.current = selectedItemIndex.current + 1;
+    let index = 0;
+
+    if (document.activeElement) {
+      index = list.indexOf(document.activeElement);
+      index = (index + 1) % list.length;
     }
+
+    selectedItemIndex.current = index;
   }, []);
   const decrementIndex = useCallback(list => {
-    if (selectedItemIndex.current === 0) {
-      selectedItemIndex.current = list.length - 1;
-    } else {
-      selectedItemIndex.current = selectedItemIndex.current - 1;
+    let index = 0;
+
+    if (document.activeElement) {
+      index = list.indexOf(document.activeElement);
+      index = (list.length + index - 1) % list.length;
     }
+
+    selectedItemIndex.current = index;
   }, []);
 
   const handleArrowRight = () => {
@@ -108,12 +114,19 @@ export const ToolbarArrowKeyNavigationProvider = ({
         return;
       }
 
+      const menuWrapper = document.querySelector('.menu-key-handler-wrapper');
+
+      if (menuWrapper) {
+        // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
+        return;
+      }
+
       const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
 
       if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
         return;
       } //This is kind of hack to reset the current focused toolbar item
-      //to handle some usecases such as Tab in/out of main toolbar
+      //to handle some use cases such as Tab in/out of main toolbar
 
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {

package/dist/es2019/utils/document.js

@@ -217,11 +217,18 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
 
     if (isTransformed && dispatchAnalyticsEvent) {
       dispatchAnalyticsEvent({
-        action: ACTION.DEDUPE_MARKS_TRANSFORMED,
+        action: ACTION.DEDUPE_MARKS_TRANSFORMED_V2,
         actionSubject: ACTION_SUBJECT.EDITOR,
         eventType: EVENT_TYPE.OPERATIONAL,
         attributes: {
-          discardedMarks
+          /** UGC WARNING
+           *
+           * DO NOT include the `mark` attributes inside, we map here to only
+           * extract the mark type as that is the only non-UGC safe information
+           * that we can add to event-attributes
+           *
+           */
+          discardedMarkTypes: discardedMarks.map(mark => mark.type)
         }
       });
     }

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "178.0.1";
+export const version = "178.1.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "178.0.1",
+	"version": "178.1.0",
 	"sideEffects": false
 }

package/dist/esm/create-editor/create-plugins-list.js

@@ -185,6 +185,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
       allowDropzoneDropLine: isFullPage,
       allowMediaSingleEditable: !isMobile,
       allowRemoteDimensionsFetch: !isMobile,
+      editorSelectionAPI: editorSelectionAPI,
       // This is a wild one. I didnt quite understand what the code was doing
       // so a bit of guess for now.
       allowMarkingUploadsAsIncomplete: isMobile,
@@ -261,7 +262,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
           disableLayout: true
         },
         allowMediaGroup: false,
-        isCopyPasteEnabled: true
+        isCopyPasteEnabled: true,
+        editorSelectionAPI: editorSelectionAPI
       }]);
     }
   }

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -43,8 +43,10 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
       isOpen: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "changeAlignment", function (align) {
-      _this.toggleOpen();
+    _defineProperty(_assertThisInitialized(_this), "changeAlignment", function (align, togglePopup) {
+      if (togglePopup) {
+        _this.toggleOpen();
+      }
 
       return _this.props.changeAlignment(align);
     });
@@ -77,11 +79,10 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "hideonEsc", function () {
+    _defineProperty(_assertThisInitialized(_this), "hideOnEscape", function () {
       var _this$toolbarItemRef2, _this$toolbarItemRef3;
 
-      _this.hide(); //To set the focus on the textcolor button when the menu is closed by 'Esc' only (aria guidelines)
-
+      _this.hide();
 
       (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
     });
@@ -111,17 +112,29 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen,
-        handleClickOutside: function handleClickOutside(event) {
-          return _this2.hide({
-            isOpen: false,
-            event: event
+        onOpenChange: function onOpenChange(_ref2) {
+          var _this2$toolbarItemRef, _this2$toolbarItemRef2;
+
+          var isOpen = _ref2.isOpen;
+
+          _this2.setState({
+            isOpen: isOpen
           });
+
+          (_this2$toolbarItemRef = _this2.toolbarItemRef) === null || _this2$toolbarItemRef === void 0 ? void 0 : (_this2$toolbarItemRef2 = _this2$toolbarItemRef.current) === null || _this2$toolbarItemRef2 === void 0 ? void 0 : _this2$toolbarItemRef2.focus();
+        },
+        handleClickOutside: function handleClickOutside(event) {
+          if (event instanceof MouseEvent) {
+            _this2.hide({
+              isOpen: false,
+              event: event
+            });
+          }
         },
-        handleEscapeKeydown: this.hideonEsc,
-        onOpenChange: this.hide,
+        handleEscapeKeydown: this.hideOnEscape,
         fitWidth: 112,
         fitHeight: 80,
-        closeonTab: true,
+        closeOnTab: true,
         trigger: jsx(ToolbarButton, {
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: disabled,
@@ -145,7 +158,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         })
       }, jsx(Alignment, {
         onClick: function onClick(align) {
-          return _this2.changeAlignment(align);
+          return _this2.changeAlignment(align, false);
         },
         selectedAlignment: pluginState.align
       })), jsx("span", {

package/dist/esm/plugins/annotation/index.js

@@ -82,11 +82,13 @@ var annotationPlugin = function annotationPlugin(annotationProviders) {
             return null;
           }
 
-          return /*#__PURE__*/React.createElement(InlineCommentView, {
+          return /*#__PURE__*/React.createElement("div", {
+            "data-editor-popup": "true"
+          }, /*#__PURE__*/React.createElement(InlineCommentView, {
             providers: annotationProviders,
             editorView: editorView,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent
-          });
+          }));
         }
       });
     }

package/dist/esm/plugins/annotation/ui/InlineCommentView.js

@@ -59,7 +59,9 @@ export function InlineCommentView(_ref) {
           selection: selection.toJSON(),
           position: position,
           docSize: editorView.state.doc.nodeSize,
-          error: error.toString(),
+          error: error.toString()
+        },
+        nonPrivacySafeAttributes: {
           errorStack: error.stack || undefined
         }
       };
@@ -80,7 +82,8 @@ export function InlineCommentView(_ref) {
 
     var textSelection = state.doc.textBetween(selection.from, selection.to);
     return /*#__PURE__*/React.createElement("div", {
-      "data-testid": AnnotationTestIds.floatingComponent
+      "data-testid": AnnotationTestIds.floatingComponent,
+      "data-editor-popup": "true"
     }, /*#__PURE__*/React.createElement(CreateComponent, {
       dom: dom,
       textSelection: textSelection,
@@ -127,6 +130,7 @@ export function InlineCommentView(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(AnnotationViewWrapper, {
+    "data-editor-popup": "true",
     "data-testid": AnnotationTestIds.floatingComponent,
     key: getAnnotationViewKey(activeAnnotations),
     onViewed: onAnnotationViewed

package/dist/esm/plugins/base/pm-plugins/react-nodeview.js

@@ -48,12 +48,19 @@ export var plugin = new SafePlugin({
   key: stateKey,
   view: function view(_view) {
     var pluginState = stateKey.getState(_view.state);
+    var prevFrom = -1;
+    var prevTo = -1;
     return {
       update: function update(view) {
         var _view$state$selection = view.state.selection,
             from = _view$state$selection.from,
             to = _view$state$selection.to;
-        pluginState.notifyNewSelection(from, to);
+
+        if (from !== prevFrom || to !== prevTo) {
+          pluginState.notifyNewSelection(from, to);
+          prevFrom = from;
+          prevTo = to;
+        }
       }
     };
   }