Desktop: Fixes #12105: Link to header: Move the Markdown editor cursor to the location of the link target (#12118)

Author: personalizedrefrigerator

.eslintignore

@@ -62,6 +62,7 @@ packages/app-mobile/locales
 packages/app-mobile/node_modules
 packages/app-mobile/pluginAssets/
 packages/fork-*
+!packages/fork-uslug
 packages/default-plugins/plugin-base-repo/
 packages/default-plugins/plugin-sources/
 packages/htmlpack/dist/
@@ -924,6 +925,8 @@ packages/editor/CodeMirror/editorCommands/duplicateLine.js
 packages/editor/CodeMirror/editorCommands/editorCommands.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.test.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.js
+packages/editor/CodeMirror/editorCommands/jumpToHash.test.js
+packages/editor/CodeMirror/editorCommands/jumpToHash.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.test.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.js
 packages/editor/CodeMirror/editorCommands/supportsCommand.js
@@ -1002,6 +1005,8 @@ packages/fork-htmlparser2/src/__tests__/events.js
 packages/fork-htmlparser2/src/__tests__/stream.js
 packages/fork-htmlparser2/src/index.spec.js
 packages/fork-htmlparser2/src/index.js
+packages/fork-uslug/lib/uslug.test.js
+packages/fork-uslug/lib/uslug.js
 packages/generator-joplin/generators/app/templates/api/index.js
 packages/generator-joplin/generators/app/templates/api/noteListType.js
 packages/generator-joplin/generators/app/templates/api/types.js

.gitignore

@@ -899,6 +899,8 @@ packages/editor/CodeMirror/editorCommands/duplicateLine.js
 packages/editor/CodeMirror/editorCommands/editorCommands.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.test.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.js
+packages/editor/CodeMirror/editorCommands/jumpToHash.test.js
+packages/editor/CodeMirror/editorCommands/jumpToHash.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.test.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.js
 packages/editor/CodeMirror/editorCommands/supportsCommand.js
@@ -977,6 +979,8 @@ packages/fork-htmlparser2/src/__tests__/events.js
 packages/fork-htmlparser2/src/__tests__/stream.js
 packages/fork-htmlparser2/src/index.spec.js
 packages/fork-htmlparser2/src/index.js
+packages/fork-uslug/lib/uslug.test.js
+packages/fork-uslug/lib/uslug.js
 packages/generator-joplin/generators/app/templates/api/index.js
 packages/generator-joplin/generators/app/templates/api/noteListType.js
 packages/generator-joplin/generators/app/templates/api/types.js

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx

@@ -167,7 +167,9 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 			scrollTo: (options: ScrollOptions) => {
 				if (options.type === ScrollOptionTypes.Hash) {
 					if (!webviewRef.current) return;
-					webviewRef.current.send('scrollToHash', options.value as string);
+					const hash: string = options.value;
+					webviewRef.current.send('scrollToHash', hash);
+					editorRef.current.jumpToHash(hash);
 				} else if (options.type === ScrollOptionTypes.Percent) {
 					const percent = options.value as number;
 					setEditorPercentScroll(percent);

packages/app-desktop/gui/note-viewer/index.html

@@ -139,8 +139,11 @@
 			const viewerPercent = scrollmap.translateL2V(percent);
 			const newScrollTop = viewerPercent * maxScrollTop();
 
-			// The next scroll event cannot be skipped in order to correctly
-			// scroll to the target section in a different note when follwing a link
+			// Even if the scroll position hasn't changed (percent is the same),
+			// we still ignore the next scroll event, so that it doesn't create
+			// undesired side effects.
+			// https://github.com/laurent22/joplin/issues/7617
+			ignoreNextScrollEvent();
 
 			if (Math.floor(contentElement.scrollTop) !== Math.floor(newScrollTop)) {
 				percentScroll_ = percent;

packages/editor/CodeMirror/CodeMirrorControl.ts

@@ -12,6 +12,7 @@ import { RegionSpec } from './utils/formatting/RegionSpec';
 import toggleInlineSelectionFormat from './utils/formatting/toggleInlineSelectionFormat';
 import getSearchState from './utils/getSearchState';
 import { noteIdFacet, setNoteIdEffect } from './utils/selectedNoteIdExtension';
+import jumpToHash from './editorCommands/jumpToHash';
 
 interface Callbacks {
 	onUndoRedo(): void;
@@ -207,6 +208,10 @@ export default class CodeMirrorControl extends CodeMirror5Emulation implements E
 		return textFound;
 	}
 
+	public jumpToHash(hash: string) {
+		return jumpToHash(this.editor, hash);
+	}
+
 	public addStyles(...styles: Parameters<typeof EditorView.theme>) {
 		const compartment = new Compartment();
 		this.editor.dispatch({

packages/editor/CodeMirror/editorCommands/editorCommands.ts

@@ -13,6 +13,7 @@ import sortSelectedLines from './sortSelectedLines';
 import { closeSearchPanel, findNext, findPrevious, openSearchPanel, replaceAll, replaceNext, searchPanelOpen } from '@codemirror/search';
 import { focus } from '@joplin/lib/utils/focusHandler';
 import { showLinkEditor } from '../utils/handleLinkEditRequests';
+import jumpToHash from './jumpToHash';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 export type EditorCommandFunction = (editor: EditorView, ...args: any[])=> void|any;
@@ -107,6 +108,10 @@ const editorCommands: Record<EditorCommandType, EditorCommandFunction> = {
 			}],
 		});
 	},
+
+	[EditorCommandType.JumpToHash]: (editor, hash: string) => {
+		return jumpToHash(editor, hash);
+	},
 };
 export default editorCommands;
 

packages/editor/CodeMirror/editorCommands/jumpToHash.test.ts

@@ -0,0 +1,41 @@
+import { EditorSelection } from '@codemirror/state';
+import createTestEditor from '../testUtil/createTestEditor';
+import jumpToHash from './jumpToHash';
+
+describe('jumpToHash', () => {
+	test.each([
+		{
+			doc: 'This is an anchor: <a id="test">Test</a>',
+			expectedCursorLocation: 'This is an anchor: <a id="test">'.length,
+			waitForTags: ['HTMLTag'],
+		},
+		{
+			doc: '<div>HTML block: This is an anchor: <a id="test">Test</a></div>',
+			expectedCursorLocation: '<div>HTML block: This is an anchor: <a id="test">'.length,
+			waitForTags: ['HTMLBlock'],
+		},
+	])('should support jumping to elements with ID set to "test" (case %#)', async ({ doc: docText, expectedCursorLocation, waitForTags }) => {
+		const editor = await createTestEditor(
+			docText,
+			EditorSelection.cursor(1),
+			waitForTags,
+		);
+		expect(jumpToHash(editor, 'test')).toBe(true);
+		const cursorPosition = editor.state.selection.main.anchor;
+		expect(
+			editor.state.sliceDoc(0, cursorPosition),
+		).toBe(
+			editor.state.sliceDoc(0, expectedCursorLocation),
+		);
+	});
+
+	test('should jump to Markdown headers', async () => {
+		const editor = await createTestEditor(
+			'Line 1\n## Line 2',
+			EditorSelection.cursor(0),
+			['ATXHeading2'],
+		);
+		expect(jumpToHash(editor, 'line-2')).toBe(true);
+		expect(editor.state.selection.main.anchor).toBe(editor.state.doc.length);
+	});
+});

packages/editor/CodeMirror/editorCommands/jumpToHash.ts

@@ -0,0 +1,82 @@
+import { ensureSyntaxTree } from '@codemirror/language';
+import { EditorSelection } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import uslug from '@joplin/fork-uslug/lib/uslug';
+import { SyntaxNodeRef } from '@lezer/common';
+
+const jumpToHash = (view: EditorView, hash: string) => {
+	const state = view.state;
+	const timeout = 1_000; // Maximum time to spend parsing the syntax tree
+	let targetLocation: number|undefined = undefined;
+
+	const removeQuotes = (quoted: string) => quoted.replace(/^["'](.*)["']$/, '$1');
+
+	const makeEnterNode = (offset: number) => (node: SyntaxNodeRef) => {
+		const nodeToText = (node: SyntaxNodeRef) => {
+			return state.sliceDoc(node.from + offset, node.to + offset);
+		};
+		// Returns the attribute with the given name for [node]
+		const getHtmlNodeAttr = (node: SyntaxNodeRef, attrName: string) => {
+			if (node.from === node.to) return null; // Empty
+			const content = node.node.resolveInner(node.from + 1);
+
+			// Search for the "id" attribute
+			const attributes = content.getChildren('Attribute');
+			for (const attribute of attributes) {
+				const nameNode = attribute.getChild('AttributeName');
+				const valueNode = attribute.getChild('AttributeValue');
+
+				if (nameNode && valueNode) {
+					const name = nodeToText(nameNode).toLowerCase().replace(/^"(.*)"$/, '$1');
+					if (name === attrName) {
+						return removeQuotes(nodeToText(valueNode));
+					}
+				}
+			}
+
+			return null;
+		};
+
+		const found = targetLocation !== undefined;
+		if (found) return false; // Skip this node
+
+		let matches = false;
+		if (node.name.startsWith('SetextHeading') || node.name.startsWith('ATXHeading')) {
+			const nodeText = nodeToText(node)
+				.replace(/^#+\s/, '') // Leading #s in headers
+				.replace(/\n-+$/, ''); // Trailing --s in headers
+			matches = hash === uslug(nodeText);
+		} else if (node.name === 'HTMLTag' || node.name === 'HTMLBlock') {
+			// CodeMirror adds HTML information to Markdown documents using overlays attached
+			// to HTMLTag and HTMLBlock nodes.
+			// Use .enter to enter the overlay and visit the HTML nodes:
+			node.node.enter(node.from, 1).toTree().iterate({ enter: makeEnterNode(node.from) });
+		} else if (node.name === 'OpenTag') {
+			matches = getHtmlNodeAttr(node, 'id') === hash || getHtmlNodeAttr(node, 'name') === hash;
+		}
+
+		if (matches) {
+			targetLocation = node.to + offset;
+			return false;
+		}
+
+		const keepIterating = !matches;
+		return keepIterating;
+	};
+
+	// Iterate over the entire syntax tree.
+	ensureSyntaxTree(state, state.doc.length, timeout).iterate({
+		enter: makeEnterNode(0),
+	});
+
+	if (targetLocation !== undefined) {
+		view.dispatch({
+			selection: EditorSelection.cursor(targetLocation),
+			scrollIntoView: true,
+		});
+		return true;
+	}
+	return false;
+};
+
+export default jumpToHash;

packages/editor/package.json

@@ -37,6 +37,7 @@
     "@codemirror/search": "6.5.8",
     "@codemirror/state": "6.4.1",
     "@codemirror/view": "6.35.0",
+    "@joplin/fork-uslug": "^2.0.0",
     "@lezer/common": "1.2.3",
     "@lezer/highlight": "1.2.1",
     "@lezer/markdown": "1.3.2",

packages/editor/types.ts

@@ -74,8 +74,9 @@ export enum EditorCommandType {
 	SelectedText = 'selectedText',
 	InsertText = 'insertText',
 	ReplaceSelection = 'replaceSelection',
-
 	SetText = 'setText',
+
+	JumpToHash = 'jumpToHash',
 }
 
 // Because the editor package can run in a WebView, plugin content scripts

packages/fork-uslug/README.md

@@ -5,6 +5,8 @@
 Modified for Joplin:
 
 - Added support for emojis - "🐶🐶🐶🐱" => "dogdogdogcat"
+- Smaller package size: Removed dependencies on functionality that's now built-in to JavaScript (Unicode normalization, Unicode character class regular expressions).
+- Types: Migrated to TypeScript.
 
 * * *
 

packages/fork-uslug/index.js

@@ -1 +1 @@
-module.exports = require('./lib/uslug');
+module.exports = require('./lib/uslug').default;

packages/fork-uslug/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	testMatch: [
+		'**/*.test.js',
+	],
+};