@atlaskit/editor-common 72.6.0 → 72.7.0

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

@@ -220,6 +220,7 @@ export let ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["ANNOTATE_BUTTON"] = "annotateButton";
   ACTION_SUBJECT_ID["AVATAR_GROUP_PLUGIN"] = "AvatarGroupInPlugin";
   ACTION_SUBJECT_ID["BLOCK_QUOTE"] = "blockQuote";
+  ACTION_SUBJECT_ID["BORDER"] = "border";
   ACTION_SUBJECT_ID["BUTTON_CATEGORY"] = "categoryButton";
   ACTION_SUBJECT_ID["BUTTON_FEEDBACK"] = "feedbackButton";
   ACTION_SUBJECT_ID["BUTTON_HELP"] = "helpButton";
@@ -229,6 +230,8 @@ export let ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["CARD_INLINE"] = "inlineCard";
   ACTION_SUBJECT_ID["CELL"] = "cell";
   ACTION_SUBJECT_ID["CODE_BLOCK"] = "codeBlock";
+  ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
+  ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";
   ACTION_SUBJECT_ID["DATE"] = "date";
   ACTION_SUBJECT_ID["DATE_DAY"] = "day";
   ACTION_SUBJECT_ID["DATE_MONTH"] = "month";

package/dist/es2019/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as usePreviousState } from './usePreviousState';
-export { default as useConstructor } from './useConstructor';
+export { default as useConstructor } from './useConstructor';
+export { useSharedPluginState } from './useSharedPluginState';

package/dist/es2019/hooks/useSharedPluginState.js

@@ -0,0 +1,78 @@
+import { useEffect, useMemo, useState } from 'react';
+/**
+ *
+ * Directly map object values
+ *
+ * @param object The object to transform
+ * @param mapFunction The function to map an old value to new one
+ * @returns Object with the same key but transformed values
+ *
+ */
+function mapValues(object, mapFunction) {
+  return Object.entries(object).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: mapFunction(value)
+  }), {});
+}
+
+/**
+ *
+ * Used to return the current plugin state of
+ * input dependencies
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const { dogState, exampleState } = useSharedPluginState(
+ *     api,
+ *     ['dog', 'example']
+ *   )
+ *   return <p>{ dogState.title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = (_, api) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+export function useSharedPluginState(injectionApi, plugins) {
+  // Create a memoized object containing the named plugins
+  const namedExternalPlugins = useMemo(() => plugins.reduce((acc, pluginName) => ({
+    ...acc,
+    [`${pluginName}State`]: injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi.dependencies[pluginName]
+  }), {}), [injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi.dependencies, plugins]);
+  return useSharedPluginStateInternal(namedExternalPlugins);
+}
+function useSharedPluginStateInternal(externalPlugins) {
+  const [state, setState] = useState(mapValues(externalPlugins, value => value === null || value === void 0 ? void 0 : value.sharedState.currentState()));
+  useEffect(() => {
+    const unsubscribeListeners = Object.entries(externalPlugins).map(([pluginKey, externalPlugin]) => externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(({
+      nextSharedState,
+      prevSharedState
+    }) => {
+      if (prevSharedState === nextSharedState) {
+        return;
+      }
+      setState(state => ({
+        ...state,
+        [pluginKey]: nextSharedState
+      }));
+    }));
+    return () => {
+      unsubscribeListeners.forEach(cb => cb === null || cb === void 0 ? void 0 : cb());
+    };
+  }, [externalPlugins]);
+  return state;
+}

package/dist/{esm/messages/codeBlockCopyButton.js → es2019/messages/codeBlockButton.js}

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl-next';
-export var codeBlockCopyButtonMessages = defineMessages({
+export const codeBlockButtonMessages = defineMessages({
   copyCodeToClipboard: {
     id: 'fabric.editor.codeBlockCopyButton.copyToClipboard',
     defaultMessage: 'Copy as text',
@@ -9,5 +9,15 @@ export var codeBlockCopyButtonMessages = defineMessages({
     id: 'fabric.editor.codeBlockCopyButton.copiedToClipboard',
     defaultMessage: 'Copied!',
     description: 'Copied the content of the code block as text to clipboard'
+  },
+  wrapCode: {
+    id: 'fabric.editor.codeBlockWrapButton.wrapCodeBlock',
+    defaultMessage: 'Turn on wrap',
+    description: 'Wrap the content of the code block'
+  },
+  unwrapCode: {
+    id: 'fabric.editor.codeBlockWrapButton.unwrapCodeBlock',
+    defaultMessage: 'Turn off wrap',
+    description: 'Wrap the content of the code block'
   }
 });

package/dist/es2019/messages/index.js

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl-next';
 export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';
 export { unsupportedContentMessages } from './unsupportedContent';
-export { codeBlockCopyButtonMessages } from './codeBlockCopyButton';
+export { codeBlockButtonMessages } from './codeBlockButton';
 export { toolbarInsertBlockMessages } from './insert-block';
 export default defineMessages({
   layoutFixedWidth: {

package/dist/es2019/normalize-feature-flags.js

@@ -51,4 +51,13 @@ export function normalizeFeatureFlags(rawFeatureFlags, options) {
     }
     return flags;
   }, {});
+}
+
+/**
+ * Transforms FeatureFlags to a type safe string array of the enabled feature flags.
+ *
+ * Useful for analytics and analysis purposes.
+ */
+export function getEnabledFeatureFlagKeys(featureFlags) {
+  return Object.keys(featureFlags).filter(key => featureFlags[key] === true);
 }

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

