@atlaskit/editor-common 78.27.1 → 78.28.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/editor-common
 
+## 78.28.1
+
+### Patch Changes
+
+- [#87119](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87119) [`0cea7cb799c3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0cea7cb799c3) - [EDF-462] Add analytics for AI Blocks
+
+## 78.28.0
+
+### Minor Changes
+
+- [#90742](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90742) [`f893b885cc0a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f893b885cc0a) - [ux] Add comment on media badge states
+- [#88342](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88342) [`104d7d1b8191`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/104d7d1b8191) - Introducing requestDocument API on core plugin which can be used to get the document using the editor API.
+
+  This is intended to replace the `editorActions.getValue()`.
+
+  Using the editor API you can do:
+
+  ```ts
+  const { editorApi, preset } = usePreset(() => createDefaultPreset({}));
+
+  //
+  editorApi?.core?.actions.requestDocument((doc) => {
+    // Use the document as you require
+  });
+  ```
+
+  See: Editor RFC 51 for more details.
+
+- [#89840](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89840) [`9f256dde75e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f256dde75e9) - [ux] Implement onClickCallback plugin option to editor-plugin-card, allowing a callback to be executed when a smartlink is clicked, used by CCFE for live view to open smartlinks on-click
+
+### Patch Changes
+
+- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
+- [#89296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89296) [`14a5e5877b97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14a5e5877b97) - [ux] [ED-22875] - Removed borders from multi-bodied extensions
+- [#90878](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90878) [`962275ee0910`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/962275ee0910) - [ux] [ED-22852] Update loom quick insert title, description and logo
+- Updated dependencies
+
 ## 78.27.1
 
 ### Patch Changes

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

@@ -230,6 +230,7 @@ var ACTION_SUBJECT = exports.ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJ
   ACTION_SUBJECT["TOOLTIP"] = "tooltip";
   ACTION_SUBJECT["LOOM"] = "loom";
   ACTION_SUBJECT["MULTI_BODIED_EXTENSION"] = "multiBodiedExtension";
+  ACTION_SUBJECT["BODIED_EXTENSION"] = "bodiedExtension";
   return ACTION_SUBJECT;
 }({});
 var ACTION_SUBJECT_ID = exports.ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {

package/dist/cjs/clipboard/index.js

@@ -22,6 +22,12 @@ var isClipboardApiSupported = function isClipboardApiSupported() {
 var isIEClipboardApiSupported = function isIEClipboardApiSupported() {
   return window.clipboardData && typeof window.clipboardData.setData === 'function';
 };
+var isExtensionNode = function isExtensionNode(node) {
+  if (node === 'extension' || node === 'bodiedExtension' || node === 'inlineExtension' || node === 'multiBodiedExtension') {
+    return true;
+  }
+  return false;
+};
 var copyToClipboard = exports.copyToClipboard = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(textToCopy) {
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -136,11 +142,21 @@ var getAnalyticsPayload = exports.getAnalyticsPayload = function getAnalyticsPay
     doc = state.doc;
   var selectionAnalyticsPayload = (0, _selection.getNodeSelectionAnalyticsPayload)(selection) || (0, _selection.getRangeSelectionAnalyticsPayload)(selection, doc) || (0, _selection.getAllSelectionAnalyticsPayload)(selection) || (0, _selection.getCellSelectionAnalyticsPayload)(state);
   if (selectionAnalyticsPayload) {
+    var _attributes;
     var selectionActionSubjectId = selectionAnalyticsPayload.actionSubjectId;
+    var node = (_attributes = selectionAnalyticsPayload.attributes) === null || _attributes === void 0 ? void 0 : _attributes.node;
     var content = [];
+    var extensionType;
+    var extensionKey;
     switch (selectionActionSubjectId) {
       case _analytics.ACTION_SUBJECT_ID.NODE:
-        content.push(selectionAnalyticsPayload.attributes.node);
+        if (node) {
+          content.push(node);
+          if (isExtensionNode(node)) {
+            extensionType = selection.node.attrs.extensionType;
+            extensionKey = selection.node.attrs.extensionKey;
+          }
+        }
         break;
       case _analytics.ACTION_SUBJECT_ID.RANGE:
         content.push.apply(content, (0, _toConsumableArray2.default)(selectionAnalyticsPayload.attributes.nodes));
@@ -156,6 +172,18 @@ var getAnalyticsPayload = exports.getAnalyticsPayload = function getAnalyticsPay
           break;
         }
     }
+    if (isExtensionNode(node)) {
+      return {
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: action,
+        actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+        attributes: {
+          content: content,
+          extensionKey: extensionKey,
+          extensionType: extensionType
+        }
+      };
+    }
     return {
       eventType: _analytics.EVENT_TYPE.TRACK,
       action: action,

package/dist/cjs/extensions/module-helpers.js

@@ -37,6 +37,7 @@ function buildMenuItem(manifest, extensionModule) {
     key: key,
     title: title,
     extensionType: manifest.type,
+    extensionKey: manifest.key,
     keywords: extensionModule.keywords || manifest.keywords || [],
     featured: extensionModule.featured || false,
     categories: extensionModule.categories || manifest.categories || [],

package/dist/cjs/media/messages/comments.js

@@ -13,7 +13,7 @@ var commentMessages = exports.commentMessages = (0, _reactIntlNext.defineMessage
   },
   viewCommentsOnMedia: {
     id: 'fabric.editor.viewCommentOnMedia',
-    defaultMessage: 'View comment',
+    defaultMessage: 'View comments',
     description: 'View a existing comment for this media (image/video)'
   },
   viewAndAddCommentsOnMedia: {

package/dist/cjs/media-single/CommentBadge.js

@@ -13,6 +13,7 @@ var _button = require("@atlaskit/button");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 var _constants = require("@atlaskit/theme/constants");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _media = require("../media");
 /** @jsx jsx */
 
@@ -36,15 +37,19 @@ var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
   var intl = _ref.intl,
     width = _ref.width,
     height = _ref.height,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? 'default' : _ref$status,
     mediaElement = _ref.mediaElement,
     onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     _ref$isEditor = _ref.isEditor,
     isEditor = _ref$isEditor === void 0 ? false : _ref$isEditor;
   var _useState = (0, _react.useState)(getBadgeSize(width, height)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     badgeSize = _useState2[0],
     setBadgeSize = _useState2[1];
-  var title = intl.formatMessage(_media.commentMessages.viewAndAddCommentsOnMedia);
+  var title = intl.formatMessage(_media.commentMessages.viewCommentsOnMedia);
   (0, _react.useEffect)(function () {
     var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
       var _entries = (0, _slicedToArray2.default)(entries, 1),
@@ -62,21 +67,36 @@ var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
     };
   }, [mediaElement]);
   var badgeDimensions = badgeSize === 'medium' ? '24px' : '16px';
+  var colourToken = (0, _react.useMemo)(function () {
+    switch (status) {
+      case 'active':
+        return "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)";
+      case 'entered':
+        return "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)";
+      default:
+        return "var(--ds-background-accent-yellow-subtlest, #FFF7D6)";
+    }
+  }, [status]);
   return (0, _react2.jsx)("div", {
     css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
+  }, (0, _react2.jsx)(_tooltip.default, {
+    position: "top",
+    content: title
   }, (0, _react2.jsx)(_button.CustomThemeButton, {
     style: {
       height: badgeDimensions,
       width: badgeDimensions,
-      background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+      background: colourToken,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
     },
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     iconAfter: (0, _react2.jsx)(_comment.default, {
       label: title,
       size: badgeSize
     })
-  }));
+  })));
 };

package/dist/cjs/messages/insert-block.js

@@ -198,8 +198,8 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
   },
   recordVideo: {
     id: 'fabric.editor.recordVideo',
-    defaultMessage: 'Record video',
-    description: 'Record video using Loom'
+    defaultMessage: 'Record a Loom video',
+    description: 'Record a Loom video'
   },
   addLoomVideo: {
     id: 'fabric.editor.addLoomVideo',
@@ -208,7 +208,7 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
   },
   recordVideoDescription: {
     id: 'fabric.editor.recordVideo.description',
-    defaultMessage: 'Record video using Loom',
-    description: 'Record video using Loom'
+    defaultMessage: 'Record your screen and camera',
+    description: 'Record your screen and camera'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.27.1";
+var packageVersion = "78.28.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/preset/{core-plugin.js → core-plugin/index.js}

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.corePlugin = void 0;
-var _editorCommands = require("./editor-commands");
+var _editorCommands = require("../editor-commands");
+var _requestDocument = require("./requestDocument");
 /**
  * Core plugin that is always included in the preset.
  * Allows for executing `EditorCommand` and other core functionality.
@@ -41,6 +42,19 @@ var corePlugin = exports.corePlugin = function corePlugin(_ref) {
         }
         editorView.dom.blur();
         return true;
+      },
+      requestDocument: function requestDocument(onReceive, options) {
+        var _config$getEditorView;
+        var view = (_config$getEditorView = config === null || config === void 0 ? void 0 : config.getEditorView()) !== null && _config$getEditorView !== void 0 ? _config$getEditorView : null;
+        (0, _requestDocument.scheduleDocumentRequest)(view, onReceive, options === null || options === void 0 ? void 0 : options.transformer);
+      },
+      createTransformer: function createTransformer(cb) {
+        var _config$getEditorView2;
+        var view = (_config$getEditorView2 = config === null || config === void 0 ? void 0 : config.getEditorView()) !== null && _config$getEditorView2 !== void 0 ? _config$getEditorView2 : null;
+        if (!(view !== null && view !== void 0 && view.state.schema)) {
+          return undefined;
+        }
+        return cb(view === null || view === void 0 ? void 0 : view.state.schema);
       }
     }
   };

package/dist/cjs/preset/core-plugin/requestDocument.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scheduleDocumentRequest = void 0;
+exports.toJSON = toJSON;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var transformer = new _editorJsonTransformer.JSONTransformer();
+function toJSON(node) {
+  return transformer.encode(node);
+}
+
+/**
+ * This throttles the callback with requestIdleCallback.
+ */
+function createThrottleSchedule(callback) {
+  var frameId;
+  var lastArgs;
+  var wrapperFn = function wrapperFn() {
+    var _globalThis$requestId;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    lastArgs = args;
+    if (frameId) {
+      return;
+    }
+
+    // If `requestIdleCallback` doesn't exist - fallback to `requestAnimationFrame`
+    var delayFunction = (_globalThis$requestId = globalThis.requestIdleCallback) !== null && _globalThis$requestId !== void 0 ? _globalThis$requestId : globalThis.requestAnimationFrame;
+    frameId = delayFunction(function () {
+      frameId = undefined;
+      if (lastArgs) {
+        callback.apply(void 0, (0, _toConsumableArray2.default)(lastArgs));
+      }
+    }, {
+      timeout: 100
+    });
+  };
+  return wrapperFn;
+}
+var scheduleDocumentRequest = exports.scheduleDocumentRequest = createThrottleSchedule(returnDocumentRequest);
+function returnDocumentRequest(editorView, callback, transformer) {
+  var _editorView$state;
+  var _ref = (_editorView$state = editorView === null || editorView === void 0 ? void 0 : editorView.state) !== null && _editorView$state !== void 0 ? _editorView$state : {},
+    doc = _ref.doc,
+    schema = _ref.schema;
+  if (!doc || !schema) {
+    return undefined;
+  }
+  var json = toJSON(doc);
+  if (typeof transformer === 'undefined') {
+    callback(json);
+  } else {
+    var nodeSanitized = _model.Node.fromJSON(schema, json);
+    callback(transformer.encode(nodeSanitized));
+  }
+}

package/dist/cjs/preset/core-plugin/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.27.1";
+var packageVersion = "78.28.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sharedMultiBodiedExtensionStyles = exports.removeMarginsAndBorder = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
 // Wraps the navigation bar and extensionFrames
@@ -40,7 +39,6 @@ var mbeNavigation = (0, _react.css)({
   borderTopRightRadius: "var(--ds-border-radius, 3px)",
   userSelect: 'none',
   WebkitUserModify: 'read-only',
-  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
   borderBottom: 'none !important',
   background: "var(--ds-surface, white)",
   marginLeft: "var(--ds-space-100, 8px)",
@@ -55,7 +53,6 @@ var mbeNavigation = (0, _react.css)({
 });
 var extensionFrameContent = (0, _react.css)({
   padding: "var(--ds-space-100, 8px)".concat(" !important"),
-  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
   display: 'block',
   minHeight: '100px',
   background: "var(--ds-surface, white)",

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

@@ -224,6 +224,7 @@ export let ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
   ACTION_SUBJECT["TOOLTIP"] = "tooltip";
   ACTION_SUBJECT["LOOM"] = "loom";
   ACTION_SUBJECT["MULTI_BODIED_EXTENSION"] = "multiBodiedExtension";
+  ACTION_SUBJECT["BODIED_EXTENSION"] = "bodiedExtension";
   return ACTION_SUBJECT;
 }({});
 export let ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {

package/dist/es2019/clipboard/index.js

@@ -4,6 +4,12 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
 import { getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload } from '../selection';
 const isClipboardApiSupported = () => !!navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
 const isIEClipboardApiSupported = () => window.clipboardData && typeof window.clipboardData.setData === 'function';
+const isExtensionNode = node => {
+  if (node === 'extension' || node === 'bodiedExtension' || node === 'inlineExtension' || node === 'multiBodiedExtension') {
+    return true;
+  }
+  return false;
+};
 export const copyToClipboard = async textToCopy => {
   if (isClipboardApiSupported()) {
     try {
@@ -61,13 +67,23 @@ export const getAnalyticsPayload = (state, action) => {
   } = state;
   const selectionAnalyticsPayload = getNodeSelectionAnalyticsPayload(selection) || getRangeSelectionAnalyticsPayload(selection, doc) || getAllSelectionAnalyticsPayload(selection) || getCellSelectionAnalyticsPayload(state);
   if (selectionAnalyticsPayload) {
+    var _attributes;
     const {
       actionSubjectId: selectionActionSubjectId
     } = selectionAnalyticsPayload;
+    const node = (_attributes = selectionAnalyticsPayload.attributes) === null || _attributes === void 0 ? void 0 : _attributes.node;
     let content = [];
+    let extensionType;
+    let extensionKey;
     switch (selectionActionSubjectId) {
       case ACTION_SUBJECT_ID.NODE:
-        content.push(selectionAnalyticsPayload.attributes.node);
+        if (node) {
+          content.push(node);
+          if (isExtensionNode(node)) {
+            extensionType = selection.node.attrs.extensionType;
+            extensionKey = selection.node.attrs.extensionKey;
+          }
+        }
         break;
       case ACTION_SUBJECT_ID.RANGE:
         content.push(...selectionAnalyticsPayload.attributes.nodes);
@@ -84,6 +100,18 @@ export const getAnalyticsPayload = (state, action) => {
           break;
         }
     }
+    if (isExtensionNode(node)) {
+      return {
+        eventType: EVENT_TYPE.TRACK,
+        action,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        attributes: {
+          content,
+          extensionKey,
+          extensionType
+        }
+      };
+    }
     return {
       eventType: EVENT_TYPE.TRACK,
       action,

package/dist/es2019/extensions/module-helpers.js

@@ -14,6 +14,7 @@ export function buildMenuItem(manifest, extensionModule) {
     key,
     title,
     extensionType: manifest.type,
+    extensionKey: manifest.key,
     keywords: extensionModule.keywords || manifest.keywords || [],
     featured: extensionModule.featured || false,
     categories: extensionModule.categories || manifest.categories || [],

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

@@ -7,7 +7,7 @@ export const commentMessages = defineMessages({
   },
   viewCommentsOnMedia: {
     id: 'fabric.editor.viewCommentOnMedia',
-    defaultMessage: 'View comment',
+    defaultMessage: 'View comments',
     description: 'View a existing comment for this media (image/video)'
   },
   viewAndAddCommentsOnMedia: {

package/dist/es2019/media-single/CommentBadge.js

@@ -1,11 +1,12 @@
 /** @jsx jsx */
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { CustomThemeButton } from '@atlaskit/button';
 import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
 import { layers } from '@atlaskit/theme/constants';
+import Tooltip from '@atlaskit/tooltip';
 import { commentMessages as messages } from '../media';
 const commentBadgeWrapper = css({
   position: 'absolute',
@@ -27,12 +28,15 @@ export const CommentBadge = ({
   intl,
   width,
   height,
+  status = 'default',
   mediaElement,
   onClick,
+  onMouseEnter,
+  onMouseLeave,
   isEditor = false
 }) => {
   const [badgeSize, setBadgeSize] = useState(getBadgeSize(width, height));
-  const title = intl.formatMessage(messages.viewAndAddCommentsOnMedia);
+  const title = intl.formatMessage(messages.viewCommentsOnMedia);
   useEffect(() => {
     const observer = new ResizeObserver(debounce(entries => {
       const [entry] = entries;
@@ -50,21 +54,36 @@ export const CommentBadge = ({
     };
   }, [mediaElement]);
   const badgeDimensions = badgeSize === 'medium' ? '24px' : '16px';
+  const colourToken = useMemo(() => {
+    switch (status) {
+      case 'active':
+        return "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)";
+      case 'entered':
+        return "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)";
+      default:
+        return "var(--ds-background-accent-yellow-subtlest, #FFF7D6)";
+    }
+  }, [status]);
   return jsx("div", {
     css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
+  }, jsx(Tooltip, {
+    position: "top",
+    content: title
   }, jsx(CustomThemeButton, {
     style: {
       height: badgeDimensions,
       width: badgeDimensions,
-      background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+      background: colourToken,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
     },
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     iconAfter: jsx(CommentIcon, {
       label: title,
       size: badgeSize
     })
-  }));
+  })));
 };

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

@@ -192,8 +192,8 @@ export const toolbarInsertBlockMessages = defineMessages({
   },
   recordVideo: {
     id: 'fabric.editor.recordVideo',
-    defaultMessage: 'Record video',
-    description: 'Record video using Loom'
+    defaultMessage: 'Record a Loom video',
+    description: 'Record a Loom video'
   },
   addLoomVideo: {
     id: 'fabric.editor.addLoomVideo',
@@ -202,7 +202,7 @@ export const toolbarInsertBlockMessages = defineMessages({
   },
   recordVideoDescription: {
     id: 'fabric.editor.recordVideo.description',
-    defaultMessage: 'Record video using Loom',
-    description: 'Record video using Loom'
+    defaultMessage: 'Record your screen and camera',
+    description: 'Record your screen and camera'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.27.1";
+const packageVersion = "78.28.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/{core-plugin.js → core-plugin/index.js}

@@ -1,4 +1,5 @@
-import { editorCommandToPMCommand } from './editor-commands';
+import { editorCommandToPMCommand } from '../editor-commands';
+import { scheduleDocumentRequest } from './requestDocument';
 /**
  * Core plugin that is always included in the preset.
  * Allows for executing `EditorCommand` and other core functionality.
@@ -38,6 +39,19 @@ export const corePlugin = ({
         }
         editorView.dom.blur();
         return true;
+      },
+      requestDocument(onReceive, options) {
+        var _config$getEditorView;
+        const view = (_config$getEditorView = config === null || config === void 0 ? void 0 : config.getEditorView()) !== null && _config$getEditorView !== void 0 ? _config$getEditorView : null;
+        scheduleDocumentRequest(view, onReceive, options === null || options === void 0 ? void 0 : options.transformer);
+      },
+      createTransformer(cb) {
+        var _config$getEditorView2;
+        const view = (_config$getEditorView2 = config === null || config === void 0 ? void 0 : config.getEditorView()) !== null && _config$getEditorView2 !== void 0 ? _config$getEditorView2 : null;
+        if (!(view !== null && view !== void 0 && view.state.schema)) {
+          return undefined;
+        }
+        return cb(view === null || view === void 0 ? void 0 : view.state.schema);
       }
     }
   };

package/dist/es2019/preset/core-plugin/requestDocument.js

@@ -0,0 +1,51 @@
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+const transformer = new JSONTransformer();
+export function toJSON(node) {
+  return transformer.encode(node);
+}
+
+/**
+ * This throttles the callback with requestIdleCallback.
+ */
+function createThrottleSchedule(callback) {
+  let frameId;
+  let lastArgs;
+  const wrapperFn = (...args) => {
+    var _globalThis$requestId;
+    lastArgs = args;
+    if (frameId) {
+      return;
+    }
+
+    // If `requestIdleCallback` doesn't exist - fallback to `requestAnimationFrame`
+    const delayFunction = (_globalThis$requestId = globalThis.requestIdleCallback) !== null && _globalThis$requestId !== void 0 ? _globalThis$requestId : globalThis.requestAnimationFrame;
+    frameId = delayFunction(() => {
+      frameId = undefined;
+      if (lastArgs) {
+        callback(...lastArgs);
+      }
+    }, {
+      timeout: 100
+    });
+  };
+  return wrapperFn;
+}
+export const scheduleDocumentRequest = createThrottleSchedule(returnDocumentRequest);
+function returnDocumentRequest(editorView, callback, transformer) {
+  var _editorView$state;
+  const {
+    doc,
+    schema
+  } = (_editorView$state = editorView === null || editorView === void 0 ? void 0 : editorView.state) !== null && _editorView$state !== void 0 ? _editorView$state : {};
+  if (!doc || !schema) {
+    return undefined;
+  }
+  const json = toJSON(doc);
+  if (typeof transformer === 'undefined') {
+    callback(json);
+  } else {
+    const nodeSanitized = PMNode.fromJSON(schema, json);
+    callback(transformer.encode(nodeSanitized));
+  }
+}

package/dist/es2019/preset/core-plugin/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.27.1";
+const packageVersion = "78.28.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {