@atlaskit/editor-plugin-alignment 0.1.0

package/dist/esm/pm-plugins/main.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { isAlignable } from '../commands';
+import { getActiveAlignment } from '../utils';
+export function createInitialPluginState(editorState, pluginConfig) {
+  return {
+    align: getActiveAlignment(editorState) || pluginConfig.align,
+    isEnabled: true
+  };
+}
+export var pluginKey = new PluginKey('alignmentPlugin');
+export function createPlugin(dispatch, pluginConfig) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init(_, editorState) {
+        return createInitialPluginState(editorState, pluginConfig);
+      },
+      apply: function apply(_tr, state, _prevState, nextState) {
+        var nextPluginState = getActiveAlignment(nextState);
+        var isEnabled = isAlignable(nextPluginState)(nextState);
+        var newState = _objectSpread(_objectSpread({}, state), {}, {
+          align: nextPluginState,
+          isEnabled: isEnabled
+        });
+        if (nextPluginState !== state.align || isEnabled !== state.isEnabled) {
+          dispatch(pluginKey, newState);
+        }
+        return newState;
+      }
+    }
+  });
+}

package/dist/esm/pm-plugins/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/Alignment/AlignmentButton/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { getAriaKeyshortcuts, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+function AlignmentButton(_ref) {
+  var label = _ref.label,
+    isSelected = _ref.isSelected,
+    content = _ref.content,
+    shortcut = _ref.shortcut,
+    onClick = _ref.onClick,
+    value = _ref.value;
+  var onClickCallback = function onClickCallback(e) {
+    // detect if the click event comes from keyboard where screenX and screenY are 0
+    var isMouseEvent = e instanceof MouseEvent;
+    e.preventDefault();
+    onClick(value, isMouseEvent);
+  };
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    disabled: false,
+    selected: isSelected,
+    title: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: label,
+      keymap: shortcut
+    }),
+    "aria-label": shortcut ? tooltip(shortcut, label) : label,
+    "aria-pressed": isSelected,
+    "aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
+    onClick: onClickCallback,
+    iconBefore: content
+  });
+}
+export default AlignmentButton;

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

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { alignLeft } from '@atlaskit/editor-common/keymaps';
+import { alignmentMessages } from '@atlaskit/editor-common/messages';
+import { IconMap } from '../ToolbarAlignment/icon-map';
+import AlignmentButton from './AlignmentButton';
+import { alignmentWrapper } from './styles';
+var alignmentOptions = [{
+  title: alignmentMessages.alignLeft,
+  shortcut: alignLeft,
+  value: 'start'
+}, {
+  title: alignmentMessages.alignCenter,
+  value: 'center'
+}, {
+  title: alignmentMessages.alignRight,
+  value: 'end'
+}];
+function Alignment(_ref) {
+  var onClick = _ref.onClick,
+    selectedAlignment = _ref.selectedAlignment,
+    className = _ref.className,
+    intl = _ref.intl;
+  return jsx("div", {
+    "data-testid": "alignment-buttons"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: alignmentWrapper,
+    className: className
+  }, alignmentOptions.map(function (alignment) {
+    var value = alignment.value,
+      title = alignment.title,
+      shortcut = alignment.shortcut;
+    var message = intl.formatMessage(title);
+    return jsx(AlignmentButton, {
+      content: jsx(IconMap, {
+        alignment: value
+      }),
+      key: value,
+      value: value,
+      label: message,
+      shortcut: shortcut,
+      onClick: onClick,
+      isSelected: value === selectedAlignment
+    });
+  }));
+}
+export default injectIntl(Alignment);

package/dist/esm/ui/Alignment/styles.js

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+export var alignmentWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), "var(--ds-space-100, 8px)", 3 * 32);

package/dist/esm/ui/ToolbarAlignment/icon-map.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import EditorAlignCenterIcon from '@atlaskit/icon/glyph/editor/align-center';
+import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
+import EditorAlignRightIcon from '@atlaskit/icon/glyph/editor/align-right';
+import { messages } from './messages';
+var iconAndMessageMap = {
+  start: {
+    Component: EditorAlignLeftIcon,
+    label: messages.alignLeft
+  },
+  end: {
+    Component: EditorAlignRightIcon,
+    label: messages.alignRight
+  },
+  center: {
+    Component: EditorAlignCenterIcon,
+    label: messages.alignCenter
+  }
+};
+export var IconMap = function IconMap(props) {
+  var _iconAndMessageMap$pr = iconAndMessageMap[props.alignment],
+    Component = _iconAndMessageMap$pr.Component,
+    label = _iconAndMessageMap$pr.label;
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(Component, {
+    label: intl.formatMessage(label)
+  });
+};

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

@@ -0,0 +1,168 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { separatorStyles } from '@atlaskit/editor-common/styles';
+import { ArrowKeyNavigationType, DropdownContainer as Dropdown, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import Alignment from '../Alignment';
+import { IconMap } from './icon-map';
+import { messages } from './messages';
+import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
+  _inherits(AlignmentToolbar, _React$Component);
+  var _super = _createSuper(AlignmentToolbar);
+  function AlignmentToolbar() {
+    var _this;
+    _classCallCheck(this, AlignmentToolbar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isOpen: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeAlignment", function (align, togglePopup) {
+      if (togglePopup) {
+        _this.toggleOpen();
+      }
+      return _this.props.changeAlignment(align);
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
+      _this.setState({
+        isOpen: !_this.state.isOpen
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpen: !_this.state.isOpen
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "hide", function (attrs) {
+      if (_this.state.isOpen) {
+        _this.setState({
+          isOpen: false
+        });
+        if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.event.key === 'Escape') {
+          var _this$toolbarItemRef;
+          (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "hideOnEscape", function () {
+      var _this$toolbarItemRef2;
+      _this.hide();
+      (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
+    });
+    return _this;
+  }
+  _createClass(AlignmentToolbar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isOpen = this.state.isOpen;
+      var _this$props = this.props,
+        popupsMountPoint = _this$props.popupsMountPoint,
+        popupsBoundariesElement = _this$props.popupsBoundariesElement,
+        popupsScrollableElement = _this$props.popupsScrollableElement,
+        isReducedSpacing = _this$props.isReducedSpacing,
+        pluginState = _this$props.pluginState,
+        disabled = _this$props.disabled,
+        intl = _this$props.intl;
+      var title = intl.formatMessage(messages.alignment);
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        jsx("span", {
+          css: wrapper
+        }, jsx(Dropdown, {
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          isOpen: isOpen,
+          handleClickOutside: function handleClickOutside(event) {
+            if (event instanceof MouseEvent) {
+              _this2.hide({
+                isOpen: false,
+                event: event
+              });
+            }
+          },
+          handleEscapeKeydown: this.hideOnEscape,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.MENU
+          },
+          fitWidth: 112,
+          fitHeight: 80,
+          closeOnTab: true,
+          trigger: jsx(ToolbarButton, {
+            spacing: isReducedSpacing ? 'none' : 'default',
+            disabled: disabled,
+            selected: isOpen,
+            title: title,
+            className: "align-btn",
+            "aria-label": title,
+            "aria-expanded": isOpen,
+            "aria-haspopup": true,
+            onClick: this.toggleOpen,
+            onKeyDown: this.toggleOpenByKeyboard,
+            iconBefore:
+            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+            jsx("div", {
+              css: triggerWrapper
+            }, jsx(IconMap, {
+              alignment: pluginState.align
+            }), jsx("span", {
+              css: expandIconWrapper
+            }, jsx(ExpandIcon, {
+              label: ""
+            }))),
+            ref: this.toolbarItemRef
+          })
+        }, jsx(Alignment, {
+          onClick: function onClick(align) {
+            return _this2.changeAlignment(align, false);
+          },
+          selectedAlignment: pluginState.align
+        })), jsx("span", {
+          css: separatorStyles
+        }))
+      );
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      if (this.state.isOpen) {
+        // by triggering the keyboard event with a setTimeout, we ensure that the tooltip
+        // associated with the alignment button doesn't render until the next render cycle
+        // where the popup will be correctly positioned and the relative position of the tooltip
+        // will not overlap with the button.
+        setTimeout(function () {
+          var _this3$toolbarItemRef;
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            bubbles: true,
+            key: 'ArrowDown'
+          });
+          (_this3$toolbarItemRef = _this3.toolbarItemRef.current) === null || _this3$toolbarItemRef === void 0 || _this3$toolbarItemRef.dispatchEvent(keyboardEvent);
+        }, 0);
+      }
+    }
+  }]);
+  return AlignmentToolbar;
+}(React.Component);
+_defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
+export default injectIntl(AlignmentToolbar);

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

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  alignment: {
+    id: 'fabric.editor.alignment',
+    defaultMessage: 'Text alignment',
+    description: 'Opens drop down menu of options to configure text alignment'
+  },
+  alignLeft: {
+    id: 'fabric.editor.alignLeft',
+    defaultMessage: 'Align left',
+    description: 'label stating that text is aligned left'
+  },
+  alignRight: {
+    id: 'fabric.editor.alignRight',
+    defaultMessage: 'Align Right',
+    description: 'label stating that text is aligned right'
+  },
+  alignCenter: {
+    id: 'fabric.editor.alignCenter',
+    defaultMessage: 'Align Center',
+    description: 'label stating that text is aligned center'
+  }
+});

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

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+export var triggerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
+export var expandIconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), "var(--ds-space-negative-100, -8px)");

package/dist/esm/utils/index.js

@@ -0,0 +1,21 @@
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+export var getActiveAlignment = function getActiveAlignment(state) {
+  if (state.selection instanceof CellSelection) {
+    var marks = [];
+    state.selection.forEachCell(function (cell) {
+      var mark = cell.firstChild.marks.filter(function (mark) {
+        return mark.type === state.schema.marks.alignment;
+      })[0];
+      marks.push(mark ? mark.attrs.align : 'start');
+    });
+    return marks.every(function (mark) {
+      return mark === marks[0];
+    }) ? marks[0] : 'start';
+  }
+  var node = findParentNodeOfType([state.schema.nodes.paragraph, state.schema.nodes.heading])(state.selection);
+  var getMark = node && node.node.marks.filter(function (mark) {
+    return mark.type === state.schema.marks.alignment;
+  })[0];
+  return getMark && getMark.attrs.align || 'start';
+};

package/dist/types/commands/index.d.ts

@@ -0,0 +1,4 @@
+import type { Command } from '@atlaskit/editor-common/types';
+import type { AlignmentState } from '../pm-plugins/types';
+export declare const isAlignable: (align?: AlignmentState) => Command;
+export declare const changeAlignment: (align?: AlignmentState) => Command;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { alignmentPlugin } from './plugin';
+export type { AlignmentPlugin } from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,5 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { AlignmentPluginState } from './pm-plugins/types';
+export declare const defaultConfig: AlignmentPluginState;
+export type AlignmentPlugin = NextEditorPlugin<'alignment'>;
+export declare const alignmentPlugin: AlignmentPlugin;

package/dist/types/pm-plugins/keymap.d.ts

@@ -0,0 +1,2 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function keymapPlugin(): SafePlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -0,0 +1,8 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { AlignmentPluginState } from './types';
+export declare function createInitialPluginState(editorState: EditorState, pluginConfig: AlignmentPluginState): AlignmentPluginState;
+export declare const pluginKey: PluginKey<AlignmentPluginState>;
+export declare function createPlugin(dispatch: Dispatch, pluginConfig: AlignmentPluginState): SafePlugin<AlignmentPluginState>;

package/dist/types/pm-plugins/types.d.ts

@@ -0,0 +1,5 @@
+export type AlignmentState = 'start' | 'end' | 'center';
+export type AlignmentPluginState = {
+    align: AlignmentState;
+    isEnabled?: boolean;
+};

