@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/esm/plugins/placeholder-text/index.js

@@ -12,6 +12,23 @@ import { PlaceholderTextNodeView } from './placeholder-text-nodeview';
 import { pluginKey } from './plugin-key';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
+import { isSelectionAtPlaceholder } from './selection-utils';
+import { createInternalTypeAheadTools } from '../type-ahead/api';
+
+var getOpenTypeAhead = function getOpenTypeAhead(view, content) {
+  var typeAheadAPI = createInternalTypeAheadTools(view);
+  var typeAheadHandler = typeAheadAPI.findTypeAheadHandler(content);
+
+  if (!typeAheadHandler || !typeAheadHandler.id) {
+    return null;
+  }
+
+  return typeAheadAPI.openTypeAheadHandler({
+    triggerHandler: typeAheadHandler,
+    inputMethod: INPUT_METHOD.KEYBOARD
+  });
+};
+
 export function createPlugin(dispatch, options) {
   var allowInserting = !!options.allowInserting;
   return new SafePlugin({
@@ -82,6 +99,32 @@ export function createPlugin(dispatch, options) {
       return;
     },
     props: {
+      handleDOMEvents: {
+        beforeinput: function beforeinput(view, event) {
+          var state = view.state;
+
+          if (event instanceof InputEvent && !event.isComposing && event.inputType === 'insertText' && isSelectionAtPlaceholder(view.state.selection)) {
+            event.stopPropagation();
+            event.preventDefault();
+            var startNodePosition = state.selection.from;
+            var content = event.data || '';
+            var tr = view.state.tr;
+            tr.delete(startNodePosition, startNodePosition + 1);
+            var openTypeAhead = getOpenTypeAhead(view, content);
+
+            if (openTypeAhead) {
+              openTypeAhead(tr);
+            } else {
+              tr.insertText(content);
+            }
+
+            view.dispatch(tr);
+            return true;
+          }
+
+          return false;
+        }
+      },
       nodeViews: {
         placeholder: function placeholder(node, view, getPos) {
           return new PlaceholderTextNodeView(node, view, getPos);
@@ -183,7 +226,7 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
           });
         },
         action: function action(insert, state) {
-          var tr = insert(state.schema.nodes.placeholder.createChecked());
+          var tr = state.tr;
           tr.setMeta(pluginKey, {
             showInsertPanelAt: tr.selection.anchor
           });

package/dist/esm/plugins/placeholder-text/placeholder-text-nodeview.js

@@ -1,7 +1,32 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import { DOMSerializer } from 'prosemirror-model';
-import { TextSelection } from 'prosemirror-state';
+import { Selection } from 'prosemirror-state';
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+
+var serializePlaceholderNode = function serializePlaceholderNode(node) {
+  var element = document.createElement('span');
+  element.classList.add('pm-placeholder');
+
+  if (browser.gecko) {
+    element.setAttribute('contenteditable', 'true');
+  }
+
+  element.innerText = ZERO_WIDTH_SPACE;
+  var elementChildren = document.createElement('span');
+  elementChildren.classList.add('pm-placeholder__text');
+  elementChildren.dataset.placeholder = node.attrs.text;
+  elementChildren.setAttribute('contenteditable', 'false');
+  element.appendChild(elementChildren);
+
+  if (browser.safari) {
+    element.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+  } else {
+    element.appendChild(document.createElement('wbr'));
+  }
+
+  return element;
+};
+
 export var PlaceholderTextNodeView = /*#__PURE__*/function () {
   function PlaceholderTextNodeView(node, view, getPos) {
     _classCallCheck(this, PlaceholderTextNodeView);
@@ -9,34 +34,56 @@ export var PlaceholderTextNodeView = /*#__PURE__*/function () {
     this.node = node;
     this.view = view;
     this.getPos = getPos;
-    var serializer = DOMSerializer.fromSchema(this.view.state.schema);
-    this.dom = serializer.serializeNode(this.node);
+    this.dom = serializePlaceholderNode(this.node);
+    this.getPos = getPos;
   }
 
   _createClass(PlaceholderTextNodeView, [{
+    key: "stopEvent",
+    value: function stopEvent(e) {
+      if (e.type === 'mousedown' && typeof this.getPos === 'function') {
+        e.preventDefault();
+        var _view = this.view;
+        var startNodePosition = this.getPos();
+        var tr = _view.state.tr;
+        tr.setSelection(Selection.near(tr.doc.resolve(startNodePosition)));
+
+        _view.dispatch(tr);
+
+        return true;
+      }
+
+      return false;
+    }
+  }, {
     key: "ignoreMutation",
     value: function ignoreMutation(record) {
-      // 😬
-      // DOM Node needs to be contenteditable so Android does
-      // not close its virtual keyboard, see ED-9613
-      // To reestablish desired behaviour we replace the placeholdeer
-      // when we detect a characterData mutation inside
+      if (typeof this.getPos !== 'function' || record.type !== 'selection') {
+        return true;
+      }
+
       var view = this.view,
-          dom = this.dom,
           node = this.node;
-      var content = dom.textContent || '';
-      var text = node.attrs.text;
-
-      if (record.type === 'characterData' && content !== text && content.includes(text) && typeof this.getPos === 'function') {
-        var start = this.getPos();
-        var end = start + this.node.nodeSize;
-        var stripped = content.replace(text, '');
-        var tr = view.state.tr.replaceRangeWith(start, end, view.state.schema.text(stripped));
-        tr = tr.setSelection(TextSelection.create(tr.doc, end, end));
+      var placeholderStartPosition = this.getPos();
+      var placeholderEndPosition = this.getPos() + node.nodeSize;
+      var selection = view.state.selection; // when the selection is set right after the placeholder.
+      // we should let ProseMirror deal with this edge-case
+
+      if (selection.from === placeholderEndPosition) {
+        return false;
+      }
+
+      var isSelectionAtPlaceholder = selection.from === placeholderStartPosition;
+      var isSelectionAfterlaceholder = selection.from > placeholderEndPosition;
+
+      if (isSelectionAtPlaceholder || isSelectionAfterlaceholder) {
+        var tr = view.state.tr;
+        tr.setSelection(Selection.near(tr.doc.resolve(placeholderEndPosition)));
         view.dispatch(tr);
+        return true;
       }
 
-      return record.type !== 'selection';
+      return true;
     }
   }]);
 

package/dist/esm/plugins/placeholder-text/selection-utils.js

@@ -0,0 +1,9 @@
+import { TextSelection } from 'prosemirror-state';
+export var isSelectionAtPlaceholder = function isSelectionAtPlaceholder(selection) {
+  if (!(selection instanceof TextSelection) || !selection.$cursor) {
+    return false;
+  }
+
+  var node = selection.$cursor.doc.nodeAt(selection.$cursor.pos);
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'placeholder';
+};

package/dist/esm/plugins/placeholder-text/styles.js

@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
-export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n  }\n"])), N300);
+import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), N300, N300, N300, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), N300);

package/dist/esm/plugins/rule/pm-plugins/input-rule.js

@@ -10,6 +10,7 @@ export var createHorizontalRule = function createHorizontalRule(state, start, en
   }
 
   var tr = null;
+  var rule = state.schema.nodes.rule;
 
   var _getFeatureFlags = getFeatureFlags(state),
       newInsertionBehaviour = _getFeatureFlags.newInsertionBehaviour;
@@ -21,7 +22,7 @@ export var createHorizontalRule = function createHorizontalRule(state, start, en
      * without considering the extra text after the `/` command.
      **/
     tr = state.tr.replaceWith(start, end, Fragment.empty);
-    tr = safeInsert(state.schema.nodes.rule.createChecked(), tr.selection.from)(tr);
+    tr = safeInsert(rule.createChecked(), tr.selection.from)(tr);
   }
 
   if (!tr) {

package/dist/esm/plugins/rule/styles.js

@@ -2,7 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var ruleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorSelectedBorderColor);
+export var ruleStyles = function ruleStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, akEditorSelectedBorderColor);
+};

package/dist/esm/plugins/selection/gap-cursor/styles.js

@@ -1,12 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import { keyframes } from 'styled-components';
+import { css, keyframes } from '@emotion/react';
 var gapCursorBlink = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
 export var hideCaretModifier = 'ProseMirror-hide-gapcursor';
 var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-export var gapCursorStyles = "\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.".concat(hideCaretModifier, " {\n      caret-color: transparent;\n    }\n\n    ").concat(gapCursor, " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ").concat(gapCursorBlink, " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &").concat(wrapRight, " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ").concat(gapCursor, " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ").concat(gapCursor).concat(wrapLeft, " + span + ").concat(wrapLeft, ",\n  ").concat(gapCursor).concat(wrapRight, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapRight, " + ").concat(wrapLeft, ",\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span ").concat(wrapRight, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " {\n    clear: none;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " > div,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + ").concat(wrapRight, " > div,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " {\n    float: left;\n  }\n\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, "::after,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + span + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + span + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " + *,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + *,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + span + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + span + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(prosemirrorwidget, " + ").concat(gapCursor, " + *,\n  ").concat(prosemirrorwidget, " + ").concat(gapCursor, " + span + * {\n    margin-top: 0;\n  }\n");
+export var gapCursorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);

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

@@ -1,6 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common/utils';
 import { createPluginState, getPluginState } from '../plugin-factory';
 import { selectionPluginKey } from '../types';
 import { getDecorations, shouldRecalcDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../utils';
@@ -118,27 +117,12 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
           return false;
         },
         keydown: function keydown(editorView, event) {
-          var state = editorView.state; // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
-          // contenteditable="false". (See https://product-fabric.atlassian.net/browse/ED-9452)
-          // On keypress, if the head of cursor selection touches a node with contenteditable="false",
-          // we temporarily remove the attribute, wait one tick, then restore it with its original value.
-
-          if (browser.gecko) {
-            var node = editorView.nodeDOM(editorView.state.selection.head);
-
-            if (node instanceof HTMLElement && node.getAttribute('contenteditable') === 'false') {
-              node.removeAttribute('contenteditable');
-              requestAnimationFrame(function () {
-                node.setAttribute('contenteditable', 'false');
-              });
-            }
-          } // Bugfix for block ReactNodeViews like table and extension
+          // 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;
             var pos;
 
             if (event.key === 'ArrowDown') {
@@ -151,11 +135,11 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
               }
             }
 
-            var _node = editorView.nodeDOM(pos);
+            var node = editorView.nodeDOM(pos);
 
-            if (_node instanceof HTMLDivElement && _node.className.includes('View-content-wrap') // class added by ReactNodeView
+            if (node instanceof HTMLDivElement && node.className.includes('View-content-wrap') // class added by ReactNodeView
             ) {
-              toggleContentEditable(_node, true);
+              toggleContentEditable(node, true);
             }
           }
 

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

@@ -23,27 +23,24 @@ var baseStatusPlugin = function baseStatusPlugin(options) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'status',
-        plugin: function plugin(_ref) {
-          var dispatch = _ref.dispatch,
-              portalProviderAPI = _ref.portalProviderAPI,
-              eventDispatcher = _ref.eventDispatcher;
-          return createStatusPlugin(dispatch, portalProviderAPI, eventDispatcher, options);
+        plugin: function plugin(pmPluginFactoryParams) {
+          return createStatusPlugin(pmPluginFactoryParams, options);
         }
       }, {
         name: 'statusKeymap',
         plugin: keymapPlugin
       }];
     },
-    contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView;
+    contentComponent: function contentComponent(_ref) {
+      var editorView = _ref.editorView;
       var domAtPos = editorView.domAtPos.bind(editorView);
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           statusState: pluginKey
         },
-        render: function render(_ref3) {
-          var _ref3$statusState = _ref3.statusState,
-              statusState = _ref3$statusState === void 0 ? {} : _ref3$statusState;
+        render: function render(_ref2) {
+          var _ref2$statusState = _ref2.statusState,
+              statusState = _ref2$statusState === void 0 ? {} : _ref2$statusState;
           var showStatusPickerAt = statusState.showStatusPickerAt;
 
           if (typeof showStatusPickerAt !== 'number') {
@@ -92,8 +89,8 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
   }
 
   plugin.pluginsOptions = {
-    quickInsert: function quickInsert(_ref4) {
-      var formatMessage = _ref4.formatMessage;
+    quickInsert: function quickInsert(_ref3) {
+      var formatMessage = _ref3.formatMessage;
       return [{
         id: 'status',
         title: formatMessage(messages.status),

package/dist/esm/plugins/status/nodeviews/status.js

@@ -1,133 +1,55 @@
-import _get from "@babel/runtime/helpers/get";
-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; } }
-
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Status } from '@atlaskit/status/element';
-import { ReactNodeView } from '../../../nodeviews';
 import { messages } from './messages';
 export var StyledStatus = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  opacity: ", ";\n"])), function (props) {
   return props.placeholderStyle ? 0.5 : 1;
 });
 
-var StatusContainerView = /*#__PURE__*/function (_React$Component) {
-  _inherits(StatusContainerView, _React$Component);
-
-  var _super = _createSuper(StatusContainerView);
-
-  function StatusContainerView(props) {
-    var _this;
-
-    _classCallCheck(this, StatusContainerView);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
-      if (event.nativeEvent.stopImmediatePropagation) {
-        event.nativeEvent.stopImmediatePropagation();
-      } // handling of popup is done in plugin.apply on selection change.
-
-    });
+var StatusContainerView = function StatusContainerView(props) {
+  var text = props.text,
+      color = props.color,
+      localId = props.localId,
+      style = props.style,
+      formatMessage = props.intl.formatMessage;
+  var statusText = text ? text : formatMessage(messages.placeholder);
 
-    return _this;
-  }
+  var handleClick = function handleClick(event) {
+    if (event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    } // handling of popup is done in plugin.apply on selection change.
 
-  _createClass(StatusContainerView, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          text = _this$props.text,
-          color = _this$props.color,
-          localId = _this$props.localId,
-          style = _this$props.style,
-          formatMessage = _this$props.intl.formatMessage;
-      var statusText = text ? text : formatMessage(messages.placeholder);
-      return /*#__PURE__*/React.createElement(StyledStatus, {
-        placeholderStyle: !text
-      }, /*#__PURE__*/React.createElement(Status, {
-        text: statusText,
-        color: color,
-        localId: localId,
-        style: style,
-        onClick: this.handleClick
-      }));
-    }
-  }]);
-
-  return StatusContainerView;
-}(React.Component);
+  };
 
-_defineProperty(StatusContainerView, "displayName", 'StatusContainerView');
+  return /*#__PURE__*/React.createElement(StyledStatus, {
+    placeholderStyle: !text
+  }, /*#__PURE__*/React.createElement(Status, {
+    text: statusText,
+    color: color,
+    localId: localId,
+    style: style,
+    onClick: handleClick
+  }));
+};
 
 export var IntlStatusContainerView = injectIntl(StatusContainerView);
-export var StatusNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(StatusNodeView, _ReactNodeView);
-
-  var _super2 = _createSuper(StatusNodeView);
-
-  function StatusNodeView() {
-    _classCallCheck(this, StatusNodeView);
-
-    return _super2.apply(this, arguments);
-  }
-
-  _createClass(StatusNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return _get(_getPrototypeOf(StatusNodeView.prototype), "createDomRef", this).call(this);
-    }
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var _node$attrs = node.attrs,
-          color = _node$attrs.color,
-          localId = _node$attrs.localId,
-          style = _node$attrs.style;
-      element.dataset.color = color;
-      element.dataset.localId = localId;
-      element.dataset.style = style;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var options = props.options;
-      var _this$node$attrs = this.node.attrs,
-          text = _this$node$attrs.text,
-          color = _this$node$attrs.color,
-          localId = _this$node$attrs.localId,
-          style = _this$node$attrs.style;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(IntlStatusContainerView, {
-        view: this.view,
-        text: text,
-        color: color,
-        style: style,
-        localId: localId
-      }), options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE);
-    }
-  }]);
-
-  return StatusNodeView;
-}(ReactNodeView);
-export default function statusNodeView(portalProviderAPI, eventDispatcher, options) {
-  return function (node, view, getPos) {
-    var hasIntlContext = true;
-    return new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      options: options
-    }, undefined, undefined, undefined, hasIntlContext).init();
-  };
-}
+export var StatusNodeView = function StatusNodeView(props) {
+  var view = props.view;
+  var _props$node$attrs = props.node.attrs,
+      text = _props$node$attrs.text,
+      color = _props$node$attrs.color,
+      localId = _props$node$attrs.localId,
+      style = _props$node$attrs.style;
+  return /*#__PURE__*/React.createElement(IntlStatusContainerView, {
+    view: view,
+    text: text,
+    color: color,
+    style: style,
+    localId: localId
+  });
+};

package/dist/esm/plugins/status/plugin.js

@@ -6,12 +6,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import statusNodeView from './nodeviews/status';
+import { getInlineNodeViewProducer } from '../../nodeviews/getInlineNodeViewProducer';
+import { StatusNodeView } from './nodeviews/status';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
 export { pluginKey, pluginKeyName } from './plugin-key';
 
-var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispatcher, options) {
+var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
   return new SafePlugin({
     state: {
       init: function init() {
@@ -26,7 +27,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
         if (meta) {
           var newState = _objectSpread(_objectSpread({}, state), meta);
 
-          dispatch(pluginKey, newState);
+          pmPluginFactoryParams.dispatch(pluginKey, newState);
           return newState;
         }
 
@@ -42,7 +43,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
           });
 
           if (_newState.showStatusPickerAt !== state.showStatusPickerAt) {
-            dispatch(pluginKey, _newState);
+            pmPluginFactoryParams.dispatch(pluginKey, _newState);
             return _newState;
           }
         }
@@ -63,7 +64,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
               showStatusPickerAt: _showStatusPickerAt
             });
 
-            dispatch(pluginKey, _newState2);
+            pmPluginFactoryParams.dispatch(pluginKey, _newState2);
             return _newState2;
           }
         }
@@ -112,7 +113,13 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
     key: pluginKey,
     props: {
       nodeViews: {
-        status: statusNodeView(portalProviderAPI, eventDispatcher, options)
+        status: getInlineNodeViewProducer({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: StatusNodeView,
+          extraComponentProps: {
+            options: options
+          }
+        })
       }
     }
   });

package/dist/esm/plugins/status/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var statusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default\n    // as it will make all inline nodes inline-block by default\n    display: inline-block;\n    user-select: all;\n\n    > span {\n      display: inline-block;\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);
+export var statusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    > span {\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);

package/dist/esm/plugins/table/commands/index.js

@@ -2,6 +2,6 @@ export { hoverColumns, hoverRows, hoverTable, hoverMergedCells, clearHoverSelect
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, setTableSize } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';

package/dist/esm/plugins/table/commands/insert.js

@@ -99,7 +99,7 @@ export var insertColumn = function insertColumn(column) {
 export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
   return function (state, dispatch) {
     // Don't clone the header row
-    var headerRowEnabled = checkIfHeaderRowEnabled(state);
+    var headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
     var clonePreviousRow = headerRowEnabled && row > 1 || !headerRowEnabled && row > 0; // When the table have header row
     // we should not add row on the position zero