@atlaskit/editor-common 76.33.2 → 76.35.0

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -0,0 +1,283 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { createDispatch } from '../../event-dispatcher';
+import { useSharedPluginState } from '../../hooks';
+import { analyticsEventKey, calculateBreakoutStyles } from '../../utils';
+import { WithPluginState } from '../../with-plugin-state';
+const useMultiBodiedExtensionActions = ({
+  updateActiveChild,
+  editorView,
+  getPos,
+  node,
+  eventDispatcher
+}) => {
+  const actions = React.useMemo(() => {
+    return {
+      changeActive(index) {
+        const updateActiveChildResult = updateActiveChild(index);
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.CHANGE_ACTIVE, node, eventDispatcher);
+        }
+        return updateActiveChildResult;
+      },
+      addChild() {
+        const {
+          state,
+          dispatch
+        } = editorView;
+        if (node.content.childCount >= node.attrs.maxFrames) {
+          throw new Error(`Cannot add more than ${node.attrs.maxFrames} frames`);
+        }
+        const p = state.schema.nodes.paragraph.createAndFill({});
+        if (!p) {
+          throw new Error('Could not create paragraph');
+        }
+        const frame = state.schema.nodes.extensionFrame.createAndFill({}, [p]);
+        const pos = getPos();
+        if (typeof pos !== 'number' || !frame) {
+          throw new Error('Could not create frame or position not valid');
+        }
+        const insertAt = Math.min((pos || 1) + node.content.size, state.doc.content.size);
+        dispatch(state.tr.insert(insertAt, frame));
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.ADD_CHILD, node, eventDispatcher);
+        }
+        return true;
+      },
+      getChildrenCount() {
+        return node.content.childCount;
+      },
+      removeChild(index) {
+        const pos = getPos();
+        // TODO: Add child index validation here, don't trust this data
+        if (typeof pos !== 'number' || typeof index !== 'number') {
+          throw new Error('Position or index not valid');
+        }
+        const {
+          state,
+          dispatch
+        } = editorView;
+        if (node.content.childCount === 1) {
+          const tr = state.tr;
+          tr.deleteRange(pos, pos + node.content.size);
+          dispatch(tr);
+          return true;
+        }
+        const $pos = state.doc.resolve(pos);
+        const $startNodePos = state.doc.resolve($pos.start($pos.depth + 1));
+        const startFramePosition = $startNodePos.posAtIndex(index);
+        const maybeFrameNode = state.doc.nodeAt(startFramePosition);
+        if (!maybeFrameNode) {
+          throw new Error('Could not find frame node');
+        }
+        const endFramePosition = maybeFrameNode.content.size + startFramePosition;
+        const tr = state.tr;
+        tr.deleteRange(startFramePosition, endFramePosition);
+        dispatch(tr);
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.REMOVE_CHILD, node, eventDispatcher);
+        }
+        return true;
+      },
+      updateParameters(parameters) {
+        const {
+          state,
+          dispatch
+        } = editorView;
+        const pos = getPos();
+        if (typeof pos !== 'number') {
+          throw new Error('Position not valid');
+        }
+        const tr = state.tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          parameters: {
+            ...node.attrs.parameters,
+            macroParams: parameters
+          }
+        });
+        dispatch(tr);
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.UPDATE_PARAMETERS, node, eventDispatcher);
+        }
+        return true;
+      },
+      getChildren() {
+        var _state$doc$nodeAt;
+        const {
+          state
+        } = editorView;
+        const pos = getPos();
+        if (typeof pos !== 'number') {
+          return [];
+        }
+        const children = (_state$doc$nodeAt = state.doc.nodeAt(pos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.content;
+        if (eventDispatcher) {
+          sendMBEAnalyticsEvent(ACTION.GET_CHILDERN, node, eventDispatcher);
+        }
+        return children ? children.toJSON() : [];
+      }
+    };
+  }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
+  return actions;
+};
+const navigationCSS = css`
+  // make sure the user can't see a range selection inside the navigation
+  // This is really important to keep the navigation working properly
+  user-select: none;
+  -webkit-user-modify: read-only;
+  border: 1px solid ${`var(--ds-border, ${N40})`};
+`;
+const MultiBodiedExtensionWithWidth = ({
+  node,
+  handleContentDOMRef,
+  getPos,
+  tryExtensionHandler,
+  editorView,
+  eventDispatcher,
+  widthState,
+  editorAppearance
+}) => {
+  const [activeChildIndex, setActiveChildIndex] = useState(0);
+  // Adding to avoid aliasing `this` for the callbacks
+  const updateActiveChild = React.useCallback(index => {
+    if (typeof index !== 'number') {
+      setActiveChildIndex(0);
+      throw new Error('Index is not valid');
+    }
+    setActiveChildIndex(index);
+    return true;
+  }, [setActiveChildIndex]);
+  const actions = useMultiBodiedExtensionActions({
+    updateActiveChild,
+    editorView,
+    getPos,
+    eventDispatcher,
+    node
+  });
+  const extensionHandlerResult = React.useMemo(() => {
+    return tryExtensionHandler(actions);
+  }, [tryExtensionHandler, actions]);
+  const articleRef = React.useCallback(node => {
+    return handleContentDOMRef(node);
+  }, [handleContentDOMRef]);
+  const containerCSS = css`
+    border: 1px solid ${`var(--ds-border, ${N30})`};
+    min-height: 100px;
+    .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {
+      display: none;
+    }
+
+    .multiBodiedExtension-content-dom-wrapper
+      > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
+      border: 1px solid ${`var(--ds-border, ${N50})`};
+      display: block;
+      min-height: 100px;
+    }
+  `;
+  const shouldBreakout =
+  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
+  ['full-width', 'wide'].includes(node.attrs.layout) &&
+  // Extension breakout state should not be respected when the editor appearance is full-width mode
+  editorAppearance !== 'full-width';
+  let mbeContainerStyles = {};
+  if (shouldBreakout) {
+    const {
+      ...breakoutStyles
+    } = calculateBreakoutStyles({
+      mode: node.attrs.layout,
+      widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+      widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
+    });
+    mbeContainerStyles = breakoutStyles;
+  }
+  return jsx("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex,
+    style: mbeContainerStyles
+  }, jsx("nav", {
+    className: "multiBodiedExtension-navigation",
+    css: navigationCSS,
+    "data-testid": "multiBodiedExtension-navigation"
+  }, extensionHandlerResult), jsx("article", {
+    className: "multiBodiedExtension--frames",
+    "data-testid": "multiBodiedExtension--frames",
+    ref: articleRef
+  }));
+};
+const sendMBEAnalyticsEvent = (action, node, eventDispatcher) => {
+  const analyticsDispatch = createDispatch(eventDispatcher);
+  analyticsDispatch(analyticsEventKey, {
+    payload: {
+      action,
+      actionSubject: ACTION_SUBJECT.MULTI_BODIED_EXTENSION,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        extensionType: node.attrs.extensionType,
+        extensionKey: node.attrs.extensionKey,
+        localId: node.attrs.localId,
+        maxFramesCount: node.attrs.maxFrames,
+        currentFramesCount: node.content.childCount
+      }
+    }
+  });
+};
+const MultiBodiedExtensionWithSharedState = props => {
+  const {
+    pluginInjectionApi
+  } = props;
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return jsx(MultiBodiedExtensionWithWidth, _extends({
+    widthState: widthState
+  }, props));
+};
+
+// Workaround taken from platform/packages/editor/editor-core/src/plugins/extension/ui/Extension/Extension/index.tsx
+const MultiBodiedExtension = props => {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  const {
+    pluginInjectionApi
+  } = props;
+  return pluginInjectionApi === undefined ? jsx(MultiBodiedExtensionDeprecated, props) : jsx(MultiBodiedExtensionWithSharedState, props);
+};
+
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+const widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: state => {
+    return state['widthPlugin$'];
+  }
+};
+const MultiBodiedExtensionDeprecated = props => {
+  return jsx(WithPluginState, {
+    editorView: props.editorView,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: ({
+      widthState
+    }) => jsx(MultiBodiedExtensionWithWidth, _extends({
+      widthState: widthState
+    }, props))
+  });
+};
+/**
+ * End workaround
+ */
+
+export default MultiBodiedExtension;

