@atlaskit/editor-plugin-hyperlink 0.0.0

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

@@ -0,0 +1,80 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { addLinkMetadata } from '@atlaskit/editor-common/card';
+import { findFilepaths, getLinkCreationAnalyticsEvent, isLinkInMatches, LinkMatcher, normalizeUrl } from '@atlaskit/editor-common/utils';
+import { createPlugin, createRule } from '@atlaskit/prosemirror-input-rules';
+export function createLinkInputRule(regexp, skipAnalytics = false, editorAnalyticsApi) {
+  // Plain typed text (eg, typing 'www.google.com') should convert to a hyperlink
+  return createRule(regexp, (state, match, start, end) => {
+    const {
+      schema
+    } = state;
+    if (state.doc.rangeHasMark(start, end, schema.marks.link)) {
+      return null;
+    }
+    const link = match;
+    const url = normalizeUrl(link.url);
+    const markType = schema.mark('link', {
+      href: url
+    });
+
+    // Need access to complete text to check if last URL is part of a filepath before linkifying
+    const nodeBefore = state.selection.$from.nodeBefore;
+    if (!nodeBefore || !nodeBefore.isText || !nodeBefore.text) {
+      return null;
+    }
+    const filepaths = findFilepaths(nodeBefore.text,
+    // The position referenced by 'start' is relative to the start of the document, findFilepaths deals with index in a node only.
+    start - (nodeBefore.text.length - link.text.length) // (start of link match) - (whole node text length - link length) gets start of text node, which is used as offset
+    );
+
+    if (isLinkInMatches(start, filepaths)) {
+      const tr = state.tr;
+      return tr;
+    }
+    const from = start;
+    const to = Math.min(start + link.text.length, state.doc.content.size);
+    const tr = state.tr.addMark(from, to, markType);
+
+    // Keep old behavior that will delete the space after the link
+    if (to === end) {
+      tr.insertText(' ');
+    }
+    addLinkMetadata(state.selection, tr, {
+      inputMethod: INPUT_METHOD.AUTO_DETECT
+    });
+    if (skipAnalytics) {
+      return tr;
+    }
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(getLinkCreationAnalyticsEvent(INPUT_METHOD.AUTO_DETECT, url))(tr);
+    return tr;
+  });
+}
+export function createInputRulePlugin(schema, skipAnalytics = false, featureFlags, editorAnalyticsApi) {
+  if (!schema.marks.link) {
+    return;
+  }
+  const urlWithASpaceRule = createLinkInputRule(LinkMatcher.create(), skipAnalytics, editorAnalyticsApi);
+
+  // [something](link) should convert to a hyperlink
+  const markdownLinkRule = createRule(/(^|[^!])\[(.*?)\]\((\S+)\)$/, (state, match, start, end) => {
+    const {
+      schema
+    } = state;
+    const [, prefix, linkText, linkUrl] = match;
+    const url = normalizeUrl(linkUrl).trim();
+    const markType = schema.mark('link', {
+      href: url
+    });
+    const tr = state.tr.replaceWith(start + prefix.length, end, schema.text((linkText || '').trim(), [markType]));
+    addLinkMetadata(state.selection, tr, {
+      inputMethod: INPUT_METHOD.FORMATTING
+    });
+    if (skipAnalytics) {
+      return tr;
+    }
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(getLinkCreationAnalyticsEvent(INPUT_METHOD.FORMATTING, url))(tr);
+    return tr;
+  });
+  return createPlugin('hyperlink', [urlWithASpaceRule, markdownLinkRule]);
+}
+export default createInputRulePlugin;

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

