@atlaskit/editor-core 211.2.0 → 211.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 211.2.2
+
+### Patch Changes
+
+- [`5c1589424fcc4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c1589424fcc4) -
+  ED-29088 - Add nodesInViewport metric to proseMirrorRendered events.
+- Updated dependencies
+
+## 211.2.1
+
+### Patch Changes
+
+- [`255837cfba315`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/255837cfba315) -
+  Internal changes to how border radius is applied.
+- Updated dependencies
+
 ## 211.2.0
 
 ### Minor Changes

package/dist/cjs/create-editor/ReactEditorView.js

@@ -35,6 +35,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _useProviders = require("../composable-editor/hooks/useProviders");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
 var _getNodesCount = require("../utils/getNodesCount");
+var _getNodesVisibleInViewport = require("../utils/getNodesVisibleInViewport");
 var _isFullPage = require("../utils/is-full-page");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
 var _measureEnum = _interopRequireDefault(require("../utils/performance/measure-enum"));
@@ -475,6 +476,7 @@ function ReactEditorView(props) {
         var nodes = (0, _getNodesCount.getNodesCount)(viewRef.current.state.doc);
         var ttfb = (0, _navigation.getResponseEndTime)();
         var contextIdentifier = (_pluginInjectionAPI$c2 = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c2 === void 0 ? void 0 : _pluginInjectionAPI$c2.sharedState.currentState();
+        var nodesInViewport = (0, _expValEquals.expValEquals)('platform_editor_ttvc_nodes_in_viewport', 'isEnabled', true) ? (0, _getNodesVisibleInViewport.getNodesVisibleInViewport)(viewRef.current.dom) : {};
         dispatchAnalyticsEvent({
           action: _analytics.ACTION.PROSEMIRROR_RENDERED,
           actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
@@ -482,6 +484,7 @@ function ReactEditorView(props) {
             duration: duration,
             startTime: startTime,
             nodes: nodes,
+            nodesInViewport: nodesInViewport,
             ttfb: ttfb,
             severity: proseMirrorRenderedSeverity,
             objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,

package/dist/cjs/ui/Addon/Dropdown/styles.js

@@ -13,7 +13,7 @@ var dropdown = exports.dropdown = (0, _react.css)({
   flexDirection: 'column',
   background: "var(--ds-surface-overlay, white)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "var(--ds-border-radius, 3px)",
+  borderRadius: "var(--ds-radius-small, 3px)",
   boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   boxSizing: 'border-box',
   padding: "var(--ds-space-050, 4px)".concat(" 0")

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -59,7 +59,7 @@ var commentEditorStyles = (0, _react2.css)({
   border: "1px solid ".concat("var(--ds-border-input, #8590A2)"),
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "var(--ds-border-radius, 3px)",
+  borderRadius: "var(--ds-radius-small, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });

package/dist/cjs/ui/ChromeCollapsed/styles.js

@@ -16,7 +16,7 @@ var inputStyle = exports.inputStyle = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     border: "1px solid ".concat("var(--ds-border-input, ".concat(_editorSharedStyles.akEditorSubtleAccent, ")")),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     boxSizing: 'border-box',
     height: '40px',
     paddingLeft: "var(--ds-space-250, 20px)",

package/dist/cjs/ui/ContentStyles/code-bidi-warning.js

@@ -41,7 +41,7 @@ var codeBidiWarningStyles = exports.codeBidiWarningStyles = (0, _react.css)({
     color: "var(--ds-text-inverse, #FFFFFF)",
     overflowWrap: 'break-word',
     cursor: 'default',
-    borderRadius: "var(--ds-border-radius, 4px)",
+    borderRadius: "var(--ds-radius-small, 4px)",
     margin: "var(--ds-space-0, 0px)",
     padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
     position: 'fixed',

package/dist/cjs/ui/ContentStyles/layout.js

@@ -31,7 +31,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 // TODO handle responsive
 var layoutColumnStyles = function layoutColumnStyles() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), "var(--ds-border-radius, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), "var(--ds-radius-small, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth);
 };
 var layoutSectionStyles = function layoutSectionStyles() {

package/dist/cjs/ui/EditorContentContainer/styles/codeBidiWarningStyles.js

@@ -41,7 +41,7 @@ var codeBidiWarningStyles = exports.codeBidiWarningStyles = (0, _react.css)({
     color: "var(--ds-text-inverse, #FFFFFF)",
     overflowWrap: 'break-word',
     cursor: 'default',
-    borderRadius: "var(--ds-border-radius, 4px)",
+    borderRadius: "var(--ds-radius-small, 4px)",
     margin: "var(--ds-space-0, 0px)",
     padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
     position: 'fixed',

package/dist/cjs/ui/EditorContentContainer/styles/codeBlockStyles.js

@@ -58,7 +58,7 @@ var codeBlockStyles = exports.codeBlockStyles = (0, _react.css)({
   }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'relative',
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
     margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
@@ -90,7 +90,7 @@ var codeBlockStyles = exports.codeBlockStyles = (0, _react.css)({
     position: 'relative',
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     display: 'flex',
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     width: '100%',
     counterReset: 'line',
     overflowX: 'auto',
@@ -122,7 +122,7 @@ var codeBlockStyles = exports.codeBlockStyles = (0, _react.css)({
       tabSize: 4,
       cursor: 'text',
       color: "var(--ds-text, #172B4D)",
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       margin: "var(--ds-space-100, 8px)",
       // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       fontSize: fontSize14px,

package/dist/cjs/ui/EditorContentContainer/styles/codeMarkStyles.js

@@ -16,7 +16,7 @@ var codeMarkStyles = exports.codeMarkStyles = (0, _react.css)({
     display: 'inline',
     padding: '2px 0.5ch',
     backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, #091E420F)", ")"),
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     borderStyle: 'none',
     boxDecorationBreak: 'clone',
     color: "var(--ds-text, #172B4D)",

package/dist/cjs/ui/EditorContentContainer/styles/layout.js

@@ -51,7 +51,7 @@ var layoutColumnStylesAdvanced = exports.layoutColumnStylesAdvanced = (0, _react
     '::before': {
       width: 'calc(100% - 8px)',
       left: 4,
-      borderRadius: "var(--ds-border-radius, 3px)"
+      borderRadius: "var(--ds-radius-small, 3px)"
     }
   }])
 });

package/dist/cjs/ui/EditorContentContainer/styles/panelStyles.js

@@ -28,7 +28,7 @@ var panelStyles = exports.panelStyles = (0, _react.css)({
       },
       // panelSharedStyles()
       // panelSharedStylesWithoutPrefix()
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       margin: "0.75rem 0 0",
       paddingTop: "var(--ds-space-100, 8px)",
       paddingRight: "var(--ds-space-200, 16px)",

package/dist/cjs/utils/getNodesVisibleInViewport.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNodeVisible = exports.getNodesVisibleInViewport = void 0;
+/**
+ * Check if a DOM element is visible within the viewport. We deem a node visible if the top left corner coordinate is within the viewport.
+ * This may not look visible, and may include a node that looks below the fold – but it's more than 0 pixels within the viewport.
+ */
+var isNodeVisible = exports.isNodeVisible = function isNodeVisible(node) {
+  var rect = node.getBoundingClientRect();
+  var isVisible = rect.x >= 0 && rect.x < window.innerWidth && rect.y >= 0 && rect.y < window.innerHeight;
+  return isVisible;
+};
+
+/**
+ * Get visible nodes in viewport by looping through the first N nodes (MAX_NODES_TO_COUNT)
+ * in the editor DOM and counting the node types that are visible.
+ */
+var getNodesVisibleInViewport = exports.getNodesVisibleInViewport = function getNodesVisibleInViewport(editorDom) {
+  var MAX_NODES_TO_COUNT = 200;
+  var pmNodesList = editorDom.querySelectorAll('[data-prosemirror-node-name]');
+  var nodesTypeCounter = {};
+  for (var i = 0; i < Math.min(MAX_NODES_TO_COUNT, pmNodesList.length); i++) {
+    var node = pmNodesList[i];
+    var type = node.getAttribute('data-prosemirror-node-name');
+
+    // No valid prosemirrornode type, skip.
+    if (!type) {
+      continue;
+    }
+    var isVisible = isNodeVisible(node);
+
+    // Not a visible node, end counting.
+    if (!isVisible) {
+      break;
+    }
+    nodesTypeCounter[type] = (nodesTypeCounter[type] || 0) + 1;
+  }
+  return nodesTypeCounter;
+};

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "0.0.0-development";
+var version = exports.version = "211.2.1";

package/dist/es2019/create-editor/ReactEditorView.js

@@ -23,6 +23,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import { getNodesCount } from '../utils/getNodesCount';
+import { getNodesVisibleInViewport } from '../utils/getNodesVisibleInViewport';
 import { isFullPage } from '../utils/is-full-page';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import measurements from '../utils/performance/measure-enum';
@@ -441,6 +442,7 @@ export function ReactEditorView(props) {
         const nodes = getNodesCount(viewRef.current.state.doc);
         const ttfb = getResponseEndTime();
         const contextIdentifier = (_pluginInjectionAPI$c4 = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c4 === void 0 ? void 0 : _pluginInjectionAPI$c4.sharedState.currentState();
+        const nodesInViewport = expValEquals('platform_editor_ttvc_nodes_in_viewport', 'isEnabled', true) ? getNodesVisibleInViewport(viewRef.current.dom) : {};
         dispatchAnalyticsEvent({
           action: ACTION.PROSEMIRROR_RENDERED,
           actionSubject: ACTION_SUBJECT.EDITOR,
@@ -448,6 +450,7 @@ export function ReactEditorView(props) {
             duration,
             startTime,
             nodes,
+            nodesInViewport,
             ttfb,
             severity: proseMirrorRenderedSeverity,
             objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,

package/dist/es2019/ui/Addon/Dropdown/styles.js

@@ -6,7 +6,7 @@ export const dropdown = css({
   flexDirection: 'column',
   background: "var(--ds-surface-overlay, white)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "var(--ds-border-radius, 3px)",
+  borderRadius: "var(--ds-radius-small, 3px)",
   boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   boxSizing: 'border-box',
   padding: `${"var(--ds-space-050, 4px)"} 0`

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -47,7 +47,7 @@ const commentEditorStyles = css({
   border: `1px solid ${"var(--ds-border-input, #8590A2)"}`,
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "var(--ds-border-radius, 3px)",
+  borderRadius: "var(--ds-radius-small, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });

package/dist/es2019/ui/ChromeCollapsed/styles.js

@@ -9,7 +9,7 @@ export const inputStyle = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     border: `1px solid ${`var(--ds-border-input, ${akEditorSubtleAccent})`}`,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     boxSizing: 'border-box',
     height: '40px',
     paddingLeft: "var(--ds-space-250, 20px)",

package/dist/es2019/ui/ContentStyles/code-bidi-warning.js

@@ -34,7 +34,7 @@ export const codeBidiWarningStyles = css({
     color: "var(--ds-text-inverse, #FFFFFF)",
     overflowWrap: 'break-word',
     cursor: 'default',
-    borderRadius: "var(--ds-border-radius, 4px)",
+    borderRadius: "var(--ds-radius-small, 4px)",
     margin: "var(--ds-space-0, 0px)",
     padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
     position: 'fixed',

package/dist/es2019/ui/ContentStyles/layout.js

@@ -66,7 +66,7 @@ css`
 					::before {
 						width: calc(100% - 8px);
 						left: 4px;
-						border-radius: ${"var(--ds-border-radius, 3px)"};
+						border-radius: ${"var(--ds-radius-small, 3px)"};
 					}
 				}
 			` :

package/dist/es2019/ui/EditorContentContainer/styles/codeBidiWarningStyles.js

@@ -34,7 +34,7 @@ export const codeBidiWarningStyles = css({
     color: "var(--ds-text-inverse, #FFFFFF)",
     overflowWrap: 'break-word',
     cursor: 'default',
-    borderRadius: "var(--ds-border-radius, 4px)",
+    borderRadius: "var(--ds-radius-small, 4px)",
     margin: "var(--ds-space-0, 0px)",
     padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
     position: 'fixed',

package/dist/es2019/ui/EditorContentContainer/styles/codeBlockStyles.js

@@ -55,7 +55,7 @@ export const codeBlockStyles = css({
     [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`]: {
       position: 'relative',
       backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
       margin: `${blockNodesVerticalMargin} 0 0 0`,
       fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
@@ -92,7 +92,7 @@ export const codeBlockStyles = css({
         position: 'relative',
         backgroundColor: "var(--ds-background-neutral, #091E420F)",
         display: 'flex',
-        borderRadius: "var(--ds-border-radius, 3px)",
+        borderRadius: "var(--ds-radius-small, 3px)",
         width: '100%',
         counterReset: 'line',
         overflowX: 'auto',
@@ -149,7 +149,7 @@ export const codeBlockStyles = css({
           tabSize: 4,
           cursor: 'text',
           color: "var(--ds-text, #172B4D)",
-          borderRadius: "var(--ds-border-radius, 3px)",
+          borderRadius: "var(--ds-radius-small, 3px)",
           margin: "var(--ds-space-100, 8px)",
           // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
           fontSize: fontSize14px,

package/dist/es2019/ui/EditorContentContainer/styles/codeMarkStyles.js

@@ -9,7 +9,7 @@ export const codeMarkStyles = css({
     display: 'inline',
     padding: '2px 0.5ch',
     backgroundColor: `var(--ds--code--bg-color,${"var(--ds-background-neutral, #091E420F)"})`,
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     borderStyle: 'none',
     boxDecorationBreak: 'clone',
     color: "var(--ds-text, #172B4D)",

package/dist/es2019/ui/EditorContentContainer/styles/layout.js

@@ -45,7 +45,7 @@ export const layoutColumnStylesAdvanced = css({
       '::before': {
         width: 'calc(100% - 8px)',
         left: 4,
-        borderRadius: "var(--ds-border-radius, 3px)"
+        borderRadius: "var(--ds-radius-small, 3px)"
       }
     }]
   }

package/dist/es2019/ui/EditorContentContainer/styles/panelStyles.js

@@ -21,7 +21,7 @@ export const panelStyles = css({
       },
       // panelSharedStyles()
       // panelSharedStylesWithoutPrefix()
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       margin: `0.75rem 0 0`,
       paddingTop: "var(--ds-space-100, 8px)",
       paddingRight: "var(--ds-space-200, 16px)",

package/dist/es2019/utils/getNodesVisibleInViewport.js

@@ -0,0 +1,36 @@
+/**
+ * Check if a DOM element is visible within the viewport. We deem a node visible if the top left corner coordinate is within the viewport.
+ * This may not look visible, and may include a node that looks below the fold – but it's more than 0 pixels within the viewport.
+ */
+export const isNodeVisible = node => {
+  const rect = node.getBoundingClientRect();
+  const isVisible = rect.x >= 0 && rect.x < window.innerWidth && rect.y >= 0 && rect.y < window.innerHeight;
+  return isVisible;
+};
+
+/**
+ * Get visible nodes in viewport by looping through the first N nodes (MAX_NODES_TO_COUNT)
+ * in the editor DOM and counting the node types that are visible.
+ */
+export const getNodesVisibleInViewport = editorDom => {
+  const MAX_NODES_TO_COUNT = 200;
+  const pmNodesList = editorDom.querySelectorAll('[data-prosemirror-node-name]');
+  const nodesTypeCounter = {};
+  for (let i = 0; i < Math.min(MAX_NODES_TO_COUNT, pmNodesList.length); i++) {
+    const node = pmNodesList[i];
+    const type = node.getAttribute('data-prosemirror-node-name');
+
+    // No valid prosemirrornode type, skip.
+    if (!type) {
+      continue;
+    }
+    const isVisible = isNodeVisible(node);
+
+    // Not a visible node, end counting.
+    if (!isVisible) {
+      break;
+    }
+    nodesTypeCounter[type] = (nodesTypeCounter[type] || 0) + 1;
+  }
+  return nodesTypeCounter;
+};

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "0.0.0-development";
+export const version = "211.2.1";

package/dist/esm/create-editor/ReactEditorView.js

@@ -31,6 +31,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import { getNodesCount } from '../utils/getNodesCount';
+import { getNodesVisibleInViewport } from '../utils/getNodesVisibleInViewport';
 import { isFullPage } from '../utils/is-full-page';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import measurements from '../utils/performance/measure-enum';
@@ -465,6 +466,7 @@ export function ReactEditorView(props) {
         var nodes = getNodesCount(viewRef.current.state.doc);
         var ttfb = getResponseEndTime();
         var contextIdentifier = (_pluginInjectionAPI$c2 = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c2 === void 0 ? void 0 : _pluginInjectionAPI$c2.sharedState.currentState();
+        var nodesInViewport = expValEquals('platform_editor_ttvc_nodes_in_viewport', 'isEnabled', true) ? getNodesVisibleInViewport(viewRef.current.dom) : {};
         dispatchAnalyticsEvent({
           action: ACTION.PROSEMIRROR_RENDERED,
           actionSubject: ACTION_SUBJECT.EDITOR,
@@ -472,6 +474,7 @@ export function ReactEditorView(props) {
             duration: duration,
             startTime: startTime,
             nodes: nodes,
+            nodesInViewport: nodesInViewport,
             ttfb: ttfb,
             severity: proseMirrorRenderedSeverity,
             objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,

package/dist/esm/ui/Addon/Dropdown/styles.js

@@ -6,7 +6,7 @@ export var dropdown = css({
   flexDirection: 'column',
   background: "var(--ds-surface-overlay, white)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "var(--ds-border-radius, 3px)",
+  borderRadius: "var(--ds-radius-small, 3px)",
   boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   boxSizing: 'border-box',
   padding: "var(--ds-space-050, 4px)".concat(" 0")

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -51,7 +51,7 @@ var commentEditorStyles = css({
   border: "1px solid ".concat("var(--ds-border-input, #8590A2)"),
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "var(--ds-border-radius, 3px)",
+  borderRadius: "var(--ds-radius-small, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });

package/dist/esm/ui/ChromeCollapsed/styles.js

@@ -9,7 +9,7 @@ export var inputStyle = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     border: "1px solid ".concat("var(--ds-border-input, ".concat(akEditorSubtleAccent, ")")),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     boxSizing: 'border-box',
     height: '40px',
     paddingLeft: "var(--ds-space-250, 20px)",

package/dist/esm/ui/ContentStyles/code-bidi-warning.js

@@ -34,7 +34,7 @@ export var codeBidiWarningStyles = css({
     color: "var(--ds-text-inverse, #FFFFFF)",
     overflowWrap: 'break-word',
     cursor: 'default',
-    borderRadius: "var(--ds-border-radius, 4px)",
+    borderRadius: "var(--ds-radius-small, 4px)",
     margin: "var(--ds-space-0, 0px)",
     padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
     position: 'fixed',

package/dist/esm/ui/ContentStyles/layout.js

@@ -25,7 +25,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 // TODO handle responsive
 var layoutColumnStyles = function layoutColumnStyles() {
   return editorExperiment('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), "var(--ds-border-radius, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), "var(--ds-radius-small, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth);
 };
 var layoutSectionStyles = function layoutSectionStyles() {

package/dist/esm/ui/EditorContentContainer/styles/codeBidiWarningStyles.js

@@ -34,7 +34,7 @@ export var codeBidiWarningStyles = css({
     color: "var(--ds-text-inverse, #FFFFFF)",
     overflowWrap: 'break-word',
     cursor: 'default',
-    borderRadius: "var(--ds-border-radius, 4px)",
+    borderRadius: "var(--ds-radius-small, 4px)",
     margin: "var(--ds-space-0, 0px)",
     padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
     position: 'fixed',

package/dist/esm/ui/EditorContentContainer/styles/codeBlockStyles.js

@@ -50,7 +50,7 @@ export var codeBlockStyles = css({
   }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
     margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
@@ -82,7 +82,7 @@ export var codeBlockStyles = css({
     position: 'relative',
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     display: 'flex',
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     width: '100%',
     counterReset: 'line',
     overflowX: 'auto',
@@ -114,7 +114,7 @@ export var codeBlockStyles = css({
       tabSize: 4,
       cursor: 'text',
       color: "var(--ds-text, #172B4D)",
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       margin: "var(--ds-space-100, 8px)",
       // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       fontSize: fontSize14px,

package/dist/esm/ui/EditorContentContainer/styles/codeMarkStyles.js

@@ -9,7 +9,7 @@ export var codeMarkStyles = css({
     display: 'inline',
     padding: '2px 0.5ch',
     backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, #091E420F)", ")"),
-    borderRadius: "var(--ds-border-radius, 3px)",
+    borderRadius: "var(--ds-radius-small, 3px)",
     borderStyle: 'none',
     boxDecorationBreak: 'clone',
     color: "var(--ds-text, #172B4D)",

package/dist/esm/ui/EditorContentContainer/styles/layout.js

@@ -43,7 +43,7 @@ export var layoutColumnStylesAdvanced = css({
     '::before': {
       width: 'calc(100% - 8px)',
       left: 4,
-      borderRadius: "var(--ds-border-radius, 3px)"
+      borderRadius: "var(--ds-radius-small, 3px)"
     }
   }])
 });

package/dist/esm/ui/EditorContentContainer/styles/panelStyles.js

@@ -21,7 +21,7 @@ export var panelStyles = css({
       },
       // panelSharedStyles()
       // panelSharedStylesWithoutPrefix()
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       margin: "0.75rem 0 0",
       paddingTop: "var(--ds-space-100, 8px)",
       paddingRight: "var(--ds-space-200, 16px)",

package/dist/esm/utils/getNodesVisibleInViewport.js

@@ -0,0 +1,36 @@
+/**
+ * Check if a DOM element is visible within the viewport. We deem a node visible if the top left corner coordinate is within the viewport.
+ * This may not look visible, and may include a node that looks below the fold – but it's more than 0 pixels within the viewport.
+ */
+export var isNodeVisible = function isNodeVisible(node) {
+  var rect = node.getBoundingClientRect();
+  var isVisible = rect.x >= 0 && rect.x < window.innerWidth && rect.y >= 0 && rect.y < window.innerHeight;
+  return isVisible;
+};
+
+/**
+ * Get visible nodes in viewport by looping through the first N nodes (MAX_NODES_TO_COUNT)
+ * in the editor DOM and counting the node types that are visible.
+ */
+export var getNodesVisibleInViewport = function getNodesVisibleInViewport(editorDom) {
+  var MAX_NODES_TO_COUNT = 200;
+  var pmNodesList = editorDom.querySelectorAll('[data-prosemirror-node-name]');
+  var nodesTypeCounter = {};
+  for (var i = 0; i < Math.min(MAX_NODES_TO_COUNT, pmNodesList.length); i++) {
+    var node = pmNodesList[i];
+    var type = node.getAttribute('data-prosemirror-node-name');
+
+    // No valid prosemirrornode type, skip.
+    if (!type) {
+      continue;
+    }
+    var isVisible = isNodeVisible(node);
+
+    // Not a visible node, end counting.
+    if (!isVisible) {
+      break;
+    }
+    nodesTypeCounter[type] = (nodesTypeCounter[type] || 0) + 1;
+  }
+  return nodesTypeCounter;
+};

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "0.0.0-development";
+export var version = "211.2.1";

package/dist/types/create-editor/ReactEditorView.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { type WithIntlProps } from 'react-intl-next';
+import type { WrappedComponentProps, WithIntlProps } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';

package/dist/types/utils/getNodesVisibleInViewport.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Check if a DOM element is visible within the viewport. We deem a node visible if the top left corner coordinate is within the viewport.
+ * This may not look visible, and may include a node that looks below the fold – but it's more than 0 pixels within the viewport.
+ */
+export declare const isNodeVisible: (node: Element) => boolean;
+/**
+ * Get visible nodes in viewport by looping through the first N nodes (MAX_NODES_TO_COUNT)
+ * in the editor DOM and counting the node types that are visible.
+ */
+export declare const getNodesVisibleInViewport: (editorDom: Element) => Record<string, number>;

package/dist/types-ts4.5/create-editor/ReactEditorView.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { type WithIntlProps } from 'react-intl-next';
+import type { WrappedComponentProps, WithIntlProps } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';

package/dist/types-ts4.5/utils/getNodesVisibleInViewport.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Check if a DOM element is visible within the viewport. We deem a node visible if the top left corner coordinate is within the viewport.
+ * This may not look visible, and may include a node that looks below the fold – but it's more than 0 pixels within the viewport.
+ */
+export declare const isNodeVisible: (node: Element) => boolean;
+/**
+ * Get visible nodes in viewport by looping through the first N nodes (MAX_NODES_TO_COUNT)
+ * in the editor DOM and counting the node types that are visible.
+ */
+export declare const getNodesVisibleInViewport: (editorDom: Element) => Record<string, number>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "211.2.0",
+	"version": "211.2.2",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -63,7 +63,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/react-ufo": "^4.5.0",
 		"@atlaskit/task-decision": "^19.2.0",
-		"@atlaskit/tmp-editor-statsig": "^12.2.0",
+		"@atlaskit/tmp-editor-statsig": "^12.4.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.1.0",
+		"@atlaskit/editor-common": "^108.2.0",
 		"@atlaskit/link-provider": "^3.7.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -104,9 +104,9 @@
 		"@atlaskit/media-test-helpers": "^39.0.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/primitives": "^14.12.0",
-		"@atlaskit/renderer": "^121.0.0",
+		"@atlaskit/renderer": "^121.1.0",
 		"@atlaskit/section-message": "^8.7.0",
-		"@atlaskit/smart-card": "^40.17.0",
+		"@atlaskit/smart-card": "^40.18.0",
 		"@atlaskit/synchrony-test-helpers": "workspace:^",
 		"@atlaskit/toggle": "^15.1.0",
 		"@atlaskit/util-data-test": "^18.1.0",
@@ -520,6 +520,15 @@
 		"platform_editor_adf_with_localid": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_editor_resolve_hyperlinks_CONFLUENCE": {
+			"type": "boolean"
+		},
+		"platform_editor_resolve_hyperlinks_JIRA": {
+			"type": "boolean"
+		},
+		"platform_editor_resolve_hyperlinks_killswitch": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {