@atlaskit/editor-plugin-alignment 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-alignment
 
+## 1.4.0
+
+### Minor Changes
+
+-   [#101406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101406)
+    [`6daffd65aec4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6daffd65aec4) -
+    [ED-23298] Extract primary toolbar components to editor plugin to allow for custom ordering
+
+### Patch Changes
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -15,6 +15,23 @@ var defaultConfig = exports.defaultConfig = {
 };
 var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
   var api = _ref.api;
+  var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+    var editorView = _ref2.editorView,
+      popupsMountPoint = _ref2.popupsMountPoint,
+      popupsBoundariesElement = _ref2.popupsBoundariesElement,
+      popupsScrollableElement = _ref2.popupsScrollableElement,
+      disabled = _ref2.disabled,
+      isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+    return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+      api: api,
+      editorView: editorView,
+      disabled: disabled,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      isToolbarReducedSpacing: isToolbarReducedSpacing
+    });
+  };
   return {
     name: 'alignment',
     marks: function marks() {
@@ -36,8 +53,8 @@ var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'alignmentPlugin',
-        plugin: function plugin(_ref2) {
-          var dispatch = _ref2.dispatch;
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
           return (0, _main.createPlugin)(dispatch, defaultConfig);
         }
       }, {
@@ -47,22 +64,13 @@ var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
         }
       }];
     },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
-      var editorView = _ref3.editorView,
-        popupsMountPoint = _ref3.popupsMountPoint,
-        popupsBoundariesElement = _ref3.popupsBoundariesElement,
-        popupsScrollableElement = _ref3.popupsScrollableElement,
-        disabled = _ref3.disabled,
-        isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
-      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
-        api: api,
-        editorView: editorView,
-        disabled: disabled,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        isToolbarReducedSpacing: isToolbarReducedSpacing
-      });
-    }
+    usePluginHook: function usePluginHook() {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'alignment',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -32,6 +32,7 @@ function PrimaryToolbarComponent(_ref) {
     disabled: disabled || !alignmentState.isEnabled,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement
+    popupsScrollableElement: popupsScrollableElement,
+    api: api
   });
 }

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

@@ -89,7 +89,8 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
         isReducedSpacing = _this$props.isReducedSpacing,
         pluginState = _this$props.pluginState,
         disabled = _this$props.disabled,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        api = _this$props.api;
       var alignment = (_pluginState$align = pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) !== null && _pluginState$align !== void 0 ? _pluginState$align : 'start';
       var title = intl.formatMessage(_messages.alignmentMessages.alignment);
       return (
@@ -145,7 +146,8 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
             return _this2.changeAlignment(align, false);
           },
           selectedAlignment: alignment
-        })), (0, _react2.jsx)("span", {
+        })), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        (0, _react2.jsx)("span", {
           css: _styles.separatorStyles
         }))
       );

package/dist/es2019/plugin.js

@@ -8,43 +8,15 @@ export const defaultConfig = {
 };
 export const alignmentPlugin = ({
   api
-}) => ({
-  name: 'alignment',
-  marks() {
-    return [{
-      name: 'alignment',
-      mark: alignment
-    }];
-  },
-  getSharedState(editorState) {
-    if (!editorState) {
-      return undefined;
-    }
-    const pluginState = pluginKey.getState(editorState);
-    return pluginState ? {
-      align: pluginState.align,
-      isEnabled: pluginState.isEnabled
-    } : undefined;
-  },
-  pmPlugins() {
-    return [{
-      name: 'alignmentPlugin',
-      plugin: ({
-        dispatch
-      }) => createPlugin(dispatch, defaultConfig)
-    }, {
-      name: 'annotationKeymap',
-      plugin: () => keymapPlugin()
-    }];
-  },
-  primaryToolbarComponent({
+}) => {
+  const primaryToolbarComponent = ({
     editorView,
     popupsMountPoint,
     popupsBoundariesElement,
     popupsScrollableElement,
     disabled,
     isToolbarReducedSpacing
-  }) {
+  }) => {
     return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
       api: api,
       editorView: editorView,
@@ -54,5 +26,43 @@ export const alignmentPlugin = ({
       popupsScrollableElement: popupsScrollableElement,
       isToolbarReducedSpacing: isToolbarReducedSpacing
     });
-  }
-});
+  };
+  return {
+    name: 'alignment',
+    marks() {
+      return [{
+        name: 'alignment',
+        mark: alignment
+      }];
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      const pluginState = pluginKey.getState(editorState);
+      return pluginState ? {
+        align: pluginState.align,
+        isEnabled: pluginState.isEnabled
+      } : undefined;
+    },
+    pmPlugins() {
+      return [{
+        name: 'alignmentPlugin',
+        plugin: ({
+          dispatch
+        }) => createPlugin(dispatch, defaultConfig)
+      }, {
+        name: 'annotationKeymap',
+        plugin: () => keymapPlugin()
+      }];
+    },
+    usePluginHook: () => {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'alignment',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+  };
+};

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -22,6 +22,7 @@ export function PrimaryToolbarComponent({
     disabled: disabled || !alignmentState.isEnabled,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement
+    popupsScrollableElement: popupsScrollableElement,
+    api: api
   });
 }

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

@@ -66,7 +66,8 @@ export class AlignmentToolbar extends React.Component {
       isReducedSpacing,
       pluginState,
       disabled,
-      intl
+      intl,
+      api
     } = this.props;
     const alignment = (_pluginState$align = pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) !== null && _pluginState$align !== void 0 ? _pluginState$align : 'start';
     const title = intl.formatMessage(messages.alignment);
@@ -121,7 +122,8 @@ export class AlignmentToolbar extends React.Component {
       }, jsx(Alignment, {
         onClick: align => this.changeAlignment(align, false),
         selectedAlignment: alignment
-      })), jsx("span", {
+      })), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+      jsx("span", {
         css: separatorStyles
       }))
     );

package/dist/esm/plugin.js

@@ -8,6 +8,23 @@ export var defaultConfig = {
 };
 export var alignmentPlugin = function alignmentPlugin(_ref) {
   var api = _ref.api;
+  var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+    var editorView = _ref2.editorView,
+      popupsMountPoint = _ref2.popupsMountPoint,
+      popupsBoundariesElement = _ref2.popupsBoundariesElement,
+      popupsScrollableElement = _ref2.popupsScrollableElement,
+      disabled = _ref2.disabled,
+      isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+      api: api,
+      editorView: editorView,
+      disabled: disabled,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      isToolbarReducedSpacing: isToolbarReducedSpacing
+    });
+  };
   return {
     name: 'alignment',
     marks: function marks() {
@@ -29,8 +46,8 @@ export var alignmentPlugin = function alignmentPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'alignmentPlugin',
-        plugin: function plugin(_ref2) {
-          var dispatch = _ref2.dispatch;
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
           return createPlugin(dispatch, defaultConfig);
         }
       }, {
@@ -40,22 +57,13 @@ export var alignmentPlugin = function alignmentPlugin(_ref) {
         }
       }];
     },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
-      var editorView = _ref3.editorView,
-        popupsMountPoint = _ref3.popupsMountPoint,
-        popupsBoundariesElement = _ref3.popupsBoundariesElement,
-        popupsScrollableElement = _ref3.popupsScrollableElement,
-        disabled = _ref3.disabled,
-        isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        api: api,
-        editorView: editorView,
-        disabled: disabled,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        isToolbarReducedSpacing: isToolbarReducedSpacing
-      });
-    }
+    usePluginHook: function usePluginHook() {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'alignment',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -22,6 +22,7 @@ export function PrimaryToolbarComponent(_ref) {
     disabled: disabled || !alignmentState.isEnabled,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement
+    popupsScrollableElement: popupsScrollableElement,
+    api: api
   });
 }

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

@@ -83,7 +83,8 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         isReducedSpacing = _this$props.isReducedSpacing,
         pluginState = _this$props.pluginState,
         disabled = _this$props.disabled,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        api = _this$props.api;
       var alignment = (_pluginState$align = pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) !== null && _pluginState$align !== void 0 ? _pluginState$align : 'start';
       var title = intl.formatMessage(messages.alignment);
       return (
@@ -139,7 +140,8 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
             return _this2.changeAlignment(align, false);
           },
           selectedAlignment: alignment
-        })), jsx("span", {
+        })), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        jsx("span", {
           css: separatorStyles
         }))
       );

package/dist/types/plugin.d.ts

@@ -1,7 +1,9 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { AlignmentPluginState } from './pm-plugins/types';
 export declare const defaultConfig: AlignmentPluginState;
 export type AlignmentPlugin = NextEditorPlugin<'alignment', {
     sharedState: AlignmentPluginState | undefined;
+    dependencies: [OptionalPlugin<PrimaryToolbarPlugin>];
 }>;
 export declare const alignmentPlugin: AlignmentPlugin;

package/dist/types/ui/ToolbarAlignment/index.d.ts

@@ -2,6 +2,8 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { AlignmentPlugin } from '../../plugin';
 import type { AlignmentPluginState, AlignmentState } from '../../pm-plugins/types';
 export interface State {
     isOpen: boolean;
@@ -14,6 +16,7 @@ export interface Props {
     popupsScrollableElement?: HTMLElement;
     isReducedSpacing?: boolean;
     disabled?: boolean;
+    api: ExtractInjectionAPI<AlignmentPlugin> | undefined;
 }
 export declare class AlignmentToolbar extends React.Component<Props & WrappedComponentProps, State> {
     static displayName: string;

package/dist/types-ts4.5/plugin.d.ts

@@ -1,7 +1,11 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { AlignmentPluginState } from './pm-plugins/types';
 export declare const defaultConfig: AlignmentPluginState;
 export type AlignmentPlugin = NextEditorPlugin<'alignment', {
     sharedState: AlignmentPluginState | undefined;
+    dependencies: [
+        OptionalPlugin<PrimaryToolbarPlugin>
+    ];
 }>;
 export declare const alignmentPlugin: AlignmentPlugin;

package/dist/types-ts4.5/ui/ToolbarAlignment/index.d.ts

@@ -2,6 +2,8 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { AlignmentPlugin } from '../../plugin';
 import type { AlignmentPluginState, AlignmentState } from '../../pm-plugins/types';
 export interface State {
     isOpen: boolean;
@@ -14,6 +16,7 @@ export interface Props {
     popupsScrollableElement?: HTMLElement;
     isReducedSpacing?: boolean;
     disabled?: boolean;
+    api: ExtractInjectionAPI<AlignmentPlugin> | undefined;
 }
 export declare class AlignmentToolbar extends React.Component<Props & WrappedComponentProps, State> {
     static displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-alignment",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Alignment plugin for @atlaskit/editor-core",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -21,13 +21,14 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.8.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/adf-schema": "^36.10.7",
+    "@atlaskit/editor-common": "^81.0.0",
+    "@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-tables": "^2.7.0",
-    "@atlaskit/icon": "^22.2.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },