@atlaskit/editor-core 207.2.0 → 207.3.0

package/dist/cjs/ui/EditorContentContainer/styles/embedCardStyles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.embedCardStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var embedCardStyles = exports.embedCardStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout^='wrap-']": {
+      maxWidth: '100%',
+      position: 'relative',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      zIndex: 2
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-left']": {
+      float: 'left'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-right']": {
+      float: 'right'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+      clear: 'both'
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/layout.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutViewStyles = exports.layoutBaseStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _styles = require("@atlaskit/editor-common/styles");
+var _types = require("@atlaskit/editor-plugins/table/types");
+var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+var columnLayoutSharedStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '[data-layout-section]': (0, _defineProperty2.default)({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  }, "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), {
+    flexDirection: 'column'
+  })
+});
+var columnLayoutResponsiveSharedStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout-section]': {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.layout-section-container': {
+    containerType: 'inline-size',
+    containerName: 'layout-area'
+  }
+});
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :not(style):first-child,\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
+};
+var layoutColumnStyles = function layoutColumnStyles() {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), "var(--ds-border-radius, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth);
+};
+var layoutSectionStyles = function layoutSectionStyles() {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", "\n\t\t\t"])), columnLayoutSharedStyle);
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutBorderBaseStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t/* TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\tThis is because the default state already uses the same token and, as such, the hover style won't change anything.\n\thttps://product-fabric.atlassian.net/browse/DSP-4441 */\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutBorderViewStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: 0;\n\t}\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var columnSeparatorBaseStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid ", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var columnSeparatorViewStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tborder-left: 0;\n\t}\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var rowSeparatorBaseStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid ", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\n\t\t/* clear styles for column separator */\n\t\tborder-left: unset;\n\t\tmargin-left: unset;\n\t\theight: unset;\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var rowSeparatorViewStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tborder-top: 0;\n\t}\n"])));
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+var layoutWithSeparatorBorderResponsiveBaseStyles = function layoutWithSeparatorBorderResponsiveBaseStyles(breakpoint
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+) {
+  return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, breakpoint, rowSeparatorBaseStyles);
+};
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+var layoutWithSeparatorBorderResponsiveViewStyles = function layoutWithSeparatorBorderResponsiveViewStyles(breakpoint
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+) {
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, breakpoint, rowSeparatorViewStyles);
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutWithSeparatorBorderBaseStyles = (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", "\n\t}\n\n\t&.selected.danger [data-layout-section] {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.", ":not(.danger) [data-layout-section] {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n"])), columnSeparatorBaseStyles, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, columnSeparatorBaseStyles, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), columnSeparatorBaseStyles);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutWithSeparatorBorderViewStyles = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", "\n\t}\n\n\t&.selected.danger [data-layout-section] {\n\t\tbox-shadow: 0 0 0 0 ", ";\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.", ":not(.danger) [data-layout-section] {\n\t\tbox-shadow: 0 0 0 0 ", ";\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n"])), columnSeparatorViewStyles, _editorSharedStyles.akEditorDeleteBorder, columnSeparatorViewStyles, _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, #0C66E4)", columnSeparatorViewStyles);
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutResponsiveBaseStyles = (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t/* not resized layout in full-width editor */\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* not resized layout in fixed-width editor */\n\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* resized layout in full/fixed-width editor */\n\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t.layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n"])), layoutWithSeparatorBorderResponsiveBaseStyles(724), layoutWithSeparatorBorderResponsiveBaseStyles(788), layoutWithSeparatorBorderResponsiveBaseStyles(820));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutResponsiveViewStyles = (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t/* not resized layout in full-width editor */\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* not resized layout in fixed-width editor */\n\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* resized layout in full/fixed-width editor */\n\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n"])), layoutWithSeparatorBorderResponsiveViewStyles(724), layoutWithSeparatorBorderResponsiveViewStyles(788), layoutWithSeparatorBorderResponsiveViewStyles(820));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+var layoutBaseStyles = exports.layoutBaseStyles = function layoutBaseStyles() {
+  return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: pointer;\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n\t\t\t and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n\t\t   handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderBaseStyles : layoutBorderBaseStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveBaseStyles, _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
+var layoutViewStyles = exports.layoutViewStyles = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t[data-layout-section] {\n\t\t\tcursor: default;\n\t\t\t[data-layout-column] {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n"])), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderViewStyles : layoutBorderViewStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveViewStyles);

package/dist/cjs/ui/EditorContentContainer/styles/link.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkStylesOld = exports.linkStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var linkStyles = exports.linkStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a.blockLink': {
+    display: 'block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a[data-prosemirror-mark-name="link"]': {
+    textDecoration: 'underline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a[data-prosemirror-mark-name="link"]:hover': {
+    textDecoration: 'none'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var linkStylesOld = exports.linkStylesOld = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a.blockLink': {
+    display: 'block'
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/rule.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ruleStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var ruleStyles = exports.ruleStyles = (0, _react.css)((0, _defineProperty2.default)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror hr': {
+    border: 'none',
+    backgroundColor: "var(--ds-border, #091E4224)",
+    height: '2px',
+    borderRadius: '1px',
+    cursor: 'pointer',
+    padding: "var(--ds-space-050, 4px)".concat(" 0"),
+    margin: "var(--ds-space-300, 24px)".concat(" 0"),
+    backgroundClip: 'content-box'
+  }
+}, ".ProseMirror hr.".concat(_editorSharedStyles.akEditorSelectedNodeClassName), {
+  outline: 'none',
+  backgroundColor: "var(--ds-border-selected, #0C66E4)"
+}));

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

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -7,7 +7,8 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -44,6 +45,14 @@ ContentArea.displayName = 'ContentArea';
 const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
   exposure: true
 }), EditorContentContainer, ContentArea);
