@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { N100, N30, R400, N80 } from '@atlaskit/theme/colors';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
@@ -19,7 +21,7 @@ import { ErrorMessage } from '@atlaskit/editor-common/ui';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-const SupportText = styled.p`
+const supportText = css`
   color: ${N100};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: 12px 40px;
@@ -27,34 +29,33 @@ const SupportText = styled.p`
   border-top: 1px solid ${N30};
   margin: 0;
 `;
-const Container = styled.div`
+const container = css`
   width: ${CONTAINER_WIDTH_IN_PX}px;
   display: flex;
   flex-direction: column;
   overflow: auto;
   line-height: 2;
 `;
-const InputWrapper = styled.section`
+const inputWrapper = css`
   display: flex;
   line-height: 0;
   padding: 5px 0;
   align-items: center;
 `;
-const ValidationWrapper = styled.section`
+const validationWrapper = css`
   display: flex;
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 12px 0 40px;
   border-top: 1px solid ${R400};
   align-items: start;
-  display: flex;
   flex-direction: column;
 `;
-const ButtonWrapper = styled.div`
+const buttonWrapper = css`
   display: flex;
   padding: 4px 8px;
 `;
-const ClearText = styled.span`
+const clearText = css`
   color: ${N80};
 `;
 export class AltTextEditComponent extends React.Component {
@@ -167,24 +168,30 @@ export class AltTextEditComponent extends React.Component {
       showClearTextButton
     } = this.state;
     const backButtonMessage = formatMessage(messages.back);
-    const backButtonMessageComponent = /*#__PURE__*/React.createElement(ToolTipContent, {
+    const backButtonMessageComponent = jsx(ToolTipContent, {
       description: backButtonMessage,
       keymap: keymaps.escape,
       shortcutOverride: "Esc"
     });
     const errorsList = (this.state.validationErrors || []).map(function (error, index) {
-      return /*#__PURE__*/React.createElement(ErrorMessage, {
+      return jsx(ErrorMessage, {
         key: index
       }, error);
     });
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    return jsx("div", {
+      css: container
+    }, jsx("section", {
+      css: inputWrapper
+    }, jsx("div", {
+      css: buttonWrapper
+    }, jsx(Button, {
       title: formatMessage(messages.back),
-      icon: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+      icon: jsx(ChevronLeftLargeIcon, {
         label: formatMessage(messages.back)
       }),
       tooltipContent: backButtonMessageComponent,
       onClick: this.closeMediaAltTextMenu
-    })), /*#__PURE__*/React.createElement(PanelTextInput, {
+    })), jsx(PanelTextInput, {
       testId: "alt-text-input",
       ariaLabel: formatMessage(messages.placeholder),
       describedById: "support-text",
@@ -196,15 +203,22 @@ export class AltTextEditComponent extends React.Component {
       onSubmit: this.closeMediaAltTextMenu,
       maxLength: MAX_ALT_TEXT_LENGTH,
       autoFocus: true
-    }), showClearTextButton && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    }), showClearTextButton && jsx("div", {
+      css: buttonWrapper
+    }, jsx(Button, {
       testId: "alt-text-clear-button",
       title: formatMessage(messages.clear),
-      icon: /*#__PURE__*/React.createElement(ClearText, null, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      icon: jsx("span", {
+        css: clearText
+      }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clear)
       })),
       tooltipContent: formatMessage(messages.clear),
       onClick: this.handleClearText
-    }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, {
+    }))), !!errorsList.length && jsx("section", {
+      css: validationWrapper
+    }, errorsList), jsx("p", {
+      css: supportText,
       id: "support-text"
     }, formatMessage(messages.supportText)));
   }

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

@@ -174,8 +174,6 @@ export class MediaPluginStateImplementation {
       return type === mediaSingle;
     });
 
-    _defineProperty(this, "hasUserAuthProvider", () => !!this.uploadMediaClientConfig && !!this.uploadMediaClientConfig.userAuthProvider);
-
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
       var _this$mediaOptions2;
 
@@ -257,11 +255,7 @@ export class MediaPluginStateImplementation {
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", () => {
-      if (!this.mediaOptions || this.mediaOptions && this.mediaOptions.useMediaPickerPopup === undefined) {
-        return this.hasUserAuthProvider();
-      }
-
-      return !!this.mediaOptions.useMediaPickerPopup;
+      return false;
     });
 
     _defineProperty(this, "showMediaPicker", () => {

package/dist/es2019/plugins/media/pm-plugins/media-editor-plugin-factory.js

@@ -1,50 +1,2 @@
 import { PluginKey } from 'prosemirror-state';
-import { pluginFactory } from '../../../utils/plugin-state-factory';
-export const pluginKey = new PluginKey('mediaEditorPlugin');
-export const reducer = (state, action) => {
-  switch (action.type) {
-    case 'open':
-      return { ...state,
-        editor: {
-          identifier: action.identifier,
-          pos: action.pos
-        }
-      };
-
-    case 'close':
-      return { ...state,
-        editor: undefined
-      };
-
-    case 'upload':
-      return { ...state,
-        editor: undefined
-      };
-
-    case 'setMediaClientConfig':
-      return { ...state,
-        mediaClientConfig: action.mediaClientConfig
-      };
-
-    default:
-      return state;
-  }
-};
-export const {
-  createPluginState,
-  createCommand,
-  getPluginState
-} = pluginFactory(pluginKey, reducer, {
-  mapping: (tr, state) => {
-    if (!state.editor) {
-      return state;
-    } // remap the position of the editing media inside the state
-
-
-    return { ...state,
-      editor: { ...state.editor,
-        pos: tr.mapping.map(state.editor.pos)
-      }
-    };
-  }
-});
+export const pluginKey = new PluginKey('mediaEditorPlugin');

package/dist/es2019/plugins/media/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
@@ -118,8 +118,7 @@ export const mediaStyles = css`
     background-color: ${akEditorDeleteBackground};
     box-shadow: 0px 0px 0px ${akEditorSelectedBorderBoldSize}px
       ${akEditorDeleteBorder};
