@atlaskit/editor-core 178.0.1 → 178.1.0

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

@@ -27,8 +27,6 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
-var _utils = require("@atlaskit/editor-common/utils");
-
 var _prosemirrorState = require("prosemirror-state");
 
 var _react = _interopRequireDefault(require("react"));
@@ -135,7 +133,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     value: function createDomRef() {
       var domRef = document.createElement('div');
 
-      if (_utils.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/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -558,7 +558,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('div');
 
-      if (_utils.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/cjs/plugins/media/pm-plugins/keymap.js

@@ -18,6 +18,8 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _mediaCommon = require("@atlaskit/media-common");
 
+var _selection = require("@atlaskit/editor-common/selection");
+
 var _captions = require("../commands/captions");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -36,6 +38,8 @@ function keymapPlugin(options) {
   if ((0, _mediaCommon.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);
@@ -75,5 +79,47 @@ 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 _prosemirrorState.NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+        selectionRelativeToNode: undefined,
+        selection: new _selection.GapCursorSelection(state.doc.resolve(selection.from), _selection.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 _prosemirrorState.NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.setSelectionRelativeToNode({
+        selectionRelativeToNode: undefined,
+        selection: new _selection.GapCursorSelection(state.doc.resolve(selection.to), _selection.Side.RIGHT)
+      })(state);
+
+      if (dispatch) {
+        dispatch(tr);
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+};
+
 var _default = keymapPlugin;
 exports.default = _default;

package/dist/cjs/plugins/rank.js

@@ -10,9 +10,10 @@ var _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/cjs/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onCreateSelectionBetween = void 0;
+
+var _prosemirrorState = require("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 && _prosemirrorState.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;
+}
+
+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 = _prosemirrorState.TextSelection.create(view.state.doc, $anchor.pos, $nextHeadPosition.pos);
+
+  return forcedTextSelection;
+};
+
+exports.onCreateSelectionBetween = onCreateSelectionBetween;

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onKeydown = void 0;
+
+var _prosemirrorState = require("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;
+};
+
+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 = _prosemirrorState.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;
+};
+
+exports.onKeydown = onKeydown;

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

@@ -17,6 +17,10 @@ var _types = require("../types");
 
 var _utils = require("../utils");
 
+var _keydown = require("./events/keydown");
+
+var _createSelectionBetween = require("./events/create-selection-between");
+
 var getInitialState = function getInitialState(state) {
   return {
     decorationSet: (0, _utils.getDecorations)(state.tr),
@@ -26,28 +30,6 @@ var getInitialState = function getInitialState(state) {
 
 exports.getInitialState = getInitialState;
 
-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);
-  });
-};
-
 var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return new _safePlugin.SafePlugin({
@@ -111,10 +93,12 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
       return true;
     },
     props: {
+      createSelectionBetween: _createSelectionBetween.onCreateSelectionBetween,
       decorations: function decorations(state) {
         return (0, _pluginFactory.getPluginState)(state).decorationSet;
       },
       handleDOMEvents: {
+        keydown: _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
@@ -129,40 +113,6 @@ 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/cjs/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -229,7 +229,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         zIndex: _editorSharedStyles.akEditorMenuZIndex,
         fitWidth: fitWidth,
         onOpenChange: this.onOpenChange,
-        closeonTab: true,
+        closeOnTab: true,
         trigger: (0, _react2.jsx)(_ToolbarButton.default, {
           buttonId: _ToolbarButton.TOOLBAR_BUTTON.TEXT_COLOR,
           spacing: isReducedSpacing ? 'none' : 'default',

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

@@ -47,9 +47,14 @@ var FormattingTextDropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref
     }];
   }, [items]);
   var onItemActivated = (0, _react.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.default.createElement(_DropdownMenu.default, {
     mountTo: popupsMountPoint,

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

@@ -65,8 +65,10 @@ 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/cjs/ui/Addon/ClickAreaBlock/index.js

@@ -5,21 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = exports.ClickAreaBlock = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -31,55 +17,30 @@ var _clickAreaHelper = require("../click-area-helper");
 
 var _templateObject;
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
 var clickWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n"])));
 
-var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ClickAreaBlock, _React$Component);
-
-  var _super = _createSuper(ClickAreaBlock);
-
-  function ClickAreaBlock() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ClickAreaBlock);
+var ClickAreaBlock = function ClickAreaBlock(_ref) {
+  var editorView = _ref.editorView,
+      editorDisabled = _ref.editorDisabled,
+      children = _ref.children;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var handleMouseDown = _react.default.useCallback(function (event) {
+    if (!editorView) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
-        (0, _clickAreaHelper.clickAreaClickHandler)(view, event);
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ClickAreaBlock, [{
-    key: "render",
-    value: function render() {
-      return (0, _react2.jsx)("div", {
-        "data-testid": "click-wrapper",
-        css: clickWrapper,
-        onClick: this.handleClick
-      }, this.props.children);
+    if (!editorDisabled) {
+      (0, _clickAreaHelper.clickAreaClickHandler)(editorView, event);
     }
-  }]);
-  return ClickAreaBlock;
-}(_react.default.Component);
-
-exports.default = ClickAreaBlock;
+  }, [editorView, editorDisabled]);
+
+  return (0, _react2.jsx)("div", {
+    "data-testid": "click-wrapper",
+    css: clickWrapper,
+    onMouseDown: handleMouseDown
+  }, children);
+};
+
+exports.ClickAreaBlock = ClickAreaBlock;
+var _default = ClickAreaBlock;
+exports.default = _default;

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

@@ -5,21 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = exports.ClickAreaInline = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -31,50 +17,30 @@ var _commands = require("../../../commands");
 
 var _templateObject;
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
 var clickArea = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 
-var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ClickAreaInline, _React$Component);
-
-  var _super = _createSuper(ClickAreaInline);
-
-  function ClickAreaInline() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ClickAreaInline);
+var ClickAreaInline = function ClickAreaInline(_ref) {
+  var editorView = _ref.editorView,
+      children = _ref.children;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var handleMouseDown = _react.default.useCallback(function (event) {
+    if (!editorView) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
-      var editorView = _this.props.editorView;
-
-      if (editorView) {
-        if ((0, _commands.createParagraphAtEnd)()(editorView.state, editorView.dispatch)) {
-          editorView.focus();
-          event.stopPropagation();
-        }
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ClickAreaInline, [{
-    key: "render",
-    value: function render() {
-      return (0, _react2.jsx)("div", {
-        css: clickArea,
-        onClick: this.handleClick
-      });
+    if ((0, _commands.createParagraphAtEnd)()(editorView.state, editorView.dispatch)) {
+      editorView.focus();
+      event.stopPropagation();
     }
-  }]);
-  return ClickAreaInline;
-}(_react.default.Component);
-
-exports.default = ClickAreaInline;
+  }, [editorView]);
+
+  return (0, _react2.jsx)("div", {
+    "data-testid": "click-wrapper",
+    css: clickArea,
+    onMouseDown: handleMouseDown
+  });
+};
+
+exports.ClickAreaInline = ClickAreaInline;
+var _default = ClickAreaInline;
+exports.default = _default;