feat: Initial clean release of CHM

packages/editor/ProseMirror/plugins/inputRulesPlugin.ts

@@ -0,0 +1,209 @@
+import { buildInputRules } from 'prosemirror-example-setup';
+import schema from '../schema';
+import { MarkType, ResolvedPos } from 'prosemirror-model';
+import { EditorState, Plugin, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { closeHistory } from 'prosemirror-history';
+import showCreateEditablePrompt from './joplinEditablePlugin/showCreateEditablePrompt';
+
+
+interface InputRuleData {
+	match: RegExp;
+	commitCharacter: string|null;
+	handler: (view: EditorView, match: RegExpMatchArray, start: number, end: number, commitCharacter: string)=> Transaction|null;
+}
+
+// A custom input rule extension for inline input replacements.
+//
+// Ref: https://github.com/ProseMirror/prosemirror-inputrules/blob/43ef04ce9c1512ef8f2289578309c40b431ed3c5/src/inputrules.ts#L82
+// See https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118 for why this approach is needed.
+const inlineInputRules = (rules: InputRuleData[], commitCharacterExpression: RegExp) => {
+	const getContentBeforeCursor = (cursorInformation: ResolvedPos) => {
+		const parent = cursorInformation.parent;
+		const offsetInParent = cursorInformation.parentOffset;
+		const maxLength = 256;
+		return parent.textBetween(Math.max(offsetInParent - maxLength, 0), offsetInParent);
+	};
+
+	const getApplicableRule = (state: EditorState, cursor: number, justTypedText: string) => {
+		const candidateRules = rules.filter(rule => justTypedText.endsWith(rule.commitCharacter ?? ''));
+		if (!candidateRules.length) {
+			return false;
+		}
+
+		const cursorInformation = state.doc.resolve(cursor);
+		const inCode = cursorInformation.parent.type.spec.code;
+		if (inCode) {
+			return false;
+		}
+		const beforeCursor = getContentBeforeCursor(cursorInformation) + justTypedText;
+
+		for (const rule of candidateRules) {
+			const match = beforeCursor.match(rule.match);
+			if (!match) continue;
+
+			return rule;
+		}
+		return null;
+	};
+
+	type PluginState = { pendingRule: InputRuleData };
+	const run = (view: EditorView, cursor: number, commitData: string) => {
+		const commitCharacter = commitCharacterExpression.exec(commitData) ? commitData : '';
+
+		// Commit on either a commit character or when the user presses "enter".
+		if (!commitCharacter && commitData !== 'Enter') return false;
+
+		const availableRule = plugin.getState(view.state)?.pendingRule;
+		if (!availableRule) return false;
+
+		const beforeCursor = getContentBeforeCursor(view.state.doc.resolve(cursor));
+		const match = beforeCursor.match(availableRule.match);
+		if (match) {
+			const transaction = availableRule.handler(view, match, cursor - match[0].length, cursor, commitCharacter);
+			if (transaction) {
+				// closeHistory: Move the markup completion to a separate history event so that it
+				// can be undone separately.
+				view.dispatch(closeHistory(transaction));
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	const plugin = new Plugin<PluginState|null>({
+		state: {
+			init: () => null,
+			apply: (tr, lastValue) => {
+				const pendingRule = tr.getMeta(plugin);
+				if (pendingRule) return pendingRule;
+				if (tr.docChanged || tr.selectionSet) return null;
+				return lastValue;
+			},
+		},
+		props: {
+			handleTextInput(view, _from, to, text, defaultAction) {
+				const proposedRule = getApplicableRule(view.state, to, text);
+				if (proposedRule) {
+					const transaction = defaultAction().setMeta(plugin, { pendingRule: proposedRule });
+					view.dispatch(transaction);
+					return true;
+				}
+				return false;
+			},
+			handleDOMEvents: {
+				compositionend: (view, event) => {
+					if (view.state.selection.empty) {
+						return run(view, view.state.selection.to, event.data);
+					}
+					return false;
+				},
+			},
+			handleKeyDown: (view, event) => {
+				return run(view, view.state.selection.to, event.key);
+			},
+		},
+		// TODO: Uncomment this? Doing so allows the undoInputRule command to undo this input rule.
+		//       However, it will require storing additional information in the plugin state (e.g. last transaction,
+		//       start, end position) to be compatible with the upstream input rule extension.
+		// isInputRules: true,
+	});
+	return plugin;
+};
+
+type OnReplace = (matches: RegExpMatchArray, view: EditorView)=> string;
+interface InputRuleOptions {
+	contentRegex: string|RegExp;
+	commitCharacter: string|null; // null => only "Enter"
+	onReplace: OnReplace;
+	marks: MarkType[];
+}
+
+const makeInputRule = ({
+	contentRegex, commitCharacter, onReplace, marks,
+}: InputRuleOptions): InputRuleData => {
+	const commitCharacterExp = '[.?!,:;¡¿() \\n]';
+	const regex = typeof contentRegex === 'string' ? new RegExp(`(^|${commitCharacterExp})${contentRegex}$`) : contentRegex;
+	return {
+		match: regex,
+		commitCharacter,
+		handler: (view, match, start, end, endCommitCharacter) => {
+			const state = view.state;
+			let transaction = state.tr.delete(start, end);
+
+			const startCommitCharacter = match[1];
+
+			// Remove the commit-character-related matches before forwarding the input
+			// to the replacement function.
+			const matchesWithoutCommitCharacters: RegExpMatchArray = [
+				match[0].substring(startCommitCharacter.length, match[0].length),
+				...match.slice(2, match.length),
+			];
+			matchesWithoutCommitCharacters.groups = match.groups;
+
+			const replacement = onReplace(matchesWithoutCommitCharacters, view);
+			transaction = transaction.insert(
+				transaction.mapping.map(start, -1),
+				[
+					!!startCommitCharacter && schema.text(startCommitCharacter),
+					!!replacement && schema.text(replacement, marks.map(type => schema.mark(type))),
+					!!endCommitCharacter && schema.text(endCommitCharacter),
+				].filter(node => !!node),
+			);
+
+			return transaction;
+		},
+	};
+};
+
+const baseInputRules = buildInputRules(schema);
+const inlineContentExp = '\\S[^\\n]*\\S|\\S';
+const noMatchRegex = /$^/;
+const inputRulesExtension = [
+	baseInputRules,
+	inlineInputRules([
+		makeInputRule({
+			contentRegex: /(^|[\n])(```+)(\w*)$/,
+			commitCharacter: '',
+			onReplace: (match, view) => {
+				const blockStart = `${match[1]}${match[2]}\n`;
+				const block = `${blockStart}\n${match[1]}`;
+				showCreateEditablePrompt({
+					source: block,
+					inline: false,
+					cursor: blockStart.length,
+				})(view.state, view.dispatch, view);
+				return '';
+			},
+			marks: [],
+		}),
+	], noMatchRegex),
+	inlineInputRules([
+		makeInputRule({
+			contentRegex: `\\*\\*(${inlineContentExp})\\*\\*`,
+			commitCharacter: '*',
+			onReplace: (match) => match[1],
+			marks: [schema.marks.strong],
+		}),
+		makeInputRule({
+			contentRegex: `\\*(${inlineContentExp})\\*`,
+			commitCharacter: '*',
+			onReplace: (match) => match[1],
+			marks: [schema.marks.emphasis],
+		}),
+		makeInputRule({
+			contentRegex: `_(${inlineContentExp})_`,
+			commitCharacter: '_',
+			onReplace: (match) => match[1],
+			marks: [schema.marks.emphasis],
+		}),
+		makeInputRule({
+			contentRegex: `\`(${inlineContentExp})\``,
+			commitCharacter: '`',
+			onReplace: (match) => match[1],
+			marks: [schema.marks.code],
+		}),
+	], /[ .,?)!;]/),
+];
+export default inputRulesExtension;