@atlaskit/editor-plugin-placeholder 7.1.1 → 7.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-placeholder
 
+## 7.2.1
+
+### Patch Changes
+
+- [`5c6dee8d82e9e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c6dee8d82e9e) -
+  Updated adf placeholder to inject zero-width-space character at the start of the placeholder
+  decoration. This is needed to stop the browser caret from getting confused when its placed between
+  and editable and non-editable element
+- Updated dependencies
+
+## 7.2.0
+
+### Minor Changes
+
+- [`333b858014e54`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/333b858014e54) -
+  Move content placeholder behind title_on_transition flag
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/cjs/placeholderPlugin.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/cjs/placeholderPlugin.js

@@ -1,3 +1,4 @@
+/* placeholderPlugin.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,8 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pluginKey = exports.placeholderPlugin = exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = void 0;
+require("./placeholderPlugin.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _placeholderPluginLegacy = require("./pm-plugins/placeholderPluginLegacy");
 var EMPTY_PARAGRAPH_TIMEOUT_DELAY = exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
@@ -62,6 +69,23 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
           return (0, _main.default)(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, options && options.placeholderADF, api);
         }
       }];
-    }
+    },
+    contentComponent: (0, _expValEquals.expValEquals)('confluence_load_editor_title_on_transition', 'contentPlaceholder', true) ? function (params) {
+      var _params$editorView;
+      // @ts-ignore fix which needs follow up to use standard apis
+      var collabEditPluginState = (_params$editorView = params.editorView) === null || _params$editorView === void 0 || (_params$editorView = _params$editorView.state) === null || _params$editorView === void 0 ? void 0 : _params$editorView.collabEditPlugin$;
+      if (collabEditPluginState && collabEditPluginState.isReady !== true) {
+        return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+          xcss: spinnerContainerStyles.spinnerContainer
+        }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+          interactionName: "live-pages-loading-spinner",
+          size: "medium"
+        }));
+      }
+      return null;
+    } : undefined
   };
+};
+var spinnerContainerStyles = {
+  spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
 };

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

@@ -92,6 +92,18 @@ function createPlaceholderDecoration(editorState, placeholderText, placeholderPr
   if (isTargetNested && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
   }
+  if (placeholderADF && _utils.browser.chrome && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_adf_placeholder')) {
+    var fragment = document.createDocumentFragment();
+    // An issue occurs with the caret where it gets bigger when it's next to a non-editable element like a decoration.
+    // See: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946/2
+    // Adding a zero-width space seems to fix this issue.
+    fragment.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
+    fragment.appendChild(placeholderDecoration);
+    return _view.DecorationSet.create(editorState.doc, [_view.Decoration.widget(pos, fragment, {
+      side: 0,
+      key: "placeholder ".concat(placeholderText)
+    })]);
+  }
   return _view.DecorationSet.create(editorState.doc, [_view.Decoration.widget(pos, placeholderDecoration, {
     side: 0,
     key: "placeholder ".concat(placeholderText)

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

@@ -93,7 +93,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
     props: {
       decorations: function decorations(editorState) {
         var _api$composition, _api$showDiff;
-        if ((0, _expValEquals.expValEquals)('cc_editor_placeholder_collab_wait', 'isEnabled', true)) {
+        if ((0, _expValEquals.expValEquals)('confluence_load_editor_title_on_transition', 'contentPlaceholder', true)) {
           // @ts-ignore quick fix which needs follow up to use standard apis
           if (editorState.collabEditPlugin$ && editorState.collabEditPlugin$.isReady !== true) {
             return;

package/dist/es2019/placeholderPlugin.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/es2019/placeholderPlugin.js

@@ -1,5 +1,12 @@
+/* placeholderPlugin.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./placeholderPlugin.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner/spinner';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import createPlugin from './pm-plugins/main';
 import { placeholderPluginLegacy } from './pm-plugins/placeholderPluginLegacy';
 export const EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
@@ -52,6 +59,23 @@ export const placeholderPlugin = ({
           getIntl
         }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, options && options.placeholderADF, api)
       }];
-    }
+    },
+    contentComponent: expValEquals('confluence_load_editor_title_on_transition', 'contentPlaceholder', true) ? params => {
+      var _params$editorView, _params$editorView$st;
+      // @ts-ignore fix which needs follow up to use standard apis
+      const collabEditPluginState = (_params$editorView = params.editorView) === null || _params$editorView === void 0 ? void 0 : (_params$editorView$st = _params$editorView.state) === null || _params$editorView$st === void 0 ? void 0 : _params$editorView$st.collabEditPlugin$;
+      if (collabEditPluginState && collabEditPluginState.isReady !== true) {
+        return /*#__PURE__*/React.createElement(Box, {
+          xcss: spinnerContainerStyles.spinnerContainer
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          interactionName: "live-pages-loading-spinner",
+          size: "medium"
+        }));
+      }
+      return null;
+    } : undefined
   };
+};
+const spinnerContainerStyles = {
+  spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
 };

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

@@ -1,5 +1,5 @@
 import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -82,6 +82,18 @@ export function createPlaceholderDecoration(editorState, placeholderText, placeh
   if (isTargetNested && editorExperiment('platform_editor_controls', 'variant1')) {
     placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
   }
+  if (placeholderADF && browser.chrome && fg('platform_editor_ai_aifc_adf_placeholder')) {
+    const fragment = document.createDocumentFragment();
+    // An issue occurs with the caret where it gets bigger when it's next to a non-editable element like a decoration.
+    // See: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946/2
+    // Adding a zero-width space seems to fix this issue.
+    fragment.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+    fragment.appendChild(placeholderDecoration);
+    return DecorationSet.create(editorState.doc, [Decoration.widget(pos, fragment, {
+      side: 0,
+      key: `placeholder ${placeholderText}`
+    })]);
+  }
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
     side: 0,
     key: `placeholder ${placeholderText}`

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

@@ -86,7 +86,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
     props: {
       decorations(editorState) {
         var _api$composition, _api$showDiff, _api$showDiff$sharedS;
-        if (expValEquals('cc_editor_placeholder_collab_wait', 'isEnabled', true)) {
+        if (expValEquals('confluence_load_editor_title_on_transition', 'contentPlaceholder', true)) {
           // @ts-ignore quick fix which needs follow up to use standard apis
           if (editorState.collabEditPlugin$ && editorState.collabEditPlugin$.isReady !== true) {
             return;

package/dist/esm/placeholderPlugin.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/esm/placeholderPlugin.js

@@ -1,5 +1,12 @@
+/* placeholderPlugin.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./placeholderPlugin.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner/spinner';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import createPlugin from './pm-plugins/main';
 import { placeholderPluginLegacy } from './pm-plugins/placeholderPluginLegacy';
 export var EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
@@ -55,6 +62,23 @@ export var placeholderPlugin = function placeholderPlugin(_ref) {
           return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, options && options.placeholderADF, api);
         }
       }];
-    }
+    },
+    contentComponent: expValEquals('confluence_load_editor_title_on_transition', 'contentPlaceholder', true) ? function (params) {
+      var _params$editorView;
+      // @ts-ignore fix which needs follow up to use standard apis
+      var collabEditPluginState = (_params$editorView = params.editorView) === null || _params$editorView === void 0 || (_params$editorView = _params$editorView.state) === null || _params$editorView === void 0 ? void 0 : _params$editorView.collabEditPlugin$;
+      if (collabEditPluginState && collabEditPluginState.isReady !== true) {
+        return /*#__PURE__*/React.createElement(Box, {
+          xcss: spinnerContainerStyles.spinnerContainer
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          interactionName: "live-pages-loading-spinner",
+          size: "medium"
+        }));
+      }
+      return null;
+    } : undefined
   };
+};
+var spinnerContainerStyles = {
+  spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
 };

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

@@ -1,5 +1,5 @@
 import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -86,6 +86,18 @@ export function createPlaceholderDecoration(editorState, placeholderText, placeh
   if (isTargetNested && editorExperiment('platform_editor_controls', 'variant1')) {
     placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
   }
+  if (placeholderADF && browser.chrome && fg('platform_editor_ai_aifc_adf_placeholder')) {
+    var fragment = document.createDocumentFragment();
+    // An issue occurs with the caret where it gets bigger when it's next to a non-editable element like a decoration.
+    // See: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946/2
+    // Adding a zero-width space seems to fix this issue.
+    fragment.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+    fragment.appendChild(placeholderDecoration);
+    return DecorationSet.create(editorState.doc, [Decoration.widget(pos, fragment, {
+      side: 0,
+      key: "placeholder ".concat(placeholderText)
+    })]);
+  }
   return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
     side: 0,
     key: "placeholder ".concat(placeholderText)

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

@@ -87,7 +87,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
     props: {
       decorations: function decorations(editorState) {
         var _api$composition, _api$showDiff;
-        if (expValEquals('cc_editor_placeholder_collab_wait', 'isEnabled', true)) {
+        if (expValEquals('confluence_load_editor_title_on_transition', 'contentPlaceholder', true)) {
           // @ts-ignore quick fix which needs follow up to use standard apis
           if (editorState.collabEditPlugin$ && editorState.collabEditPlugin$.isReady !== true) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-placeholder",
-	"version": "7.1.1",
+	"version": "7.2.1",
 	"description": "Placeholder plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,18 +28,21 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-utils": "^19.26.0",
+		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-composition": "^6.0.0",
 		"@atlaskit/editor-plugin-focus": "^6.0.0",
 		"@atlaskit/editor-plugin-show-diff": "^4.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^16.15.0",
+		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/spinner": "^19.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.23.0",
 		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.7.0",
+		"@atlaskit/editor-common": "^111.8.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -56,6 +59,9 @@
 		},
 		"platform_editor_placeholder_plugin_tidying": {
 			"type": "boolean"
+		},
+		"platform_editor_ai_aifc_adf_placeholder": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {