@atlaskit/editor-core 209.7.0 → 209.8.0

package/dist/es2019/version-wrapper.js

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

package/dist/esm/index.js

@@ -36,4 +36,6 @@ export { getNodesCount } from './utils/getNodesCount';
 export { default as measurements } from './utils/performance/measure-enum';
 export { createFeatureFlagsFromProps } from './utils/feature-flags-from-props';
 export { default as EditorActions } from './actions';
-export { createEditorContentStyle } from './ui/ContentStyles';
+export { createEditorContentStyle } from './ui/ContentStyles';
+export { getDefaultPresetOptionsFromEditorProps } from './create-editor/create-plugins-list';
+export { ReactEditorView } from './create-editor/ReactEditorView';

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

@@ -35,6 +35,7 @@ import PluginSlot from '../../PluginSlot';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
+import { CommentToolbar } from './CommentToolbar';
 import { MainToolbar } from './Toolbar';
 var CommentEditorMargin = 14;
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
@@ -242,7 +243,10 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
     editorAppearance: appearance,
     useStickyToolbar: useStickyToolbar,
     intl: intl
-  }, jsx(Toolbar
+  }, expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(CommentToolbar, {
+    editorAPI: editorAPI,
+    editorView: editorView
+  }) : jsx(Toolbar
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   , {

package/dist/esm/ui/Appearance/Comment/CommentToolbar.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { isToolbar } from '../../../utils/toolbar';
+import { ToolbarNext } from '../../Toolbar/Toolbar';
+/**
+ * Primary toolbar driven by components registered by `editor-plugin-toolbar`, introduced in `platform_editor_toolbar_aifc`.
+ */
+export var CommentToolbar = function CommentToolbar(_ref) {
+  var _editorAPI$toolbar;
+  var editorAPI = _ref.editorAPI,
+    editorView = _ref.editorView;
+  var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
+    return component.key === TOOLBARS.PRIMARY_TOOLBAR;
+  });
+  if (!components || !isToolbar(toolbar)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarNext, {
+    toolbar: toolbar,
+    components: components,
+    editorView: editorView
+  });
+};

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

@@ -13,10 +13,12 @@ import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
+import { FullPageToolbarNext } from './FullPageToolbarNext';
 import { getEditorViewMode } from './getEditorViewModeSync';
 import { fullPageEditorWrapper } from './StyledComponents';
 var useShowKeyline = function useShowKeyline(contentAreaRef) {
@@ -159,7 +161,12 @@ export var FullPageEditor = function FullPageEditor(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       '--ak-editor-fullpage-toolbar-height': FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()
     }
-  }, !isEditorToolbarHidden && jsx(FullPageToolbar, {
+  }, !isEditorToolbarHidden && (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) ? jsx(FullPageToolbarNext, {
+    toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
+    beforeIcon: props.primaryToolbarIconBefore,
+    editorAPI: editorAPI,
+    editorView: props.editorView
+  }) : jsx(FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -186,7 +193,7 @@ export var FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  }), jsx(FullPageContentArea, {
+  })), jsx(FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,

package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css

@@ -0,0 +1,4 @@
+
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.js

@@ -0,0 +1,61 @@
+/* FullPageToolbarNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./FullPageToolbarNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { isToolbar } from '../../../utils/toolbar';
+import { ToolbarNext } from '../../Toolbar/Toolbar';
+import { useToolbarPortal } from '../../Toolbar/ToolbarPortal';
+var styles = {
+  mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
+  mainToolbarWrapper: "_n7zl7r9e"
+};
+var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([styles.mainToolbarWrapper])
+  }, children);
+};
+
+/**
+ * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
+ *
+ * [ ] Add support for custom toolbar + splitting into two lines
+ *
+ * [ ] Add support for toolbar keyboard shortcuts
+ *
+ * [ ] Add support for toolbar analytics
+ *
+ * [ ] Add support for toolbar accessibility
+ *
+ * [ ] Add support for toolbar localization
+ */
+export var FullPageToolbarNext = function FullPageToolbarNext(_ref2) {
+  var _editorAPI$toolbar, _useToolbarPortal;
+  var editorAPI = _ref2.editorAPI,
+    beforeIcon = _ref2.beforeIcon,
+    toolbarDockingPosition = _ref2.toolbarDockingPosition,
+    editorView = _ref2.editorView;
+  var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
+    return component.key === TOOLBARS.PRIMARY_TOOLBAR;
+  });
+
+  // When a toolbar portal context is provided, render the  toolbar inside a portal.
+  // Otherwise fall back to a fragment just to avoid forking rendering logic.
+  var _ref3 = (_useToolbarPortal = useToolbarPortal()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
+      Portal: React.Fragment
+    },
+    ToolbarPortal = _ref3.Portal;
+  return /*#__PURE__*/React.createElement(ToolbarPortal, null, /*#__PURE__*/React.createElement(MainToolbarWrapper, {
+    testId: "full-page-primary-toolbar"
+  }, beforeIcon && /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.mainToolbarIconBefore])
+  }, beforeIcon), toolbarDockingPosition !== 'none' && components && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
+    toolbar: toolbar,
+    components: components,
+    editorView: editorView
+  })));
+};

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

@@ -114,7 +114,8 @@ var baseStatusStyles = css({
     maxWidth: '100%',
     paddingInline: "var(--ds-space-050, 4px)",
     display: 'inline-flex',
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     blockSize: 'min-content',
     position: 'static',
     overflow: 'hidden',

package/dist/esm/ui/EditorContentContainer/styles/findReplaceStyles.js

@@ -4,7 +4,8 @@ import { css } from '@emotion/react';
 export var findReplaceStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match': {
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
     boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
   },

package/dist/esm/ui/EditorContentContainer/styles/statusStyles.js

@@ -45,7 +45,8 @@ export var statusStyles = css({
     maxWidth: '100%',
     paddingInline: "var(--ds-space-050, 4px)",
     display: 'inline-flex',
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     blockSize: 'min-content',
     position: 'static',
     overflow: 'hidden',

package/dist/esm/ui/Toolbar/Toolbar.js

@@ -1,6 +1,15 @@
 import React from 'react';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { ToolbarButtonGroup, ToolbarDropdownItemSection, ToolbarSection } from '@atlaskit/editor-toolbar';
+import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
 import { ToolbarInner } from './ToolbarInner';
+
+/**
+ * *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.
+ *
+ * If making changes to this component please ensure to also update `<ToolbarNext />`.
+ */
 export var Toolbar = function Toolbar(props) {
   return /*#__PURE__*/React.createElement(ToolbarInner, {
     items: props.items,
@@ -18,4 +27,26 @@ export var Toolbar = function Toolbar(props) {
     isToolbarReducedSpacing: props.toolbarSize < ToolbarSize.XXL,
     containerElement: props.containerElement
   });
+};
+/**
+ * Renders a primary toolbar, driven by components registed by `editor-plugin-toolbar`. `ToolbarModelRenderer` will just
+ * render the toolbar structure, the design is driven per component registered including the toolbar itself.
+ *
+ * The majority of components UI should use `@atlaskit/editor-toolbar` components.
+ */
+export var ToolbarNext = function ToolbarNext(_ref) {
+  var toolbar = _ref.toolbar,
+    components = _ref.components,
+    editorView = _ref.editorView;
+  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView !== null && editorView !== void 0 ? editorView : null
+  }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
+    toolbar: toolbar,
+    components: components,
+    fallbacks: {
+      group: ToolbarButtonGroup,
+      section: ToolbarSection,
+      menuSection: ToolbarDropdownItemSection
+    }
+  }));
 };

package/dist/esm/utils/toolbar.js

@@ -0,0 +1,3 @@
+export var isToolbar = function isToolbar(component) {
+  return (component === null || component === void 0 ? void 0 : component.type) === 'toolbar';
+};

package/dist/esm/version-wrapper.js

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

package/dist/types/composable-editor/editor-internal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { jsx } from '@emotion/react';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { FireAnalyticsCallback } from '@atlaskit/editor-common/analytics';

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

@@ -8,6 +8,6 @@ export declare const useDispatchTransaction: ({ onChange, dispatchAnalyticsEvent
     onChange: EditorOnChangeHandler | undefined;
     dispatchAnalyticsEvent: (payload: AnalyticsEventPayload) => void;
     onEditorViewUpdated: (params: EditorViewStateUpdatedCallbackProps) => void;
-    isRemoteReplaceDocumentTransaction?: ((tr: Transaction) => boolean) | undefined;
+    isRemoteReplaceDocumentTransaction?: (tr: Transaction) => boolean;
 }) => DispatchTransaction;
 export {};