@atlaskit/editor-core 182.0.2 → 182.1.0

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.extendedColorPalette = exports.default = exports.colorPalette = exports.ORIGINAL_COLOR_PICKER_COLUMNS = exports.EXPANDED_COLOR_PICKER_COLUMNS = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _form = require("@atlaskit/form");
+var _editorPalette = require("@atlaskit/editor-palette");
 var _common = require("../../../ui/ColorPalette/Palettes/common");
 var _utils = require("../utils");
 var _constants = require("@atlaskit/theme/constants");
@@ -17,6 +18,7 @@ var _RequiredIndicator = require("./common/RequiredIndicator");
 var _typography = require("@atlaskit/theme/typography");
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
 var _ColorPickerButton = _interopRequireDefault(require("../../ColorPickerButton"));
+var _ColorPalette = require("../../../ui/ColorPalette");
 var _templateObject, _templateObject2;
 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
@@ -135,29 +137,257 @@ var colorPalette = [{
     border: _common.DEFAULT_BORDER_COLOR
   });
 });
+
+/**
+ * Extended chart colors.
+ * Decided here https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3477245015/Tokenising+table+charts+color
+ */
+exports.colorPalette = colorPalette;
+var extendedColorPalette = [{
+  label: 'Darker Blue',
+  value: '#003884'
+},
+// 1000
+{
+  label: 'Darker Teal',
+  value: '#206B74'
+},
+// 1000
+{
+  label: 'Darker Green',
+  value: '#055C3F'
+},
+// 1000
+{
+  label: 'Darker Yellow',
+  value: '#946104'
+},
+// 1000
+{
+  label: 'Darker Orange',
+  value: '#974F0C'
+},
+// 1000
+{
+  label: 'Darker Red',
+  value: '#A32000'
+},
+// 1000
+{
+  label: 'Darker Magenta',
+  value: '#943D73'
+},
+// 1000
+{
+  label: 'Darker Purple',
+  value: '#44368B'
+},
+// 1000
+{
+  label: 'Darker Gray',
+  value: '#44546F'
+},
+// 1000
+
+{
+  label: 'Dark Blue',
+  value: '#0055CC'
+},
+// 800
+{
+  label: 'Dark Teal',
+  value: '#1D7F8C'
+},
+// 800
+{
+  label: 'Dark Green',
+  value: '#177D52'
+},
+// 800
+{
+  label: 'Dark Yellow',
+  value: '#FF9D00'
+},
+// 800
+{
+  label: 'Dark Orange',
+  value: '#B65C02'
+},
+// 800
+{
+  label: 'Dark Red',
+  value: '#D32D03'
+},
+// 800
+{
+  label: 'Dark Magenta',
+  value: '#CD519D'
+},
+// 800
+{
+  label: 'Dark Purple',
+  value: '#5A43D0'
+},
+// 800
+{
+  label: 'Dark Gray',
+  value: '#758195'
+},
+// 800
+
+{
+  label: 'Blue',
+  value: '#247FFF'
+},
+// 600
+{
+  label: 'Teal',
+  value: '#1D9AAA'
+},
+// 600
+{
+  label: 'Green',
+  value: '#23A971'
+},
+// 600
+{
+  label: 'Yellow',
+  value: '#FFBE33'
+},
+// 600
+{
+  label: 'Orange',
+  value: '#D97008'
+},
+// 600
+{
+  label: 'Red',
+  value: '#FC552C'
+},
+// 600
+{
+  label: 'Magenta',
+  value: '#DA62AC'
+},
+// 600
+{
+  label: 'Purple',
+  value: '#8B77EE'
+},
+// 600
+{
+  label: 'Gray',
+  value: '#8590A2'
+},
+// 600
+
+{
+  label: 'Light Blue',
+  value: '#7AB2FF'
+},
+// 400
+{
+  label: 'Light Teal',
+  value: '#60C6D2'
+},
+// 400
+{
+  label: 'Light Green',
+  value: '#6BE1B0'
+},
+// 400
+{
+  label: 'Light Yellow',
+  value: '#FFDB57'
+},
+// 400
+{
+  label: 'Light Orange',
+  value: '#FAA53D'
+},
+// 400
+{
+  label: 'Light Red',
+  value: '#FF8F73'
+},
+// 400
+{
+  label: 'Light Magenta',
+  value: '#E774BB'
+},
+// 400
+{
+  label: 'Light Purple',
+  value: '#B5A7FB'
+},
+// 400
+{
+  label: 'Light Gray',
+  value: '#8993A5'
+} // 400
+].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: _common.DEFAULT_BORDER_COLOR
+  });
+});
+exports.extendedColorPalette = extendedColorPalette;
 var colorPickerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * (0, _constants.gridSize)(), (0, _constants.gridSize)());
 var colorPickerLabel = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), _typography.headingSizes.h400.size);
