@atlaskit/editor-common 87.7.0 → 87.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/monitoring/error.js +1 -1
  3. package/dist/cjs/react-node-view/index.js +50 -2
  4. package/dist/cjs/styles/shared/code-block.js +8 -6
  5. package/dist/cjs/ui/DropList/index.js +1 -1
  6. package/dist/es2019/monitoring/error.js +1 -1
  7. package/dist/es2019/react-node-view/index.js +47 -0
  8. package/dist/es2019/styles/shared/code-block.js +52 -40
  9. package/dist/es2019/ui/DropList/index.js +1 -1
  10. package/dist/esm/monitoring/error.js +1 -1
  11. package/dist/esm/react-node-view/index.js +50 -2
  12. package/dist/esm/styles/shared/code-block.js +8 -6
  13. package/dist/esm/ui/DropList/index.js +1 -1
  14. package/dist/types/analytics/types/general-events.d.ts +1 -0
  15. package/dist/types/styles/shared/code-block.d.ts +5 -4
  16. package/dist/types-ts4.5/analytics/types/general-events.d.ts +1 -0
  17. package/dist/types-ts4.5/styles/shared/code-block.d.ts +5 -4
  18. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 87.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#129049](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129049)
8
+ [`6b1533d389c9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1533d389c9d) -
9
+ [ux] ED-24511 - Convert code block line numbers inline decorations to widget decorations. The line
10
+ number gutter on editor code blocks should now reflect the number of lines of code, including when
11
+ the code block has word wrap enabled. Minor for editor-common as new analytics attribute added.
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 87.7.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/monitoring/error.js CHANGED
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
17
17
  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; }
18
18
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
19
19
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
20
- var packageVersion = "87.7.0";
20
+ var packageVersion = "87.8.0";
21
21
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
22
22
  // Remove URL as it has UGC
23
23
  // TODO: Sanitise the URL instead of just removing it
package/dist/cjs/react-node-view/index.js CHANGED
@@ -22,6 +22,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
22
22
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
23
23
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
24
24
  var _react = _interopRequireDefault(require("react"));
25
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
25
26
  var _analytics = require("../analytics");
26
27
  var _eventDispatcher = require("../event-dispatcher");
27
28
  var _ErrorBoundary = require("../ui/ErrorBoundary");
@@ -140,11 +141,58 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
140
141
  }, {
141
142
  key: "_handleRef",
142
143
  value: function _handleRef(node) {
144
+ var _this4 = this;
143
145
  var contentDOM = this.contentDOMWrapper || this.contentDOM;
146
+ // @ts-ignore
147
+ var oldIgnoreMutation;
148
+ var selectionBookmark;
149
+ var parentOffset = 0;
150
+ var mutationsIgnored = false;
144
151
 
145
152
  // move the contentDOM node inside the inner reference after rendering
146
153
  if (node && contentDOM && !node.contains(contentDOM)) {
154
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_prosemirror_sel_resync')) {
155
+ var _this$view$state$sele;
156
+ // @ts-ignore - ignoreMutation may not be declared
157
+ oldIgnoreMutation = this.ignoreMutation; // store ref to previous ignoreMutation
158
+
159
+ // ignore all mutations caused by ProseMirror's MutationObserver triggering
160
+ // after DOM change, except selection changes
161
+ // @ts-ignore ProseMirror adds selection type to MutationRecord
162
+ this.ignoreMutation = function (m) {
163
+ var isSelectionMutation = m.type === 'selection';
164
+ if (!isSelectionMutation) {
165
+ mutationsIgnored = true;
166
+ }
167
+ return !isSelectionMutation;
168
+ };
169
+
170
+ // capture document selection state before React DOM changes triggers ProseMirror selection change transaction
171
+ if (this.view.state.selection.visible) {
172
+ selectionBookmark = this.view.state.selection.getBookmark();
173
+ }
174
+
175
+ // ... and capture parent offset before DOM change
176
+ if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
177
+ var _this$view$state$sele2, _this$view$state$sele3;
178
+ parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
179
+ }
180
+ }
147
181
  node.appendChild(contentDOM);
182
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_prosemirror_sel_resync')) {
183
+ requestAnimationFrame(function () {
184
+ // Reset ignoreMutation after frame ....
185
+ // @ts-ignore - this may not have been declared by implementing class
186
+ _this4.ignoreMutation = oldIgnoreMutation;
187
+
188
+ // only trigger selection re-sync if the selection is not at the start of the
189
+ // node, and DOM mutations were ignored
190
+ if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
191
+ // ... and dispatch expected selection state
192
+ _this4.view.dispatch(_this4.view.state.tr.setSelection(selectionBookmark.resolve(_this4.view.state.tr.doc)));
193
+ }
194
+ });
195
+ }
148
196
  }
149
197
  }
150
198
  }, {
@@ -160,7 +208,7 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
160
208
  }, {
161
209
  key: "update",
162
210
  value: function update(node, decorations, _innerDecorations) {
163
- var _this4 = this;
211
+ var _this5 = this;
164
212
  var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
165
213
  return true;
166
214
  };
@@ -183,7 +231,7 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
183
231
  }
184
232
  this.node = node;
185
233
  this.renderReactComponent(function () {
186
- return _this4.render(_this4.reactComponentProps, _this4.handleRef);
234
+ return _this5.render(_this5.reactComponentProps, _this5.handleRef);
187
235
  });
188
236
  return true;
189
237
  }
package/dist/cjs/styles/shared/code-block.js CHANGED
@@ -21,15 +21,17 @@ var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
21
21
  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
22
22
  CODEBLOCK_CONTENT: 'code-content',
23
23
  DS_CODEBLOCK: '[data-ds--code--code-block]',
24
- CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
25
- CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
26
- CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped',
27
- CODEBLOCK_WRAPPED: 'code-block--wrapped'
24
+ // Feature Gate editor_support_code_block_wrapping:
25
+ CODEBLOCK_CONTENT_WRAPPER_FG: 'code-block-content-wrapper--fg',
26
+ CODEBLOCK_CONTENT_FG: 'code-content--fg',
27
+ CODEBLOCK_CONTENT_FG_WRAPPED: 'code-content--fg-wrapped',
28
+ CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped',
29
+ CODEBLOCK_LINE_NUMBER_GUTTER_FG: 'line-number-gutter--fg'
28
30
  };
29
31
  var codeBlockSharedStyles = exports.codeBlockSharedStyles = function codeBlockSharedStyles() {
30
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", "\n\t\t> .", "\n\t\t> .", "\n\t\tcode {\n\t\tword-break: break-word;\n\t\twhite-space: pre-wrap;\n\t}\n\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\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\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\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 1rem;\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\tcounter-reset: line var(--line-num, 0);\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcounter-increment: line;\n\t\t\tline-height: 1rem;\n\t\t\tpointer-events: none;\n\n\t\t\t::before {\n\t\t\t\ttext-align: right;\n\t\t\t\tmin-width: 1.5rem;\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tmargin-top: ", ";\n\t\t\t\tmargin-right: ", ";\n\t\t\t\tleft: -0.5rem;\n\t\t\t\tcolor: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tcontent: counter(line);\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, 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_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
32
+ return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", "\n\t\t> .", "\n\t\t> .", " {\n\t\tmargin-right: ", ";\n\n\t\tcode {\n\t\t\tdisplay: block;\n\t\t\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\t}\n\n\t.", "\n\t\t> .", " {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\n\t\tcode {\n\t\t\tflex-grow: 1;\n\n\t\t\twhite-space: pre;\n\t\t}\n\t}\n\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\t// relative position set so number gutter remains absolute on horizontal scroll.\n\t\t\tposition: relative;\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\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 2rem;\n\t\t\tflex-shrink: 0;\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\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\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t\twidth: 2rem;\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\tfont-size: ", ";\n\t\t\tline-height: 1.5rem;\n\t\t\ttext-align: center;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, 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)({
31
33
  leftCoverWidth: "var(--ds-space-300, 24px)"
32
- }), "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_LINE_NUMBER_GUTTER_FG_WRAP, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", 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, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED, "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
34
+ }), "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_CONTENT_WRAPPER_FG, 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_LINE_NUMBER_GUTTER_FG, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), 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_FG, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-text-subtlest, #505F79)");
33
35
  };
34
36
 
35
37
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
package/dist/cjs/ui/DropList/index.js CHANGED
@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
23
23
  * @jsx jsx
24
24
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
25
  var packageName = "@atlaskit/editor-common";
26
- var packageVersion = "87.7.0";
26
+ var packageVersion = "87.8.0";
27
27
  var halfFocusRing = 1;
28
28
  var dropOffset = '0, 8';
29
29
  var DropList = /*#__PURE__*/function (_Component) {
package/dist/es2019/monitoring/error.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "87.7.0";
4
+ const packageVersion = "87.8.0";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // TODO: Sanitise the URL instead of just removing it
package/dist/es2019/react-node-view/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import React from 'react';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
5
6
  import { createDispatch } from '../event-dispatcher';
6
7
  import { ErrorBoundary } from '../ui/ErrorBoundary';
@@ -104,10 +105,56 @@ export default class ReactNodeView {
104
105
  }
105
106
  _handleRef(node) {
106
107
  const contentDOM = this.contentDOMWrapper || this.contentDOM;
108
+ // @ts-ignore
109
+ let oldIgnoreMutation;
110
+ let selectionBookmark;
111
+ let parentOffset = 0;
112
+ let mutationsIgnored = false;
107
113
 
108
114
  // move the contentDOM node inside the inner reference after rendering
109
115
  if (node && contentDOM && !node.contains(contentDOM)) {
116
+ if (fg('platform_editor_react_18_prosemirror_sel_resync')) {
117
+ var _this$view$state$sele;
118
+ // @ts-ignore - ignoreMutation may not be declared
119
+ oldIgnoreMutation = this.ignoreMutation; // store ref to previous ignoreMutation
120
+
121
+ // ignore all mutations caused by ProseMirror's MutationObserver triggering
122
+ // after DOM change, except selection changes
123
+ // @ts-ignore ProseMirror adds selection type to MutationRecord
124
+ this.ignoreMutation = m => {
125
+ const isSelectionMutation = m.type === 'selection';
126
+ if (!isSelectionMutation) {
127
+ mutationsIgnored = true;
128
+ }
129
+ return !isSelectionMutation;
130
+ };
131
+
132
+ // capture document selection state before React DOM changes triggers ProseMirror selection change transaction
133
+ if (this.view.state.selection.visible) {
134
+ selectionBookmark = this.view.state.selection.getBookmark();
135
+ }
136
+
137
+ // ... and capture parent offset before DOM change
138
+ if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
139
+ var _this$view$state$sele2, _this$view$state$sele3, _this$view$state$sele4;
140
+ parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 ? void 0 : (_this$view$state$sele4 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele4 === void 0 ? void 0 : _this$view$state$sele4.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
141
+ }
142
+ }
110
143
  node.appendChild(contentDOM);
144
+ if (fg('platform_editor_react_18_prosemirror_sel_resync')) {
145
+ requestAnimationFrame(() => {
146
+ // Reset ignoreMutation after frame ....
147
+ // @ts-ignore - this may not have been declared by implementing class
148
+ this.ignoreMutation = oldIgnoreMutation;
149
+
150
+ // only trigger selection re-sync if the selection is not at the start of the
151
+ // node, and DOM mutations were ignored
152
+ if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
153
+ // ... and dispatch expected selection state
154
+ this.view.dispatch(this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)));
155
+ }
156
+ });
157
+ }
111
158
  }
112
159
  }
113
160
  render(props, forwardRef) {
package/dist/es2019/styles/shared/code-block.js CHANGED
@@ -12,18 +12,36 @@ export const CodeBlockSharedCssClassName = {
12
12
  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
13
13
  CODEBLOCK_CONTENT: 'code-content',
14
14
  DS_CODEBLOCK: '[data-ds--code--code-block]',
15
- CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
16
- CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
17
- CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped',
18
- CODEBLOCK_WRAPPED: 'code-block--wrapped'
15
+ // Feature Gate editor_support_code_block_wrapping:
16
+ CODEBLOCK_CONTENT_WRAPPER_FG: 'code-block-content-wrapper--fg',
17
+ CODEBLOCK_CONTENT_FG: 'code-content--fg',
18
+ CODEBLOCK_CONTENT_FG_WRAPPED: 'code-content--fg-wrapped',
19
+ CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped',
20
+ CODEBLOCK_LINE_NUMBER_GUTTER_FG: 'line-number-gutter--fg'
19
21
  };
20
22
  export const codeBlockSharedStyles = () => css`
21
- .${CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED}
22
- > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}
23
- > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}
23
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED}
24
+ > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG}
25
+ > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG} {
26
+ margin-right: ${"var(--ds-space-100, 8px)"};
27
+
28
+ code {
29
+ display: block;
30
+ word-break: break-word;
31
+ white-space: pre-wrap;
32
+ }
33
+ }
34
+
35
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG}
36
+ > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG} {
37
+ display: flex;
38
+ flex: 1;
39
+
24
40
  code {
25
- word-break: break-word;
26
- white-space: pre-wrap;
41
+ flex-grow: 1;
42
+
43
+ white-space: pre;
44
+ }
27
45
  }
28
46
 
29
47
  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
@@ -56,11 +74,6 @@ export const codeBlockSharedStyles = () => css`
56
74
  right: 0px;
57
75
  }
58
76
 
59
- .${CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED} {
60
- word-break: break-word;
61
- white-space: pre-wrap;
62
- }
63
-
64
77
  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
65
78
  background-color: ${`var(--ds-background-neutral, ${N20})`};
66
79
  display: flex;
@@ -98,6 +111,11 @@ export const codeBlockSharedStyles = () => css`
98
111
  overflow-y: hidden;
99
112
  }
100
113
 
114
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG} {
115
+ // relative position set so number gutter remains absolute on horizontal scroll.
116
+ position: relative;
117
+ }
118
+
101
119
  .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
102
120
  flex-shrink: 0;
103
121
  text-align: right;
@@ -121,11 +139,11 @@ export const codeBlockSharedStyles = () => css`
121
139
  }
122
140
  }
123
141
 
124
- .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP} {
142
+ .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG} {
125
143
  background-color: ${`var(--ds-background-neutral, ${N30})`};
126
- padding: ${"var(--ds-space-100, 8px)"};
127
144
  position: relative;
128
- width: 1rem;
145
+ width: 2rem;
146
+ flex-shrink: 0;
129
147
  }
130
148
 
131
149
  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
@@ -145,34 +163,28 @@ export const codeBlockSharedStyles = () => css`
145
163
  }
