@atlaskit/editor-plugin-block-type 1.0.0

package/dist/es2019/plugin/pm-plugins/input-rule.js

@@ -0,0 +1,93 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertBlock } from '@atlaskit/editor-common/commands';
+import { inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
+import { createPlugin, createRule, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
+import { createJoinNodesRule, createWrappingTextBlockRule } from '../utils';
+const MAX_HEADING_LEVEL = 6;
+function getHeadingLevel(match) {
+  return {
+    level: match[1].length
+  };
+}
+function headingRule(nodeType, maxLevel) {
+  return createWrappingTextBlockRule({
+    match: new RegExp('^(#{1,' + maxLevel + '})\\s$'),
+    nodeType,
+    getAttrs: getHeadingLevel
+  });
+}
+function blockQuoteRule(nodeType) {
+  return createJoinNodesRule(/^\s*>\s$/, nodeType);
+}
+
+/**
+ * Get heading rules
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWithHandler[]}
+ */
+function getHeadingRules(editorAnalyticsAPI, schema) {
+  // '# ' for h1, '## ' for h2 and etc
+  const hashRule = headingRule(schema.nodes.heading, MAX_HEADING_LEVEL);
+  const leftNodeReplacementHashRule = createRule(new RegExp(`${leafNodeReplacementCharacter}(#{1,6})\\s$`), (state, match, start, end) => {
+    const level = match[1].length;
+    return insertBlock(state, schema.nodes.heading, start, end, {
+      level
+    });
+  });
+
+  // New analytics handler
+  const ruleWithHeadingAnalytics = inputRuleWithAnalytics((_state, matchResult) => ({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_HEADING,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING,
+      newHeadingLevel: getHeadingLevel(matchResult).level
+    }
+  }), editorAnalyticsAPI);
+  return [ruleWithHeadingAnalytics(hashRule), ruleWithHeadingAnalytics(leftNodeReplacementHashRule)];
+}
+
+/**
+ * Get all block quote input rules
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWithHandler[]}
+ */
+function getBlockQuoteRules(editorAnalyticsAPI, schema) {
+  // '> ' for blockquote
+  const greatherThanRule = blockQuoteRule(schema.nodes.blockquote);
+  const leftNodeReplacementGreatherRule = createRule(new RegExp(`${leafNodeReplacementCharacter}\\s*>\\s$`), (state, _match, start, end) => {
+    return insertBlock(state, schema.nodes.blockquote, start, end);
+  });
+
+  // Analytics V3 handler
+  const ruleWithBlockQuoteAnalytics = inputRuleWithAnalytics({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING
+    }
+  }, editorAnalyticsAPI);
+  return [ruleWithBlockQuoteAnalytics(greatherThanRule), ruleWithBlockQuoteAnalytics(leftNodeReplacementGreatherRule)];
+}
+function inputRulePlugin(editorAnalyticsAPI, schema, featureFlags) {
+  const rules = [];
+  if (schema.nodes.heading) {
+    rules.push(...getHeadingRules(editorAnalyticsAPI, schema));
+  }
+  if (schema.nodes.blockquote) {
+    rules.push(...getBlockQuoteRules(editorAnalyticsAPI, schema));
+  }
+  if (rules.length !== 0) {
+    return createPlugin('block-type', rules, {
+      isBlockNodeRule: true
+    });
+  }
+  return;
+}
+export default inputRulePlugin;

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

@@ -0,0 +1,25 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { backspace, bindKeymapWithCommand, deleteKey, findKeyMapForBrowser, findShortcutByKeymap, forwardDelete, insertNewLine, keymap, moveDown, moveUp, redo as redoKeymap, toggleBlockQuote, undo as undoKeymap } from '@atlaskit/editor-common/keymaps';
+import { createNewParagraphAbove, createNewParagraphBelow, deleteEmptyParagraphAndMoveBlockUp, insertNewLineWithAnalytics } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
+import { redo, undo } from '@atlaskit/editor-prosemirror/history';
+import * as blockTypes from '../block-types';
+import { cleanUpAtTheStartOfDocument, deleteAndMoveCursor, deleteBlockContent, insertBlockQuoteWithAnalytics } from '../commands';
+import { isNodeAWrappingBlockNode } from '../utils';
+const backspaceCommand = chainCommands(cleanUpAtTheStartOfDocument, deleteBlockContent(isNodeAWrappingBlockNode), deleteAndMoveCursor);
+const del = chainCommands(deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), deleteBlockContent(isNodeAWrappingBlockNode), deleteAndMoveCursor);
+export default function keymapPlugin(editorAnalyticsApi, schema, _featureFlags) {
+  const list = {};
+  bindKeymapWithCommand(insertNewLine.common, insertNewLineWithAnalytics(editorAnalyticsApi), list);
+  bindKeymapWithCommand(moveUp.common, createNewParagraphAbove, list);
+  bindKeymapWithCommand(moveDown.common, createNewParagraphBelow, list);
+  bindKeymapWithCommand(findKeyMapForBrowser(redoKeymap), redo, list);
+  bindKeymapWithCommand(undoKeymap.common, undo, list);
+  bindKeymapWithCommand(backspace.common, backspaceCommand, list);
+  bindKeymapWithCommand(deleteKey.common, del, list);
+  bindKeymapWithCommand(forwardDelete.mac, del, list);
+  if (schema.nodes[blockTypes.BLOCK_QUOTE.nodeName]) {
+    bindKeymapWithCommand(findShortcutByKeymap(toggleBlockQuote), insertBlockQuoteWithAnalytics(INPUT_METHOD.KEYBOARD, editorAnalyticsApi), list);
+  }
+  return keymap(list);
+}

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

@@ -0,0 +1,137 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { BLOCK_QUOTE, CODE_BLOCK, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6, HEADINGS_BY_LEVEL, NORMAL_TEXT, OTHER, PANEL, TEXT_BLOCK_TYPES, WRAPPER_BLOCK_TYPES } from '../block-types';
+import { setHeadingWithAnalytics, setNormalTextWithAnalytics } from '../commands';
+import { HEADING_KEYS } from '../consts';
+import { areBlockTypesDisabled } from '../utils';
+const blockTypeForNode = (node, schema) => {
+  if (node.type === schema.nodes.heading) {
+    const maybeNode = HEADINGS_BY_LEVEL[node.attrs['level']];
+    if (maybeNode) {
+      return maybeNode;
+    }
+  } else if (node.type === schema.nodes.paragraph) {
+    return NORMAL_TEXT;
+  }
+  return OTHER;
+};
+const isBlockTypeSchemaSupported = (blockType, state) => {
+  switch (blockType) {
+    case NORMAL_TEXT:
+      return !!state.schema.nodes.paragraph;
+    case HEADING_1:
+    case HEADING_2:
+    case HEADING_3:
+    case HEADING_4:
+    case HEADING_5:
+    case HEADING_6:
+      return !!state.schema.nodes.heading;
+    case BLOCK_QUOTE:
+      return !!state.schema.nodes.blockquote;
+    case CODE_BLOCK:
+      return !!state.schema.nodes.codeBlock;
+    case PANEL:
+      return !!state.schema.nodes.panel;
+  }
+  return;
+};
+const detectBlockType = (availableBlockTypes, state) => {
+  // Before a document is loaded, there is no selection.
+  if (!state.selection) {
+    return NORMAL_TEXT;
+  }
+  let blockType;
+  const {
+    $from,
+    $to
+  } = state.selection;
+  state.doc.nodesBetween($from.pos, $to.pos, node => {
+    const nodeBlockType = availableBlockTypes.filter(blockType => blockType === blockTypeForNode(node, state.schema));
+    if (nodeBlockType.length > 0) {
+      if (!blockType) {
+        blockType = nodeBlockType[0];
+      } else if (blockType !== OTHER && blockType !== nodeBlockType[0]) {
+        blockType = OTHER;
+      }
+    }
+  });
+  return blockType || OTHER;
+};
+const autoformatHeading = (headingLevel, view, editorAnalyticsApi) => {
+  if (headingLevel === 0) {
+    setNormalTextWithAnalytics(INPUT_METHOD.FORMATTING, editorAnalyticsApi)(view.state, view.dispatch);
+  } else {
+    setHeadingWithAnalytics(headingLevel, INPUT_METHOD.FORMATTING, editorAnalyticsApi)(view.state, view.dispatch);
+  }
+  return true;
+};
+export const pluginKey = new PluginKey('blockTypePlugin');
+export const createPlugin = (editorAnalyticsApi, dispatch, lastNodeMustBeParagraph) => {
+  let altKeyLocation = 0;
+  return new SafePlugin({
+    appendTransaction(_transactions, _oldState, newState) {
+      if (lastNodeMustBeParagraph) {
+        const pos = newState.doc.resolve(newState.doc.content.size - 1);
+        const lastNode = pos.node(1);
+        const {
+          paragraph
+        } = newState.schema.nodes;
+        if (lastNode && lastNode.isBlock && lastNode.type !== paragraph) {
+          return newState.tr.insert(newState.doc.content.size, newState.schema.nodes.paragraph.create()).setMeta('addToHistory', false);
+        }
+      }
+    },
+    state: {
+      init(_config, state) {
+        const availableBlockTypes = TEXT_BLOCK_TYPES.filter(blockType => isBlockTypeSchemaSupported(blockType, state));
+        const availableWrapperBlockTypes = WRAPPER_BLOCK_TYPES.filter(blockType => isBlockTypeSchemaSupported(blockType, state));
+        return {
+          currentBlockType: detectBlockType(availableBlockTypes, state),
+          blockTypesDisabled: areBlockTypesDisabled(state),
+          availableBlockTypes,
+          availableWrapperBlockTypes
+        };
+      },
+      apply(_tr, oldPluginState, _oldState, newState) {
+        const newPluginState = {
+          ...oldPluginState,
+          currentBlockType: detectBlockType(oldPluginState.availableBlockTypes, newState),
+          blockTypesDisabled: areBlockTypesDisabled(newState)
+        };
+        if (newPluginState.currentBlockType !== oldPluginState.currentBlockType || newPluginState.blockTypesDisabled !== oldPluginState.blockTypesDisabled) {
+          dispatch(pluginKey, newPluginState);
+        }
+        return newPluginState;
+      }
+    },
+    key: pluginKey,
+    props: {
+      /**
+       * As we only want the left alt key to work for headings shortcuts on Windows
+       * we can't use prosemirror-keymap and need to handle these shortcuts specially
+       * Shortcut on Mac: Cmd-Opt-{heading level}
+       * Shortcut on Windows: Ctrl-LeftAlt-{heading level}
+       */
+      handleKeyDown: (view, event) => {
+        const headingLevel = HEADING_KEYS.indexOf(event.keyCode);
+        if (headingLevel > -1 && event.altKey) {
+          if (browser.mac && event.metaKey) {
+            return autoformatHeading(headingLevel, view, editorAnalyticsApi);
+          } else if (!browser.mac && event.ctrlKey && altKeyLocation !== event.DOM_KEY_LOCATION_RIGHT) {
+            return autoformatHeading(headingLevel, view, editorAnalyticsApi);
+          }
+        } else if (event.key === 'Alt') {
+          // event.location is for the current key only; when a user hits Ctrl-Alt-1 the
+          // location refers to the location of the '1' key
+          // We store the location of the Alt key when it is hit to check against later
+          altKeyLocation = event.location;
+        } else if (!event.altKey) {
+          altKeyLocation = 0;
+        }
+        return false;
+      }
+    }
+  });
+};

