@atlaskit/editor-plugin-code-block 0.1.0

package/dist/es2019/ide-ux/commands.js

@@ -0,0 +1,115 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { forEachLine, getLineInfo, getLinesFromSelection, getStartOfCurrentLine } from './line-handling';
+
+/**
+ * Return the current indentation level
+ * @param indentText - Text in the code block that represent an indentation
+ * @param indentSize - Size of the indentation token in a string
+ */
+function getIndentLevel(indentText, indentSize) {
+  if (indentSize === 0 || indentText.length === 0) {
+    return 0;
+  }
+  return indentText.length / indentSize;
+}
+export const indent = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    text,
+    start
+  } = getLinesFromSelection(state);
+  const {
+    tr,
+    selection
+  } = state;
+  forEachLine(text, (line, offset) => {
+    const {
+      indentText,
+      indentToken
+    } = getLineInfo(line);
+    const indentLevel = getIndentLevel(indentText, indentToken.size);
+    const indentToAdd = indentToken.token.repeat(indentToken.size - indentText.length % indentToken.size || indentToken.size);
+    tr.insertText(indentToAdd, tr.mapping.map(start + offset, -1));
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_INDENT,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod: INPUT_METHOD.KEYBOARD,
+        previousIndentationLevel: indentLevel,
+        newIndentLevel: indentLevel + 1,
+        direction: INDENT_DIRECTION.INDENT,
+        indentType: INDENT_TYPE.CODE_BLOCK
+      }
+    })(tr);
+    if (!selection.empty) {
+      tr.setSelection(TextSelection.create(tr.doc, tr.mapping.map(selection.from, -1), tr.selection.to));
+    }
+  });
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+export const outdent = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    text,
+    start
+  } = getLinesFromSelection(state);
+  const {
+    tr
+  } = state;
+  forEachLine(text, (line, offset) => {
+    const {
+      indentText,
+      indentToken
+    } = getLineInfo(line);
+    if (indentText) {
+      const indentLevel = getIndentLevel(indentText, indentToken.size);
+      const unindentLength = indentText.length % indentToken.size || indentToken.size;
+      tr.delete(tr.mapping.map(start + offset), tr.mapping.map(start + offset + unindentLength));
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.FORMATTED,
+        actionSubject: ACTION_SUBJECT.TEXT,
+        actionSubjectId: ACTION_SUBJECT_ID.FORMAT_INDENT,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: INPUT_METHOD.KEYBOARD,
+          previousIndentationLevel: indentLevel,
+          newIndentLevel: indentLevel - 1,
+          direction: INDENT_DIRECTION.OUTDENT,
+          indentType: INDENT_TYPE.CODE_BLOCK
+        }
+      })(tr);
+    }
+  });
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+export function insertIndent(state, dispatch) {
+  const {
+    text: textAtStartOfLine
+  } = getStartOfCurrentLine(state);
+  const {
+    indentToken
+  } = getLineInfo(textAtStartOfLine);
+  const indentToAdd = indentToken.token.repeat(indentToken.size - textAtStartOfLine.length % indentToken.size || indentToken.size);
+  dispatch(state.tr.insertText(indentToAdd));
+  return true;
+}
+export function insertNewlineWithIndent(state, dispatch) {
+  const {
+    text: textAtStartOfLine
+  } = getStartOfCurrentLine(state);
+  const {
+    indentText
+  } = getLineInfo(textAtStartOfLine);
+  if (indentText && dispatch) {
+    dispatch(state.tr.insertText('\n' + indentText));
+    return true;
+  }
+  return false;
+}

package/dist/es2019/ide-ux/line-handling.js

@@ -0,0 +1,75 @@
+import { getCursor } from '../utils';
+export const isSelectionEntirelyInsideCodeBlock = state => state.selection.$from.sameParent(state.selection.$to) && state.selection.$from.parent.type === state.schema.nodes.codeBlock;
+export const isCursorInsideCodeBlock = state => !!getCursor(state.selection) && isSelectionEntirelyInsideCodeBlock(state);
+export const getStartOfCurrentLine = state => {
+  const {
+    $from
+  } = state.selection;
+  if ($from.nodeBefore && $from.nodeBefore.isText) {
+    const prevNewLineIndex = $from.nodeBefore.text.lastIndexOf('\n');
+    return {
+      text: $from.nodeBefore.text.substring(prevNewLineIndex + 1),
+      pos: $from.start() + prevNewLineIndex + 1
+    };
+  }
+  return {
+    text: '',
+    pos: $from.pos
+  };
+};
+export const getEndOfCurrentLine = state => {
+  const {
+    $to
+  } = state.selection;
+  if ($to.nodeAfter && $to.nodeAfter.isText) {
+    const nextNewLineIndex = $to.nodeAfter.text.indexOf('\n');
+    return {
+      text: $to.nodeAfter.text.substring(0, nextNewLineIndex >= 0 ? nextNewLineIndex : undefined),
+      pos: nextNewLineIndex >= 0 ? $to.pos + nextNewLineIndex : $to.end()
+    };
+  }
+  return {
+    text: '',
+    pos: $to.pos
+  };
+};
+export function getLinesFromSelection(state) {
+  const {
+    pos: start
+  } = getStartOfCurrentLine(state);
+  const {
+    pos: end
+  } = getEndOfCurrentLine(state);
+  const text = state.doc.textBetween(start, end);
+  return {
+    text,
+    start,
+    end
+  };
+}
+export const forEachLine = (text, callback) => {
+  let offset = 0;
+  text.split('\n').forEach(line => {
+    callback(line, offset);
+    offset += line.length + 1;
+  });
+};
+const SPACE = {
+  token: ' ',
+  size: 2,
+  regex: /[^ ]/
+};
+const TAB = {
+  token: '\t',
+  size: 1,
+  regex: /[^\t]/
+};
+export const getLineInfo = line => {
+  const indentToken = line.startsWith('\t') ? TAB : SPACE;
+  const indentLength = line.search(indentToken.regex);
+  const indentText = line.substring(0, indentLength >= 0 ? indentLength : line.length);
+  return {
+    indentToken,
+    indentText
+  };
+};

package/dist/es2019/ide-ux/paired-character-handling.js

@@ -0,0 +1,12 @@
+import { BRACKET_MAP } from './bracket-handling';
+import { QUOTE_MAP } from './quote-handling';
+const PAIRED_CHARACTER_MAP = {
+  ...BRACKET_MAP,
+  ...QUOTE_MAP
+};
+export const isCursorBeforeClosingCharacter = after => {
+  return Object.keys(PAIRED_CHARACTER_MAP).some(leftCharacter => after.startsWith(PAIRED_CHARACTER_MAP[leftCharacter]));
+};
+export const isClosingCharacter = text => {
+  return Object.keys(PAIRED_CHARACTER_MAP).some(leftCharacter => text === PAIRED_CHARACTER_MAP[leftCharacter]);
+};

package/dist/es2019/ide-ux/quote-handling.js

@@ -0,0 +1,32 @@
+export const QUOTE_MAP = {
+  "'": "'",
+  '"': '"',
+  '`': '`'
+};
+export const shouldAutoCloseQuote = (before, after) => {
+  // when directly before a closing bracket
+  if (/^[}\])]/.test(after)) {
+    return true;
+  }
+
+  // exclusion: when directly before a non-whitespace character
+  if (/^[^\s]/.test(after)) {
+    return false;
+  }
+
+  // exclusion: when directly after a letter or quote
+  if (/[A-Za-z0-9]$/.test(before) || /[\'\"\`]$/.test(before)) {
+    return false;
+  }
+  return true;
+};
+export const getAutoClosingQuoteInfo = (before, after) => {
+  const left = Object.keys(QUOTE_MAP).find(item => before.endsWith(item));
+  const right = left ? QUOTE_MAP[left] : undefined;
+  const hasTrailingMatchingQuote = right ? after.startsWith(right) : false;
+  return {
+    left,
+    right,
+    hasTrailingMatchingQuote
+  };
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default as codeBlockPlugin } from './plugin';

package/dist/es2019/language-list.js

@@ -0,0 +1,51 @@
+import { SUPPORTED_LANGUAGES } from '@atlaskit/code/constants';
+
+// We expect alias[0] to be used for the ADF attribute, see ED-2813
+export const DEFAULT_LANGUAGES = [{
+  name: '(None)',
+  alias: ['none'],
+  value: 'none'
+}, ...SUPPORTED_LANGUAGES];
+export function findMatchedLanguage(supportedLanguages, language) {
+  if (!language) {
+    return undefined;
+  }
+  const matches = supportedLanguages.filter(supportedLanguage => {
+    return supportedLanguage.alias.indexOf(language.toLowerCase()) !== -1;
+  });
+  if (matches.length > 0) {
+    return matches[0];
+  }
+  return undefined;
+}
+export function filterSupportedLanguages(supportedLanguages) {
+  if (!supportedLanguages || !supportedLanguages.length) {
+    return DEFAULT_LANGUAGES;
+  }
+  return DEFAULT_LANGUAGES.filter(language => {
+    let i = language.alias.length;
+    while (i--) {
+      if (supportedLanguages.indexOf(language.alias[i]) > -1) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+export function getLanguageIdentifier(language) {
+  return language.alias[0];
+}
+export function createLanguageList(supportedLanguages) {
+  return supportedLanguages.sort((left, right) => {
+    if (left.alias[0] === 'none') {
+      return -1;
+    }
+    if (left.name.toLowerCase() > right.name.toLowerCase()) {
+      return 1;
+    }
+    if (left.name.toLowerCase() < right.name.toLowerCase()) {
+      return -1;
+    }
+    return 0;
+  });
+}

package/dist/es2019/nodeviews/code-block.js

@@ -0,0 +1,126 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import rafSchedule from 'raf-schd';
+import { browser } from '@atlaskit/editor-common/utils';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { resetShouldIgnoreFollowingMutations } from '../actions';
+import { getPluginState } from '../pm-plugins/main-state';
+import { codeBlockClassNames } from '../ui/class-names';
+const MATCH_NEWLINES = new RegExp('\n', 'g');
+const toDOM = node => ['div', {
+  class: 'code-block'
+}, ['div', {
+  class: codeBlockClassNames.start,
+  contenteditable: 'false'
+}], ['div', {
+  class: codeBlockClassNames.contentWrapper
+}, ['div', {
+  class: codeBlockClassNames.gutter,
+  contenteditable: 'false'
+}], ['div', {
+  class: codeBlockClassNames.content
+}, ['code', {
+  'data-language': node.attrs.language || '',
+  spellcheck: 'false',
+  contenteditable: 'true',
+  'data-testid': 'code-block--code'
+}, 0]]], ['div', {
+  class: codeBlockClassNames.end,
+  contenteditable: 'false'
+}]];
+export class CodeBlockView {
+  constructor(_node, view, getPos) {
+    _defineProperty(this, "ensureLineNumbers", rafSchedule(() => {
+      let lines = 1;
+      this.node.forEach(node => {
+        const text = node.text;
+        if (text) {
+          lines += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      while (this.lineNumberGutter.childElementCount < lines) {
+        this.lineNumberGutter.appendChild(document.createElement('span'));
+      }
+      while (this.lineNumberGutter.childElementCount > lines) {
+        this.lineNumberGutter.removeChild(this.lineNumberGutter.lastChild);
+      }
+    }));
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM(_node));
+    this.getPos = getPos;
+    this.view = view;
+    this.node = _node;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.lineNumberGutter = this.dom.querySelector(`.${codeBlockClassNames.gutter}`);
+    this.ensureLineNumbers();
+  }
+  updateDOMAndSelection(savedInnerHTML, newCursorPosition) {
+    var _this$dom;
+    if ((_this$dom = this.dom) !== null && _this$dom !== void 0 && _this$dom.childNodes && this.dom.childNodes.length > 1) {
+      var _contentView$childNod;
+      const contentWrapper = this.dom.childNodes[1];
+      const contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
+      if ((contentView === null || contentView === void 0 ? void 0 : (_contentView$childNod = contentView.childNodes) === null || _contentView$childNod === void 0 ? void 0 : _contentView$childNod.length) > 0) {
+        const codeElement = contentView.firstChild;
+        codeElement.innerHTML = savedInnerHTML;
+
+        // We need to set cursor for the DOM update
+        const textElement = [...codeElement.childNodes].find(child => child.nodeName === '#text');
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.setStart(textElement, newCursorPosition);
+        range.collapse(true);
+        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+      }
+    }
+  }
+  coalesceDOMElements() {
+    var _this$dom2;
+    if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
+      const contentWrapper = this.dom.childNodes[1];
+      const contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
+      if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
+        let savedInnerHTML = '';
+        while (contentView.childNodes.length > 1) {
+          const lastChild = contentView.lastChild;
+          savedInnerHTML = lastChild.innerHTML + savedInnerHTML;
+          contentView.removeChild(lastChild);
+        }
+        const firstChild = contentView.firstChild;
+        savedInnerHTML = firstChild.innerHTML + '\n' + savedInnerHTML;
+        const newCursorPosition = firstChild.innerHTML.length + 1;
+        setTimeout(this.updateDOMAndSelection.bind(this, savedInnerHTML, newCursorPosition), 20);
+      }
+    }
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    if (node !== this.node) {
+      if (node.attrs.language !== this.node.attrs.language) {
+        this.contentDOM.setAttribute('data-language', node.attrs.language || '');
+      }
+      this.node = node;
+      this.ensureLineNumbers();
+      if (browser.android) {
+        this.coalesceDOMElements();
+        resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
+      }
+    }
+    return true;
+  }
+  ignoreMutation(record) {
+    const pluginState = getPluginState(this.view.state);
+    if (pluginState !== null && pluginState !== void 0 && pluginState.shouldIgnoreFollowingMutations) {
+      return true;
+    }
+
+    // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+    return record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter;
+  }
+}
+export const codeBlockNodeView = (node, view, getPos) => new CodeBlockView(node, view, getPos);

package/dist/es2019/plugin-key.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { codeBlock } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconCode } from '@atlaskit/editor-common/quick-insert';
+import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './actions';
+import { codeBlockCopySelectionPlugin } from './pm-plugins/codeBlockCopySelectionPlugin';
+import ideUX from './pm-plugins/ide-ux';
+import { createCodeBlockInputRule } from './pm-plugins/input-rule';
+import keymap from './pm-plugins/keymaps';
+import { createPlugin } from './pm-plugins/main';
+import refreshBrowserSelectionOnChange from './refresh-browser-selection';
+import { getToolbarConfig } from './toolbar';
+const codeBlockPlugin = ({
+  config: options,
+  api
+}) => ({
+  name: 'codeBlock',
+  nodes() {
+    return [{
+      name: 'codeBlock',
+      node: codeBlock
+    }];
+  },
+  pmPlugins() {
+    return [{
+      name: 'codeBlock',
+      plugin: ({
+        getIntl
+      }) => {
+        var _options$appearance;
+        return createPlugin({
+          ...options,
+          getIntl,
+          appearance: (_options$appearance = options === null || options === void 0 ? void 0 : options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : 'comment'
+        });
+      }
+    }, {
+      name: 'codeBlockInputRule',
+      plugin: ({
+        schema
+      }) => {
+        var _api$analytics;
+        return createCodeBlockInputRule(schema, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    }, {
+      name: 'codeBlockIDEKeyBindings',
+      plugin: () => ideUX(api)
+    }, {
+      name: 'codeBlockKeyMap',
+      plugin: ({
+        schema
+      }) => keymap(schema)
+    }, {
+      name: 'codeBlockCopySelection',
+      plugin: () => codeBlockCopySelectionPlugin()
+    }];
+  },
+  // Workaround for a firefox issue where dom selection is off sync
+  // https://product-fabric.atlassian.net/browse/ED-12442
+  onEditorViewStateUpdated(props) {
+    refreshBrowserSelectionOnChange(props.originalTransaction, props.newEditorState);
+  },
+  actions: {
+    /*
+     * Function will insert code block at current selection if block is empty or below current selection and set focus on it.
+     */
+    insertCodeBlock: inputMethod => {
+      var _api$analytics2;
+      return insertCodeBlockWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+    }
+  },
+  pluginsOptions: {
+    quickInsert: ({
+      formatMessage
+    }) => [{
+      id: 'codeblock',
+      title: formatMessage(blockTypeMessages.codeblock),
+      description: formatMessage(blockTypeMessages.codeblockDescription),
+      keywords: ['code block'],
+      priority: 700,
+      keyshortcut: '```',
+      icon: () => /*#__PURE__*/React.createElement(IconCode, null),
+      action(_insert, state) {
+        var _api$analytics3;
+        const tr = createInsertCodeBlockTransaction({
+          state
+        });
+        api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
+          attributes: {
+            inputMethod: INPUT_METHOD.QUICK_INSERT
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(tr);
+        return tr;
+      }
+    }],
+    floatingToolbar: getToolbarConfig(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api)
+  }
+});
+export default codeBlockPlugin;

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

@@ -0,0 +1,4 @@
+export const ACTIONS = {
+  SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS'
+};

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

@@ -0,0 +1,101 @@
+import { getSelectedNodeOrNodeParentByNodeType } from '@atlaskit/editor-common/copy-button';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export const copySelectionPluginKey = new PluginKey('codeBlockCopySelectionPlugin');
+function getSelectionDecorationStartAndEnd({
+  state,
+  transaction
+}) {
+  const codeBlockNode = getSelectedNodeOrNodeParentByNodeType({
+    nodeType: state.schema.nodes.codeBlock,
+    selection: transaction.selection
+  });
+  if (!codeBlockNode) {
+    return {
+      decorationStartAndEnd: undefined
+    };
+  }
+  const decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
+  return {
+    decorationStartAndEnd
+  };
+}
+export function codeBlockCopySelectionPlugin() {
+  return new SafePlugin({
+    key: copySelectionPluginKey,
+    state: {
+      init() {
+        return {
+          decorationStartAndEnd: undefined
+        };
+      },
+      apply(transaction, currentCodeBlockCopySelectionPluginState, _oldState, newState) {
+        switch (transaction.getMeta(copySelectionPluginKey)) {
+          case 'show-selection':
+            {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction
+              });
+            }
+          case 'remove-selection':
+            return {
+              decorationStartAndEnd: undefined
+            };
+          default:
+            // The contents of the code block can change while the selection is being shown
+            // (either from collab edits -- or from the user continuing to type while hovering
+            // the mouse over the copy button).
+            // This ensures the selection is updated in these cases.
+            if (currentCodeBlockCopySelectionPluginState.decorationStartAndEnd !== undefined) {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction
+              });
+            }
+            return currentCodeBlockCopySelectionPluginState;
+        }
+      }
+    },
+    props: {
+      decorations(state) {
+        if (copySelectionPluginKey.getState(state).decorationStartAndEnd) {
+          const [start, end] = copySelectionPluginKey.getState(state).decorationStartAndEnd;
+          return DecorationSet.create(state.doc, [Decoration.inline(start, end, {
+            class: 'ProseMirror-fake-text-selection'
+          })]);
+        }
+        return DecorationSet.empty;
+      }
+    }
+  });
+}
+export function provideVisualFeedbackForCopyButton(state, dispatch) {
+  const tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'show-selection');
+
+  // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+}
+export function removeVisualFeedbackForCopyButton(state, dispatch) {
+  const tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'remove-selection');
+
+  // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+}