@atlaskit/editor-plugin-text-formatting 0.1.0

package/dist/es2019/plugin.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './actions';
+import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
+import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
+import textFormattingCursorPlugin from './pm-plugins/cursor';
+import textFormattingInputRulePlugin from './pm-plugins/input-rule';
+import keymapPlugin from './pm-plugins/keymap';
+import { plugin as pmPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
+import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
+import Toolbar from './ui/Toolbar';
+export const textFormattingPlugin = (options = {}, api) => {
+  var _api$dependencies$ana7, _api$dependencies$ana8, _api$dependencies$ana9, _api$dependencies$ana10, _api$dependencies$ana11, _api$dependencies$ana12, _api$dependencies$ana13;
+  return {
+    name: 'textFormatting',
+    marks() {
+      return [{
+        name: 'em',
+        mark: em
+      }, {
+        name: 'strong',
+        mark: strong
+      }, {
+        name: 'strike',
+        mark: strike
+      }].concat(options.disableCode ? [] : {
+        name: 'code',
+        mark: code
+      }).concat(options.disableSuperscriptAndSubscript ? [] : {
+        name: 'subsup',
+        mark: subsup
+      }).concat(options.disableUnderline ? [] : {
+        name: 'underline',
+        mark: underline
+      });
+    },
+    pmPlugins() {
+      return [{
+        name: 'textFormatting',
+        plugin: ({
+          dispatch
+        }) => {
+          var _api$dependencies$ana;
+          return pmPlugin(dispatch, api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions);
+        }
+      }, {
+        name: 'textFormattingCursor',
+        plugin: () => textFormattingCursorPlugin
+      }, {
+        name: 'textFormattingInputRule',
+        plugin: ({
+          schema
+        }) => {
+          var _api$dependencies$ana2;
+          return textFormattingInputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions);
+        }
+      }, {
+        name: 'textFormattingSmartRule',
+        plugin: () => {
+          var _api$dependencies$ana3;
+          return !options.disableSmartTextCompletion ? textFormattingSmartInputRulePlugin(api === null || api === void 0 ? void 0 : (_api$dependencies$ana3 = api.dependencies.analytics) === null || _api$dependencies$ana3 === void 0 ? void 0 : _api$dependencies$ana3.actions) : undefined;
+        }
+      }, {
+        name: 'textFormattingClear',
+        plugin: ({
+          dispatch
+        }) => clearFormattingPlugin(dispatch)
+      }, {
+        name: 'textFormattingClearKeymap',
+        plugin: () => {
+          var _api$dependencies$ana4;
+          return clearFormattingKeymapPlugin(api === null || api === void 0 ? void 0 : (_api$dependencies$ana4 = api.dependencies.analytics) === null || _api$dependencies$ana4 === void 0 ? void 0 : _api$dependencies$ana4.actions);
+        }
+      }, {
+        name: 'textFormattingKeymap',
+        plugin: ({
+          schema
+        }) => {
+          var _api$dependencies$ana5;
+          return keymapPlugin(schema, api === null || api === void 0 ? void 0 : (_api$dependencies$ana5 = api.dependencies.analytics) === null || _api$dependencies$ana5 === void 0 ? void 0 : _api$dependencies$ana5.actions);
+        }
+      }];
+    },
+    primaryToolbarComponent({
+      editorView,
+      popupsMountPoint,
+      popupsScrollableElement,
+      isToolbarReducedSpacing,
+      toolbarSize,
+      disabled
+    }) {
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          textFormattingState: textFormattingPluginKey,
+          clearFormattingPluginState: clearFormattingPluginKey
+        },
+        render: () => {
+          var _api$dependencies$ana6;
+          return /*#__PURE__*/React.createElement(Toolbar, {
+            editorState: editorView.state,
+            popupsMountPoint: popupsMountPoint,
+            popupsScrollableElement: popupsScrollableElement,
+            toolbarSize: toolbarSize,
+            isReducedSpacing: isToolbarReducedSpacing,
+            editorView: editorView,
+            isToolbarDisabled: disabled,
+            shouldUseResponsiveToolbar: Boolean(options.responsiveToolbarMenu),
+            editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$dependencies$ana6 = api.dependencies.analytics) === null || _api$dependencies$ana6 === void 0 ? void 0 : _api$dependencies$ana6.actions
+          });
+        }
+      });
+    },
+    actions: {
+      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana7 = api.dependencies.analytics) === null || _api$dependencies$ana7 === void 0 ? void 0 : _api$dependencies$ana7.actions),
+      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana8 = api.dependencies.analytics) === null || _api$dependencies$ana8 === void 0 ? void 0 : _api$dependencies$ana8.actions),
+      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions),
+      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana10 = api.dependencies.analytics) === null || _api$dependencies$ana10 === void 0 ? void 0 : _api$dependencies$ana10.actions),
+      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana11 = api.dependencies.analytics) === null || _api$dependencies$ana11 === void 0 ? void 0 : _api$dependencies$ana11.actions),
+      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana12 = api.dependencies.analytics) === null || _api$dependencies$ana12 === void 0 ? void 0 : _api$dependencies$ana12.actions),
+      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 ? void 0 : (_api$dependencies$ana13 = api.dependencies.analytics) === null || _api$dependencies$ana13 === void 0 ? void 0 : _api$dependencies$ana13.actions)
+    }
+  };
+};

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

