@atlaskit/editor-core 166.0.2 → 167.0.0

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

@@ -17,11 +17,12 @@ import { normalizeUrl } from '../../hyperlink/utils';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
+import { token } from '@atlaskit/tokens';
 const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;
-  border-top: 1px solid ${R400};
+  border-top: 1px solid ${token('color.border.danger', R400)};
   align-items: start;
   display: flex;
   flex-direction: column;

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

@@ -2,6 +2,7 @@ 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';
+import { token } from '@atlaskit/tokens';
 export const mentionsStyles = css`
   .${MentionSharedCssClassName.MENTION_CONTAINER} {
     &.${akEditorSelectedNodeClassName} [data-mention-id] > span {
@@ -9,7 +10,7 @@ export const mentionsStyles = css`
 
       /* need to specify dark text colour because personal mentions
          (in dark blue) have white text by default */
-      color: ${N500};
+      color: ${token('color.text.subtle', N500)};
     }
   }
 
@@ -18,11 +19,11 @@ export const mentionsStyles = css`
       > span
       > span {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-      background-color: ${akEditorDeleteBackgroundWithOpacity};
+      background-color: ${token('color.background.danger', akEditorDeleteBackgroundWithOpacity)};
     }
     .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span {
-      background-color: ${N30A};
-      color: ${N500};
+      background-color: ${token('color.background.neutral', N30A)};
+      color: ${token('color.text.subtle', N500)};
     }
   }
 `;

