@atlaskit/editor-plugin-text-formatting 0.1.0

package/dist/cjs/utils.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markActive = exports.isArrayContainsContent = exports.hasCode = exports.compareItemsArrays = exports.checkFormattingIsPresent = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var _clearFormatting = require("./commands/clear-formatting");
+var hasCode = function hasCode(state, pos) {
+  var code = state.schema.marks.code;
+  var node = pos >= 0 && state.doc.nodeAt(pos);
+  if (node) {
+    return !!node.marks.filter(function (mark) {
+      return mark.type === code;
+    }).length;
+  }
+  return false;
+};
+
+/**
+ * Determine if a mark (with specific attribute values) exists anywhere in the selection.
+ */
+exports.hasCode = hasCode;
+var markActive = function markActive(state, mark) {
+  var _state$selection = state.selection,
+    from = _state$selection.from,
+    to = _state$selection.to,
+    empty = _state$selection.empty;
+  // 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.
+  var found = false;
+  state.doc.nodesBetween(from, to, function (node) {
+    found = found || mark.isInSet(node.marks);
+  });
+  return found;
+};
+exports.markActive = markActive;
+var blockStylingIsPresent = function blockStylingIsPresent(state) {
+  var _state$selection2 = state.selection,
+    from = _state$selection2.from,
+    to = _state$selection2.to;
+  var isBlockStyling = false;
+  state.doc.nodesBetween(from, to, function (node) {
+    if (_clearFormatting.FORMATTING_NODE_TYPES.indexOf(node.type.name) !== -1) {
+      isBlockStyling = true;
+      return false;
+    }
+    return true;
+  });
+  return isBlockStyling;
+};
+var marksArePresent = function marksArePresent(state) {
+  var activeMarkTypes = _clearFormatting.FORMATTING_MARK_TYPES.filter(function (mark) {
+    if (!!state.schema.marks[mark]) {
+      var _state$selection3 = state.selection,
+        $from = _state$selection3.$from,
+        empty = _state$selection3.empty;
+      var marks = state.schema.marks;
+      if (empty) {
+        return !!marks[mark].isInSet(state.storedMarks || $from.marks());
+      }
+      return (0, _mark.anyMarkActive)(state, marks[mark]);
+    }
+    return false;
+  });
+  return activeMarkTypes.length > 0;
+};
+var checkFormattingIsPresent = function checkFormattingIsPresent(state) {
+  return marksArePresent(state) || blockStylingIsPresent(state);
+};
+exports.checkFormattingIsPresent = checkFormattingIsPresent;
+var compareItemsArrays = function compareItemsArrays(items, prevItems) {
+  return items && items.filter(function (item) {
+    return !prevItems.includes(item);
+  });
+};
+exports.compareItemsArrays = compareItemsArrays;
+var isArrayContainsContent = function isArrayContainsContent(items, content) {
+  return items.filter(function (item) {
+    return item.content === content;
+  }).length > 0;
+};
+exports.isArrayContainsContent = isArrayContainsContent;

package/dist/cjs/version.json

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

package/dist/es2019/actions.js

