@atlaskit/editor-plugin-text-formatting 0.1.0

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

@@ -0,0 +1,168 @@
+/** @jsx jsx */
+import { useEffect, useMemo, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
+import { Announcer } from '@atlaskit/editor-common/ui';
+import { compareItemsArrays, isArrayContainsContent } from '../../utils';
+import { FormattingTextDropdownMenu } from './dropdown-menu';
+import { useClearIcon } from './hooks/clear-formatting-icon';
+import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
+import { useResponsiveIconTypeMenu, useResponsiveToolbarButtons } from './hooks/responsive-toolbar-buttons';
+import { MoreButton } from './more-button';
+import { SingleToolbarButtons } from './single-toolbar-buttons';
+const ToolbarFormatting = ({
+  shouldUseResponsiveToolbar,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  editorView,
+  toolbarSize,
+  isReducedSpacing,
+  isToolbarDisabled,
+  intl,
+  editorAnalyticsAPI
+}) => {
+  var _usePreviousState;
+  const editorState = useMemo(() => editorView.state, [editorView.state]);
+  const [message, setMessage] = useState('');
+  const defaultIcons = useFormattingIcons({
+    editorState,
+    intl,
+    isToolbarDisabled,
+    editorAnalyticsAPI
+  });
+  const clearIcon = useClearIcon({
+    editorState,
+    intl,
+    editorAnalyticsAPI
+  });
+  const menuIconTypeList = useResponsiveIconTypeMenu({
+    toolbarSize,
+    responsivenessEnabled: shouldUseResponsiveToolbar
+  });
+  const hasFormattingActive = useHasFormattingActived({
+    editorState: editorView.state,
+    iconTypeList: menuIconTypeList
+  });
+  const {
+    dropdownItems,
+    singleItems
+  } = useResponsiveToolbarButtons({
+    icons: defaultIcons,
+    toolbarSize,
+    responsivenessEnabled: shouldUseResponsiveToolbar
+  });
+  const clearFormattingStatus = intl.formatMessage(toolbarMessages.textFormattingOff);
+  const superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
+  const subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
+  const activeItems = [...dropdownItems, ...singleItems].filter(item => item.isActive);
+  const prevActiveItems = (_usePreviousState = usePreviousState(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
+  const fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
+  const fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
+  let comparedItems;
+  let screenReaderMessage = '';
+  if (prevActiveItems && activeItems.length > prevActiveItems.length) {
+    comparedItems = compareItemsArrays(activeItems, prevActiveItems);
+    screenReaderMessage = intl.formatMessage(toolbarMessages.on, {
+      formattingType: comparedItems[0].content
+    });
+  } else {
+    comparedItems = compareItemsArrays(prevActiveItems, activeItems);
+    if (comparedItems && comparedItems.length) {
+      var _activeItems$;
+      screenReaderMessage = intl.formatMessage(toolbarMessages.off, {
+        formattingType: comparedItems[0].content
+      });
+      if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
+        screenReaderMessage = intl.formatMessage(toolbarMessages.codeOn, {
+          textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
+        });
+      }
+      if (fromSuperscriptToSubscript) {
+        screenReaderMessage = superscriptOffSubscriptOnStatus;
+      }
+      if (fromSubscriptToSuperscript) {
+        screenReaderMessage = subscriptOffSuperscriptOnStatus;
+      }
+    }
+  }
+
+  // handle 'Clear formatting' status for screen readers
+  if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
+    screenReaderMessage = clearFormattingStatus;
+  }
+  const items = useMemo(() => {
+    if (!clearIcon) {
+      return dropdownItems;
+    }
+    return [...dropdownItems, clearIcon];
+  }, [clearIcon, dropdownItems]);
+  const moreFormattingButtonLabel = intl.formatMessage(toolbarMessages.moreFormatting);
+  useEffect(() => {
+    if (screenReaderMessage) {
+      setMessage(screenReaderMessage);
+    }
+  }, [screenReaderMessage]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("span", {
+      css: buttonGroupStyle
+    }, message && jsx(Announcer, {
+      ariaLive: "assertive",
+      text: message,
+      ariaRelevant: "additions",
+      delay: 250
+    }), jsx(SingleToolbarButtons, {
+      items: singleItems,
+      editorView: editorView,
+      isReducedSpacing: isReducedSpacing
+    }), jsx("span", {
+      css: wrapperStyle
+    }, isToolbarDisabled ? jsx("div", null, jsx(MoreButton, {
+      label: moreFormattingButtonLabel,
+      isReducedSpacing: isReducedSpacing,
+      isDisabled: true,
+      isSelected: false,
+      "aria-expanded": undefined,
+      "aria-pressed": undefined
+    })) : jsx(FormattingTextDropdownMenu, {
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      editorView: editorView,
+      isReducedSpacing: isReducedSpacing,
+      moreButtonLabel: moreFormattingButtonLabel,
+      hasFormattingActive: hasFormattingActive,
+      items: items
+    }), jsx("span", {
+      css: separatorStyles
+    })))
+  );
+};
+const Toolbar = ({
+  popupsMountPoint,
+  popupsScrollableElement,
+  toolbarSize,
+  isReducedSpacing,
+  editorView,
+  isToolbarDisabled,
+  shouldUseResponsiveToolbar,
+  intl,
+  editorAnalyticsAPI
+}) => {
+  return jsx(ToolbarFormatting, {
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    toolbarSize: toolbarSize,
+    isReducedSpacing: isReducedSpacing,
+    editorView: editorView,
+    isToolbarDisabled: isToolbarDisabled,
+    shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
+    intl: intl,
+    editorAnalyticsAPI: editorAnalyticsAPI
+  });
+};
+export default injectIntl(Toolbar);

package/dist/es2019/ui/Toolbar/more-button.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { triggerWrapperStyles } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import MoreIcon from '@atlaskit/icon/glyph/editor/more';
+export const MoreButton = /*#__PURE__*/React.memo(({
+  label,
+  'aria-expanded': ariaExpanded,
+  isReducedSpacing,
+  isSelected,
+  isDisabled,
+  onClick,
+  onKeyDown
+}) => {
+  return jsx(ToolbarButton, {
+    disabled: isDisabled,
+    selected: isSelected,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    title: label,
+    iconBefore:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: triggerWrapperStyles
+    }, jsx(MoreIcon, {
+      label: ""
+    })),
+    "aria-expanded": ariaExpanded,
+    "aria-label": label,
+    "aria-haspopup": true
+  });
+});

package/dist/es2019/ui/Toolbar/single-toolbar-buttons.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import { buttonGroupStyle } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
+  items,
+  isReducedSpacing,
+  editorView
+}) => {
+  const onClick = useCallback(command => {
+    return () => {
+      command(editorView.state, editorView.dispatch);
+      return false;
+    };
+  }, [editorView.state, editorView.dispatch]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("span", {
+      css: buttonGroupStyle
+    }, items.map(item => {
+      var _item$ariaLabel;
+      return jsx(ToolbarButton, {
+        key: item.key,
+        testId: `editor-toolbar__${String(item.content)}`,
+        buttonId: item.buttonId,
+        spacing: isReducedSpacing ? 'none' : 'default',
+        onClick: onClick(item.command),
+        selected: item.isActive,
+        disabled: item.isDisabled,
+        title: item.tooltipElement,
+        iconBefore: item.iconElement,
+        "aria-pressed": item.isActive,
+        "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
+        "aria-keyshortcuts": item['aria-keyshortcuts']
+      });
+    }))
+  );
+});

package/dist/es2019/ui/Toolbar/types.js

@@ -0,0 +1,10 @@
+export let IconTypes = /*#__PURE__*/function (IconTypes) {
+  IconTypes["strong"] = "strong";
+  IconTypes["em"] = "em";
+  IconTypes["underline"] = "underline";
+  IconTypes["strike"] = "strike";
+  IconTypes["code"] = "code";
+  IconTypes["subscript"] = "subscript";
+  IconTypes["superscript"] = "superscript";
+  return IconTypes;
+}({});

package/dist/es2019/utils/cell-selection.js

@@ -0,0 +1,5 @@
+export const cellSelectionNodesBetween = (selection, doc, f, startPos) => {
+  selection.forEachCell((cell, cellPos) => {
+    doc.nodesBetween(cellPos, cellPos + cell.nodeSize, f, startPos);
+  });
+};

package/dist/es2019/utils.js

@@ -0,0 +1,74 @@
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
+import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
+export const hasCode = (state, pos) => {
+  const {
+    code
+  } = state.schema.marks;
+  const node = pos >= 0 && state.doc.nodeAt(pos);
+  if (node) {
+    return !!node.marks.filter(mark => mark.type === code).length;
+  }
+  return false;
+};
+
+/**
+ * Determine if a mark (with specific attribute values) exists anywhere in the selection.
+ */
+export const markActive = (state, mark) => {
+  const {
+    from,
+    to,
+    empty
+  } = state.selection;
+  // When the selection is empty, only the active marks apply.
+  if (empty) {
+    return !!mark.isInSet(state.tr.storedMarks || state.selection.$from.marks());
+  }
+  // For a non-collapsed selection, the marks on the nodes matter.
+  let found = false;
+  state.doc.nodesBetween(from, to, node => {
+    found = found || mark.isInSet(node.marks);
+  });
+  return found;
+};
+const blockStylingIsPresent = state => {
+  let {
+    from,
+    to
+  } = state.selection;
+  let isBlockStyling = false;
+  state.doc.nodesBetween(from, to, node => {
+    if (FORMATTING_NODE_TYPES.indexOf(node.type.name) !== -1) {
+      isBlockStyling = true;
+      return false;
+    }
+    return true;
+  });
+  return isBlockStyling;
+};
+const marksArePresent = state => {
+  const activeMarkTypes = FORMATTING_MARK_TYPES.filter(mark => {
+    if (!!state.schema.marks[mark]) {
+      const {
+        $from,
+        empty
+      } = state.selection;
+      const {
+        marks
+      } = state.schema;
+      if (empty) {
+        return !!marks[mark].isInSet(state.storedMarks || $from.marks());
+      }
+      return anyMarkActive(state, marks[mark]);
+    }
+    return false;
+  });
+  return activeMarkTypes.length > 0;
+};
+export const checkFormattingIsPresent = state => {
+  return marksArePresent(state) || blockStylingIsPresent(state);
+};
+export const compareItemsArrays = (items, prevItems) => {
+  return items && items.filter(item => !prevItems.includes(item));
+};
+export const isArrayContainsContent = (items, content) => items.filter(item => item.content === content).length > 0;

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-plugin-text-formatting",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/esm/actions.js

@@ -0,0 +1,168 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { toggleMark } from '@atlaskit/editor-common/mark';
+export var toggleEm = function toggleEm() {
+  return function (state, dispatch) {
+    var em = state.schema.marks.em;
+    if (em) {
+      return toggleMark(em)(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleEmWithAnalytics = function toggleEmWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref) {
+    var inputMethod = _ref.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_ITALIC,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleEm());
+  };
+};
+export var toggleStrike = function toggleStrike() {
+  return function (state, dispatch) {
+    var strike = state.schema.marks.strike;
+    if (strike) {
+      return toggleMark(strike)(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleStrikeWithAnalytics = function toggleStrikeWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref2) {
+    var inputMethod = _ref2.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRIKE,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleStrike());
+  };
+};
+export var toggleStrong = function toggleStrong() {
+  return function (state, dispatch) {
+    var strong = state.schema.marks.strong;
+    if (strong) {
+      return toggleMark(strong)(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleStrongWithAnalytics = function toggleStrongWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref3) {
+    var inputMethod = _ref3.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRONG,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleStrong());
+  };
+};
+export var toggleUnderline = function toggleUnderline() {
+  return function (state, dispatch) {
+    var underline = state.schema.marks.underline;
+    if (underline) {
+      return toggleMark(underline)(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleUnderlineWithAnalytics = function toggleUnderlineWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref4) {
+    var inputMethod = _ref4.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_UNDERLINE,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleUnderline());
+  };
+};
+export var toggleSuperscript = function toggleSuperscript() {
+  return function (state, dispatch) {
+    var subsup = state.schema.marks.subsup;
+    if (subsup) {
+      return toggleMark(subsup, {
+        type: 'sup'
+      })(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleSuperscriptWithAnalytics = function toggleSuperscriptWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref5) {
+    var inputMethod = _ref5.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_SUPER,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleSuperscript());
+  };
+};
+export var toggleSubscript = function toggleSubscript() {
+  return function (state, dispatch) {
+    var subsup = state.schema.marks.subsup;
+    if (subsup) {
+      return toggleMark(subsup, {
+        type: 'sub'
+      })(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleSubscriptWithAnalytics = function toggleSubscriptWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref6) {
+    var inputMethod = _ref6.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_SUB,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleSubscript());
+  };
+};
+export var toggleCode = function toggleCode() {
+  return function (state, dispatch) {
+    var code = state.schema.marks.code;
+    if (code) {
+      return toggleMark(code)(state, dispatch);
+    }
+    return false;
+  };
+};
+export var toggleCodeWithAnalytics = function toggleCodeWithAnalytics(editorAnalyticsAPI) {
+  return function (_ref7) {
+    var inputMethod = _ref7.inputMethod;
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CODE,
+      attributes: {
+        inputMethod: inputMethod
+      }
+    })(toggleCode());
+  };
+};

package/dist/esm/commands/clear-formatting.js

@@ -0,0 +1,101 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { liftTarget } from '@atlaskit/editor-prosemirror/transform';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { cellSelectionNodesBetween } from '../utils/cell-selection';
+export var FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
+export var FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup'];
+var formatTypes = {
+  em: ACTION_SUBJECT_ID.FORMAT_ITALIC,
+  code: ACTION_SUBJECT_ID.FORMAT_CODE,
+  strike: ACTION_SUBJECT_ID.FORMAT_STRIKE,
+  strong: ACTION_SUBJECT_ID.FORMAT_STRONG,
+  underline: ACTION_SUBJECT_ID.FORMAT_UNDERLINE,
+  textColor: ACTION_SUBJECT_ID.FORMAT_COLOR,
+  subsup: 'subsup'
+};
+export function clearFormattingWithAnalytics(inputMethod, editorAnalyticsAPI) {
+  return clearFormatting(inputMethod, editorAnalyticsAPI);
+}
+function clearNodeFormattingOnSelection(state, tr, formattedNodeType, nodeName, formattingCleared) {
+  return function (node, pos) {
+    if (node.type === formattedNodeType) {
+      if (formattedNodeType.isTextblock) {
+        tr.setNodeMarkup(pos, state.schema.nodes.paragraph);
+        formattingCleared.push(nodeName);
+        return false;
+      } else {
+        // In case of panel or blockquote
+        var fromPos = tr.doc.resolve(pos + 1);
+        var toPos = tr.doc.resolve(pos + node.nodeSize - 1);
+        var nodeRange = fromPos.blockRange(toPos);
+        if (nodeRange) {
+          var targetLiftDepth = liftTarget(nodeRange);
+          if (targetLiftDepth || targetLiftDepth === 0) {
+            formattingCleared.push(nodeName);
+            tr.lift(nodeRange, targetLiftDepth);
+          }
+        }
+      }
+    }
+    return true;
+  };
+}
+export function clearFormatting(inputMethod, editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    var formattingCleared = [];
+    FORMATTING_MARK_TYPES.forEach(function (mark) {
+      var _tr$selection = tr.selection,
+        from = _tr$selection.from,
+        to = _tr$selection.to;
+      var markType = state.schema.marks[mark];
+      if (!markType) {
+        return;
+      }
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, function (node, pos) {
+          var isTableCell = node.type === state.schema.nodes.tableCell || node.type === state.schema.nodes.tableHeader;
+          if (!isTableCell) {
+            return true;
+          }
+          if (tr.doc.rangeHasMark(pos, pos + node.nodeSize, markType)) {
+            formattingCleared.push(formatTypes[mark]);
+            tr.removeMark(pos, pos + node.nodeSize, markType);
+          }
+          return false;
+        });
+      } else if (tr.doc.rangeHasMark(from, to, markType)) {
+        formattingCleared.push(formatTypes[mark]);
+        tr.removeMark(from, to, markType);
+      }
+    });
+    FORMATTING_NODE_TYPES.forEach(function (nodeName) {
+      var formattedNodeType = state.schema.nodes[nodeName];
+      var _tr$selection2 = tr.selection,
+        $from = _tr$selection2.$from,
+        $to = _tr$selection2.$to;
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, clearNodeFormattingOnSelection(state, tr, formattedNodeType, nodeName, formattingCleared));
+      } else {
+        tr.doc.nodesBetween($from.pos, $to.pos, clearNodeFormattingOnSelection(state, tr, formattedNodeType, nodeName, formattingCleared));
+      }
+    });
+    tr.setStoredMarks([]);
+    if (formattingCleared.length && inputMethod) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.FORMATTED,
+        eventType: EVENT_TYPE.TRACK,
+        actionSubject: ACTION_SUBJECT.TEXT,
+        actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CLEAR,
+        attributes: {
+          inputMethod: inputMethod,
+          formattingCleared: formattingCleared
+        }
+      })(tr);
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}