@atlaskit/editor-common 74.0.0 → 74.1.0

package/dist/esm/monitoring/error.js

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
+var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
+var packageVersion = "74.1.0";
+var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
+  // Remove URL as it has UGC
+  // TODO: Sanitise the URL instead of just removing it
+  if (data.request) {
+    delete data.request.url;
+  }
+  return data;
+};
+export var logException = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(error, tags) {
+    var _process$env$CLOUD_EN, _yield$import, BrowserClient, defaultIntegrations, getCurrentHub, _yield$import2, ExtraErrorData, sentryOptions, client, hub;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          if (!(process.env.NODE_ENV !== 'production' || process.env.CLOUD_ENV === 'branch')) {
+            _context.next = 3;
+            break;
+          }
+          return _context.abrupt("return");
+        case 3:
+          _context.next = 5;
+          return import( /* webpackChunkName: "@atlaskit-internal_editor-sentrybrowser" */'@sentry/browser');
+        case 5:
+          _yield$import = _context.sent;
+          BrowserClient = _yield$import.BrowserClient;
+          defaultIntegrations = _yield$import.defaultIntegrations;
+          getCurrentHub = _yield$import.getCurrentHub;
+          _context.next = 11;
+          return import( /* webpackChunkName: "@atlaskit-internal_editor-sentryintegrations" */'@sentry/integrations');
+        case 11:
+          _yield$import2 = _context.sent;
+          ExtraErrorData = _yield$import2.ExtraErrorData;
+          sentryOptions = {
+            dsn: SENTRY_DSN,
+            release: "".concat(packageName, "@").concat(packageVersion),
+            environment: (_process$env$CLOUD_EN = process.env.CLOUD_ENV) !== null && _process$env$CLOUD_EN !== void 0 ? _process$env$CLOUD_EN : 'unknown',
+            ignoreErrors: [
+            // Network issues
+            /^network error/i, /^network failure/i, 'TypeError: Failed to fetch',
+            // A benign error, see https://stackoverflow.com/a/50387233/2645305
+            'ResizeObserver loop limit exceeded', /ResizeObserver loop completed with undelivered notifications/],
+            autoSessionTracking: false,
+            integrations: function integrations(_integrations) {
+              return [].concat(_toConsumableArray(defaultIntegrations.filter(function (_ref2) {
+                var name = _ref2.name;
+                return name !== 'Breadcrumbs';
+              })), [
+              // Extracts all non-native attributes from the error object and attaches them to the event as the extra data
+              // https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/?original_referrer=https%3A%2F%2Fduckduckgo.com%2F#extraerrordata
+              new ExtraErrorData()]);
+            },
+            beforeSend: sanitiseSentryEvents
+          }; // Use a client to avoid picking up the errors from parent applications
+          client = new BrowserClient(sentryOptions);
+          hub = getCurrentHub();
+          hub.bindClient(client);
+          hub.withScope(function (scope) {
+            scope.setTags(_objectSpread({
+              // 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
+            }, tags));
+            hub.captureException(error);
+          });
+          return _context.abrupt("return", client.close());
+        case 21:
+          _context.prev = 21;
+          _context.t0 = _context["catch"](0);
+        case 23:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 21]]);
+  }));
+  return function logException(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/esm/monitoring/index.js

@@ -0,0 +1 @@
+export { logException } from './error';

package/dist/esm/node-width/index.js

@@ -1,5 +1,6 @@
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
@@ -47,6 +48,9 @@ export var getParentNodeWidth = function getParentNodeWidth(pos, state, containe
     case schema.nodes.bodiedExtension:
       parentWidth -= BODIED_EXT_PADDING * 2;
       break;
+
+    // TODO: Migrate away from gridSize
+    // Recommendation: Replace gridSize with 8
     case schema.nodes.expand:
       // padding
       parentWidth -= gridSize() * 2;

package/dist/esm/paste/index.js

@@ -0,0 +1 @@
+export { md } from './md';

package/dist/esm/paste/md-plugins/ignore-list-heading-md-plugin.js

@@ -0,0 +1,41 @@
+/*
+ * ED-15646
+ * Headings in list items are not supported in our schema.
+ * As the markdown transformer is used by the paste plugin,
+ * certain pastes will strip invalid lines as
+ * prosemirror-markdown cannot conform to the schema
+ */
+
+function handleHeadingOpen(state, token, acc, index) {
+  var _state$tokens;
+  var isInListItem = ((_state$tokens = state.tokens[index - 1]) === null || _state$tokens === void 0 ? void 0 : _state$tokens.type) === 'list_item_open';
+  if (isInListItem) {
+    acc.push(new state.Token('paragraph_open', 'p', 1));
+  } else {
+    acc.push(token);
+  }
+}
+function handleHeadingClose(state, token, acc, index) {
+  var _state$tokens2;
+  var isInListItem = ((_state$tokens2 = state.tokens[index + 1]) === null || _state$tokens2 === void 0 ? void 0 : _state$tokens2.type) === 'list_item_close';
+  if (isInListItem) {
+    acc.push(new state.Token('paragraph_close', 'p', -1));
+  } else {
+    acc.push(token);
+  }
+}
+export default function (md) {
+  md.core.ruler.after('inline', 'ignore-list-heading-md-plugin', function (state) {
+    state.tokens = state.tokens.reduce(function (acc, token, index) {
+      var type = token.type;
+      if (type === 'heading_open') {
+        handleHeadingOpen(state, token, acc, index);
+      } else if (type === 'heading_close') {
+        handleHeadingClose(state, token, acc, index);
+      } else {
+        acc.push(token);
+      }
+      return acc;
+    }, []);
+  });
+}

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

@@ -0,0 +1,128 @@
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/linkify-md-plugin.ts
+// If changes are made to this file, please make the same update in the linked file.
+
+import LinkifyIt from 'linkify-it';
+import { linkifyMatch } from '@atlaskit/adf-schema';
+import { findFilepaths, isLinkInMatches } from '../../utils';
+
+// modified version of the original Linkify plugin
+// https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.js
+var arrayReplaceAt = function arrayReplaceAt(src, pos, newElements) {
+  return [].concat(src.slice(0, pos), newElements, src.slice(pos + 1));
+};
+var isLinkOpen = function isLinkOpen(str) {
+  return /^<a[>\s]/i.test(str);
+};
+var isLinkClose = function isLinkClose(str) {
+  return /^<\/a\s*>/i.test(str);
+};
+var linkify = function linkify(state) {
+  var blockTokens = state.tokens;
+  var linkify = new LinkifyIt();
+  for (var j = 0, l = blockTokens.length; j < l; j++) {
+    if (blockTokens[j].type !== 'inline' || !linkify.pretest(blockTokens[j].content)) {
+      continue;
+    }
+    var tokens = blockTokens[j].children;
+    var htmlLinkLevel = 0;
+
+    // We scan from the end, to keep position when new tags added.
+    // Use reversed logic in links start/end match
+    for (var i = tokens.length - 1; i >= 0; i--) {
+      var currentToken = tokens[i];
+
+      // Skip content of markdown links
+      if (currentToken.type === 'link_close') {
+        i--;
+        while (tokens[i].level !== currentToken.level && tokens[i].type !== 'link_open') {
+          i--;
+        }
+        continue;
+      }
+
+      // Skip content of html tag links
+      if (currentToken.type === 'html_inline') {
+        if (isLinkOpen(currentToken.content) && htmlLinkLevel > 0) {
+          htmlLinkLevel--;
+        }
+        if (isLinkClose(currentToken.content)) {
+          htmlLinkLevel++;
+        }
+      }
+      if (htmlLinkLevel > 0) {
+        continue;
+      }
+      if (currentToken.type === 'text' && linkify.test(currentToken.content)) {
+        var text = currentToken.content;
+        var links = linkifyMatch(text);
+        if (!links.length) {
+          links = linkify.match(text) || [];
+        }
+
+        // Now split string to nodes
+        var nodes = [];
+        var level = currentToken.level;
+        var lastPos = 0;
+        var filepaths = findFilepaths(text);
+        for (var ln = 0; ln < links.length; ln++) {
+          if (isLinkInMatches(links[ln].index, filepaths)) {
+            continue;
+          }
+          var url = links[ln].url;
+          var fullUrl = state.md.normalizeLink(url);
+          if (!state.md.validateLink(fullUrl)) {
+            continue;
+          }
+          var urlText = links[ln].text;
+
+          // Linkifier might send raw hostnames like "example.com", where url
+          // starts with domain name. So we prepend http:// in those cases,
+          // and remove it afterwards.
+          //
+          if (!links[ln].schema) {
+            urlText = state.md.normalizeLinkText('http://' + urlText).replace(/^http:\/\//, '');
+          } else if (links[ln].schema === 'mailto:' && !/^mailto:/i.test(urlText)) {
+            urlText = state.md.normalizeLinkText('mailto:' + urlText).replace(/^mailto:/, '');
+          } else {
+            urlText = state.md.normalizeLinkText(urlText);
+          }
+          var pos = links[ln].index;
+          if (pos > lastPos) {
+            var _token = new state.Token('text', '', 0);
+            _token.content = text.slice(lastPos, pos);
+            _token.level = level;
+            nodes.push(_token);
+          }
+          var token = new state.Token('link_open', 'a', 1);
+          token.attrs = [['href', fullUrl]];
+          token.level = level++;
+          token.markup = 'linkify';
+          token.info = 'auto';
+          nodes.push(token);
+          token = new state.Token('text', '', 0);
+          token.content = urlText;
+          token.level = level;
+          nodes.push(token);
+          token = new state.Token('link_close', 'a', -1);
+          token.level = --level;
+          token.markup = 'linkify';
+          token.info = 'auto';
+          nodes.push(token);
+          lastPos = links[ln].lastIndex;
+        }
+        if (lastPos < text.length) {
+          var _token2 = new state.Token('text', '', 0);
+          _token2.content = text.slice(lastPos);
+          _token2.level = level;
+          nodes.push(_token2);
+        }
+
+        // replace current node
+        blockTokens[j].children = tokens = arrayReplaceAt(tokens, i, nodes);
+      }
+    }
+  }
+};
+export default (function (md) {
+  return md.core.ruler.push('custom-linkify', linkify);
+});

package/dist/esm/paste/md-plugins/newline-md-plugin.js

@@ -0,0 +1,60 @@
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/newline-md-plugin.ts
+// If changes are made to this file, please make the same update in the linked file.
+
+// ED-15363: modified version of the original newline plugin
+// https://github.com/markdown-it/markdown-it/blob/master/lib/rules_inline/newline.js
+var newline = function newline(state, silent) {
+  var pmax,
+    // ED-15363: unread variables
+    // max,
+    // ws,
+    pos = state.pos;
+  if (state.src.charCodeAt(pos) !== 0x0a /* \n */) {
+    return false;
+  }
+  pmax = state.pending.length - 1;
+  // ED-15363: unread variable
+  // max = state.posMax;
+
+  // '  \n' -> hardbreak
+  // Lookup in pending chars is bad practice! Don't copy to other rules!
+  // Pending string is stored in concat mode, indexed lookups will cause
+  // convertion to flat mode.
+  if (!silent) {
+    if (pmax >= 0 && state.pending.charCodeAt(pmax) === 0x20) {
+      if (pmax >= 1 && state.pending.charCodeAt(pmax - 1) === 0x20) {
+        // ED-15363: We commented out this logic to preserve trailing whitespaces
+        // for each line of text when pasting plain text
+
+        // // Find whitespaces tail of pending chars.
+        // ws = pmax - 1;
+        // while (ws >= 1 && state.pending.charCodeAt(ws - 1) === 0x20) {
+        //   ws--;
+        // }
+        // state.pending = state.pending.slice(0, ws);
+        state.push('hardbreak', 'br', 0);
+      } else {
+        state.pending = state.pending.slice(0, -1);
+        state.push('softbreak', 'br', 0);
+      }
+    } else {
+      state.push('softbreak', 'br', 0);
+    }
+  }
+  pos++;
+
+  // ED-15363: We commented out this logic from the original library to
+  // preserve leading whitespaces for each line of text when pasting plain
+  // text (to preserve whitespace-based indentation).
+
+  // // skip heading spaces for next line
+  // while (pos < max && isSpace(state.src.charCodeAt(pos))) {
+  //   pos++;
+  // }
+
+  state.pos = pos;
+  return true;
+};
+export default (function (md) {
+  return md.inline.ruler.at('newline', newline);
+});

package/dist/esm/paste/md-plugins/paragraph-md-plugin.js

@@ -0,0 +1,66 @@
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/paragraph-md-plugin.ts
+// If changes are made to this file, please make the same update in the linked file.
+
+// ED-15363: modified version of the original paragraph plugin
+// https://github.com/markdown-it/markdown-it/blob/master/lib/rules_block/paragraph.js
+
+var paragraph = function paragraph(state, startLine) {
+  var content,
+    terminate,
+    i,
+    l,
+    token,
+    oldParentType,
+    nextLine = startLine + 1,
+    terminatorRules = state.md.block.ruler.getRules('paragraph'),
+    endLine = state.lineMax;
+  oldParentType = state.parentType;
+  state.parentType = 'paragraph';
+
+  // jump line-by-line until empty one or EOF
+  for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
+    // this would be a code block normally, but after paragraph
+    // it's considered a lazy continuation regardless of what's there
+    if (state.sCount[nextLine] - state.blkIndent > 3) {
+      continue;
+    }
+
+    // quirk for blockquotes, this line should already be checked by that rule
+    if (state.sCount[nextLine] < 0) {
+      continue;
+    }
+
+    // Some tags can terminate paragraph without empty line.
+    terminate = false;
+    for (i = 0, l = terminatorRules.length; i < l; i++) {
+      if (terminatorRules[i](state, nextLine, endLine, true)) {
+        terminate = true;
+        break;
+      }
+    }
+    if (terminate) {
+      break;
+    }
+  }
+
+  // ED-15363: We removed .trim() from this logic from the original library to
+  // preserve leading whitespaces at the beginning and end of paragraph blocks
+  // when pasting plain text (to preserve whitespace-based indentation, at the
+  // beginning and end of paragraphs).
+
+  // content = state.getLines(startLine, nextLine, state.blkIndent, false) .trim()
+  content = state.getLines(startLine, nextLine, state.blkIndent, false);
+  state.line = nextLine;
+  token = state.push('paragraph_open', 'p', 1);
+  token.map = [startLine, state.line];
+  token = state.push('inline', '', 0);
+  token.content = content;
+  token.map = [startLine, state.line];
+  token.children = [];
+  token = state.push('paragraph_close', 'p', -1);
+  state.parentType = oldParentType;
+  return true;
+};
+export default (function (md) {
+  return md.block.ruler.at('paragraph', paragraph);
+});

package/dist/esm/paste/md.js

@@ -0,0 +1,22 @@
+// File has been copied to packages/editor/editor-plugin-ai/src/provider/markdown-transformer/md/index.ts
+// If changes are made to this file, please make the same update in the linked file.
+import MarkdownIt from 'markdown-it';
+import ignoreListHeading from './md-plugins/ignore-list-heading-md-plugin';
+import linkify from './md-plugins/linkify-md-plugin';
+import newline from './md-plugins/newline-md-plugin';
+import paragraph from './md-plugins/paragraph-md-plugin';
+export var md = MarkdownIt('zero', {
+  html: false
+});
+md.enable([
+// Process html entity - {, ¯, ", ...
+'entity',
+// Process escaped chars and hardbreaks
+'escape', 'newline']);
+md.use(paragraph);
+
+// enable modified version of linkify plugin
+// @see https://product-fabric.atlassian.net/browse/ED-3097
+md.use(linkify);
+md.use(newline);
+md.use(ignoreListHeading);

package/dist/esm/preset/plugin-injection-api.js

@@ -253,8 +253,10 @@ export var EditorPluginInjectionAPI = /*#__PURE__*/function () {
           }
           var plugin = getPluginByName(prop);
           if (!plugin) {
-            // eslint-disable-next-line
-            console.error("Plugin: ".concat(prop, " does not exist"));
+            if (process.env.NODE_ENV === 'development') {
+              // eslint-disable-next-line
+              console.warn("Plugin: ".concat(prop, " does not exist"));
+            }
             return undefined;
           }
           var sharedState = sharedStateAPI.createAPI(plugin);

package/dist/esm/provider-helpers/combine-providers.js

@@ -65,7 +65,7 @@ export default (function (providers) {
       if (typeof method === 'function') {
         return method.apply(provider, args);
       }
-      throw new Error("\"".concat(methodName, "\" isn't a function of the provider"));
+      throw new Error("\"".concat(String(methodName), "\" isn't a function of the provider"));
     };
   };
 

package/dist/esm/resizer.js

@@ -0,0 +1 @@
+export { default as ResizerNext } from './ui/Resizer';

package/dist/esm/styles/index.js

@@ -21,4 +21,5 @@ export { smartCardSharedStyles, SmartCardSharedCssClassName } from './shared/sma
 export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
-export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
+export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
+export { resizerStyles } from './shared/resizer';

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

@@ -2,5 +2,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { gridSize } from '@atlaskit/theme/constants';
-export var blockquoteSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), gridSize() * 2, "var(--ds-border, ".concat(akEditorBlockquoteBorderColor, ")"), blockNodesVerticalMargin, gridSize() * 2);
+export var blockquoteSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", ";\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", ";\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-border, ".concat(akEditorBlockquoteBorderColor, ")"), blockNodesVerticalMargin, "var(--ds-space-200, 16px)");

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

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius, fontSize } from '@atlaskit/theme/constants';
 export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -15,7 +15,7 @@ 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, 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, "var(--ds-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: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 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: ", ";\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: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
     light: "var(--ds-background-neutral, ".concat(N20, ")"),
     dark: "var(--ds-background-neutral, ".concat(DN50, ")")
   })(props), borderRadius(), overflowShadow({
@@ -23,16 +23,16 @@ export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
       light: "var(--ds-background-neutral, ".concat(N20, ")"),
       dark: "var(--ds-background-neutral, ".concat(DN50, ")")
     })(props),
-    leftCoverWidth: "".concat(gridSize() * 3, "px")
-  }), gridSize() * 3, gridSize() * 3, gridSize(), gridSize(), gridSize(), gridSize(), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
+    leftCoverWidth: "var(--ds-space-300, 24px)"
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
     light: "var(--ds-background-neutral, ".concat(N30, ")"),
     dark: "var(--ds-background-neutral, ".concat(DN20, ")")
-  })(props), gridSize(), themed({
+  })(props), "var(--ds-space-100, 8px)", themed({
     light: "var(--ds-text-subtlest, ".concat(N400, ")"),
     dark: "var(--ds-text-subtlest, ".concat(DN400, ")")
   })(props), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, themed({
     light: "var(--ds-text, ".concat(N800, ")"),
     dark: "var(--ds-text, ".concat(DN800, ")")
-  })(props), borderRadius(), gridSize(), relativeFontSizeToBase16(fontSize()));
+  })(props), borderRadius(), "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()));
 };
 export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), akEditorLineHeight, akEditorLineHeight);

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

@@ -1,3 +1,7 @@
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 export var EXTENSION_PADDING = gridSize();
 export var BODIED_EXT_PADDING = EXTENSION_PADDING * 2;

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

@@ -1,3 +1,7 @@
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 export var LAYOUT_SECTION_MARGIN = gridSize();
 export var LAYOUT_COLUMN_PADDING = gridSize() * 1.5;

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