package/dist/es2019/plugin/styles.js

@@ -0,0 +1,8 @@
+import { css } from '@emotion/react';
+import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common/styles';
+export const blocktypeStyles = props => css`
+  .ProseMirror {
+    ${blockquoteSharedStyles};
+    ${headingsSharedStyles(props)};
+  }
+`;

package/dist/es2019/plugin/types.js

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

package/dist/es2019/plugin/ui/ToolbarBlockType/blocktype-button.js

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { wrapperStyle } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import TextStyleIcon from '@atlaskit/icon/glyph/editor/text-style';
+import { NORMAL_TEXT } from '../../block-types';
+import { buttonContentReducedSpacingStyle, buttonContentStyle, expandIconWrapperStyle, wrapperSmallStyle } from './styled';
+export const messages = defineMessages({
+  textStyles: {
+    id: 'fabric.editor.textStyles',
+    defaultMessage: 'Text styles',
+    description: 'Menu provides access to various heading styles or normal text'
+  }
+});
+export const BlockTypeButton = props => {
+  const labelTextStyles = props.formatMessage(messages.textStyles);
+  return jsx(ToolbarButton, {
+    spacing: props.isReducedSpacing ? 'none' : 'default',
+    selected: props.selected,
+    className: "block-type-btn",
+    disabled: props.disabled,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    title: labelTextStyles,
+    "aria-label": labelTextStyles,
+    "aria-haspopup": true,
+    "aria-expanded": props['aria-expanded'],
+    iconAfter: jsx("span", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      css: [wrapperStyle, props.isSmall && wrapperSmallStyle],
+      "data-testid": "toolbar-block-type-text-styles-icon"
+    }, props.isSmall && jsx(TextStyleIcon, {
+      label: labelTextStyles
+    }), jsx("span", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      css: expandIconWrapperStyle
+    }, jsx(ExpandIcon, {
+      label: ""
+    })))
+  }, !props.isSmall && jsx("span", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    buttonContentStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    props.isReducedSpacing && buttonContentReducedSpacingStyle]
+  }, jsx(FormattedMessage, props.title || NORMAL_TEXT.title)));
+};

package/dist/es2019/plugin/ui/ToolbarBlockType/index.js

@@ -0,0 +1,185 @@
+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 { findKeymapByDescription, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
+import { separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { BlockTypeButton } from './blocktype-button';
+import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class ToolbarBlockType extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      active: false,
+      isOpenedByKeyboard: false
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _defineProperty(this, "onOpenChange", attrs => {
+      this.setState({
+        ...this.state,
+        active: attrs.isOpen,
+        isOpenedByKeyboard: attrs.isOpenedByKeyboard
+      });
+    });
+    _defineProperty(this, "handleTriggerClick", () => {
+      this.onOpenChange({
+        isOpen: !this.state.active,
+        isOpenedByKeyboard: false
+      });
+    });
+    _defineProperty(this, "handleTriggerByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.onOpenChange({
+          isOpen: !this.state.active,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
+    _defineProperty(this, "createItems", () => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+      const {
+        currentBlockType,
+        availableBlockTypes
+      } = this.props.pluginState;
+      const items = availableBlockTypes.map((blockType, index) => {
+        const isActive = currentBlockType === blockType;
+        const tagName = blockType.tagName || 'p';
+        const Tag = tagName;
+        const keyMap = findKeymapByDescription(blockType.title.defaultMessage);
+        return {
+          content:
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+          jsx("div", {
+            css: blockTypeMenuItemStyle(tagName, isActive)
+          }, jsx(Tag, null, formatMessage(blockType.title))),
+          value: blockType,
+          label: formatMessage(blockType.title),
+          'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
+          keyShortcuts: getAriaKeyshortcuts(keyMap),
+          key: `${blockType.name}-${index}`,
+          elemAfter:
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+          jsx("div", {
+            css: [keyboardShortcut, isActive && keyboardShortcutSelect]
+          }, tooltip(keyMap)),
+          isActive
+        };
+      });
+      return [{
+        items
+      }];
+    });
+    _defineProperty(this, "handleSelectBlockType", ({
+      item,
+      shouldCloseMenu = true
+    }) => {
+      const blockType = item.value;
+      this.props.setBlockType(blockType.name);
+      if (shouldCloseMenu) {
+        this.setState({
+          ...this.state,
+          active: false
+        });
+      }
+    });
+  }
+  render() {
+    const {
+      active,
+      isOpenedByKeyboard
+    } = this.state;
+    const {
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      isSmall,
+      isReducedSpacing,
+      pluginState: {
+        currentBlockType,
+        blockTypesDisabled,
+        availableBlockTypes
+      },
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    const isHeadingDisabled = !availableBlockTypes.some(blockType => blockType.nodeName === 'heading');
+    if (isHeadingDisabled) {
+      return null;
+    }
+    const blockTypeTitles = availableBlockTypes.filter(blockType => blockType.name === currentBlockType.name).map(blockType => blockType.title);
+    if (!this.props.isDisabled && !blockTypesDisabled) {
+      const items = this.createItems();
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        jsx("span", {
+          css: wrapperStyle
+        }, jsx(DropdownMenu, {
+          items: items,
+          onOpenChange: this.onOpenChange,
+          onItemActivated: this.handleSelectBlockType,
+          isOpen: active,
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          zIndex: akEditorMenuZIndex,
+          fitHeight: 360,
+          fitWidth: 106,
+          shouldUseDefaultRole: true,
+          shouldFocusFirstItem: () => {
+            if (isOpenedByKeyboard) {
+              // eslint-disable-next-line @repo/internal/react/no-set-state-inside-render
+              this.setState({
+                ...this.state,
+                isOpenedByKeyboard: false
+              });
+            }
+            return isOpenedByKeyboard;
+          }
+        }, jsx(BlockTypeButton, {
+          isSmall: isSmall,
+          isReducedSpacing: isReducedSpacing,
+          selected: active,
+          disabled: false,
+          title: blockTypeTitles[0],
+          onClick: this.handleTriggerClick,
+          onKeyDown: this.handleTriggerByKeyboard,
+          formatMessage: formatMessage,
+          "aria-expanded": active
+        })), jsx("span", {
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+          css: separatorStyles
+        }))
+      );
+    }
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      jsx("span", {
+        css: wrapperStyle
+      }, jsx(BlockTypeButton, {
+        isSmall: isSmall,
+        isReducedSpacing: isReducedSpacing,
+        selected: active,
+        disabled: true,
+        title: blockTypeTitles[0],
+        onClick: this.handleTriggerClick,
+        onKeyDown: this.handleTriggerByKeyboard,
+        formatMessage: formatMessage,
+        "aria-expanded": active
+      }), jsx("span", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        css: separatorStyles
+      }))
+    );
+  }
+}
+export default injectIntl(ToolbarBlockType);

package/dist/es2019/plugin/ui/ToolbarBlockType/styled.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { css } from '@emotion/react';
+import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { N400 } from '@atlaskit/theme/colors';
+export const blockTypeMenuItemStyle = (tagName, selected) => {
+  // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
+  const selectedStyle = selected ? `${tagName} { color: ${"var(--ds-text, white)"} !important; }` : '';
+  return themeProps => css`
+    ${headingsSharedStyles(themeProps)};
+    > {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-top: 0;
+      }
+    }
+    ${selectedStyle};
+  `;
+};
+export const keyboardShortcut = css`
+  ${shortcutStyle}
+  margin-left: ${"var(--ds-space-200, 16px)"};
+`;
+export const keyboardShortcutSelect = css`
+  color: ${`var(--ds-icon, ${N400})`};
+`;
+export const buttonContentStyle = css`
+  display: flex;
+  min-width: 80px;
+  align-items: center;
+  overflow: hidden;
+  justify-content: center;
+  flex-direction: column;
+  padding: ${"var(--ds-space-075, 6px)"};
+`;
+export const buttonContentReducedSpacingStyle = css`
+  padding: ${"var(--ds-space-100, 8px)"};
+`;
+export const wrapperSmallStyle = css`
+  margin-left: ${"var(--ds-space-050, 4px)"};
+  min-width: 40px;
+`;
+export const expandIconWrapperStyle = css`
+  margin-left: -8px;
+`;

package/dist/es2019/plugin/ui/ToolbarBlockType/toolbar-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const toolbarMessages = defineMessages({
+  textStyles: {
+    id: 'fabric.editor.textStyles',
+    defaultMessage: 'Text styles',
+    description: 'Menu provides access to various heading styles or normal text'
+  }
+});

package/dist/es2019/plugin/utils.js

@@ -0,0 +1,76 @@
+import { createWrappingJoinRule } from '@atlaskit/editor-common/utils';
+import { createRule } from '@atlaskit/prosemirror-input-rules';
+import { WRAPPER_BLOCK_TYPES } from './block-types';
+export const isNodeAWrappingBlockNode = node => {
+  if (!node) {
+    return false;
+  }
+  return WRAPPER_BLOCK_TYPES.some(blockNode => blockNode.name === node.type.name);
+};
+export const createJoinNodesRule = (match, nodeType) => {
+  return createWrappingJoinRule({
+    nodeType,
+    match,
+    getAttrs: {},
+    joinPredicate: (_, node) => node.type === nodeType
+  });
+};
+export const createWrappingTextBlockRule = ({
+  match,
+  nodeType,
+  getAttrs
+}) => {
+  const handler = (state, match, start, end) => {
+    const fixedStart = Math.max(start, 1);
+    const $start = state.doc.resolve(fixedStart);
+    const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
+    const nodeBefore = $start.node(-1);
+    if (nodeBefore && !nodeBefore.canReplaceWith($start.index(-1), $start.indexAfter(-1), nodeType)) {
+      return null;
+    }
+    return state.tr.delete(fixedStart, end).setBlockType(fixedStart, fixedStart, nodeType, attrs);
+  };
+  return createRule(match, handler);
+};
+
+/**
+ * Function will create a list of wrapper blocks present in a selection.
+ */
+function getSelectedWrapperNodes(state) {
+  const nodes = [];
+  if (state.selection) {
+    const {
+      $from,
+      $to
+    } = state.selection;
+    const {
+      blockquote,
+      panel,
+      orderedList,
+      bulletList,
+      listItem,
+      codeBlock,
+      decisionItem,
+      decisionList,
+      taskItem,
+      taskList
+    } = state.schema.nodes;
+    state.doc.nodesBetween($from.pos, $to.pos, node => {
+      if (node.isBlock && [blockquote, panel, orderedList, bulletList, listItem, codeBlock, decisionItem, decisionList, taskItem, taskList].indexOf(node.type) >= 0) {
+        nodes.push(node.type);
+      }
+    });
+  }
+  return nodes;
+}
+
+/**
+ * Function will check if changing block types: Paragraph, Heading is enabled.
+ */
+export function areBlockTypesDisabled(state) {
+  const nodesTypes = getSelectedWrapperNodes(state);
+  const {
+    panel
+  } = state.schema.nodes;
+  return nodesTypes.filter(type => type !== panel).length > 0;
+}

package/dist/es2019/styles.js

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

package/dist/esm/consts.js

@@ -0,0 +1 @@
+export { BLOCK_QUOTE, CODE_BLOCK, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6, NORMAL_TEXT, PANEL } from './plugin/block-types';

package/dist/esm/index.js

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

package/dist/esm/messages.js

@@ -0,0 +1,2 @@
+export { messages } from './plugin/messages';
+export { toolbarMessages } from './plugin/ui/ToolbarBlockType/toolbar-messages';