package/dist/es2019/plugins/mentions/ui/InviteItem/index.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT, mentionItemSelectedStyle } from './styles';
@@ -53,7 +54,7 @@ const InviteItem = ({
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: N300
+    primaryColor: token('color.icon.subtle', N300)
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { N30, N300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const ROW_SIDE_PADDING = 14;
 export const rowStyle = css`
   align-items: center;
@@ -29,7 +30,7 @@ export const nameSectionStyle = css`
   flex: 1;
   min-width: 0;
   margin-left: 14px;
-  color: ${N300};
+  color: ${token('color.text.subtle', N300)};
   opacity: inherit;
 `;
 export const mentionItemStyle = css`
@@ -40,7 +41,7 @@ export const mentionItemStyle = css`
   cursor: pointer;
 `;
 export const mentionItemSelectedStyle = css`
-  background-color: ${N30};
+  background-color: ${token('color.background.neutral.subtle.hovered', N30)};
 `;
 export const capitalizedStyle = css`
   text-transform: capitalize;

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

@@ -141,6 +141,7 @@ const panelPlugin = (options = {}) => ({
               panelIcon: ':rainbow:',
               panelIconId: '1f308',
               panelIconText: '🌈',
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
               panelColor: T50
             }, state, insert);
           }

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

@@ -77,7 +77,10 @@ class PanelNodeView {
 
   ignoreMutation(mutation) {
     // ignore mutation if it caused by the icon.
-    return mutation.target === this.icon || mutation.target.parentNode === this.icon;
+    const isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon; // ignore mutation if it caused by the lazy load emoji inside icon.
+
+    const isInsideIcon = this.icon.contains(mutation.target);
+    return isIcon || isInsideIcon;
   }
 
 }

package/dist/es2019/plugins/panel/pm-plugins/keymaps.js

@@ -1,6 +1,23 @@
 import { keymap } from 'prosemirror-keymap';
-import { setTextSelection } from 'prosemirror-utils';
-// Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+import { setTextSelection, findParentNodeOfType } from 'prosemirror-utils';
+import { isEmptyNode } from '../../../utils';
+
+function findParentNode(selection, nodeType) {
+  const parentPosition = findParentNodeOfType(nodeType)(selection);
+
+  if (parentPosition) {
+    return parentPosition.node;
+  }
+
+  return null;
+}
+
+function isInsideAnEmptyNode(selection, nodeType, schema) {
+  const parentNode = findParentNode(selection, nodeType);
+  return parentNode && isEmptyNode(schema)(parentNode);
+} // Somewhat broken and subverted: https://product-fabric.atlassian.net/browse/ED-6504
+
+
 export function keymapPlugin() {
   const deleteCurrentItem = ($from, tr) => {
     return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
@@ -16,7 +33,8 @@ export function keymapPlugin() {
         tr
       } = state;
       const {
-        panel
+        panel,
+        blockquote
       } = nodes;
       const {
         $from,
@@ -38,7 +56,7 @@ export function keymapPlugin() {
       const isPreviousNodeAPanel = previousNodeType === panel;
       const isParentNodeAPanel = parentNodeType === panel; // Stops merging panels when deleting empty paragraph in between
 
-      if (isPreviousNodeAPanel && !isParentNodeAPanel) {
+      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || isInsideAnEmptyNode(selection, blockquote, state.schema)) {
         const content = $from.node($from.depth).content;
         const insertPos = previousPos.pos - 1;
         deleteCurrentItem($from, tr).insert(insertPos, content);

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

@@ -2,7 +2,7 @@ import { closeHistory } from 'prosemirror-history';
 import { Fragment, Node as PMNode, Slice } from 'prosemirror-model';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, safeInsert } from 'prosemirror-utils';
-import { compose, insideTable, isParagraph, isText, isLinkMark, processRawValue } from '../../utils';
+import { compose, insideTable, isParagraph, isText, isLinkMark, processRawValue, insideTableCell } from '../../utils';
 import { mapSlice } from '../../utils/slice';
 import { INPUT_METHOD } from '../analytics';
 import { insertCard, queueCardsFromChangedTr } from '../card/pm-plugins/doc';
@@ -610,7 +610,7 @@ export function insertIntoPanel(tr, slice, panel) {
 }
 export function handleRichText(slice) {
   return (state, dispatch) => {
-    var _slice$content, _panelParentOverCurre;
+    var _slice$content, _slice$content2, _panelParentOverCurre;
 
     const {
       codeBlock,
@@ -621,7 +621,8 @@ export function handleRichText(slice) {
     const {
       selection
     } = state;
-    const firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild; // In case user is pasting inline code,
+    const firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild;
+    const lastChildOfSlice = (_slice$content2 = slice.content) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.lastChild; // In case user is pasting inline code,
     // any backtick ` immediately preceding it should be removed.
 
     let tr = state.tr;
@@ -636,7 +637,7 @@ export function handleRichText(slice) {
 
     closeHistory(tr);
     const isFirstChildListNode = isListNode(firstChildOfSlice);
-    const isLastChildListNode = isListNode(firstChildOfSlice);
+    const isLastChildListNode = isListNode(lastChildOfSlice);
     const isSliceContentListNodes = isFirstChildListNode || isLastChildListNode; // We want to use safeInsert to insert invalid content, as it inserts at the closest non schema violating position
     // rather than spliting the selection parent node in half (which is what replaceSelection does)
     // Exception is paragraph and heading nodes, these should be split, provided their parent supports the pasted content
@@ -655,9 +656,23 @@ export function handleRichText(slice) {
     } else if (noNeedForSafeInsert) {
       tr.replaceSelection(slice);
     } else {
-      // need safeInsert rather than replaceSelection, so that nodes aren't split in half
-      // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle
-      tr = safeInsert(slice.content, tr.selection.$to.pos)(tr);
+      // need to scan the slice if there's a block node inside it
+      let doesBlockNodeExist = false;
+      slice.content.nodesBetween(0, slice.content.size, (node, start) => {
+        if (start >= slice.openStart && start <= slice.content.size - slice.openEnd && node.isBlock) {
+          doesBlockNodeExist = true;
+          return false;
+        }
+      });
+
+      if (insideTableCell(state) && !doesBlockNodeExist) {
+        // bring back the old code for inline nodes
+        insertIntoPanel(tr, slice, panel);
+      } else {
+        // need safeInsert rather than replaceSelection, so that nodes aren't split in half
+        // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle
+        tr = safeInsert(slice.content, tr.selection.$to.pos)(tr);
+      }
     }
 
     tr.setStoredMarks([]);
@@ -675,6 +690,29 @@ export function handleRichText(slice) {
     return true;
   };
 }
+export function handlePasteIntoCaption(slice) {
+  return (state, dispatch) => {
+    const {
+      caption
+    } = state.schema.nodes;
+    const tr = state.tr;
+
+    if (hasParentNodeOfType(caption)(state.selection)) {
+      // We let PM replace the selection and it will insert as text where it can't place the node
+      // This is totally fine as caption is just a simple block that only contains inline contents
+      // And it is more in line with WYSIWYG expectations
+      tr.replaceSelection(slice).scrollIntoView();
+
+      if (dispatch) {
+        dispatch(tr);
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+}
 export const handleSelectedTable = slice => (state, dispatch) => {
   const tr = replaceSelectedTable(state, slice, INPUT_METHOD.CLIPBOARD);
 

package/dist/es2019/plugins/paste/linkify-md-plugin.js

@@ -1,5 +1,6 @@
 import { linkifyMatch } from '@atlaskit/adf-schema';
-import LinkifyIt from 'linkify-it'; // modified version of the original Linkify plugin
+import LinkifyIt from 'linkify-it';
+import { findFilepaths, isLinkInMatches } from '../hyperlink/utils'; // modified version of the original Linkify plugin
 // https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.js
 
 const arrayReplaceAt = (src, pos, newElements) => {
@@ -67,8 +68,13 @@ const linkify = state => {
         const nodes = [];
         let level = currentToken.level;
         let lastPos = 0;
+        const filepaths = findFilepaths(text);
 
         for (let ln = 0; ln < links.length; ln++) {
+          if (isLinkInMatches(links[ln].index, filepaths)) {
+            continue;
+          }
+
           const {
             url
           } = links[ln];

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, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText } from '../handlers';
+import { handlePasteAsPlainText, handlePasteIntoTaskAndDecision, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText, handlePasteIntoCaption } from '../handlers';
 import { pipe } from '../../../utils';
 import { findParentNode } from 'prosemirror-utils';
 import { mapSlice } from '../../../utils/slice';
@@ -222,6 +222,9 @@ export const handlePasteAsPlainTextWithAnalytics = (view, event, slice) => pipe(
 export const handlePasteIntoTaskAndDecisionWithAnalytics = (view, event, slice, type) => pipe(handlePasteIntoTaskAndDecision, pasteCommandWithAnalytics(view, event, slice, {
   type: type
 }))(slice);
+export const handlePasteIntoCaptionWithAnalytics = (view, event, slice, type) => pipe(handlePasteIntoCaption, pasteCommandWithAnalytics(view, event, slice, {
+  type: type
+}))(slice);
 export const handleCodeBlockWithAnalytics = (view, event, slice, text) => pipe(handleCodeBlock, pasteCommandWithAnalytics(view, event, slice, {
   type: PasteTypes.plain
 }))(text);

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

@@ -12,7 +12,7 @@ import { linkifyContent } from '../../hyperlink/utils';
 import { transformSliceNestedExpandToExpand } from '../../expand/utils';
 import { handleMacroAutoConvert, handleMention, handleParagraphBlockMarks } from '../handlers';
 import { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '../../code-block/utils';
-import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent } from './analytics';
+import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent, handlePasteIntoCaptionWithAnalytics } from './analytics';
 import { analyticsPluginKey, PasteTypes } from '../../analytics';
 import { insideTable, measurements } from '../../../utils';
 import { measureRender } from '@atlaskit/editor-common/utils';
@@ -26,6 +26,7 @@ import { pluginKey as betterTypePluginKey } from '../../base/pm-plugins/better-t
 import { clipboardTextSerializer } from './clipboard-text-serializer';
 import { htmlHasIncompleteTable, tryRebuildCompleteTableHtml, isPastedFromTinyMCEConfluence } from '../util/tinyMCE';
 import { handlePaste as handlePasteTable } from '@atlaskit/editor-tables/utils';
+import { extractSliceFromStep } from '../../../utils/step';
 export const stateKey = new PluginKey('pastePlugin');
 export { md } from '../md';
 export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory) {
@@ -157,8 +158,25 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
           const {
             placeholder
           } = state.schema.nodes;
+          const isPastingTextInsidePlaceholderText = ((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) === placeholder; // don't add closeHistory call if we're pasting a table, as some tables may involve additional
+          // appendedTransactions to repair them (if they're partial or incomplete) and we don't want
+          // to split those repairing transactions in prosemirror-history when they're being added to the
+          // "done" stack
+
+          const isPastingTable = tr.steps.some(step => {
+            var _slice$content;
+
+            const slice = extractSliceFromStep(step);
+            let tableExists = false;
+            slice === null || slice === void 0 ? void 0 : (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.forEach(node => {
+              if (node.type === state.schema.nodes.table) {
+                tableExists = true;
+              }
+            });
+            return tableExists;
+          });
 
-          if (((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) !== placeholder) {
+          if (!isPastingTextInsidePlaceholderText && !isPastingTable) {
             tr.setMeta(betterTypePluginKey, true);
           }
 
@@ -281,6 +299,13 @@ export function createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinki
 
           if (!insideTable(state)) {
             slice = transformSliceNestedExpandToExpand(slice, state.schema);
+          } // Create a custom handler to avoid handling with handleRichText method
+          // As SafeInsert is used inside handleRichText which caused some bad UX like this:
+          // https://product-fabric.atlassian.net/browse/MEX-1520
+
+
+          if (handlePasteIntoCaptionWithAnalytics(view, event, slice, PasteTypes.richText)(state, dispatch)) {
+            return true;
           }
 
           return handleRichTextWithAnalytics(view, event, slice)(state, dispatch);

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

@@ -1,4 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
 import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { isInEmptyLine, isEmptyDocument, bracketTyped } from '../../utils/document';
@@ -26,7 +27,17 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
   placeholderDecoration.className = placeHolderClass;
   const placeholderNode = document.createElement('span');
   placeholderNode.textContent = placeholderText;
-  placeholderDecoration.appendChild(placeholderNode);
+  placeholderDecoration.appendChild(placeholderNode); // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  // Add a editable buff node as the cursor moving forward is inevitable
+  // when backspace in GBoard composition
+
+  if (browser.android && browser.chrome) {
+    const buffNode = document.createElement('span');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
     side: -1,
     key: 'placeholder'

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

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const placeHolderClassName = 'placeholder-decoration';
 export const placeholderStyles = css`
   .ProseMirror .${placeHolderClassName} {
     position: relative;
-    color: ${N200};
+    color: ${token('color.text.subtlest', N200)};
     width: 100%;
 
     pointer-events: none;
@@ -14,6 +15,7 @@ export const placeholderStyles = css`
     > span {
       position: absolute;
       pointer-events: none;
+      outline: none;
     }
 
     &.align-end > span {

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

@@ -1,19 +1,20 @@
 import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export const placeholderTextStyles = css`
   .ProseMirror span[data-placeholder] {
-    color: ${N300};
+    color: ${token('color.text.subtlest', N300)};
     display: inline;
   }
 
   .ProseMirror span.pm-placeholder {
     display: inline;
-    color: ${N300};
+    color: ${token('color.text.subtlest', N300)};
   }
   .ProseMirror span.pm-placeholder__text {
     display: inline;
-    color: ${N300};
+    color: ${token('color.text.subtlest', N300)};
   }
 
   .ProseMirror span.pm-placeholder.${akEditorSelectedNodeClassName} {
@@ -21,7 +22,7 @@ export const placeholderTextStyles = css`
   }
 
   .ProseMirror span.pm-placeholder__text[data-placeholder]::after {
-    color: ${N300};
+    color: ${token('color.text.subtlest', N300)};
     cursor: text;
     content: attr(data-placeholder);
     display: inline;

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

@@ -56,15 +56,15 @@ export const gapCursorStyles = css`
         float: right;
       }
 
-      /* fix vertical alighment of gap cursor */
-      &:first-child + ul,
-      &:first-child + span + ul,
-      &:first-child + ol,
-      &:first-child + span + ol,
-      &:first-child + pre,
-      &:first-child + span + pre,
-      &:first-child + blockquote,
-      &:first-child + span + blockquote {
+      /* fix vertical alignment of gap cursor */
+      &:first-of-type + ul,
+      &:first-of-type + span + ul,
+      &:first-of-type + ol,
+      &:first-of-type + span + ol,
+      &:first-of-type + pre,
+      &:first-of-type + span + pre,
+      &:first-of-type + blockquote,
+      &:first-of-type + span + blockquote {
         margin-top: 0;
       }
     }

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

@@ -32,8 +32,8 @@ const plugin = new SafePlugin({
     }
 
     return {
-      update(view, state) {
-        const pluginState = gapCursorPluginKey.getState(state);
+      update(view) {
+        const pluginState = gapCursorPluginKey.getState(view.state);
         /**
          * Starting with prosemirror-view 1.19.4, cursor wrapper that previousely was hiding cursor doesn't exist:
          * https://github.com/ProseMirror/prosemirror-view/commit/4a56bc7b7e61e96ef879d1dae1014ede0fc09e43

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

@@ -9,10 +9,10 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
-import { dropShadow } from '../../../ui/styles';
 import withOuterListeners from '../../../ui/with-outer-listeners';
 import { DEFAULT_STATUS } from '../actions';
 import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
+import { token } from '@atlaskit/tokens';
 const PopupWithListeners = withOuterListeners(Popup);
 export let InputMethod;
 
@@ -23,10 +23,10 @@ export let InputMethod;
 })(InputMethod || (InputMethod = {}));
 
 const pickerContainer = css`
-  background: ${N0};
+  background: ${token('elevation.surface.overlay', N0)};
   padding: ${gridSize()}px 0;
   border-radius: ${borderRadius()}px;
-  ${dropShadow};
+  box-shadow: ${token('elevation.shadow.overlay', '0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)')};
   input {
     text-transform: uppercase;
   }

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

@@ -11,6 +11,7 @@ import { IconTable } from '../quick-insert/assets';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin } from './pm-plugins/safari-delayed-dom-selection-syncing-workaround';
+import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -56,13 +57,12 @@ const tablesPlugin = options => ({
         eventDispatcher
       }) => {
         const {
-          dynamicSizingEnabled,
           fullWidthEnabled,
           wasFullWidthEnabled,
           breakoutEnabled,
           tableOptions
         } = options || {};
-        return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+        return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
       }
     }, {
       name: 'tablePMColResizing',
@@ -70,7 +70,6 @@ const tablesPlugin = options => ({
         dispatch
       }) => {
         const {
-          dynamicSizingEnabled,
           fullWidthEnabled,
           tableOptions
         } = options || {};
@@ -78,7 +77,6 @@ const tablesPlugin = options => ({
           allowColumnResizing
         } = pluginConfig(tableOptions);
         return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
-          dynamicTextSizing: dynamicSizingEnabled && !fullWidthEnabled,
           lastColumnResizable: !fullWidthEnabled
         }) : undefined;
       }
@@ -120,6 +118,17 @@ const tablesPlugin = options => ({
           return createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin();
         }
       });
+    } // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
+    // https://github.com/ProseMirror/prosemirror/issues/934
+
+
+    if (browser.safari) {
+      plugins.push({
+        name: 'tableSafariDeleteCompositionTextIssueWorkaround',
+        plugin: () => {
+          return createTableSafariDeleteCompositionTextIssueWorkaroundPlugin();
+        }
+      });
     }
 
     return plugins;

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -207,7 +207,6 @@ class TableComponent extends React.Component {
           view,
           getNode,
           getPos,
-          options,
           containerWidth
         } = this.props;
         const node = getNode();
@@ -218,7 +217,6 @@ class TableComponent extends React.Component {
         }
 
         autoSizeTable(view, node, this.table, pos, {
-          dynamicTextSizing: options && options.dynamicTextSizing || false,
           containerWidth: containerWidth.width
         });
       }
@@ -315,10 +313,8 @@ class TableComponent extends React.Component {
     this.node = _getNode();
     this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
 
-    const dynamicTextSizing = _options ? _options.dynamicTextSizing : false;
     const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
-      dynamicTextSizing,
       isFullWidthModeEnabled
     }); // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
@@ -399,7 +395,9 @@ class TableComponent extends React.Component {
   componentDidUpdate(prevProps) {
     const {
       view,
-      getNode
+      getNode,
+      isMediaFullscreen,
+      allowColumnResizing
     } = this.props;
     const {
       tableOverflowShadowsOptimization
@@ -426,7 +424,9 @@ class TableComponent extends React.Component {
     if (currentTable.attrs.__autoSize) {
       // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
       this.handleAutoSizeDebounced();
-    } else if (this.props.allowColumnResizing && this.table) {
+    } // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
+    // see https://product-fabric.atlassian.net/browse/MEX-1290
+    else if (allowColumnResizing && this.table && !isMediaFullscreen) {
       // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
       // re-draw colgroup.
       const previousTable = this.node;

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { DOMSerializer } from 'prosemirror-model';
+import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';
@@ -74,14 +75,16 @@ export default class TableView extends ReactNodeView {
       plugins: {
         containerWidth: widthPluginKey,
         pluginState: pluginKey,
-        tableResizingPluginState: tableResizingPluginKey
+        tableResizingPluginState: tableResizingPluginKey,
+        mediaState: mediaPluginKey
       },
       editorView: props.view,
       render: pluginStates => {
         const {
           tableResizingPluginState,
           pluginState,
-          containerWidth
+          containerWidth,
+          mediaState
         } = pluginStates;
         const tableActive = props.getPos() === pluginState.tablePos;
         return /*#__PURE__*/React.createElement(TableComponent, {
@@ -89,6 +92,7 @@ export default class TableView extends ReactNodeView {
           allowColumnResizing: props.allowColumnResizing,
           eventDispatcher: props.eventDispatcher,
           getPos: props.getPos,
+          isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
           options: props.options,
           allowControls: pluginState.pluginConfig.allowControls,
           isHeaderRowEnabled: pluginState.isHeaderRowEnabled,