@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/cjs/plugins/media/toolbar/index.js

@@ -29,8 +29,6 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _decoration = require("../../base/pm-plugins/decoration");
 
-var _annotation = require("./annotation");
-
 var _linking = require("./linking");
 
 var _MediaAndEmbedsToolbar = _interopRequireDefault(require("../../../ui/MediaAndEmbedsToolbar"));
@@ -212,7 +210,6 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
-      allowAnnotation = options.allowAnnotation,
       allowLinking = options.allowLinking,
       allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
       allowResizingInTables = options.allowResizingInTables,
@@ -222,16 +219,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   if (allowAdvancedToolBarOptions) {
     toolbarButtons = (0, _MediaAndEmbedsToolbar.default)(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
 
-    if (toolbarButtons.length) {
-      if (allowAnnotation) {
-        toolbarButtons.push({
-          type: 'custom',
-          fallback: [],
-          render: (0, _annotation.renderAnnotationButton)(pluginState, intl)
-        });
-      }
-    }
-
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -59,7 +59,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 ValidationWrapper = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), _colors.R400);
+var ValidationWrapper = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), _colors.R400);
 
 var ButtonWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
 

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/index.js

@@ -30,6 +30,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _prosemirrorUtils = require("prosemirror-utils");
 
 var _mediaClient = require("@atlaskit/media-client");
@@ -430,13 +432,15 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         offsetLeft: this.state.offsetLeft,
         wrappedLayout: this.wrappedLayout
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        layout: layout,
-        isResized: !!pctWidth,
-        containerWidth: containerWidth || origWidth,
-        innerRef: this.saveWrapper,
-        fullWidthMode: fullWidthMode
-      }, /*#__PURE__*/_react.default.createElement(_Resizer.default, (0, _extends2.default)({}, this.props, {
+      return (0, _react2.jsx)("div", {
+        ref: this.saveWrapper,
+        css: (0, _styled.wrapperStyle)({
+          layout: layout,
+          isResized: !!pctWidth,
+          containerWidth: containerWidth || origWidth,
+          fullWidthMode: fullWidthMode
+        })
+      }, (0, _react2.jsx)(_Resizer.default, (0, _extends2.default)({}, this.props, {
         ratio: ratio,
         width: initialWidth,
         selected: selected,
@@ -455,7 +459,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         // This workaround adds an empty div inside the resize handler to prevent the issue.
         ,
         handleComponentFunc: function handleComponentFunc() {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _react2.jsx)("div", {
             contentEditable: false
           });
         }

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -5,17 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
+exports.wrapperStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _ui = require("@atlaskit/editor-common/ui");
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), _ui.MediaSingleDimensionHelper);
+var wrapperStyle = function wrapperStyle(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), (0, _ui.MediaSingleDimensionHelper)(props));
+};
 
-exports.Wrapper = Wrapper;
-Wrapper.displayName = 'ResizerWrapper';
+exports.wrapperStyle = wrapperStyle;

package/dist/cjs/plugins/media/utils/media-single.js

@@ -5,7 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMediaSingle = exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = exports.calcMediaPxWidth = void 0;
+exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = exports.calcMediaPxWidth = void 0;
+exports.isCaptionNode = isCaptionNode;
+exports.isMediaSingle = void 0;
 exports.transformSliceForMedia = transformSliceForMedia;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -119,23 +121,27 @@ var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inp
 exports.insertMediaAsMediaSingle = insertMediaAsMediaSingle;
 
 var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert) {
+  var _state$selection$$fro;
+
   if (collection === undefined) {
     return false;
   }
 
   var state = view.state,
       dispatch = view.dispatch;
-  var grandParent = state.selection.$from.node(-1);
+  var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  var parentType = state.selection.$from.parent.type;
   var node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
-  var shouldSplit = grandParent && grandParent.type.validContent(_prosemirrorModel.Fragment.from(node));
   var fileExtension;
 
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
     fileExtension = extensionIdx >= 0 ? mediaState.fileName.substring(extensionIdx + 1) : undefined;
-  }
+  } // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+
 
-  if (shouldSplit) {
+  if ((0, _insert.shouldSplitSelectedNodeOnNodeInsertion)(parentType, grandParentType, node)) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension: fileExtension,
       inputMethod: inputMethod
@@ -288,4 +294,15 @@ exports.calcMediaPxWidth = calcMediaPxWidth;
 
 var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
   return pctWidth && origWidth && origHeight && Math.ceil((0, _ui.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
-};
+};
+
+function isCaptionNode(editorView) {
+  var $from = editorView.state.selection.$from;
+  var immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));
+
+  if (immediateWrapperParentNode && immediateWrapperParentNode.type.name === 'caption') {
+    return true;
+  }
+
+  return false;
+}

package/dist/cjs/plugins/mentions/styles.js

@@ -9,7 +9,7 @@ exports.mentionsStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _mention = require("@atlaskit/editor-common/mention");
 
@@ -19,5 +19,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var mentionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
+var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
 exports.mentionsStyles = mentionsStyles;

package/dist/cjs/plugins/panel/styles.js

@@ -9,7 +9,7 @@ exports.panelStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -17,5 +17,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var panelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.PanelSharedCssClassName.content, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.panelSharedStyles, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+var panelStyles = function panelStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.PanelSharedCssClassName.content, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, (0, _styles.panelSharedStyles)(props), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+};
+
 exports.panelStyles = panelStyles;

package/dist/cjs/plugins/paste/handlers.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.flattenNestedListInSlice = flattenNestedListInSlice;
 exports.handleCodeBlock = handleCodeBlock;
-exports.handleExpand = handleExpand;
+exports.handleExpandPasteInTable = handleExpandPasteInTable;
 exports.handleMacroAutoConvert = handleMacroAutoConvert;
 exports.handleMarkdown = handleMarkdown;
 exports.handleMediaSingle = handleMediaSingle;
@@ -105,8 +105,10 @@ function handlePasteIntoTaskAndDecision(slice) {
         taskList = _schema$nodes.taskList,
         taskItem = _schema$nodes.taskItem,
         text = _schema$nodes.text;
+    var isDecisionOrTaskNodeSelection = state.selection instanceof _prosemirrorState.NodeSelection && ['decisionList', 'decisionItem', 'taskList', 'taskItem'].includes(state.selection.node.type.name);
+    var hasParentDecisionOrTaskItem = (0, _prosemirrorUtils.hasParentNodeOfType)([decisionItem, taskItem])(state.selection);
 
-    if (!decisionItem || !decisionList || !taskList || !taskItem || !(0, _prosemirrorUtils.hasParentNodeOfType)([decisionItem, taskItem])(state.selection)) {
+    if (!decisionItem || !decisionList || !taskList || !taskItem || !hasParentDecisionOrTaskItem && !isDecisionOrTaskNodeSelection) {
       return false;
     }
 
@@ -122,7 +124,15 @@ function handlePasteIntoTaskAndDecision(slice) {
 
     var transformedSlice = _utils.compose.apply(null, filters)(slice);
 
-    var tr = (0, _prosemirrorHistory.closeHistory)(state.tr).replaceSelection(transformedSlice).scrollIntoView();
+    var tr = (0, _prosemirrorHistory.closeHistory)(state.tr);
+    var transformedSliceIsValidNode = transformedSlice.content.firstChild.type.inlineContent || ['decisionList', 'decisionItem', 'taskList', 'taskItem'].includes(transformedSlice.content.firstChild.type.name);
+
+    if (transformedSliceIsValidNode || isDecisionOrTaskNodeSelection) {
+      tr.replaceSelection(transformedSlice).scrollIntoView();
+    } else {
+      (0, _prosemirrorUtils.safeInsert)(transformedSlice.content)(tr).scrollIntoView();
+    }
+
     (0, _doc.queueCardsFromChangedTr)(state, tr, _analytics.INPUT_METHOD.CLIPBOARD);
 
     if (dispatch) {
@@ -448,9 +458,13 @@ function handleMediaSingle(inputMethod) {
   };
 }
 
-function handleExpand(slice) {
+function handleExpandPasteInTable(slice) {
   return function (state, dispatch) {
-    if (!(0, _utils.insideTable)(state)) {
+    var _slice$content$firstC;
+
+    // Do not handle expand if it's not being pasted into a table
+    // OR if it's nested within another node when being pasted into a table
+    if (!(0, _utils.insideTable)(state) || ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) !== 'expand') {
       return false;
     }
 

package/dist/cjs/plugins/paste/pm-plugins/analytics.js

@@ -295,7 +295,7 @@ var handleRichTextWithAnalytics = function handleRichTextWithAnalytics(view, eve
 exports.handleRichTextWithAnalytics = handleRichTextWithAnalytics;
 
 var handleExpandWithAnalytics = function handleExpandWithAnalytics(view, event, slice) {
-  return (0, _utils.pipe)(_handlers.handleExpand, pasteCommandWithAnalytics(view, event, slice, {
+  return (0, _utils.pipe)(_handlers.handleExpandPasteInTable, pasteCommandWithAnalytics(view, event, slice, {
     type: _analytics.PasteTypes.richText
   }))(slice);
 };

package/dist/cjs/plugins/placeholder/styles.js

@@ -9,7 +9,7 @@ exports.placeholderStyles = exports.placeHolderClassName = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -17,5 +17,5 @@ var _templateObject;
 
 var placeHolderClassName = 'placeholder-decoration';
 exports.placeHolderClassName = placeHolderClassName;
-var placeholderStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, _colors.N200);
+var placeholderStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, _colors.N200);
 exports.placeholderStyles = placeholderStyles;

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

@@ -36,6 +36,24 @@ var _analytics = require("../analytics");
 
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 
+var _selectionUtils = require("./selection-utils");
+
+var _api = require("../type-ahead/api");
+
+var getOpenTypeAhead = function getOpenTypeAhead(view, content) {
+  var typeAheadAPI = (0, _api.createInternalTypeAheadTools)(view);
+  var typeAheadHandler = typeAheadAPI.findTypeAheadHandler(content);
+
+  if (!typeAheadHandler || !typeAheadHandler.id) {
+    return null;
+  }
+
+  return typeAheadAPI.openTypeAheadHandler({
+    triggerHandler: typeAheadHandler,
+    inputMethod: _analytics.INPUT_METHOD.KEYBOARD
+  });
+};
+
 function createPlugin(dispatch, options) {
   var allowInserting = !!options.allowInserting;
   return new _safePlugin.SafePlugin({
@@ -106,6 +124,32 @@ 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' && (0, _selectionUtils.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.PlaceholderTextNodeView(node, view, getPos);
@@ -207,7 +251,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.pluginKey, {
             showInsertPanelAt: tr.selection.anchor
           });

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

@@ -11,46 +11,90 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _prosemirrorModel = require("prosemirror-model");
-
 var _prosemirrorState = require("prosemirror-state");
 
+var _utils = require("@atlaskit/editor-common/utils");
+
+var serializePlaceholderNode = function serializePlaceholderNode(node) {
+  var element = document.createElement('span');
+  element.classList.add('pm-placeholder');
+
+  if (_utils.browser.gecko) {
+    element.setAttribute('contenteditable', 'true');
+  }
+
+  element.innerText = _utils.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 (_utils.browser.safari) {
+    element.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
+  } else {
+    element.appendChild(document.createElement('wbr'));
+  }
+
+  return element;
+};
+
 var PlaceholderTextNodeView = /*#__PURE__*/function () {
   function PlaceholderTextNodeView(node, view, getPos) {
     (0, _classCallCheck2.default)(this, PlaceholderTextNodeView);
     this.node = node;
     this.view = view;
     this.getPos = getPos;
-
-    var serializer = _prosemirrorModel.DOMSerializer.fromSchema(this.view.state.schema);
-
-    this.dom = serializer.serializeNode(this.node);
+    this.dom = serializePlaceholderNode(this.node);
+    this.getPos = getPos;
   }
 
   (0, _createClass2.default)(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(_prosemirrorState.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(_prosemirrorState.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(_prosemirrorState.Selection.near(tr.doc.resolve(placeholderEndPosition)));
         view.dispatch(tr);
+        return true;
       }
 
-      return record.type !== 'selection';
+      return true;
     }
   }]);
   return PlaceholderTextNodeView;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectionAtPlaceholder = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var isSelectionAtPlaceholder = function isSelectionAtPlaceholder(selection) {
+  if (!(selection instanceof _prosemirrorState.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';
+};
+
+exports.isSelectionAtPlaceholder = isSelectionAtPlaceholder;

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

@@ -9,11 +9,13 @@ exports.placeholderTextStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
 var _templateObject;
 
-var placeholderTextStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n  }\n"])), _colors.N300);
+var placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N300, _colors.N300, _colors.N300, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), _colors.N300);
 exports.placeholderTextStyles = placeholderTextStyles;

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

@@ -24,6 +24,7 @@ var createHorizontalRule = function createHorizontalRule(state, start, end, inpu
   }
 
   var tr = null;
+  var rule = state.schema.nodes.rule;
 
   var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(state),
       newInsertionBehaviour = _getFeatureFlags.newInsertionBehaviour;
@@ -35,7 +36,7 @@ var createHorizontalRule = function createHorizontalRule(state, start, end, inpu
      * without considering the extra text after the `/` command.
      **/
     tr = state.tr.replaceWith(start, end, _prosemirrorModel.Fragment.empty);
-    tr = (0, _insert.safeInsert)(state.schema.nodes.rule.createChecked(), tr.selection.from)(tr);
+    tr = (0, _insert.safeInsert)(rule.createChecked(), tr.selection.from)(tr);
   }
 
   if (!tr) {

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

@@ -9,7 +9,7 @@ exports.ruleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -17,5 +17,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var ruleStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.ruleSharedStyles, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderColor);
+var ruleStyles = function ruleStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ruleSharedStyles)(props), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderColor);
+};
+
 exports.ruleStyles = ruleStyles;

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

@@ -9,16 +9,16 @@ exports.hideCaretModifier = exports.gapCursorStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-var gapCursorBlink = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
+var gapCursorBlink = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
 var hideCaretModifier = 'ProseMirror-hide-gapcursor';
 exports.hideCaretModifier = hideCaretModifier;
 var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-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");
+var gapCursorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);
 exports.gapCursorStyles = gapCursorStyles;