@atlaskit/editor-common 118.10.2 → 118.10.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 118.10.3
+
+### Patch Changes
+
+- [`2ba69c4d87919`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ba69c4d87919) -
+  Add an experiment-gated empty frame placeholder for multi-bodied extensions under
+  confluence_native_tabs_m15.
+
 ## 118.10.2
 
 ### Patch Changes

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -15,9 +15,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntl = require("react-intl");
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _hooks = require("../../hooks");
+var _placeholderText = require("../../messages/placeholder-text");
 var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
 var _utils = require("../../utils");
 var _Lozenge = _interopRequireDefault(require("../Extension/Lozenge"));
@@ -45,6 +48,20 @@ var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activ
     showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)))
   );
 };
+
+// Renders a visual placeholder when the active frame contains a single empty paragraph.
+var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, placeholderText) {
+  return (0, _react2.css)((0, _defineProperty2.default)({}, "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  , ") > p:only-child:has(.ProseMirror-trailingBreak:only-child)::before"), {
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    // JSON.stringify produces a quoted and escaped CSS string.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    content: placeholderText,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }));
+};
 var imageStyles = (0, _react2.css)({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -189,6 +206,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     node: node,
     type: 'image'
   });
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var _useState3 = (0, _react.useState)(0),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activeChildIndex = _useState4[0],
@@ -242,6 +261,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     mbeWrapperStyles = breakoutStyles;
   }
   var shouldUseUpdatedChrome = (0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true);
+  var shouldShowEmptyFramePlaceholder = (0, _isExperimentEnabled.isExperimentEnabled)('confluence_native_tabs_m15');
+  var emptyFramePlaceholderText = _react.default.useMemo(function () {
+    return JSON.stringify(formatMessage(_placeholderText.placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
+  }, [formatMessage]);
   var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -315,10 +338,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
+    className: containerClassNames,
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/cjs/messages/placeholder-text.js

@@ -50,5 +50,10 @@ var placeholderTextMessages = exports.placeholderTextMessages = (0, _reactIntl.d
     id: 'fabric.editor.sourceSyncBlockPlaceholderText',
     defaultMessage: 'Add content you want to reuse. Copy and paste this block to sync in other locations.',
     description: 'Placeholder text shown inside an empty source sync block, prompting users to add reusable content that can be synced across multiple locations.'
+  },
+  multiBodiedExtensionEmptyFramePlaceholderText: {
+    id: 'fabric.editor.multiBodiedExtensionEmptyFramePlaceholderText',
+    defaultMessage: 'Type to add content or press / to insert elements',
+    description: 'Placeholder text shown inside an empty multi-bodied extension frame, prompting users to type content or use slash commands to insert elements.'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "118.10.1";
+var packageVersion = "118.10.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "118.10.1";
+var packageVersion = "118.10.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -11,9 +11,12 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import classnames from 'classnames';
+import { useIntl } from 'react-intl';
 import EditorFileIcon from '@atlaskit/icon/core/file';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useSharedPluginStateWithSelector } from '../../hooks';
+import { placeholderTextMessages } from '../../messages/placeholder-text';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -33,6 +36,21 @@ css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   showMacroInteractionDesignUpdates && removeMarginsAndBorder)
 });
+
+// Renders a visual placeholder when the active frame contains a single empty paragraph.
+const getEmptyFramePlaceholderStyles = (activeChildIndex, placeholderText) => css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  [`& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  }) > p:only-child:has(.ProseMirror-trailingBreak:only-child)::before`]: {
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    // JSON.stringify produces a quoted and escaped CSS string.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    content: placeholderText,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 const imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -177,6 +195,9 @@ const MultiBodiedExtensionWithWidth = ({
     node,
     type: 'image'
   });
+  const {
+    formatMessage
+  } = useIntl();
   const [activeChildIndex, setActiveChildIndex] = useState(0);
   // Adding to avoid aliasing `this` for the callbacks
   const updateActiveChild = React.useCallback(index => {
@@ -228,6 +249,8 @@ const MultiBodiedExtensionWithWidth = ({
     mbeWrapperStyles = breakoutStyles;
   }
   const shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
+  const shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
+  const emptyFramePlaceholderText = React.useMemo(() => JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText)), [formatMessage]);
   const isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   const isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   const shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -297,10 +320,10 @@ const MultiBodiedExtensionWithWidth = ({
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
+    className: containerClassNames,
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/es2019/messages/placeholder-text.js

@@ -44,5 +44,10 @@ export const placeholderTextMessages = defineMessages({
     id: 'fabric.editor.sourceSyncBlockPlaceholderText',
     defaultMessage: 'Add content you want to reuse. Copy and paste this block to sync in other locations.',
     description: 'Placeholder text shown inside an empty source sync block, prompting users to add reusable content that can be synced across multiple locations.'
+  },
+  multiBodiedExtensionEmptyFramePlaceholderText: {
+    id: 'fabric.editor.multiBodiedExtensionEmptyFramePlaceholderText',
+    defaultMessage: 'Type to add content or press / to insert elements',
+    description: 'Placeholder text shown inside an empty multi-bodied extension frame, prompting users to type content or use slash commands to insert elements.'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "118.10.1";
+const packageVersion = "118.10.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "118.10.1";
+const packageVersion = "118.10.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -16,9 +16,12 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import classnames from 'classnames';
+import { useIntl } from 'react-intl';
 import EditorFileIcon from '@atlaskit/icon/core/file';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useSharedPluginStateWithSelector } from '../../hooks';
+import { placeholderTextMessages } from '../../messages/placeholder-text';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -38,6 +41,20 @@ var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activ
     showMacroInteractionDesignUpdates && removeMarginsAndBorder)))
   );
 };
+
+// Renders a visual placeholder when the active frame contains a single empty paragraph.
+var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, placeholderText) {
+  return css(_defineProperty({}, "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  , ") > p:only-child:has(.ProseMirror-trailingBreak:only-child)::before"), {
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    // JSON.stringify produces a quoted and escaped CSS string.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    content: placeholderText,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }));
+};
 var imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -182,6 +199,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     node: node,
     type: 'image'
   });
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     activeChildIndex = _useState4[0],
@@ -235,6 +254,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     mbeWrapperStyles = breakoutStyles;
   }
   var shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
+  var shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
+  var emptyFramePlaceholderText = React.useMemo(function () {
+    return JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
+  }, [formatMessage]);
   var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -308,10 +331,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
+    className: containerClassNames,
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/esm/messages/placeholder-text.js

@@ -44,5 +44,10 @@ export var placeholderTextMessages = defineMessages({
     id: 'fabric.editor.sourceSyncBlockPlaceholderText',
     defaultMessage: 'Add content you want to reuse. Copy and paste this block to sync in other locations.',
     description: 'Placeholder text shown inside an empty source sync block, prompting users to add reusable content that can be synced across multiple locations.'
+  },
+  multiBodiedExtensionEmptyFramePlaceholderText: {
+    id: 'fabric.editor.multiBodiedExtensionEmptyFramePlaceholderText',
+    defaultMessage: 'Type to add content or press / to insert elements',
+    description: 'Placeholder text shown inside an empty multi-bodied extension frame, prompting users to type content or use slash commands to insert elements.'
   }
 });

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "118.10.1";
+var packageVersion = "118.10.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "118.10.1";
+var packageVersion = "118.10.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/types/messages/placeholder-text.d.ts

@@ -1,47 +1,52 @@
 export declare const placeholderTextMessages: {
-    placeholderTextPlaceholder: {
-        id: string;
+    longEmptyNodePlaceholderADFPrefix: {
         defaultMessage: string;
         description: string;
-    };
-    shortEmptyNodePlaceholderText: {
         id: string;
-        defaultMessage: string;
-        description: string;
     };
-    shortEmptyNodePlaceholderADFSlashShortcut: {
-        id: string;
+    longEmptyNodePlaceholderADFSlashShortcut: {
         defaultMessage: string;
         description: string;
-    };
-    shortEmptyNodePlaceholderADFSuffix: {
         id: string;
+    };
+    longEmptyNodePlaceholderADFSuffix: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     longEmptyNodePlaceholderText: {
-        id: string;
         defaultMessage: string;
         description: string;
-    };
-    longEmptyNodePlaceholderADFPrefix: {
         id: string;
+    };
+    multiBodiedExtensionEmptyFramePlaceholderText: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    longEmptyNodePlaceholderADFSlashShortcut: {
+    placeholderTextPlaceholder: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    shortEmptyNodePlaceholderADFSlashShortcut: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    longEmptyNodePlaceholderADFSuffix: {
+    shortEmptyNodePlaceholderADFSuffix: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    shortEmptyNodePlaceholderText: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     sourceSyncBlockPlaceholderText: {
-        id: string;
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "118.10.2",
+	"version": "118.10.3",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"