@atlaskit/editor-core 177.0.0 → 178.0.0

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @atlaskit/editor-core
 
+## 178.0.0
+
+### Major Changes
+
+- [`04e3aacbcc0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04e3aacbcc0) - ED-16069 Unskip type over mediagroup integ test
+
+### Minor Changes
+
+- [`055a333dad9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/055a333dad9) - [ux] Remove `moreTextColors` feature flag and deprecate `allowMoreTextColors` field of `allowTextColor` editor prop and `colorPaletteExtended` mark.
+
+  Showing more colors in the color selection palette is now a default behaviour.
+
+  ## **DEPRECATION WARNING:**
+
+  There are 2 deprecations in this change:
+
+  ### 1. `allowMoreTextColors` field of `allowTextColor` editor prop.
+
+  `allowMoreTextColors` field of `allowTextColor` editor prop. **is now deprecated and will be removed in the next stable release of `@atlaskit/editor-core` package**. Please take steps to remove that field from your code. E.g.:
+
+  ```tsx
+  <Editor
+   ...
+   allowTextColor ={
+    allowMoreTextColors: true // <-- Deprecated
+    defaultColour: {color: 'red', label: 'red'}
+   }
+  />
+  ```
+
+  Remove all instances of `allowMoreTextColors` field from `allowTextColor` `Editor` prop. I.e.:
+
+  ```tsx
+  <Editor
+   ...
+   allowTextColor ={
+    defaultColour: {color: 'red', label: 'red'}
+   }
+  />
+  ```
+
+  If the resulting `allowTextColor` prop is an empty object, set `allowTextColor` property value to `true`. E.g.:
+
+  ```tsx
+  <Editor
+   appearance="full-page"
+   ...
+   allowTextColor ={
+    allowMoreTextColors: true // <-- Invalid
+   }
+  />
+  ```
+
+  should become
+
+  ```tsx
+  <Editor
+   appearance="full-page"
+   ...
+   allowTextColor={true}
+  />
+  ```
+
+  ### 2. `colorPaletteExtended` mark of the ADF schema
+
+  `colorPaletteExtended` mark of the ADF schema **is now deprecated and will be removed in the next stable release**. The extended palette is now rolled into the main one. use `colorPalette` instead.
+
+### Patch Changes
+
+- [`a7eb7a6bb47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7eb7a6bb47) - ED-16068 unskipped tests
+- [`f7cdc36d75b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7cdc36d75b) - ED016195 update EDITOR_CRASHED_ADDITIONAL_INFORMATION event name
+- [`20117f2de5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20117f2de5a) - [ux] ED-16204 Fix table cell options floating toolbar context menu closes after clicking on disabled options
+- [`3f3720a4964`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f3720a4964) - EDM-5368 make type="button" to the buttons in HyperLinkToolbar. This has caused an issue in Jira Portal where clicking the button would submit the creation form.
+- [`efa8b7ee68e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa8b7ee68e) - ED-15808 Changes to replace usage of enzyme with React test library
+- [`df20a33d886`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df20a33d886) - ED-16445: Set allowUndoRedoButtons prop codemod in editor-core to run against the correct editor version (v175)
+- [`e1637ca6a5c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e1637ca6a5c) - ED-16004 unskipped test
+- [`31c37c54ee2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31c37c54ee2) - ED-15548 To add keyboard shortcut Alt + F9 to reach main toolbar and on 'Esc' user comes back to editor
+- [`70d0799eee0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/70d0799eee0) - ED-14002 Added `safer-dispatched-transactions` featureFlag to preventtransactions from being mutated after dispatch at runtime.
+- [`c6c0cab10e0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6c0cab10e0) - [ux] ED-16205 - Fix missing yellow highlight on merged table cells when hover sort column options on table floating toolbar
+- [`b9141027f87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9141027f87) - [ux] ED-13873 fixes a bug where after deleting a list in a panel or table the cursor would move to the cell to the right. Uses setSelection to position the cursor as expected after delete.
+- [`e9a8cb724c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e9a8cb724c1) - [ux] ED-16207 - Update color picker button size and background to allow hover effect to standout
+- Updated dependencies
+
+## 177.0.1
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 177.0.0
 
 ### Major Changes

