@atlaskit/editor-common 87.0.2 → 87.0.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-common
 
+## 87.0.4
+
+### Patch Changes
+
+- [#125133](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125133)
+  [`d804e5dd3216b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d804e5dd3216b) -
+  ED-24226 - Add state to manage the toggle word wrap state of code blocks. New WeakMap added in
+  editor-common/src/code-block, as word wrap state is shared throughout the editor. Covers regular
+  changes to code block by the user via the node view update function. Covers breakout of code block
+  node. Does not cover drag&drop & cut&paste edge cases.
+
+## 87.0.3
+
+### Patch Changes
+
+- [#124585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124585)
+  [`38ebc7f4f4ce9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/38ebc7f4f4ce9) -
+  Fix LazyNodeView race condition
+- [#124302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124302)
+  [`45dc9b6543007`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45dc9b6543007) -
+  [ux] ED-24228 adding wrap content functionality with feature gate
+
 ## 87.0.2
 
 ### Patch Changes

package/code-block/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-common/code-block",
+  "main": "../dist/cjs/code-block/index.js",
+  "module": "../dist/esm/code-block/index.js",
+  "module:es2019": "../dist/es2019/code-block/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/code-block/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/code-block/index.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/code-block/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transferCodeBlockWrappedValue = exports.isCodeBlockWordWrapEnabled = exports.defaultWordWrapState = exports.codeBlockWrappedStates = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var defaultWordWrapState = exports.defaultWordWrapState = false;
+var codeBlockWrappedStates = exports.codeBlockWrappedStates = new WeakMap();
+var isCodeBlockWordWrapEnabled = exports.isCodeBlockWordWrapEnabled = function isCodeBlockWordWrapEnabled(codeBlockNode) {
+  if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+    return false;
+  }
+  var currentNodeWordWrapState = codeBlockWrappedStates.get(codeBlockNode);
+  return currentNodeWordWrapState !== undefined ? currentNodeWordWrapState : defaultWordWrapState;
+};
+
+/**
+ * As the code block node is used as the key, there is instances where the node will be destroyed & recreated and is no longer a valid key.
+ * In these instances, we must get the value from that old node and set it to the value of the new node.
+ */
+var transferCodeBlockWrappedValue = exports.transferCodeBlockWrappedValue = function transferCodeBlockWrappedValue(oldCodeBlockNode, newCodeBlockNode) {
+  if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+    return;
+  }
+  var previousValue = codeBlockWrappedStates.get(oldCodeBlockNode);
+  if (previousValue !== undefined) {
+    codeBlockWrappedStates.set(newCodeBlockNode, previousValue);
+    codeBlockWrappedStates.delete(oldCodeBlockNode);
+  }
+};

package/dist/cjs/lazy-node-view/index.js

@@ -1,17 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withLazyLoading = exports.debouncedReplaceNodeviews = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _model = require("@atlaskit/editor-prosemirror/model");
-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; }
+exports.withLazyLoading = void 0;
+var _nodeView = require("./node-view");
+var _replaceNodeViews = require("./replace-node-views");
 /**
  * 📢 Public Type
  *
@@ -26,116 +20,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 /**
  * 🧱 Internal: Editor FE Platform
- */
-
-/**
- * 🧱 Internal: Editor FE Platform
- */
-
-/**
- * 🧱 Internal: Editor FE Platform
- */
-
-/**
- * 🧱 Internal: Editor FE Platform
- *
- * A cache to store loaded React NodeViews for each EditorView.
- *
- * This cache will help us to avoid any race condition
- * when multiple Editors exist in the same page.
- *
- * @type {CacheType}
- */
-var cachePerEditorView = new WeakMap();
-
-/**
- * 🧱 Internal: Editor FE Platform
- */
-var isFirefox = /gecko\/\d/i.test(navigator.userAgent);
-
-/**
- * 🧱 Internal: Editor FE Platform
- *
- * A NodeView that serves as a placeholder until the actual NodeView is loaded.
- */
-var LazyNodeView = /*#__PURE__*/(0, _createClass2.default)(function LazyNodeView(node, view, getPos) {
-  var _node$type;
-  (0, _classCallCheck2.default)(this, LazyNodeView);
-  if (typeof ((_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.spec) === null || _node$type === void 0 ? void 0 : _node$type.toDOM) !== 'function') {
-    this.dom = document.createElement('div');
-    return;
-  }
-  var fallback = _model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
-  this.dom = fallback.dom;
-  this.contentDOM = fallback.contentDOM;
-  if (this.dom instanceof HTMLElement) {
-    // This attribute is mostly used for debugging purposed
-    // It will help us to found out when the node was replaced
-    this.dom.setAttribute('data-lazy-node-view', node.type.name);
-    // This is used on Libra tests
-    // We are using this to make sure all lazy noded were replaced
-    // before the test started
-    this.dom.setAttribute('data-lazy-node-view-fallback', 'true');
-  }
-});
-/**
- * 🧱 Internal: Editor FE Platform
- *
- * Debounces and replaces the node views in a ProseMirror editor with lazy-loaded node views.
- *
- * This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
- * node views have been loaded. It uses a debounced approach to ensure that the replacement does
- * not happen too frequently, which can be performance-intensive.
  *
- * The function checks if there are any loaded node views in the cache associated with the given
- * `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
- * loaded node views. The replacement is scheduled using `requestIdleCallback` or
- * `requestAnimationFrame` to avoid blocking the main thread, especially in Firefox where
- * `requestIdleCallback` may not be supported.
- *
- * @param {WeakMap<EditorView, Record<string, NodeViewConstructor>>} cache - A WeakMap that stores
- *        the loaded node views for each `EditorView`. The key is the `EditorView`, and the value
- *        is a record of node type names to their corresponding `NodeViewConstructor`.
- * @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
- *        needs to be updated.
- *
- * @example
- * const cache = new WeakMap();
- * const view = new EditorView(...);
- *
- * // Assume some node views have been loaded and stored in the cache
- * cache.set(view, {
- *   'table': TableViewConstructor,
- *   'tableCell': TableCellViewConstructor,
- * });
- *
- * debouncedReplaceNodeviews(cache, view);
+ * Controls which node was scheduled to load the original node view code
  */
-var debouncedReplaceNodeviews = exports.debouncedReplaceNodeviews = (0, _debounce.default)(function (cache, view) {
-  var loadedNodeviews = cache.get(view);
-  if (!loadedNodeviews) {
-    return;
-  }
-  cache.delete(view);
-
-  // eslint-disable-next-line compat/compat
-  var idle = window.requestIdleCallback;
-
-  /*
-   * For reasons that goes beyond my knowledge
-   * some Firefox versions aren't calling the requestIdleCallback.
-   *
-   * So, we need this check to make sure we use the requestAnimationFrame instead
-   */
-  var later = isFirefox || typeof idle !== 'function' ? window.requestAnimationFrame : idle;
-  later(function () {
-    var currentNodeViews = view.props.nodeViews;
-    var nextNodeViews = _objectSpread(_objectSpread({}, currentNodeViews), loadedNodeviews);
-    view.setProps({
-      nodeViews: nextNodeViews
-    });
-  });
-});
+var requestedNodesPerEditorView = new WeakMap();
 
 /**
  * 📢 Public: Any EditorPlugin can use this function
@@ -183,23 +71,26 @@ var withLazyLoading = exports.withLazyLoading = function withLazyLoading(_ref) {
     getNodeViewOptions = _ref.getNodeViewOptions,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var createLazyNodeView = function createLazyNodeView(node, view, getPos, decorations) {
-    var _node$type2;
-    var cachedMap = cachePerEditorView.get(view);
-    if (!cachedMap) {
-      cachedMap = {};
-      cachePerEditorView.set(view, cachedMap);
+    var _node$type;
+    var requestedNodes = requestedNodesPerEditorView.get(view);
+    if (!requestedNodes) {
+      requestedNodes = new Set(), requestedNodesPerEditorView.set(view, requestedNodes);
     }
-    var wasAlreadyRequested = cachedMap.hasOwnProperty(nodeName);
+    var wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
-      return new LazyNodeView(node, view, getPos);
+      return new _nodeView.LazyNodeView(node, view, getPos);
     }
+    requestedNodes.add(nodeName);
     loader().then(function (nodeViewFuncModule) {
-      cachedMap[nodeName] = function (node, view, getPos, decorations) {
+      var nodeViewFunc = function nodeViewFunc(node, view, getPos, decorations) {
         return nodeViewFuncModule(node, view, getPos, decorations, getNodeViewOptions);
       };
-      debouncedReplaceNodeviews(cachePerEditorView, view);
+      (0, _replaceNodeViews.queueReplaceNodeViews)(view, {
+        nodeName: nodeName,
+        nodeViewFunc: nodeViewFunc
+      });
     });
-    if (typeof ((_node$type2 = node.type) === null || _node$type2 === void 0 || (_node$type2 = _node$type2.spec) === null || _node$type2 === void 0 ? void 0 : _node$type2.toDOM) !== 'function') {
+    if (typeof ((_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.spec) === null || _node$type === void 0 ? void 0 : _node$type.toDOM) !== 'function') {
       // TODO: Analytics ED-23982
       // dispatchAnalyticsEvent({
       //   action: ACTION.LAZY_NODE_VIEW_ERROR,
@@ -211,7 +102,7 @@ var withLazyLoading = exports.withLazyLoading = function withLazyLoading(_ref) {
       //   },
       // });
     }
-    return new LazyNodeView(node, view, getPos);
+    return new _nodeView.LazyNodeView(node, view, getPos);
   };
   return createLazyNodeView;
 };

package/dist/cjs/lazy-node-view/node-view.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LazyNodeView = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * A NodeView that serves as a placeholder until the actual NodeView is loaded.
+ */
+var LazyNodeView = exports.LazyNodeView = /*#__PURE__*/(0, _createClass2.default)(function LazyNodeView(node, view, getPos) {
+  var _node$type;
+  (0, _classCallCheck2.default)(this, LazyNodeView);
+  if (typeof ((_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.spec) === null || _node$type === void 0 ? void 0 : _node$type.toDOM) !== 'function') {
+    this.dom = document.createElement('div');
+    return;
+  }
+  var fallback = _model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+  this.dom = fallback.dom;
+  this.contentDOM = fallback.contentDOM;
+  if (this.dom instanceof HTMLElement) {
+    // This attribute is mostly used for debugging purposed
+    // It will help us to found out when the node was replaced
+    this.dom.setAttribute('data-lazy-node-view', node.type.name);
+    // This is used on Libra tests
+    // We are using this to make sure all lazy noded were replaced
+    // before the test started
+    this.dom.setAttribute('data-lazy-node-view-fallback', 'true');
+  }
+});

