@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -3,7 +3,6 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-import { token } from '@atlaskit/tokens';
 export const mediaStyles = css`
   .ProseMirror {
     ${mediaSingleSharedStyle} & [layout='full-width'] .${richMediaClassName},
@@ -95,7 +94,7 @@ export const mediaStyles = css`
 
   .${richMediaClassName}:hover .richMedia-resize-handle-left::after,
   .${richMediaClassName}:hover .richMedia-resize-handle-right::after {
-    background: ${token('color.border', N60)};
+    background: ${`var(--ds-border, ${N60})`};
   }
 
   .${akEditorSelectedNodeClassName} .richMedia-resize-handle-right::after,
@@ -104,7 +103,7 @@ export const mediaStyles = css`
   .${richMediaClassName} .richMedia-resize-handle-left:hover::after,
   .${richMediaClassName}.is-resizing .richMedia-resize-handle-right::after,
   .${richMediaClassName}.is-resizing .richMedia-resize-handle-left::after {
-    background: ${token('color.border.focused', B200)};
+    background: ${`var(--ds-border-focused, ${B200})`};
   }
 
   .__resizable_base__ {
@@ -116,42 +115,42 @@ export const mediaStyles = css`
   /* Danger when top level node for smart cards / inline links */
   .danger > div > div > .media-card-frame,
   .danger > span > a {
-    background-color: ${token('color.background.danger', akEditorDeleteBackground)};
+    background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     box-shadow: 0px 0px 0px ${akEditorSelectedBorderBoldSize}px
-      ${token('color.border.danger', akEditorDeleteBorder)};
+      ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
     transition: background-color 0s, box-shadow 0s;
   }
   .mediaGroupView-content-wrap.danger {
     /* Media inline */
     .${fileCardImageViewSelectedSelector}::after {
-      border: 1px solid ${token('color.border.danger', akEditorDeleteIconColor)};
+      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
     }
   }
   /* Danger when nested node or common */
   .danger {
     /* Media single */
     .${richMediaClassName} .${fileCardImageViewSelector}::after {
-      border: 1px solid ${token('color.border.danger', akEditorDeleteIconColor)};
+      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
     }
     /* Media single video player */
     .${richMediaClassName} .${inlinePlayerClassName}::after {
-      border: 1px solid ${token('color.border.danger', akEditorDeleteIconColor)};
+      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
     }
     /* New file experience */
     .${richMediaClassName} .${newFileExperienceClassName} {
       box-shadow: 0 0 0 1px
-        ${token('color.border.danger', akEditorDeleteIconColor)} !important;
+        ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
     }
     /* Media resize handlers */
     .richMedia-resize-handle-right::after,
     .richMedia-resize-handle-left::after {
-      background: ${token('color.icon.danger', akEditorDeleteIconColor)};
+      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
     }
 
     /* Smart cards */
     div div .media-card-frame,
     .inlineCardView-content-wrap > span > a {
-      background-color: ${token('color.blanket.danger', 'rgb(255, 189, 173, 0.5)')}; /* R75 with 50% opactiy */
+      background-color: ${"var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))"}; /* R75 with 50% opactiy */
       transition: background-color 0s;
     }
 

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

@@ -103,6 +103,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration(mediaGroup, false),
@@ -178,6 +179,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaInline, true),
     onMouseLeave: hoverDecoration(mediaInline, false),
@@ -271,6 +273,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     id: 'editor.media.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onMouseEnter: hoverDecoration(mediaSingle, true),
     onMouseLeave: hoverDecoration(mediaSingle, false),

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

@@ -3,10 +3,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
 const placeholder = css`
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   width: 100%;
   text-align: center;
   margin-top: 8px !important;

package/dist/es2019/plugins/media/ui/Media/DropPlaceholder.js

@@ -6,11 +6,10 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { hexToRgba } from '@atlaskit/adf-schema';
 import { injectIntl } from 'react-intl-next';
 import { dropPlaceholderMessages } from './drop-placeholder-messages';
-import { token } from '@atlaskit/tokens';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
 const iconWrapper = css`
-  color: ${token('color.icon.accent.blue', hexToRgba(B400, 0.4) || B400)};
-  background: ${token('color.background.accent.blue.subtle', hexToRgba(B300, 0.6) || B300)};
+  color: ${`var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`};
+  background: ${`var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`};
   border-radius: ${borderRadius()}px;
   margin: 5px 3px 25px;
   width: ${FILE_WIDTH}px;
@@ -20,7 +19,7 @@ const iconWrapper = css`
   justify-content: center;
 `;
 const dropLine = css`
-  background: ${token('color.border.focused', B200)};
+  background: ${`var(--ds-border-focused, ${B200})`};
   border-radius: ${borderRadius()}px;
   margin: 2px 0;
   width: 100%;

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

@@ -17,12 +17,11 @@ 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 ${token('color.border.danger', R400)};
+  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
   align-items: start;
   display: flex;
   flex-direction: column;

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

@@ -10,6 +10,7 @@ import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../uti
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
+import { getRandomHex } from '@atlaskit/media-common';
 
 const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
   action: ACTION.INSERTED,
@@ -185,6 +186,7 @@ export function transformSliceForMedia(slice, schema) {
     bulletList,
     orderedList,
     media,
+    mediaInline,
     expand
   } = schema.nodes;
   return selection => {
@@ -199,9 +201,24 @@ export function transformSliceForMedia(slice, schema) {
       });
     }
 
-    newSlice = mapSlice(newSlice, node => node.type.name === 'media' && node.attrs.type === 'external' ? media.createChecked({ ...node.attrs,
-      __external: true
-    }, node.content, node.marks) : node);
+    const __mediaTraceId = getRandomHex(8);
+
+    newSlice = mapSlice(newSlice, node => {
+      if (node.type.name === 'media') {
+        return media.createChecked({ ...node.attrs,
+          __external: node.attrs.type === 'external',
+          __mediaTraceId: node.attrs.type === 'external' ? null : __mediaTraceId
+        }, node.content, node.marks);
+      }
+
+      if (node.type.name === 'mediaInline') {
+        return mediaInline.createChecked({ ...node.attrs,
+          __mediaTraceId
+        }, node.content, node.marks);
+      }
+
+      return node;
+    });
     return newSlice;
   };
 }

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

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

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

@@ -4,7 +4,6 @@ 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';
@@ -54,7 +53,7 @@ const InviteItem = ({
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: token('color.icon.subtle', N300)
+    primaryColor: `var(--ds-icon-subtle, ${N300})`
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

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

@@ -1,6 +1,5 @@
 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;
@@ -30,7 +29,7 @@ export const nameSectionStyle = css`
   flex: 1;
   min-width: 0;
   margin-left: 14px;
-  color: ${token('color.text.subtle', N300)};
+  color: ${`var(--ds-text-subtle, ${N300})`};
   opacity: inherit;
 `;
 export const mentionItemStyle = css`
@@ -41,7 +40,7 @@ export const mentionItemStyle = css`
   cursor: pointer;
 `;
 export const mentionItemSelectedStyle = css`
-  background-color: ${token('color.background.neutral.subtle.hovered', N30)};
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
 `;
 export const capitalizedStyle = css`
   text-transform: capitalize;

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const panelStyles = props => css`
   .ProseMirror {
     .${PanelSharedCssClassName.prefix} {
@@ -11,10 +10,10 @@ export const panelStyles = props => css`
       &.danger {
         box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
           ${akEditorDeleteBorder};
-        background-color: ${token('color.background.danger', akEditorDeleteBackground)} !important;
+        background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
 
         .${PanelSharedCssClassName.icon} {
-          color: ${token('color.icon.danger', akEditorDeleteIconColor)} !important;
+          color: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
         }
       }
     }
@@ -26,10 +25,10 @@ export const panelStyles = props => css`
     /* Danger when nested node */
     .danger .${PanelSharedCssClassName.prefix} {
       &[data-panel-type] {
-        background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
+        background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
 
         .${PanelSharedCssClassName.icon} {
-          color: ${token('color.icon.danger', akEditorDeleteIconColor)};
+          color: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
         }
       }
     }

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

@@ -250,6 +250,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
     id: 'editor.panel.delete',
     type: 'button',
     appearance: 'danger',
+    focusEditoronEnter: true,
     icon: RemoveIcon,
     onClick: removePanel(),
     onMouseEnter: hoverDecoration(panelNodeType, true),

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

@@ -17,7 +17,7 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   } = attrs;
   const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
   const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
-  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelColor};` : ''}`, `${hasIcon ? '' : 'padding: 12px;'}`].join('');
+  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelColor};` : ''}`, `${hasIcon ? '' : 'padding-left: 12px;'}`].join('');
   let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,

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

@@ -2,7 +2,8 @@ import { createPlugin } from './pm-plugins/main';
 
 const pastePlugin = ({
   cardOptions,
-  sanitizePrivateContent
+  sanitizePrivateContent,
+  plainTextPasteLinkification
 }) => ({
   name: 'paste',
 

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

@@ -94,6 +94,17 @@ export function getContent(state, slice) {
   const pasteContent = contentToPasteContent[type];
   return pasteContent ? pasteContent : PasteContents.uncategorized;
 }
+export function getMediaTraceId(slice) {
+  let traceId;
+  mapSlice(slice, node => {
+    if (node.type.name === 'media' || node.type.name === 'mediaInline') {
+      traceId = node.attrs.__mediaTraceId;
+    }
+
+    return node;
+  });
+  return traceId;
+}
 
 function getActionSubjectId(view) {
   const {
@@ -163,7 +174,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
   const actionSubjectId = getActionSubjectId(view);
   const pasteSize = slice.size;
   const content = getContent(view.state, slice);
-  const linkUrls = []; // If we have a link among the pasted content, grab the
+  const linkUrls = [];
+  const mediaTraceId = getMediaTraceId(slice); // If we have a link among the pasted content, grab the
   // domain and send it up with the analytics event
 
   if (content === PasteContents.url || content === PasteContents.mixed) {
@@ -202,7 +214,8 @@ export function createPasteAnalyticsPayload(view, event, slice, pasteContext) {
     content,
     source,
     hyperlinkPasteOnText: !!pasteContext.hyperlinkPasteOnText,
-    linksInPasteCount: linkUrls.length
+    linksInPasteCount: linkUrls.length,
+    mediaTraceId
   }, linkDomains);
 } // TODO: ED-6612 We should not dispatch only analytics, it's preferred to wrap each command with his own analytics.
 // However, handlers like handleMacroAutoConvert dispatch multiple time,

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

@@ -238,7 +238,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptio
           }
         }
 
-        slice = transformUnsupportedBlockCardToInline(slice, state); // Handles edge case so that when copying text from the top level of the document
+        slice = transformUnsupportedBlockCardToInline(slice, state, cardOptions); // Handles edge case so that when copying text from the top level of the document
         // it can be pasted into nodes like panels/actions/decisions without removing them.
         // Overriding openStart to be 1 when only pasting a paragraph makes the preferred
         // depth favour the text, rather than the paragraph node.

package/dist/es2019/plugins/paste/util/index.js

@@ -103,8 +103,8 @@ export function isCode(str) {
 // @see https://github.com/markdown-it/markdown-it/issues/38
 
 export function escapeLinks(text) {
-  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp):\/\/[^\s]+)/g, str => {
-    return str.match(/^(https?|ftp):\/\/[^\s]+$/) ? `<${str}>` : str;
+  return text.replace(/(\[([^\]]+)\]\()?((https?|ftp|jamfselfservice):\/\/[^\s]+)/g, str => {
+    return str.match(/^(https?|ftp|jamfselfservice):\/\/[^\s]+$/) ? `<${str}>` : str;
   });
 }
 export function hasOnlyNodesOfType(...nodeTypes) {

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

@@ -2,9 +2,7 @@ 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';
-import { pluginKey as alignmentPluginKey } from '../alignment/pm-plugins/main';
-import { placeHolderClassName } from './styles';
+import { isEmptyDocument, bracketTyped } from '../../utils/document';
 export const pluginKey = new PluginKey('placeholderPlugin');
 import { focusStateKey } from '../base/pm-plugins/focus-handler';
 import { isTypeAheadOpen } from '../type-ahead/utils';
@@ -14,21 +12,23 @@ function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
 }
 
+export const placeholderTestId = 'placeholder-test-id';
 export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
   const placeholderDecoration = document.createElement('span');
-  let placeHolderClass = placeHolderClassName;
-  const alignment = alignmentPluginKey.getState(editorState);
+  let placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration'; // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
+  // So adding an extra span which will contain the placeholder text
 
-  if (alignment && alignment.align === 'end') {
-    placeHolderClass = placeHolderClass + ' align-end';
-  } else if (alignment && alignment.align === 'center') {
-    placeHolderClass = placeHolderClass + ' align-center';
+  if (browser.gecko) {
+    const placeholderNode = document.createElement('span');
+    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
+
+    placeholderDecoration.appendChild(placeholderNode);
+    placeholderNodeWithText = placeholderNode;
   }
 
-  placeholderDecoration.className = placeHolderClass;
-  const placeholderNode = document.createElement('span');
-  placeholderNode.textContent = placeholderText;
-  placeholderDecoration.appendChild(placeholderNode); // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
+  placeholderNodeWithText.textContent = placeholderText || ' '; // 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
 
@@ -40,7 +40,7 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
   }
 
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
-    side: -1,
+    side: 0,
     key: 'placeholder'
   })]);
 }
@@ -57,7 +57,7 @@ const emptyPlaceholder = {
   hasPlaceholder: false
 };
 
-function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText) {
+function createPlaceHolderStateFrom(editorState, defaultPlaceholderText, bracketPlaceholderText) {
   const isEditorFocused = focusStateKey.getState(editorState);
 
   if (isTypeAheadOpen(editorState)) {
@@ -68,15 +68,6 @@ function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defa
     return setPlaceHolderState(defaultPlaceholderText);
   }
 
-  const placeholderHint = getPlaceholderHintMessage();
-
-  if (placeholderHint && isInEmptyLine(editorState) && isEditorFocused) {
-    const {
-      $from
-    } = editorState.selection;
-    return setPlaceHolderState(placeholderHint, $from.pos);
-  }
-
   if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
     const {
       $from
@@ -89,32 +80,15 @@ function createPlaceHolderStateFrom(editorState, getPlaceholderHintMessage, defa
   return emptyPlaceholder;
 }
 
-function createGetPlaceholderHintMessage(placeholderHints) {
-  let index = 0;
-  return () => {
-    if (!placeholderHints || placeholderHints.length === 0) {
-      return;
-    }
-
-    const {
-      length
-    } = placeholderHints;
-    const placeholder = placeholderHints[index++];
-    index = index % length;
-    return placeholder;
-  };
-}
-
-export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPlaceholderText) {
-  if (!defaultPlaceholderText && !placeholderHints && !bracketPlaceholderText) {
+export function createPlugin(defaultPlaceholderText, bracketPlaceholderText) {
+  if (!defaultPlaceholderText && !bracketPlaceholderText) {
     return;
   }
 
-  const getPlaceholderHintMessage = createGetPlaceholderHintMessage(placeholderHints);
   return new SafePlugin({
     key: pluginKey,
     state: {
-      init: (_, state) => createPlaceHolderStateFrom(state, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText),
+      init: (_, state) => createPlaceHolderStateFrom(state, defaultPlaceholderText, bracketPlaceholderText),
       apply: (tr, _oldPluginState, _oldEditorState, newEditorState) => {
         const meta = tr.getMeta(pluginKey);
 
@@ -124,11 +98,11 @@ export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPl
           }
 
           if (meta.applyPlaceholderIfEmpty) {
-            return createPlaceHolderStateFrom(newEditorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+            return createPlaceHolderStateFrom(newEditorState, defaultPlaceholderText, bracketPlaceholderText);
           }
         }
 
-        return createPlaceHolderStateFrom(newEditorState, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText);
+        return createPlaceHolderStateFrom(newEditorState, defaultPlaceholderText, bracketPlaceholderText);
       }
     },
     props: {
@@ -156,7 +130,7 @@ const placeholderPlugin = options => ({
   pmPlugins() {
     return [{
       name: 'placeholder',
-      plugin: () => createPlugin(options && options.placeholder, options && options.placeholderHints, options && options.placeholderBracketHint)
+      plugin: () => createPlugin(options && options.placeholder, options && options.placeholderBracketHint)
     }];
   }
 

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

@@ -1,29 +1,10 @@
 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: ${token('color.text.subtlest', N200)};
+  .ProseMirror .placeholder-decoration {
+    color: ${`var(--ds-text-subtlest, ${N200})`};
     width: 100%;
-
     pointer-events: none;
-    display: block;
     user-select: none;
-
-    > span {
-      position: absolute;
-      pointer-events: none;
-      outline: none;
-    }
-
-    &.align-end > span {
-      right: 0;
-    }
-
-    &.align-center > span {
-      left: 0;
-    }
   }
 `;

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

@@ -1,20 +1,19 @@
 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: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
     display: inline;
   }
 
   .ProseMirror span.pm-placeholder {
     display: inline;
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
   }
   .ProseMirror span.pm-placeholder__text {
     display: inline;
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
   }
 
   .ProseMirror span.pm-placeholder.${akEditorSelectedNodeClassName} {
@@ -22,7 +21,7 @@ export const placeholderTextStyles = css`
   }
 
   .ProseMirror span.pm-placeholder__text[data-placeholder]::after {
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
     cursor: text;
     content: attr(data-placeholder);
     display: inline;

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const ruleStyles = props => css`
   .ProseMirror {
     ${ruleSharedStyles(props)};
@@ -14,7 +13,7 @@ export const ruleStyles = props => css`
 
       &.${akEditorSelectedNodeClassName} {
         outline: none;
-        background-color: ${token('color.border.selected', akEditorSelectedBorderColor)};
+        background-color: ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`};
       }
     }
   }

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

@@ -12,7 +12,6 @@ import { N0 } from '@atlaskit/theme/colors';
 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 +22,10 @@ export let InputMethod;
 })(InputMethod || (InputMethod = {}));
 
 const pickerContainer = css`
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
   padding: ${gridSize()}px 0;
   border-radius: ${borderRadius()}px;
-  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)')};
+  box-shadow: ${"var(--ds-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;
   }