package/codemods/__tests__/next-remove-allow-more-text-colors-prop.ts

@@ -0,0 +1,147 @@
+jest.autoMockOff();
+
+import { createTransformer } from '../utils';
+import { removeAllowMoreColorsProp } from '../migrates/next-remove-allow-more-text-colors-prop';
+
+// This stays as require() since changing to import will trigger a linter error
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+const transformer = createTransformer('@atlaskit/editor-core', [
+  removeAllowMoreColorsProp,
+]);
+
+describe('remove `allowMoreTextColors` field from `allowTextColor` Editor prop.', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+      allowStatus={true}
+    />
+    `, // -----
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      allowTextColor = {
+        {
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+      allowStatus={true}
+    />
+    `, // -----
+    'remove allowMoreTextColors field if it exists',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+        }
+      }
+    />
+    `, // -----
+    `
+    import React from 'react';
+    import { Editor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor={true}
+    />
+    `, // -----
+    'set allowTextColor prop value to `true` if allowMoreTextColors is its only field',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+    import { Editor as MyEditor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    `
+    import React from 'react';
+    import { Editor as MyEditor } from '@atlaskit/editor-core';
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    'remove allowMoreTextColors prop prop when Editor is renamed',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    const Editor = (props) => {
+      <div>{props.children}</div>
+    };
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    `
+    import React from 'react';
+
+    const Editor = (props) => {
+      <div>{props.children}</div>
+    };
+
+    export default () => <Editor
+      appearance="full-page"
+      allowTextColor = {
+        {
+          allowMoreTextColors: true,
+          defaultColour: {color: 'red', label: 'red'}
+        }
+      }
+    />
+    `, // -----
+    'only remove allowMoreTextColors prop for Editor from @atlaskit/editor-core',
+  );
+});

package/codemods/migrates/next-remove-allow-more-text-colors-prop.ts

@@ -0,0 +1,58 @@
+import core from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+import { findImportFromPackage } from '../utils';
+
+/**
+ * Generate a codemod to remove `allowMoreTextColors` field
+ * from `allowTextColor` Editor prop.
+ * Ref: ED-15849
+ */
+const createRemoveAllowMoreTextColorsPropTransform = (
+  pkg: string,
+  component: string,
+) => {
+  return (j: core.JSCodeshift, source: Collection<any>) => {
+    // Find regular or renamed imports
+    // of <Editor/> component from '@atlaskit/editor-core' package
+    const importedNames: string[] = findImportFromPackage(
+      j,
+      source,
+      '@atlaskit/editor-core',
+      'Editor',
+    );
+
+    // Make the change on all instances of named imports found
+    importedNames.forEach((importedComponentName) => {
+      // Find `allowTextColor` prop
+      const allowTextColorCollection = source.find(j.JSXAttribute, {
+        name: {
+          type: 'JSXIdentifier',
+          name: 'allowTextColor',
+        },
+      });
+      allowTextColorCollection
+        .find(j.ObjectProperty, { key: { name: 'allowMoreTextColors' } })
+        .forEach((x) => j(x).remove());
+
+      // If the remaining `allowTextColor` prop is an empty object, set `allowTextColor` to `true`.
+      allowTextColorCollection.forEach((allowTextColorPath) => {
+        j(allowTextColorPath).find(j.ObjectExpression, (objectExpression) => {
+          if (objectExpression.properties.length === 0) {
+            j(allowTextColorPath).replaceWith(
+              j.jsxAttribute(
+                j.jsxIdentifier('allowTextColor'),
+                j.jsxExpressionContainer(j.booleanLiteral(true)),
+              ),
+            );
+          }
+        });
+      });
+    });
+  };
+};
+
+export const removeAllowMoreColorsProp =
+  createRemoveAllowMoreTextColorsPropTransform(
+    '@atlaskit/editor-core',
+    'Editor',
+  );

package/dist/cjs/create-editor/ErrorBoundary.js

@@ -119,8 +119,10 @@ var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component) {
                   actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
                   eventType: _analytics.EVENT_TYPE.OPERATIONAL,
                   attributes: {
-                    errorStack: errorStack,
                     errorId: sharedId
+                  },
+                  nonPrivacySafeAttributes: {
+                    errorStack: errorStack
                   }
                 });
 

package/dist/cjs/create-editor/ReactEditorView.js

@@ -391,9 +391,10 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
       var nodes = (0, _nodes.findChangedNodesFromTransaction)(unsafeTransaction);
       var changedNodesValid = (0, _nodes.validateNodes)(nodes);
-      var transaction = _this.featureFlags.saferDispatchedTransactions ? new Proxy(unsafeTransaction, (0, _saferTransactions.freezeUnsafeTransactionProperties)({
+      var transaction = _this.featureFlags.saferDispatchedTransactions || _this.featureFlags.saferDispatchedTransactionsAnalyticsOnly ? new Proxy(unsafeTransaction, (0, _saferTransactions.freezeUnsafeTransactionProperties)({
         dispatchAnalyticsEvent: _this.dispatchAnalyticsEvent,
-        pluginKey: 'unknown-reacteditorview'
+        pluginKey: 'unknown-reacteditorview',
+        analyticsOnly: _this.featureFlags.saferDispatchedTransactionsAnalyticsOnly
       })) : unsafeTransaction;
 
       if (changedNodesValid) {

package/dist/cjs/create-editor/create-editor.js

@@ -127,7 +127,8 @@ function createPMPlugins(config) {
       _performanceTracking$2 = performanceTracking.transactionTracking,
       transactionTracking = _performanceTracking$2 === void 0 ? TRACKING_DEFAULT : _performanceTracking$2;
   var saferDispatchedTransactions = featureFlags.saferDispatchedTransactions;
-  var useInstrumentedPlugin = uiTracking.enabled || transactionTracking.enabled || saferDispatchedTransactions;
+  var saferDispatchedTransactionsAnalyticsOnly = featureFlags.saferDispatchedTransactionsAnalyticsOnly;
+  var useInstrumentedPlugin = uiTracking.enabled || transactionTracking.enabled || saferDispatchedTransactions || saferDispatchedTransactionsAnalyticsOnly;
 
   if (process.env.NODE_ENV === 'development' && transactionTracking.enabled && !transactionTracker) {
     // eslint-disable-next-line no-console
@@ -139,6 +140,7 @@ function createPMPlugins(config) {
       uiTracking: uiTracking,
       transactionTracking: transactionTracking,
       saferDispatchedTransactions: saferDispatchedTransactions,
+      saferDispatchedTransactionsAnalyticsOnly: saferDispatchedTransactionsAnalyticsOnly,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
     }, transactionTracker);
   } : function (plugin) {

package/dist/cjs/editor.js

@@ -439,6 +439,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "deprecationWarnings",
     value: function deprecationWarnings(props) {
+      var _props$allowTextColor;
+
       if (process.env.NODE_ENV === 'production') {
         return;
       }
@@ -471,6 +473,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line no-console
         console.warn("Advanced table options are deprecated (except isHeaderRowRequired) to continue using advanced table features use - <Editor allowTables={{ advanced: true }} /> [Will be changed in editor-core@".concat(nextVersion, "]"));
       }
+
+      if (props.hasOwnProperty('allowTextColor') && typeof props.allowTextColor !== 'boolean' && (props === null || props === void 0 ? void 0 : (_props$allowTextColor = props.allowTextColor) === null || _props$allowTextColor === void 0 ? void 0 : _props$allowTextColor.allowMoreTextColors) !== undefined) {
+        // eslint-disable-next-line no-console
+        console.warn("\"allowMoreTextColors\" field of \"allowTextColor\" property is deprecated. It will be removedin editor-core@".concat(nextVersion, ". The color palette now shows more colors by default."));
+      }
     }
   }, {
     key: "onEditorDestroyed",

package/dist/cjs/labs/next/full-page.js

@@ -21,8 +21,6 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -65,8 +63,8 @@ var editorContentArea = function editorContentArea(theme) {
   return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), theme.layoutMaxWidth + GUTTER_PADDING * 2, _commonStyles.tableFullPageEditorStyles);
 };
 
-var mainToolbar = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), _editorSharedStyles.akEditorMenuZIndex, (0, _tokens.token)('elevation.surface', 'white'));
-var mainToolbarWithKeyline = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, _editorSharedStyles.akEditorToolbarKeylineHeight, (0, _tokens.token)('color.border', _colors.N30));
+var mainToolbar = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), _editorSharedStyles.akEditorMenuZIndex, "var(--ds-surface, white)");
+var mainToolbarWithKeyline = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
 var mainToolbarCustomComponentsSlot = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
 var sidebarArea = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 