package/dist/es2019/extensibility/extensionNodeView.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactNodeView from '../react-node-view';
+import { Extension } from './Extension';
+import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
+// getInlineNodeViewProducer is a new api to use instead of ReactNodeView
+// when creating inline node views, however, it is difficult to test the impact
+// on selections when migrating inlineExtension to use the new api.
+// The ReactNodeView api will be visited in the second phase of the selections
+// project whilst investigating block nodes. We will revisit the Extension node view there too.
+export class ExtensionNode extends ReactNodeView {
+  ignoreMutation(mutation) {
+    // Extensions can perform async operations that will change the DOM.
+    // To avoid having their tree rebuilt, we need to ignore the mutation
+    // for atom based extensions if its not a layout, we need to give
+    // children a chance to recalc
+    return this.node.type.isAtom || mutation.type !== 'selection' && mutation.attributeName !== 'data-layout';
+  }
+  getContentDOM() {
+    if (this.node.isInline) {
+      return;
+    }
+    const dom = document.createElement('div');
+    dom.className = `${this.node.type.name}-content-dom-wrapper`;
+    return {
+      dom
+    };
+  }
+  render(props, forwardRef) {
+    var _props$extensionNodeV;
+    return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
+      nodeType: this.node.type.name
+    }, /*#__PURE__*/React.createElement(Extension, {
+      editorView: this.view,
+      node: this.node,
+      eventDispatcher: this.eventDispatcher
+      // The getPos arg is always a function when used with nodes
+      // the version of the types we use has a union with the type
+      // for marks.
+      // This has been fixed in later versions of the definitly typed
+      // types (and also in prosmirror-views inbuilt types).
+      // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57384
+      ,
+      getPos: this.getPos,
+      providerFactory: props.providerFactory,
+      handleContentDOMRef: forwardRef,
+      extensionHandlers: props.extensionHandlers,
+      editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
+      pluginInjectionApi: props.pluginInjectionApi
+    }));
+  }
+}
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory,
+      extensionHandlers,
+      extensionNodeViewOptions,
+      pluginInjectionApi
+    }, undefined, undefined, undefined, hasIntlContext).init();
+  };
+}