+var EXPANDED_COLOR_PICKER_COLUMNS = 9;
+exports.EXPANDED_COLOR_PICKER_COLUMNS = EXPANDED_COLOR_PICKER_COLUMNS;
+var ORIGINAL_COLOR_PICKER_COLUMNS = 5;
+exports.ORIGINAL_COLOR_PICKER_COLUMNS = ORIGINAL_COLOR_PICKER_COLUMNS;
 var ColorPicker = function ColorPicker(props) {
   var name = props.name,
     title = props.title,
     currentColor = props.currentColor,
-    colorPalette = props.colorPalette,
     onChange = props.onChange,
-    onFieldChange = props.onFieldChange;
+    onFieldChange = props.onFieldChange,
+    featureFlags = props.featureFlags;
   var onColorChange = function onColorChange(color) {
     var colorValue = color.value;
-    if (!(0, _utils.isValidHex)(colorValue)) {
-      throw new Error('invalid hex value');
-    }
     onChange(colorValue);
     onFieldChange(name, currentColor !== colorValue);
   };
-  return (0, _react.jsx)(_ColorPickerButton.default, {
+  var _ref = featureFlags !== null && featureFlags !== void 0 ? featureFlags : {
+      useSomewhatSemanticTextColorNames: false,
+      expandedChartColors: false
+    },
+    useSomewhatSemanticTextColorNames = _ref.useSomewhatSemanticTextColorNames,
+    expandedChartColors = _ref.expandedChartColors;
+  return expandedChartColors ? (0, _react.jsx)(_ColorPickerButton.default, {
+    title: title
+    // Original color palette had hex code with alpha channel.
+    // However, alpha channel was always FF, and it was not used
+    // Expanded color palette does not have alpha channel, so
+    //  removing last two characters from hex code with alpha here.
+    ,
+    currentColor: currentColor.substring(0, 7),
+    onChange: onColorChange,
+    colorPalette: extendedColorPalette,
+    hexToPaletteColor: _editorPalette.hexToEditorTableChartsPaletteColor,
+    paletteColorTooltipMessages: _ColorPalette.chartsColorPaletteTooltipMessages
+    // We did not want to create new FF or update
+    //  useSomewhatSemanticTextColorNames name
+    //  because it is temporary and require extra work.
+    // So even though it says text color names,
+    //  we are going to use for all color pickers
+    //  such as text, background and table charts.
+    ,
+    showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
+    cols: EXPANDED_COLOR_PICKER_COLUMNS,
+    alignX: "right",
+    placement: "ConfigPanel",
+    size: {
+      width: 3 * (0, _constants.gridSize)(),
+      height: 3 * (0, _constants.gridSize)()
+    }
+  }) : (0, _react.jsx)(_ColorPickerButton.default, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
     colorPalette: colorPalette,
-    cols: 5,
+    cols: ORIGINAL_COLOR_PICKER_COLUMNS,
     alignX: "right",
     placement: "ConfigPanel",
     size: {
@@ -166,10 +396,11 @@ var ColorPicker = function ColorPicker(props) {
     }
   });
 };
-var ColorPickerField = function ColorPickerField(_ref) {
-  var name = _ref.name,
-    field = _ref.field,
-    onFieldChange = _ref.onFieldChange;
+var ColorPickerField = function ColorPickerField(_ref2) {
+  var name = _ref2.name,
+    field = _ref2.field,
+    onFieldChange = _ref2.onFieldChange,
+    featureFlags = _ref2.featureFlags;
   var label = field.label,
     defaultValue = field.defaultValue,
     isRequired = field.isRequired;
@@ -180,9 +411,9 @@ var ColorPickerField = function ColorPickerField(_ref) {
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
     }
-  }, function (_ref2) {
-    var fieldProps = _ref2.fieldProps,
-      error = _ref2.error;
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      error = _ref3.error;
     return (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)("div", {
       css: colorPickerWrapper
     }, (0, _react.jsx)("label", {
@@ -194,9 +425,9 @@ var ColorPickerField = function ColorPickerField(_ref) {
       name: name,
       title: label,
       currentColor: fieldProps.value,
-      colorPalette: colorPalette,
       onChange: fieldProps.onChange,
-      onFieldChange: onFieldChange
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
     })), error && (0, _react.jsx)(_FieldMessages.default, {
       error: error,
       description: ""

package/dist/cjs/ui/ConfigPanel/FormContent.js

@@ -34,7 +34,8 @@ function FieldComponent(_ref) {
     parentName = _ref.parentName,
     extensionManifest = _ref.extensionManifest,
     firstVisibleFieldName = _ref.firstVisibleFieldName,
-    onFieldChange = _ref.onFieldChange;
+    onFieldChange = _ref.onFieldChange,
+    featureFlags = _ref.featureFlags;
   var _field = field,
     name = _field.name,
     type = _field.type;
@@ -75,7 +76,8 @@ function FieldComponent(_ref) {
       return /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
         name: parentedName,
         field: field,
-        onFieldChange: onFieldChange
+        onFieldChange: onFieldChange,
+        featureFlags: featureFlags
       });
     case 'date':
       return /*#__PURE__*/_react.default.createElement(_Date.default, {
@@ -144,7 +146,8 @@ function FieldComponent(_ref) {
           fields: field.fields,
           parameters: resolvedParameters,
           onFieldChange: onFieldChange,
-          extensionManifest: extensionManifest
+          extensionManifest: extensionManifest,
+          featureFlags: featureFlags
         }));
       }
     case 'tab-group':
@@ -161,7 +164,8 @@ function FieldComponent(_ref) {
             fields: tabField.fields,
             parameters: tabParameters,
             onFieldChange: onFieldChange,
-            extensionManifest: extensionManifest
+            extensionManifest: extensionManifest,
+            featureFlags: featureFlags
           });
         };
         return /*#__PURE__*/_react.default.createElement(_TabGroup.default, {
@@ -193,7 +197,8 @@ function FormContent(_ref3) {
     onClickRemove = _ref3.onClickRemove,
     onFieldChange = _ref3.onFieldChange,
     firstVisibleFieldName = _ref3.firstVisibleFieldName,
-    contextIdentifierProvider = _ref3.contextIdentifierProvider;
+    contextIdentifierProvider = _ref3.contextIdentifierProvider,
+    featureFlags = _ref3.featureFlags;
   return /*#__PURE__*/_react.default.createElement(_FormErrorBoundary.FormErrorBoundary, {
     contextIdentifierProvider: contextIdentifierProvider,
     extensionKey: extensionManifest.key,
@@ -205,7 +210,8 @@ function FormContent(_ref3) {
       parentName: parentName,
       extensionManifest: extensionManifest,
       firstVisibleFieldName: firstVisibleFieldName,
-      onFieldChange: onFieldChange
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
     });
 
     // only to be supported by String fields at this time

package/dist/cjs/ui/ConfigPanel/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateRequired = exports.validate = exports.isValidHex = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.getNameFromDuplicateField = void 0;
+exports.validateRequired = exports.validate = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.getNameFromDuplicateField = void 0;
 var _types = require("./types");
 var validate = function validate(field, value) {
   return validateRequired(field, value);
@@ -59,14 +59,4 @@ exports.isDuplicateField = isDuplicateField;
 var getNameFromDuplicateField = function getNameFromDuplicateField(key) {
   return key.replace(duplicateFieldRegex, '');
 };
-
-/*
-    ColorPickerButton only accepts 8 digit hex alpha values, for example:
-    #123fffaa (8 digits, hex alpha)
-    */
-exports.getNameFromDuplicateField = getNameFromDuplicateField;
-var isValidHex = function isValidHex(color) {
-  var hexRegexPattern = new RegExp('^#([a-fA-F0-9]{8})$');
-  return hexRegexPattern.test(color);
-};
-exports.isValidHex = isValidHex;
+exports.getNameFromDuplicateField = getNameFromDuplicateField;

package/dist/cjs/ui/ContentStyles/index.js

@@ -39,7 +39,6 @@ var _styles24 = require("../../plugins/status/styles");
 var _styles25 = require("../../plugins/card/styles");
 var _styles26 = require("../../plugins/date/styles");
 var _styled = require("../../plugins/card/ui/styled");
-var _featureFlagsContext = require("../../plugins/feature-flags-context");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _templateObject;
 /** @jsx jsx */
@@ -52,16 +51,14 @@ var contentStyles = function contentStyles(props) {
 };
 var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-    var featureFlags = (0, _featureFlagsContext.useFeatureFlags)();
     var className = props.className,
       children = props.children;
     var theme = (0, _react2.useTheme)();
     var memoizedStyle = (0, _react.useMemo)(function () {
       return contentStyles({
-        theme: theme,
-        featureFlags: featureFlags
+        theme: theme
       });
-    }, [theme, featureFlags]);
+    }, [theme]);
     return (0, _react2.jsx)("div", {
       className: className,
       ref: ref,

package/dist/cjs/ui/MediaAndEmbedsToolbar/index.js

@@ -126,20 +126,28 @@ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2,
   return (0, _prosemirrorUtils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
 };
 var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, allowResizing, allowResizingInTables) {
+  var allowWrapping = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  var allowAlignment = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var selection = state.selection;
   if (!(selection instanceof _prosemirrorState.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
     return [];
   }
   var layout = selection.node.attrs.layout;
-  var toolbarItems = [].concat((0, _toConsumableArray2.default)(mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType)), [{
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType) : [];
+  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType) : [];
+  var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
+  return items;
+};
+var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
+  return allowAlignment && allowWrapping ? [{
     type: 'separator'
-  }], (0, _toConsumableArray2.default)(mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType)));
-  if (!allowResizing) {
-    toolbarItems = toolbarItems.concat([{
-      type: 'separator'
-    }].concat((0, _toConsumableArray2.default)(mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType))));
-  }
-  return toolbarItems;
+  }] : [];
+};
+var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
+  return !allowResizing && (allowAlignment || allowWrapping) ? [{
+    type: 'separator'
+  }] : [];
 };
 var _default = buildLayoutButtons;
 exports.default = _default;

package/dist/cjs/utils/document.js

@@ -323,10 +323,12 @@ var maySanitizePrivateContent = function maySanitizePrivateContent(entity, provi
 var getStepRange = function getStepRange(transaction) {
   var from = -1;
   var to = -1;
-  transaction.steps.forEach(function (step) {
-    step.getMap().forEach(function (_oldStart, _oldEnd, newStart, newEnd) {
+  transaction.mapping.maps.forEach(function (stepMap, index) {
+    stepMap.forEach(function (oldStart, oldEnd) {
+      var newStart = transaction.mapping.slice(index).map(oldStart, -1);
+      var newEnd = transaction.mapping.slice(index).map(oldEnd);
       from = newStart < from || from === -1 ? newStart : from;
-      to = newEnd < to || to === -1 ? newEnd : to;
+      to = newEnd > to || to === -1 ? newEnd : to;
     });
   });
   if (from !== -1) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "182.0.2";
+var version = "182.1.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "182.0.2",
+	"version": "182.1.0",
 	"sideEffects": false
 }

package/dist/es2019/actions/index.js

@@ -6,7 +6,6 @@ import { findParentNode, safeInsert } from 'prosemirror-utils';
 import { createDispatch } from '../event-dispatcher';
 import { getCollabProvider } from '../plugins/collab-edit/native-collab-provider-plugin';
 import { findNodePosWithLocalId } from '../plugins/extension/utils';
-import { getFeatureFlags } from '../plugins/feature-flags-context/get-feature-flags';
 import { toJSON } from '../utils';
 import { getEditorValueWithMedia, __temporaryFixForConfigPanel } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
@@ -25,11 +24,13 @@ export default class EditorActions {
     });
     _defineProperty(this, "getResolvedEditorState", async () => {
       var _getCollabProvider;
+      const {
+        useNativeCollabPlugin
+      } = this.getFeatureFlags();
       if (!this.editorView) {
         throw new Error('Called getResolvedEditorState before editorView is ready');
       }
-      const featureFlags = getFeatureFlags(this.editorView.state);
-      if (!featureFlags.useNativeCollabPlugin) {
+      if (!useNativeCollabPlugin) {
         const editorValue = await this.getValue();
         if (!editorValue) {
           throw new Error('editorValue is undefined');
@@ -59,11 +60,15 @@ export default class EditorActions {
   _privateGetEventDispatcher() {
     return this.eventDispatcher;
   }
+  getFeatureFlags() {
+    return {};
+  }
 
   // This method needs to be public for EditorContext component.
-  _privateRegisterEditor(editorView, eventDispatcher, contentTransformer) {
+  _privateRegisterEditor(editorView, eventDispatcher, contentTransformer, getFeatureFlags = () => ({})) {
     this.contentTransformer = contentTransformer;
     this.eventDispatcher = eventDispatcher;
+    this.getFeatureFlags = getFeatureFlags;
     if (!this.editorView && editorView) {
       this.editorView = editorView;
       this.listeners.forEach(cb => cb(editorView, eventDispatcher));
@@ -81,6 +86,7 @@ export default class EditorActions {
     this.contentTransformer = undefined;
     this.contentEncode = undefined;
     this.eventDispatcher = undefined;
+    this.getFeatureFlags = () => ({});
   }
   _privateSubscribe(cb) {
     // If editor is registered and somebody is trying to add a listener,

package/dist/es2019/analytics-api/attach-payload-into-transaction.js

@@ -14,10 +14,11 @@ export const attachPayloadIntoTransaction = ({
   const {
     storedMarks
   } = tr;
+  const pos = tr.mapping.map(editorState.selection.$from.pos, -1);
   tr.step(new AnalyticsStep([{
     payload,
     channel
-  }], actionsToIgnore, editorState.selection.$from.pos) // We need to create the step based on a position, this prevent split history for relative changes.
+  }], actionsToIgnore, pos) // We need to create the step based on a position, this prevent split history for relative changes.
   );
 
   // When you add a new step all the storedMarks are removed it

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import memoizeOne from 'memoize-one';
 import React from 'react';
 import uuid from 'uuid';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
@@ -7,28 +6,16 @@ import { IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../plugins/analytics';
 import { editorAnalyticsChannel } from '../plugins/analytics/consts';
-import { getFeatureFlags } from '../plugins/feature-flags-context';
 import { getDocStructure } from '../utils/document-logger';
 import { WithEditorView } from './WithEditorView';
 import { isOutdatedBrowser } from '@atlaskit/editor-common/utils';
 export class ErrorBoundaryWithEditorView extends React.Component {
-  // Memoizing this as react alternative suggestion of https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
-
-  get featureFlags() {
-    return this.getFeatureFlags(this.props.editorView);
-  }
   constructor(props) {
     super(props);
     _defineProperty(this, "browserExtensions", undefined);
     _defineProperty(this, "state", {
       error: undefined
     });
-    _defineProperty(this, "getFeatureFlags", memoizeOne(editorView => {
-      if (!editorView) {
-        return {};
-      }
-      return getFeatureFlags(editorView.state);
-    }));
     _defineProperty(this, "sendErrorData", async analyticsErrorPayload => {
       var _window, _window$navigator;
       const product = await this.getProductName();
@@ -105,6 +92,7 @@ export class ErrorBoundaryWithEditorView extends React.Component {
         docStructure: attributes.docStructure
       };
     });
+    this.featureFlags = props.featureFlags;
     if (props.editorView) {
       this.experienceStore = ExperienceStore.getInstance(props.editorView);
     }

package/dist/es2019/create-editor/ReactEditorViewInternal.js

@@ -13,7 +13,7 @@ import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../utils/nodes';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE, PLATFORMS, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
 import { createFeatureFlagsFromProps } from './feature-flags-from-props';
-import { getEnabledFeatureFlagKeys } from '../plugins/feature-flags-context/get-enabled-feature-flag-keys';
+import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { createErrorReporter, createPMPlugins, processPluginsList } from './create-editor';
 import { getDocStructure } from '../utils/document-logger';
 import { isFullPage } from '../utils/is-full-page';
@@ -479,7 +479,7 @@ export class ReactEditorView extends React.Component {
       className: getUAPrefix(),
       key: "ProseMirror",
       ref: this.handleEditorViewRef,
-      "aria-label": this.props.intl.formatMessage(editorMessages.editorAssistiveLabel),
+      "aria-label": this.props.editorProps.assistiveLabel ? this.props.editorProps.assistiveLabel : this.props.intl.formatMessage(editorMessages.editorAssistiveLabel),
       role: "textbox"
     }));
     this.pluginInjectionAPI = new EditorPluginInjectionAPI({

package/dist/es2019/editor-next/editor-internal.js

@@ -71,7 +71,8 @@ export function EditorInternalWithoutHooks({
     useShallow: useShallow
   }), jsx(ErrorBoundary, {
     createAnalyticsEvent: createAnalyticsEvent,
-    contextIdentifierProvider: props.contextIdentifierProvider
+    contextIdentifierProvider: props.contextIdentifierProvider,
+    featureFlags: featureFlags
   }, jsx(WidthProvider, {
     css: css({
       height: '100%'

package/dist/es2019/editor-next/index.js

@@ -16,6 +16,7 @@ import { defaultProps, propTypes } from './utils/editorPropTypes';
 import trackEditorActions from './utils/trackEditorActions';
 import onEditorCreated from './utils/onEditorCreated';
 import deprecationWarnings from './utils/deprecationWarnings';
+import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import { basePlugin } from '../plugins';
 export default class EditorNext extends React.Component {
   /**
@@ -31,6 +32,9 @@ export default class EditorNext extends React.Component {
       return (_this$props$onSave = (_this$props = this.props).onSave) === null || _this$props$onSave === void 0 ? void 0 : _this$props$onSave.call(_this$props, view);
     });
     _defineProperty(this, "handleAnalyticsEvent", data => fireAnalyticsEvent(this.createAnalyticsEvent)(data));
+    _defineProperty(this, "getFeatureFlags", () => {
+      return createFeatureFlagsFromProps(this.props);
+    });
     _defineProperty(this, "getExperienceStore", () => this.experienceStore);
     deprecationWarnings(props);
     this.editorActions = (context || {}).editorActions || new EditorActions();
@@ -50,7 +54,7 @@ export default class EditorNext extends React.Component {
     (_this$props$onDestroy = (_this$props2 = this.props).onDestroy) === null || _this$props$onDestroy === void 0 ? void 0 : _this$props$onDestroy.call(_this$props2);
   }
   registerEditorForActions(editorView, eventDispatcher, contentTransformer) {
-    this.editorActions._privateRegisterEditor(editorView, eventDispatcher, contentTransformer);
+    this.editorActions._privateRegisterEditor(editorView, eventDispatcher, contentTransformer, this.getFeatureFlags);
   }
   unregisterEditorFromActions() {
     this.editorActions._privateUnregisterEditor();