@atlaskit/editor-core 159.0.1 → 162.0.0

package/dist/es2019/plugins/list/actions/wrap-and-join-lists.js

@@ -0,0 +1,163 @@
+import { Fragment, Slice, NodeRange } from 'prosemirror-model';
+import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-transform';
+/**
+ * Wraps the selection in a list with the given type. If this results in
+ * two adjacent lists of the same type, those will be joined together.
+ */
+
+export function wrapInListAndJoin(nodeType, tr) {
+  wrapInList(nodeType)(tr);
+  autoJoin(tr, (before, after) => before.type === after.type && before.type === nodeType);
+}
+/**
+ * Wraps the selection in a list with the given type and attributes.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L64-L89
+ */
+
+export function wrapInList(listType, attrs) {
+  return function (tr) {
+    const {
+      $from,
+      $to
+    } = tr.selection;
+    let range = $from.blockRange($to);
+    let doJoin = false;
+    let outerRange = range;
+
+    if (!range) {
+      return false;
+    } // This is at the top of an existing list item
+
+
+    if (range.depth >= 2 && // @ts-ignore - missing type for compatibleContent
+    $from.node(range.depth - 1).type.compatibleContent(listType) && range.startIndex === 0) {
+      // Don't do anything if this is the top of the list
+      if ($from.index(range.depth - 1) === 0) {
+        return false;
+      }
+
+      let $insert = tr.doc.resolve(range.start - 2);
+      outerRange = new NodeRange($insert, $insert, range.depth);
+
+      if (range.endIndex < range.parent.childCount) {
+        range = new NodeRange($from, tr.doc.resolve($to.end(range.depth)), range.depth);
+      }
+
+      doJoin = true;
+    }
+
+    let wrap = findWrapping(outerRange, listType, attrs, range);
+
+    if (!wrap) {
+      return false;
+    }
+
+    tr = doWrapInList(tr, range, wrap, doJoin, listType);
+    return true;
+  };
+}
+/**
+ * Internal function used by wrapInList
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L91-L112
+ */
+
+function doWrapInList(tr, range, wrappers, joinBefore, listType) {
+  let content = Fragment.empty;
+
+  for (let i = wrappers.length - 1; i >= 0; i--) {
+    content = Fragment.from(wrappers[i].type.create(wrappers[i].attrs, content));
+  }
+
+  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
+  let found = 0;
+
+  for (let i = 0; i < wrappers.length; i++) {
+    if (wrappers[i].type === listType) {
+      found = i + 1;
+    }
+  }
+
+  const splitDepth = wrappers.length - found;
+  let splitPos = range.start + wrappers.length - (joinBefore ? 2 : 0);
+  const parent = range.parent;
+
+  for (let i = range.startIndex, e = range.endIndex, first = true; i < e; i++, first = false) {
+    if (!first && canSplit(tr.doc, splitPos, splitDepth)) {
+      tr.split(splitPos, splitDepth);
+      splitPos += 2 * splitDepth;
+    }
+
+    splitPos += parent.child(i).nodeSize;
+  }
+
+  return tr;
+}
+/**
+ * Checks whether two adjacent nodes can be joined. If so, the document
+ * will be updated to join those nodes. If not, the original transaction
+ * remains untouched.
+ *
+ * Nodes are considered joinable if the `isJoinable` predicate returns true.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+
+export function autoJoin(tr, isJoinable) {
+  if (!tr.isGeneric) {
+    return;
+  }
+
+  const ranges = [];
+
+  for (let i = 0; i < tr.mapping.maps.length; i++) {
+    const map = tr.mapping.maps[i];
+
+    for (let j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach((_s, _e, from, to) => ranges.push(from, to));
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  const joinable = [];
+
+  for (let i = 0; i < ranges.length; i += 2) {
+    const from = ranges[i];
+    const to = ranges[i + 1];
+    const $from = tr.doc.resolve(from);
+    const depth = $from.sharedDepth(to);
+    const parent = $from.node(depth);
+
+    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      const after = parent.maybeChild(index);
+
+      if (!after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        const before = parent.child(index - 1);
+
+        if (before.type === after.type && isJoinable(before, after)) {
+          joinable.push(pos);
+        }
+      }
+
+      pos += after.nodeSize;
+    }
+  } // Join the joinable points
+
+
+  joinable.sort((a, b) => a - b);
+
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(tr.doc, joinable[i])) {
+      tr.join(joinable[i]);
+    }
+  }
+}

package/dist/es2019/plugins/list/commands/index.js

@@ -1,7 +1,5 @@
 import { Fragment, Slice } from 'prosemirror-model';
-import { ReplaceAroundStep } from 'prosemirror-transform';
 import * as baseCommand from 'prosemirror-commands';
-import * as baseListCommand from 'prosemirror-schema-list';
 import { hasParentNodeOfType, findPositionOfNodeBefore } from 'prosemirror-utils';
 import { hasVisibleContent, isNodeEmpty } from '../../../utils/document';
 import { findCutBefore, isEmptySelectionAtStart, isFirstChildOfParent, filter } from '../../../utils/commands';
@@ -14,8 +12,10 @@ import { getCommonListAnalyticsAttributes } from '../utils/analytics';
 import { listBackspace } from './listBackspace';
 import { joinListItemForward } from './join-list-item-forward';
 import { convertListType } from '../actions/conversions';
+import { wrapInListAndJoin } from '../actions/wrap-and-join-lists';
 import { outdentList } from './outdent-list';
 import { indentList } from './indent-list';
+import { moveTargetIntoList } from '../utils/replace-content';
 export { outdentList, indentList };
 export const enterKeyCommand = (state, dispatch) => {
   const {
@@ -91,8 +91,8 @@ function untoggleSelectedList(tr) {
 
 export function toggleList(inputMethod, listType) {
   return function (state, dispatch) {
-    let customTr = state.tr;
-    const listInsideSelection = selectionContainsList(customTr);
+    let tr = state.tr;
+    const listInsideSelection = selectionContainsList(tr);
     const listNodeType = state.schema.nodes[listType];
     const actionSubjectId = listType === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
 
@@ -126,10 +126,10 @@ export function toggleList(inputMethod, listType) {
       }
 
       convertListType({
-        tr: customTr,
+        tr,
         nextListNodeType: listNodeType
       });
-      addAnalytics(state, customTr, {
+      addAnalytics(state, tr, {
         action: ACTION.CONVERTED,
         actionSubject: ACTION_SUBJECT.LIST,
         actionSubjectId,
@@ -140,17 +140,11 @@ export function toggleList(inputMethod, listType) {
         }
       });
     } else {
-      const replaceCurrentTr = tr => {
-        customTr = tr;
-      }; // NOTE: replaceCurrentTr is supplied here instead of the usual dispatch function
-      // to 'mutate' the transaction without actually dispatching (as it is more performant
-      // if we only dispatch once at the end). This means customTr should not be modified
-      // until after wrapInList, since any changes made to it will be discarded when it
-      // gets replaced with the transaction generated by wrapInList.
-
-
-      wrapInList(listNodeType)(state, replaceCurrentTr);
-      addAnalytics(state, customTr, {
+      // Need to have this before wrapInList so the wrapping is done with valid content
+      // For example, if trying to convert centre or right aligned paragraphs to lists
+      sanitiseMarksInSelection(tr, listNodeType);
+      wrapInListAndJoin(listNodeType, tr);
+      addAnalytics(state, tr, {
         action: ACTION.INSERTED,
         actionSubject: ACTION_SUBJECT.LIST,
         actionSubjectId,
@@ -159,18 +153,16 @@ export function toggleList(inputMethod, listType) {
           inputMethod
         }
       });
-    } // if document wasn't changed, that means setNodeMarkup step didn't work, so
-    // return false from the command to indicate that the editing action failed
+    } // If document wasn't changed, return false from the command to indicate that the
+    // editing action failed
 
 
-    if (!customTr.docChanged) {
+    if (!tr.docChanged) {
       return false;
     }
 
-    sanitiseMarksInSelection(customTr, listNodeType);
-
     if (dispatch) {
-      dispatch(customTr);
+      dispatch(tr);
     }
 
     return true;
@@ -182,9 +174,6 @@ export function toggleBulletList(view, inputMethod = INPUT_METHOD.TOOLBAR) {
 export function toggleOrderedList(view, inputMethod = INPUT_METHOD.TOOLBAR) {
   return toggleList(inputMethod, 'orderedList')(view.state, view.dispatch);
 }
-export function wrapInList(nodeType) {
-  return baseCommand.autoJoin(baseListCommand.wrapInList(nodeType), (before, after) => before.type === after.type && before.type === nodeType);
-}
 /**
  * Implementation taken and modified for our needs from PM
  * @param itemType Node
@@ -326,8 +315,20 @@ const joinToPreviousListItem = (state, dispatch) => {
         const list = $cut.nodeBefore.copy($cut.nodeBefore.content.append(Fragment.from(listItem.createChecked({}, $cut.nodeAfter))));
         tr.replaceWith(nodeBeforePos, $from.pos + $cut.nodeAfter.nodeSize, list);
       } else {
-        // take the text content of the paragraph and insert after the paragraph up until before the the cut
-        tr = state.tr.step(new ReplaceAroundStep($lastNode.pos, $cut.pos + $cut.nodeAfter.nodeSize, $cut.pos + 1, $cut.pos + $cut.nodeAfter.nodeSize - 1, state.tr.doc.slice($lastNode.pos, $cut.pos), 0, true));
+        const step = moveTargetIntoList({
+          insertPosition: $lastNode.pos,
+          $target: $cut
+        }); // ED-13966: check if the step will cause an ProseMirror error
+        // if there's an error don't apply the step as it will might lead into a data loss.
+        // It doesn't play well with media being a leaf node.
+
+        const stepResult = state.tr.maybeStep(step);
+
+        if (stepResult.failed) {
+          return false;
+        } else {
+          tr = state.tr.step(step);
+        }
       } // find out if there's now another list following and join them
       // as in, [list, p, list] => [list with p, list], and we want [joined list]
 

package/dist/es2019/plugins/list/utils/replace-content.js

@@ -0,0 +1,22 @@
+import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+export const moveTargetIntoList = ({
+  insertPosition,
+  $target
+}) => {
+  var _$target$nodeAfter;
+
+  // take the text content of the paragraph and insert after the paragraph up until before the the cut
+  const from = insertPosition;
+  const to = $target.pos + (((_$target$nodeAfter = $target.nodeAfter) === null || _$target$nodeAfter === void 0 ? void 0 : _$target$nodeAfter.nodeSize) || 0); //$cut.pos + $cut.nodeAfter.nodeSize;
+
+  const gapFrom = $target.posAtIndex(0, $target.depth + 1); // start pos of the child
+
+  const gapTo = $target.doc.resolve(gapFrom).end(); // end pos of the paragraph
+
+  if (gapTo - gapFrom === 0) {
+    return new ReplaceStep(from, to, $target.doc.slice(insertPosition, $target.pos));
+  }
+
+  const step = new ReplaceAroundStep(from, to, gapFrom, gapTo, $target.doc.slice(insertPosition, $target.pos), 0, true);
+  return step;
+};

package/dist/es2019/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -86,7 +86,7 @@ export class MediaNodeUpdater {
 
     _defineProperty(this, "getObjectId", async () => {
       const contextIdentifierProvider = await this.props.contextIdentifierProvider;
-      return contextIdentifierProvider && contextIdentifierProvider.objectId;
+      return (contextIdentifierProvider === null || contextIdentifierProvider === void 0 ? void 0 : contextIdentifierProvider.objectId) || null;
     });
 
     _defineProperty(this, "uploadExternalMedia", async getPos => {
@@ -135,10 +135,10 @@ export class MediaNodeUpdater {
       const attrs = this.getAttrs();
 
       if (!attrs || attrs.type !== 'file') {
-        return undefined;
+        return null;
       }
 
-      return attrs.__contextId;
+      return attrs.__contextId || null;
     });
 
     _defineProperty(this, "updateDimensions", dimensions => {

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';

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

@@ -252,4 +252,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/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-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;
   }
 
 }

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

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

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

@@ -1,7 +1,29 @@
 import { css } from 'styled-components';
 import { N300 } from '@atlaskit/theme/colors';
+import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const placeholderTextStyles = css`
   .ProseMirror span[data-placeholder] {
     color: ${N300};
+    display: inline;
+  }
+
+  .ProseMirror span.pm-placeholder {
+    display: inline;
+    color: ${N300};
+  }
+  .ProseMirror span.pm-placeholder__text {
+    display: inline;
+    color: ${N300};
+  }
+
+  .ProseMirror span.pm-placeholder.${akEditorSelectedNodeClassName} {
+    ${getSelectionStyles([SelectionStyle.Background])}
+  }
+
+  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {
+    color: ${N300};
+    cursor: text;
+    content: attr(data-placeholder);
+    display: inline;
   }
 `;

package/dist/es2019/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/es2019/plugins/table/commands/insert.js

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