@@ -0,0 +1,161 @@
+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 const toggleEm = () => {
+  return (state, dispatch) => {
+    const {
+      em
+    } = state.schema.marks;
+    if (em) {
+      return toggleMark(em)(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleEmWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_ITALIC,
+  attributes: {
+    inputMethod
+  }
+})(toggleEm());
+export const toggleStrike = () => {
+  return (state, dispatch) => {
+    const {
+      strike
+    } = state.schema.marks;
+    if (strike) {
+      return toggleMark(strike)(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleStrikeWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRIKE,
+  attributes: {
+    inputMethod
+  }
+})(toggleStrike());
+export const toggleStrong = () => {
+  return (state, dispatch) => {
+    const {
+      strong
+    } = state.schema.marks;
+    if (strong) {
+      return toggleMark(strong)(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleStrongWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRONG,
+  attributes: {
+    inputMethod
+  }
+})(toggleStrong());
+export const toggleUnderline = () => {
+  return (state, dispatch) => {
+    const {
+      underline
+    } = state.schema.marks;
+    if (underline) {
+      return toggleMark(underline)(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleUnderlineWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_UNDERLINE,
+  attributes: {
+    inputMethod
+  }
+})(toggleUnderline());
+export const toggleSuperscript = () => {
+  return (state, dispatch) => {
+    const {
+      subsup
+    } = state.schema.marks;
+    if (subsup) {
+      return toggleMark(subsup, {
+        type: 'sup'
+      })(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleSuperscriptWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_SUPER,
+  attributes: {
+    inputMethod
+  }
+})(toggleSuperscript());
+export const toggleSubscript = () => {
+  return (state, dispatch) => {
+    const {
+      subsup
+    } = state.schema.marks;
+    if (subsup) {
+      return toggleMark(subsup, {
+        type: 'sub'
+      })(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleSubscriptWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_SUB,
+  attributes: {
+    inputMethod
+  }
+})(toggleSubscript());
+export const toggleCode = () => {
+  return (state, dispatch) => {
+    const {
+      code
+    } = state.schema.marks;
+    if (code) {
+      return toggleMark(code)(state, dispatch);
+    }
+    return false;
+  };
+};
+export const toggleCodeWithAnalytics = editorAnalyticsAPI => ({
+  inputMethod
+}) => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.FORMATTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  eventType: EVENT_TYPE.TRACK,
+  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CODE,
+  attributes: {
+    inputMethod
+  }
+})(toggleCode());

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

@@ -0,0 +1,105 @@
+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 const FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
+export const FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup'];
+const 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
+        let fromPos = tr.doc.resolve(pos + 1);
+        let toPos = tr.doc.resolve(pos + node.nodeSize - 1);
+        const nodeRange = fromPos.blockRange(toPos);
+        if (nodeRange) {
+          const 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) {
+    const {
+      tr
+    } = state;
+    const formattingCleared = [];
+    FORMATTING_MARK_TYPES.forEach(mark => {
+      const {
+        from,
+        to
+      } = tr.selection;
+      const markType = state.schema.marks[mark];
+      if (!markType) {
+        return;
+      }
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, (node, pos) => {
+          const 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(nodeName => {
+      const formattedNodeType = state.schema.nodes[nodeName];
+      const {
+        $from,
+        $to
+      } = tr.selection;
+      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,
+          formattingCleared
+        }
+      })(tr);
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}

package/dist/es2019/commands/text-formatting.js

@@ -0,0 +1,144 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { hasCode, markActive } from '../utils';
+export const moveRight = () => {
+  return (state, dispatch) => {
+    const {
+      code
+    } = state.schema.marks;
+    const {
+      empty,
+      $cursor
+    } = state.selection;
+    if (!empty || !$cursor) {
+      return false;
+    }
+    const {
+      storedMarks
+    } = state.tr;
+    if (code) {
+      const insideCode = markActive(state, code.create());
+      const currentPosHasCode = state.doc.rangeHasMark($cursor.pos, $cursor.pos, code);
+      const nextPosHasCode = state.doc.rangeHasMark($cursor.pos, $cursor.pos + 1, code);
+      const exitingCode = !currentPosHasCode && !nextPosHasCode && (!storedMarks || !!storedMarks.length);
+      const enteringCode = !currentPosHasCode && nextPosHasCode && (!storedMarks || !storedMarks.length);
+
+      // entering code mark (from the left edge): don't move the cursor, just add the mark
+      if (!insideCode && enteringCode) {
+        if (dispatch) {
+          dispatch(state.tr.addStoredMark(code.create()));
+        }
+        return true;
+      }
+
+      // exiting code mark: don't move the cursor, just remove the mark
+      if (insideCode && exitingCode) {
+        if (dispatch) {
+          dispatch(state.tr.removeStoredMark(code));
+        }
+        return true;
+      }
+    }
+    return false;
+  };
+};
+export const moveLeft = () => {
+  return (state, dispatch) => {
+    const {
+      code
+    } = state.schema.marks;
+    const {
+      empty,
+      $cursor
+    } = state.selection;
+    if (!empty || !$cursor) {
+      return false;
+    }
+    const {
+      storedMarks
+    } = state.tr;
+    if (code) {
+      const insideCode = code && markActive(state, code.create());
+      const currentPosHasCode = hasCode(state, $cursor.pos);
+      const nextPosHasCode = hasCode(state, $cursor.pos - 1);
+      const nextNextPosHasCode = hasCode(state, $cursor.pos - 2);
+      const exitingCode = currentPosHasCode && !nextPosHasCode && Array.isArray(storedMarks);
+      const atLeftEdge = nextPosHasCode && !nextNextPosHasCode && (storedMarks === null || Array.isArray(storedMarks) && !!storedMarks.length);
+      const atRightEdge = (exitingCode && Array.isArray(storedMarks) && !storedMarks.length || !exitingCode && storedMarks === null) && !nextPosHasCode && nextNextPosHasCode;
+      const enteringCode = !currentPosHasCode && nextPosHasCode && Array.isArray(storedMarks) && !storedMarks.length;
+
+      // at the right edge: remove code mark and move the cursor to the left
+      if (!insideCode && atRightEdge) {
+        const tr = state.tr.setSelection(Selection.near(state.doc.resolve($cursor.pos - 1)));
+        if (dispatch) {
+          dispatch(tr.removeStoredMark(code));
+        }
+        return true;
+      }
+
+      // entering code mark (from right edge): don't move the cursor, just add the mark
+      if (!insideCode && enteringCode) {
+        if (dispatch) {
+          dispatch(state.tr.addStoredMark(code.create()));
+        }
+        return true;
+      }
+
+      // at the left edge: add code mark and move the cursor to the left
+      if (insideCode && atLeftEdge) {
+        const tr = state.tr.setSelection(Selection.near(state.doc.resolve($cursor.pos - 1)));
+        if (dispatch) {
+          dispatch(tr.addStoredMark(code.create()));
+        }
+        return true;
+      }
+
+      // exiting code mark (or at the beginning of the line): don't move the cursor, just remove the mark
+      const isFirstChild = $cursor.index($cursor.depth - 1) === 0;
+      if (insideCode && (exitingCode || !$cursor.nodeBefore && isFirstChild)) {
+        if (dispatch) {
+          dispatch(state.tr.removeStoredMark(code));
+        }
+        return true;
+      }
+    }
+    return false;
+  };
+};
+const createInlineCodeFromTextInput = (from, to, text) => {
+  return (state, dispatch) => {
+    if (state.selection.empty) {
+      const {
+        nodeBefore: before
+      } = state.doc.resolve(from);
+      const {
+        nodeAfter: after
+      } = state.doc.resolve(to);
+      const hasTickBefore = before && before.text && before.text.endsWith('`');
+      const hasTickAfter = after && after.text && after.text.startsWith('`');
+      if (hasTickBefore && hasTickAfter) {
+        let tr = state.tr.replaceRangeWith(from - 1, to + 1, state.schema.text(text));
+        if (dispatch) {
+          const codeMark = state.schema.marks.code.create();
+          tr = applyMarkOnRange(tr.mapping.map(from - 1), tr.mapping.map(to + 1), false, codeMark, tr).setStoredMarks([codeMark]);
+          dispatch(tr);
+        }
+        return true;
+      }
+    }
+    return false;
+  };
+};
+export const createInlineCodeFromTextInputWithAnalytics = editorAnalyticsAPI => (from, to, text) => {
+  return withAnalytics(editorAnalyticsAPI, {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CODE,
+    attributes: {
+      inputMethod: INPUT_METHOD.FORMATTING
+    }
+  })(createInlineCodeFromTextInput(from, to, text));
+};

package/dist/es2019/commands/transform-to-code.js

@@ -0,0 +1,71 @@
+import { filterChildrenBetween } from '@atlaskit/editor-common/mark';
+const SMART_TO_ASCII = {
+  '…': '...',
+  '→': '->',
+  '←': '<-',
+  '–': '--',
+  '“': '"',
+  '”': '"',
+  '‘': "'",
+  '’': "'"
+};
+const FIND_SMART_CHAR = new RegExp(`[${Object.keys(SMART_TO_ASCII).join('')}]`, 'g');
+const replaceMentionOrEmojiForTextContent = (position, nodeSize, textContent, tr) => {
+  const currentPos = tr.mapping.map(position);
+  const {
+    schema
+  } = tr.doc.type;
+  tr.replaceWith(currentPos, currentPos + nodeSize, schema.text(textContent));
+};
+const replaceSmartCharsToAscii = (position, textContent, tr) => {
+  const {
+    schema
+  } = tr.doc.type;
+  let match;
+  while (match = FIND_SMART_CHAR.exec(textContent)) {
+    const {
+      0: smartChar,
+      index: offset
+    } = match;
+    const replacePos = tr.mapping.map(position + offset);
+    const replacementText = schema.text(SMART_TO_ASCII[smartChar]);
+    tr.replaceWith(replacePos, replacePos + smartChar.length, replacementText);
+  }
+};
+const isNodeTextBlock = schema => {
+  const {
+    mention,
+    text,
+    emoji
+  } = schema.nodes;
+  return (node, _, parent) => {
+    if (node.type === mention || node.type === emoji || node.type === text) {
+      return parent === null || parent === void 0 ? void 0 : parent.isTextblock;
+    }
+    return;
+  };
+};
+export const transformSmartCharsMentionsAndEmojis = (from, to, tr) => {
+  const {
+    schema
+  } = tr.doc.type;
+  const {
+    mention,
+    text,
+    emoji
+  } = schema.nodes;
+  // Traverse through all the nodes within the range and replace them with their plaintext counterpart
+  const children = filterChildrenBetween(tr.doc, from, to, isNodeTextBlock(schema));
+  children.forEach(({
+    node,
+    pos
+  }) => {
+    if (node.type === mention || node.type === emoji) {
+      replaceMentionOrEmojiForTextContent(pos, node.nodeSize, node.attrs.text, tr);
+    } else if (node.type === text && node.text) {
+      const replacePosition = pos > from ? pos : from;
+      const textToReplace = pos > from ? node.text : node.text.substr(from - pos);
+      replaceSmartCharsToAscii(replacePosition, textToReplace, tr);
+    }
+  });
+};

package/dist/es2019/index.js

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