fix: do not apply input rule to text with code mark (#224)

src/extensions/markdown/Blockquote/index.ts

@@ -1,9 +1,9 @@
 import {chainCommands, wrapIn} from 'prosemirror-commands';
-import {wrappingInputRule} from 'prosemirror-inputrules';
 import type {NodeType} from 'prosemirror-model';
 import {hasParentNodeOfType} from 'prosemirror-utils';
 
 import type {Action, ExtensionAuto} from '../../../core';
+import {wrappingInputRule} from '../../../utils/inputrules';
 import {withLogAction} from '../../../utils/keymap';
 
 import {BlockquoteSpecs, blockquoteType} from './BlockquoteSpecs';

src/extensions/markdown/CodeBlock/index.ts

@@ -1,10 +1,10 @@
 import {setBlockType} from 'prosemirror-commands';
-import {textblockTypeInputRule} from 'prosemirror-inputrules';
 import {Fragment, NodeType, Slice} from 'prosemirror-model';
 import {Command, Plugin} from 'prosemirror-state';
 import {hasParentNodeOfType} from 'prosemirror-utils';
 
 import type {Action, ExtensionAuto, Keymap} from '../../../core';
+import {textblockTypeInputRule} from '../../../utils/inputrules';
 import {withLogAction} from '../../../utils/keymap';
 
 import {CodeBlockSpecs, CodeBlockSpecsOptions} from './CodeBlockSpecs';

src/extensions/markdown/Heading/utils.ts

@@ -1,8 +1,9 @@
-import {textblockTypeInputRule} from 'prosemirror-inputrules';
 import type {NodeType} from 'prosemirror-model';
 import type {EditorState} from 'prosemirror-state';
 import {hasParentNode} from 'prosemirror-utils';
 
+import {textblockTypeInputRule} from '../../../utils/inputrules';
+
 import {headingType} from './HeadingSpecs';
 import {HeadingLevel, headingLevelAttr} from './const';
 

src/extensions/markdown/Link/index.ts

@@ -2,6 +2,7 @@ import {InputRule} from 'prosemirror-inputrules';
 import type {MarkType} from 'prosemirror-model';
 
 import type {Action, ExtensionAuto} from '../../../core';
+import {hasCodeMark} from '../../../utils/inputrules';
 
 import {LinkSpecs, linkMarkName, linkType} from './LinkSpecs';
 import {LinkActionMeta, LinkActionParams, linkCommand} from './actions';
@@ -37,6 +38,8 @@ declare global {
 // TODO: think about generalizing with markInputRule
 function linkInputRule(markType: MarkType): InputRule {
     return new InputRule(/\[(.+)]\((\S+)\)\s$/, (state, match, start, end) => {
+        if (hasCodeMark(state, match, start, end)) return null;
+
         // handle the rule only if is start of line or there is a space before "open" symbols
         if ((match as RegExpMatchArray).index! > 0) {
             const re = match as RegExpMatchArray;

src/extensions/markdown/Lists/inputrules.ts

@@ -1,7 +1,7 @@
-import {wrappingInputRule} from 'prosemirror-inputrules';
 import type {NodeType} from 'prosemirror-model';
 
 import type {ExtensionWithOptions} from '../../../core';
+import {wrappingInputRule} from '../../../utils/inputrules';
 
 import {blType, olType} from './utils';
 

src/extensions/yfm/Emoji/EmojiInput/EmojiInput.ts

@@ -2,6 +2,7 @@ import {InputRule} from 'prosemirror-inputrules';
 
 import type {ExtensionAuto} from '../../../../core';
 import {escapeRegExp} from '../../../../utils/ecapeRegexp';
+import {hasCodeMark} from '../../../../utils/inputrules';
 import {EmojiConsts, EmojiSpecsOptions} from '../EmojiSpecs';
 
 export const EmojiInput: ExtensionAuto<EmojiSpecsOptions> = (builder, opts) => {
@@ -24,6 +25,8 @@ export const EmojiInput: ExtensionAuto<EmojiSpecsOptions> = (builder, opts) => {
             builder.addInputRules(() => ({
                 rules: [
                     new InputRule(regex, (state, match, start, end) => {
+                        if (hasCodeMark(state, match, start, end)) return null;
+
                         const pattern = match[1];
                         const markup = mapPatternToMarkup[pattern];
                         const content = defs[markup];

src/extensions/yfm/Math/index.ts

@@ -1,10 +1,9 @@
 import {chainCommands, setBlockType} from 'prosemirror-commands';
-import {textblockTypeInputRule} from 'prosemirror-inputrules';
 import {Command, TextSelection} from 'prosemirror-state';
 import {hasParentNodeOfType} from 'prosemirror-utils';
 
 import type {Action, ExtensionAuto} from '../../../core';
-import {inlineNodeInputRule} from '../../../utils/inputrules';
+import {inlineNodeInputRule, textblockTypeInputRule} from '../../../utils/inputrules';
 import {isTextSelection} from '../../../utils/selection';
 
 import {MathSpecs} from './MathSpecs';

src/utils/index.ts

@@ -5,7 +5,13 @@ export * from './clipboard';
 export * from './ecapeRegexp';
 export * from './event-emitter';
 export * from './helpers';
-export * from './inputrules';
+export {
+    markInputRule,
+    nodeInputRule,
+    inlineNodeInputRule,
+    textblockTypeInputRule,
+    wrappingInputRule,
+} from './inputrules';
 export * from './keymap';
 export * from './marks';
 export * from './node-children';

src/utils/inputrules.ts

@@ -7,6 +7,21 @@ import {isFunction} from '../lodash';
 import {isMarkActive} from '../utils/marks';
 // TODO: remove explicit import from code extension
 
+export function hasCodeMark(
+    state: EditorState,
+    _match: RegExpMatchArray,
+    start: number,
+    end: number,
+): boolean {
+    // TODO: remove explicit import from code extension
+    const codeMarkType = codeType(state.schema);
+    if (isMarkActive(state, codeMarkType)) return true;
+    if (state.doc.rangeHasMark(start, end, codeMarkType)) return true;
+    return false;
+}
+
+export {textblockTypeInputRule, wrappingInputRule} from './rulebuilders';
+
 function getMarksBetween(start: number, end: number, state: EditorState) {
     let marks: {start: number; end: number; mark: Mark}[] = [];
 
@@ -55,11 +70,7 @@ export function markInputRule(
             if (re.input![re.index! - 1] !== ' ') return null;
         }
 
-        // TODO: remove explicit import from code extension
-        const codeMarkType = codeType(state.schema);
-        if (isMarkActive(state, codeMarkType)) {
-            return null;
-        }
+        if (hasCodeMark(state, match, start, end)) return null;
 
         const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
         const {tr} = state;
@@ -74,11 +85,6 @@ export function markInputRule(
             const textEnd = textStart + match[m].length;
 
             const marksBetween = getMarksBetween(start, end, state);
-
-            if (marksBetween.some((item) => item.mark.type === codeMarkType)) {
-                return null;
-            }
-
             const excludedMarks = marksBetween
                 .filter((item) => item.mark.type.excludes(markType))
                 .filter((item) => item.end > matchStart);
@@ -111,6 +117,8 @@ export function nodeInputRule(
     selectionOffset = 0,
 ): InputRule {
     return new InputRule(regexp, (state, match, start, end) => {
+        if (hasCodeMark(state, match, start, end)) return null;
+
         const [matchStr] = match;
         const {tr} = state;
 
@@ -133,6 +141,8 @@ export function inlineNodeInputRule(
     fragment: (match: string) => NodeInputRuleReplaceFragment,
 ): InputRule {
     return new InputRule(regexp, (state, match, start, end) => {
+        if (hasCodeMark(state, match, start, end)) return null;
+
         const [matchStr] = match;
         const {tr} = state;
 

src/utils/rulebuilders.ts

@@ -0,0 +1,75 @@
+///
+/// Copy of https://github.com/ProseMirror/prosemirror-inputrules/blob/1.4.0/src/rulebuilders.ts
+/// Added a check for the presence of a code mark
+///
+
+import {InputRule} from 'prosemirror-inputrules';
+import {Attrs, Node, NodeType} from 'prosemirror-model';
+import {canJoin, findWrapping} from 'prosemirror-transform';
+
+import {hasCodeMark} from './inputrules';
+
+/// Build an input rule for automatically wrapping a textblock when a
+/// given string is typed. The `regexp` argument is
+/// directly passed through to the `InputRule` constructor. You'll
+/// probably want the regexp to start with `^`, so that the pattern can
+/// only occur at the start of a textblock.
+///
+/// `nodeType` is the type of node to wrap in. If it needs attributes,
+/// you can either pass them directly, or pass a function that will
+/// compute them from the regular expression match.
+///
+/// By default, if there's a node with the same type above the newly
+/// wrapped node, the rule will try to [join](#transform.Transform.join) those
+/// two nodes. You can pass a join predicate, which takes a regular
+/// expression match and the node before the wrapped node, and can
+/// return a boolean to indicate whether a join should happen.
+export function wrappingInputRule(
+    regexp: RegExp,
+    nodeType: NodeType,
+    getAttrs: Attrs | null | ((matches: RegExpMatchArray) => Attrs | null) = null,
+    joinPredicate?: (match: RegExpMatchArray, node: Node) => boolean,
+) {
+    return new InputRule(regexp, (state, match, start, end) => {
+        if (hasCodeMark(state, match, start, end)) return null;
+
+        const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
+        const tr = state.tr.delete(start, end);
+        const $start = tr.doc.resolve(start),
+            range = $start.blockRange(),
+            wrapping = range && findWrapping(range, nodeType, attrs);
+        if (!wrapping) return null;
+        tr.wrap(range!, wrapping);
+        const before = tr.doc.resolve(start - 1).nodeBefore;
+        if (
+            before &&
+            before.type == nodeType &&
+            canJoin(tr.doc, start - 1) &&
+            (!joinPredicate || joinPredicate(match, before))
+        )
+            tr.join(start - 1);
+        return tr;
+    });
+}
+
+/// Build an input rule that changes the type of a textblock when the
+/// matched text is typed into it. You'll usually want to start your
+/// regexp with `^` to that it is only matched at the start of a
+/// textblock. The optional `getAttrs` parameter can be used to compute
+/// the new node's attributes, and works the same as in the
+/// `wrappingInputRule` function.
+export function textblockTypeInputRule(
+    regexp: RegExp,
+    nodeType: NodeType,
+    getAttrs: Attrs | null | ((match: RegExpMatchArray) => Attrs | null) = null,
+) {
+    return new InputRule(regexp, (state, match, start, end) => {
+        if (hasCodeMark(state, match, start, end)) return null;
+
+        const $start = state.doc.resolve(start);
+        const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
+        if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), nodeType))
+            return null;
+        return state.tr.delete(start, end).setBlockType(start, start, nodeType, attrs);
+    });
+}