-    transition: background-color 0s;
-    transition: box-shadow 0s;
+    transition: background-color 0s, box-shadow 0s;
   }
   .mediaGroupView-content-wrap.danger {
     /* Media inline */

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

@@ -7,7 +7,6 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import commonMessages from '../../../messages';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { hoverDecoration } from '../../base/pm-plugins/decoration';
-import { renderAnnotationButton } from './annotation';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import buildLayoutButtons from '../../../ui/MediaAndEmbedsToolbar';
 import { getMediaLinkingState } from '../pm-plugins/linking';
@@ -179,7 +178,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   } = state.schema.nodes;
   const {
     allowResizing,
-    allowAnnotation,
     allowLinking,
     allowAdvancedToolBarOptions,
     allowResizingInTables,
@@ -190,16 +188,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   if (allowAdvancedToolBarOptions) {
     toolbarButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
 
-    if (toolbarButtons.length) {
-      if (allowAnnotation) {
-        toolbarButtons.push({
-          type: 'custom',
-          fallback: [],
-          render: renderAnnotationButton(pluginState, intl)
-        });
-      }
-    }
-
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'

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

@@ -16,7 +16,6 @@ import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
 const ValidationWrapper = styled.section`
-  display: flex;
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;

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

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Wrapper } from './styled';
+import { wrapperStyle } from './styled';
 import Resizer from '../../../../ui/Resizer';
 import { snapTo, handleSides, imageAlignmentMap } from '../../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../utils/media-single';
@@ -323,13 +326,15 @@ export default class ResizableMediaSingle extends React.Component {
       offsetLeft: this.state.offsetLeft,
       wrappedLayout: this.wrappedLayout
     };
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      layout: layout,
-      isResized: !!pctWidth,
-      containerWidth: containerWidth || origWidth,
-      innerRef: this.saveWrapper,
-      fullWidthMode: fullWidthMode
-    }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+    return jsx("div", {
+      ref: this.saveWrapper,
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || origWidth,
+        fullWidthMode
+      })
+    }, jsx(Resizer, _extends({}, this.props, {
       ratio: ratio,
       width: initialWidth,
       selected: selected,
@@ -347,7 +352,7 @@ export default class ResizableMediaSingle extends React.Component {
       // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
       // This workaround adds an empty div inside the resize handler to prevent the issue.
       ,
-      handleComponentFunc: () => /*#__PURE__*/React.createElement("div", {
+      handleComponentFunc: () => jsx("div", {
         contentEditable: false
       })
     }), children));

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

@@ -1,10 +1,9 @@
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export const Wrapper = styled.div`
+export const wrapperStyle = props => css`
   & > div {
-    ${MediaSingleDimensionHelper};
+    ${MediaSingleDimensionHelper(props)};
     position: relative;
     clear: both;
   }
-`;
-Wrapper.displayName = 'ResizerWrapper';
+`;

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

@@ -6,7 +6,7 @@ import { checkNodeDown, isEmptyParagraph } from '../../../utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-import { safeInsert } from '../../../utils/insert';
+import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
@@ -90,6 +90,8 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod) => {
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
 export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert) => {
+  var _state$selection$$fro;
+
   if (collection === undefined) {
     return false;
   }
@@ -98,17 +100,19 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     state,
     dispatch
   } = view;
-  const grandParent = state.selection.$from.node(-1);
+  const grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  const parentType = state.selection.$from.parent.type;
   const node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
-  const shouldSplit = grandParent && grandParent.type.validContent(Fragment.from(node));
   let fileExtension;
 
   if (mediaState.fileName) {
     const 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 (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, node)) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension,
       inputMethod
@@ -252,4 +256,17 @@ export const calcMediaPxWidth = opts => {
   return origWidth;
 };
 
-const calcPctWidth = (containerWidth, pctWidth, origWidth, origHeight) => pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+const calcPctWidth = (containerWidth, pctWidth, origWidth, origHeight) => pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+
+export function isCaptionNode(editorView) {
+  const {
+    $from
+  } = editorView.state.selection;
+  const immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));
+
+  if (immediateWrapperParentNode && immediateWrapperParentNode.type.name === 'caption') {
+    return true;
+  }
+
+  return false;
+}

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';

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

@@ -1,7 +1,7 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export const panelStyles = css`
+export const panelStyles = props => css`
   .ProseMirror {
     .${PanelSharedCssClassName.prefix} {
       cursor: pointer;
@@ -33,7 +33,7 @@ export const panelStyles = css`
       }
     }
 
-    ${panelSharedStyles};
+    ${panelSharedStyles(props)};
   }
 
   .${PanelSharedCssClassName.prefix}.${akEditorSelectedNodeClassName}:not(.danger) {

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

@@ -1,6 +1,6 @@
 import { closeHistory } from 'prosemirror-history';
 import { Fragment, Node as PMNode, Slice } from 'prosemirror-model';
-import { TextSelection } from 'prosemirror-state';
+import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, safeInsert } from 'prosemirror-utils';
 import { compose, insideTable, isParagraph, isText, isLinkMark, processRawValue } from '../../utils';
 import { mapSlice } from '../../utils/slice';
@@ -54,8 +54,10 @@ export function handlePasteIntoTaskAndDecision(slice) {
         text
       }
     } = schema;
+    const isDecisionOrTaskNodeSelection = state.selection instanceof NodeSelection && ['decisionList', 'decisionItem', 'taskList', 'taskItem'].includes(state.selection.node.type.name);
+    const hasParentDecisionOrTaskItem = hasParentNodeOfType([decisionItem, taskItem])(state.selection);
 
-    if (!decisionItem || !decisionList || !taskList || !taskItem || !hasParentNodeOfType([decisionItem, taskItem])(state.selection)) {
+    if (!decisionItem || !decisionList || !taskList || !taskItem || !hasParentDecisionOrTaskItem && !isDecisionOrTaskNodeSelection) {
       return false;
     }
 
@@ -69,7 +71,15 @@ export function handlePasteIntoTaskAndDecision(slice) {
     }
 
     const transformedSlice = compose.apply(null, filters)(slice);
-    const tr = closeHistory(state.tr).replaceSelection(transformedSlice).scrollIntoView();
+    const tr = closeHistory(state.tr);
+    const transformedSliceIsValidNode = transformedSlice.content.firstChild.type.inlineContent || ['decisionList', 'decisionItem', 'taskList', 'taskItem'].includes(transformedSlice.content.firstChild.type.name);
+
+    if (transformedSliceIsValidNode || isDecisionOrTaskNodeSelection) {
+      tr.replaceSelection(transformedSlice).scrollIntoView();
+    } else {
+      safeInsert(transformedSlice.content)(tr).scrollIntoView();
+    }
+
     queueCardsFromChangedTr(state, tr, INPUT_METHOD.CLIPBOARD);
 
     if (dispatch) {
@@ -371,9 +381,13 @@ export function handleMediaSingle(inputMethod) {
     };
   };
 }
-export function handleExpand(slice) {
+export function handleExpandPasteInTable(slice) {
   return (state, dispatch) => {
-    if (!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 (!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/es2019/plugins/paste/pm-plugins/analytics.js

@@ -1,6 +1,6 @@
 import { ACTION, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, PasteTypes, PasteContents, withAnalytics } from '../../analytics';
 import { getPasteSource } from '../util';
-import { handlePasteAsPlainText, handlePasteIntoTaskAndDecision, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpand, handleSelectedTable, handlePasteLinkOnSelectedText } from '../handlers';
+import { handlePasteAsPlainText, handlePasteIntoTaskAndDecision, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText } from '../handlers';
 import { pipe } from '../../../utils';
 import { findParentNode } from 'prosemirror-utils';
 import { mapSlice } from '../../../utils/slice';
@@ -239,7 +239,7 @@ export const handleMarkdownWithAnalytics = (view, event, slice) => pipe(handleMa
 export const handleRichTextWithAnalytics = (view, event, slice) => pipe(handleRichText, pasteCommandWithAnalytics(view, event, slice, {
   type: PasteTypes.richText
 }))(slice);
-export const handleExpandWithAnalytics = (view, event, slice) => pipe(handleExpand, pasteCommandWithAnalytics(view, event, slice, {
+export const handleExpandWithAnalytics = (view, event, slice) => pipe(handleExpandPasteInTable, pasteCommandWithAnalytics(view, event, slice, {
   type: PasteTypes.richText
 }))(slice);
 export const handleSelectedTableWithAnalytics = (view, event, slice) => pipe(handleSelectedTable, pasteCommandWithAnalytics(view, event, slice, {

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 export const placeHolderClassName = 'placeholder-decoration';
 export const placeholderStyles = css`

package/dist/es2019/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';
+
+const getOpenTypeAhead = (view, content) => {
+  const typeAheadAPI = createInternalTypeAheadTools(view);
+  const typeAheadHandler = typeAheadAPI.findTypeAheadHandler(content);
+
+  if (!typeAheadHandler || !typeAheadHandler.id) {
+    return null;
+  }
+
+  return typeAheadAPI.openTypeAheadHandler({
+    triggerHandler: typeAheadHandler,
+    inputMethod: INPUT_METHOD.KEYBOARD
+  });
+};
+
 export function createPlugin(dispatch, options) {
   const allowInserting = !!options.allowInserting;
   return new SafePlugin({
@@ -80,6 +97,34 @@ export function createPlugin(dispatch, options) {
     },
 
     props: {
+      handleDOMEvents: {
+        beforeinput: (view, event) => {
+          const {
+            state
+          } = view;
+
+          if (event instanceof InputEvent && !event.isComposing && event.inputType === 'insertText' && isSelectionAtPlaceholder(view.state.selection)) {
+            event.stopPropagation();
+            event.preventDefault();
+            const startNodePosition = state.selection.from;
+            const content = event.data || '';
+            const tr = view.state.tr;
+            tr.delete(startNodePosition, startNodePosition + 1);
+            const openTypeAhead = getOpenTypeAhead(view, content);
+
+            if (openTypeAhead) {
+              openTypeAhead(tr);
+            } else {
+              tr.insertText(content);
+            }
+
+            view.dispatch(tr);
+            return true;
+          }
+
+          return false;
+        }
+      },
       nodeViews: {
         placeholder: (node, view, getPos) => new PlaceholderTextNodeView(node, view, getPos)
       }
@@ -168,7 +213,7 @@ const decorateWithPluginOptions = (plugin, options) => {
       }),
 
       action(insert, state) {
-        const tr = insert(state.schema.nodes.placeholder.createChecked());
+        const tr = state.tr;
         tr.setMeta(pluginKey, {
           showInsertPanelAt: tr.selection.anchor
         });

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

@@ -1,38 +1,84 @@
-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';
+
+const serializePlaceholderNode = node => {
+  const element = document.createElement('span');
+  element.classList.add('pm-placeholder');
+
+  if (browser.gecko) {
+    element.setAttribute('contenteditable', 'true');
+  }
+
+  element.innerText = ZERO_WIDTH_SPACE;
+  const 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 class PlaceholderTextNodeView {
   constructor(node, view, getPos) {
     this.node = node;
     this.view = view;
     this.getPos = getPos;
-    const serializer = DOMSerializer.fromSchema(this.view.state.schema);
-    this.dom = serializer.serializeNode(this.node);
+    this.dom = serializePlaceholderNode(this.node);
+    this.getPos = getPos;
+  }
+
+  stopEvent(e) {
+    if (e.type === 'mousedown' && typeof this.getPos === 'function') {
+      e.preventDefault();
+      const {
+        view
+      } = this;
+      const startNodePosition = this.getPos();
+      const tr = view.state.tr;
+      tr.setSelection(Selection.near(tr.doc.resolve(startNodePosition)));
+      view.dispatch(tr);
+      return true;
+    }
+
+    return false;
   }
 
   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;
+    }
+
     const {
       view,
-      dom,
       node
     } = this;
-    const content = dom.textContent || '';
-    const text = node.attrs.text;
-
-    if (record.type === 'characterData' && content !== text && content.includes(text) && typeof this.getPos === 'function') {
-      const start = this.getPos();
-      const end = start + this.node.nodeSize;
-      const stripped = content.replace(text, '');
-      let tr = view.state.tr.replaceRangeWith(start, end, view.state.schema.text(stripped));
-      tr = tr.setSelection(TextSelection.create(tr.doc, end, end));
+    const placeholderStartPosition = this.getPos();
+    const placeholderEndPosition = this.getPos() + node.nodeSize;
+    const 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;
+    }
+
+    const isSelectionAtPlaceholder = selection.from === placeholderStartPosition;
+    const isSelectionAfterlaceholder = selection.from > placeholderEndPosition;
+
+    if (isSelectionAtPlaceholder || isSelectionAfterlaceholder) {
+      const tr = view.state.tr;
+      tr.setSelection(Selection.near(tr.doc.resolve(placeholderEndPosition)));
       view.dispatch(tr);
+      return true;
     }
 
-    return record.type !== 'selection';
+    return true;
   }
 
 }