@@ -0,0 +1,10 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { clearFormattingWithAnalytics } from '../commands/clear-formatting';
+export function keymapPlugin(editorAnalyticsAPI) {
+  const list = {};
+  keymaps.bindKeymapWithCommand(keymaps.clearFormatting.common, clearFormattingWithAnalytics(INPUT_METHOD.SHORTCUT, editorAnalyticsAPI), list);
+  return keymap(list);
+}
+export default keymapPlugin;

package/dist/es2019/pm-plugins/clear-formatting.js

@@ -0,0 +1,26 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { checkFormattingIsPresent } from '../utils';
+export const pluginKey = new PluginKey('clearFormattingPlugin');
+export const plugin = dispatch => new SafePlugin({
+  state: {
+    init(_config, state) {
+      return {
+        formattingIsPresent: checkFormattingIsPresent(state)
+      };
+    },
+    apply(_tr, pluginState, _oldState, newState) {
+      const formattingIsPresent = checkFormattingIsPresent(newState);
+      if (formattingIsPresent !== pluginState.formattingIsPresent) {
+        dispatch(pluginKey, {
+          formattingIsPresent
+        });
+        return {
+          formattingIsPresent
+        };
+      }
+      return pluginState;
+    }
+  },
+  key: pluginKey
+});

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

@@ -0,0 +1,52 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export default new SafePlugin({
+  props: {
+    handleClick(view, clickPos, event) {
+      // Don't apply in Edge as per ED-4546
+      if (navigator && /Edge\/\d/.test(navigator.userAgent)) {
+        return false;
+      }
+
+      // @see ED-6231
+      if (clickPos > view.state.doc.content.size) {
+        return false;
+      }
+      const {
+        code
+      } = view.state.schema.marks;
+      const {
+        paragraph
+      } = view.state.schema.nodes;
+      const $click = view.state.doc.resolve(clickPos);
+      const clickWasAtEdgeOfATextNode = ($click.nodeBefore ? $click.nodeBefore.isInline : $click.nodeAfter) && ($click.nodeAfter ? $click.nodeAfter.isInline : $click.nodeBefore) && $click.textOffset === 0;
+      const clickWasNearACodeMark = code && ($click.nodeBefore && code.isInSet($click.nodeBefore.marks) || $click.nodeAfter && code.isInSet($click.nodeAfter.marks));
+
+      // Find the starting position of the clicked dom-element
+      // TODO: Remove calls to private API
+      const clickedDOMElementPosition = event.target && event.target instanceof Node && view.posAtDOM(event.target);
+      const clickNode = view.state.doc.nodeAt(clickPos);
+      const clickWasAtTextNode = !!(clickNode && clickNode.isText);
+      const clickWasAtEndOfAParagraphNode = $click.parent.type === paragraph && $click.textOffset === 0 && $click.nodeAfter === null;
+      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && (
+      // if click did not occur at a text node or end of paragraph, then
+      // it was at a directly adjacent non-text node, so we skip this manual
+      // text selection logic to preserve that non-text node's selection
+      clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
+        const clickWasInsideNodeDOM = event.target.parentNode === view.domAtPos(clickedDOMElementPosition).node && code.isInSet(view.state.doc.resolve(clickedDOMElementPosition).nodeAfter.marks);
+        const nodeNextToClick = $click.nodeBefore && code.isInSet($click.nodeBefore.marks) ? $click.nodeAfter : $click.nodeBefore;
+
+        // Need to set the selection here to allow clicking between [code('text'),{<>},emoji()]
+        const tr = view.state.tr.setSelection(TextSelection.near($click));
+        if (clickWasInsideNodeDOM) {
+          tr.setStoredMarks([code.create()]);
+        } else {
+          tr.setStoredMarks(nodeNextToClick ? nodeNextToClick.marks : []);
+        }
+        view.dispatch(tr);
+        return true;
+      }
+      return false;
+    }
+  }
+});

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

@@ -0,0 +1,242 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { transformSmartCharsMentionsAndEmojis } from '@atlaskit/editor-common/mark';
+import { inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
+import { createPlugin, createRule, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
+var ValidAutoformatChars = /*#__PURE__*/function (ValidAutoformatChars) {
+  ValidAutoformatChars["STRONG"] = "__";
+  ValidAutoformatChars["STRIKE"] = "~~";
+  ValidAutoformatChars["STRONG_MARKDOWN"] = "**";
+  ValidAutoformatChars["ITALIC_MARKDOWN"] = "*";
+  ValidAutoformatChars["ITALIC"] = "_";
+  ValidAutoformatChars["CODE"] = "`";
+  return ValidAutoformatChars;
+}(ValidAutoformatChars || {});
+export const ValidCombinations = {
+  [ValidAutoformatChars.STRIKE]: [
+  // e.g: _~~lol~~_
+  ValidAutoformatChars.ITALIC,
+  // e.g: __~~lol~~__
+  ValidAutoformatChars.STRONG,
+  // e.g: **~~lol~~**
+  ValidAutoformatChars.STRONG_MARKDOWN,
+  // e.g: *~~lol~~*
+  ValidAutoformatChars.ITALIC_MARKDOWN],
+  [ValidAutoformatChars.STRONG]: [
+  // e.g: ~~__lol__~~
+  ValidAutoformatChars.STRIKE,
+  // e.g: *__lol__*
+  ValidAutoformatChars.ITALIC_MARKDOWN],
+  [ValidAutoformatChars.STRONG_MARKDOWN]: [
+  // e.g: _**lol**_
+  ValidAutoformatChars.ITALIC,
+  // e.g: ~~**lol**~~
+  ValidAutoformatChars.STRIKE],
+  [ValidAutoformatChars.ITALIC_MARKDOWN]: [
+  // e.g: ~~*lol*~~
+  ValidAutoformatChars.STRIKE,
+  // e.g: __*lol*__
+  ValidAutoformatChars.STRONG],
+  [ValidAutoformatChars.ITALIC]: [
+  // e.g: ~~_lol_~~
+  ValidAutoformatChars.STRIKE,
+  // e.g: **_lol_**
+  ValidAutoformatChars.STRONG_MARKDOWN],
+  [ValidAutoformatChars.CODE]: [
+  // e.g: loko (`some code`
+  '( ']
+};
+function addMark(markType, schema, char) {
+  return (state, match, start, end) => {
+    var _schema$marks, _schema$marks$code;
+    const {
+      doc,
+      schema,
+      tr
+    } = state;
+    const textPrefix = state.doc.textBetween(start, start + char.length);
+
+    // fixes the following case: my `*name` is *
+    // expected result: should ignore special characters inside "code"
+    if (textPrefix !== char || schema !== null && schema !== void 0 && (_schema$marks = schema.marks) !== null && _schema$marks !== void 0 && (_schema$marks$code = _schema$marks.code) !== null && _schema$marks$code !== void 0 && _schema$marks$code.isInSet(doc.resolve(start + 1).marks())) {
+      return null;
+    }
+
+    // Prevent autoformatting across hardbreaks
+    let containsHardBreak;
+    doc.nodesBetween(start, end, node => {
+      if (node.type === schema.nodes.hardBreak) {
+        containsHardBreak = true;
+        return false;
+      }
+      return !containsHardBreak;
+    });
+    if (containsHardBreak) {
+      return null;
+    }
+
+    // fixes autoformatting in heading nodes: # Heading *bold*
+    // expected result: should not autoformat *bold*; <h1>Heading *bold*</h1>
+    const startPosResolved = doc.resolve(start);
+    const endPosResolved = doc.resolve(end);
+    if (startPosResolved.sameParent(endPosResolved) && !startPosResolved.parent.type.allowsMarkType(markType)) {
+      return null;
+    }
+    if (markType.name === 'code') {
+      transformSmartCharsMentionsAndEmojis(tr.mapping.map(start), tr.mapping.map(end), tr);
+    }
+    const mappedStart = tr.mapping.map(start);
+    const mappedEnd = tr.mapping.map(end);
+    tr.addMark(mappedStart, mappedEnd, markType.create());
+    const textSuffix = tr.doc.textBetween(mappedEnd - char.length, mappedEnd);
+    if (textSuffix === char) {
+      tr.delete(mappedEnd - char.length, mappedEnd);
+    }
+    if (textPrefix === char) {
+      tr.delete(mappedStart, mappedStart + char.length);
+    }
+    return tr.removeStoredMark(markType);
+  };
+}
+class ReverseRegexExp extends RegExp {
+  exec(str) {
+    if (!str) {
+      return null;
+    }
+    const reverseStr = [...str].reverse().join('');
+    const result = super.exec(reverseStr);
+    if (!result) {
+      return null;
+    }
+    for (let i = 0; i < result.length; i++) {
+      if (result[i] && typeof result[i] === 'string') {
+        result[i] = [...result[i]].reverse().join('');
+      }
+    }
+    if (result.input && typeof result.input === 'string') {
+      result.input = [...result.input].reverse().join('');
+    }
+    if (result.input && result[0]) {
+      result.index = result.input.length - result[0].length;
+    }
+    return result;
+  }
+}
+const buildRegex = char => {
+  const escapedChar = char.replace(/(\W)/g, '\\$1');
+  const combinations = ValidCombinations[char].map(c => c.replace(/(\W)/g, '\\$1')).join('|');
+
+  // Single X - https://regex101.com/r/McT3yq/14/
+  // Double X - https://regex101.com/r/pQUgjx/1/
+  const baseRegex = '^X(?=[^X\\s]).*?[^\\sX]X(?=[\\sOBJECT_REPLACEMENT_CHARACTER]COMBINATIONS|$)'.replace('OBJECT_REPLACEMENT_CHARACTER', leafNodeReplacementCharacter).replace('COMBINATIONS', combinations ? `|${combinations}` : '');
+  const replacedRegex = String.prototype.hasOwnProperty('replaceAll') ? baseRegex.replaceAll('X', escapedChar) : baseRegex.replace(/X/g, escapedChar);
+  return new ReverseRegexExp(replacedRegex);
+};
+export const strongRegex1 = buildRegex(ValidAutoformatChars.STRONG);
+export const strongRegex2 = buildRegex(ValidAutoformatChars.STRONG_MARKDOWN);
+export const italicRegex1 = buildRegex(ValidAutoformatChars.ITALIC);
+export const italicRegex2 = buildRegex(ValidAutoformatChars.ITALIC_MARKDOWN);
+export const strikeRegex = buildRegex(ValidAutoformatChars.STRIKE);
+export const codeRegex = buildRegex(ValidAutoformatChars.CODE);
+
+/**
+ * Create input rules for strong mark
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWrapper[]}
+ */
+function getStrongInputRules(schema, editorAnalyticsAPI) {
+  const ruleWithStrongAnalytics = inputRuleWithAnalytics({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRONG,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING
+    }
+  }, editorAnalyticsAPI);
+  // **string** or __strong__ should bold the text
+  const doubleUnderscoreRule = createRule(strongRegex1, addMark(schema.marks.strong, schema, ValidAutoformatChars.STRONG));
+  const doubleAsterixRule = createRule(strongRegex2, addMark(schema.marks.strong, schema, ValidAutoformatChars.STRONG_MARKDOWN));
+  return [ruleWithStrongAnalytics(doubleUnderscoreRule), ruleWithStrongAnalytics(doubleAsterixRule)];
+}
+
+/**
+ * Create input rules for em mark
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWrapper[]}
+ */
+function getItalicInputRules(schema, editorAnalyticsAPI) {
+  const ruleWithItalicAnalytics = inputRuleWithAnalytics({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_ITALIC,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING
+    }
+  }, editorAnalyticsAPI);
+  const underscoreRule = createRule(italicRegex1, addMark(schema.marks.em, schema, ValidAutoformatChars.ITALIC));
+  const asterixRule = createRule(italicRegex2, addMark(schema.marks.em, schema, ValidAutoformatChars.ITALIC_MARKDOWN));
+  return [ruleWithItalicAnalytics(underscoreRule), ruleWithItalicAnalytics(asterixRule)];
+}
+
+/**
+ * Create input rules for strike mark
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWrapper[]}
+ */
+function getStrikeInputRules(schema, editorAnalyticsAPI) {
+  const ruleWithStrikeAnalytics = inputRuleWithAnalytics({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRIKE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING
+    }
+  }, editorAnalyticsAPI);
+  const doubleTildeRule = createRule(strikeRegex, addMark(schema.marks.strike, schema, ValidAutoformatChars.STRIKE));
+  return [ruleWithStrikeAnalytics(doubleTildeRule)];
+}
+
+/**
+ * Create input rules for code mark
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWrapper[]}
+ */
+function getCodeInputRules(schema, editorAnalyticsAPI) {
+  const ruleWithCodeAnalytics = inputRuleWithAnalytics({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CODE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING
+    }
+  }, editorAnalyticsAPI);
+  const backTickRule = createRule(codeRegex, addMark(schema.marks.code, schema, ValidAutoformatChars.CODE));
+  return [ruleWithCodeAnalytics(backTickRule)];
+}
+export function inputRulePlugin(schema, editorAnalyticsAPI) {
+  const rules = [];
+  if (schema.marks.strong) {
+    rules.push(...getStrongInputRules(schema, editorAnalyticsAPI));
+  }
+  if (schema.marks.em) {
+    rules.push(...getItalicInputRules(schema, editorAnalyticsAPI));
+  }
+  if (schema.marks.strike) {
+    rules.push(...getStrikeInputRules(schema, editorAnalyticsAPI));
+  }
+  if (schema.marks.code) {
+    rules.push(...getCodeInputRules(schema, editorAnalyticsAPI));
+  }
+  if (rules.length !== 0) {
+    return createPlugin('text-formatting', rules);
+  }
+  return;
+}
+export default inputRulePlugin;

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

@@ -0,0 +1,43 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../actions';
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
+  const list = {};
+  if (schema.marks.strong) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleBold.common, toggleStrongWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.em) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleItalic.common, toggleEmWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.code) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleCode.common, toggleCodeWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.strike) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleStrikethrough.common, toggleStrikeWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.subsup) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, toggleSubscriptWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.subsup) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, toggleSuperscriptWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.underline) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, toggleUnderlineWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  return keymap(list);
+}

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

@@ -0,0 +1,110 @@
+// TODO: Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
+// import { toggleMark } from '@atlaskit/editor-common/mark';
+
+import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { shallowEqual } from '@atlaskit/editor-common/utils';
+import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
+import { createInlineCodeFromTextInputWithAnalytics } from '../commands/text-formatting';
+import * as commands from '../commands/text-formatting';
+import { pluginKey } from './plugin-key';
+export { pluginKey };
+const getTextFormattingState = (editorState, editorAnalyticsAPI) => {
+  const {
+    em,
+    code,
+    strike,
+    strong,
+    subsup,
+    underline
+  } = editorState.schema.marks;
+  const state = {};
+  if (code) {
+    state.codeActive = anyMarkActive(editorState, code.create());
+    state.codeDisabled = !toggleMark(code)(editorState);
+  }
+  if (em) {
+    state.emActive = anyMarkActive(editorState, em);
+    state.emDisabled = state.codeActive ? true : !toggleMark(em)(editorState);
+  }
+  if (strike) {
+    state.strikeActive = anyMarkActive(editorState, strike);
+    state.strikeDisabled = state.codeActive ? true : !toggleMark(strike)(editorState);
+  }
+  if (strong) {
+    state.strongActive = anyMarkActive(editorState, strong);
+    state.strongDisabled = state.codeActive ? true : !toggleMark(strong)(editorState);
+  }
+  if (subsup) {
+    const subMark = subsup.create({
+      type: 'sub'
+    });
+    const supMark = subsup.create({
+      type: 'sup'
+    });
+    state.subscriptActive = anyMarkActive(editorState, subMark);
+    state.subscriptDisabled = state.codeActive ? true : !toggleMark(subsup, {
+      type: 'sub'
+    })(editorState);
+    state.superscriptActive = anyMarkActive(editorState, supMark);
+    state.superscriptDisabled = state.codeActive ? true : !toggleMark(subsup, {
+      type: 'sup'
+    })(editorState);
+  }
+  if (underline) {
+    state.underlineActive = anyMarkActive(editorState, underline);
+    state.underlineDisabled = state.codeActive ? true : !toggleMark(underline)(editorState);
+  }
+  return state;
+};
+export const plugin = (dispatch, editorAnalyticsAPI) => new SafePlugin({
+  state: {
+    init(_config, state) {
+      return getTextFormattingState(state, editorAnalyticsAPI);
+    },
+    apply(_tr, pluginState, _oldState, newState) {
+      const state = getTextFormattingState(newState, editorAnalyticsAPI);
+      if (!shallowEqual(pluginState, state)) {
+        dispatch(pluginKey, state);
+        return state;
+      }
+      return pluginState;
+    }
+  },
+  key: pluginKey,
+  props: {
+    handleKeyDown(view, event) {
+      const {
+        state,
+        dispatch
+      } = view;
+      if (event.key === keymapMoveRight.common && !event.metaKey) {
+        return commands.moveRight()(state, dispatch);
+      } else if (event.key === keymapMoveLeft.common && !event.metaKey) {
+        return commands.moveLeft()(state, dispatch);
+      }
+      return false;
+    },
+    handleTextInput(view, from, to, text) {
+      const {
+        state,
+        dispatch
+      } = view;
+      const {
+        schema,
+        selection: {
+          $from: {
+            parent: {
+              type: parentNodeType
+            }
+          }
+        }
+      } = state;
+      if (parentNodeType.allowsMarkType(schema.marks.code)) {
+        return createInlineCodeFromTextInputWithAnalytics(editorAnalyticsAPI)(from, to, text)(state, dispatch);
+      }
+      return false;
+    }
+  }
+});

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('textFormatting');