@atlaskit/editor-plugin-mentions 2.15.2 → 2.15.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-mentions
 
+## 2.15.3
+
+### Patch Changes
+
+- [#116070](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116070)
+  [`85b41fded4577`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85b41fded4577) -
+  ED-26308: implements fallback dom for mention plugin
+
 ## 2.15.2
 
 ### Patch Changes

package/dist/cjs/mentionsPlugin.js

@@ -12,7 +12,6 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
-var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
@@ -20,6 +19,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mentionNodeSpec = require("./nodeviews/mentionNodeSpec");
 var _key = require("./pm-plugins/key");
 var _main = require("./pm-plugins/main");
 var _SecondaryToolbarComponent = require("./ui/SecondaryToolbarComponent");
@@ -108,7 +108,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
     nodes: function nodes() {
       return [{
         name: 'mention',
-        node: _adfSchema.mention
+        node: (0, _mentionNodeSpec.mentionNodeSpec)()
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/cjs/nodeviews/mentionNodeSpec.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mentionNodeSpec = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isSSR = Boolean(process.env.REACT_SSR);
+
+/**
+ * Wrapper for ADF mention node spec to augment toDOM implementation
+ * with fallback UI for lazy node view rendering / window virtualization
+ * @nodeSpecException:toDOM patch
+ * @returns
+ */
+var mentionNodeSpec = exports.mentionNodeSpec = function mentionNodeSpec() {
+  if (isSSR || !(0, _platformFeatureFlags.fg)('platform_editor_lego__inline_node_virtualization')) {
+    return _adfSchema.mention;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.mention), {}, {
+    toDOM: function toDOM(node) {
+      // packages/elements/mention/src/components/Mention/index.tsx
+      var mentionAttrs = {
+        'aria-busy': 'true',
+        contenteditable: 'false',
+        'data-access-level': '',
+        'data-mention-id': node.attrs.id,
+        'data-prosemirror-content-type': 'node',
+        'data-prosemirror-node-inline': 'true',
+        'data-prosemirror-node-name': 'mention',
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          display: 'inline',
+          border: "1px solid transparent",
+          background: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+          color: "var(--ds-text-subtle, #44546F)",
+          borderRadius: '20px',
+          cursor: 'pointer',
+          padding: '0 0.3em 2px 0.23em',
+          wordBreak: 'break-word'
+        })
+      };
+      return ['span', mentionAttrs, node.attrs.text];
+    }
+  });
+};

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

@@ -24,7 +24,7 @@ var ACTIONS = exports.ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "2.15.2";
+var PACKAGE_VERSION = "2.15.3";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/es2019/mentionsPlugin.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import uuid from 'uuid';
-import { mention } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages, mentionMessages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -9,6 +8,7 @@ import { IconMention } from '@atlaskit/editor-common/quick-insert';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { MentionNameStatus, isPromise } from '@atlaskit/mention/types';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
 import { mentionPluginKey } from './pm-plugins/key';
 import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
@@ -104,7 +104,7 @@ const mentionsPlugin = ({
     nodes() {
       return [{
         name: 'mention',
-        node: mention
+        node: mentionNodeSpec()
       }];
     },
     pmPlugins() {

package/dist/es2019/nodeviews/mentionNodeSpec.js

@@ -0,0 +1,43 @@
+import { mention } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N30A } from '@atlaskit/theme/colors';
+const isSSR = Boolean(process.env.REACT_SSR);
+
+/**
+ * Wrapper for ADF mention node spec to augment toDOM implementation
+ * with fallback UI for lazy node view rendering / window virtualization
+ * @nodeSpecException:toDOM patch
+ * @returns
+ */
+export const mentionNodeSpec = () => {
+  if (isSSR || !fg('platform_editor_lego__inline_node_virtualization')) {
+    return mention;
+  }
+  return {
+    ...mention,
+    toDOM: node => {
+      // packages/elements/mention/src/components/Mention/index.tsx
+      const mentionAttrs = {
+        'aria-busy': 'true',
+        contenteditable: 'false',
+        'data-access-level': '',
+        'data-mention-id': node.attrs.id,
+        'data-prosemirror-content-type': 'node',
+        'data-prosemirror-node-inline': 'true',
+        'data-prosemirror-node-name': 'mention',
+        style: convertToInlineCss({
+          display: 'inline',
+          border: `1px solid transparent`,
+          background: `var(--ds-background-neutral, ${N30A})`,
+          color: "var(--ds-text-subtle, #44546F)",
+          borderRadius: '20px',
+          cursor: 'pointer',
+          padding: '0 0.3em 2px 0.23em',
+          wordBreak: 'break-word'
+        })
+      };
+      return ['span', mentionAttrs, node.attrs.text];
+    }
+  };
+};

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

@@ -13,7 +13,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "2.15.2";
+const PACKAGE_VERSION = "2.15.3";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/esm/mentionsPlugin.js

@@ -6,7 +6,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import uuid from 'uuid';
-import { mention } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages, mentionMessages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -14,6 +13,7 @@ import { IconMention } from '@atlaskit/editor-common/quick-insert';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { MentionNameStatus, isPromise } from '@atlaskit/mention/types';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
 import { mentionPluginKey } from './pm-plugins/key';
 import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
@@ -98,7 +98,7 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
     nodes: function nodes() {
       return [{
         name: 'mention',
-        node: mention
+        node: mentionNodeSpec()
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/esm/nodeviews/mentionNodeSpec.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { mention } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N30A } from '@atlaskit/theme/colors';
+var isSSR = Boolean(process.env.REACT_SSR);
+
+/**
+ * Wrapper for ADF mention node spec to augment toDOM implementation
+ * with fallback UI for lazy node view rendering / window virtualization
+ * @nodeSpecException:toDOM patch
+ * @returns
+ */
+export var mentionNodeSpec = function mentionNodeSpec() {
+  if (isSSR || !fg('platform_editor_lego__inline_node_virtualization')) {
+    return mention;
+  }
+  return _objectSpread(_objectSpread({}, mention), {}, {
+    toDOM: function toDOM(node) {
+      // packages/elements/mention/src/components/Mention/index.tsx
+      var mentionAttrs = {
+        'aria-busy': 'true',
+        contenteditable: 'false',
+        'data-access-level': '',
+        'data-mention-id': node.attrs.id,
+        'data-prosemirror-content-type': 'node',
+        'data-prosemirror-node-inline': 'true',
+        'data-prosemirror-node-name': 'mention',
+        style: convertToInlineCss({
+          display: 'inline',
+          border: "1px solid transparent",
+          background: "var(--ds-background-neutral, ".concat(N30A, ")"),
+          color: "var(--ds-text-subtle, #44546F)",
+          borderRadius: '20px',
+          cursor: 'pointer',
+          padding: '0 0.3em 2px 0.23em',
+          wordBreak: 'break-word'
+        })
+      };
+      return ['span', mentionAttrs, node.attrs.text];
+    }
+  });
+};

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

@@ -16,7 +16,7 @@ export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "2.15.2";
+var PACKAGE_VERSION = "2.15.3";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/types/nodeviews/mentionNodeSpec.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Wrapper for ADF mention node spec to augment toDOM implementation
+ * with fallback UI for lazy node view rendering / window virtualization
+ * @nodeSpecException:toDOM patch
+ * @returns
+ */
+export declare const mentionNodeSpec: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/nodeviews/mentionNodeSpec.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Wrapper for ADF mention node spec to augment toDOM implementation
+ * with fallback UI for lazy node view rendering / window virtualization
+ * @nodeSpecException:toDOM patch
+ * @returns
+ */
+export declare const mentionNodeSpec: () => import("prosemirror-model").NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "2.15.2",
+	"version": "2.15.3",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^99.17.0",
+		"@atlaskit/editor-common": "^99.18.0",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
 		"@atlaskit/editor-plugin-base": "^2.2.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.4.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.13.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^23.9.0",
+		"@atlaskit/icon": "^23.10.0",
 		"@atlaskit/mention": "^23.11.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^16.0.0",
@@ -113,6 +113,9 @@
 		},
 		"platform_editor_offline_editing_ga": {
 			"type": "boolean"
+		},
+		"platform_editor_lego__inline_node_virtualization": {
+			"type": "boolean"
 		}
 	}
 }