146
164
  }
147
165
 
148
- .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED} {
166
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG} {
149
167
  code {
150
- counter-reset: line var(--line-num, 0);
151
- word-break: break-word;
152
- white-space: pre-wrap;
168
+ tab-size: 4;
169
+ cursor: text;
170
+ color: ${`var(--ds-text, ${N800})`};
171
+ border-radius: ${"var(--ds-border-radius, 3px)"};
172
+ margin: ${"var(--ds-space-100, 8px)"};
173
+ font-size: ${relativeFontSizeToBase16(fontSize())};
174
+ line-height: 1.5rem;
153
175
  }
154
176
  }
155
177
 
156
- .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED} {
157
- counter-increment: line;
158
- line-height: 1rem;
178
+ .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET} {
159
179
  pointer-events: none;
160
-
161
- ::before {
162
- text-align: right;
163
- min-width: 1.5rem;
164
- display: block;
165
- height: 1rem;
166
- position: absolute;
167
- padding-right: ${"var(--ds-space-100, 8px)"};
168
- padding-left: ${"var(--ds-space-100, 8px)"};
169
- margin-top: ${"var(--ds-space-050, 4px)"};
170
- margin-right: ${"var(--ds-space-100, 8px)"};
171
- left: -0.5rem;
172
- color: ${`var(--ds-text-subtlest, ${N400})`};
173
- font-size: ${relativeFontSizeToBase16(fontSize())};
174
- content: counter(line);
175
- }
180
+ user-select: none;
181
+ width: 2rem;
182
+ left: 0;
183
+ position: absolute;
184
+ font-size: ${relativeFontSizeToBase16(fontSize())};
185
+ line-height: 1.5rem;
186
+ text-align: center;
187
+ color: ${"var(--ds-text-subtlest, #505F79)"};
176
188
  }
177
189
  }
178
190
  `;
package/dist/es2019/ui/DropList/index.js CHANGED
@@ -12,7 +12,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
12
12
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
13
13
  import Layer from '../Layer';
14
14
  const packageName = "@atlaskit/editor-common";
15
- const packageVersion = "87.7.0";
15
+ const packageVersion = "87.8.0";
16
16
  const halfFocusRing = 1;
17
17
  const dropOffset = '0, 8';
18
18
  class DropList extends Component {
package/dist/esm/monitoring/error.js CHANGED
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import { isFedRamp } from './environment';
8
8
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
9
9
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
10
- var packageVersion = "87.7.0";
10
+ var packageVersion = "87.8.0";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // TODO: Sanitise the URL instead of just removing it
package/dist/esm/react-node-view/index.js CHANGED
@@ -3,6 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
3
3
  import _createClass from "@babel/runtime/helpers/createClass";
4
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  import React from 'react';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
7
8
  import { createDispatch } from '../event-dispatcher';
8
9
  import { ErrorBoundary } from '../ui/ErrorBoundary';
@@ -121,11 +122,58 @@ var ReactNodeView = /*#__PURE__*/function () {
121
122
  }, {
122
123
  key: "_handleRef",
123
124
  value: function _handleRef(node) {
125
+ var _this4 = this;
124
126
  var contentDOM = this.contentDOMWrapper || this.contentDOM;
127
+ // @ts-ignore
128
+ var oldIgnoreMutation;
129
+ var selectionBookmark;
130
+ var parentOffset = 0;
131
+ var mutationsIgnored = false;
125
132
 
126
133
  // move the contentDOM node inside the inner reference after rendering
127
134
  if (node && contentDOM && !node.contains(contentDOM)) {
135
+ if (fg('platform_editor_react_18_prosemirror_sel_resync')) {
136
+ var _this$view$state$sele;
137
+ // @ts-ignore - ignoreMutation may not be declared
138
+ oldIgnoreMutation = this.ignoreMutation; // store ref to previous ignoreMutation
139
+
140
+ // ignore all mutations caused by ProseMirror's MutationObserver triggering
141
+ // after DOM change, except selection changes
142
+ // @ts-ignore ProseMirror adds selection type to MutationRecord
143
+ this.ignoreMutation = function (m) {
144
+ var isSelectionMutation = m.type === 'selection';
145
+ if (!isSelectionMutation) {
146
+ mutationsIgnored = true;
147
+ }
148
+ return !isSelectionMutation;
149
+ };
150
+
151
+ // capture document selection state before React DOM changes triggers ProseMirror selection change transaction
152
+ if (this.view.state.selection.visible) {
153
+ selectionBookmark = this.view.state.selection.getBookmark();
154
+ }
155
+
156
+ // ... and capture parent offset before DOM change
157
+ if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
158
+ var _this$view$state$sele2, _this$view$state$sele3;
159
+ parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
160
+ }
161
+ }
128
162
  node.appendChild(contentDOM);
163
+ if (fg('platform_editor_react_18_prosemirror_sel_resync')) {
164
+ requestAnimationFrame(function () {
165
+ // Reset ignoreMutation after frame ....
166
+ // @ts-ignore - this may not have been declared by implementing class
167
+ _this4.ignoreMutation = oldIgnoreMutation;
168
+
169
+ // only trigger selection re-sync if the selection is not at the start of the
170
+ // node, and DOM mutations were ignored
171
+ if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
172
+ // ... and dispatch expected selection state
173
+ _this4.view.dispatch(_this4.view.state.tr.setSelection(selectionBookmark.resolve(_this4.view.state.tr.doc)));
174
+ }
175
+ });
176
+ }
129
177
  }
130
178
  }
131
179
  }, {
@@ -141,7 +189,7 @@ var ReactNodeView = /*#__PURE__*/function () {
141
189
  }, {
142
190
  key: "update",
143
191
  value: function update(node, decorations, _innerDecorations) {
144
- var _this4 = this;
192
+ var _this5 = this;
145
193
  var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
146
194
  return true;
147
195
  };
@@ -164,7 +212,7 @@ var ReactNodeView = /*#__PURE__*/function () {
164
212
  }
165
213
  this.node = node;
166
214
  this.renderReactComponent(function () {
167
- return _this4.render(_this4.reactComponentProps, _this4.handleRef);
215
+ return _this5.render(_this5.reactComponentProps, _this5.handleRef);
168
216
  });
169
217
  return true;
170
218
  }
package/dist/esm/styles/shared/code-block.js CHANGED
@@ -14,15 +14,17 @@ export var CodeBlockSharedCssClassName = {
14
14
  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
15
15
  CODEBLOCK_CONTENT: 'code-content',
16
16
  DS_CODEBLOCK: '[data-ds--code--code-block]',
17
- CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
18
- CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
19
- CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped',
20
- CODEBLOCK_WRAPPED: 'code-block--wrapped'
17
+ // Feature Gate editor_support_code_block_wrapping:
18
+ CODEBLOCK_CONTENT_WRAPPER_FG: 'code-block-content-wrapper--fg',
19
+ CODEBLOCK_CONTENT_FG: 'code-content--fg',
20
+ CODEBLOCK_CONTENT_FG_WRAPPED: 'code-content--fg-wrapped',
21
+ CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped',
22
+ CODEBLOCK_LINE_NUMBER_GUTTER_FG: 'line-number-gutter--fg'
21
23
  };
22
24
  export var codeBlockSharedStyles = function codeBlockSharedStyles() {
23
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", "\n\t\t> .", "\n\t\t> .", "\n\t\tcode {\n\t\tword-break: break-word;\n\t\twhite-space: pre-wrap;\n\t}\n\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\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\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\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 1rem;\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\tcounter-reset: line var(--line-num, 0);\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcounter-increment: line;\n\t\t\tline-height: 1rem;\n\t\t\tpointer-events: none;\n\n\t\t\t::before {\n\t\t\t\ttext-align: right;\n\t\t\t\tmin-width: 1.5rem;\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tmargin-top: ", ";\n\t\t\t\tmargin-right: ", ";\n\t\t\t\tleft: -0.5rem;\n\t\t\t\tcolor: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tcontent: counter(line);\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
25
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", "\n\t\t> .", "\n\t\t> .", " {\n\t\tmargin-right: ", ";\n\n\t\tcode {\n\t\t\tdisplay: block;\n\t\t\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\t}\n\n\t.", "\n\t\t> .", " {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\n\t\tcode {\n\t\t\tflex-grow: 1;\n\n\t\t\twhite-space: pre;\n\t\t}\n\t}\n\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\t// relative position set so number gutter remains absolute on horizontal scroll.\n\t\t\tposition: relative;\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\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 2rem;\n\t\t\tflex-shrink: 0;\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\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\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t\twidth: 2rem;\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\tfont-size: ", ";\n\t\t\tline-height: 1.5rem;\n\t\t\ttext-align: center;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
24
26
  leftCoverWidth: "var(--ds-space-300, 24px)"
25
- }), "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(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED, "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()));
27
+ }), "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_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG, "var(--ds-background-neutral, ".concat(N30, ")"), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET, relativeFontSizeToBase16(fontSize()), "var(--ds-text-subtlest, #505F79)");
26
28
  };
27
29
 
28
30
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
package/dist/esm/ui/DropList/index.js CHANGED
@@ -20,7 +20,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
20
20
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
21
21
  import Layer from '../Layer';
22
22
  var packageName = "@atlaskit/editor-common";
23
- var packageVersion = "87.7.0";
23
+ var packageVersion = "87.8.0";
24
24
  var halfFocusRing = 1;
25
25
  var dropOffset = '0, 8';
26
26
  var DropList = /*#__PURE__*/function (_Component) {
package/dist/types/analytics/types/general-events.d.ts CHANGED
@@ -181,6 +181,7 @@ type CodeBlockWordWrapToggleAEP = TrackAEP<ACTION.TOGGLE_CODE_BLOCK_WRAP, ACTION
181
181
  platform: PLATFORMS;
182
182
  mode: MODE;
183
183
  wordWrapEnabled: boolean;
184
+ codeBlockNodeSize: number;
184
185
  }, undefined>;
185
186
  export type GeneralEventPayload<T = void> = AnnotateButtonAEP | AnnotationAEP | BrowserFreezePayload | ButtonFeedbackAEP | ButtonHelpAEP | ButtonUploadMediaAEP | ColorPickerAEP | DispatchedTransactionAEP | EditorPerfAEP | EditorRenderedAEP<T> | EditorStartAEP | EditorStopAEP | EditorTTIAEP | ExpandToggleAEP | FeedbackAEP | FullWidthModeAEP | HelpQuickInsertAEP | InputPerfSamlingAEP | InputPerfSamplingAvgAEP | PickerEmojiAEP | PickerImageAEP | ReactNodeViewRenderedAEP | RichMediaLayoutAEP | SelectionAEP | SlowInputAEP | TransactionMutatedAEP | UploadExternalFailedAEP | WithPluginStateCalledAEP | CodeBlockLanguageSelectedAEP | EditorContentRetrievalPerformedAEP | UfoSessionCompletePayloadAEP | MediaLinkTransformedAEP | TextLinkCodeMarkTransformedAEP | DedupeMarksTransformedAEP | IndentationMarksTransformedAEP | NodesMissingContentTransformedAEP | InvalidProsemirrorDocumentErrorAEP | DocumentProcessingErrorAEP | InvalidMediaContentTransformedAEP | HeadingAnchorLinkButtonAEP | CollabStepsTrackerPayloadAEP | CodeBlockWordWrapToggleAEP;
186
187
  export {};
package/dist/types/styles/shared/code-block.d.ts CHANGED
@@ -6,10 +6,11 @@ export declare const CodeBlockSharedCssClassName: {
6
6
  CODEBLOCK_LINE_NUMBER_GUTTER: string;
7
7
  CODEBLOCK_CONTENT: string;
8
8
  DS_CODEBLOCK: string;
9
- CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: string;
10
- CODEBLOCK_CONTENT_WRAPPED: string;
11
- CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: string;
12
- CODEBLOCK_WRAPPED: string;
9
+ CODEBLOCK_CONTENT_WRAPPER_FG: string;
10
+ CODEBLOCK_CONTENT_FG: string;
11
+ CODEBLOCK_CONTENT_FG_WRAPPED: string;
12
+ CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: string;
13
+ CODEBLOCK_LINE_NUMBER_GUTTER_FG: string;
13
14
  };
14
15
  export declare const codeBlockSharedStyles: () => import("@emotion/react").SerializedStyles;
15
16
  export declare const codeBlockInListSafariFix: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/analytics/types/general-events.d.ts CHANGED
@@ -181,6 +181,7 @@ type CodeBlockWordWrapToggleAEP = TrackAEP<ACTION.TOGGLE_CODE_BLOCK_WRAP, ACTION
181
181
  platform: PLATFORMS;
182
182
  mode: MODE;
183
183
  wordWrapEnabled: boolean;
184
+ codeBlockNodeSize: number;
184
185
  }, undefined>;
185
186
  export type GeneralEventPayload<T = void> = AnnotateButtonAEP | AnnotationAEP | BrowserFreezePayload | ButtonFeedbackAEP | ButtonHelpAEP | ButtonUploadMediaAEP | ColorPickerAEP | DispatchedTransactionAEP | EditorPerfAEP | EditorRenderedAEP<T> | EditorStartAEP | EditorStopAEP | EditorTTIAEP | ExpandToggleAEP | FeedbackAEP | FullWidthModeAEP | HelpQuickInsertAEP | InputPerfSamlingAEP | InputPerfSamplingAvgAEP | PickerEmojiAEP | PickerImageAEP | ReactNodeViewRenderedAEP | RichMediaLayoutAEP | SelectionAEP | SlowInputAEP | TransactionMutatedAEP | UploadExternalFailedAEP | WithPluginStateCalledAEP | CodeBlockLanguageSelectedAEP | EditorContentRetrievalPerformedAEP | UfoSessionCompletePayloadAEP | MediaLinkTransformedAEP | TextLinkCodeMarkTransformedAEP | DedupeMarksTransformedAEP | IndentationMarksTransformedAEP | NodesMissingContentTransformedAEP | InvalidProsemirrorDocumentErrorAEP | DocumentProcessingErrorAEP | InvalidMediaContentTransformedAEP | HeadingAnchorLinkButtonAEP | CollabStepsTrackerPayloadAEP | CodeBlockWordWrapToggleAEP;
186
187
  export {};
package/dist/types-ts4.5/styles/shared/code-block.d.ts CHANGED
@@ -6,10 +6,11 @@ export declare const CodeBlockSharedCssClassName: {
6
6
  CODEBLOCK_LINE_NUMBER_GUTTER: string;
7
7
  CODEBLOCK_CONTENT: string;
8
8
  DS_CODEBLOCK: string;
9
- CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: string;
10
- CODEBLOCK_CONTENT_WRAPPED: string;
11
- CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: string;
12
- CODEBLOCK_WRAPPED: string;
9
+ CODEBLOCK_CONTENT_WRAPPER_FG: string;
10
+ CODEBLOCK_CONTENT_FG: string;
11
+ CODEBLOCK_CONTENT_FG_WRAPPED: string;
12
+ CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: string;
13
+ CODEBLOCK_LINE_NUMBER_GUTTER_FG: string;
13
14
  };
14
15
  export declare const codeBlockSharedStyles: () => import("@emotion/react").SerializedStyles;
15
16
  export declare const codeBlockInListSafariFix: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "87.7.0",
3
+ "version": "87.8.0",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -100,7 +100,7 @@
100
100
  "dependencies": {
101
101
  "@atlaskit/activity-provider": "^2.4.0",
102
102
  "@atlaskit/adf-schema": "^40.8.1",
103
- "@atlaskit/adf-utils": "^19.7.0",
103
+ "@atlaskit/adf-utils": "^19.8.0",
104
104
  "@atlaskit/analytics-listeners": "^8.11.0",
105
105
  "@atlaskit/analytics-namespaced-context": "^6.11.0",
106
106
  "@atlaskit/analytics-next": "^10.1.0",
@@ -127,9 +127,9 @@
127
127
  "@atlaskit/media-file-preview": "^0.6.0",
128
128
  "@atlaskit/media-picker": "^66.4.0",
129
129
  "@atlaskit/media-ui": "^25.10.0",
130
- "@atlaskit/media-viewer": "48.6.17",
130
+ "@atlaskit/media-viewer": "48.7.0",
131
131
  "@atlaskit/mention": "^23.2.0",
132
- "@atlaskit/menu": "^2.11.0",
132
+ "@atlaskit/menu": "^2.12.0",
133
133
  "@atlaskit/platform-feature-flags": "^0.3.0",
134
134
  "@atlaskit/primitives": "^12.0.0",
135
135
  "@atlaskit/profilecard": "^19.17.0",
@@ -271,6 +271,9 @@
271
271
  },
272
272
  "cc_page_experiences_live_search_wysiwyg": {
273
273
  "type": "boolean"
274
+ },
275
+ "platform_editor_react_18_prosemirror_sel_resync": {
276
+ "type": "boolean"
274
277
  }
275
278
  }
276
279
  }