@atlaskit/editor-core 178.0.2 → 178.1.0

package/dist/esm/plugins/media/nodeviews/mediaNodeView/index.js

@@ -13,7 +13,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { SelectionBasedNodeView } from '../../../../nodeviews';
@@ -112,7 +111,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     value: function createDomRef() {
       var domRef = document.createElement('div');
 
-      if (browser.chrome && this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+      if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -530,7 +530,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('div');
 
-      if (browser.chrome && this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+      if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';

package/dist/esm/plugins/media/pm-plugins/keymap.js

@@ -3,6 +3,7 @@ import { NodeSelection } from 'prosemirror-state';
 import * as keymaps from '../../../keymaps';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
 export function keymapPlugin(options) {
   var list = {};
@@ -16,6 +17,8 @@ export function keymapPlugin(options) {
   if (getMediaFeatureFlag('captions', featureFlags)) {
     keymaps.bindKeymapWithCommand(keymaps.moveDown.common, insertAndSelectCaption, list);
     keymaps.bindKeymapWithCommand(keymaps.tab.common, insertAndSelectCaption, list);
+    keymaps.bindKeymapWithCommand(keymaps.moveLeft.common, arrowLeftFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
+    keymaps.bindKeymapWithCommand(keymaps.moveRight.common, arrowRightFromMediaSingle(options === null || options === void 0 ? void 0 : options.editorSelectionAPI), list);
   }
 
   keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, splitMediaGroup, list);
@@ -53,4 +56,46 @@ var insertAndSelectCaption = function insertAndSelectCaption(state, dispatch) {
   return false;
 };
 
+var arrowLeftFromMediaSingle = function arrowLeftFromMediaSingle(editorSelectionAPI) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+
+    if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+        selectionRelativeToNode: undefined,
+        selection: new GapCursorSelection(state.doc.resolve(selection.from), Side.LEFT)
+      })(state);
+
+      if (dispatch) {
+        dispatch(tr);
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+};
+
+var arrowRightFromMediaSingle = function arrowRightFromMediaSingle(editorSelectionAPI) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+
+    if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+        selectionRelativeToNode: undefined,
+        selection: new GapCursorSelection(state.doc.resolve(selection.to), Side.RIGHT)
+      })(state);
+
+      if (dispatch) {
+        dispatch(tr);
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+};
+
 export default keymapPlugin;

package/dist/esm/plugins/rank.js

@@ -4,9 +4,10 @@ export default {
   'indentationKeymap', 'textColor', 'alignmentPlugin', 'listInputRule', 'listKeymap', 'codeBlock', 'codeBlockIDEKeyBindings', 'codeBlockKeyMap', 'textFormatting', 'textFormattingCursor', 'textFormattingInputRule', 'textFormattingSmartRule', 'textFormattingClear', 'textFormattingKeymap', // task/decisions keymap needs to be above table keymap so can indent actions in a table
   'tasksAndDecisionsKeyMap', // expand and table keymaps need to be above selection keymap to add their custom selection behaviour:
   // https://product-fabric.atlassian.net/wiki/spaces/E/pages/1113098008/Selection+Guide#Special-Cases
-  'expandKeymap', 'tableSelectionKeymap', 'tableKeymap', 'captionKeymap', // selection keymap needs to be above gap cursor keymap so it can set node selections from
+  'expandKeymap', 'tableSelectionKeymap', 'tableKeymap', 'captionKeymap', // media keymap above selection keymap to allow navigating past the mediaSingle node
+  'mediaKeymap', // selection keymap needs to be above gap cursor keymap so it can set node selections from
   // left/right arrows
-  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'beforePrimaryToolbar', 'inlineCode'],
+  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'beforePrimaryToolbar', 'inlineCode'],
   nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'rule', 'panel', 'mention', 'confluenceUnsupportedBlock', 'confluenceUnsupportedInline', 'unsupportedBlock', 'unsupportedInline', 'confluenceJiraIssue', 'hardBreak', 'emoji', 'placeholder', 'mediaSingle', 'mediaGroup', 'table', 'expand', 'nestedExpand', 'media', 'tableHeader', 'decisionList', 'tableRow', 'decisionItem', 'tableCell', 'taskList', 'taskItem', 'extension', 'bodiedExtension', 'inlineExtension', 'layoutSection', 'layoutColumn', 'inlineCard', 'blockCard', 'embedCard'],
   marks: [// Fragment mark is both for inline and block elements
   'fragment', // Inline marks

package/dist/esm/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -0,0 +1,76 @@
+import { NodeSelection, TextSelection } from 'prosemirror-state';
+
+function findEmptySelectableParentNodePosition($pos, isValidPosition) {
+  var doc = $pos.doc;
+
+  if ($pos.pos + 1 > doc.content.size) {
+    return null;
+  }
+
+  if ($pos.depth === 0) {
+    if (isValidPosition($pos)) {
+      return $pos;
+    }
+
+    return null;
+  }
+
+  if (isValidPosition($pos)) {
+    return $pos;
+  }
+
+  var positionLevelUp = $pos.before();
+  var resolvedPositionLevelUp = doc.resolve(positionLevelUp);
+  return findEmptySelectableParentNodePosition(resolvedPositionLevelUp, isValidPosition);
+}
+
+var checkPositionNode = function checkPositionNode($pos) {
+  var maybeNode = $pos.nodeAfter;
+
+  if (!maybeNode || !maybeNode.isBlock) {
+    return false;
+  }
+
+  if (maybeNode.isAtom) {
+    return true;
+  }
+
+  var isParentEmpty = maybeNode.content.size === 0 || maybeNode.textContent === '';
+  return isParentEmpty && NodeSelection.isSelectable(maybeNode);
+};
+
+function findNextSelectionPosition(_ref) {
+  var $targetHead = _ref.$targetHead,
+      $anchor = _ref.$anchor,
+      doc = _ref.doc;
+  var direction = $anchor.pos < $targetHead.pos ? 'down' : 'up';
+  var maybeNextPosition = findEmptySelectableParentNodePosition($targetHead, checkPositionNode);
+
+  if (maybeNextPosition && maybeNextPosition.nodeAfter) {
+    var nodeAfter = maybeNextPosition.nodeAfter;
+    var pos = maybeNextPosition.pos;
+    var nextPositionToSelect = direction === 'down' ? Math.min(nodeAfter.nodeSize + pos, doc.content.size) : Math.max(pos, 0);
+    return doc.resolve(nextPositionToSelect);
+  }
+
+  return null;
+}
+
+export var onCreateSelectionBetween = function onCreateSelectionBetween(view, $anchor, $head) {
+  if ($anchor.pos === $head.pos) {
+    return null;
+  }
+
+  var $nextHeadPosition = findNextSelectionPosition({
+    $targetHead: $head,
+    $anchor: $anchor,
+    doc: view.state.doc
+  });
+
+  if (!$nextHeadPosition) {
+    return null;
+  }
+
+  var forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, $nextHeadPosition.pos);
+  return forcedTextSelection;
+};

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

@@ -0,0 +1,74 @@
+import { TextSelection } from 'prosemirror-state';
+
+var isCollpasedExpand = function isCollpasedExpand(node) {
+  return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && !node.attrs.__expanded);
+};
+
+var findFixedProblematicNodePosition = function findFixedProblematicNodePosition($pos, direction) {
+  if ($pos.pos === 0 || $pos.depth === 0) {
+    return null;
+  }
+
+  var pos = direction === 'up' ? $pos.before() : $pos.after();
+  var $posResolved = $pos.doc.resolve(pos);
+  var maybeExpandNode = direction === 'up' ? $posResolved.nodeBefore : $posResolved.nodeAfter;
+
+  if (maybeExpandNode && isCollpasedExpand(maybeExpandNode)) {
+    var nodeSize = maybeExpandNode.nodeSize;
+    var expandPosition = direction === 'up' ? pos - nodeSize : pos + nodeSize;
+    var startPosNode = Math.max(expandPosition, 0);
+    var $startPosNode = $pos.doc.resolve(Math.min(startPosNode, $pos.doc.content.size));
+    return $startPosNode;
+  }
+
+  return null;
+};
+
+export var onKeydown = function 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;
+  }
+
+  var _view$state$selection = view.state.selection,
+      $head = _view$state$selection.$head,
+      $anchor = _view$state$selection.$anchor;
+
+  if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
+    return false;
+  }
+
+  var direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
+  var $fixedProblematicNodePosition = findFixedProblematicNodePosition($head, direction);
+
+  if ($fixedProblematicNodePosition) {
+    var forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, $fixedProblematicNodePosition.pos);
+    var tr = view.state.tr;
+    tr.setSelection(forcedTextSelection);
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+
+  return false;
+};

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

@@ -4,35 +4,14 @@ 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 var getInitialState = function getInitialState(state) {
   return {
     decorationSet: getDecorations(state.tr),
     selection: state.selection
   };
 };
-
-var toggleContentEditable = function toggleContentEditable(node) {
-  var root = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-  if (root || node.getAttribute('contenteditable') === 'true') {
-    var wasTrue = node.getAttribute('contenteditable') === 'true';
-    node.setAttribute('contenteditable', 'false');
-    requestAnimationFrame(function () {
-      if (wasTrue) {
-        node.setAttribute('contenteditable', 'true');
-      } else {
-        node.removeAttribute('contenteditable');
-      }
-    });
-  } // any children with contenteditable = true block selection from proceeding
-
-
-  var children = Array.from(node.children);
-  children.forEach(function (child) {
-    return toggleContentEditable(child);
-  });
-};
-
 export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return new SafePlugin({
@@ -96,10 +75,12 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
       return true;
     },
     props: {
+      createSelectionBetween: onCreateSelectionBetween,
       decorations: function 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
@@ -114,40 +95,6 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
             }
           }
 
-          return false;
-        },
-        keydown: function 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')) {
-            var state = editorView.state; // If current depth is on the top most level, skip that
-
-            if (state.selection.$head.depth <= 0) {
-              return false;
-            }
-
-            var 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();
-              }
-            }
-
-            var 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/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -203,7 +203,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_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/esm/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -26,9 +26,14 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     }];
   }, [items]);
   var onItemActivated = useCallback(function (_ref2) {
-    var item = _ref2.item;
+    var item = _ref2.item,
+        _ref2$shouldCloseMenu = _ref2.shouldCloseMenu,
+        shouldCloseMenu = _ref2$shouldCloseMenu === void 0 ? true : _ref2$shouldCloseMenu;
     item.command(editorView.state, editorView.dispatch);
-    closeMenu();
+
+    if (shouldCloseMenu) {
+      closeMenu();
+    }
   }, [editorView.state, editorView.dispatch, closeMenu]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,

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

@@ -45,8 +45,10 @@ export function ToolbarDropdown(props) {
   var items = useItems(props);
 
   var handleOnItemActivated = function handleOnItemActivated(_ref) {
-    var item = _ref.item;
-    setIsDropdownOpen(false);
+    var item = _ref.item,
+        _ref$shouldCloseMenu = _ref.shouldCloseMenu,
+        shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
+    setIsDropdownOpen(!shouldCloseMenu);
     return onItemActivated({
       editorView: props.editorView,
       buttonName: item.value.name

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

@@ -1,70 +1,29 @@
-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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
-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; } }
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
 var clickWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n"])));
-
-var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
-  _inherits(ClickAreaBlock, _React$Component);
-
-  var _super = _createSuper(ClickAreaBlock);
-
-  function ClickAreaBlock() {
-    var _this;
-
-    _classCallCheck(this, ClickAreaBlock);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var ClickAreaBlock = function ClickAreaBlock(_ref) {
+  var editorView = _ref.editorView,
+      editorDisabled = _ref.editorDisabled,
+      children = _ref.children;
+  var handleMouseDown = React.useCallback(function (event) {
+    if (!editorView) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
-      var _this$props = _this.props,
-          view = _this$props.editorView,
-          editorDisabled = _this$props.editorDisabled;
-
-      if (!view) {
-        return;
-      }
-
-      if (!editorDisabled) {
-        // if the editor is disabled -- we don't want to intercept any click events
-        clickAreaClickHandler(view, event);
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(ClickAreaBlock, [{
-    key: "render",
-    value: function render() {
-      return jsx("div", {
-        "data-testid": "click-wrapper",
-        css: clickWrapper,
-        onClick: this.handleClick
-      }, this.props.children);
+    if (!editorDisabled) {
+      clickAreaClickHandler(editorView, event);
     }
-  }]);
-
-  return ClickAreaBlock;
-}(React.Component);
-
-export { ClickAreaBlock as default };
+  }, [editorView, editorDisabled]);
+  return jsx("div", {
+    "data-testid": "click-wrapper",
+    css: clickWrapper,
+    onMouseDown: handleMouseDown
+  }, children);
+};
+export default ClickAreaBlock;

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

@@ -1,65 +1,29 @@
-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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
-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; } }
-
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { createParagraphAtEnd } from '../../../commands';
 var clickArea = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
-
-var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
-  _inherits(ClickAreaInline, _React$Component);
-
-  var _super = _createSuper(ClickAreaInline);
-
-  function ClickAreaInline() {
-    var _this;
-
-    _classCallCheck(this, ClickAreaInline);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var ClickAreaInline = function ClickAreaInline(_ref) {
+  var editorView = _ref.editorView,
+      children = _ref.children;
+  var handleMouseDown = React.useCallback(function (event) {
+    if (!editorView) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
-      var editorView = _this.props.editorView;
-
-      if (editorView) {
-        if (createParagraphAtEnd()(editorView.state, editorView.dispatch)) {
-          editorView.focus();
-          event.stopPropagation();
-        }
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(ClickAreaInline, [{
-    key: "render",
-    value: function render() {
-      return jsx("div", {
-        css: clickArea,
-        onClick: this.handleClick
-      });
+    if (createParagraphAtEnd()(editorView.state, editorView.dispatch)) {
+      editorView.focus();
+      event.stopPropagation();
     }
-  }]);
-
-  return ClickAreaInline;
-}(React.Component);
-
-export { ClickAreaInline as default };
+  }, [editorView]);
+  return jsx("div", {
+    "data-testid": "click-wrapper",
+    css: clickArea,
+    onMouseDown: handleMouseDown
+  });
+};
+export default ClickAreaInline;

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

@@ -13,6 +13,10 @@ var insideContentArea = function insideContentArea(ref) {
 
   return false;
 };
+
+var insideProseMirrorEditableArea = function 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 var checkForModal = function checkForModal(target) {
 };
 
 var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
-  var _view$hasFocus;
+  var _view$hasFocus, _event$currentTarget;
 
-  var isTargetContentArea = event.currentTarget.querySelector('.ak-editor-content-area');
   var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
-  var target = event.target; // @see https://product-fabric.atlassian.net/browse/ED-4287
+  var target = event.target;
+  var isTargetContentArea = target.classList.contains('ak-editor-content-area');
+  var isTargetChildOfContentArea = insideContentArea(target.parentNode);
+  var isTargetInsideEditableArea = insideProseMirrorEditableArea(target); // Any click inside ProseMirror should be managed by ProseMirror
+
+  if (isTargetInsideEditableArea) {
+    return false;
+  }
+
+  var 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 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 
   var isTextAreaClicked = target.nodeName === 'TEXTAREA';
   var isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
-  var isTargetChildOfContentArea = insideContentArea(target.parentNode);
   var selection = window.getSelection();
-  var isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
-  var isClickOutsideEditor = (!isTargetContentArea || !isTargetChildOfContentArea || !isEditorFocused) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target); // click was within editor container and focus should be brought to input
+  var 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
+
+  var isEventComingFromInlineCommentPopup = Boolean(closestElement(event.currentTarget, 'div[offset]')) || Boolean(closestElement(target, 'div[offset]'));
+  var 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';
+  var isTargetInsideContentArea = Boolean(isTargetChildOfContentArea);
+  var isBetweenContentAreaAndEditableContent = isTargetInsideContentArea && !isTargetInsideEditableArea;
+  var edgeCaseScenario1 = (isBetweenContentAreaAndEditableContent || !isEventComingFromContentArea) && !isEditorFocused;
+  var edgeCaseScenario2 = !isTargetInsideContentArea && isEditorFocused;
+  var edgeCaseScenario3 = isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
+  var edgeCaseScenario4 = isEventComingFromContentArea && !isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
+  var edgeCases = edgeCaseScenario1 || edgeCaseScenario2 || edgeCaseScenario3 || edgeCaseScenario4;
+  var 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/esm/ui/Alignment/AlignmentButton/index.js

@@ -35,9 +35,11 @@ var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "onClick", function (e) {
       var _this$props = _this.props,
           onClick = _this$props.onClick,
-          value = _this$props.value;
+          value = _this$props.value; // detect if the click event comes from keyboard where screenX and screenY are 0
+
+      var isMouseEvent = e instanceof MouseEvent;
       e.preventDefault();
-      onClick(value);
+      onClick(value, isMouseEvent);
     });
 
     return _this;