@atlaskit/editor-core 198.6.1 → 198.6.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-core
 
+## 198.6.3
+
+### Patch Changes
+
+- [#151938](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151938)
+  [`91b5768ef0c7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91b5768ef0c7c) -
+  [ux] ED-25203 refactor image previewer outside of floating toolbar
+- [#152019](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152019)
+  [`5f7f23dd0c612`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5f7f23dd0c612) -
+  [ux] ED-25082: Added editor custom font tokens and use them for normal texts and paragraph texts"
+- Updated dependencies
+
+## 198.6.2
+
+### Patch Changes
+
+- [#149735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149735)
+  [`bca64a14f9448`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bca64a14f9448) -
+  Migrate internal PluginSlot component to functional component for React 18
+
 ## 198.6.1
 
 ### Patch Changes

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

@@ -88,7 +88,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\n\t", "\n\t", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n\t.hyperlink-open-link {\n\t\tmin-width: 24px;\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_mark_boundary_cursor') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t"]))) : null, _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_mark_boundary_cursor') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t"]))) : null, _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -97,7 +97,8 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
       featureFlags = props.featureFlags;
     var theme = (0, _react2.useTheme)();
     var _useThemeObserver = (0, _tokens.useThemeObserver)(),
-      colorMode = _useThemeObserver.colorMode;
+      colorMode = _useThemeObserver.colorMode,
+      typography = _useThemeObserver.typography;
     var editorAPI = (0, _context.usePresetContext)();
     var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['editorViewMode']),
       editorViewModeState = _useSharedPluginState.editorViewModeState;
@@ -106,9 +107,10 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
         theme: theme,
         colorMode: colorMode,
         featureFlags: featureFlags,
-        viewMode: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+        viewMode: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+        typographyTheme: typography
       });
-    }, [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode]);
+    }, [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode, typography]);
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       (0, _react2.jsx)("div", {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = PluginSlotDefault;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -14,7 +14,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../utils");
 var _ErrorBoundary = require("../ErrorBoundary");
 var _mountPluginHooks = require("./mount-plugin-hooks");
@@ -26,12 +28,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var pluginsComponentsWrapper = (0, _react2.css)({
   display: 'flex'
 });
-var PluginSlot = exports.default = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(PluginSlot, _React$Component);
-  var _super = _createSuper(PluginSlot);
-  function PluginSlot() {
+var PluginSlotLegacy = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(PluginSlotLegacy, _React$Component);
+  var _super = _createSuper(PluginSlotLegacy);
+  function PluginSlotLegacy() {
     var _this;
-    (0, _classCallCheck2.default)(this, PluginSlot);
+    (0, _classCallCheck2.default)(this, PluginSlotLegacy);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -60,7 +62,7 @@ var PluginSlot = exports.default = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  (0, _createClass2.default)(PluginSlot, [{
+  (0, _createClass2.default)(PluginSlotLegacy, [{
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       var _this$props = this.props,
@@ -147,6 +149,108 @@ var PluginSlot = exports.default = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
-  return PluginSlot;
+  return PluginSlotLegacy;
 }(_react.default.Component);
-(0, _defineProperty2.default)(PluginSlot, "displayName", 'PluginSlot');
+(0, _defineProperty2.default)(PluginSlotLegacy, "displayName", 'PluginSlot');
+var PluginSlot = function PluginSlot(_ref) {
+  var items = _ref.items,
+    editorView = _ref.editorView,
+    editorActions = _ref.editorActions,
+    eventDispatcher = _ref.eventDispatcher,
+    providerFactory = _ref.providerFactory,
+    appearance = _ref.appearance,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    containerElement = _ref.containerElement,
+    disabled = _ref.disabled,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    wrapperElement = _ref.wrapperElement,
+    pluginHooks = _ref.pluginHooks;
+  if (!items && !pluginHooks || !editorView) {
+    return null;
+  }
+  return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
+    component: _analytics.ACTION_SUBJECT.PLUGIN_SLOT,
+    fallbackComponent: null
+  }, (0, _react2.jsx)(_mountPluginHooks.MountPluginHooks, {
+    editorView: editorView,
+    pluginHooks: pluginHooks,
+    containerElement: containerElement
+  }), (0, _react2.jsx)("div", {
+    css: pluginsComponentsWrapper
+  }, items === null || items === void 0 ? void 0 : items.map(function (component, key) {
+    var props = {
+      key: key
+    };
+    var element = component({
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      providerFactory: providerFactory,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      appearance: appearance,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: disabled,
+      wrapperElement: wrapperElement
+    });
+    return element && /*#__PURE__*/_react.default.cloneElement(element, props);
+  })));
+};
+var PluginSlotNew = /*#__PURE__*/_react.default.memo(PluginSlot, _isEqual.default);
+PluginSlotNew.displayName = 'PluginSlot';
+function PluginSlotDefault(_ref2) {
+  var items = _ref2.items,
+    editorView = _ref2.editorView,
+    editorActions = _ref2.editorActions,
+    eventDispatcher = _ref2.eventDispatcher,
+    providerFactory = _ref2.providerFactory,
+    appearance = _ref2.appearance,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    containerElement = _ref2.containerElement,
+    disabled = _ref2.disabled,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    wrapperElement = _ref2.wrapperElement,
+    pluginHooks = _ref2.pluginHooks,
+    contentArea = _ref2.contentArea;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_plugin_slot')) {
+    return (0, _react2.jsx)(PluginSlotNew, {
+      items: items,
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      providerFactory: providerFactory,
+      appearance: appearance,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: disabled,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      wrapperElement: wrapperElement,
+      pluginHooks: pluginHooks
+    });
+  }
+  return (0, _react2.jsx)(PluginSlotLegacy, {
+    contentArea: contentArea,
+    items: items,
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    containerElement: containerElement,
+    disabled: disabled,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    wrapperElement: wrapperElement,
+    pluginHooks: pluginHooks
+  });
+}

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

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

@@ -222,7 +222,7 @@ const contentStyles = props => css`
   theme: props.theme
 })}px;
 		${whitespaceSharedStyles};
-		${paragraphSharedStyles};
+		${paragraphSharedStyles(props.typographyTheme)};
 		${listsSharedStyles};
 		${indentationSharedStyles};
 		${shadowSharedStyle};
@@ -265,7 +265,7 @@ const contentStyles = props => css`
 	${placeholderStyles}
   ${codeBlockStyles()}
 
-  ${blocktypeStyles()}
+  ${blocktypeStyles(props.typographyTheme)}
   ${codeMarkSharedStyles()}
   ${textColorStyles}
   ${backgroundColorStyles()}
@@ -373,7 +373,8 @@ export const createEditorContentStyle = styles => {
     } = props;
     const theme = useTheme();
     const {
-      colorMode
+      colorMode,
+      typography
     } = useThemeObserver();
     const editorAPI = usePresetContext();
     const {
@@ -383,8 +384,9 @@ export const createEditorContentStyle = styles => {
       theme,
       colorMode,
       featureFlags,
-      viewMode: fg('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-    }), [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode]);
+      viewMode: fg('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+      typographyTheme: typography
+    }), [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode, typography]);
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", {

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

@@ -7,14 +7,16 @@ 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 isEqual from 'lodash/isEqual';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { MountPluginHooks } from './mount-plugin-hooks';
 const pluginsComponentsWrapper = css({
   display: 'flex'
 });
-export default class PluginSlot extends React.Component {
+class PluginSlotLegacy extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "transitionEvent", whichTransitionEvent());
@@ -119,4 +121,108 @@ export default class PluginSlot extends React.Component {
     })));
   }
 }
-_defineProperty(PluginSlot, "displayName", 'PluginSlot');
+_defineProperty(PluginSlotLegacy, "displayName", 'PluginSlot');
+const PluginSlot = ({
+  items,
+  editorView,
+  editorActions,
+  eventDispatcher,
+  providerFactory,
+  appearance,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  containerElement,
+  disabled,
+  dispatchAnalyticsEvent,
+  wrapperElement,
+  pluginHooks
+}) => {
+  if (!items && !pluginHooks || !editorView) {
+    return null;
+  }
+  return jsx(ErrorBoundary, {
+    component: ACTION_SUBJECT.PLUGIN_SLOT,
+    fallbackComponent: null
+  }, jsx(MountPluginHooks, {
+    editorView: editorView,
+    pluginHooks: pluginHooks,
+    containerElement: containerElement
+  }), jsx("div", {
+    css: pluginsComponentsWrapper
+  }, items === null || items === void 0 ? void 0 : items.map((component, key) => {
+    const props = {
+      key
+    };
+    const element = component({
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      providerFactory,
+      dispatchAnalyticsEvent,
+      appearance: appearance,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      containerElement,
+      disabled,
+      wrapperElement
+    });
+    return element && /*#__PURE__*/React.cloneElement(element, props);
+  })));
+};
+const PluginSlotNew = /*#__PURE__*/React.memo(PluginSlot, isEqual);
+PluginSlotNew.displayName = 'PluginSlot';
+export default function PluginSlotDefault({
+  items,
+  editorView,
+  editorActions,
+  eventDispatcher,
+  providerFactory,
+  appearance,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  containerElement,
+  disabled,
+  dispatchAnalyticsEvent,
+  wrapperElement,
+  pluginHooks,
+  contentArea
+}) {
+  if (fg('platform_editor_react_18_plugin_slot')) {
+    return jsx(PluginSlotNew, {
+      items: items,
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      providerFactory: providerFactory,
+      appearance: appearance,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: disabled,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      wrapperElement: wrapperElement,
+      pluginHooks: pluginHooks
+    });
+  }
+  return jsx(PluginSlotLegacy, {
+    contentArea: contentArea,
+    items: items,
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    containerElement: containerElement,
+    disabled: disabled,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    wrapperElement: wrapperElement,
+    pluginHooks: pluginHooks
+  });
+}

package/dist/es2019/version-wrapper.js

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

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

@@ -80,7 +80,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\n\t", "\n\t", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n\t.hyperlink-open-link {\n\t\tmin-width: 24px;\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t}\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), "var(--ds-border-focused, #8cf)", fg('platform_editor_mark_boundary_cursor') ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t"]))) : null, placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), "var(--ds-border-focused, #8cf)", fg('platform_editor_mark_boundary_cursor') ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t"]))) : null, placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -89,7 +89,8 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
       featureFlags = props.featureFlags;
     var theme = useTheme();
     var _useThemeObserver = useThemeObserver(),
-      colorMode = _useThemeObserver.colorMode;
+      colorMode = _useThemeObserver.colorMode,
+      typography = _useThemeObserver.typography;
     var editorAPI = usePresetContext();
     var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode']),
       editorViewModeState = _useSharedPluginState.editorViewModeState;
@@ -98,9 +99,10 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
         theme: theme,
         colorMode: colorMode,
         featureFlags: featureFlags,
-        viewMode: fg('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+        viewMode: fg('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+        typographyTheme: typography
       });
-    }, [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode]);
+    }, [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode, typography]);
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", {

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

@@ -15,19 +15,21 @@ 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 isEqual from 'lodash/isEqual';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { MountPluginHooks } from './mount-plugin-hooks';
 var pluginsComponentsWrapper = css({
   display: 'flex'
 });
-var PluginSlot = /*#__PURE__*/function (_React$Component) {
-  _inherits(PluginSlot, _React$Component);
-  var _super = _createSuper(PluginSlot);
-  function PluginSlot() {
+var PluginSlotLegacy = /*#__PURE__*/function (_React$Component) {
+  _inherits(PluginSlotLegacy, _React$Component);
+  var _super = _createSuper(PluginSlotLegacy);
+  function PluginSlotLegacy() {
     var _this;
-    _classCallCheck(this, PluginSlot);
+    _classCallCheck(this, PluginSlotLegacy);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -56,7 +58,7 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  _createClass(PluginSlot, [{
+  _createClass(PluginSlotLegacy, [{
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       var _this$props = this.props,
@@ -143,7 +145,108 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
-  return PluginSlot;
+  return PluginSlotLegacy;
 }(React.Component);
-_defineProperty(PluginSlot, "displayName", 'PluginSlot');
-export { PluginSlot as default };
+_defineProperty(PluginSlotLegacy, "displayName", 'PluginSlot');
+var PluginSlot = function PluginSlot(_ref) {
+  var items = _ref.items,
+    editorView = _ref.editorView,
+    editorActions = _ref.editorActions,
+    eventDispatcher = _ref.eventDispatcher,
+    providerFactory = _ref.providerFactory,
+    appearance = _ref.appearance,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    containerElement = _ref.containerElement,
+    disabled = _ref.disabled,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    wrapperElement = _ref.wrapperElement,
+    pluginHooks = _ref.pluginHooks;
+  if (!items && !pluginHooks || !editorView) {
+    return null;
+  }
+  return jsx(ErrorBoundary, {
+    component: ACTION_SUBJECT.PLUGIN_SLOT,
+    fallbackComponent: null
+  }, jsx(MountPluginHooks, {
+    editorView: editorView,
+    pluginHooks: pluginHooks,
+    containerElement: containerElement
+  }), jsx("div", {
+    css: pluginsComponentsWrapper
+  }, items === null || items === void 0 ? void 0 : items.map(function (component, key) {
+    var props = {
+      key: key
+    };
+    var element = component({
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      providerFactory: providerFactory,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      appearance: appearance,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: disabled,
+      wrapperElement: wrapperElement
+    });
+    return element && /*#__PURE__*/React.cloneElement(element, props);
+  })));
+};
+var PluginSlotNew = /*#__PURE__*/React.memo(PluginSlot, isEqual);
+PluginSlotNew.displayName = 'PluginSlot';
+export default function PluginSlotDefault(_ref2) {
+  var items = _ref2.items,
+    editorView = _ref2.editorView,
+    editorActions = _ref2.editorActions,
+    eventDispatcher = _ref2.eventDispatcher,
+    providerFactory = _ref2.providerFactory,
+    appearance = _ref2.appearance,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    containerElement = _ref2.containerElement,
+    disabled = _ref2.disabled,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    wrapperElement = _ref2.wrapperElement,
+    pluginHooks = _ref2.pluginHooks,
+    contentArea = _ref2.contentArea;
+  if (fg('platform_editor_react_18_plugin_slot')) {
+    return jsx(PluginSlotNew, {
+      items: items,
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      providerFactory: providerFactory,
+      appearance: appearance,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: disabled,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      wrapperElement: wrapperElement,
+      pluginHooks: pluginHooks
+    });
+  }
+  return jsx(PluginSlotLegacy, {
+    contentArea: contentArea,
+    items: items,
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    containerElement: containerElement,
+    disabled: disabled,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    wrapperElement: wrapperElement,
+    pluginHooks: pluginHooks
+  });
+}

package/dist/esm/version-wrapper.js

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