@atlaskit/editor-plugin-ufo 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @atlaskit/editor-plugin-ufo
+
+## 1.0.0
+
+### Major Changes
+
+- [#178022](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/178022)
+  [`34c30d3598c59`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/34c30d3598c59) -
+  [ED-25936] Editor Plugin to abort UFO TTVC on user interaction

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1 @@
+# Editor plugin ufo

package/afm-cc/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../"
+    },
+    "include": [
+        "../src/**/*.ts",
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*",
+        "../src/**/examples.*"
+    ],
+    "references": [
+        {
+            "path": "../../editor-common/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
+        }
+    ]
+}

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "../tsconfig",
+	"compilerOptions": {
+		"target": "es5",
+		"paths": {}
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	]
+}

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ufoPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _ufoPlugin.ufoPlugin;
+  }
+});
+var _ufoPlugin = require("./ufoPlugin");

package/dist/cjs/pm-plugins/disableTTVCOnFirstUserInteraction.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disableTTVCOnFirstUserInteraction = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _vc = require("@atlaskit/react-ufo/vc");
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
+function bind(target, event, controller, listener) {
+  // Safe check for rare cases where window doesn't exist
+  if (!target || typeof target.addEventListener !== 'function') {
+    return function () {};
+  }
+  var options = {
+    capture: true,
+    passive: true,
+    once: true,
+    signal: controller.signal
+  };
+  target.addEventListener(event, listener, options);
+  return function unbind() {
+    target.removeEventListener(event, listener, options);
+  };
+}
+var AbortEvent = ['wheel', 'keydown', 'mousedown', 'pointerdown', 'pointerup', 'touchend', 'scroll', 'mouseover'];
+var ttvcAbort = function ttvcAbort() {
+  var vc = (0, _vc.getVCObserver)();
+  if (!vc ||
+  // For reasons that goes beyond my understand,
+  // the type is not properly set.
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+  // @ts-expect-error
+  typeof vc.abortCalculation !== 'function') {
+    return;
+  }
+
+  // For reasons that goes beyond my understand,
+  // the type is not properly set.
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+  // @ts-expect-error
+  vc.abortCalculation();
+};
+var disableTTVCOnFirstUserInteraction = exports.disableTTVCOnFirstUserInteraction = function disableTTVCOnFirstUserInteraction() {
+  var unbindCallbacks = new Set();
+  var controller = new AbortController();
+  var unbindFirstInteractionEvents = function unbindFirstInteractionEvents() {
+    controller.abort();
+    unbindCallbacks.forEach(function (cb) {
+      cb();
+    });
+    unbindCallbacks.clear();
+  };
+  return new _safePlugin.SafePlugin({
+    view: function view(_view) {
+      if (!_view || !_view.dom) {
+        return {};
+      }
+      var dom = _view.dom;
+      for (var _i = 0, _AbortEvent = AbortEvent; _i < _AbortEvent.length; _i++) {
+        var abortEventName = _AbortEvent[_i];
+        unbindCallbacks.add(bind(dom, abortEventName, controller, function () {
+          ttvcAbort();
+          unbindFirstInteractionEvents();
+        }));
+      }
+      return {
+        destroy: function destroy() {
+          unbindFirstInteractionEvents();
+        }
+      };
+    }
+  });
+};

package/dist/cjs/ufoPlugin.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ufoPlugin = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _disableTTVCOnFirstUserInteraction = require("./pm-plugins/disableTTVCOnFirstUserInteraction");
+var ufoPlugin = exports.ufoPlugin = function ufoPlugin() {
+  return {
+    name: 'ufo',
+    pmPlugins: function pmPlugins() {
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_abort_ttvc_on_user_interaction')) {
+        return [];
+      }
+      return [{
+        name: 'disableTTVCOnFirstUserInteraction',
+        plugin: _disableTTVCOnFirstUserInteraction.disableTTVCOnFirstUserInteraction
+      }];
+    }
+  };
+};

package/dist/cjs/ufoPluginType.js

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

package/dist/es2019/index.js

@@ -0,0 +1,3 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+export { ufoPlugin } from './ufoPlugin';

package/dist/es2019/pm-plugins/disableTTVCOnFirstUserInteraction.js

@@ -0,0 +1,69 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getVCObserver } from '@atlaskit/react-ufo/vc';
+function bind(target, event, controller, listener) {
+  // Safe check for rare cases where window doesn't exist
+  if (!target || typeof target.addEventListener !== 'function') {
+    return () => {};
+  }
+  const options = {
+    capture: true,
+    passive: true,
+    once: true,
+    signal: controller.signal
+  };
+  target.addEventListener(event, listener, options);
+  return function unbind() {
+    target.removeEventListener(event, listener, options);
+  };
+}
+const AbortEvent = ['wheel', 'keydown', 'mousedown', 'pointerdown', 'pointerup', 'touchend', 'scroll', 'mouseover'];
+const ttvcAbort = () => {
+  const vc = getVCObserver();
+  if (!vc ||
+  // For reasons that goes beyond my understand,
+  // the type is not properly set.
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+  // @ts-expect-error
+  typeof vc.abortCalculation !== 'function') {
+    return;
+  }
+
+  // For reasons that goes beyond my understand,
+  // the type is not properly set.
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+  // @ts-expect-error
+  vc.abortCalculation();
+};
+export const disableTTVCOnFirstUserInteraction = () => {
+  const unbindCallbacks = new Set();
+  const controller = new AbortController();
+  const unbindFirstInteractionEvents = () => {
+    controller.abort();
+    unbindCallbacks.forEach(cb => {
+      cb();
+    });
+    unbindCallbacks.clear();
+  };
+  return new SafePlugin({
+    view(view) {
+      if (!view || !view.dom) {
+        return {};
+      }
+      const {
+        dom
+      } = view;
+      for (let abortEventName of AbortEvent) {
+        unbindCallbacks.add(bind(dom, abortEventName, controller, () => {
+          ttvcAbort();
+          unbindFirstInteractionEvents();
+        }));
+      }
+      return {
+        destroy: () => {
+          unbindFirstInteractionEvents();
+        }
+      };
+    }
+  });
+};

package/dist/es2019/ufoPlugin.js

@@ -0,0 +1,14 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { disableTTVCOnFirstUserInteraction } from './pm-plugins/disableTTVCOnFirstUserInteraction';
+export const ufoPlugin = () => ({
+  name: 'ufo',
+  pmPlugins() {
+    if (!fg('platform_editor_abort_ttvc_on_user_interaction')) {
+      return [];
+    }
+    return [{
+      name: 'disableTTVCOnFirstUserInteraction',
+      plugin: disableTTVCOnFirstUserInteraction
+    }];
+  }
+});

package/dist/es2019/ufoPluginType.js

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

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+export { ufoPlugin } from './ufoPlugin';

package/dist/esm/pm-plugins/disableTTVCOnFirstUserInteraction.js

@@ -0,0 +1,68 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getVCObserver } from '@atlaskit/react-ufo/vc';
+function bind(target, event, controller, listener) {
+  // Safe check for rare cases where window doesn't exist
+  if (!target || typeof target.addEventListener !== 'function') {
+    return function () {};
+  }
+  var options = {
+    capture: true,
+    passive: true,
+    once: true,
+    signal: controller.signal
+  };
+  target.addEventListener(event, listener, options);
+  return function unbind() {
+    target.removeEventListener(event, listener, options);
+  };
+}
+var AbortEvent = ['wheel', 'keydown', 'mousedown', 'pointerdown', 'pointerup', 'touchend', 'scroll', 'mouseover'];
+var ttvcAbort = function ttvcAbort() {
+  var vc = getVCObserver();
+  if (!vc ||
+  // For reasons that goes beyond my understand,
+  // the type is not properly set.
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+  // @ts-expect-error
+  typeof vc.abortCalculation !== 'function') {
+    return;
+  }
+
+  // For reasons that goes beyond my understand,
+  // the type is not properly set.
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+  // @ts-expect-error
+  vc.abortCalculation();
+};
+export var disableTTVCOnFirstUserInteraction = function disableTTVCOnFirstUserInteraction() {
+  var unbindCallbacks = new Set();
+  var controller = new AbortController();
+  var unbindFirstInteractionEvents = function unbindFirstInteractionEvents() {
+    controller.abort();
+    unbindCallbacks.forEach(function (cb) {
+      cb();
+    });
+    unbindCallbacks.clear();
+  };
+  return new SafePlugin({
+    view: function view(_view) {
+      if (!_view || !_view.dom) {
+        return {};
+      }
+      var dom = _view.dom;
+      for (var _i = 0, _AbortEvent = AbortEvent; _i < _AbortEvent.length; _i++) {
+        var abortEventName = _AbortEvent[_i];
+        unbindCallbacks.add(bind(dom, abortEventName, controller, function () {
+          ttvcAbort();
+          unbindFirstInteractionEvents();
+        }));
+      }
+      return {
+        destroy: function destroy() {
+          unbindFirstInteractionEvents();
+        }
+      };
+    }
+  });
+};

package/dist/esm/ufoPlugin.js

@@ -0,0 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { disableTTVCOnFirstUserInteraction } from './pm-plugins/disableTTVCOnFirstUserInteraction';
+export var ufoPlugin = function ufoPlugin() {
+  return {
+    name: 'ufo',
+    pmPlugins: function pmPlugins() {
+      if (!fg('platform_editor_abort_ttvc_on_user_interaction')) {
+        return [];
+      }
+      return [{
+        name: 'disableTTVCOnFirstUserInteraction',
+        plugin: disableTTVCOnFirstUserInteraction
+      }];
+    }
+  };
+};

package/dist/esm/ufoPluginType.js

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

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { ufoPlugin } from './ufoPlugin';
+export type { UfoPlugin } from './ufoPluginType';

package/dist/types/pm-plugins/disableTTVCOnFirstUserInteraction.d.ts

@@ -0,0 +1,2 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const disableTTVCOnFirstUserInteraction: () => SafePlugin<any>;

package/dist/types/ufoPlugin.d.ts

@@ -0,0 +1,2 @@
+import type { UfoPlugin } from './ufoPluginType';
+export declare const ufoPlugin: UfoPlugin;

package/dist/types/ufoPluginType.d.ts

@@ -0,0 +1,2 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type UfoPlugin = NextEditorPlugin<'ufo', {}>;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,2 @@
+export { ufoPlugin } from './ufoPlugin';
+export type { UfoPlugin } from './ufoPluginType';

package/dist/types-ts4.5/pm-plugins/disableTTVCOnFirstUserInteraction.d.ts

@@ -0,0 +1,2 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const disableTTVCOnFirstUserInteraction: () => SafePlugin<any>;

package/dist/types-ts4.5/ufoPlugin.d.ts

@@ -0,0 +1,2 @@
+import type { UfoPlugin } from './ufoPluginType';
+export declare const ufoPlugin: UfoPlugin;

package/dist/types-ts4.5/ufoPluginType.d.ts

@@ -0,0 +1,2 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+export type UfoPlugin = NextEditorPlugin<'ufo', {}>;

package/package.json

@@ -0,0 +1,88 @@
+{
+	"name": "@atlaskit/editor-plugin-ufo",
+	"version": "1.0.0",
+	"description": "Ufo plugin for @atlaskit/editor-core",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"atlassian": {
+		"team": "Editor: Lego",
+		"releaseModel": "continuous",
+		"singleton": true,
+		"runReact18": true
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": false,
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/editor-common": "^96.5.0",
+		"@atlaskit/editor-prosemirror": "6.2.1",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/react-ufo": "^2.5.0",
+		"@babel/runtime": "^7.0.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+	},
+	"devDependencies": {
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"code-structure": [
+				"editor-plugin"
+			],
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": "no-deprecated-imports",
+			"styling": [
+				"emotion",
+				"emotion"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_abort_ttvc_on_user_interaction": {
+			"type": "boolean"
+		}
+	}
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+export { ufoPlugin } from './ufoPlugin';
+export type { UfoPlugin } from './ufoPluginType';

package/src/pm-plugins/disableTTVCOnFirstUserInteraction.ts

@@ -0,0 +1,110 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getVCObserver } from '@atlaskit/react-ufo/vc';
+
+function bind(
+	target: HTMLElement,
+	event: FirstUserInteractionEvents,
+	controller: AbortController,
+	listener: () => void,
+) {
+	// Safe check for rare cases where window doesn't exist
+	if (!target || typeof target.addEventListener !== 'function') {
+		return () => {};
+	}
+
+	const options = {
+		capture: true,
+		passive: true,
+		once: true,
+		signal: controller.signal,
+	};
+
+	target.addEventListener(event, listener, options);
+
+	return function unbind() {
+		target.removeEventListener(event, listener, options);
+	};
+}
+
+type FirstUserInteractionEvents =
+	| 'wheel'
+	| 'keydown'
+	| 'mousedown'
+	| 'pointerdown'
+	| 'pointerup'
+	| 'touchend'
+	| 'scroll'
+	| 'mouseover';
+
+const AbortEvent: ReadonlyArray<FirstUserInteractionEvents> = [
+	'wheel',
+	'keydown',
+	'mousedown',
+	'pointerdown',
+	'pointerup',
+	'touchend',
+	'scroll',
+	'mouseover',
+];
+
+const ttvcAbort = () => {
+	const vc = getVCObserver();
+
+	if (
+		!vc ||
+		// For reasons that goes beyond my understand,
+		// the type is not properly set.
+		// https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+		// @ts-expect-error
+		typeof vc.abortCalculation !== 'function'
+	) {
+		return;
+	}
+
+	// For reasons that goes beyond my understand,
+	// the type is not properly set.
+	// https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/169231
+	// @ts-expect-error
+	vc.abortCalculation();
+};
+
+export const disableTTVCOnFirstUserInteraction = () => {
+	const unbindCallbacks: Set<() => void> = new Set();
+	const controller = new AbortController();
+	const unbindFirstInteractionEvents = () => {
+		controller.abort();
+
+		unbindCallbacks.forEach((cb) => {
+			cb();
+		});
+
+		unbindCallbacks.clear();
+	};
+
+	return new SafePlugin({
+		view(view) {
+			if (!view || !view.dom) {
+				return {};
+			}
+
+			const { dom } = view;
+
+			for (let abortEventName of AbortEvent) {
+				unbindCallbacks.add(
+					bind(dom, abortEventName, controller, () => {
+						ttvcAbort();
+
+						unbindFirstInteractionEvents();
+					}),
+				);
+			}
+
+			return {
+				destroy: () => {
+					unbindFirstInteractionEvents();
+				},
+			};
+		},
+	});
+};

package/src/ufoPlugin.tsx

@@ -0,0 +1,21 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import { disableTTVCOnFirstUserInteraction } from './pm-plugins/disableTTVCOnFirstUserInteraction';
+import type { UfoPlugin } from './ufoPluginType';
+
+export const ufoPlugin: UfoPlugin = () => ({
+	name: 'ufo',
+
+	pmPlugins() {
+		if (!fg('platform_editor_abort_ttvc_on_user_interaction')) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'disableTTVCOnFirstUserInteraction',
+				plugin: disableTTVCOnFirstUserInteraction,
+			},
+		];
+	},
+});

package/src/ufoPluginType.ts

@@ -0,0 +1,3 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+
+export type UfoPlugin = NextEditorPlugin<'ufo', {}>;

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../tsconfig.json",
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx"
+	],
+	"compilerOptions": {
+		"baseUrl": ""
+	}
+}