Improve cmd-click to handle references too (#898)

Author: cyanzhong

CoreEditor/index.ts

@@ -51,7 +51,7 @@ const config = import.meta.env.PROD ? window.config : {
   indentBehavior: 'paragraph',
   localizable: {
     previewButtonTitle: 'Preview',
-    cmdClickToOpenLink: '⌘-click to open link',
+    cmdClickToFollow: '⌘-click to follow',
     cmdClickToToggleTodo: '⌘-click to toggle todo',
   },
 } as Config;

CoreEditor/src/bridge/native/core.ts

@@ -16,4 +16,5 @@ export interface NativeModuleCore extends NativeModule {
   notifyContentOffsetDidChange(): void;
   notifyCompositionEnded({ selectedLineColumn }: { selectedLineColumn: LineColumnInfo }): void;
   notifyLinkClicked({ link }: { link: string }): void;
+  notifyLightWarning(): void;
 }

CoreEditor/src/config.ts

@@ -16,7 +16,7 @@ export interface Localizable {
   unfoldLine: string;
   // Others
   previewButtonTitle: string;
-  cmdClickToOpenLink: string;
+  cmdClickToFollow: string;
   cmdClickToToggleTodo: string;
 }
 

CoreEditor/src/modules/lezer/index.ts

@@ -1,8 +1,39 @@
+import { EditorState } from '@codemirror/state';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import { SyntaxNodeRef } from '@lezer/common';
 import { parser as htmlParser } from '@lezer/html';
 import { parser as markdownParser } from '@lezer/markdown';
 import { replaceRange } from '../../common/utils';
 import { takePossibleNewline } from '../lineEndings';
 
+export function getSyntaxTree(state: EditorState, sizeLimit = 102400) {
+  const length = state.doc.length;
+  // When the doc is small enough (default 100 KB), we can safely try getting a parse tree
+  if (length < sizeLimit) {
+    return ensureSyntaxTree(state, length) ?? syntaxTree(state);
+  }
+
+  // Note that, it's not going to iterate the entire tree (might not have been parsed).
+  //
+  // This is by design because of potential performance issues.
+  return syntaxTree(state);
+}
+
+export function getNodesNamed(state: EditorState, nodeName: string) {
+  const nodes: SyntaxNodeRef[] = [];
+
+  getSyntaxTree(state).iterate({
+    from: 0, to: state.doc.length,
+    enter: node => {
+      if (node.name === nodeName) {
+        nodes.push(node.node);
+      }
+    },
+  });
+
+  return nodes;
+}
+
 export function extractComments(source: string) {
   // Fail fast since we cannot find an open tag of comments
   if (!source.includes('<!--')) {

CoreEditor/src/modules/toc/index.ts

@@ -1,8 +1,8 @@
 import { KeyBinding } from '@codemirror/view';
 import { EditorSelection } from '@codemirror/state';
-import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
 import { HeadingInfo } from './types';
 import { frontMatterRange } from '../frontMatter';
+import { getSyntaxTree } from '../lezer';
 import { scrollToSelection } from '../selection';
 import { saveGoBackSelection } from '../selection/navigate';
 import selectWithRanges from '../selection/selectWithRanges';
@@ -32,20 +32,7 @@ export function getTableOfContents() {
   const state = editor.state;
   const results: HeadingInfo[] = [];
 
-  const tree = (() => {
-    const length = state.doc.length;
-    // When the doc is small enough (100 KB), we can safely try getting a parse tree
-    if (length < 100 * 1024) {
-      return ensureSyntaxTree(state, length) ?? syntaxTree(state);
-    }
-
-    // Note that, it's not going to iterate the entire tree (might not have been parsed).
-    //
-    // This is by design because of potential performance issues.
-    return syntaxTree(state);
-  })();
-
-  tree.iterate({
+  getSyntaxTree(state).iterate({
     from: 0, to: state.doc.length,
     enter: node => {
       // Detect both ATXHeading and SetextHeading

CoreEditor/src/styling/markdown.ts

@@ -5,7 +5,7 @@ import { markdownMathExtension as mathExtension } from '../@vendor/joplin/markdo
 import { tags } from './builder';
 import { listIndentStyle } from './nodes/indent';
 import { inlineCodeStyle, codeBlockStyle, previewMermaid, previewMath } from './nodes/code';
-import { linkStyle } from './nodes/link';
+import { linkStyles } from './nodes/link';
 import { previewTable, tableStyle } from './nodes/table';
 import { frontMatterStyle } from './nodes/frontMatter';
 import { taskMarkerStyle } from './nodes/task';
@@ -72,7 +72,7 @@ export const markdownExtendedData = {
 export const renderExtensions = [
   inlineCodeStyle,
   codeBlockStyle,
-  linkStyle,
+  linkStyles,
   listIndentStyle,
   tableStyle,
   frontMatterStyle,

CoreEditor/src/styling/nodes/link.ts

@@ -1,11 +1,18 @@
-import { Decoration, MatchDecorator } from '@codemirror/view';
+import { Decoration, EditorView, MatchDecorator } from '@codemirror/view';
+import { EditorSelection, Extension } from '@codemirror/state';
+import { SyntaxNodeRef } from '@lezer/common';
 import { createDecoPlugin } from '../helper';
+import { createDecos } from '../matchers/lezer';
 import { isReleaseMode } from '../../common/utils';
 import { isMetaKeyDown } from '../../modules/events';
+import { getNodesNamed } from '../../modules/lezer';
 
-// Fragile approach, but we only use it for link clicking, it should be fine
-const regexp = /[a-zA-Z][a-zA-Z0-9+.-]*:\/\/\/?([a-zA-Z0-9-]+\.)?[-a-zA-Z0-9@:%._+~#=]+(\.[a-z]+)?\b([-a-zA-Z0-9@:%._+~#=?&//]*)|(\[.*?\]\()(.+?)[\s)]/g;
 const className = 'cm-md-link';
+const regexp = {
+  standard: /[a-zA-Z][a-zA-Z0-9+.-]*:\/\/\/?([a-zA-Z0-9-]+\.)?[-a-zA-Z0-9@:%._+~#=]+(\.[a-z]+)?\b([-a-zA-Z0-9@:%._+~#=?&//]*)|(\[.*?\]\()(.+?)[\s)]/g,
+  footnote: /^\[\^[^\]]+\]$/,
+  reference: /^\[[^\]]+\] ?\[([^\]]+)\]$/,
+};
 
 declare global {
   interface Window {
@@ -14,22 +21,20 @@ declare global {
   }
 }
 
-export const linkStyle = createDecoPlugin(() => {
-  window._startLinkClickable = startClickable;
-  window._stopLinkClickable = stopClickable;
+window._startLinkClickable = startClickable;
+window._stopLinkClickable = stopClickable;
 
+/**
+ * For standard links like `https://github.com` and `[markdown][link]`.
+ */
+const standardStyle = createDecoPlugin(() => {
   const matcher = new MatchDecorator({
-    regexp,
+    // Fragile approach, but we only use it for link clicking, it should be fine
+    regexp: regexp.standard,
     boundary: /\S/,
     decorate: (add, from, to, match) => {
-      const deco = Decoration.mark({
-        class: className,
-        attributes: {
-          title: window.config.localizable?.cmdClickToOpenLink ?? '',
-          onmouseenter: '_startLinkClickable(this)',
-          onmouseleave: '_stopLinkClickable(this)',
-        },
-      });
+      const spec = createSpec();
+      const deco = Decoration.mark(spec);
 
       if (match[4]) {
         // Markdown links, only decorate the part inside parentheses
@@ -44,6 +49,42 @@ export const linkStyle = createDecoPlugin(() => {
   return matcher.createDeco(window.editor);
 });
 
+/**
+ * For `[^footnote]` and `[reference][link]`.
+ */
+const referenceStyle = createDecoPlugin(() => {
+  return createDecos('Link', ({ from, to }) => {
+    const content = window.editor.state.sliceDoc(from, to);
+    const newDeco = (type: 'Link' | 'LinkLabel', label: string) => Decoration.mark(createSpec({
+      'data-link-type': type,
+      'data-link-from': `${from}`,
+      'data-link-to': `${to}`,
+      'data-link-label': label,
+    })).range(from, to);
+
+    // [^footnote]
+    const footnote = content.match(regexp.footnote);
+    if (footnote !== null) {
+      // Looking for the entire link
+      return newDeco('Link', footnote[0]);
+    }
+
+    // [reference][link]
+    const reference = content.match(regexp.reference);
+    if (reference !== null) {
+      // Looking for the label only
+      return newDeco('LinkLabel', `[${reference[1]}]`);
+    }
+
+    return null;
+  });
+});
+
+export const linkStyles: Extension = [
+  standardStyle,
+  referenceStyle,
+];
+
 export function startClickable(inputElement?: HTMLElement) {
   const linkElement = inputElement ?? storage.focusedElement;
   storage.focusedElement = linkElement;
@@ -71,25 +112,32 @@ export function stopClickable(inputElement?: HTMLElement) {
     return;
   }
 
-  linkElement.title = window.config.localizable?.cmdClickToOpenLink ?? '';
+  linkElement.title = window.config.localizable?.cmdClickToFollow ?? '';
   linkElement.style.cursor = '';
   linkElement.style.textDecoration = '';
   linkElement.style.textDecorationColor = '';
 }
 
 export function handleMouseDown(event: MouseEvent) {
-  if (extractLink(event.target) !== undefined) {
+  if (extractLink(event.target).link !== undefined) {
     event.stopPropagation();
     event.preventDefault();
   }
 }
 
 export function handleMouseUp(event: MouseEvent) {
-  const link = extractLink(event.target);
+  const { link, element } = extractLink(event.target);
   if (link === undefined) {
     return;
   }
 
+  // [^footnote] or [reference][link]
+  const type = element.getAttribute('data-link-type');
+  if (type !== null) {
+    return followReference(element, type);
+  }
+
+  // [standard][link] or <standard-link>
   if (isReleaseMode) {
     window.nativeModules.core.notifyLinkClicked({ link });
   } else {
@@ -104,23 +152,72 @@ function extractLink(target: EventTarget | null) {
 
   // The element doesn't belong to a Markdown link
   if (element === null || element === undefined) {
-    return undefined;
+    return {};
   }
 
   // The link is clickable when it has an underline,
   // use includes because Chrome merges textDecorationColor into textDecoration.
   if (!element.style.textDecoration.includes('underline')) {
-    return undefined;
+    return {};
   }
 
   // It's OK to have a trailing period in a valid url,
   // but generally it's the end of a sentence and we want to remove the period.
   const link = element.innerText;
   if (link.endsWith('.') === true && link.endsWith('..') !== true) {
-    return link.slice(0, -1);
+    return { element, link: link.slice(0, -1) };
   }
 
-  return link;
+  return { element, link };
+}
+
+function createSpec(attributes?: { [key: string]: string }) {
+  return {
+    class: className,
+    attributes: {
+      title: window.config.localizable?.cmdClickToFollow ?? '',
+      onmouseenter: '_startLinkClickable(this)',
+      onmouseleave: '_stopLinkClickable(this)',
+      ...attributes,
+    },
+  };
+};
+
+function followReference(element: HTMLElement, type: string) {
+  const state = window.editor.state;
+  const from = parseInt(element.getAttribute('data-link-from') ?? '0');
+  const to = parseInt(element.getAttribute('data-link-to') ?? '0');
+  const label = element.getAttribute('data-link-label') ?? '';
+  const isDefinition = (pos: number) => state.sliceDoc(pos, pos + 1) === ':';
+
+  return scrollIntoTarget(getNodesNamed(state, type).find(node => {
+    if (node.to >= from && node.from <= to) {
+      return false;
+    }
+
+    if (state.sliceDoc(node.from, node.to) !== label) {
+      return false;
+    }
+
+    // For [^footnote], if definition is cmd-clicked, goto the first reference
+    if (type === 'Link') {
+      return isDefinition(to) ? true : isDefinition(node.to);
+    }
+
+    // For [reference][link], always goto the definition
+    return isDefinition(node.to);
+  }));
+}
+
+function scrollIntoTarget(target?: SyntaxNodeRef) {
+  if (target === undefined) {
+    return window.nativeModules.core.notifyLightWarning();
+  }
+
+  window.editor.dispatch({
+    selection: EditorSelection.range(target.from, target.to),
+    effects: EditorView.scrollIntoView(target.from, { y: 'center' }),
+  });
 }
 
 const storage: {

CoreEditor/test/lezer.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from '@jest/globals';
 import { EditorView } from '@codemirror/view';
 import { syntaxTree } from '@codemirror/language';
-import { extractComments } from '../src/modules/lezer';
+import { getNodesNamed, extractComments } from '../src/modules/lezer';
 import * as editor from './utils/editor';
 
 describe('Lezer parser', () => {
@@ -78,6 +78,29 @@ describe('Lezer parser', () => {
     expect(types).toContain('HeaderMark');
   });
 
+  test('test footnote', () => {
+    editor.setUp('[^footnote]\n\n[^footnote]:');
+
+    const types = parseTypes(window.editor);
+    expect(types).toContain('Link');
+    expect(types).toContain('LinkMark');
+  });
+
+  test('test reference style link', () => {
+    editor.setUp('[reference][link]\n\n[link]:');
+
+    const types = parseTypes(window.editor);
+    expect(types).toContain('Link');
+    expect(types).toContain('LinkLabel');
+  });
+
+  test('test getNodesNamed', () => {
+    editor.setUp('[^footnote]\n\n[reference][link]\n\n[standard](link)');
+
+    const nodes = getNodesNamed(window.editor.state, 'Link');
+    expect(nodes.length).toBe(3);
+  });
+
   test('test extracting comments', () => {
     expect(extractComments('Hello')).toStrictEqual({
       trimmedText: 'Hello',

MarkEditCore/Sources/EditorLocalizable.swift

@@ -18,7 +18,7 @@ public struct EditorLocalizable: Encodable {
   let foldLine: String
   let unfoldLine: String
   let previewButtonTitle: String
-  let cmdClickToOpenLink: String
+  let cmdClickToFollow: String
   let cmdClickToToggleTodo: String
 
   public init(
@@ -30,7 +30,7 @@ public struct EditorLocalizable: Encodable {
     foldLine: String,
     unfoldLine: String,
     previewButtonTitle: String,
-    cmdClickToOpenLink: String,
+    cmdClickToFollow: String,
     cmdClickToToggleTodo: String
   ) {
     self.controlCharacter = controlCharacter
@@ -41,7 +41,7 @@ public struct EditorLocalizable: Encodable {
     self.foldLine = foldLine
     self.unfoldLine = unfoldLine
     self.previewButtonTitle = previewButtonTitle
-    self.cmdClickToOpenLink = cmdClickToOpenLink
+    self.cmdClickToFollow = cmdClickToFollow
     self.cmdClickToToggleTodo = cmdClickToToggleTodo
   }
 }