@atlaskit/editor-core 175.0.5 → 176.0.0

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -75,11 +75,12 @@ export const ExtensionsPlaceholder = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
+  const nodeAdf = React.useMemo(() => nodeToJSON(node), [node]);
   const extensionItems = React.useMemo(() => {
-    return getContextualToolbarItemsFromModule(extensions, nodeToJSON(node), createExtensionAPI({
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, createExtensionAPI({
       editorView
     }));
-  }, [extensions, node, editorView]);
+  }, [extensions, nodeAdf, editorView]);
 
   if (!extensionItems.length) {
     return null;

package/dist/es2019/plugins/floating-toolbar/ui/Select.js

@@ -10,9 +10,14 @@ export default function Search(props) {
       width
     }),
     menuPortal: base => {
-      var _selectRef$current;
+      var _selectRef$current, _selectRef$current$se, _selectRef$current$se2, _selectRef$current2, _selectRef$current2$s, _selectRef$current2$s2, _selectRef$current2$s3;
 
-      const controlWrapper = selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.select.select.controlRef.parentNode;
+      // ED:16095: We add two possible getter paths for safely reaching into the underlying
+      // react-select element. We first try a getter that conforms with react-select v5 APIs,
+      // Failing that, we try a getter consistent with react-select v4 APIs. (We
+      // handle both as consumers may control the time of the actual dependency version
+      // cutover).
+      const controlWrapper = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : (_selectRef$current$se = _selectRef$current.select) === null || _selectRef$current$se === void 0 ? void 0 : (_selectRef$current$se2 = _selectRef$current$se.controlRef) === null || _selectRef$current$se2 === void 0 ? void 0 : _selectRef$current$se2.parentNode) || (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : (_selectRef$current2$s = _selectRef$current2.select) === null || _selectRef$current2$s === void 0 ? void 0 : (_selectRef$current2$s2 = _selectRef$current2$s.select) === null || _selectRef$current2$s2 === void 0 ? void 0 : (_selectRef$current2$s3 = _selectRef$current2$s2.controlRef) === null || _selectRef$current2$s3 === void 0 ? void 0 : _selectRef$current2$s3.parentNode);
       const menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
         // since the portal is now outside, we need to position it as before
         top: controlWrapper.offsetTop,