package/dist/types/ui/Alignment/AlignmentButton/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import type { AlignmentState } from '../../../pm-plugins/types';
+export interface Props {
+    value: AlignmentState;
+    label: string;
+    isSelected?: boolean;
+    onClick: (value: AlignmentState, shouldClosePopup: boolean) => void;
+    content: React.ReactElement;
+    shortcut?: Keymap;
+}
+declare function AlignmentButton({ label, isSelected, content, shortcut, onClick, value, }: Props): JSX.Element;
+export default AlignmentButton;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { AlignmentState } from '../../pm-plugins/types';
+export interface Props {
+    selectedAlignment?: string;
+    onClick: (value: AlignmentState) => void;
+    className?: string;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/ui/Alignment/styles.d.ts

@@ -0,0 +1 @@
+export declare const alignmentWrapper: import("@emotion/react").SerializedStyles;

package/dist/types/ui/ToolbarAlignment/icon-map.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    alignment: string;
+};
+export declare const IconMap: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { AlignmentPluginState, AlignmentState } from '../../pm-plugins/types';
+export interface State {
+    isOpen: boolean;
+}
+export interface Props {
+    pluginState: AlignmentPluginState;
+    changeAlignment: (align: AlignmentState) => void;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    isReducedSpacing?: boolean;
+    disabled?: boolean;
+}
+export declare class AlignmentToolbar extends React.Component<Props & WrappedComponentProps, State> {
+    static displayName: string;
+    private toolbarItemRef;
+    state: State;
+    render(): jsx.JSX.Element;
+    componentDidUpdate(prevProps: Props): void;
+    private changeAlignment;
+    private toggleOpen;
+    private toggleOpenByKeyboard;
+    private hide;
+    private hideOnEscape;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

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

@@ -0,0 +1,22 @@
+export declare const messages: {
+    alignment: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    alignLeft: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    alignRight: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    alignCenter: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,3 @@
+export declare const triggerWrapper: import("@emotion/react").SerializedStyles;
+export declare const wrapper: import("@emotion/react").SerializedStyles;
+export declare const expandIconWrapper: import("@emotion/react").SerializedStyles;

package/dist/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { AlignmentState } from '../pm-plugins/types';
+export declare const getActiveAlignment: (state: EditorState) => AlignmentState | undefined;

package/dist/types-ts4.5/commands/index.d.ts

@@ -0,0 +1,4 @@
+import type { Command } from '@atlaskit/editor-common/types';
+import type { AlignmentState } from '../pm-plugins/types';
+export declare const isAlignable: (align?: AlignmentState) => Command;
+export declare const changeAlignment: (align?: AlignmentState) => Command;

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

@@ -0,0 +1,2 @@
+export { alignmentPlugin } from './plugin';
+export type { AlignmentPlugin } from './plugin';

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

@@ -0,0 +1,5 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { AlignmentPluginState } from './pm-plugins/types';
+export declare const defaultConfig: AlignmentPluginState;
+export type AlignmentPlugin = NextEditorPlugin<'alignment'>;
+export declare const alignmentPlugin: AlignmentPlugin;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -0,0 +1,2 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function keymapPlugin(): SafePlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -0,0 +1,8 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { AlignmentPluginState } from './types';
+export declare function createInitialPluginState(editorState: EditorState, pluginConfig: AlignmentPluginState): AlignmentPluginState;
+export declare const pluginKey: PluginKey<AlignmentPluginState>;
+export declare function createPlugin(dispatch: Dispatch, pluginConfig: AlignmentPluginState): SafePlugin<AlignmentPluginState>;

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -0,0 +1,5 @@
+export type AlignmentState = 'start' | 'end' | 'center';
+export type AlignmentPluginState = {
+    align: AlignmentState;
+    isEnabled?: boolean;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import type { AlignmentState } from '../../../pm-plugins/types';
+export interface Props {
+    value: AlignmentState;
+    label: string;
+    isSelected?: boolean;
+    onClick: (value: AlignmentState, shouldClosePopup: boolean) => void;
+    content: React.ReactElement;
+    shortcut?: Keymap;
+}
+declare function AlignmentButton({ label, isSelected, content, shortcut, onClick, value, }: Props): JSX.Element;
+export default AlignmentButton;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { AlignmentState } from '../../pm-plugins/types';
+export interface Props {
+    selectedAlignment?: string;
+    onClick: (value: AlignmentState) => void;
+    className?: string;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/ui/Alignment/styles.d.ts

@@ -0,0 +1 @@
+export declare const alignmentWrapper: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    alignment: string;
+};
+export declare const IconMap: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { AlignmentPluginState, AlignmentState } from '../../pm-plugins/types';
+export interface State {
+    isOpen: boolean;
+}
+export interface Props {
+    pluginState: AlignmentPluginState;
+    changeAlignment: (align: AlignmentState) => void;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    isReducedSpacing?: boolean;
+    disabled?: boolean;
+}
+export declare class AlignmentToolbar extends React.Component<Props & WrappedComponentProps, State> {
+    static displayName: string;
+    private toolbarItemRef;
+    state: State;
+    render(): jsx.JSX.Element;
+    componentDidUpdate(prevProps: Props): void;
+    private changeAlignment;
+    private toggleOpen;
+    private toggleOpenByKeyboard;
+    private hide;
+    private hideOnEscape;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;