@@ -0,0 +1,65 @@
+import { keymap } from 'prosemirror-keymap';
+import { getLinkMatch } from '@atlaskit/adf-schema';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { addLink, bindKeymapWithCommand, enter, escape, insertNewLine } from '@atlaskit/editor-common/keymaps';
+import { findFilepaths, getLinkCreationAnalyticsEvent, isLinkInMatches } from '@atlaskit/editor-common/utils';
+import { hideLinkToolbar, showLinkToolbar } from '../commands';
+import { stateKey } from '../pm-plugins/main';
+export function createKeymapPlugin(skipAnalytics = false, editorAnalyticsApi) {
+  const list = {};
+  bindKeymapWithCommand(addLink.common, showLinkToolbar(INPUT_METHOD.SHORTCUT, editorAnalyticsApi), list);
+  bindKeymapWithCommand(enter.common, mayConvertLastWordToHyperlink(skipAnalytics, editorAnalyticsApi), list);
+  bindKeymapWithCommand(insertNewLine.common, mayConvertLastWordToHyperlink(skipAnalytics, editorAnalyticsApi), list);
+  bindKeymapWithCommand(escape.common, (state, dispatch, view) => {
+    const hyperlinkPlugin = stateKey.getState(state);
+    if (hyperlinkPlugin.activeLinkMark) {
+      hideLinkToolbar()(state, dispatch);
+      if (view) {
+        view.focus();
+      }
+      return false;
+    }
+    return false;
+  }, list);
+  return keymap(list);
+}
+const mayConvertLastWordToHyperlink = (skipAnalytics, editorAnalyticsApi) => {
+  return function (state, dispatch) {
+    const nodeBefore = state.selection.$from.nodeBefore;
+    if (!nodeBefore || !nodeBefore.isText || !nodeBefore.text) {
+      return false;
+    }
+    const words = nodeBefore.text.split(' ');
+    const lastWord = words[words.length - 1];
+    const match = getLinkMatch(lastWord);
+    if (match) {
+      const hyperlinkedText = match.raw;
+      const start = state.selection.$from.pos - hyperlinkedText.length;
+      const end = state.selection.$from.pos;
+      if (state.doc.rangeHasMark(start, end, state.schema.marks.link)) {
+        return false;
+      }
+      const url = match.url;
+      const markType = state.schema.mark('link', {
+        href: url
+      });
+      const filepaths = findFilepaths(nodeBefore.text, start - (nodeBefore.text.length - hyperlinkedText.length) // The position referenced by 'start' is relative to the start of the document, findFilepaths deals with index in a node only.
+      );
+
+      if (isLinkInMatches(start, filepaths)) {
+        return false;
+      }
+      const tr = state.tr.addMark(start, end, markType);
+      if (dispatch) {
+        if (skipAnalytics) {
+          dispatch(tr);
+        } else {
+          editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(getLinkCreationAnalyticsEvent(INPUT_METHOD.AUTO_DETECT, url))(tr);
+          dispatch(tr);
+        }
+      }
+    }
+    return false;
+  };
+};
+export default createKeymapPlugin;

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

