@atlaskit/editor-plugin-block-type 1.0.0

package/dist/esm/plugin/messages.js

@@ -0,0 +1,153 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  normal: {
+    id: 'fabric.editor.normal',
+    defaultMessage: 'Normal text',
+    description: 'This is the default text style'
+  },
+  heading1: {
+    id: 'fabric.editor.heading1',
+    defaultMessage: 'Heading 1',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading1Description: {
+    id: 'fabric.editor.heading1Description',
+    defaultMessage: 'Use this for a top level heading',
+    description: 'Description of the main heading, heading 1'
+  },
+  heading2: {
+    id: 'fabric.editor.heading2',
+    defaultMessage: 'Heading 2',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading2Description: {
+    id: 'fabric.editor.heading2Description',
+    defaultMessage: 'Use this for key sections',
+    description: 'Description of a subtitle heading or secondary heading'
+  },
+  heading3: {
+    id: 'fabric.editor.heading3',
+    defaultMessage: 'Heading 3',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading3Description: {
+    id: 'fabric.editor.heading3Description',
+    defaultMessage: 'Use this for sub sections and group headings',
+    description: ''
+  },
+  heading4: {
+    id: 'fabric.editor.heading4',
+    defaultMessage: 'Heading 4',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading4Description: {
+    id: 'fabric.editor.heading4Description',
+    defaultMessage: 'Use this for deep headings',
+    description: ''
+  },
+  heading5: {
+    id: 'fabric.editor.heading5',
+    defaultMessage: 'Heading 5',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading5Description: {
+    id: 'fabric.editor.heading5Description',
+    defaultMessage: 'Use this for grouping list items',
+    description: ''
+  },
+  heading6: {
+    id: 'fabric.editor.heading6',
+    defaultMessage: 'Heading 6',
+    description: 'Used for the title of a section of your document, headings run from 1 (largest size) to 6 (smallest size)'
+  },
+  heading6Description: {
+    id: 'fabric.editor.heading6Description',
+    defaultMessage: 'Use this for low level headings',
+    description: ''
+  },
+  blockquote: {
+    id: 'fabric.editor.blockquote2',
+    defaultMessage: 'Quote',
+    description: 'Quote some text'
+  },
+  blockquoteDescription: {
+    id: 'fabric.editor.blockquote.description',
+    defaultMessage: 'Insert a quote or citation',
+    description: 'Quote some text'
+  },
+  codeblock: {
+    id: 'fabric.editor.codeblock',
+    defaultMessage: 'Code snippet',
+    description: 'Insert a snippet/segment of code (code block)'
+  },
+  codeblockDescription: {
+    id: 'fabric.editor.codeblock.description',
+    defaultMessage: 'Display code with syntax highlighting',
+    description: 'Insert a snippet/segment of code (code block)'
+  },
+  infoPanel: {
+    id: 'fabric.editor.infoPanel',
+    defaultMessage: 'Info panel',
+    description: 'Visually distinguishes your text by adding a background colour (blue, purple, yellow, green, red)'
+  },
+  infoPanelDescription: {
+    id: 'fabric.editor.infoPanel.description',
+    defaultMessage: 'Highlight information in a colored panel',
+    description: 'Visually distinguishes your text by adding a background colour (blue, purple, yellow, green, red)'
+  },
+  notePanel: {
+    id: 'fabric.editor.notePanel',
+    defaultMessage: 'Note panel',
+    description: 'Visually distinguishes your text by adding a note panel'
+  },
+  notePanelDescription: {
+    id: 'fabric.editor.notePanel.description',
+    defaultMessage: 'Add a note in a colored panel',
+    description: 'Visually distinguishes your text by adding a note panel'
+  },
+  successPanel: {
+    id: 'fabric.editor.successPanel',
+    defaultMessage: 'Success panel',
+    description: 'Visually distinguishes your text by adding a success panel'
+  },
+  successPanelDescription: {
+    id: 'fabric.editor.successPanel.description',
+    defaultMessage: 'Add tips in a colored panel',
+    description: 'Visually distinguishes your text by adding a success panel'
+  },
+  warningPanel: {
+    id: 'fabric.editor.warningPanel',
+    defaultMessage: 'Warning panel',
+    description: 'Visually distinguishes your text by adding a warning panel'
+  },
+  warningPanelDescription: {
+    id: 'fabric.editor.warningPanel.description',
+    defaultMessage: 'Add a note of caution in a colored panel',
+    description: 'Visually distinguishes your text by adding a warning panel'
+  },
+  errorPanel: {
+    id: 'fabric.editor.errorPanel',
+    defaultMessage: 'Error panel',
+    description: 'Visually distinguishes your text by adding a error panel'
+  },
+  errorPanelDescription: {
+    id: 'fabric.editor.errorPanel.description',
+    defaultMessage: 'Call out errors in a colored panel',
+    description: 'Visually distinguishes your text by adding a error panel'
+  },
+  customPanel: {
+    id: 'fabric.editor.customPanel',
+    defaultMessage: 'Custom panel',
+    description: 'Visually distinguishes your panel by adding a emoji icon and background color'
+  },
+  customPanelDescription: {
+    id: 'fabric.editor.customPanel.description',
+    defaultMessage: 'Add a note with an emoji and colored background',
+    description: 'Visually distinguishes your panel by adding a emoji icon and background color '
+  },
+  other: {
+    id: 'fabric.editor.other',
+    defaultMessage: 'Others...',
+    description: 'Other text formatting'
+  }
+});

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

@@ -0,0 +1,96 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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';
+var 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: 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
+  var hashRule = headingRule(schema.nodes.heading, MAX_HEADING_LEVEL);
+  var leftNodeReplacementHashRule = createRule(new RegExp("".concat(leafNodeReplacementCharacter, "(#{1,6})\\s$")), function (state, match, start, end) {
+    var level = match[1].length;
+    return insertBlock(state, schema.nodes.heading, start, end, {
+      level: level
+    });
+  });
+
+  // New analytics handler
+  var ruleWithHeadingAnalytics = inputRuleWithAnalytics(function (_state, matchResult) {
+    return {
+      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
+  var greatherThanRule = blockQuoteRule(schema.nodes.blockquote);
+  var leftNodeReplacementGreatherRule = createRule(new RegExp("".concat(leafNodeReplacementCharacter, "\\s*>\\s$")), function (state, _match, start, end) {
+    return insertBlock(state, schema.nodes.blockquote, start, end);
+  });
+
+  // Analytics V3 handler
+  var 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) {
+  var rules = [];
+  if (schema.nodes.heading) {
+    rules.push.apply(rules, _toConsumableArray(getHeadingRules(editorAnalyticsAPI, schema)));
+  }
+  if (schema.nodes.blockquote) {
+    rules.push.apply(rules, _toConsumableArray(getBlockQuoteRules(editorAnalyticsAPI, schema)));
+  }
+  if (rules.length !== 0) {
+    return createPlugin('block-type', rules, {
+      isBlockNodeRule: true
+    });
+  }
+  return;
+}
+export default inputRulePlugin;

package/dist/esm/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';
+var backspaceCommand = chainCommands(cleanUpAtTheStartOfDocument, deleteBlockContent(isNodeAWrappingBlockNode), deleteAndMoveCursor);
+var del = chainCommands(deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), deleteBlockContent(isNodeAWrappingBlockNode), deleteAndMoveCursor);
+export default function keymapPlugin(editorAnalyticsApi, schema, _featureFlags) {
+  var 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/esm/plugin/pm-plugins/main.js

@@ -0,0 +1,142 @@
+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 { 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';
+var blockTypeForNode = function blockTypeForNode(node, schema) {
+  if (node.type === schema.nodes.heading) {
+    var maybeNode = HEADINGS_BY_LEVEL[node.attrs['level']];
+    if (maybeNode) {
+      return maybeNode;
+    }
+  } else if (node.type === schema.nodes.paragraph) {
+    return NORMAL_TEXT;
+  }
+  return OTHER;
+};
+var isBlockTypeSchemaSupported = function 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;
+};
+var detectBlockType = function detectBlockType(availableBlockTypes, state) {
+  // Before a document is loaded, there is no selection.
+  if (!state.selection) {
+    return NORMAL_TEXT;
+  }
+  var blockType;
+  var _state$selection = state.selection,
+    $from = _state$selection.$from,
+    $to = _state$selection.$to;
+  state.doc.nodesBetween($from.pos, $to.pos, function (node) {
+    var nodeBlockType = availableBlockTypes.filter(function (blockType) {
+      return 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;
+};
+var autoformatHeading = function 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 var pluginKey = new PluginKey('blockTypePlugin');
+export var createPlugin = function createPlugin(editorAnalyticsApi, dispatch, lastNodeMustBeParagraph) {
+  var altKeyLocation = 0;
+  return new SafePlugin({
+    appendTransaction: function appendTransaction(_transactions, _oldState, newState) {
+      if (lastNodeMustBeParagraph) {
+        var pos = newState.doc.resolve(newState.doc.content.size - 1);
+        var lastNode = pos.node(1);
+        var paragraph = newState.schema.nodes.paragraph;
+        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: function init(_config, state) {
+        var availableBlockTypes = TEXT_BLOCK_TYPES.filter(function (blockType) {
+          return isBlockTypeSchemaSupported(blockType, state);
+        });
+        var availableWrapperBlockTypes = WRAPPER_BLOCK_TYPES.filter(function (blockType) {
+          return isBlockTypeSchemaSupported(blockType, state);
+        });
+        return {
+          currentBlockType: detectBlockType(availableBlockTypes, state),
+          blockTypesDisabled: areBlockTypesDisabled(state),
+          availableBlockTypes: availableBlockTypes,
+          availableWrapperBlockTypes: availableWrapperBlockTypes
+        };
+      },
+      apply: function apply(_tr, oldPluginState, _oldState, newState) {
+        var newPluginState = _objectSpread(_objectSpread({}, 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: function handleKeyDown(view, event) {
+        var 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/esm/plugin/styles.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common/styles';
+export var blocktypeStyles = function blocktypeStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), blockquoteSharedStyles, headingsSharedStyles(props));
+};

package/dist/esm/plugin/types.js

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

package/dist/esm/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 var messages = defineMessages({
+  textStyles: {
+    id: 'fabric.editor.textStyles',
+    defaultMessage: 'Text styles',
+    description: 'Menu provides access to various heading styles or normal text'
+  }
+});
+export var BlockTypeButton = function BlockTypeButton(props) {
+  var 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)));
+};