package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -13,13 +13,11 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var triggerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 exports.triggerWrapper = triggerWrapper;
-var separator = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), (0, _tokens.token)('color.border', _colors.N30));
+var separator = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"));
 exports.separator = separator;
 var wrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
 exports.wrapper = wrapper;

package/dist/cjs/plugins/block-type/commands/delete-and-move-cursor.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deleteAndMoveCursor = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+// We should override default behaviour when selection spans node depths or
+// ends at a node junction
+var shouldMoveCursorAfterDelete = function shouldMoveCursorAfterDelete(state) {
+  var _state$selection = state.selection,
+      $from = _state$selection.$from,
+      $to = _state$selection.$to;
+  var nodeRange = $from.blockRange($to);
+
+  if (!nodeRange) {
+    return false;
+  }
+
+  var hasSameAncestor = $from.depth === $to.depth && $from.depth - 1 === nodeRange.depth;
+  var toPositionHasNodeAfter = !!$to.nodeAfter;
+
+  if (hasSameAncestor || toPositionHasNodeAfter) {
+    return false;
+  }
+
+  return true;
+};
+/**
+ * Fixes cursor position after delete for list/task in panel and table
+ *
+ * ED-13873 fixes a bug where after deleting a list the cursor would move
+ * to the cell to the right. Uses setSelection to position the cursor as expected after deleting.
+ *
+ * @param state EditorState<any>
+ * @param dispatch CommandDispatch
+ * @returns boolean
+ */
+
+
+var deleteAndMoveCursor = function deleteAndMoveCursor(state, dispatch) {
+  if (state.selection.empty || !(state.selection instanceof _prosemirrorState.TextSelection)) {
+    return false;
+  }
+
+  if (!shouldMoveCursorAfterDelete(state)) {
+    return false;
+  }
+
+  var tr = state.tr;
+  tr.deleteSelection(); // Make sure the next position is not out of boundaries
+
+  var previousPosition = Math.min(Math.max(state.selection.$from.pos, 0), tr.doc.content.size); // Override default delete behaviour that moves the cursor to first suitable position after selection (postive bias).
+  // See. selectionToInsertionEnd. We will override behavior with negative bias (search for suitable cursor position backwards).
+
+  tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(previousPosition), -1));
+
+  if (dispatch) {
+    dispatch(tr.scrollIntoView());
+  }
+
+  return true;
+};
+
+exports.deleteAndMoveCursor = deleteAndMoveCursor;

package/dist/cjs/plugins/block-type/commands/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "cleanUpAtTheStartOfDocument", {
     return _blockType.cleanUpAtTheStartOfDocument;
   }
 });
+Object.defineProperty(exports, "deleteAndMoveCursor", {
+  enumerable: true,
+  get: function get() {
+    return _deleteAndMoveCursor.deleteAndMoveCursor;
+  }
+});
 Object.defineProperty(exports, "insertBlock", {
   enumerable: true,
   get: function get() {
@@ -80,4 +86,6 @@ var _blockType = require("./block-type");
 
 var _insertBlock = require("./insert-block");
 
-var _transformToCodeBlock = require("./transform-to-code-block");
+var _transformToCodeBlock = require("./transform-to-code-block");
+
+var _deleteAndMoveCursor = require("./delete-and-move-cursor");

package/dist/cjs/plugins/block-type/pm-plugins/keymap.js

@@ -9,6 +9,8 @@ exports.default = keymapPlugin;
 
 var _prosemirrorHistory = require("prosemirror-history");
 
+var _prosemirrorCommands = require("prosemirror-commands");
+
 var keymaps = _interopRequireWildcard(require("../../../keymaps"));
 
 var commands = _interopRequireWildcard(require("../../../commands"));
@@ -29,6 +31,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var backspace = (0, _prosemirrorCommands.chainCommands)(_commands2.cleanUpAtTheStartOfDocument, _commands2.deleteAndMoveCursor);
+var del = (0, _prosemirrorCommands.chainCommands)((0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), _commands2.deleteAndMoveCursor);
+
 function keymapPlugin(schema, featureFlags) {
   var list = {};
   keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, commands.insertNewLineWithAnalytics, list);
@@ -36,9 +41,9 @@ function keymapPlugin(schema, featureFlags) {
   keymaps.bindKeymapWithCommand(keymaps.moveDown.common, commands.createNewParagraphBelow, list);
   keymaps.bindKeymapWithCommand(keymaps.findKeyMapForBrowser(keymaps.redo), _prosemirrorHistory.redo, list);
   keymaps.bindKeymapWithCommand(keymaps.undo.common, _prosemirrorHistory.undo, list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, _commands2.cleanUpAtTheStartOfDocument, list);
-  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, (0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), list);
-  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, (0, _commands3.deleteEmptyParagraphAndMoveBlockUp)(_utils.isNodeAWrappingBlockNode), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspace, list);
+  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, del, list);
+  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, del, list);
 
   if (schema.nodes[blockTypes.BLOCK_QUOTE.nodeName]) {
     keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBlockQuote), (0, _commands2.insertBlockTypesWithAnalytics)(blockTypes.BLOCK_QUOTE.name, _analytics.INPUT_METHOD.KEYBOARD), list);

package/dist/cjs/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -17,13 +17,11 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _styles2 = require("../../../../ui/styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  var selectedStyle = selected ? "".concat(tagName, " { color: ").concat((0, _tokens.token)('color.text', 'white'), " !important; }") : '';
+  var selectedStyle = selected ? "".concat(tagName, " { color: ", "var(--ds-text, white)", " !important; }") : '';
   return function (themeProps) {
     return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), (0, _styles.headingsSharedStyles)(themeProps), selectedStyle);
   };
@@ -32,5 +30,5 @@ var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected)
 exports.blockTypeMenuItemStyle = blockTypeMenuItemStyle;
 var keyboardShortcut = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: 16px;\n"])), _styles2.shortcutStyle);
 exports.keyboardShortcut = keyboardShortcut;
-var keyboardShortcutSelect = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.icon', _colors.N400));
+var keyboardShortcutSelect = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-icon, ".concat(_colors.N400, ")"));
 exports.keyboardShortcutSelect = keyboardShortcutSelect;

package/dist/cjs/plugins/breakout/ui/LayoutButton.js

@@ -59,8 +59,6 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _isSupportedNode = require("../utils/is-supported-node");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("@atlaskit/theme/constants");
 
 var _templateObject;
@@ -69,7 +67,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'));
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)");
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',

package/dist/cjs/plugins/card/styles.js

@@ -17,11 +17,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = FLOATING_TOOLBAR_LINKPICKER_CLASSNAME;
-var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
+var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
 exports.smartCardStyles = smartCardStyles;

package/dist/cjs/plugins/code-block/styles.js

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _classNames = require("./ui/class-names");
 
 var _styles = require("@atlaskit/editor-common/styles");
@@ -24,11 +22,11 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _templateObject, _templateObject2;
 
 var GutterDangerOverlay = function GutterDangerOverlay() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::after {\n    height: 100%;\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 24px;\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.blanket.danger', 'none'));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::after {\n    height: 100%;\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 24px;\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, none)");
 };
 
 var codeBlockStyles = function codeBlockStyles(props) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), (0, _styles.codeBlockSharedStyles)(props), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.background.danger', _colors.R75), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), GutterDangerOverlay(), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.blanket.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.background.danger', 'rgba(255, 143, 115, 0.5)'), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), GutterDangerOverlay(), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.blanket.danger', 'rgba(255, 189, 173, 0.5)'));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), (0, _styles.codeBlockSharedStyles)(props), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _classNames.codeBlockClassNames.gutter, "var(--ds-background-danger, ".concat(_colors.R75, ")"), "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _classNames.codeBlockClassNames.content, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _classNames.codeBlockClassNames.gutter, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _classNames.codeBlockClassNames.content, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))");
 };
 
 exports.codeBlockStyles = codeBlockStyles;