@atlaskit/editor-common 111.13.0 → 111.14.0

package/dist/cjs/vanilla-tooltip/index.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VanillaTooltip = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@popperjs/core");
+var _bindEventListener = require("bind-event-listener");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+var endingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+};
+
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ */
+var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
+  function VanillaTooltip(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id,
+  /**
+   * Class Name – used for styling.
+   */
+  className) {
+    var _this = this;
+    var timeout = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 300;
+    (0, _classCallCheck2.default)(this, VanillaTooltip);
+    (0, _defineProperty2.default)(this, "listeners", []);
+    (0, _defineProperty2.default)(this, "shouldHidePopover", false);
+    (0, _defineProperty2.default)(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    var tooltip = document.createElement('span');
+    tooltip.role = 'tooltip';
+    tooltip.popover = 'hint';
+    tooltip.className = className;
+    tooltip.id = id;
+    tooltip.textContent = content;
+    this.tooltip = tooltip;
+
+    // Button preparation
+    button.appendChild(tooltip);
+    // Prepare the button to have the popover target and accessibility properties
+    button.setAttribute('popovertarget', tooltip.id);
+    button.setAttribute('aria-describedby', tooltip.id);
+    var showEvents = ['mouseenter', 'focus'];
+    var hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(function (event) {
+      _this.listeners.push((0, _bindEventListener.bind)(button, {
+        type: event,
+        listener: function listener() {
+          return _this.show();
+        }
+      }));
+    });
+    hideEvents.forEach(function (event) {
+      _this.listeners.push((0, _bindEventListener.bind)(button, {
+        type: event,
+        listener: function listener() {
+          return _this.hide();
+        }
+      }));
+    });
+    this.listeners.push((0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          _this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = function () {
+      if (_this.shouldHidePopover) {
+        _this.tooltip.hidePopover();
+      }
+    };
+  }
+  return (0, _createClass2.default)(VanillaTooltip, [{
+    key: "createPopperInstance",
+    value: function createPopperInstance() {
+      this.popperInstance = (0, _core.createPopper)(this.button, this.tooltip, {
+        placement: 'top',
+        modifiers: [startingOffset]
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$popperInstance;
+      (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
+      this.listeners.forEach(function (listener) {
+        listener();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = true;
+      // Disable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this2$popperInstance;
+        (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [startingOffset, {
+              name: 'eventListeners',
+              enabled: false
+            }]
+          });
+        });
+        _this2.tooltip.style.opacity = '0';
+        _this2.isDisplayed = false;
+        // If transition animations are disabled immediately hide the popover
+        if (_this2.tooltip.style.transition === 'none') {
+          _this2.tooltip.hidePopover();
+        }
+      }, immediate ? 0 : this.timeout);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this3 = this;
+      if (this.isDisplayed) {
+        return;
+      }
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = false;
+
+      // Make the tooltip visible - but hide until
+      this.tooltip.style.visibility = 'hidden';
+      this.tooltip.showPopover();
+
+      // Update its position
+      if (!this.popperInstance) {
+        this.createPopperInstance();
+      } else {
+        this.popperInstance.update();
+      }
+
+      // Enable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this3$popperInstance;
+        _this3.tooltip.style.opacity = '1';
+        _this3.tooltip.style.visibility = 'visible';
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [endingOffset, {
+              name: 'eventListeners',
+              enabled: true
+            }]
+          });
+        });
+        _this3.isDisplayed = true;
+      }, this.timeout);
+    }
+  }]);
+}();

package/dist/es2019/ai-messages/ai.js