@@ -0,0 +1,261 @@
+import { PluginKey, TextSelection } from 'prosemirror-state';
+import uuid from 'uuid';
+import { InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/utils';
+const isSelectionInsideLink = state => !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
+const isSelectionAroundLink = state => {
+  const {
+    $from,
+    $to
+  } = state.selection;
+  const node = $from.nodeAfter;
+  return !!node && $from.textOffset === 0 && $to.pos - $from.pos === node.nodeSize && !!state.doc.type.schema.marks.link.isInSet(node.marks);
+};
+const mapTransactionToState = (state, tr) => {
+  if (!state) {
+    return undefined;
+  } else if (state.type === InsertStatus.EDIT_LINK_TOOLBAR || state.type === InsertStatus.EDIT_INSERTED_TOOLBAR) {
+    const {
+      pos,
+      deleted
+    } = tr.mapping.mapResult(state.pos, 1);
+    const node = tr.doc.nodeAt(pos);
+    // If the position was not deleted & it is still a link
+    if (!deleted && !!node.type.schema.marks.link.isInSet(node.marks)) {
+      if (node === state.node && pos === state.pos) {
+        return state;
+      }
+      return {
+        ...state,
+        pos,
+        node
+      };
+    }
+    // If the position has been deleted, then require a navigation to show the toolbar again
+    return;
+  } else if (state.type === InsertStatus.INSERT_LINK_TOOLBAR) {
+    return {
+      ...state,
+      from: tr.mapping.map(state.from),
+      to: tr.mapping.map(state.to)
+    };
+  }
+  return;
+};
+const toState = (state, action, editorState) => {
+  // Show insert or edit toolbar
+  if (!state) {
+    switch (action) {
+      case LinkAction.SHOW_INSERT_TOOLBAR:
+        {
+          const {
+            from,
+            to
+          } = editorState.selection;
+          if (canLinkBeCreatedInRange(from, to)(editorState)) {
+            return {
+              type: InsertStatus.INSERT_LINK_TOOLBAR,
+              from,
+              to
+            };
+          }
+          return undefined;
+        }
+      case LinkAction.SELECTION_CHANGE:
+        // If the user has moved their cursor, see if they're in a link
+        const link = getActiveLinkMark(editorState);
+        if (link) {
+          return {
+            ...link,
+            type: InsertStatus.EDIT_LINK_TOOLBAR
+          };
+        }
+        return undefined;
+      default:
+        return undefined;
+    }
+  }
+  // Update toolbar state if selection changes, or if toolbar is hidden
+  if (state.type === InsertStatus.EDIT_LINK_TOOLBAR) {
+    switch (action) {
+      case LinkAction.EDIT_INSERTED_TOOLBAR:
+        {
+          const link = getActiveLinkMark(editorState);
+          if (link) {
+            if (link.pos === state.pos && link.node === state.node) {
+              return {
+                ...state,
+                type: InsertStatus.EDIT_INSERTED_TOOLBAR
+              };
+            }
+            return {
+              ...link,
+              type: InsertStatus.EDIT_INSERTED_TOOLBAR
+            };
+          }
+          return undefined;
+        }
+      case LinkAction.SELECTION_CHANGE:
+        const link = getActiveLinkMark(editorState);
+        if (link) {
+          if (link.pos === state.pos && link.node === state.node) {
+            // Make sure we return the same object, if it's the same link
+            return state;
+          }
+          return {
+            ...link,
+            type: InsertStatus.EDIT_LINK_TOOLBAR
+          };
+        }
+        return undefined;
+      case LinkAction.HIDE_TOOLBAR:
+        return undefined;
+      default:
+        return state;
+    }
+  }
+
+  // Remove toolbar if user changes selection or toolbar is hidden
+  if (state.type === InsertStatus.INSERT_LINK_TOOLBAR) {
+    switch (action) {
+      case LinkAction.SELECTION_CHANGE:
+      case LinkAction.HIDE_TOOLBAR:
+        return undefined;
+      default:
+        return state;
+    }
+  }
+  return;
+};
+const getActiveLinkMark = state => {
+  const {
+    selection: {
+      $from
+    }
+  } = state;
+  if (isSelectionInsideLink(state) || isSelectionAroundLink(state)) {
+    const pos = $from.pos - $from.textOffset;
+    const node = state.doc.nodeAt(pos);
+    return node && node.isText ? {
+      node,
+      pos
+    } : undefined;
+  }
+  return undefined;
+};
+const getActiveText = selection => {
+  const currentSlice = selection.content();
+  if (currentSlice.size === 0) {
+    return;
+  }
+  if (currentSlice.content.childCount === 1 && currentSlice.content.firstChild && selection instanceof TextSelection) {
+    return currentSlice.content.firstChild.textContent;
+  }
+  return;
+};
+export const stateKey = new PluginKey('hyperlinkPlugin');
+export const plugin = (dispatch, editorAppearance) => new SafePlugin({
+  state: {
+    init(_, state) {
+      const canInsertLink = canLinkBeCreatedInRange(state.selection.from, state.selection.to)(state);
+      return {
+        activeText: getActiveText(state.selection),
+        canInsertLink,
+        timesViewed: 0,
+        activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state),
+        editorAppearance
+      };
+    },
+    apply(tr, pluginState, oldState, newState) {
+      let state = pluginState;
+      const action = tr.getMeta(stateKey) && tr.getMeta(stateKey).type;
+      const inputMethod = tr.getMeta(stateKey) && tr.getMeta(stateKey).inputMethod;
+      if (tr.docChanged) {
+        state = {
+          activeText: state.activeText,
+          canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
+          timesViewed: state.timesViewed,
+          inputMethod,
+          activeLinkMark: mapTransactionToState(state.activeLinkMark, tr),
+          editorAppearance
+        };
+      }
+      if (action) {
+        const stateForAnalytics = [LinkAction.SHOW_INSERT_TOOLBAR, LinkAction.EDIT_INSERTED_TOOLBAR].includes(action) ? {
+          timesViewed: ++state.timesViewed,
+          searchSessionId: uuid()
+        } : {
+          timesViewed: state.timesViewed,
+          searchSessionId: state.searchSessionId
+        };
+        state = {
+          activeText: state.activeText,
+          canInsertLink: state.canInsertLink,
+          inputMethod,
+          activeLinkMark: toState(state.activeLinkMark, action, newState),
+          editorAppearance,
+          ...stateForAnalytics
+        };
+      }
+      const hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
+      if (tr.selectionSet && hasPositionChanged) {
+        state = {
+          activeText: getActiveText(newState.selection),
+          canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
+          activeLinkMark: toState(state.activeLinkMark, LinkAction.SELECTION_CHANGE, newState),
+          timesViewed: state.timesViewed,
+          searchSessionId: state.searchSessionId,
+          inputMethod,
+          editorAppearance
+        };
+      }
+      if (!shallowEqual(state, pluginState)) {
+        dispatch(stateKey, state);
+      }
+      return state;
+    }
+  },
+  key: stateKey,
+  props: {
+    handleDOMEvents: {
+      mouseup: (_, event) => {
+        // this prevents redundant selection transaction when clicking on link
+        // link state will be update on slection change which happens on mousedown
+        if (isLinkDirectTarget(event)) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      },
+      mousedown: (view, event) => {
+        // since link clicks are disallowed by browsers inside contenteditable
+        // so we need to handle shift+click selection ourselves in this case
+        if (!event.shiftKey || !isLinkDirectTarget(event)) {
+          return false;
+        }
+        const {
+          state
+        } = view;
+        const {
+          selection: {
+            $anchor
+          }
+        } = state;
+        const newPosition = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY
+        });
+        if ((newPosition === null || newPosition === void 0 ? void 0 : newPosition.pos) != null && newPosition.pos !== $anchor.pos) {
+          const tr = state.tr.setSelection(TextSelection.create(state.doc, $anchor.pos, newPosition.pos));
+          view.dispatch(tr);
+          return true;
+        }
+        return false;
+      }
+    }
+  }
+});
+function isLinkDirectTarget(event) {
+  return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
+}

package/dist/es2019/pm-plugins/toolbar-buttons.js

@@ -0,0 +1,39 @@
+import { PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export const toolbarKey = new PluginKey('hyperlinkToolbarItems');
+export const prependToolbarButtons = ({
+  items,
+  onEscapeCallback,
+  onInsertLinkCallback,
+  view
+}) => {
+  const {
+    state: {
+      tr
+    },
+    dispatch
+  } = view;
+  tr.setMeta(toolbarKey, {
+    items,
+    onEscapeCallback,
+    onInsertLinkCallback
+  });
+  dispatch(tr);
+};
+export const toolbarButtonsPlugin = () => {
+  return new SafePlugin({
+    key: toolbarKey,
+    state: {
+      init: (_, state) => {
+        return undefined;
+      },
+      apply: (tr, pluginState) => {
+        const metaState = tr.getMeta(toolbarKey);
+        if (metaState) {
+          return metaState;
+        }
+        return pluginState;
+      }
+    }
+  });
+};

package/dist/es2019/version.json

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