@atlaskit/editor-common 71.0.3 → 72.0.0

package/dist/es2019/utils/referentiality.js

@@ -31,4 +31,244 @@ export const isReferencedSource = (state, node) => {
     return !found;
   });
   return found;
+};
+
+const getConnections = state => {
+  const result = {};
+  const {
+    doc,
+    schema
+  } = state; // Keeps a map of all raw ids -> to their preferred normalised varient. A node with both fragmentMark & localId will
+  // have both ids mapped here to the same normalized version.
+
+  const normalizedIds = new Map();
+  const dataConsumerSources = new Map(); // Perform a prelim scan creating the initial id to connection link mappings.
+  // This will also save a list of data sources consumed per node.
+
+  doc.descendants((node, pos) => {
+    var _node$attrs2, _fragmentMark$attrs$l, _fragmentMark, _fragmentMark$attrs, _node$attrs3, _fragmentMark2, _fragmentMark2$attrs, _node$attrs4, _fragmentMark$attrs$n, _fragmentMark3, _fragmentMark3$attrs;
+
+    let dataConsumer;
+    let fragmentMark;
+    node.marks.some(mark => {
+      if (mark.type === schema.marks.dataConsumer) {
+        dataConsumer = mark;
+      } else if (mark.type === schema.marks.fragment) {
+        fragmentMark = mark;
+      } // Stop searching marks if we've found both consumer and fragment.
+
+
+      return !!dataConsumer && !!fragmentMark;
+    }); // If node cannot be referenced by any means then abort.
+
+    if (!fragmentMark && !((_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.localId)) {
+      return true;
+    }
+
+    const normalizedId = (_fragmentMark$attrs$l = (_fragmentMark = fragmentMark) === null || _fragmentMark === void 0 ? void 0 : (_fragmentMark$attrs = _fragmentMark.attrs) === null || _fragmentMark$attrs === void 0 ? void 0 : _fragmentMark$attrs.localId) !== null && _fragmentMark$attrs$l !== void 0 ? _fragmentMark$attrs$l : (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.localId;
+
+    if (!normalizedId) {
+      return true;
+    }
+
+    if (!!((_fragmentMark2 = fragmentMark) !== null && _fragmentMark2 !== void 0 && (_fragmentMark2$attrs = _fragmentMark2.attrs) !== null && _fragmentMark2$attrs !== void 0 && _fragmentMark2$attrs.localId)) {
+      normalizedIds.set(fragmentMark.attrs.localId, normalizedId);
+    }
+
+    if (!!((_node$attrs4 = node.attrs) !== null && _node$attrs4 !== void 0 && _node$attrs4.localId)) {
+      normalizedIds.set(node.attrs.localId, normalizedId);
+    }
+
+    if (!!result[normalizedId]) {
+      // Duplicate ID has been found, we'll care about the first one for now.
+      return true;
+    }
+
+    result[normalizedId] = {
+      localId: normalizedId,
+      name: (_fragmentMark$attrs$n = (_fragmentMark3 = fragmentMark) === null || _fragmentMark3 === void 0 ? void 0 : (_fragmentMark3$attrs = _fragmentMark3.attrs) === null || _fragmentMark3$attrs === void 0 ? void 0 : _fragmentMark3$attrs.name) !== null && _fragmentMark$attrs$n !== void 0 ? _fragmentMark$attrs$n : normalizedId,
+      node,
+      pos,
+      targets: []
+    };
+
+    if (!!dataConsumer && dataConsumer.attrs.sources.length) {
+      dataConsumerSources.set(normalizedId, dataConsumer.attrs.sources);
+    } // Do not descend into children of a node which has a dataConsumer attached. This assumes all children of the node cannot
+    // be referenced by another node.
+
+
+    return !dataConsumer;
+  }); // This 2nd-pass only looks at the consumer sources and updates all connections with the correct id refs.
+
+  for (const [localId, sources] of dataConsumerSources) {
+    // This is a ref to the node (connection link) which contains the consumer.
+    sources.forEach(src => {
+      var _normalizedIds$get;
+
+      const normalizedId = (_normalizedIds$get = normalizedIds.get(src)) !== null && _normalizedIds$get !== void 0 ? _normalizedIds$get : src;
+      const srcLink = result[normalizedId];
+
+      if (srcLink && normalizedId !== localId) {
+        srcLink.targets.push(localId);
+      }
+    });
+  }
+
+  return result;
+};
+
+export const removeConnectedNodes = (state, node) => {
+  if (!node) {
+    return state.tr;
+  }
+
+  const selectedLocalIds = getSelectedLocalIds(state, node);
+  const allNodes = getConnections(state);
+  const idsToBeDeleted = getIdsToBeDeleted(selectedLocalIds, allNodes);
+
+  if (!(idsToBeDeleted !== null && idsToBeDeleted !== void 0 && idsToBeDeleted.length)) {
+    return state.tr;
+  }
+
+  const {
+    tr
+  } = state;
+  let newTr = tr;
+  idsToBeDeleted.forEach(id => {
+    if (!allNodes[id]) {
+      return;
+    }
+
+    const {
+      node,
+      pos
+    } = allNodes[id];
+    newTr = newTr.delete(newTr.mapping.map(pos), newTr.mapping.map(node.nodeSize + pos));
+  });
+  return newTr;
+}; // find all ids need to be remove connected to selected extension
+
+const getIdsToBeDeleted = (selectedIds, allNodes) => {
+  if (!selectedIds.size) {
+    return [];
+  }
+
+  let searchSet = [...selectedIds];
+  const deletedIds = new Set();
+
+  while (searchSet.length) {
+    const id = searchSet.pop();
+
+    if (allNodes[id]) {
+      var _allNodes$id$targets$, _allNodes$id;
+
+      deletedIds.add(allNodes[id].localId);
+      searchSet = searchSet.concat((_allNodes$id$targets$ = (_allNodes$id = allNodes[id]) === null || _allNodes$id === void 0 ? void 0 : _allNodes$id.targets.filter(targetId => {
+        var _allNodes$targetId;
+
+        return !deletedIds.has((_allNodes$targetId = allNodes[targetId]) === null || _allNodes$targetId === void 0 ? void 0 : _allNodes$targetId.localId);
+      })) !== null && _allNodes$id$targets$ !== void 0 ? _allNodes$id$targets$ : []);
+    }
+  }
+
+  return Array.from(deletedIds);
+}; // for get children info for confirmation dialog
+
+
+export const getChildrenInfo = (state, node) => {
+  if (!node) {
+    return [];
+  }
+
+  const childrenIdSet = new Set();
+  const childrenInfoArray = [];
+  const allNodes = getConnections(state);
+  const selectedNodeIds = getSelectedLocalIds(state, node);
+  selectedNodeIds.forEach(id => {
+    if (allNodes[id]) {
+      allNodes[id].targets.forEach(childrenIdSet.add, childrenIdSet);
+    }
+  });
+  childrenIdSet.forEach(id => {
+    childrenInfoArray.push({
+      id,
+      name: getNodeNameById(id, allNodes),
+      amount: getChildrenNodeAmount(id, allNodes)
+    });
+  });
+  return childrenInfoArray;
+};
+
+const getChildrenNodeAmount = (id, allNodes) => {
+  const searchTerms = new Set([id]);
+  const traverseHistory = new Map();
+  const childrenIds = new Set();
+  traverseHistory.set(id, false);
+
+  while (searchTerms.size > 0) {
+    const [currTerm] = searchTerms;
+    let targets = getNodeTargetsById(currTerm, allNodes);
+    targets.forEach(target => {
+      const isTargetCounted = traverseHistory.get(target);
+
+      if (!isTargetCounted) {
+        searchTerms.add(target);
+        childrenIds.add(target);
+      }
+
+      target !== id && childrenIds.add(target);
+    });
+    traverseHistory.set(currTerm, true);
+    searchTerms.delete(currTerm);
+  }
+
+  return childrenIds.size;
+};
+
+const getNodeTargetsById = (id, allNodes) => {
+  if (!id || !allNodes[id]) {
+    return [];
+  }
+
+  return allNodes[id].targets;
+};
+
+const DEFAULT_EXTENSION_NAME = 'Default extension';
+
+const getNodeNameById = (id, allNodes) => {
+  if (typeof id === 'object') {
+    var _name2;
+
+    let name;
+    id.forEach(localId => {
+      var _name, _allNodes$localId;
+
+      name = (_name = name) !== null && _name !== void 0 ? _name : (_allNodes$localId = allNodes[localId]) === null || _allNodes$localId === void 0 ? void 0 : _allNodes$localId.name;
+    });
+    return (_name2 = name) !== null && _name2 !== void 0 ? _name2 : DEFAULT_EXTENSION_NAME;
+  }
+
+  if (!id || !allNodes[id]) {
+    return DEFAULT_EXTENSION_NAME;
+  }
+
+  return allNodes[id].name;
+};
+
+const getSelectedLocalIds = (state, node) => {
+  var _node$attrs5, _node$marks2, _node$marks2$find, _node$marks2$find$att;
+
+  if (!node) {
+    return new Set([]);
+  }
+
+  const localIds = new Set([(_node$attrs5 = node.attrs) === null || _node$attrs5 === void 0 ? void 0 : _node$attrs5.localId, (_node$marks2 = node.marks) === null || _node$marks2 === void 0 ? void 0 : (_node$marks2$find = _node$marks2.find(mark => mark.type === state.schema.marks.fragment)) === null || _node$marks2$find === void 0 ? void 0 : (_node$marks2$find$att = _node$marks2$find.attrs) === null || _node$marks2$find$att === void 0 ? void 0 : _node$marks2$find$att.localId].filter(Boolean));
+  return localIds;
+};
+
+export const getNodeName = (state, node) => {
+  var _node$marks$find$attr2, _node$marks3, _node$marks3$find, _node$marks3$find$att;
+
+  return (_node$marks$find$attr2 = node === null || node === void 0 ? void 0 : (_node$marks3 = node.marks) === null || _node$marks3 === void 0 ? void 0 : (_node$marks3$find = _node$marks3.find(mark => mark.type === state.schema.marks.fragment)) === null || _node$marks3$find === void 0 ? void 0 : (_node$marks3$find$att = _node$marks3$find.attrs) === null || _node$marks3$find$att === void 0 ? void 0 : _node$marks3$find$att.name) !== null && _node$marks$find$attr2 !== void 0 ? _node$marks$find$attr2 : '';
 };

package/dist/es2019/utils/track-unsupported-content.js

@@ -1,4 +1,4 @@
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from './analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
 const whitelistedAttributes = ['align', 'annotationType', 'extensionKey', 'extensionType', 'layout', 'type', 'localId', 'mode', 'language', 'timestamp', 'state', 'originalWidth', 'originalHeight', 'height', 'width', 'shortName', 'level', 'userType', 'order', 'panelType', 'color', 'style', 'isNumberColumnEnabled', 'colspan', 'rowspan', 'colwidth', 'background'];
 
 function concatAncestorHierarchy(node, ancestoryHierarchy) {
@@ -66,7 +66,6 @@ export const findAndTrackUnsupportedContentNodes = (node, schema, dispatchAnalyt
         const {
           originalValue
         } = mark.attrs || {};
-        const sanitizedAttrs = sanitizeAttributes(originalValue.attrs) || {};
         const {
           type
         } = originalValue || {};
@@ -75,20 +74,19 @@ export const findAndTrackUnsupportedContentNodes = (node, schema, dispatchAnalyt
           ancestry: ancestorHierarchy,
           parentType: parentType,
           marks: [],
-          attrs: sanitizedAttrs || {}
+          attrs: originalValue.attrs || {}
         };
         fireUnsupportedEvent(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.UNSUPPORTED_MARK, unsupportedNode);
       } else if (mark.type === unsupportedNodeAttribute) {
         const {
           unsupported
         } = mark.attrs || {};
-        const sanitizedAttrs = sanitizeAttributes(unsupported) || {};
         const unsupportedNodeAttribute = {
           type: nodeType.name || '',
           ancestry: ancestorHierarchy,
           parentType: parentType,
           marks: [],
-          attrs: sanitizedAttrs || {}
+          attrs: unsupported || {}
         };
         fireUnsupportedEvent(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.UNSUPPORTED_NODE_ATTRIBUTE, unsupportedNodeAttribute);
       }
@@ -112,8 +110,8 @@ export const findAndTrackUnsupportedContentNodes = (node, schema, dispatchAnalyt
       type: type || '',
       ancestry: ancestorHierarchy,
       parentType: parentType,
-      marks: sanitizeMarks(marks) || [],
-      attrs: sanitizeAttributes(attrs) || {}
+      marks: marks || [],
+      attrs: attrs || {}
     };
     const actionSubjectId = nodeType === unsupportedInline ? ACTION_SUBJECT_ID.UNSUPPORTED_INLINE : ACTION_SUBJECT_ID.UNSUPPORTED_BLOCK;
     fireUnsupportedEvent(dispatchAnalyticsEvent, actionSubjectId, unsupportedNode);
@@ -122,20 +120,26 @@ export const findAndTrackUnsupportedContentNodes = (node, schema, dispatchAnalyt
     node.content.forEach(childNode => findAndTrackUnsupportedContentNodes(childNode, schema, dispatchAnalyticsEvent, concatAncestorHierarchy(node, ancestorHierarchy)));
   }
 };
-export const fireUnsupportedEvent = (dispatchAnalyticsEvent, actionSubjectId, unsupportedNode = {}, errorCode) => {
-  let attrs = {
-    unsupportedNode: unsupportedNode
+export const fireUnsupportedEvent = (dispatchAnalyticsEvent, actionSubjectId, unsupportedNode, errorCode) => {
+  const sanitizedAttrs = sanitizeAttributes(unsupportedNode.attrs);
+  const sanitizedMarks = sanitizeMarks(unsupportedNode.marks);
+  const sanitizedUnsupportedNode = {
+    type: unsupportedNode.type,
+    ancestry: unsupportedNode.ancestry,
+    parentType: unsupportedNode.parentType,
+    attrs: sanitizedAttrs,
+    marks: sanitizedMarks
   };
-
-  if (errorCode) {
-    attrs.errorCode = errorCode;
-  }
-
   const payload = {
     action: ACTION.UNSUPPORTED_CONTENT_ENCOUNTERED,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
     actionSubjectId,
-    attributes: attrs,
+    attributes: {
+      unsupportedNode: sanitizedUnsupportedNode,
+      ...(!!errorCode && {
+        errorCode
+      })
+    },
     eventType: EVENT_TYPE.TRACK
   };
   dispatchAnalyticsEvent(payload);

package/dist/es2019/utils/validate-using-spec.js

@@ -1,6 +1,6 @@
 import { validator } from '@atlaskit/adf-utils/validator';
+import { ACTION_SUBJECT_ID } from '../analytics';
 export const UNSUPPORTED_NODE_ATTRIBUTE = 'unsupportedNodeAttribute';
-import { ACTION_SUBJECT_ID } from './analytics';
 import { fireUnsupportedEvent } from './track-unsupported-content';
 
 const errorCallbackFor = (marks, validate, dispatchAnalyticsEvent) => {
@@ -102,7 +102,13 @@ function trackValidationError(dispatchAnalyticsEvent, error, entity) {
     return;
   }
 
-  fireUnsupportedEvent(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.UNSUPPORTED_ERROR, entity, error.code);
+  fireUnsupportedEvent(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.UNSUPPORTED_ERROR, {
+    type: entity.type || '',
+    ancestry: entity.ancestorHierarchy || '',
+    parentType: entity.parentType || '',
+    marks: entity.marks || [],
+    attrs: entity.attrs || {}
+  }, error.code);
 }
 
 export const validateADFEntity = (schema, node, dispatchAnalyticsEvent) => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "71.0.3",
+	"version": "72.0.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/types/enums.js

@@ -99,7 +99,7 @@ export var ACTION;
   ACTION["TYPING_FINISHED"] = "typingFinished";
   ACTION["TYPING_STARTED"] = "typingStarted";
   ACTION["UNLINK"] = "unlinked";
-  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
+  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncounteredV2";
   ACTION["UPDATED"] = "updated";
   ACTION["UPDATED_FRAGMENT_MARK_NAME"] = "updatedFragmentMarkName";
   ACTION["UPDATED_SOURCE"] = "updatedSource";
@@ -116,6 +116,16 @@ export var ACTION;
   ACTION["UFO_SESSION_COMPLETE"] = "ufoSessionComplete";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["DOCUMENT_PROCESSING_ERROR"] = "documentProcessingError";
+  ACTION["RENDERER_TTI"] = "tti";
+  ACTION["CRASHED"] = "unhandledErrorCaught";
+  ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";
+  ACTION["SELECT_ALL_ESCAPED"] = "selectAllEscaped";
+  ACTION["SORT_COLUMN"] = "sortedColumn";
+  ACTION["SORT_COLUMN_NOT_ALLOWED"] = "sortColumnNotAllowed";
+  ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["UNSUPPORTED_TOOLTIP_VIEWED"] = "viewed";
 })(ACTION || (ACTION = {}));
 
 export var INPUT_METHOD;
@@ -202,6 +212,10 @@ export var ACTION_SUBJECT;
   ACTION_SUBJECT["CREATE_LINK_INLINE_DIALOG"] = "createLinkInlineDialog";
   ACTION_SUBJECT["CODE_BLOCK"] = "codeBlock";
   ACTION_SUBJECT["REACT_EDITOR_VIEW"] = "reactEditorView";
+  ACTION_SUBJECT["RENDERER"] = "renderer";
+  ACTION_SUBJECT["ANCHOR_LINK"] = "anchorLink";
+  ACTION_SUBJECT["LINK"] = "link";
+  ACTION_SUBJECT["TOOLTIP"] = "tooltip";
 })(ACTION_SUBJECT || (ACTION_SUBJECT = {}));
 
 export var ACTION_SUBJECT_ID;
@@ -319,9 +333,14 @@ export var ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["TYPEAHEAD_QUICK_INSERT"] = "quickInsertTypeAhead";
   ACTION_SUBJECT_ID["UNKNOWN_NODE"] = "unknownNode";
   ACTION_SUBJECT_ID["UNLINK"] = "unlink";
+  ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
+  ACTION_SUBJECT_ID["UNSUPPORTED_ERROR"] = "unsupportedUnhandled";
+  ACTION_SUBJECT_ID["UNSUPPORTED_NODE_ATTRIBUTE"] = "unsupportedNodeAttribute";
   ACTION_SUBJECT_ID["UNSUPPORTED_BLOCK"] = "unsupportedBlock";
   ACTION_SUBJECT_ID["UNSUPPORTED_INLINE"] = "unsupportedInline";
   ACTION_SUBJECT_ID["UNSUPPORTED_MARK"] = "unsupportedMark";
+  ACTION_SUBJECT_ID["ON_UNSUPPORTED_INLINE"] = "onUnsupportedInline";
+  ACTION_SUBJECT_ID["ON_UNSUPPORTED_BLOCK"] = "onUnsupportedBlock";
 })(ACTION_SUBJECT_ID || (ACTION_SUBJECT_ID = {}));
 
 export var FLOATING_CONTROLS_TITLE;

package/dist/esm/i18n/index.js

@@ -1,15 +1,16 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 export { default as zh } from './zh';
 export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
 export { default as nl } from './nl';
-export { default as et } from './et';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
 export { default as de } from './de';

package/dist/esm/i18n/languages.js

@@ -0,0 +1,34 @@
+/**
+ * NOTE:
+ *
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
+ */
+export default {
+  zh: 'Chinese (Simplified)',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  da: 'Danish',
+  nl: 'Dutch',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};

package/dist/esm/keymaps/index.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
@@ -141,6 +142,53 @@ export function findShortcutByKeymap(keymap) {
 
   return keymap.windows;
 }
+export function getAriaKeyshortcuts(keymap) {
+  var keyShortcuts;
+
+  if (typeof keymap === 'string') {
+    keyShortcuts = keymap;
+  } else if (_typeof(keymap) === 'object') {
+    keyShortcuts = keymap[browser.mac ? 'mac' : 'windows'];
+  }
+
+  if (keyShortcuts) {
+    return keyShortcuts.toLowerCase().split('-').map(function (modifier) {
+      switch (modifier) {
+        case 'cmd':
+          return 'Meta';
+
+        case 'ctrl':
+          return 'Control';
+
+        case 'alt':
+          return 'Alt';
+
+        case 'shift':
+          return 'Shift';
+
+        case 'enter':
+          return 'Enter';
+
+        case 'esc':
+          return 'Esc';
+
+        case 'tab':
+          return 'Tab';
+
+        case 'space':
+          return 'Space';
+
+        case 'backspace':
+          return 'Backspace';
+
+        default:
+          return modifier.split('').join(' ');
+      }
+    }).join('+');
+  } else {
+    return undefined;
+  }
+}
 var ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
 export function makeKeymap(description, windows, mac, common) {
   return {

package/dist/esm/styles/index.js

@@ -9,7 +9,7 @@ export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
 export { linkSharedStyle } from './shared/link';
-export { listsSharedStyles, listPaddingLeftMarkerSpace } from './shared/lists';
+export { listsSharedStyles, listItemCounterPadding, getOrderedListInlineStyles } from './shared/lists';
 export { indentationSharedStyles } from './shared/indentation';
 export { blockMarksSharedStyles } from './shared/block-marks';
 export { codeMarkSharedStyles } from './shared/code-mark';

package/dist/esm/styles/shared/annotation.js

@@ -20,23 +20,20 @@ var DY75a = 'rgba(111, 92, 37, 0.5)';
 var DY200 = '#82641c';
 export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
   return {
-    /* eslint-disable */
     focus: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), themed({
-      light: Y75,
-      dark: DY75
+      light: token('color.background.accent.yellow.subtler', Y75),
+      dark: token('color.background.accent.yellow.subtler', DY75)
     })(props), themed({
       light: token('color.border.accent.yellow', Y300),
       dark: token('color.border.accent.yellow', DY300)
     })(props), token('elevation.shadow.overlay', "1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A))),
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), themed({
-      light: Y75a,
-      dark: DY75a
+      light: token('color.background.accent.yellow.subtlest', Y75a),
+      dark: token('color.background.accent.yellow.subtlest', DY75a)
     })(props), themed({
       light: token('color.border.accent.yellow', Y200a),
       dark: token('color.border.accent.yellow', DY200)
     })(props))
-    /* eslint-enable */
-
   };
 };
 export var annotationSharedStyles = function annotationSharedStyles(props) {

package/dist/esm/styles/shared/block-marks.js

@@ -3,4 +3,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks apart from those with indentation mark */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type:not(.fabric-editor-indentation-mark),\n  // If first document element has indentation mark remove margin-top\n  .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks apart from those with indentation mark */\n  *:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n    /* Do not remove the margin top for nodes inside indentation marks */\n      :not(.fabric-editor-indentation-mark)\n    /* Do not remove the margin top for nodes inside alignment marks */\n      :not(.fabric-editor-alignment),\n  // If first element inside a block node has alignment mark, then remove the margin-top\n  .fabric-editor-alignment:first-of-type:first-child,\n  // If first document element has indentation mark remove margin-top\n  .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));

package/dist/esm/styles/shared/code-block.js

@@ -18,17 +18,16 @@ export var CodeBlockSharedCssClassName = {
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
 export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll;\n      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,\n        8px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, token('elevation.surface.raised', 'transparent'), borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, token('elevation.surface.raised', 'transparent'), borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
     light: token('color.background.neutral', N20),
     dark: token('color.background.neutral', DN50)
   })(props), borderRadius(), overflowShadow({
-    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
     background: themed({
       light: token('color.background.neutral', N20),
       dark: token('color.background.neutral', DN50)
     })(props),
-    width: '8px'
-  }), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
+    leftCoverWidth: "".concat(gridSize() * 3, "px")
+  }), gridSize() * 3, gridSize() * 3, gridSize(), gridSize(), gridSize(), gridSize(), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
     light: token('color.background.neutral', N30),
     dark: token('color.background.neutral', DN20)
   })(props), gridSize(), themed({