@@ -51,6 +56,7 @@ export default function Search(props) {
     styles: style,
     menuPortalTarget: props.mountPoint,
     onMenuOpen: onMenuOpen,
-    onMenuClose: onMenuClose
+    onMenuClose: onMenuClose,
+    "aria-label": props.ariaLabel
   });
 }

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -344,6 +344,7 @@ class Toolbar extends Component {
       if (event.key === 'Escape') {
         var _this$props$editorVie;
 
+        this.currentSelectedItemIndex = 0;
         (_this$props$editorVie = this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
         event.preventDefault();
         event.stopPropagation();

package/dist/es2019/plugins/help-dialog/ui/index.js

@@ -243,8 +243,7 @@ export const formatting = ({
   keymap: () => keymaps.alignLeft
 }, {
   name: formatMessage(alignmentMessages.alignRight),
-  type: 'alignment',
-  keymap: () => keymaps.alignRight
+  type: 'alignment'
 }];
 const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
 

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/create-items.js

@@ -70,8 +70,8 @@ const createInsertBlockItems = config => {
 
   if (mediaSupported && mediaUploadsEnabled) {
     items.push(media({
-      content: formatMessage(messages.filesAndImages),
-      tooltipDescription: formatMessage(messages.filesAndImagesDescription),
+      content: formatMessage(messages.addMediaFiles),
+      tooltipDescription: formatMessage(messages.mediaFilesDescription),
       disabled: false
     }));
   }

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -84,13 +84,19 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     });
 
-    _defineProperty(this, "togglePlusMenuVisibility", () => {
+    _defineProperty(this, "togglePlusMenuVisibility", event => {
       const {
         isPlusMenuOpen
       } = this.state;
       this.onOpenChange({
         isPlusMenuOpen: !isPlusMenuOpen
       });
+
+      if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
+        var _ref;
+
+        (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : _ref.focus();
+      }
     });
 
     _defineProperty(this, "toggleEmojiPicker", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -118,7 +124,10 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
 
     _defineProperty(this, "handleEmojiPressEscape", () => {
+      var _this$emojiButtonRef;
+
       this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
+      (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : _this$emojiButtonRef.focus();
     });
 
     _defineProperty(this, "handleEmojiClickOutside", e => {
@@ -155,6 +164,10 @@ export class ToolbarInsertBlock extends React.PureComponent {
       }
     });
 
+    _defineProperty(this, "handleClick", () => {
+      this.togglePlusMenuVisibility();
+    });
+
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
       const {
         editorView
@@ -559,7 +572,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       items: this.state.dropdownItems,
       onRef: this.handleDropDownButtonRef,
       onPlusButtonRef: this.handlePlusButtonRef,
-      onClick: this.togglePlusMenuVisibility,
+      onClick: this.handleClick,
       onItemActivated: this.insertInsertMenuItem,
       onInsert: this.insertInsertMenuItem,
       onOpenChange: this.onOpenChange,

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

@@ -175,8 +175,8 @@ const mediaPlugin = options => ({
       formatMessage
     }) => [{
       id: 'media',
-      title: formatMessage(messages.filesAndImages),
-      description: formatMessage(messages.filesAndImagesDescription),
+      title: formatMessage(messages.mediaFiles),
+      description: formatMessage(messages.mediaFilesDescription),
       priority: 400,
       keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
       icon: () => /*#__PURE__*/React.createElement(IconImages, null),

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -13,7 +13,7 @@ import { pluginKey as widthPluginKey } from '../../width';
 import { setNodeSelection, setTextSelection } from '../../../utils';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { createDisplayGrid } from '../../../plugins/grid';
-import { stateKey as mediaPluginKey } from '../pm-plugins/main';
+import { stateKey as mediaPluginKey, MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -37,6 +37,10 @@ export default class MediaSingleNode extends Component {
       isCopying: false
     });
 
+    _defineProperty(this, "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(this, "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "createMediaNodeUpdater", props => {
       const node = this.props.node.firstChild;
       return new MediaNodeUpdater({ ...props,
@@ -161,6 +165,20 @@ export default class MediaSingleNode extends Component {
       return dispatch(tr);
     });
 
+    _defineProperty(this, "onMediaSingleClicked", event => {
+      var _this$captionPlaceHol;
+
+      if (!browser.ios) {
+        return;
+      }
+
+      if (this.mediaSingleWrapperRef.current !== event.target) {
+        return;
+      }
+
+      (_this$captionPlaceHol = this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
+    });
+
     _defineProperty(this, "clickPlaceholder", () => {
       const {
         view,
@@ -304,11 +322,14 @@ export default class MediaSingleNode extends Component {
     const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     const MediaChildren = jsx("figure", {
+      ref: this.mediaSingleWrapperRef,
       css: figureWrapper,
-      className: MediaSingleNodeSelector
+      className: MediaSingleNodeSelector,
+      onClick: this.onMediaSingleClicked
     }, jsx("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
+      ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
     return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
@@ -373,7 +394,7 @@ class MediaSingleNodeView extends ReactNodeView {
 
   getContentDOM() {
     const dom = document.createElement('div');
-    dom.classList.add(`media-content-wrap`);
+    dom.classList.add(MEDIA_CONTENT_WRAP_CLASS_NAME);
     return {
       dom
     };

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

@@ -25,6 +25,7 @@ import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
 import { RawIntlProvider } from 'react-intl-next';
 import { MediaTaskManager } from './mediaTaskManager';
 export { stateKey } from './plugin-key';
+export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 
 const createDropPlaceholder = (intl, allowDropLine) => {
   const dropPlaceholder = document.createElement('div');
@@ -717,7 +718,19 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
         // 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) && clickedInsideCaptionPlaceholder);
+        if ((browser.chrome || browser.safari) && clickedInsideCaptionPlaceholder) {
+          return true;
+        } // Workaound for iOS 16 Caption selection issue
+        // @see https://product-fabric.atlassian.net/browse/MEX-2012
+
+
+        if (browser.ios) {
+          var _event$target2;
+
+          return !!((_event$target2 = event.target) !== null && _event$target2 !== void 0 && _event$target2.closest(`[class="${MEDIA_CONTENT_WRAP_CLASS_NAME}"]`));
+        }
+
+        return false;
       }
     }
   });

package/dist/es2019/plugins/media/toolbar/alt-text.js

@@ -27,6 +27,7 @@ export const altTextEditComponent = options => {
   return {
     type: 'custom',
     fallback: [],
+    disableArrowNavigation: true,
     render: (view, idx) => {
       if (!view) {
         return null;

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

@@ -48,6 +48,7 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
         items: [{
           type: 'custom',
           fallback: [],
+          disableArrowNavigation: true,
           render: (view, idx) => {
             if (!view || !providerFactory) {
               return null;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { N200 } from '@atlaskit/theme/colors';
@@ -12,10 +13,11 @@ const placeholder = css`
   display: block;
 `;
 export const CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
-export default (({
+export default /*#__PURE__*/React.forwardRef(({
   onClick
-}) => {
+}, ref) => {
   return jsx("span", {
+    ref: ref,
     css: placeholder,
     onClick: onClick,
     "data-id": CAPTION_PLACEHOLDER_ID,

package/dist/es2019/plugins/media/ui/ToolbarMedia/toolbar-media-messages.js

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl-next';
 export const toolbarMediaMessages = defineMessages({
   toolbarMediaTitle: {
     id: 'fabric.editor.toolbarMediaTitle',
-    defaultMessage: 'Files & images',
-    description: 'a label for an icon that describes files and images'
+    defaultMessage: 'Add image, video, or file',
+    description: 'a label for an icon that describes files, videos and images'
   }
 });

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

@@ -14,5 +14,10 @@ export const messages = defineMessages({
     id: 'fabric.editor.mentionsIconLabel',
     defaultMessage: 'Mention',
     description: 'icon label to describe the mention icon'
+  },
+  mentionsNodeLabel: {
+    id: 'fabric.editor.mentionNode.label',
+    defaultMessage: 'Tagged user',
+    description: 'Label to indicate mention node to Screen reader users, that preceeds with user name ex: "Tagged user @XXX'
   }
 });

package/dist/es2019/plugins/mentions/nodeviews/mention.js

@@ -1,5 +1,15 @@
 import React from 'react';
 import Mention from '../ui/Mention';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../messages';
+const MentionAssistiveTextComponent = /*#__PURE__*/React.memo(({
+  mentionedName
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement("span", {
+    className: 'assistive'
+  }, `${intl.formatMessage(messages.mentionsNodeLabel)} ${mentionedName}`);
+});
 export const MentionNodeView = props => {
   const {
     providerFactory
@@ -9,10 +19,14 @@ export const MentionNodeView = props => {
     text,
     accessLevel
   } = props.node.attrs;
-  return /*#__PURE__*/React.createElement(Mention, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
+    mentionedName: text
+  }), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Mention, {
     id: id,
     text: text,
     accessLevel: accessLevel,
     providers: providerFactory
-  });
+  })));
 };

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

@@ -16,12 +16,13 @@ export const mentionsStyles = css`
 
   .danger {
     .${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}
+      > span
       > span
       > span {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
       background-color: ${token('color.background.danger', akEditorDeleteBackgroundWithOpacity)};
     }
-    .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span {
+    .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
       background-color: ${token('color.background.neutral', N30A)};
       color: ${token('color.text.subtle', N500)};
     }

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

@@ -4,6 +4,8 @@ import React from 'react';
 import { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
 import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { browser } from '@atlaskit/editor-common/utils';
+import { refreshBrowserSelection } from '../../../code-block/refresh-browser-selection';
 export default class Mention extends PureComponent {
   constructor(props) {
     super(props);
@@ -33,6 +35,16 @@ export default class Mention extends PureComponent {
     this.providerFactory = props.providers || new ProviderFactory();
   }
 
+  componentDidMount() {
+    // Workaround an issue where the selection is not updated immediately after adding
+    // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+    // This affects both insertion and paste behaviour it is applied to the component.
+    // https://product-fabric.atlassian.net/browse/ED-14859
+    if (browser.safari) {
+      setTimeout(refreshBrowserSelection, 0);
+    }
+  }
+
   componentWillUnmount() {
     if (!this.props.providers) {
       // new ProviderFactory is created if no `providers` has been set

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

@@ -2,7 +2,7 @@ import { removeParentNodeOfType, findSelectedNodeOfType, removeSelectedNode, fin
 import { NodeSelection } from 'prosemirror-state';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';
 import { findPanel } from './utils';
-import { getPanelTypeBackground } from '@atlaskit/editor-common/panel';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 export const removePanel = () => (state, dispatch) => {
   const {
     schema: {
@@ -54,7 +54,7 @@ export const changePanelType = (panelType, panelOptions = {}, allowCustomPanel =
   let newTr;
 
   if (allowCustomPanel) {
-    let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(previousType);
+    let previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
     let previousIcon = panelNode.node.attrs.panelIcon;
     let previousIconId = panelNode.node.attrs.panelIconId;
     let previousIconText = panelNode.node.attrs.panelIconText;

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

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

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

@@ -9,7 +9,7 @@ import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBackgroundPalette';
-import { getPanelTypeBackground } from '@atlaskit/editor-common/panel';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
@@ -94,7 +94,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         return false;
       }
 
-      let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
+      let previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(panelNode.node.attrs.panelType);
       const emojiInfo = panelNode.node.attrs.panelType;
       const panelEmoji = panelIconMap[emojiInfo];
       const previousEmoji = panelEmoji ? {
@@ -191,7 +191,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
       return false;
     };
 
-    const panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackground(PanelType.INFO) : getPanelTypeBackground(activePanelType);
+    const panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackgroundNoTokens(PanelType.INFO) : getPanelTypeBackgroundNoTokens(activePanelType);
     const defaultPalette = panelBackgroundPalette.find(item => item.value === panelColor) || {
       label: 'Custom',
       value: panelColor,

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

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

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

@@ -30,7 +30,7 @@ import { extractSliceFromStep } from '../../../utils/step';
 import { pluginKey as stateKey, createPluginState } from './plugin-factory';
 export { pluginKey as stateKey } from './plugin-factory';
 export { md } from '../md';
-export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory) {
+export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptions, sanitizePrivateContent, providerFactory) {
   const atlassianMarkDownParser = new MarkdownTransformer(schema, md);
 
   function getMarkdownSlice(text, openStart, openEnd) {
@@ -200,7 +200,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainText
         };
 
         slice = handleParagraphBlockMarks(state, slice);
-        const plainTextPasteSlice = plainTextPasteLinkification === true ? linkifyContent(state.schema)(slice) : slice;
+        const plainTextPasteSlice = linkifyContent(state.schema)(slice);
 
         if (handlePasteAsPlainTextWithAnalytics(view, event, plainTextPasteSlice)(state, dispatch, view)) {
           return true;

package/dist/es2019/plugins/quick-insert/assets/action.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconAction() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/code.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconCode() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/custom-panel.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconCustomPanel() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/date.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconDate() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/decision.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconDecision() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/divider.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconDivider() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/emoji.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconEmoji() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/expand.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconExpand() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/fallback.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconFallback() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/feedback.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconFeedback() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/heading1.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading1() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/heading2.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading2() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/heading3.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading3() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/heading4.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading4() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/heading5.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading5() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/heading6.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading6() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/images.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconImages() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/layout.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconLayout() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/link.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconLink() {
   return /*#__PURE__*/React.createElement("svg", {