@atlaskit/prosemirror-input-rules 3.1.0 → 3.2.0

package/src/__tests__/unit/plugin.ts

@@ -10,169 +10,158 @@ import { doc, p } from '@atlaskit/editor-test-helpers/doc-builder';
 import { createInputRulePlugin } from '../../plugin';
 
 describe('input-tule/plugin/createInputRulePlugin', () => {
-  let editorViewElement: HTMLElement;
-
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    editorViewElement = document.createElement('div');
-    document.body.appendChild(editorViewElement);
-  });
-
-  function insertText(view: EditorView, text: string) {
-    const { $from, $to } = view.state.selection;
-    view.someProp('handleTextInput', (f) => f(view, $from.pos, $to.pos, text));
-  }
-
-  function createEditorView(lol: DocBuilder, customInputRule: SafePlugin) {
-    const editorState = createEditorState(lol, customInputRule);
-
-    return new EditorView(editorViewElement, {
-      state: editorState,
-    });
-  }
-
-  describe('inline code transformation: ', () => {
-    let handlerMock: jest.Mock;
-    let editorView: EditorView;
-
-    beforeEach(() => {
-      handlerMock = jest.fn().mockImplementation((state: EditorState) => {
-        return state.tr;
-      });
-
-      const INLINE_CODE_REGEX = /(\S*)(`[^\s][^`]*`)$/;
-      const myCustomInputRule = new SafePlugin(
-        createInputRulePlugin(
-          'lol',
-          [
-            {
-              match: INLINE_CODE_REGEX,
-              handler: handlerMock,
-            },
-          ],
-          {
-            allowInsertTextOnDocument: true,
-          },
-        ),
-      );
-
-      editorView = createEditorView(
-        doc(p('here `some{<} words{>}')),
-        myCustomInputRule,
-      );
-    });
-
-    describe('when the handler is called', () => {
-      describe('during the textInput flow', () => {
-        it('should call the handler only once', () => {
-          jest.spyOn(editorView, 'dispatch').mockImplementation((tr) => {});
-          insertText(editorView, '`');
-
-          expect(handlerMock).toHaveBeenCalledTimes(1);
-        });
-
-        it('should send the editor state without the inserted text', () => {
-          insertText(editorView, '`');
-          const nextEditorState = createEditorState(doc(p('here `some words')));
-
-          const [argEditorState] = handlerMock.mock.calls[0];
-
-          expect(argEditorState.doc.toJSON()).toEqual(
-            nextEditorState.doc.toJSON(),
-          );
-        });
-      });
-
-      describe('after the appendTransaction flow', () => {
-        it('should call the handler only twice', () => {
-          insertText(editorView, '`');
-
-          expect(handlerMock).toHaveBeenCalledTimes(2);
-        });
-
-        it('should send the editor state with the inserted text', () => {
-          insertText(editorView, '`');
-          const nextEditorState = createEditorState(doc(p('here `some`')));
-
-          const [argEditorState] = handlerMock.mock.calls[1];
-
-          expect(argEditorState.doc.toJSON()).toEqual(
-            nextEditorState.doc.toJSON(),
-          );
-        });
-      });
-    });
-  });
-
-  describe('code block node: ', () => {
-    let handlerMock: jest.Mock;
-    let editorView: EditorView;
-
-    beforeEach(() => {
-      handlerMock = jest.fn().mockImplementation((state: EditorState) => {
-        return state.tr;
-      });
-
-      const CODE_BLOCK_REGEX = /(?!\s)(`{3,})/;
-      const myCustomInputRule = new SafePlugin(
-        createInputRulePlugin(
-          'lol',
-          [
-            {
-              match: CODE_BLOCK_REGEX,
-              handler: handlerMock,
-            },
-          ],
-          {
-            allowInsertTextOnDocument: true,
-          },
-        ),
-      );
-
-      editorView = createEditorView(doc(p('here {<>}')), myCustomInputRule);
-    });
-
-    describe('when the handler is called', () => {
-      describe('during the textInput flow', () => {
-        it('should call the handler only once', () => {
-          jest.spyOn(editorView, 'dispatch').mockImplementation((tr) => {});
-          insertText(editorView, '```');
-
-          expect(handlerMock).toHaveBeenCalledTimes(1);
-        });
-
-        it('should send the editor state without the inserted text', () => {
-          insertText(editorView, '```');
-
-          const nextEditorState = createEditorState(doc(p('here ')));
-
-          const [argEditorState] = handlerMock.mock.calls[0];
-
-          expect(argEditorState.doc.toJSON()).toEqual(
-            nextEditorState.doc.toJSON(),
-          );
-        });
-      });
-
-      describe('after the appendTransaction flow', () => {
-        it('should call the handler only twice', () => {
-          insertText(editorView, '```');
-
-          expect(handlerMock).toHaveBeenCalledTimes(2);
-        });
-
-        it('should send the editor state with the inserted text', () => {
-          insertText(editorView, '```');
-
-          const nextEditorState = createEditorState(doc(p('here ```')));
-
-          const [argEditorState] = handlerMock.mock.calls[1];
-
-          expect(argEditorState.doc.toJSON()).toEqual(
-            nextEditorState.doc.toJSON(),
-          );
-        });
-      });
-    });
-  });
+	let editorViewElement: HTMLElement;
+
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		editorViewElement = document.createElement('div');
+		document.body.appendChild(editorViewElement);
+	});
+
+	function insertText(view: EditorView, text: string) {
+		const { $from, $to } = view.state.selection;
+		view.someProp('handleTextInput', (f) => f(view, $from.pos, $to.pos, text));
+	}
+
+	function createEditorView(lol: DocBuilder, customInputRule: SafePlugin) {
+		const editorState = createEditorState(lol, customInputRule);
+
+		return new EditorView(editorViewElement, {
+			state: editorState,
+		});
+	}
+
+	describe('inline code transformation: ', () => {
+		let handlerMock: jest.Mock;
+		let editorView: EditorView;
+
+		beforeEach(() => {
+			handlerMock = jest.fn().mockImplementation((state: EditorState) => {
+				return state.tr;
+			});
+
+			const INLINE_CODE_REGEX = /(\S*)(`[^\s][^`]*`)$/;
+			const myCustomInputRule = new SafePlugin(
+				createInputRulePlugin(
+					'lol',
+					[
+						{
+							match: INLINE_CODE_REGEX,
+							handler: handlerMock,
+						},
+					],
+					{
+						allowInsertTextOnDocument: true,
+					},
+				),
+			);
+
+			editorView = createEditorView(doc(p('here `some{<} words{>}')), myCustomInputRule);
+		});
+
+		describe('when the handler is called', () => {
+			describe('during the textInput flow', () => {
+				it('should call the handler only once', () => {
+					jest.spyOn(editorView, 'dispatch').mockImplementation((tr) => {});
+					insertText(editorView, '`');
+
+					expect(handlerMock).toHaveBeenCalledTimes(1);
+				});
+
+				it('should send the editor state without the inserted text', () => {
+					insertText(editorView, '`');
+					const nextEditorState = createEditorState(doc(p('here `some words')));
+
+					const [argEditorState] = handlerMock.mock.calls[0];
+
+					expect(argEditorState.doc.toJSON()).toEqual(nextEditorState.doc.toJSON());
+				});
+			});
+
+			describe('after the appendTransaction flow', () => {
+				it('should call the handler only twice', () => {
+					insertText(editorView, '`');
+
+					expect(handlerMock).toHaveBeenCalledTimes(2);
+				});
+
+				it('should send the editor state with the inserted text', () => {
+					insertText(editorView, '`');
+					const nextEditorState = createEditorState(doc(p('here `some`')));
+
+					const [argEditorState] = handlerMock.mock.calls[1];
+
+					expect(argEditorState.doc.toJSON()).toEqual(nextEditorState.doc.toJSON());
+				});
+			});
+		});
+	});
+
+	describe('code block node: ', () => {
+		let handlerMock: jest.Mock;
+		let editorView: EditorView;
+
+		beforeEach(() => {
+			handlerMock = jest.fn().mockImplementation((state: EditorState) => {
+				return state.tr;
+			});
+
+			const CODE_BLOCK_REGEX = /(?!\s)(`{3,})/;
+			const myCustomInputRule = new SafePlugin(
+				createInputRulePlugin(
+					'lol',
+					[
+						{
+							match: CODE_BLOCK_REGEX,
+							handler: handlerMock,
+						},
+					],
+					{
+						allowInsertTextOnDocument: true,
+					},
+				),
+			);
+
+			editorView = createEditorView(doc(p('here {<>}')), myCustomInputRule);
+		});
+
+		describe('when the handler is called', () => {
+			describe('during the textInput flow', () => {
+				it('should call the handler only once', () => {
+					jest.spyOn(editorView, 'dispatch').mockImplementation((tr) => {});
+					insertText(editorView, '```');
+
+					expect(handlerMock).toHaveBeenCalledTimes(1);
+				});
+
+				it('should send the editor state without the inserted text', () => {
+					insertText(editorView, '```');
+
+					const nextEditorState = createEditorState(doc(p('here ')));
+
+					const [argEditorState] = handlerMock.mock.calls[0];
+
+					expect(argEditorState.doc.toJSON()).toEqual(nextEditorState.doc.toJSON());
+				});
+			});
+
+			describe('after the appendTransaction flow', () => {
+				it('should call the handler only twice', () => {
+					insertText(editorView, '```');
+
+					expect(handlerMock).toHaveBeenCalledTimes(2);
+				});
+
+				it('should send the editor state with the inserted text', () => {
+					insertText(editorView, '```');
+
+					const nextEditorState = createEditorState(doc(p('here ```')));
+
+					const [argEditorState] = handlerMock.mock.calls[1];
+
+					expect(argEditorState.doc.toJSON()).toEqual(nextEditorState.doc.toJSON());
+				});
+			});
+		});
+	});
 });

package/src/editor-common.ts

@@ -4,35 +4,31 @@
  *
  * This simplifies our dependencies and makes adoption much easier.
  */
-import type {
-  EditorState,
-  Selection,
-  Transaction,
-} from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 
 export type InputRuleHandler = (
-  state: EditorState,
-  matchResult: RegExpExecArray,
-  start: number,
-  end: number,
+	state: EditorState,
+	matchResult: RegExpExecArray,
+	start: number,
+	end: number,
 ) => Transaction | null;
 
 export type OnHandlerApply = (
-  state: EditorState,
-  tr: Transaction,
-  matchResult: RegExpExecArray,
+	state: EditorState,
+	tr: Transaction,
+	matchResult: RegExpExecArray,
 ) => void;
 
 export interface InputRuleWrapper {
-  match: RegExp;
-  handler: InputRuleHandler;
-  onHandlerApply?: OnHandlerApply;
+	match: RegExp;
+	handler: InputRuleHandler;
+	onHandlerApply?: OnHandlerApply;
 }
 
 // This is to workaround requiring editor-common in this repository which
 // makes the dependency tree significantly more complex since editor-common
 // needs to be a singleton
 export const isGapCursorSelection = (selection: Selection): boolean => {
-  // @ts-expect-error
-  return Boolean(selection.jsonID === 'gapcursor');
+	// @ts-expect-error
+	return Boolean(selection.jsonID === 'gapcursor');
 };

package/src/handler.ts

@@ -1,154 +1,140 @@
-import type {
-  EditorState,
-  PluginKey,
-  Transaction,
-} from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, PluginKey, Transaction } from '@atlaskit/editor-prosemirror/state';
 
 import {
-  leafNodeReplacementCharacter,
-  MAX_REGEX_MATCH,
-  TEXT_INPUT_RULE_TRANSACTION_KEY,
+	leafNodeReplacementCharacter,
+	MAX_REGEX_MATCH,
+	TEXT_INPUT_RULE_TRANSACTION_KEY,
 } from './constants';
 import { isGapCursorSelection } from './editor-common';
 import type {
-  HandleInputEvent,
-  InputRulePluginState,
-  InputRuleWrapper,
-  MatchedRule,
-  OnBeforeRegexMatch,
-  OnInputEvent,
+	HandleInputEvent,
+	InputRulePluginState,
+	InputRuleWrapper,
+	MatchedRule,
+	OnBeforeRegexMatch,
+	OnInputEvent,
 } from './types';
 
 type Options = {
-  pluginKey: PluginKey;
-  rules: InputRuleWrapper[];
-  allowInsertTextOnDocument: boolean;
-  onInputEvent?: OnInputEvent;
-  onBeforeRegexMatch?: OnBeforeRegexMatch;
+	pluginKey: PluginKey;
+	rules: InputRuleWrapper[];
+	allowInsertTextOnDocument: boolean;
+	onInputEvent?: OnInputEvent;
+	onBeforeRegexMatch?: OnBeforeRegexMatch;
 };
 
 export const createInputEventHandler =
-  ({
-    rules,
-    pluginKey,
-    allowInsertTextOnDocument,
-    onInputEvent,
-    onBeforeRegexMatch,
-  }: Options): HandleInputEvent =>
-  ({ view, from, to, text }) => {
-    if (view.composing) {
-      return false;
-    }
-
-    const state = view.state;
-    const $from = state.doc.resolve(from);
-
-    if ($from.parent.type.spec.code) {
-      return false;
-    }
-    if (onInputEvent && !onInputEvent({ state, from, to })) {
-      return false;
-    }
-
-    const textBefore =
-      $from.parent.textBetween(
-        Math.max(0, $from.parentOffset - MAX_REGEX_MATCH),
-        $from.parentOffset,
-        undefined,
-        leafNodeReplacementCharacter,
-      ) + text;
-
-    const result = findMatchOnRules({
-      rules,
-      textBefore,
-      from,
-      to,
-      state,
-    });
-
-    if (!result) {
-      return false;
-    }
-
-    const tr = allowInsertTextOnDocument
-      ? state.tr.insertText(text, from, to)
-      : state.tr;
-    tr.setMeta(TEXT_INPUT_RULE_TRANSACTION_KEY, true);
-    tr.setMeta(pluginKey, {
-      textInserted: text,
-      from: result.from,
-      to: result.to,
-      matchedRule: result.matchedRule,
-    } as InputRulePluginState);
-
-    if (onBeforeRegexMatch) {
-      onBeforeRegexMatch(tr);
-    }
-
-    view.dispatch(tr);
-    return true;
-  };
+	({
+		rules,
+		pluginKey,
+		allowInsertTextOnDocument,
+		onInputEvent,
+		onBeforeRegexMatch,
+	}: Options): HandleInputEvent =>
+	({ view, from, to, text }) => {
+		if (view.composing) {
+			return false;
+		}
+
+		const state = view.state;
+		const $from = state.doc.resolve(from);
+
+		if ($from.parent.type.spec.code) {
+			return false;
+		}
+		if (onInputEvent && !onInputEvent({ state, from, to })) {
+			return false;
+		}
+
+		const textBefore =
+			$from.parent.textBetween(
+				Math.max(0, $from.parentOffset - MAX_REGEX_MATCH),
+				$from.parentOffset,
+				undefined,
+				leafNodeReplacementCharacter,
+			) + text;
+
+		const result = findMatchOnRules({
+			rules,
+			textBefore,
+			from,
+			to,
+			state,
+		});
+
+		if (!result) {
+			return false;
+		}
+
+		const tr = allowInsertTextOnDocument ? state.tr.insertText(text, from, to) : state.tr;
+		tr.setMeta(TEXT_INPUT_RULE_TRANSACTION_KEY, true);
+		tr.setMeta(pluginKey, {
+			textInserted: text,
+			from: result.from,
+			to: result.to,
+			matchedRule: result.matchedRule,
+		} as InputRulePluginState);
+
+		if (onBeforeRegexMatch) {
+			onBeforeRegexMatch(tr);
+		}
+
+		view.dispatch(tr);
+		return true;
+	};
 
 type FindMatchOnRulesProps = {
-  rules: InputRuleWrapper[];
-  textBefore: string;
-  from: number;
-  to: number;
-  state: EditorState;
+	rules: InputRuleWrapper[];
+	textBefore: string;
+	from: number;
+	to: number;
+	state: EditorState;
 };
 type RuleMatchedResult = {
-  from: number;
-  to: number;
-  matchedRule: MatchedRule;
+	from: number;
+	to: number;
+	matchedRule: MatchedRule;
 };
 function findMatchOnRules({
-  rules,
-  textBefore,
-  from,
-  to,
-  state,
+	rules,
+	textBefore,
+	from,
+	to,
+	state,
 }: FindMatchOnRulesProps): RuleMatchedResult | null {
-  for (let i = 0; i < rules.length; i++) {
-    const rule = rules[i];
-
-    // Some plugins like Typeahead require a whitespace before a trigger character.
-    // We want them to fire inside a gap cursor. Yet, a gap cursor is not considered a whitespace,
-    // and `textBefore` contains the text in the previous block before the gap cursor.
-    // Here is a workaround: if we inside a gap cursor, match the input rule only against the last typed character
-    // (which may be a typeahead trigger) and ignore the rest.
-    const matchString: string = isGapCursorSelection(state.selection)
-      ? textBefore.at(-1) ?? ''
-      : textBefore;
-
-    const match = rule.match.exec(matchString);
-    if (!match) {
-      continue;
-    }
-
-    const parentNodeStartAt = state.selection.$from.start();
-    const offset = Math.max(
-      0,
-      state.selection.$from.parentOffset - MAX_REGEX_MATCH,
-    );
-    const fromFixed = Math.max(parentNodeStartAt + match.index + offset, 1);
-    const transform: Transaction | null = rule.handler(
-      state,
-      match,
-      fromFixed,
-      to,
-    );
-
-    if (transform) {
-      return {
-        from: fromFixed,
-        to,
-        matchedRule: {
-          ...rule,
-          result: match,
-        },
-      };
-    }
-  }
-
-  return null;
+	for (let i = 0; i < rules.length; i++) {
+		const rule = rules[i];
+
+		// Some plugins like Typeahead require a whitespace before a trigger character.
+		// We want them to fire inside a gap cursor. Yet, a gap cursor is not considered a whitespace,
+		// and `textBefore` contains the text in the previous block before the gap cursor.
+		// Here is a workaround: if we inside a gap cursor, match the input rule only against the last typed character
+		// (which may be a typeahead trigger) and ignore the rest.
+		const matchString: string = isGapCursorSelection(state.selection)
+			? textBefore.at(-1) ?? ''
+			: textBefore;
+
+		const match = rule.match.exec(matchString);
+		if (!match) {
+			continue;
+		}
+
+		const parentNodeStartAt = state.selection.$from.start();
+		const offset = Math.max(0, state.selection.$from.parentOffset - MAX_REGEX_MATCH);
+		const fromFixed = Math.max(parentNodeStartAt + match.index + offset, 1);
+		const transform: Transaction | null = rule.handler(state, match, fromFixed, to);
+
+		if (transform) {
+			return {
+				from: fromFixed,
+				to,
+				matchedRule: {
+					...rule,
+					result: match,
+				},
+			};
+		}
+	}
+
+	return null;
 }

package/src/index.ts

@@ -1,9 +1,9 @@
 import type { OnInputEvent } from './types';
 
 export {
-  leafNodeReplacementCharacter,
-  TEXT_INPUT_RULE_TRANSACTION_KEY,
-  MAX_REGEX_MATCH,
+	leafNodeReplacementCharacter,
+	TEXT_INPUT_RULE_TRANSACTION_KEY,
+	MAX_REGEX_MATCH,
 } from './constants';
 export { createInputRulePlugin } from './plugin';
 export type { OnInputEvent };