@@ -10,6 +10,7 @@ import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 var lightPanelColors = {
   info: colors.B50,
@@ -106,6 +107,8 @@ var tokenDarkPanelColors = {
   error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
 };
 
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 var panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
@@ -206,7 +209,7 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", "px;\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: content-box;\n    padding-right: ", "px;\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), borderRadius(), blockNodesVerticalMargin, "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
     dark: getPanelBackgroundDarkModeColors
   })(props));
 };

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

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { B200, N60 } from '@atlaskit/theme/colors';
+/*
+  Styles in this file are based on
+  packages/editor/editor-core/src/plugins/media/styles.ts
+*/
+
+export var resizerItemClassName = 'resizer-item';
+export var resizerHandleRightClassName = 'resizer-handle-right';
+export var resizerHandleLeftClassName = 'resizer-handle-left';
+
+// akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
+var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+export var resizerHandlePadding = 13;
+export var resizerHandleZIndex = 99;
+export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n    /* padding-right: 12px; */\n    /* margin-right: -", "px; */\n  }\n\n  .", " {\n    align-items: flex-start;\n    /* padding-left: 12px; */\n    /* margin-left: -", "px; */\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandlePadding, resizerHandleLeftClassName, resizerHandlePadding, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(B200, ")"));

package/dist/esm/styles/shared/smart-card.js

@@ -1,4 +1,5 @@
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 export var SmartCardSharedCssClassName = {
   INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
@@ -6,4 +7,7 @@ export var SmartCardSharedCssClassName = {
   EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
   LOADER_WRAPPER: 'loader-wrapper'
 };
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 export var smartCardSharedStyles = "\n  .".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, " {\n    display: block;\n    margin: ").concat(blockNodesVerticalMargin, " 0 0;\n    max-width: ").concat(gridSize() * 95, "px;\n  }\n");