+const useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+}, pluginInjectionApi => {
+  return useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+});
 
 /**
  * Render the editor in a chromeless appearance.
@@ -78,9 +87,7 @@ export default class Editor extends React.Component {
         featureFlags
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
-      const {
-        editorViewModeState
-      } = useSharedPluginState(this.props.editorAPI, ['editorViewMode']);
+      const editorViewMode = useEditorViewModePluginState(this.props.editorAPI);
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
@@ -102,7 +109,7 @@ export default class Editor extends React.Component {
       , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags,
-        viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+        viewMode: editorViewMode,
         appearance: this.appearance
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
@@ -122,10 +129,6 @@ export default class Editor extends React.Component {
       }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null)));
     });
   }
-  /**
-   *
-   * @example
-   */
   render() {
     return jsx(RenderWithPluginState, {
       editorAPI: this.props.editorAPI,
@@ -134,13 +137,28 @@ export default class Editor extends React.Component {
   }
 }
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
+const useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const {
+    maxContentSizeState
+  } = useSharedPluginState(pluginInjectionApi, ['maxContentSize']);
+  return {
+    maxContentSizeState
+  };
+}, pluginInjectionApi => {
+  const maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  return {
+    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
+      maxContentSizeReached
+    }
+  };
+});
 function RenderWithPluginState({
   renderChrome,
   editorAPI
 }) {
   const {
     maxContentSizeState
-  } = useSharedPluginState(editorAPI, ['maxContentSize']);
+  } = useMaxContentSizePluginState(editorAPI);
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState
   }));

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -10,11 +10,12 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import messages from '@atlaskit/editor-common/messages';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -79,16 +80,36 @@ const appearance = 'comment';
 const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
   exposure: true
 }), EditorContentContainer, ContentArea);
+const useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
+}, pluginInjectionApi => {
+  const maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
+  const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
+      maxContentSizeReached
+    },
+    primaryToolbarState: !primaryToolbarComponents ? undefined : {
+      components: primaryToolbarComponents
+    },
+    editorViewModeState: !editorViewMode ? undefined : {
+      mode: editorViewMode
+    }
+  };
+});
 export const CommentEditorWithIntl = props => {
   const {
     editorAPI
   } = props;
   const {
-    mediaState,
     maxContentSizeState,
     primaryToolbarState,
     editorViewModeState
-  } = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar', 'editorViewMode']);
+  } = useCommentEditorPluginsStates(editorAPI);
+  const {
+    mediaState
+  } = useSharedPluginState(editorAPI, ['media']);
   const intl = useIntl();
   const {
     editorDOMElement,

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -49,6 +49,28 @@ const hasCustomComponents = components => {
   }
   return true;
 };
