@atlaskit/editor-core 211.2.1 → 211.2.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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 = "211.2.0";
+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/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 = "211.2.0";
+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/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 = "211.2.0";
+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.1",
+	"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": {