@@ -183,7 +183,7 @@ export const aiMessages = defineMessages({
   summarizePageTitle: {
     id: 'fabric.editor.ai.ai-panels.summarizePageTitle',
     defaultMessage: `Page summary panel (Beta)`,
-    description: 'Title for AI summary panel'
+    description: 'The text is shown as a title for the AI-powered page summary panel in the editor when the user accesses the summarize page feature.'
   },
   summarisePageDescription: {
     id: 'fabric.editor.ai.ai-panels.summarizePageDescription',

package/dist/es2019/block-menu/messages.js

@@ -15,7 +15,7 @@ export const messages = defineMessages({
   deleteBlock: {
     id: 'fabric.editor.block.menu.delete.block',
     defaultMessage: 'Delete',
-    description: 'Delete the selected block'
+    description: 'The text is shown as a menu item in the block menu when the user wants to delete the currently selected block from the document.'
   },
   turnInto: {
     id: 'fabric.editor.block.menu.turn.into',

package/dist/es2019/element-browser/messages.js

@@ -3,17 +3,17 @@ export default defineMessages({
   elementAfterInputMessage: {
     id: 'fabric.editor.elementbrowser.searchbar.elementAfterInput',
     defaultMessage: 'Enter',
-    description: 'Enter to insert'
+    description: 'The text is shown as a label after the search input in the element browser. It indicates to the user that pressing Enter will insert the selected element.'
   },
   placeHolderMessage: {
     id: 'fabric.editor.elementbrowser.searchbar.placeholder',
     defaultMessage: 'Search',
-    description: 'Search field placeholder'
+    description: 'The text is shown as placeholder text inside the search input field in the element browser. It prompts the user to type a query to filter available elements.'
   },
   searchAriaLabel: {
     id: 'fabric.editor.elementbrowser.searchbar.ariaLabel',
     defaultMessage: 'Search',
-    description: 'Search field aria label'
+    description: 'The text is used as an aria-label for the search input field in the element browser. It provides an accessible name for screen readers to identify the search field.'
   },
   assistiveTextDefault: {
     id: 'fabric.editor.elementbrowser.searchbar.assistive.text.default',

package/dist/es2019/extensions/messages.js

@@ -3,7 +3,7 @@ export const messages = defineMessages({
   edit: {
     id: 'fabric.editor.edit',
     defaultMessage: 'Edit',
-    description: 'Edit the properties for this extension.'
+    description: 'The text is shown as a button label in the extension context menu. Triggers opening the properties editor for the selected extension to modify its configuration.'
   },
   deleteElementTitle: {
     id: 'fabric.editor.extension.deleteElementTitle',
@@ -28,22 +28,22 @@ export const messages = defineMessages({
   confirmModalCheckboxLabel: {
     id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
     defaultMessage: 'Also delete connected elements',
-    description: 'checkbox label text'
+    description: 'Label for a checkbox in a confirm modal that allows the user to also delete connected elements when deleting an extension.'
   },
   saveIndicator: {
     id: 'fabric.editor.extensions.config-panel.save-indicator',
     defaultMessage: 'All changes are always autosaved',
-    description: 'Message shown to the user to notify to them that we save the changes automatically.'
+    description: 'Informational message displayed in the extension configuration panel to reassure users that their changes are being saved automatically without requiring manual save action.'
   },
   panelLoadingError: {
     id: 'fabric.editor.extensions.config-panel.loading-error.non-final',
     defaultMessage: 'We ran into a bit of trouble. Refresh to try again.',
-    description: 'Error message when loading the configuration panel'
+    description: 'Error message displayed when the extension configuration panel fails to load. Instructs users to refresh the page to attempt loading the panel again.'
   },
   extensionLoadingError: {
     id: 'fabric.editor.extension.loading-error',
     defaultMessage: 'Error loading the extension!',
-    description: 'Error message when loading an extension'
+    description: 'Error message displayed when an extension fails to load in the editor. Indicates a problem occurred during the extension initialization or rendering process.'
   }
 });
 export const configPanelMessages = defineMessages({
@@ -55,17 +55,17 @@ export const configPanelMessages = defineMessages({
   submit: {
     id: 'fabric.editor.configPanel.submit',
     defaultMessage: 'Submit',
-    description: 'Submit button label'
+    description: 'Label for a button in the extension configuration panel that the user clicks to submit and apply configuration changes.'
   },
   cancel: {
     id: 'fabric.editor.configPanel.cancel',
     defaultMessage: 'Cancel',
-    description: 'Cancel button label'
+    description: 'Label for a button in the extension configuration panel that the user clicks to cancel and discard configuration changes.'
   },
   close: {
     id: 'fabric.editor.configPanel.close',
     defaultMessage: 'Close',
-    description: 'Close button label'
+    description: 'Label for a button in the extension configuration panel that the user clicks to close the panel.'
   },
   required: {
     id: 'fabric.editor.configPanel.required',
@@ -80,7 +80,7 @@ export const configPanelMessages = defineMessages({
   isMultipleAndRadio: {
     id: 'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio',
     defaultMessage: 'Can not combine isMultiple with style: radio',
-    description: 'Configuration error'
+    description: 'Error message displayed in the extension configuration panel when isMultiple and radio style options are incorrectly combined.'
   },
   addField: {
     id: 'fabric.editor.configPanel.formType.addField',

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -74,7 +74,7 @@ export const messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',
     defaultMessage: 'Text to display',
-    description: 'Text to display'
+    description: 'Label for the text input field in the hyperlink toolbar where users enter the display text for a link.'
   },
   clearText: {
     id: 'fabric.editor.clearLinkText',

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/messages.js

@@ -3,36 +3,36 @@ export const utilMessages = defineMessages({
   hyperlinkIconIssueLabel: {
     id: 'fabric.editor.headingLink.hyperlinkIconIssueLabel',
     defaultMessage: 'Issue',
-    description: 'icon label for a jira issue'
+    description: 'Accessible label for the Jira issue icon displayed in the hyperlink add toolbar when users search for or insert a link to a Jira issue.'
   },
   hyperlinkIconBugLabel: {
     id: 'fabric.editor.headingLink.hyperlinkIconBugLabel',
     defaultMessage: 'Bug',
-    description: 'icon label for a jira bug'
+    description: 'Accessible label for the Jira bug icon displayed in the hyperlink add toolbar when users search for or insert a link to a Jira bug.'
   },
   hyperlinkIconStoryLabel: {
     id: 'fabric.editor.headingLink.hyperlinkIconStoryLabel',
     defaultMessage: 'Story',
-    description: 'icon label for a jira story'
+    description: 'Accessible label for the Jira story icon displayed in the hyperlink add toolbar when users search for or insert a link to a Jira story.'
   },
   hyperlinkIconTaskLabel: {
     id: 'fabric.editor.headingLink.hyperlinkIconTaskLabel',
     defaultMessage: 'Task',
-    description: 'icon label for a jira task'
+    description: 'Accessible label for the Jira task icon displayed in the hyperlink add toolbar when users search for or insert a link to a Jira task.'
   },
   hyperlinkIconPageLabel: {
     id: 'fabric.editor.headingLink.hyperlinkIconPageLabel',
     defaultMessage: 'Page',
-    description: 'icon label for a confluence page'
+    description: 'The text is shown as an icon label in the hyperlink toolbar to identify Confluence pages. Displayed next to the page icon when users are linking to Confluence pages in the editor.'
   },
   hyperlinkIconBlogLabel: {
     id: 'fabric.editor.headingLink.hyperlinkIconBlogLabel',
     defaultMessage: 'Blog',
-    description: 'icon label for a confluence blog'
+    description: 'The text is shown as an icon label in the hyperlink toolbar to identify Confluence blog posts. Displayed next to the blog icon when users are linking to Confluence blogs in the editor.'
   },
   hyperlinkIconIssueLabelIssueTermRefresh: {
     id: 'fabric.editor.headingLink.hyperlinkIconIssueLabel.issue-term-refresh',
     defaultMessage: 'Work Item',
-    description: 'icon label for a jira issue'
+    description: 'Accessible label for the Jira issue icon displayed in the hyperlink add toolbar when users search for or insert a link to a Jira work item. This is the refreshed terminology used instead of "Issue".'
   }
 });

package/dist/es2019/link/LinkSearch/listItemAlts.js

@@ -3,32 +3,32 @@ const messages = defineMessages({
   story: {
     id: 'fabric.editor.story',
     defaultMessage: 'Story',
-    description: 'Alt text for Story'
+    description: 'Alt text for the issue type icon displayed in link search results when the linked item is a Story issue type.'
   },
   epic: {
     id: 'fabric.editor.epic',
     defaultMessage: 'Epic',
-    description: 'Alt text for Epic'
+    description: 'Alt text for the issue type icon displayed in link search results when the linked item is an Epic issue type.'
   },
   task: {
     id: 'fabric.editor.task',
     defaultMessage: 'Task',
-    description: 'Alt text for Task'
+    description: 'Alt text for the issue type icon displayed in link search results when the linked item is a Task issue type.'
   },
   bug: {
     id: 'fabric.editor.bug',
     defaultMessage: 'Bug',
-    description: 'Alt text for Bug'
+    description: 'Alt text for the issue type icon displayed in link search results when the linked item is a Bug issue type.'
   },
   subTask: {
     id: 'fabric.editor.subTask',
     defaultMessage: 'Sub-task',
-    description: 'Alt text for Sub-task'
+    description: 'Alt text for the issue type icon displayed in link search results when the linked item is a Sub-task issue type.'
   },
   improvement: {
     id: 'fabric.editor.improvement',
     defaultMessage: 'Improvement',
-    description: 'Alt text for Improvement'
+    description: 'Alt text for the issue type icon displayed in link search results when the linked item is an Improvement issue type.'
   },
   defaultAltText: {
     id: 'fabric.editor.defaultAltText',

package/dist/es2019/lists/messages.js

@@ -9,7 +9,7 @@ export const messages = defineMessages({
   unorderedListDescription: {
     id: 'fabric.editor.unorderedList.description',
     defaultMessage: 'Create an unordered list',
-    description: ''
+    description: 'The text is shown as a description for the bullet list option in the quick insert menu when the user searches for list formatting options.'
   },
   orderedList: {
     id: 'fabric.editor.orderedList',
@@ -19,7 +19,7 @@ export const messages = defineMessages({
   orderedListDescription: {
     id: 'fabric.editor.orderedList.description',
     defaultMessage: 'Create an ordered list',
-    description: ''
+    description: 'The text is shown as a description for the numbered list option in the quick insert menu when the user searches for list formatting options.'
   },
   lists: {
     id: 'fabric.editor.lists',

package/dist/es2019/media/messages/altText.js

@@ -18,22 +18,22 @@ export const altTextMessages = defineMessages({
   back: {
     id: 'fabric.editor.closeAltTextEdit',
     defaultMessage: 'Back',
-    description: 'Back to toolbar'
+    description: 'The text is shown on a button in the alt text editing toolbar for an image. When clicked, it closes the alt text editor and navigates the user back to the main media toolbar.'
   },
   clear: {
     id: 'fabric.editor.clearAltTextEdit',
     defaultMessage: 'Clear alt text',
-    description: 'Clear alt text'
+    description: 'The text is shown on a button in the alt text editing toolbar for an image. When clicked, it clears the current alt text value from the input field.'
   },
   placeholder: {
     id: 'fabric.editor.placeholderAltText',
     defaultMessage: 'Describe this image with alt text',
-    description: 'Describe this image with alt text'
+    description: 'The text is shown as placeholder text inside the alt text input field for an image. It prompts the user to enter a description of the image for accessibility purposes.'
   },
   supportText: {
     id: 'fabric.editor.supportAltText',
     defaultMessage: 'Alt text is useful for people using screen readers because of visual limitations.',
-    description: 'Alt text is useful for people using screen readers because of visual limitations.'
+    description: 'The text is shown as a help message below the alt text input field for an image. It informs users why providing alt text is important for accessibility and screen reader support.'
   },
   validationMessage: {
     id: 'fabric.editor.alttext.validation',

package/dist/es2019/media/messages/externalMedia.js

@@ -3,6 +3,6 @@ export const externalMediaMessages = defineMessages({
   externalMediaFile: {
     id: 'fabric.editor.externalMediaFile',
     defaultMessage: 'External media file',
-    description: 'External media file'
+    description: 'Displayed as a tooltip and accessibility label for an info icon badge when an externally hosted media file is shown in the editor.'
   }
 });

package/dist/es2019/media/messages/imageBorder.js

@@ -23,31 +23,31 @@ export const imageBorderMessages = defineMessages({
   addBorder: {
     id: 'fabric.editor.addImageBorder',
     defaultMessage: 'Add border',
-    description: 'Add a border to an image.'
+    description: 'Label shown on a button in the image border options toolbar to add a border around the selected image.'
   },
   removeBorder: {
     id: 'fabric.editor.removeImageBorder',
     defaultMessage: 'Remove border',
-    description: 'Remove the border of an image.'
+    description: 'The text is shown as a button label in the image toolbar. Removes any border that was previously applied to the selected image.'
   },
   borderOptions: {
     id: 'fabric.editor.imageBorderOptions',
     defaultMessage: 'Border options',
-    description: 'Display options available for customizing the border of an image.'
+    description: 'The text is shown as a panel or menu header. Provides users access to customize image borders including size and color options.'
   },
   borderSizeSubtle: {
     id: 'fabric.editor.imageBorderSubtle',
     defaultMessage: 'Subtle',
-    description: 'Name of a border size.'
+    description: 'Label shown as a drop-down item in the image border size selector to apply a thin, subtle border around the image.'
   },
   borderSizeMedium: {
     id: 'fabric.editor.imageBorderMedium',
     defaultMessage: 'Medium',
-    description: 'Name of a border size.'
+    description: 'Label shown as a drop-down item in the image border size selector to apply a medium-weight border around the image.'
   },
   borderSizeBold: {
     id: 'fabric.editor.imageBorderBold',
     defaultMessage: 'Bold',
-    description: 'Name of a border size.'
+    description: 'Label shown as a drop-down item in the image border size selector to apply a thick, bold border around the image.'
   }
 });

package/dist/es2019/media/messages/pixelEntry.js

@@ -13,12 +13,12 @@ export const pixelEntryMessages = defineMessages({
   inputWidthAriaLabel: {
     id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
     defaultMessage: 'Max width {maxWidth}px',
-    description: 'The width input aria label'
+    description: 'Aria label for the width input field used for media pixel entry. The placeholder {maxWidth} will be substituted with the maximum allowed width value in pixels.'
   },
   inputWidthLabel: {
     id: 'fabric.editor.media.pixelEntry.inputWidthLabel',
     defaultMessage: 'Width',
-    description: 'The label displayed next to the width input'
+    description: 'Label for the width input field in the media resize panel. Users enter a numeric value representing the desired width in pixels for the image.'
   },
   inputHeightTooltip: {
     id: 'fabric.editor.media.pixelEntry.inputHeightTooltip',
@@ -28,7 +28,7 @@ export const pixelEntryMessages = defineMessages({
   inputHeightAriaLabel: {
     id: 'fabric.editor.media.pixelEntry.inputHeightAriaLabel',
     defaultMessage: 'height input',
-    description: 'The width input aria label'
+    description: 'Aria label for the height input field used for media pixel entry to inform screen readers about the purpose of the input.'
   },
   submitButtonText: {
     id: 'fabric.editor.media.pixelEntry.submitButtonText',

package/dist/es2019/messages/block-controls.js

@@ -23,12 +23,12 @@ export const messages = defineMessages({
   moveUp: {
     id: 'fabric.editor.blockControlMoveUp',
     defaultMessage: 'Move up',
-    description: 'Moves selected content up'
+    description: 'Label for a button in the block controls menu that moves the selected content block up in the editor.'
   },
   moveDown: {
     id: 'fabric.editor.blockControlMoveDown',
     defaultMessage: 'Move down',
-    description: 'Moves selected content down'
+    description: 'Label for a button in the block controls menu that moves the selected content block down in the editor.'
   },
   movedup: {
     id: 'fabric.editor.blockControlMovedUp',
@@ -43,16 +43,16 @@ export const messages = defineMessages({
   moveLeft: {
     id: 'fabric.editor.blockControlMoveLeft',
     defaultMessage: 'Move left',
-    description: 'Moves selected content left'
+    description: 'Label for a button in the block controls menu that moves the selected content block to the left.'
   },
   moveRight: {
     id: 'fabric.editor.blockControlMoveRight',
     defaultMessage: 'Move right',
-    description: 'Moves selected content right'
+    description: 'Label for a button in the block controls menu that moves the selected content block to the right.'
   },
   delete: {
     id: 'fabric.editor.blockControlDelete',
     defaultMessage: 'Delete',
-    description: 'Delete selected element'
+    description: 'Label for a button in the block controls menu that deletes the currently selected content block from the editor.'
   }
 });

package/dist/es2019/messages/block-type.js

@@ -33,7 +33,7 @@ export const messages = defineMessages({
   heading3Description: {
     id: 'fabric.editor.heading3Description',
     defaultMessage: 'Use this for sub sections and group headings',
-    description: ''
+    description: 'Description text shown in the block type menu to help users understand when to use Heading 3 for sub sections and group headings in the editor.'
   },
   heading4: {
     id: 'fabric.editor.heading4',
@@ -43,7 +43,7 @@ export const messages = defineMessages({
   heading4Description: {
     id: 'fabric.editor.heading4Description',
     defaultMessage: 'Use this for deep headings',
-    description: ''
+    description: 'Description text shown in the block type menu to help users understand when to use Heading 4 for deep headings in the editor.'
   },
   heading5: {
     id: 'fabric.editor.heading5',
@@ -53,7 +53,7 @@ export const messages = defineMessages({
   heading5Description: {
     id: 'fabric.editor.heading5Description',
     defaultMessage: 'Use this for grouping list items',
-    description: ''
+    description: 'Description text shown in the block type menu to help users understand when to use Heading 5 for grouping list items in the editor.'
   },
   heading6: {
     id: 'fabric.editor.heading6',
@@ -63,17 +63,17 @@ export const messages = defineMessages({
   heading6Description: {
     id: 'fabric.editor.heading6Description',
     defaultMessage: 'Use this for low level headings',
-    description: ''
+    description: 'Description text shown in the block type menu to help users understand when to use Heading 6 for low level headings in the editor.'
   },
   blockquote: {
     id: 'fabric.editor.blockquote2',
     defaultMessage: 'Quote',
-    description: 'Quote some text'
+    description: 'Label shown as a menu item in the block type dropdown to insert a blockquote for quoting text in the editor.'
   },
   blockquoteDescription: {
     id: 'fabric.editor.blockquote.description',
     defaultMessage: 'Insert a quote or citation',
-    description: 'Quote some text'
+    description: 'Description text shown in the block type menu to help users understand the blockquote option for inserting a quote or citation in the editor.'
   },
   codeblock: {
     id: 'fabric.editor.codeblock',
@@ -83,7 +83,7 @@ export const messages = defineMessages({
   codeblockDescription: {
     id: 'fabric.editor.codeblock.description',
     defaultMessage: 'Display code with syntax highlighting',
-    description: 'Insert a snippet/segment of code (code block)'
+    description: 'Menu description shown in the quick insert menu. Explains that selecting this option inserts a code block with syntax highlighting support.'
   },
   infoPanel: {
     id: 'fabric.editor.infoPanel',
@@ -168,6 +168,6 @@ export const messages = defineMessages({
   other: {
     id: 'fabric.editor.other',
     defaultMessage: 'Others...',
-    description: 'Other text formatting'
+    description: 'Label shown as a menu item in the block type dropdown to access additional text formatting options in the editor.'
   }
 });

package/dist/es2019/messages/breakout.js

@@ -18,7 +18,7 @@ export const messages = defineMessages({
   resizeHandle: {
     id: 'fabric.editor.resizeHandle',
     defaultMessage: 'Resize handle',
-    description: 'Resize handle'
+    description: 'Label for the resize handle element displayed on content blocks in the editor, used to allow users to drag and resize the width of the element.'
   },
   resizeExpand: {
     id: 'fabric.editor.breakout.resizeExpand',

package/dist/es2019/messages/card.js

@@ -28,7 +28,7 @@ export const messages = defineMessages({
   card: {
     id: 'fabric.editor.cardFloatingControls',
     defaultMessage: 'Card options',
-    description: 'Options to change card type'
+    description: 'The text is shown as a title for the floating toolbar when a user selects an inline card or smart link in the editor, providing options to change the card display type.'
   },
   blockCardUnavailable: {
     id: 'fabric.editor.blockCardUnavailable',

package/dist/es2019/messages/context-panel.js

@@ -3,7 +3,7 @@ export const contextPanelMessages = defineMessages({
   panelLabel: {
     id: 'fabric.editor.contextPanel.panelLabel',
     defaultMessage: 'Context panel',
-    description: 'Label for the context panel'
+    description: 'Accessibility label for the context panel dialog in the editor. Used as an aria-label to identify the panel for screen reader users.'
   },
   panelContentLabel: {
     id: 'fabric.editor.contextPanel.panelContentLabel',