@atlaskit/editor-core 182.0.3 → 182.1.0

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

@@ -2,15 +2,15 @@
 import { jsx, css } from '@emotion/react';
 import { Fragment } from 'react';
 import { Field } from '@atlaskit/form';
+import { hexToEditorTableChartsPaletteColor } from '@atlaskit/editor-palette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
-import { isValidHex } from '../utils';
 import { validate } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
 import ColorPickerButton from '../../ColorPickerButton';
-
+import { chartsColorPaletteTooltipMessages } from '../../../ui/ColorPalette';
 /*
     NOTE: color used here are not yet in atlaskit code
     this is part of extended color pack from ADG, which is yet to be release
@@ -19,7 +19,7 @@ import ColorPickerButton from '../../ColorPickerButton';
     Colour sequence source: https://product-fabric.atlassian.net/browse/ED-12650?focusedCommentId=204875
 */
 
-const colorPalette = [{
+export const colorPalette = [{
   label: 'Light Blue',
   value: '#7AB2FFFF'
 },
@@ -125,6 +125,197 @@ const colorPalette = [{
   ...color,
   border: DEFAULT_BORDER_COLOR
 }));
+
+/**
+ * Extended chart colors.
+ * Decided here https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3477245015/Tokenising+table+charts+color
+ */
+export const 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(color => ({
+  ...color,
+  border: DEFAULT_BORDER_COLOR
+}));
 const colorPickerWrapper = css`
   display: flex;
   justify-content: space-between;
@@ -136,29 +327,62 @@ const colorPickerLabel = css`
   font-size: ${headingSizes.h400.size}px;
   margin-top: 0;
 `;
+export const EXPANDED_COLOR_PICKER_COLUMNS = 9;
+export const ORIGINAL_COLOR_PICKER_COLUMNS = 5;
 const ColorPicker = props => {
   const {
     name,
     title,
     currentColor,
-    colorPalette,
     onChange,
-    onFieldChange
+    onFieldChange,
+    featureFlags
   } = props;
   const onColorChange = color => {
     const colorValue = color.value;
-    if (!isValidHex(colorValue)) {
-      throw new Error('invalid hex value');
-    }
     onChange(colorValue);
     onFieldChange(name, currentColor !== colorValue);
   };
-  return jsx(ColorPickerButton, {
+  const {
+    useSomewhatSemanticTextColorNames,
+    expandedChartColors
+  } = featureFlags !== null && featureFlags !== void 0 ? featureFlags : {
+    useSomewhatSemanticTextColorNames: false,
+    expandedChartColors: false
+  };
+  return expandedChartColors ? jsx(ColorPickerButton, {
+    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: hexToEditorTableChartsPaletteColor,
+    paletteColorTooltipMessages: 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 * gridSize(),
+      height: 3 * gridSize()
+    }
+  }) : jsx(ColorPickerButton, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
     colorPalette: colorPalette,
-    cols: 5,
+    cols: ORIGINAL_COLOR_PICKER_COLUMNS,
     alignX: "right",
     placement: "ConfigPanel",
     size: {
@@ -170,7 +394,8 @@ const ColorPicker = props => {
 const ColorPickerField = ({
   name,
   field,
-  onFieldChange
+  onFieldChange,
+  featureFlags
 }) => {
   const {
     label,
@@ -196,9 +421,9 @@ const ColorPickerField = ({
     name: name,
     title: label,
     currentColor: fieldProps.value,
-    colorPalette: colorPalette,
     onChange: fieldProps.onChange,
-    onFieldChange: onFieldChange
+    onFieldChange: onFieldChange,
+    featureFlags: featureFlags
   })), error && jsx(FieldMessages, {
     error: error,
     description: ""

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

@@ -22,7 +22,8 @@ export function FieldComponent({
   parentName,
   extensionManifest,
   firstVisibleFieldName,
-  onFieldChange
+  onFieldChange,
+  featureFlags
 }) {
   var _parameters$errors;
   const {
@@ -67,7 +68,8 @@ export function FieldComponent({
       return /*#__PURE__*/React.createElement(ColorPicker, {
         name: parentedName,
         field: field,
-        onFieldChange: onFieldChange
+        onFieldChange: onFieldChange,
+        featureFlags: featureFlags
       });
     case 'date':
       return /*#__PURE__*/React.createElement(Date, {
@@ -134,7 +136,8 @@ export function FieldComponent({
           fields: field.fields,
           parameters: resolvedParameters,
           onFieldChange: onFieldChange,
-          extensionManifest: extensionManifest
+          extensionManifest: extensionManifest,
+          featureFlags: featureFlags
         }));
       }
     case 'tab-group':
@@ -149,7 +152,8 @@ export function FieldComponent({
             fields: tabField.fields,
             parameters: tabParameters,
             onFieldChange: onFieldChange,
-            extensionManifest: extensionManifest
+            extensionManifest: extensionManifest,
+            featureFlags: featureFlags
           });
         };
         return /*#__PURE__*/React.createElement(TabGroup, {
@@ -182,7 +186,8 @@ export default function FormContent({
   onClickRemove,
   onFieldChange,
   firstVisibleFieldName,
-  contextIdentifierProvider
+  contextIdentifierProvider,
+  featureFlags
 }) {
   return /*#__PURE__*/React.createElement(FormErrorBoundary, {
     contextIdentifierProvider: contextIdentifierProvider,
@@ -195,7 +200,8 @@ export default function FormContent({
       parentName: parentName,
       extensionManifest: extensionManifest,
       firstVisibleFieldName: firstVisibleFieldName,
-      onFieldChange: onFieldChange
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
     });
 
     // only to be supported by String fields at this time

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

@@ -36,14 +36,4 @@ export const getSafeParentedName = (name, parentName) => {
 };
 const duplicateFieldRegex = /:[0-9]+$/;
 export const isDuplicateField = key => duplicateFieldRegex.test(key);
-export const getNameFromDuplicateField = key => key.replace(duplicateFieldRegex, '');
-
-/*
-    ColorPickerButton only accepts 8 digit hex alpha values, for example:
-    #123fffaa (8 digits, hex alpha)
-    */
-
-export const isValidHex = color => {
-  const hexRegexPattern = new RegExp('^#([a-fA-F0-9]{8})$');
-  return hexRegexPattern.test(color);
-};
+export const getNameFromDuplicateField = key => key.replace(duplicateFieldRegex, '');

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

@@ -31,7 +31,6 @@ import { statusStyles } from '../../plugins/status/styles';
 import { smartCardStyles } from '../../plugins/card/styles';
 import { dateStyles } from '../../plugins/date/styles';
 import { embedCardStyles } from '../../plugins/card/ui/styled';
-import { useFeatureFlags } from '../../plugins/feature-flags-context';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 const contentStyles = props => css`
   .ProseMirror {
@@ -160,16 +159,14 @@ const contentStyles = props => css`
 `;
 export const createEditorContentStyle = styles => {
   return /*#__PURE__*/React.forwardRef((props, ref) => {
-    const featureFlags = useFeatureFlags();
     const {
       className,
       children
     } = props;
     const theme = useTheme();
     const memoizedStyle = useMemo(() => contentStyles({
-      theme,
-      featureFlags
-    }), [theme, featureFlags]);
+      theme
+    }), [theme]);
     return jsx("div", {
       className: className,
       ref: ref,

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

@@ -135,7 +135,7 @@ const shouldHideLayoutToolbar = (selection, {
 }, allowResizingInTables) => {
   return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
 };
-const buildLayoutButtons = (state, intl, nodeType, allowResizing, allowResizingInTables) => {
+const buildLayoutButtons = (state, intl, nodeType, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
   const {
     selection
   } = state;
@@ -145,14 +145,16 @@ const buildLayoutButtons = (state, intl, nodeType, allowResizing, allowResizingI
   const {
     layout
   } = selection.node.attrs;
-  let toolbarItems = [...mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType), {
-    type: 'separator'
-  }, ...mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType)];
-  if (!allowResizing) {
-    toolbarItems = toolbarItems.concat([{
-      type: 'separator'
-    }, ...mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType)]);
-  }
-  return toolbarItems;
+  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType) : [];
+  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType) : [];
+  const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType) : [];
+  const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
+  return items;
 };
+const getSeparatorBetweenAlignmentAndWrapping = (allowAlignment, allowWrapping) => allowAlignment && allowWrapping ? [{
+  type: 'separator'
+}] : [];
+const getSeparatorBeforeBreakoutItems = (allowAlignment, allowWrapping, allowResizing) => !allowResizing && (allowAlignment || allowWrapping) ? [{
+  type: 'separator'
+}] : [];
 export default buildLayoutButtons;

package/dist/es2019/utils/document.js

@@ -303,10 +303,12 @@ const maySanitizePrivateContent = (entity, providerFactory, sanitizePrivateConte
 export const getStepRange = transaction => {
   let from = -1;
   let to = -1;
-  transaction.steps.forEach(step => {
-    step.getMap().forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+  transaction.mapping.maps.forEach((stepMap, index) => {
+    stepMap.forEach((oldStart, oldEnd) => {
+      const newStart = transaction.mapping.slice(index).map(oldStart, -1);
+      const 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/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "182.0.3";
+export const version = "182.1.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

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

package/dist/esm/actions/index.js

@@ -11,7 +11,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 as _temporaryFixForConfigPanel } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
@@ -32,19 +31,19 @@ var EditorActions = /*#__PURE__*/function () {
     });
     _defineProperty(this, "getResolvedEditorState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var _getCollabProvider;
-      var featureFlags, editorValue, editorView;
+      var _this$getFeatureFlags, useNativeCollabPlugin, editorValue, editorView;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              _this$getFeatureFlags = _this.getFeatureFlags(), useNativeCollabPlugin = _this$getFeatureFlags.useNativeCollabPlugin;
               if (_this.editorView) {
-                _context.next = 2;
+                _context.next = 3;
                 break;
               }
               throw new Error('Called getResolvedEditorState before editorView is ready');
-            case 2:
-              featureFlags = getFeatureFlags(_this.editorView.state);
-              if (featureFlags.useNativeCollabPlugin) {
+            case 3:
+              if (useNativeCollabPlugin) {
                 _context.next = 10;
                 break;
               }
@@ -90,13 +89,22 @@ var EditorActions = /*#__PURE__*/function () {
     value: function _privateGetEventDispatcher() {
       return this.eventDispatcher;
     }
+  }, {
+    key: "getFeatureFlags",
+    value: function getFeatureFlags() {
+      return {};
+    }
 
     // This method needs to be public for EditorContext component.
   }, {
     key: "_privateRegisterEditor",
     value: function _privateRegisterEditor(editorView, eventDispatcher, contentTransformer) {
+      var getFeatureFlags = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+        return {};
+      };
       this.contentTransformer = contentTransformer;
       this.eventDispatcher = eventDispatcher;
+      this.getFeatureFlags = getFeatureFlags;
       if (!this.editorView && editorView) {
         this.editorView = editorView;
         this.listeners.forEach(function (cb) {
@@ -118,6 +126,9 @@ var EditorActions = /*#__PURE__*/function () {
       this.contentTransformer = undefined;
       this.contentEncode = undefined;
       this.eventDispatcher = undefined;
+      this.getFeatureFlags = function () {
+        return {};
+      };
     }
   }, {
     key: "_privateSubscribe",

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

@@ -11,10 +11,11 @@ export var attachPayloadIntoTransaction = function attachPayloadIntoTransaction(
   payload = getStateContext(editorState, payload);
   payload = mapActionSubjectIdToAttributes(payload);
   var storedMarks = tr.storedMarks;
+  var pos = tr.mapping.map(editorState.selection.$from.pos, -1);
   tr.step(new AnalyticsStep([{
     payload: payload,
     channel: 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/esm/create-editor/ErrorBoundary.js

@@ -12,7 +12,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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; } }
-import memoizeOne from 'memoize-one';
 import React from 'react';
 import uuid from 'uuid';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
@@ -20,7 +19,6 @@ 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';
@@ -35,12 +33,6 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
     _defineProperty(_assertThisInitialized(_this), "state", {
       error: undefined
     });
-    _defineProperty(_assertThisInitialized(_this), "getFeatureFlags", memoizeOne(function (editorView) {
-      if (!editorView) {
-        return {};
-      }
-      return getFeatureFlags(editorView.state);
-    }));
     _defineProperty(_assertThisInitialized(_this), "sendErrorData", /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(analyticsErrorPayload) {
         var _window, _window$navigator;
@@ -147,20 +139,13 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
         docStructure: attributes.docStructure
       };
     });
+    _this.featureFlags = props.featureFlags;
     if (props.editorView) {
       _this.experienceStore = ExperienceStore.getInstance(props.editorView);
     }
     return _this;
   }
   _createClass(ErrorBoundaryWithEditorView, [{
-    key: "featureFlags",
-    get:
-    // Memoizing this as react alternative suggestion of https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
-
-    function get() {
-      return this.getFeatureFlags(this.props.editorView);
-    }
-  }, {
     key: "componentDidCatch",
     value: function componentDidCatch(error, errorInfo) {
       var _this2 = this;

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

@@ -24,7 +24,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 var ReactEditorView = /*#__PURE__*/function (_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/esm/editor-next/editor-internal.js

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

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

@@ -26,6 +26,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';
 var EditorNext = /*#__PURE__*/function (_React$Component) {
   _inherits(EditorNext, _React$Component);
@@ -47,6 +48,9 @@ var EditorNext = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleAnalyticsEvent", function (data) {
       return fireAnalyticsEvent(_this.createAnalyticsEvent)(data);
     });
+    _defineProperty(_assertThisInitialized(_this), "getFeatureFlags", function () {
+      return createFeatureFlagsFromProps(_this.props);
+    });
     _defineProperty(_assertThisInitialized(_this), "getExperienceStore", function () {
       return _this.experienceStore;
     });
@@ -84,7 +88,7 @@ var EditorNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "registerEditorForActions",
     value: function registerEditorForActions(editorView, eventDispatcher, contentTransformer) {
-      this.editorActions._privateRegisterEditor(editorView, eventDispatcher, contentTransformer);
+      this.editorActions._privateRegisterEditor(editorView, eventDispatcher, contentTransformer, this.getFeatureFlags);
     }
   }, {
     key: "unregisterEditorFromActions",