package/dist/es2019/extensibility/index.js

@@ -0,0 +1,4 @@
+export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
+export { Extension } from './Extension';
+export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
+export { ExtensionComponent } from './ExtensionComponent';

package/dist/es2019/extensibility/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -18,7 +18,8 @@ export const MediaInlineImageCardInternal = ({
   isLazy,
   width,
   height,
-  border
+  border,
+  ssr
 }) => {
   const [fileState, setFileState] = useState();
   const [subscribeError, setSubscribeError] = useState();
@@ -28,21 +29,23 @@ export const MediaInlineImageCardInternal = ({
     locale: 'en'
   });
   useEffect(() => {
-    const subscription = mediaClient.file.getFileState(identifier.id, {
-      collectionName: identifier.collectionName
-    }).subscribe({
-      next: fileState => {
-        setFileState(fileState);
-        setSubscribeError(undefined);
-      },
-      error: e => {
-        setSubscribeError(e);
-      }
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [identifier.collectionName, identifier.id, mediaClient.file]);
+    if (mediaClient) {
+      const subscription = mediaClient.file.getFileState(identifier.id, {
+        collectionName: identifier.collectionName
+      }).subscribe({
+        next: fileState => {
+          setFileState(fileState);
+          setSubscribeError(undefined);
+        },
+        error: e => {
+          setSubscribeError(e);
+        }
+      });
+      return () => {
+        subscription.unsubscribe();
+      };
+    }
+  }, [identifier, mediaClient]);
   const content = dimensions => {
     if (subscribeError) {
       const isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
@@ -67,25 +70,27 @@ export const MediaInlineImageCardInternal = ({
         message: formatMessage(messages.unableToLoadContent)
       });
     }
+    const mediaClientConfig = (ssr === null || ssr === void 0 ? void 0 : ssr.config) || (mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig);
     if (!fileState) {
       return jsx(InlineImageCardLoadingView, null);
     }
     return jsx(Card, {
-      mediaClientConfig: mediaClient.mediaClientConfig,
+      mediaClientConfig: mediaClientConfig,
       isLazy: isLazy,
       identifier: identifier,
       dimensions: dimensions,
       selectable: true,
       disableOverlay: true,
       selected: isSelected,
-      alt: alt
+      alt: alt,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     });
   };
   const aspectRatio = useMemo(() => width && height ? width / height : undefined, [width, height]);
 
   /**
    * scaledDimensions is used to define the correct media size fetched from media service
-   * inline images will only ever be rendererd at a maximum height of H1 and so scaled dimensions
+   * inline images will only ever be rendered at a maximum height of H1 and so scaled dimensions
    * will only ever return a width and height where the height has a maximum height of H1
    */
   const scaledDimension = useMemo(() => {

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "76.33.2";
+const packageVersion = "76.35.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it
@@ -50,13 +50,14 @@ export const logException = async (error, tags) => {
     const hub = getCurrentHub();
     hub.bindClient(client);
     hub.withScope(scope => {
+      var _buildInfo;
       scope.setTags({
         // Jira environment variables
         'jira-bundler': window.BUNDLER_VERSION,
         'jira-variant': window.BUILD_VARIANT,
         'jira-release': window.BUILD_KEY,
         // Confluence environment variables
-        'confluence-frontend-version': window.__buildInfo.FRONTEND_VERSION,
+        'confluence-frontend-version': (_buildInfo = window.__buildInfo) === null || _buildInfo === void 0 ? void 0 : _buildInfo.FRONTEND_VERSION,
         ...tags
       });
       // Explicitly remove the breadcrumbs as it's too likely to log UGC/PII to side-step the hub integrations not being respected

package/dist/es2019/ui/DropList/index.js

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.33.2";
+const packageVersion = "76.35.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/index.js

@@ -213,6 +213,7 @@ export function isInEmptyLine(state) {
 }
 export { dedupe } from './dedupe';
 export { createWrapSelectionTransaction } from './create-wrap-selection-transaction';
+export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
 export { wrapSelectionIn } from './wrap-selection-in';
 export { toJSON, nodeToJSON } from './nodes';
 export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';

package/dist/es2019/utils/insert-node-into-ordered-list.js

@@ -0,0 +1,84 @@
+import { findParentNodeOfType, findParentNodeOfTypeClosestToPos, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { isListNode } from './list';
+export function transformNodeIntoListItem(tr, node) {
+  var _tr$doc$nodeAt, _findParentNodeOfType;
+  const {
+    $to,
+    $from,
+    to,
+    from
+  } = tr.selection;
+  const {
+    orderedList,
+    bulletList,
+    listItem
+  } = tr.doc.type.schema.nodes;
+  const startLinePosition = $from.start();
+  const parentStartPosition = $from.depth === 0 ? 0 : $from.before();
+
+  // Setting the start position
+  const startMapped = startLinePosition === from ? parentStartPosition : from;
+
+  // Selected nodes
+  const selectionParentListItemNode = findParentNodeOfType(listItem)(tr.selection);
+  const selectionParentListNodeWithPos = findParentNodeOfType([bulletList, orderedList])(tr.selection);
+  const selectionParentListNode = selectionParentListNodeWithPos === null || selectionParentListNodeWithPos === void 0 ? void 0 : selectionParentListNodeWithPos.node;
+  if (!selectionParentListNodeWithPos) {
+    return tr;
+  }
+
+  // Offsets
+  const listWrappingOffset = $to.depth - selectionParentListNodeWithPos.depth + 1; // difference in depth between to position and list node
+  const listItemWrappingOffset = $to.depth - selectionParentListNodeWithPos.depth; // difference in depth between to position and list item node
+
+  // Anything to do with nested lists should safeInsert and not be handled here
+  const grandParentListNode = findParentNodeOfTypeClosestToPos(tr.doc.resolve(selectionParentListNodeWithPos.pos), [bulletList, orderedList]);
+  const selectionIsInNestedList = !!grandParentListNode;
+  let selectedListItemHasNestedList = false;
+  selectionParentListItemNode === null || selectionParentListItemNode === void 0 ? void 0 : selectionParentListItemNode.node.content.forEach(child => {
+    if (isListNode(child)) {
+      selectedListItemHasNestedList = true;
+    }
+  });
+  if (selectedListItemHasNestedList || selectionIsInNestedList) {
+    return safeInsert(node)(tr).scrollIntoView();
+  }
+
+  // Check if node after the insert position is listItem
+  const isNodeAfterInsertPositionIsListItem = ((_tr$doc$nodeAt = tr.doc.nodeAt(to + listItemWrappingOffset)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type) === listItem;
+  let replaceTo;
+  if (isNodeAfterInsertPositionIsListItem) {
+    replaceTo = to + listItemWrappingOffset;
+  } else if (!isNodeAfterInsertPositionIsListItem) {
+    replaceTo = to;
+  } else {
+    replaceTo = to + listWrappingOffset;
+  }
+
+  // handle the insertion of the slice
+  tr.replaceWith(startMapped, replaceTo, node).scrollIntoView();
+
+  // Get the next list items position (used later to find the split out ordered list)
+  const indexOfNextListItem = $to.indexAfter($to.depth - listItemWrappingOffset);
+  const positionOfNextListItem = tr.doc.resolve(selectionParentListNodeWithPos.pos + 1).posAtIndex(indexOfNextListItem);
+
+  // Find the ordered list node after the pasted content so we can set it's order
+  const mappedPositionOfNextListItem = tr.mapping.map(positionOfNextListItem);
+  if (mappedPositionOfNextListItem > tr.doc.nodeSize) {
+    return tr;
+  }
+  const nodeAfterPastedContentResolvedPos = findParentNodeOfTypeClosestToPos(tr.doc.resolve(mappedPositionOfNextListItem), [orderedList]);
+
+  // Work out the new split out lists 'order' (the number it starts from)
+  const originalParentOrderedListNodeOrder = selectionParentListNode === null || selectionParentListNode === void 0 ? void 0 : selectionParentListNode.attrs.order;
+  const numOfListItemsInOriginalList = (_findParentNodeOfType = findParentNodeOfTypeClosestToPos(tr.doc.resolve(from - 1), [orderedList])) === null || _findParentNodeOfType === void 0 ? void 0 : _findParentNodeOfType.node.childCount;
+
+  // Set the new split out lists order attribute
+  if (typeof originalParentOrderedListNodeOrder === 'number' && numOfListItemsInOriginalList && nodeAfterPastedContentResolvedPos) {
+    tr.setNodeMarkup(nodeAfterPastedContentResolvedPos.pos, orderedList, {
+      ...nodeAfterPastedContentResolvedPos.node.attrs,
+      order: originalParentOrderedListNodeOrder + numOfListItemsInOriginalList
+    });
+  }
+  return tr;
+}

package/dist/esm/collab/index.js

@@ -1,3 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { hexToRgba } from '@atlaskit/adf-schema';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import * as themeColors from '@atlaskit/theme/colors';
+
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
 // Format of the document and its metadata returned from the collab provider
@@ -118,4 +125,19 @@ export var DisconnectReason = /*#__PURE__*/function (DisconnectReason) {
   DisconnectReason["SOCKET_TIMEOUT"] = "SOCKET_TIMEOUT";
   DisconnectReason["UNKNOWN_DISCONNECT"] = "UNKNOWN_DISCONNECT";
   return DisconnectReason;
-}({});
+}({});
+// TODO: https://product-fabric.atlassian.net/browse/DSP-7269
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export var colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(function (solid) {
+  return {
+    solid: solid,
+    selection: hexToRgba(solid, 0.2)
+  };
+});
+var telepointerColorStyle = function telepointerColorStyle(color, index) {
+  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
+};
+export var TELEPOINTER_DIM_CLASS = 'telepointer-dim';
+export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
+  return telepointerColorStyle(color, index);
+}));