@@ -7,25 +7,18 @@ function hasGetSharedState(plugin) {
 function hasActions(plugin) {
   return typeof plugin.actions === 'object';
 }
-const DREAM_TARGET_60_FPS = 16;
-/*
- *
- * After some investigations, we discovered this is the best ratio for our current Editor: 80ms. That means is five times bigger than the 60fps dream target.
- *
- * In the future, once we remove the entire WithPluginState, We may decide to reduce this value.
- *
- */
-const THROTTLE_CALLS_FOR_MILLISECONDS = DREAM_TARGET_60_FPS * 5;
-const notifyListenersThrottled = throttle(({
-  newEditorState,
-  oldEditorState,
+const filterPluginsWithListeners = ({
   listeners,
   plugins
+}) => Array.from(listeners.keys()).map(pluginName => plugins.get(pluginName)).filter(plugin => plugin !== undefined && hasGetSharedState(plugin));
+const extractSharedStateFromPlugins = ({
+  oldEditorState,
+  newEditorState,
+  plugins
 }) => {
   const isInitialization = !oldEditorState && newEditorState;
-  const callbacks = [];
-  for (let pluginName of listeners.keys()) {
-    const plugin = plugins.get(pluginName);
+  const result = new Map();
+  for (let plugin of plugins) {
     if (!plugin || !hasGetSharedState(plugin)) {
       continue;
     }
@@ -33,18 +26,33 @@ const notifyListenersThrottled = throttle(({
     const prevSharedState = !isInitialization && oldEditorState ? plugin.getSharedState(oldEditorState) : undefined;
     const isSamePluginState = isEqual(prevSharedState, nextSharedState);
     if (isInitialization || !isSamePluginState) {
-      (listeners.get(pluginName) || new Set()).forEach(callback => {
-        callbacks.push(callback.bind(callback, {
-          nextSharedState,
-          prevSharedState
-        }));
+      result.set(plugin.name, {
+        nextSharedState,
+        prevSharedState
       });
     }
   }
+  return result;
+};
+const THROTTLE_CALLS_FOR_MILLISECONDS = 0;
+const notifyListenersThrottled = throttle(({
+  listeners,
+  updatesToNotifyQueue
+}) => {
+  const callbacks = [];
+  for (let [pluginName, diffs] of updatesToNotifyQueue.entries()) {
+    const pluginListeners = listeners.get(pluginName) || [];
+    pluginListeners.forEach(callback => {
+      diffs.forEach(diff => {
+        callbacks.push(callback.bind(callback, diff));
+      });
+    });
+  }
+  updatesToNotifyQueue.clear();
   if (callbacks.length === 0) {
     return;
   }
-  callbacks.forEach(cb => {
+  callbacks.reverse().forEach(cb => {
     cb();
   });
 }, THROTTLE_CALLS_FOR_MILLISECONDS);
@@ -66,6 +74,7 @@ export class SharedStateAPI {
   constructor({
     getEditorState
   }) {
+    _defineProperty(this, "updatesToNotifyQueue", new Map());
     this.getEditorState = getEditorState;
     this.listeners = new Map();
   }
@@ -81,39 +90,56 @@ export class SharedStateAPI {
     const pluginName = plugin.name;
     return {
       currentState: () => {
-        const state = this.getEditorState();
-        if (!state || !hasGetSharedState(plugin)) {
+        if (!hasGetSharedState(plugin)) {
           return undefined;
         }
+        const state = this.getEditorState();
         return plugin.getSharedState(state);
       },
       onChange: sub => {
         const pluginListeners = this.listeners.get(pluginName) || new Set();
         pluginListeners.add(sub);
         this.listeners.set(pluginName, pluginListeners);
-        return () => {
-          (this.listeners.get(pluginName) || new Set()).delete(sub);
-        };
+        return () => this.cleanupSubscription(pluginName, sub);
       }
     };
   }
+  cleanupSubscription(pluginName, sub) {
+    (this.listeners.get(pluginName) || new Set()).delete(sub);
+  }
   notifyListeners({
     newEditorState,
     oldEditorState,
     plugins
   }) {
     const {
-      listeners
+      listeners,
+      updatesToNotifyQueue
     } = this;
-    notifyListenersThrottled({
-      newEditorState,
+    const pluginsFiltered = filterPluginsWithListeners({
+      plugins,
+      listeners
+    });
+    const sharedStateDiffs = extractSharedStateFromPlugins({
       oldEditorState,
-      listeners,
-      plugins
+      newEditorState,
+      plugins: pluginsFiltered
+    });
+    if (sharedStateDiffs.size === 0) {
+      return;
+    }
+    for (let [pluginName, nextDiff] of sharedStateDiffs) {
+      const currentDiffQueue = updatesToNotifyQueue.get(pluginName) || [];
+      updatesToNotifyQueue.set(pluginName, [...currentDiffQueue, nextDiff]);
+    }
+    notifyListenersThrottled({
+      updatesToNotifyQueue,
+      listeners
     });
   }
   destroy() {
     this.listeners.clear();
+    this.updatesToNotifyQueue.clear();
   }
 }
 export class EditorPluginInjectionAPI {
@@ -152,8 +178,13 @@ export class EditorPluginInjectionAPI {
       actionsAPI,
       getPluginByName
     } = this;
-    const externalPlugins = new Proxy({}, {
+    const dependencies = new Proxy({}, {
       get: function (target, prop, receiver) {
+        // If we pass this as a prop React hates us
+        // Let's just reflect the result and ignore these
+        if (prop === 'toJSON') {
+          return Reflect.get(target, prop);
+        }
         const plugin = getPluginByName(prop);
         if (!plugin) {
           // eslint-disable-next-line
@@ -170,7 +201,7 @@ export class EditorPluginInjectionAPI {
       }
     });
     return {
-      externalPlugins
+      dependencies
     };
   }
 }

package/dist/es2019/styles/shared/table.js

@@ -27,6 +27,8 @@ export const TableSharedCssClassName = {
   TABLE_STICKY_WRAPPER: `${tablePrefixSelector}-sticky-wrapper`,
   TABLE_STICKY_SENTINEL_TOP: `${tablePrefixSelector}-sticky-sentinel-top`,
   TABLE_STICKY_SENTINEL_BOTTOM: `${tablePrefixSelector}-sticky-sentinel-bottom`,
+  TABLE_SHADOW_SENTINEL_LEFT: `${tablePrefixSelector}-shadow-sentinel-left`,
+  TABLE_SHADOW_SENTINEL_RIGHT: `${tablePrefixSelector}-shadow-sentinel-right`,
   TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector,
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector,

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "72.6.0";
+const packageVersion = "72.7.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 class DropList extends Component {

package/dist/es2019/ui-color/ColorPalette/Palettes/borderColorPalette.js

@@ -0,0 +1,16 @@
+import { borderColorPalette as colorPalette } from '@atlaskit/adf-schema';
+import { DEFAULT_BORDER_COLOR } from './common';
+import getColorMessage from './getColorMessage';
+import paletteMessages from './paletteMessages';
+const borderColorPalette = [];
+colorPalette.forEach((label, color) => {
+  const key = label.toLowerCase().replace(' ', '-');
+  const message = getColorMessage(paletteMessages, key);
+  borderColorPalette.push({
+    value: color,
+    label,
+    border: DEFAULT_BORDER_COLOR,
+    message
+  });
+});
+export default borderColorPalette;

package/dist/es2019/ui-color/ColorPalette/Palettes/index.js

@@ -1,2 +1,2 @@
 export { DEFAULT_BORDER_COLOR } from './common';
-export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages } from './paletteMessagesTokenModeNames';
+export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages, borderPaletteTooltipMessages } from './paletteMessagesTokenModeNames';

package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -249,4 +249,28 @@ export const darkBackgroundPaletteTooltipMessages = {
 export const backgroundPaletteTooltipMessages = {
   light: lightBackgroundPaletteTooltipMessages,
   dark: darkBackgroundPaletteTooltipMessages
+};
+const lightBorderPaletteTooltipMessages = defineMessages({
+  '#091E4224': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'Name of a color'
+  },
+  '#758195': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#172B4D': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  }
+});
+const darkBorderPaletteTooltipMessages = {
+  ...lightBorderPaletteTooltipMessages
+};
+export const borderPaletteTooltipMessages = {
+  light: lightBorderPaletteTooltipMessages,
+  dark: darkBorderPaletteTooltipMessages
 };

package/dist/es2019/ui-color/index.js

@@ -6,5 +6,6 @@ export { default as colorPaletteMessages } from './ColorPalette/Palettes/palette
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
-export { backgroundPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
-export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';
+export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
+export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';
+export { default as borderColorPalette } from './ColorPalette/Palettes/borderColorPalette';

package/dist/es2019/utils/validator.js

@@ -842,6 +842,13 @@ export const getValidMark = (mark, adfStage = 'final') => {
             attrs
           };
         }
+      case 'border':
+        {
+          return {
+            type,
+            attrs
+          };
+        }
     }
   }
   return null;

package/dist/es2019/version.json

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

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

@@ -220,6 +220,7 @@ export var ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["ANNOTATE_BUTTON"] = "annotateButton";
   ACTION_SUBJECT_ID["AVATAR_GROUP_PLUGIN"] = "AvatarGroupInPlugin";
   ACTION_SUBJECT_ID["BLOCK_QUOTE"] = "blockQuote";
+  ACTION_SUBJECT_ID["BORDER"] = "border";
   ACTION_SUBJECT_ID["BUTTON_CATEGORY"] = "categoryButton";
   ACTION_SUBJECT_ID["BUTTON_FEEDBACK"] = "feedbackButton";
   ACTION_SUBJECT_ID["BUTTON_HELP"] = "helpButton";
@@ -229,6 +230,8 @@ export var ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["CARD_INLINE"] = "inlineCard";
   ACTION_SUBJECT_ID["CELL"] = "cell";
   ACTION_SUBJECT_ID["CODE_BLOCK"] = "codeBlock";
+  ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
+  ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";
   ACTION_SUBJECT_ID["DATE"] = "date";
   ACTION_SUBJECT_ID["DATE_DAY"] = "day";
   ACTION_SUBJECT_ID["DATE_MONTH"] = "month";

package/dist/esm/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as usePreviousState } from './usePreviousState';
-export { default as useConstructor } from './useConstructor';
+export { default as useConstructor } from './useConstructor';
+export { useSharedPluginState } from './useSharedPluginState';

package/dist/esm/hooks/useSharedPluginState.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useEffect, useMemo, useState } from 'react';
+/**
+ *
+ * Directly map object values
+ *
+ * @param object The object to transform
+ * @param mapFunction The function to map an old value to new one
+ * @returns Object with the same key but transformed values
+ *
+ */
+function mapValues(object, mapFunction) {
+  return Object.entries(object).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, mapFunction(value)));
+  }, {});
+}
+
+/**
+ *
+ * Used to return the current plugin state of
+ * input dependencies
+ *
+ * Example in plugin:
+ *
+ * ```typescript
+ * function ExampleContent({ api }: Props) {
+ *   const { dogState, exampleState } = useSharedPluginState(
+ *     api,
+ *     ['dog', 'example']
+ *   )
+ *   return <p>{ dogState.title } { exampleState.description }</p>
+ * }
+ *
+ * const examplePlugin: NextEditorPlugin<'example', { dependencies: [typeof pluginDog] }> = (_, api) => {
+ *   return {
+ *     name: 'example',
+ *     contentComponent: () =>
+ *       <ExampleContent
+ *         api={api}
+ *         />
+ *   }
+ * }
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+export function useSharedPluginState(injectionApi, plugins) {
+  // Create a memoized object containing the named plugins
+  var namedExternalPlugins = useMemo(function () {
+    return plugins.reduce(function (acc, pluginName) {
+      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, "".concat(pluginName, "State"), injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi.dependencies[pluginName]));
+    }, {});
+  }, [injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi.dependencies, plugins]);
+  return useSharedPluginStateInternal(namedExternalPlugins);
+}
+function useSharedPluginStateInternal(externalPlugins) {
+  var _useState = useState(mapValues(externalPlugins, function (value) {
+      return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var unsubscribeListeners = Object.entries(externalPlugins).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        pluginKey = _ref4[0],
+        externalPlugin = _ref4[1];
+      return externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(function (_ref5) {
+        var nextSharedState = _ref5.nextSharedState,
+          prevSharedState = _ref5.prevSharedState;
+        if (prevSharedState === nextSharedState) {
+          return;
+        }
+        setState(function (state) {
+          return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, pluginKey, nextSharedState));
+        });
+      });
+    });
+    return function () {
+      unsubscribeListeners.forEach(function (cb) {
+        return cb === null || cb === void 0 ? void 0 : cb();
+      });
+    };
+  }, [externalPlugins]);
+  return state;
+}

package/dist/{es2019/messages/codeBlockCopyButton.js → esm/messages/codeBlockButton.js}

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl-next';
-export const codeBlockCopyButtonMessages = defineMessages({
+export var codeBlockButtonMessages = defineMessages({
   copyCodeToClipboard: {
     id: 'fabric.editor.codeBlockCopyButton.copyToClipboard',
     defaultMessage: 'Copy as text',
@@ -9,5 +9,15 @@ export const codeBlockCopyButtonMessages = defineMessages({
     id: 'fabric.editor.codeBlockCopyButton.copiedToClipboard',
     defaultMessage: 'Copied!',
     description: 'Copied the content of the code block as text to clipboard'
+  },
+  wrapCode: {
+    id: 'fabric.editor.codeBlockWrapButton.wrapCodeBlock',
+    defaultMessage: 'Turn on wrap',
+    description: 'Wrap the content of the code block'
+  },
+  unwrapCode: {
+    id: 'fabric.editor.codeBlockWrapButton.unwrapCodeBlock',
+    defaultMessage: 'Turn off wrap',
+    description: 'Wrap the content of the code block'
   }
 });

package/dist/esm/messages/index.js

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl-next';
 export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';
 export { unsupportedContentMessages } from './unsupportedContent';
-export { codeBlockCopyButtonMessages } from './codeBlockCopyButton';
+export { codeBlockButtonMessages } from './codeBlockButton';
 export { toolbarInsertBlockMessages } from './insert-block';
 export default defineMessages({
   layoutFixedWidth: {

package/dist/esm/normalize-feature-flags.js

@@ -65,4 +65,15 @@ export function normalizeFeatureFlags(rawFeatureFlags, options) {
     }
     return flags;
   }, {});
+}
+
+/**
+ * Transforms FeatureFlags to a type safe string array of the enabled feature flags.
+ *
+ * Useful for analytics and analysis purposes.
+ */
+export function getEnabledFeatureFlagKeys(featureFlags) {
+  return Object.keys(featureFlags).filter(function (key) {
+    return featureFlags[key] === true;
+  });
 }