+const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  return useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+}, pluginInjectionApi => {
+  const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
+  const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  const showTopToolbar = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode._showTopToolbar');
+  const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
+  const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
+  return {
+    primaryToolbarState: !primaryToolbarComponents ? undefined : {
+      components: primaryToolbarComponents
+    },
+    editorViewModeState: !editorViewMode ? undefined : {
+      mode: editorViewMode,
+      _showTopToolbar: showTopToolbar
+    },
+    interactionState: hasHadInteraction === undefined || interactionState === undefined ? undefined : {
+      hasHadInteraction,
+      interactionState
+    }
+  };
+});
 export const FullPageEditor = props => {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _scrollContentContain4, _scrollContentContain5, _wrapperElementRef$cu;
   const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
@@ -59,7 +81,7 @@ export const FullPageEditor = props => {
     editorViewModeState,
     primaryToolbarState,
     interactionState
-  } = useSharedPluginState(editorAPI, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  } = useFullPageEditorPluginsStates(editorAPI);
   const viewMode = getEditorViewMode(editorViewModeState, props.preset);
   const hasHadInteraction = fg('platform_editor_interaction_api_refactor') ? (interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState) !== 'hasNotHadInteraction' : Boolean(interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction);
   let toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking');

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -9,7 +9,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
-const akNestedDndGutterOffset = 8;
+const AK_NESTED_DND_GUTTER_OFFSET = 8;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const fullPageEditorWrapper = css({
@@ -114,7 +114,7 @@ const editorContentAreaContainerStyle = () => css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '[data-layout-section]': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      maxWidth: `calc(100% + ${(akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? akNestedDndGutterOffset : 0)) * 2}px)`
+      maxWidth: `calc(100% + ${(akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2}px)`
     }
   }
 });

package/dist/es2019/ui/ContentStyles/layout.js

@@ -13,7 +13,7 @@ import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/cons
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-const akNestedDndGutterOffset = 8;
+const AK_NESTED_DND_GUTTER_OFFSET = 8;
 const firstNodeWithNotMarginTop = () => fg('platform_editor_nested_dnd_styles_changes') ?
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 css`
@@ -283,7 +283,8 @@ export const layoutStyles = viewMode => css`
 			/* Ignored via go/ees007
 			TODO: Migrate away from gridSize
 			Recommendation: Replace directly with 7px */
-			margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? akNestedDndGutterOffset : 0)}px 0;
+			margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)}px
+				0;
 			transition: border-color 0.3s ${akEditorSwoopCubicBezier};
 			cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
 

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

@@ -9,8 +9,9 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 const ANIM_SPEED_MS = 500;
@@ -151,12 +152,17 @@ export class SwappableContentArea extends React.PureComponent {
     });
   }
 }
-export function ContextPanel(props) {
-  var _contextPanelState$co;
+const useContextPanelSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
   const {
     contextPanelState
-  } = useSharedPluginState(props.editorAPI, ['contextPanel']);
-  const firstContent = contextPanelState && (contextPanelState === null || contextPanelState === void 0 ? void 0 : (_contextPanelState$co = contextPanelState.contents) === null || _contextPanelState$co === void 0 ? void 0 : _contextPanelState$co.find(Boolean));
+  } = useSharedPluginState(pluginInjectionApi, ['contextPanel']);
+  return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
+}, pluginInjectionApi => {
+  return useSharedPluginStateSelector(pluginInjectionApi, 'contextPanel.contents');
+});
+export function ContextPanel(props) {
+  const contextPanelContents = useContextPanelSharedState(props.editorAPI);
+  const firstContent = contextPanelContents && contextPanelContents.find(Boolean);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading