@atlaskit/editor-plugin-alignment 0.1.0

package/dist/cjs/utils/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveAlignment = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var getActiveAlignment = exports.getActiveAlignment = function getActiveAlignment(state) {
+  if (state.selection instanceof _cellSelection.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 = (0, _utils.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/es2019/commands/index.js

@@ -0,0 +1,56 @@
+import { changeImageAlignment, toggleBlockMark } from '@atlaskit/editor-common/commands';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Iterates over the commands one after the other,
+ * passes the tr through and dispatches the cumulated transaction
+ */
+function cascadeCommands(cmds) {
+  return (state, dispatch) => {
+    let {
+      tr: baseTr
+    } = state;
+    let shouldDispatch = false;
+    const onDispatchAction = tr => {
+      const selectionJSON = tr.selection.toJSON();
+      baseTr.setSelection(Selection.fromJSON(baseTr.doc, selectionJSON));
+      tr.steps.forEach(st => {
+        baseTr.step(st);
+      });
+      shouldDispatch = true;
+    };
+    cmds.forEach(cmd => cmd(state, onDispatchAction));
+    if (dispatch && shouldDispatch) {
+      dispatch(baseTr);
+      return true;
+    }
+    return false;
+  };
+}
+export const isAlignable = align => (state, dispatch) => {
+  const {
+    nodes: {
+      paragraph,
+      heading
+    },
+    marks: {
+      alignment
+    }
+  } = state.schema;
+  return toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
+    align
+  }, [paragraph, heading])(state, dispatch);
+};
+export const changeAlignment = align => (state, dispatch) => {
+  const {
+    nodes: {
+      paragraph,
+      heading
+    },
+    marks: {
+      alignment
+    }
+  } = state.schema;
+  return cascadeCommands([changeImageAlignment(align), toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
+    align
+  }, [paragraph, heading])])(state, dispatch);
+};

package/dist/es2019/index.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { alignment } from '@atlaskit/adf-schema';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { changeAlignment } from './commands';
+import { keymapPlugin } from './pm-plugins/keymap';
+import { createPlugin, pluginKey } from './pm-plugins/main';
+import ToolbarAlignment from './ui/ToolbarAlignment';
+export const defaultConfig = {
+  align: 'start'
+};
+export const alignmentPlugin = () => ({
+  name: 'alignment',
+  marks() {
+    return [{
+      name: 'alignment',
+      mark: alignment
+    }];
+  },
+  pmPlugins() {
+    return [{
+      name: 'alignmentPlugin',
+      plugin: ({
+        dispatch
+      }) => createPlugin(dispatch, defaultConfig)
+    }, {
+      name: 'annotationKeymap',
+      plugin: () => keymapPlugin()
+    }];
+  },
+  primaryToolbarComponent({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    disabled,
+    isToolbarReducedSpacing
+  }) {
+    return /*#__PURE__*/React.createElement(WithPluginState, {
+      plugins: {
+        align: pluginKey
+      },
+      render: ({
+        align
+      }) => {
+        return /*#__PURE__*/React.createElement(ToolbarAlignment, {
+          pluginState: align,
+          isReducedSpacing: isToolbarReducedSpacing,
+          changeAlignment: align => changeAlignment(align)(editorView.state, editorView.dispatch),
+          disabled: disabled || !align.isEnabled,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement
+        });
+      }
+    });
+  }
+});

package/dist/es2019/pm-plugins/keymap.js

@@ -0,0 +1,8 @@
+import { alignLeft, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { changeAlignment } from '../commands';
+export function keymapPlugin() {
+  const list = {};
+  bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
+  return keymap(list);
+}

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

@@ -0,0 +1,34 @@
+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 const pluginKey = new PluginKey('alignmentPlugin');
+export function createPlugin(dispatch, pluginConfig) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init(_, editorState) {
+        return createInitialPluginState(editorState, pluginConfig);
+      },
+      apply(_tr, state, _prevState, nextState) {
+        const nextPluginState = getActiveAlignment(nextState);
+        const isEnabled = isAlignable(nextPluginState)(nextState);
+        const newState = {
+          ...state,
+          align: nextPluginState,
+          isEnabled
+        };
+        if (nextPluginState !== state.align || isEnabled !== state.isEnabled) {
+          dispatch(pluginKey, newState);
+        }
+        return newState;
+      }
+    }
+  });
+}

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getAriaKeyshortcuts, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+function AlignmentButton({
+  label,
+  isSelected,
+  content,
+  shortcut,
+  onClick,
+  value
+}) {
+  const onClickCallback = e => {
+    // detect if the click event comes from keyboard where screenX and screenY are 0
+    const 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/es2019/ui/Alignment/index.js

@@ -0,0 +1,52 @@
+/** @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';
+const alignmentOptions = [{
+  title: alignmentMessages.alignLeft,
+  shortcut: alignLeft,
+  value: 'start'
+}, {
+  title: alignmentMessages.alignCenter,
+  value: 'center'
+}, {
+  title: alignmentMessages.alignRight,
+  value: 'end'
+}];
+function Alignment({
+  onClick,
+  selectedAlignment,
+  className,
+  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(alignment => {
+    const {
+      value,
+      title,
+      shortcut
+    } = alignment;
+    const 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/es2019/ui/Alignment/styles.js

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+export const alignmentWrapper = css`
+  padding: 0 ${"var(--ds-space-100, 8px)"};
+  display: flex;
+  flex-wrap: wrap;
+  max-width: ${3 * 32}px;
+`;

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

@@ -0,0 +1,30 @@
+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';
+const iconAndMessageMap = {
+  start: {
+    Component: EditorAlignLeftIcon,
+    label: messages.alignLeft
+  },
+  end: {
+    Component: EditorAlignRightIcon,
+    label: messages.alignRight
+  },
+  center: {
+    Component: EditorAlignCenterIcon,
+    label: messages.alignCenter
+  }
+};
+export const IconMap = props => {
+  const {
+    Component,
+    label
+  } = iconAndMessageMap[props.alignment];
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(Component, {
+    label: intl.formatMessage(label)
+  });
+};

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

@@ -0,0 +1,145 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @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 class AlignmentToolbar extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      isOpen: false
+    });
+    _defineProperty(this, "changeAlignment", (align, togglePopup) => {
+      if (togglePopup) {
+        this.toggleOpen();
+      }
+      return this.props.changeAlignment(align);
+    });
+    _defineProperty(this, "toggleOpen", () => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    });
+    _defineProperty(this, "toggleOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpen: !this.state.isOpen
+        });
+      }
+    });
+    _defineProperty(this, "hide", 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 = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
+        }
+      }
+    });
+    _defineProperty(this, "hideOnEscape", () => {
+      var _this$toolbarItemRef2, _this$toolbarItemRef3;
+      this.hide();
+      (_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
+    });
+  }
+  render() {
+    const {
+      isOpen
+    } = this.state;
+    const {
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      isReducedSpacing,
+      pluginState,
+      disabled,
+      intl
+    } = this.props;
+    const 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: event => {
+          if (event instanceof MouseEvent) {
+            this.hide({
+              isOpen: false,
+              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: align => this.changeAlignment(align, false),
+        selectedAlignment: pluginState.align
+      })), jsx("span", {
+        css: separatorStyles
+      }))
+    );
+  }
+  componentDidUpdate(prevProps) {
+    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(() => {
+        var _this$toolbarItemRef$2;
+        const keyboardEvent = new KeyboardEvent('keydown', {
+          bubbles: true,
+          key: 'ArrowDown'
+        });
+        (_this$toolbarItemRef$2 = this.toolbarItemRef.current) === null || _this$toolbarItemRef$2 === void 0 ? void 0 : _this$toolbarItemRef$2.dispatchEvent(keyboardEvent);
+      }, 0);
+    }
+  }
+}
+_defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
+export default injectIntl(AlignmentToolbar);

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

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl-next';
+export const 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/es2019/ui/ToolbarAlignment/styles.js

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+export const triggerWrapper = css`
+  display: flex;
+`;
+export const wrapper = css`
+  display: flex;
+  align-items: center;
+  div {
+    display: flex;
+  }
+`;
+export const expandIconWrapper = css`
+  margin-left: ${"var(--ds-space-negative-100, -8px)"};
+`;

package/dist/es2019/utils/index.js

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

package/dist/esm/commands/index.js

@@ -0,0 +1,56 @@
+import { changeImageAlignment, toggleBlockMark } from '@atlaskit/editor-common/commands';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Iterates over the commands one after the other,
+ * passes the tr through and dispatches the cumulated transaction
+ */
+function cascadeCommands(cmds) {
+  return function (state, dispatch) {
+    var baseTr = state.tr;
+    var shouldDispatch = false;
+    var onDispatchAction = function onDispatchAction(tr) {
+      var selectionJSON = tr.selection.toJSON();
+      baseTr.setSelection(Selection.fromJSON(baseTr.doc, selectionJSON));
+      tr.steps.forEach(function (st) {
+        baseTr.step(st);
+      });
+      shouldDispatch = true;
+    };
+    cmds.forEach(function (cmd) {
+      return cmd(state, onDispatchAction);
+    });
+    if (dispatch && shouldDispatch) {
+      dispatch(baseTr);
+      return true;
+    }
+    return false;
+  };
+}
+export var isAlignable = function isAlignable(align) {
+  return function (state, dispatch) {
+    var _state$schema = state.schema,
+      _state$schema$nodes = _state$schema.nodes,
+      paragraph = _state$schema$nodes.paragraph,
+      heading = _state$schema$nodes.heading,
+      alignment = _state$schema.marks.alignment;
+    return toggleBlockMark(alignment, function () {
+      return !align ? undefined : align === 'start' ? false : {
+        align: align
+      };
+    }, [paragraph, heading])(state, dispatch);
+  };
+};
+export var changeAlignment = function changeAlignment(align) {
+  return function (state, dispatch) {
+    var _state$schema2 = state.schema,
+      _state$schema2$nodes = _state$schema2.nodes,
+      paragraph = _state$schema2$nodes.paragraph,
+      heading = _state$schema2$nodes.heading,
+      alignment = _state$schema2.marks.alignment;
+    return cascadeCommands([changeImageAlignment(align), toggleBlockMark(alignment, function () {
+      return !align ? undefined : align === 'start' ? false : {
+        align: align
+      };
+    }, [paragraph, heading])])(state, dispatch);
+  };
+};

package/dist/esm/index.js

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

package/dist/esm/plugin.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { alignment } from '@atlaskit/adf-schema';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { changeAlignment as _changeAlignment } from './commands';
+import { keymapPlugin } from './pm-plugins/keymap';
+import { createPlugin, pluginKey } from './pm-plugins/main';
+import ToolbarAlignment from './ui/ToolbarAlignment';
+export var defaultConfig = {
+  align: 'start'
+};
+export var alignmentPlugin = function alignmentPlugin() {
+  return {
+    name: 'alignment',
+    marks: function marks() {
+      return [{
+        name: 'alignment',
+        mark: alignment
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'alignmentPlugin',
+        plugin: function plugin(_ref) {
+          var dispatch = _ref.dispatch;
+          return createPlugin(dispatch, defaultConfig);
+        }
+      }, {
+        name: 'annotationKeymap',
+        plugin: function plugin() {
+          return keymapPlugin();
+        }
+      }];
+    },
+    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(WithPluginState, {
+        plugins: {
+          align: pluginKey
+        },
+        render: function render(_ref3) {
+          var align = _ref3.align;
+          return /*#__PURE__*/React.createElement(ToolbarAlignment, {
+            pluginState: align,
+            isReducedSpacing: isToolbarReducedSpacing,
+            changeAlignment: function changeAlignment(align) {
+              return _changeAlignment(align)(editorView.state, editorView.dispatch);
+            },
+            disabled: disabled || !align.isEnabled,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement
+          });
+        }
+      });
+    }
+  };
+};

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

@@ -0,0 +1,8 @@
+import { alignLeft, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { changeAlignment } from '../commands';
+export function keymapPlugin() {
+  var list = {};
+  bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
+  return keymap(list);
+}