@atlaskit/editor-core 193.19.11 → 193.21.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-core
 
+## 193.21.0
+
+### Minor Changes
+
+-   [#101412](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101412)
+    [`2ad17f5bf590`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ad17f5bf590) -
+    [ux] [ED-23363] If you are on a live page in view mode, there is no text selection when you
+    first load the page.
+
+## 193.20.0
+
+### Minor Changes
+
+-   [#98647](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98647)
+    [`19eb20751225`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/19eb20751225) -
+    [ux] [ED-23248] -
+
+    **@atlaskit/editor-core**: Added optional profilecardProvider to Mention plugin in universal
+    composable editor **@atlaskit/editor-plugin-mentions**: Made mentions render with profile cards
+    on click if the feature flag: `platform.editor.mentions-in-editor-popup-on-click` is turned on
+
 ## 193.19.11
 
 ### Patch Changes

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

@@ -45,7 +45,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function handleEditorFocus(view) {
+function handleEditorFocus(view, viewMode) {
   if (view.hasFocus()) {
     return;
   }
@@ -57,6 +57,12 @@ function handleEditorFocus(view) {
       view.focus();
       return;
     }
+    if (viewMode === 'view') {
+      var emptySelection = new _state2.TextSelection(view.state.doc.resolve(0));
+      var _tr = view.state.tr.setSelection(emptySelection);
+      view.dispatch(_tr);
+      return;
+    }
     var domSelection = window.getSelection();
     if (!domSelection || domSelection.rangeCount === 0) {
       view.focus();
@@ -113,6 +119,11 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getEditorView", function () {
       return _this.view;
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getViewMode", function () {
+      var _editorApi$editorView;
+      var editorApi = _this.pluginInjectionAPI.api();
+      return (_editorApi$editorView = editorApi.editorViewMode) === null || _editorApi$editorView === void 0 ? void 0 : _editorApi$editorView.sharedState.currentState().mode;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatFullWidthAppearance", function (appearance) {
       if (appearance === 'full-width') {
         return _analytics.FULL_WIDTH_MODE.FULL_WIDTH;
@@ -451,7 +462,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
           transformer: _this.contentTransformer
         });
         if (_this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
-          _this.focusTimeoutId = handleEditorFocus(view);
+          _this.focusTimeoutId = handleEditorFocus(view, _this.getViewMode());
         }
         if (_this.featureFlags.ufo) {
           _this.experienceStore = _ufo.ExperienceStore.getInstance(view);
@@ -630,7 +641,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
           }
         });
         if (!nextProps.editorProps.disabled && nextProps.editorProps.shouldFocus) {
-          this.focusTimeoutId = handleEditorFocus(this.view);
+          this.focusTimeoutId = handleEditorFocus(this.view, this.getViewMode());
         }
       }
       var appearance = this.props.editorProps.appearance;

package/dist/cjs/presets/universal.js

@@ -71,7 +71,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
   var isChromeless = appearance === 'chromeless';
@@ -124,7 +124,8 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
+    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }], Boolean(props.mentionProvider)).maybeAdd(_emoji.emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

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 = "193.19.11";
+var version = exports.version = "193.21.0";

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

@@ -8,8 +8,7 @@ import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-fea
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
 import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
-import { countNodes } from '@atlaskit/editor-common/utils';
-import { analyticsEventKey, browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, processRawValue, shouldForceTracking, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, browser, countNodes, getAnalyticsEventSeverity, getResponseEndTime, measureRender, processRawValue, shouldForceTracking, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
@@ -28,7 +27,7 @@ import { createSchema } from './create-schema';
 import { createFeatureFlagsFromProps } from './feature-flags-from-props';
 import { editorMessages } from './messages';
 import ReactEditorViewContext from './ReactEditorViewContext';
-function handleEditorFocus(view) {
+function handleEditorFocus(view, viewMode) {
   if (view.hasFocus()) {
     return;
   }
@@ -40,6 +39,12 @@ function handleEditorFocus(view) {
       view.focus();
       return;
     }
+    if (viewMode === 'view') {
+      const emptySelection = new TextSelection(view.state.doc.resolve(0));
+      const tr = view.state.tr.setSelection(emptySelection);
+      view.dispatch(tr);
+      return;
+    }
     const domSelection = window.getSelection();
     if (!domSelection || domSelection.rangeCount === 0) {
       view.focus();
@@ -109,6 +114,11 @@ export class ReactEditorView extends React.Component {
       return (_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.state;
     });
     _defineProperty(this, "getEditorView", () => this.view);
+    _defineProperty(this, "getViewMode", () => {
+      var _editorApi$editorView;
+      const editorApi = this.pluginInjectionAPI.api();
+      return (_editorApi$editorView = editorApi.editorViewMode) === null || _editorApi$editorView === void 0 ? void 0 : _editorApi$editorView.sharedState.currentState().mode;
+    });
     _defineProperty(this, "formatFullWidthAppearance", appearance => {
       if (appearance === 'full-width') {
         return FULL_WIDTH_MODE.FULL_WIDTH;
@@ -448,7 +458,7 @@ export class ReactEditorView extends React.Component {
           transformer: this.contentTransformer
         });
         if (this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
-          this.focusTimeoutId = handleEditorFocus(view);
+          this.focusTimeoutId = handleEditorFocus(view, this.getViewMode());
         }
         if (this.featureFlags.ufo) {
           this.experienceStore = ExperienceStore.getInstance(view);
@@ -583,7 +593,7 @@ export class ReactEditorView extends React.Component {
         editable: _state => !nextProps.editorProps.disabled
       });
       if (!nextProps.editorProps.disabled && nextProps.editorProps.shouldFocus) {
-        this.focusTimeoutId = handleEditorFocus(this.view);
+        this.focusTimeoutId = handleEditorFocus(this.view, this.getViewMode());
       }
     }
     const {

package/dist/es2019/presets/universal.js

@@ -59,7 +59,7 @@ import { createDefaultPreset } from './default';
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   const isMobile = appearance === 'mobile';
   const isComment = appearance === 'comment';
   const isChromeless = appearance === 'chromeless';
@@ -113,7 +113,8 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
+    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "193.19.11";
+export const version = "193.21.0";

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

@@ -19,8 +19,7 @@ import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-fea
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
 import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
-import { countNodes as _countNodes } from '@atlaskit/editor-common/utils';
-import { analyticsEventKey, browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, processRawValue, shouldForceTracking, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, browser, countNodes as _countNodes, getAnalyticsEventSeverity, getResponseEndTime, measureRender, processRawValue, shouldForceTracking, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
@@ -39,7 +38,7 @@ import { createSchema } from './create-schema';
 import { createFeatureFlagsFromProps } from './feature-flags-from-props';
 import { editorMessages } from './messages';
 import ReactEditorViewContext from './ReactEditorViewContext';
-function handleEditorFocus(view) {
+function handleEditorFocus(view, viewMode) {
   if (view.hasFocus()) {
     return;
   }
@@ -51,6 +50,12 @@ function handleEditorFocus(view) {
       view.focus();
       return;
     }
+    if (viewMode === 'view') {
+      var emptySelection = new TextSelection(view.state.doc.resolve(0));
+      var _tr = view.state.tr.setSelection(emptySelection);
+      view.dispatch(_tr);
+      return;
+    }
     var domSelection = window.getSelection();
     if (!domSelection || domSelection.rangeCount === 0) {
       view.focus();
@@ -107,6 +112,11 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getEditorView", function () {
       return _this.view;
     });
+    _defineProperty(_assertThisInitialized(_this), "getViewMode", function () {
+      var _editorApi$editorView;
+      var editorApi = _this.pluginInjectionAPI.api();
+      return (_editorApi$editorView = editorApi.editorViewMode) === null || _editorApi$editorView === void 0 ? void 0 : _editorApi$editorView.sharedState.currentState().mode;
+    });
     _defineProperty(_assertThisInitialized(_this), "formatFullWidthAppearance", function (appearance) {
       if (appearance === 'full-width') {
         return FULL_WIDTH_MODE.FULL_WIDTH;
@@ -445,7 +455,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           transformer: _this.contentTransformer
         });
         if (_this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
-          _this.focusTimeoutId = handleEditorFocus(view);
+          _this.focusTimeoutId = handleEditorFocus(view, _this.getViewMode());
         }
         if (_this.featureFlags.ufo) {
           _this.experienceStore = ExperienceStore.getInstance(view);
@@ -624,7 +634,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           }
         });
         if (!nextProps.editorProps.disabled && nextProps.editorProps.shouldFocus) {
-          this.focusTimeoutId = handleEditorFocus(this.view);
+          this.focusTimeoutId = handleEditorFocus(this.view, this.getViewMode());
         }
       }
       var appearance = this.props.editorProps.appearance;

package/dist/esm/presets/universal.js

@@ -63,7 +63,7 @@ import { createDefaultPreset } from './default';
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
   var isChromeless = appearance === 'chromeless';
@@ -116,7 +116,8 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
+    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "193.19.11";
+export var version = "193.21.0";

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

@@ -92,6 +92,7 @@ export declare class ReactEditorView<T = {}> extends React.Component<EditorViewP
     constructor(props: EditorViewProps & WrappedComponentProps & T, context: EditorReactContext);
     getEditorState: () => EditorState | undefined;
     getEditorView: () => EditorView | undefined;
+    getViewMode: () => 'edit' | 'view' | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: EditorViewProps): void;
     formatFullWidthAppearance: (appearance: EditorAppearance | undefined) => FULL_WIDTH_MODE;
     resetEditorState: ({ doc, shouldScrollToBottom, }: {

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

@@ -92,6 +92,7 @@ export declare class ReactEditorView<T = {}> extends React.Component<EditorViewP
     constructor(props: EditorViewProps & WrappedComponentProps & T, context: EditorReactContext);
     getEditorState: () => EditorState | undefined;
     getEditorView: () => EditorView | undefined;
+    getViewMode: () => 'edit' | 'view' | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: EditorViewProps): void;
     formatFullWidthAppearance: (appearance: EditorAppearance | undefined) => FULL_WIDTH_MODE;
     resetEditorState: ({ doc, shouldScrollToBottom, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "193.19.11",
+  "version": "193.21.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
     "@atlaskit/button": "^17.15.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/editor-common": "^80.5.0",
     "@atlaskit/editor-json-transformer": "^8.13.0",
     "@atlaskit/editor-plugins": "^2.6.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
@@ -108,6 +108,7 @@
     "@atlaskit/select": "^17.9.0",
     "@atlaskit/smart-card": "^26.69.0",
     "@atlaskit/synchrony-test-helpers": "^2.4.0",
+    "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/util-data-test": "^17.9.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/adf-schema-json": "^1.14.0",
@@ -122,7 +123,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/diff": "^5.0.2",
     "@types/is-number": "^7.0.0",
-    "clipboard-polyfill": "2.4.3",
+    "clipboard-polyfill": "4.0.1",
     "diff": "^4.0.1",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
@@ -348,6 +349,10 @@
     },
     "platform.confluence.frontend.narrow-full-page-editor-toolbar": {
       "type": "boolean"
+    },
+    "platform.editor.mentions-in-editor-popup-on-click": {
+      "type": "boolean",
+      "referenceOnly": "true"
     }
   },
   "stricter": {