@atlaskit/editor-core 151.3.0 → 152.0.0

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

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { ErrorReporter } from '@atlaskit/editor-common';
+import { ErrorReporter, browser } from '@atlaskit/editor-common';
 import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
@@ -18,6 +18,9 @@ import PickerFacade from '../picker-facade';
 import { INPUT_METHOD } from '../../analytics/types';
 import { isImage } from '../utils/is-image';
 import { isInEmptyLine } from '../../../utils/document';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { isInListItem } from '../../../utils';
+import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
 export { stateKey } from './plugin-key';
 
 const createDropPlaceholder = allowDropLine => {
@@ -157,7 +160,7 @@ export class MediaPluginStateImplementation {
         media
       } = this.view.state.schema.nodes;
 
-      if ((_this$mediaOptions = this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
+      if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions = this.mediaOptions) === null || _this$mediaOptions === void 0 ? void 0 : _this$mediaOptions.featureFlags)) {
         return type === mediaSingle || type === media || type === mediaInline;
       }
 
@@ -194,7 +197,7 @@ export class MediaPluginStateImplementation {
 
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
         insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert);
-      } else if ((_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline && !isInEmptyLine(state) && !isInsidePotentialEmptyParagraph(state) && canInsertMediaInline(state)) {
+      } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
         insertMediaInlineNode(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
       } else {
         insertMediaGroupNode(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
@@ -491,8 +494,6 @@ export class MediaPluginStateImplementation {
   }
 
   getDomElement(domAtPos) {
-    var _this$mediaOptions3;
-
     const {
       selection
     } = this.view.state;
@@ -505,16 +506,14 @@ export class MediaPluginStateImplementation {
       return;
     }
 
-    const position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
-    const node = findDomRefAtPos(position, domAtPos);
+    const node = findDomRefAtPos(selection.from, domAtPos);
 
     if (node) {
       if (!node.childNodes.length) {
         return node.parentNode;
       }
 
-      const target = node.querySelector('figure') || node;
-      return target;
+      return node;
     }
 
     return;
@@ -648,13 +647,21 @@ export const createPlugin = (_schema, options, reactContext, dispatch, mediaOpti
 
     },
 
-    filterTransaction(transaction, state) {
-      // Media node inside mediaSingle should not be selected
-      // We are relying on plugins/media/nodeviews/mediaNodeView/media.tsx#selectMediaSingleFromCard
-      // to set selection on correct mediaSingle node,
-      // We don't use 'appendTransaction' because we would like to avoid have additional transactions
-      // http://product-fabric.atlassian.net/browse/ED-10091
-      return !(transaction.selectionSet && isNodeSelection(transaction.selection) && transaction.selection.node.type === state.schema.nodes.media && transaction.selection.$anchor.parent.type === state.schema.nodes.mediaSingle);
+    appendTransaction(transactions, _oldState, newState) {
+      for (const transaction of transactions) {
+        const isSelectionOnMediaInsideMediaSingle = transaction.selectionSet && isNodeSelection(transaction.selection) && transaction.selection.node.type === newState.schema.nodes.media && transaction.selection.$anchor.parent.type === newState.schema.nodes.mediaSingle; // Note: this causes an additional transaction when selecting a media node
+        // through clicking  on it with the cursor.
+
+        if (isSelectionOnMediaInsideMediaSingle) {
+          // If a selection has been placed on a media inside a media single,
+          // we shift it to the media single parent as other code is opinionated about
+          // the selection landing there. In particular the caption insertion and selection
+          // action.
+          return newState.tr.setSelection(NodeSelection.create(newState.doc, transaction.selection.$from.pos - 1));
+        }
+      }
+
+      return;
     },
 
     key: stateKey,
@@ -716,8 +723,16 @@ export const createPlugin = (_schema, options, reactContext, dispatch, mediaOpti
       handleTextInput(view) {
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
-      }
+      },
 
+      handleClick: (_editorView, _pos, event) => {
+        var _parentElement;
+
+        // Workaround for Chrome given a regression introduced in prosemirror-view@1.18.6
+        // Returning true prevents that updateSelection() is getting called in the commit below:
+        // @see https://github.com/ProseMirror/prosemirror-view/compare/1.18.5...1.18.6
+        return Boolean((browser.chrome || browser.safari) && event.target && CAPTION_PLACEHOLDER_ID === ((_parentElement = event.target.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.dataset.id));
+      }
     }
   });
 };

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

@@ -0,0 +1,47 @@
+import { NodeSelection } from 'prosemirror-state';
+import { isNodeSelection, removeSelectedNode, safeInsert } from 'prosemirror-utils';
+export const changeInlineToMediaCard = (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    mediaGroup
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+
+  if (!selectedNode) {
+    return false;
+  }
+
+  const {
+    id,
+    type,
+    collection
+  } = selectedNode.attrs;
+  const mediaNode = media.createChecked({
+    id,
+    type,
+    collection
+  });
+  const group = mediaGroup.createChecked({}, mediaNode);
+  const nodePos = state.tr.doc.resolve(state.selection.from).end();
+  let tr = state.tr;
+  tr = removeSelectedNode(tr);
+  tr = safeInsert(group, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+export const removeInlineCard = (state, dispatch) => {
+  if (isNodeSelection(state.selection)) {
+    if (dispatch) {
+      dispatch(removeSelectedNode(state.tr));
+    }
+
+    return true;
+  }
+
+  return false;
+};

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

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { messages } from '@atlaskit/media-ui';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import ToolbarButton from '../../floating-toolbar/ui/Button';
 import { getSelectedMediaContainerNodeAttrs } from './utils';
 export const FilePreviewItem = ({
-  mediaPluginState
+  mediaPluginState,
+  intl
 }) => {
   const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
 
@@ -48,12 +50,14 @@ export const FilePreviewItem = ({
   };
 
   const mediaViewer = renderMediaViewer();
+  const tooltipContent = intl.formatMessage(messages.preview);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: openMediaViewer,
     icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
       label: "file preview"
-    })
+    }),
+    tooltipContent: tooltipContent
   }), mediaViewer);
 };

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

@@ -21,6 +21,8 @@ import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
 import { Fragment } from 'prosemirror-model';
+import { changeInlineToMediaCard, removeInlineCard } from './commands';
+import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -75,6 +77,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     mediaGroup
   } = state.schema.nodes;
   const items = [{
+    id: 'editor.media.view.switcher',
     type: 'dropdown',
     title: intl.formatMessage(messages.displayThumbnail),
     options: [{
@@ -98,7 +101,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     render: () => {
       return /*#__PURE__*/React.createElement(FilePreviewItem, {
         key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState
+        mediaPluginState: mediaPluginState,
+        intl: intl
       });
     }
   }, {
@@ -130,6 +134,68 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
   return items;
 };
 
+const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
+  const {
+    mediaInline
+  } = state.schema.nodes;
+  const items = [{
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(cardMessages.inline),
+    options: [{
+      title: intl.formatMessage(cardMessages.inline),
+      selected: true,
+      onClick: () => {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: false,
+      onClick: changeInlineToMediaCard,
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: () => {
+      return /*#__PURE__*/React.createElement(FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState,
+        intl: intl
+      });
+    }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: DownloadIcon,
+    onClick: () => {
+      downloadMedia(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(commonMessages.remove),
+    onClick: removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+
 const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState) => {
   const {
     mediaSingle
@@ -282,9 +348,14 @@ export const floatingToolbar = (state, intl, options = {}) => {
   }
 
   let items = [];
-  const parentNode = findParentNodeOfType(mediaGroup)(state.selection);
+  const parentMediaGroupNode = findParentNodeOfType(mediaGroup)(state.selection);
+  let selectedNodeType;
+
+  if (state.selection instanceof NodeSelection) {
+    selectedNodeType = state.selection.node.type;
+  }
 
-  if (allowMediaInline && parentNode && parentNode.node.type === mediaGroup) {
+  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
     const mediaOffset = state.selection.$from.parentOffset + 1;
 
     baseToolbar.getDomRef = () => {
@@ -295,7 +366,23 @@ export const floatingToolbar = (state, intl, options = {}) => {
     };
 
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState);
+  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
+    baseToolbar.getDomRef = () => {
+      var _mediaPluginState$ele2;
+
+      const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
+      return element || mediaPluginState.element;
+    };
+
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState);
   } else {
+    baseToolbar.getDomRef = () => {
+      var _mediaPluginState$ele3;
+
+      const element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(`.${MediaSingleNodeSelector}`);
+      return element || mediaPluginState.element;
+    };
+
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState);
   }
 

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

@@ -343,7 +343,13 @@ export default class ResizableMediaSingle extends React.Component {
         return columResizingPluginState ? !columResizingPluginState.dragging : true;
       },
       nodeType: "media",
-      dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
+      dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent // when cursor is located below a media with caption,
+      // 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", {
+        contentEditable: false
+      })
     }), children));
   }
 

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

@@ -296,7 +296,7 @@ export const unwrapNestedMediaElements = html => {
     // ProseMirror should handle this case properly.
 
 
-    if (mediaParent instanceof HTMLDivElement) {
+    if (mediaParent instanceof HTMLDivElement || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
       return;
     } // Find the top most element that the parent has a valid container for the image.
     // Stop just before found the wrapper

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

@@ -111,7 +111,12 @@ export const insertMediaInlineNode = (view, mediaState, collection, inputMethod)
     collection
   });
   const space = state.schema.text(' ');
-  const pos = state.selection.$to.pos;
+  let pos = state.selection.$to.pos; // If the selection is inside an empty list item set pos inside paragraph
+
+  if (isInListItem(state) && isInsidePotentialEmptyParagraph(state)) {
+    pos = pos + 1;
+  }
+
   let content = Fragment.from([mediaInlineNode, space]); // Delete the selection if a selection is made
 
   const deleteRange = findDeleteRange(state);

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

@@ -36,7 +36,7 @@ export const removePanel = () => (state, dispatch) => {
 
   return true;
 };
-export const changePanelType = (panelType, panelOptions = {}, UNSAFE_allowCustomPanel = false) => (state, dispatch) => {
+export const changePanelType = (panelType, panelOptions = {}, allowCustomPanel = false) => (state, dispatch) => {
   const {
     schema: {
       nodes
@@ -53,7 +53,7 @@ export const changePanelType = (panelType, panelOptions = {}, UNSAFE_allowCustom
   let previousType = panelNode.node.attrs.panelType;
   let newTr;
 
-  if (UNSAFE_allowCustomPanel) {
+  if (allowCustomPanel) {
     let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(previousType);
     let previousIcon = panelNode.node.attrs.panelIcon;
     let newPanelOptions = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { customPanel, PanelType } from '@atlaskit/adf-schema';
+import { panel, PanelType } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
@@ -7,7 +7,7 @@ import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD,
 import { IconPanel, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanelError } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
 import IconCustomPanel from '../quick-insert/assets/custom-panel';
-import { T75 } from '@atlaskit/theme/colors';
+import { T50 } from '@atlaskit/theme/colors';
 
 const insertPanelTypeWithAnalytics = (panelAttributes, state, insert) => {
   const tr = insert(insertPanelType(panelAttributes, state));
@@ -34,7 +34,7 @@ const panelPlugin = (options = {}) => ({
   name: 'panel',
 
   nodes() {
-    const panelNode = customPanel(!!options.UNSAFE_allowCustomPanel);
+    const panelNode = panel(!!options.allowCustomPanel);
     return [{
       name: 'panel',
       node: panelNode
@@ -127,7 +127,7 @@ const panelPlugin = (options = {}) => ({
 
       }];
 
-      if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
+      if (options.allowCustomPanel && options.allowCustomPanelEdit) {
         quickInsertOptions.push({
           id: 'custompanel',
           title: formatMessage(messages.customPanel),
@@ -139,7 +139,7 @@ const panelPlugin = (options = {}) => ({
             return insertPanelTypeWithAnalytics({
               panelType: PanelType.CUSTOM,
               panelIcon: ':rainbow:',
-              panelColor: T75
+              panelColor: T50
             }, state, insert);
           }
 

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

@@ -56,7 +56,7 @@ class PanelNodeView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.UNSAFE_allowCustomPanel || false));
+    } = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.allowCustomPanel || false));
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
@@ -69,7 +69,7 @@ class PanelNodeView {
 
     this.icon.contentEditable = 'false';
     ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
-      allowCustomPanel: pluginOptions.UNSAFE_allowCustomPanel,
+      allowCustomPanel: pluginOptions.allowCustomPanel,
       panelAttributes: node.attrs,
       providerFactory: this.providerFactory
     }), this.icon);

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

@@ -4,7 +4,7 @@ import NoteIcon from '@atlaskit/icon/glyph/editor/note';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
-import RemoveEmojiIcon from '../floating-toolbar/ui/EditorRemoveEmojiIcon';
+import RemoveEmojiIcon from '@atlaskit/icon/glyph/editor/remove-emoji';
 import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
@@ -20,8 +20,8 @@ export const panelIconMap = {
   [PanelType.INFO]: ':info:',
   [PanelType.NOTE]: ':note:',
   [PanelType.WARNING]: ':warning:',
-  [PanelType.ERROR]: ':error:',
-  [PanelType.SUCCESS]: ':success:',
+  [PanelType.ERROR]: ':cross_mark:',
+  [PanelType.SUCCESS]: ':check_mark:',
   [PanelType.TIP]: ':tip:'
 };
 export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) => {
@@ -228,9 +228,14 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory) =>
       panelType,
       panelColor,
       panelIcon
-    } = panelObject.node.attrs; // force toolbar to be turned on
+    } = panelObject.node.attrs;
 
-    const items = getToolbarItems(formatMessage, nodeType, options.UNSAFE_allowCustomPanel || false, options.UNSAFE_allowCustomPanel && options.UNSAFE_allowCustomPanelEdit || false, providerFactory, panelType, options.UNSAFE_allowCustomPanel ? panelColor : undefined, options.UNSAFE_allowCustomPanel ? panelIcon : undefined);
+    const isStandardPanel = panelType => {
+      return panelType !== PanelType.CUSTOM ? panelType : undefined;
+    }; // force toolbar to be turned on
+
+
+    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined);
 
     const getDomRef = editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);

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

@@ -16,11 +16,18 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
   const style = panelColor && isCustomPanel ? `background-color: ${panelColor}` : '';
   const hasIcon = !isCustomPanel || !!panelIcon;
-  const panelAttrs = {
+  let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,
     style
   };
+
+  if (panelColor && isCustomPanel) {
+    panelAttrs = { ...panelAttrs,
+      'data-panel-color': panelColor
+    };
+  }
+
   const iconDiv = ['div', {
     class: PanelSharedCssClassName.icon
   }];

package/dist/es2019/plugins/rank.js

@@ -6,9 +6,10 @@ export default {
   // https://product-fabric.atlassian.net/wiki/spaces/E/pages/1113098008/Selection+Guide#Special-Cases
   'expandKeymap', 'tableSelectionKeymap', 'tableKeymap', 'captionKeymap', // selection keymap needs to be above gap cursor keymap so it can set node selections from
   // left/right arrows
-  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'inlineCode'],
+  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'beforePrimaryToolbar', 'inlineCode'],
   nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'rule', 'panel', 'mention', 'confluenceUnsupportedBlock', 'confluenceUnsupportedInline', 'unsupportedBlock', 'unsupportedInline', 'confluenceJiraIssue', 'hardBreak', 'emoji', 'placeholder', 'mediaSingle', 'mediaGroup', 'table', 'expand', 'nestedExpand', 'media', 'tableHeader', 'decisionList', 'tableRow', 'decisionItem', 'tableCell', 'taskList', 'taskItem', 'extension', 'bodiedExtension', 'inlineExtension', 'layoutSection', 'layoutColumn', 'inlineCard', 'blockCard', 'embedCard'],
-  marks: [// Inline marks
+  marks: [// Fragment mark is both for inline and block elements
+  'fragment', // Inline marks
   'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'typeAheadQuery', // Block marks
   'alignment', 'breakout', 'indentation', 'annotation', //Unsupported mark
   'unsupportedMark', 'unsupportedNodeAttribute']

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

@@ -8,6 +8,25 @@ export const getInitialState = state => ({
   decorationSet: getDecorations(state.tr),
   selection: state.selection
 });
+
+const toggleContentEditable = (node, root = false) => {
+  if (root || node.getAttribute('contenteditable') === 'true') {
+    const wasTrue = node.getAttribute('contenteditable') === 'true';
+    node.setAttribute('contenteditable', 'false');
+    requestAnimationFrame(() => {
+      if (wasTrue) {
+        node.setAttribute('contenteditable', 'true');
+      } else {
+        node.removeAttribute('contenteditable');
+      }
+    });
+  } // any children with contenteditable = true block selection from proceeding
+
+
+  const children = Array.from(node.children);
+  children.forEach(child => toggleContentEditable(child));
+};
+
 export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) => {
   return new Plugin({
     key: selectionPluginKey,
@@ -95,10 +114,13 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
           return false;
         },
         keydown: (editorView, event) => {
-          // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
+          const {
+            state
+          } = editorView; // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
           // contenteditable="false". (See https://product-fabric.atlassian.net/browse/ED-9452)
           // On keypress, if the head of cursor selection touches a node with contenteditable="false",
           // we temporarily remove the attribute, wait one tick, then restore it with its original value.
+
           if (browser.gecko) {
             const node = editorView.nodeDOM(editorView.state.selection.head);
 
@@ -108,6 +130,31 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
                 node.setAttribute('contenteditable', 'false');
               });
             }
+          } // Bugfix for block ReactNodeViews like table and extension
+          // They could not be selected with Shift + ArrowDown/ArrowUp
+          // Fixed when contenteditable = false, but then you couldn't edit their contents
+          // Therefore, briefly set contenteditable=false to allow the selection through, then set it back to true
+
+
+          if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            let pos;
+
+            if (event.key === 'ArrowDown') {
+              pos = state.selection.$head.after();
+            } else {
+              pos = state.selection.$head.before() - 1; // block extensions only take up one position, dont need to get before()
+
+              if (!editorView.nodeDOM(pos)) {
+                pos = state.doc.resolve(pos).before();
+              }
+            }
+
+            const node = editorView.nodeDOM(pos);
+
+            if (node instanceof HTMLDivElement && node.className.includes('View-content-wrap') // class added by ReactNodeView
+            ) {
+              toggleContentEditable(node, true);
+            }
           }
 
           return false;

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -203,7 +203,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
     } = this.props;
     const {
       color,
-      text
+      text,
+      localId
     } = this.state;
     return target && /*#__PURE__*/React.createElement(PopupWithListeners, {
       target: target,
@@ -221,7 +222,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       onColorClick: this.onColorClick,
       onColorHover: this.onColorHover,
       onTextChanged: this.onTextChanged,
-      onEnter: this.onEnter
+      onEnter: this.onEnter,
+      localId: localId
     })));
   }
 

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

@@ -22,7 +22,7 @@ function addColumnAtCustomStep(column) {
   };
 }
 
-function addColumnAt(column, allowAddColumnCustomStep = false, view) {
+export function addColumnAt(column, allowAddColumnCustomStep = false, view) {
   return tr => {
     let updatedTr = tr;
 
@@ -44,7 +44,6 @@ function addColumnAt(column, allowAddColumnCustomStep = false, view) {
 } // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 
-
 export const addColumnBefore = (state, dispatch, view) => {
   const table = findTable(state.selection);
 

package/dist/es2019/plugins/table/index.js

@@ -49,6 +49,7 @@ const tablesPlugin = options => ({
     return [{
       name: 'table',
       plugin: ({
+        dispatchAnalyticsEvent,
         dispatch,
         portalProviderAPI,
         eventDispatcher
@@ -60,7 +61,7 @@ const tablesPlugin = options => ({
           breakoutEnabled,
           tableOptions
         } = options || {};
-        return createPlugin(dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+        return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
       }
     }, {
       name: 'tablePMColResizing',