perf: shared canContainTransformableMarkdown function, avoid editor.u…

…pdate call if node can not contain transformable markdown
facebook · Jan 21, 2025 · 7987e04 · 7987e04
1 parent 4fd26bb
commit 7987e04
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 37 deletions.
diff --git a/packages/lexical-markdown/src/MarkdownShortcuts.ts b/packages/lexical-markdown/src/MarkdownShortcuts.ts
@@ -28,6 +28,7 @@ import {
 import invariant from 'shared/invariant';
 
 import {TRANSFORMERS} from '.';
+import {canContainTransformableMarkdown} from './importTextTransformers';
 import {indexBy, PUNCTUATION_OR_SPACE, transformersByType} from './utils';
 
 function runElementTransformers(
@@ -497,19 +498,14 @@ export function registerMarkdownShortcuts(
       const anchorNode = editorState._nodeMap.get(anchorKey);
 
       if (
-        !$isTextNode(anchorNode) ||
+        !canContainTransformableMarkdown(anchorNode) ||
         !dirtyLeaves.has(anchorKey) ||
         (anchorOffset !== 1 && anchorOffset > prevSelection.anchor.offset + 1)
       ) {
         return;
       }
 
       editor.update(() => {
-        // Markdown is not available inside code
-        if (anchorNode.hasFormat('code')) {
-          return;
-        }
-
         const parentNode = anchorNode.getParent();
 
         if (parentNode === null || $isCodeNode(parentNode)) {

diff --git a/packages/lexical-markdown/src/importTextTransformers.ts b/packages/lexical-markdown/src/importTextTransformers.ts
@@ -8,7 +8,7 @@
 import type {TextFormatTransformersIndex} from './MarkdownImport';
 import type {TextMatchTransformer} from './MarkdownTransformers';
 
-import {$isTextNode, type TextNode} from 'lexical';
+import {$isTextNode, type LexicalNode, type TextNode} from 'lexical';
 
 import {
   findOutermostTextFormatTransformer,
@@ -19,6 +19,18 @@ import {
   importFoundTextMatchTransformer,
 } from './importTextMatchTransformer';
 
+/**
+ * Returns true if the node can contain transformable markdown.
+ * Code nodes cannot contain transformable markdown.
+ * For example, `code **bold**` should not be transformed to
+ * <code>code <strong>bold</strong></code>.
+ */
+export function canContainTransformableMarkdown(
+  node: LexicalNode | undefined,
+): node is TextNode {
+  return $isTextNode(node) && !node.hasFormat('code');
+}
+
 /**
  * Handles applying both text format and text match transformers.
  * It finds the outermost text format or text match and applies it,
@@ -63,33 +75,21 @@ export function importTextTransformers(
       foundTextFormat.match,
     );
 
-    if (
-      result.nodeAfter &&
-      $isTextNode(result.nodeAfter) &&
-      !result.nodeAfter.hasFormat('code')
-    ) {
+    if (canContainTransformableMarkdown(result.nodeAfter)) {
       importTextTransformers(
         result.nodeAfter,
         textFormatTransformersIndex,
         textMatchTransformers,
       );
     }
-    if (
-      result.nodeBefore &&
-      $isTextNode(result.nodeBefore) &&
-      !result.nodeBefore.hasFormat('code')
-    ) {
+    if (canContainTransformableMarkdown(result.nodeBefore)) {
       importTextTransformers(
         result.nodeBefore,
         textFormatTransformersIndex,
         textMatchTransformers,
       );
     }
-    if (
-      result.transformedNode &&
-      $isTextNode(result.transformedNode) &&
-      !result.transformedNode.hasFormat('code')
-    ) {
+    if (canContainTransformableMarkdown(result.transformedNode)) {
       importTextTransformers(
         result.transformedNode,
         textFormatTransformersIndex,
@@ -109,33 +109,21 @@ export function importTextTransformers(
       return;
     }
 
-    if (
-      result.nodeAfter &&
-      $isTextNode(result.nodeAfter) &&
-      !result.nodeAfter.hasFormat('code')
-    ) {
+    if (canContainTransformableMarkdown(result.nodeAfter)) {
       importTextTransformers(
         result.nodeAfter,
         textFormatTransformersIndex,
         textMatchTransformers,
       );
     }
-    if (
-      result.nodeBefore &&
-      $isTextNode(result.nodeBefore) &&
-      !result.nodeBefore.hasFormat('code')
-    ) {
+    if (canContainTransformableMarkdown(result.nodeBefore)) {
       importTextTransformers(
         result.nodeBefore,
         textFormatTransformersIndex,
         textMatchTransformers,
       );
     }
-    if (
-      result.transformedNode &&
-      $isTextNode(result.transformedNode) &&
-      !result.transformedNode.hasFormat('code')
-    ) {
+    if (canContainTransformableMarkdown(result.transformedNode)) {
       importTextTransformers(
         result.transformedNode,
         textFormatTransformersIndex,