package/dist/cjs/lazy-node-view/replace-node-views.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.queueReplaceNodeViews = exports.debouncedReplaceNodeviews = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+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; }
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+var isFirefox = /gecko\/\d/i.test(navigator.userAgent);
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Debounces and replaces the node views in a ProseMirror editor with lazy-loaded node views.
+ *
+ * This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
+ * node views have been loaded. It uses a debounced approach to ensure that the replacement does
+ * not happen too frequently, which can be performance-intensive.
+ *
+ * The function checks if there are any loaded node views in the cache associated with the given
+ * `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
+ * loaded node views. The replacement is scheduled using `requestIdleCallback` or
+ * `requestAnimationFrame` to avoid blocking the main thread, especially in Firefox where
+ * `requestIdleCallback` may not be supported.
+ *
+ * @param {WeakMap<EditorView, Record<string, NodeViewConstructor>>} cache - A WeakMap that stores
+ *        the loaded node views for each `EditorView`. The key is the `EditorView`, and the value
+ *        is a record of node type names to their corresponding `NodeViewConstructor`.
+ * @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
+ *        needs to be updated.
+ *
+ * @example
+ * const cache = new WeakMap();
+ * const view = new EditorView(...);
+ *
+ * // Assume some node views have been loaded and stored in the cache
+ * cache.set(view, {
+ *   'table': TableViewConstructor,
+ *   'tableCell': TableCellViewConstructor,
+ * });
+ *
+ * debouncedReplaceNodeviews(cache, view);
+ */
+var debouncedReplaceNodeviews = exports.debouncedReplaceNodeviews = (0, _debounce.default)(function (cache, view) {
+  var loadedNodeviews = cache.get(view);
+  if (!loadedNodeviews || Object.keys(loadedNodeviews).length === 0) {
+    return;
+  }
+  var nodeViewsToReplace = _objectSpread({}, loadedNodeviews);
+
+  // Make sure the cache is cleaned
+  // From here, we will access the loaded node views by lexical scope
+  cache.set(view, {});
+
+  // eslint-disable-next-line compat/compat
+  var idle = window.requestIdleCallback;
+
+  /*
+   * For reasons that goes beyond my knowledge
+   * some Firefox versions aren't calling the requestIdleCallback.
+   *
+   * So, we need this check to make sure we use the requestAnimationFrame instead
+   */
+  var later = isFirefox || typeof idle !== 'function' ? window.requestAnimationFrame : idle;
+  later(function () {
+    var currentNodeViews = view.props.nodeViews;
+    var nextNodeViews = _objectSpread(_objectSpread({}, currentNodeViews), nodeViewsToReplace);
+    view.setProps({
+      nodeViews: nextNodeViews
+    });
+  });
+});
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+var loadedPerEditorView = new WeakMap();
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+var queueReplaceNodeViews = exports.queueReplaceNodeViews = function queueReplaceNodeViews(view, _ref) {
+  var nodeName = _ref.nodeName,
+    nodeViewFunc = _ref.nodeViewFunc;
+  var nodeViews = loadedPerEditorView.get(view) || {};
+  nodeViews[nodeName] = nodeViewFunc;
+  loadedPerEditorView.set(view, nodeViews);
+  debouncedReplaceNodeviews(loadedPerEditorView, view);
+};

package/dist/cjs/lazy-node-view/types.js

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

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,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 = "87.0.2";
+var packageVersion = "87.0.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/shared/code-block.js

@@ -20,12 +20,13 @@ var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
-  DS_CODEBLOCK: '[data-ds--code--code-block]'
+  DS_CODEBLOCK: '[data-ds--code--code-block]',
+  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped'
 };
 var codeBlockSharedStyles = exports.codeBlockSharedStyles = function codeBlockSharedStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED);
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.0.2";
+var packageVersion = "87.0.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/code-block/index.js

@@ -0,0 +1,25 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+export const defaultWordWrapState = false;
+export const codeBlockWrappedStates = new WeakMap();
+export const isCodeBlockWordWrapEnabled = codeBlockNode => {
+  if (!fg('editor_support_code_block_wrapping')) {
+    return false;
+  }
+  const currentNodeWordWrapState = codeBlockWrappedStates.get(codeBlockNode);
+  return currentNodeWordWrapState !== undefined ? currentNodeWordWrapState : defaultWordWrapState;
+};
+
+/**
+ * As the code block node is used as the key, there is instances where the node will be destroyed & recreated and is no longer a valid key.
+ * In these instances, we must get the value from that old node and set it to the value of the new node.
+ */
+export const transferCodeBlockWrappedValue = (oldCodeBlockNode, newCodeBlockNode) => {
+  if (!fg('editor_support_code_block_wrapping')) {
+    return;
+  }
+  const previousValue = codeBlockWrappedStates.get(oldCodeBlockNode);
+  if (previousValue !== undefined) {
+    codeBlockWrappedStates.set(newCodeBlockNode, previousValue);
+    codeBlockWrappedStates.delete(oldCodeBlockNode);
+  }
+};

package/dist/es2019/lazy-node-view/index.js

@@ -1,5 +1,5 @@
-import debounce from 'lodash/debounce';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { LazyNodeView } from './node-view';
+import { queueReplaceNodeViews } from './replace-node-views';
 
 /**
  * 📢 Public Type
@@ -13,123 +13,12 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
  * @see {withLazyLoading}
  */
 
-/**
- * 🧱 Internal: Editor FE Platform
- */
-
-/**
- * 🧱 Internal: Editor FE Platform
- */
-
-/**
- * 🧱 Internal: Editor FE Platform
- */
-
 /**
  * 🧱 Internal: Editor FE Platform
  *
- * A cache to store loaded React NodeViews for each EditorView.
- *
- * This cache will help us to avoid any race condition
- * when multiple Editors exist in the same page.
- *
- * @type {CacheType}
- */
-const cachePerEditorView = new WeakMap();
-
-/**
- * 🧱 Internal: Editor FE Platform
+ * Controls which node was scheduled to load the original node view code
  */
-const isFirefox = /gecko\/\d/i.test(navigator.userAgent);
-
-/**
- * 🧱 Internal: Editor FE Platform
- *
- * A NodeView that serves as a placeholder until the actual NodeView is loaded.
- */
-class LazyNodeView {
-  constructor(node, view, getPos) {
-    var _node$type, _node$type$spec;
-    if (typeof ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : (_node$type$spec = _node$type.spec) === null || _node$type$spec === void 0 ? void 0 : _node$type$spec.toDOM) !== 'function') {
-      this.dom = document.createElement('div');
-      return;
-    }
-    const fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
-    this.dom = fallback.dom;
-    this.contentDOM = fallback.contentDOM;
-    if (this.dom instanceof HTMLElement) {
-      // This attribute is mostly used for debugging purposed
-      // It will help us to found out when the node was replaced
-      this.dom.setAttribute('data-lazy-node-view', node.type.name);
-      // This is used on Libra tests
-      // We are using this to make sure all lazy noded were replaced
-      // before the test started
-      this.dom.setAttribute('data-lazy-node-view-fallback', 'true');
-    }
-  }
-}
-
-/**
- * 🧱 Internal: Editor FE Platform
- *
- * Debounces and replaces the node views in a ProseMirror editor with lazy-loaded node views.
- *
- * This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
- * node views have been loaded. It uses a debounced approach to ensure that the replacement does
- * not happen too frequently, which can be performance-intensive.
- *
- * The function checks if there are any loaded node views in the cache associated with the given
- * `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
- * loaded node views. The replacement is scheduled using `requestIdleCallback` or
- * `requestAnimationFrame` to avoid blocking the main thread, especially in Firefox where
- * `requestIdleCallback` may not be supported.
- *
- * @param {WeakMap<EditorView, Record<string, NodeViewConstructor>>} cache - A WeakMap that stores
- *        the loaded node views for each `EditorView`. The key is the `EditorView`, and the value
- *        is a record of node type names to their corresponding `NodeViewConstructor`.
- * @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
- *        needs to be updated.
- *
- * @example
- * const cache = new WeakMap();
- * const view = new EditorView(...);
- *
- * // Assume some node views have been loaded and stored in the cache
- * cache.set(view, {
- *   'table': TableViewConstructor,
- *   'tableCell': TableCellViewConstructor,
- * });
- *
- * debouncedReplaceNodeviews(cache, view);
- */
-export const debouncedReplaceNodeviews = debounce((cache, view) => {
-  const loadedNodeviews = cache.get(view);
-  if (!loadedNodeviews) {
-    return;
-  }
-  cache.delete(view);
-
-  // eslint-disable-next-line compat/compat
-  const idle = window.requestIdleCallback;
-
-  /*
-   * For reasons that goes beyond my knowledge
-   * some Firefox versions aren't calling the requestIdleCallback.
-   *
-   * So, we need this check to make sure we use the requestAnimationFrame instead
-   */
-  const later = isFirefox || typeof idle !== 'function' ? window.requestAnimationFrame : idle;
-  later(() => {
-    const currentNodeViews = view.props.nodeViews;
-    const nextNodeViews = {
-      ...currentNodeViews,
-      ...loadedNodeviews
-    };
-    view.setProps({
-      nodeViews: nextNodeViews
-    });
-  });
-});
+const requestedNodesPerEditorView = new WeakMap();
 
 /**
  * 📢 Public: Any EditorPlugin can use this function
@@ -178,23 +67,26 @@ export const withLazyLoading = ({
   dispatchAnalyticsEvent
 }) => {
   const createLazyNodeView = (node, view, getPos, decorations) => {
-    var _node$type2, _node$type2$spec;
-    let cachedMap = cachePerEditorView.get(view);
-    if (!cachedMap) {
-      cachedMap = {};
-      cachePerEditorView.set(view, cachedMap);
+    var _node$type, _node$type$spec;
+    let requestedNodes = requestedNodesPerEditorView.get(view);
+    if (!requestedNodes) {
+      requestedNodes = new Set(), requestedNodesPerEditorView.set(view, requestedNodes);
     }
-    const wasAlreadyRequested = cachedMap.hasOwnProperty(nodeName);
+    const wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
       return new LazyNodeView(node, view, getPos);
     }
+    requestedNodes.add(nodeName);
     loader().then(nodeViewFuncModule => {
-      cachedMap[nodeName] = (node, view, getPos, decorations) => {
+      const nodeViewFunc = (node, view, getPos, decorations) => {
         return nodeViewFuncModule(node, view, getPos, decorations, getNodeViewOptions);
       };
-      debouncedReplaceNodeviews(cachePerEditorView, view);
+      queueReplaceNodeViews(view, {
+        nodeName,
+        nodeViewFunc
+      });
     });
-    if (typeof ((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : (_node$type2$spec = _node$type2.spec) === null || _node$type2$spec === void 0 ? void 0 : _node$type2$spec.toDOM) !== 'function') {
+    if (typeof ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : (_node$type$spec = _node$type.spec) === null || _node$type$spec === void 0 ? void 0 : _node$type$spec.toDOM) !== 'function') {
       // TODO: Analytics ED-23982
       // dispatchAnalyticsEvent({
       //   action: ACTION.LAZY_NODE_VIEW_ERROR,