diff --git a/packages/react/src/components/DiffView.tsx b/packages/react/src/components/DiffView.tsx index 9fbf2be..8cfb89d 100644 --- a/packages/react/src/components/DiffView.tsx +++ b/packages/react/src/components/DiffView.tsx @@ -315,22 +315,23 @@ const DiffViewWithRef = ( if (!diffFile) return; if (props.diffViewHighlight) { + // Always call initSyntax when highlight is enabled. + // initSyntax() is idempotent — when syntax is already initialized with a + // matching highlighter, it efficiently re-syncs syntax line references + // from the underlying File objects without recomputing. + // + // Previously, this effect skipped initSyntax() when the highlighter + // name/type already matched. However, on remount the global File cache + // causes initRaw() → #syncSyntax() to copy highlighter metadata from + // cached File objects into the fresh DiffFile, making it appear that + // syntax was already set up when it wasn't. This left syntax lines null + // and highlighting was lost on subsequent renders. if (registerHighlighter) { - if ( - registerHighlighter.name !== diffFile._getHighlighterName() || - registerHighlighter.type !== diffFile._getHighlighterType() || - registerHighlighter.type !== "class" - ) { - diffFile.initSyntax({ registerHighlighter: registerHighlighter }); - diffFile.notifyAll(); - } - } else if ( - (!diffFile._getIsCloned() && diffFile._getHighlighterName() !== buildInHighlighter.name) || - diffFile._getHighlighterType() !== "class" - ) { + diffFile.initSyntax({ registerHighlighter: registerHighlighter }); + } else { diffFile.initSyntax(); - diffFile.notifyAll(); } + diffFile.notifyAll(); } }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]); diff --git a/packages/solid/src/components/DiffView.tsx b/packages/solid/src/components/DiffView.tsx index 00e8cd6..2340071 100644 --- a/packages/solid/src/components/DiffView.tsx +++ b/packages/solid/src/components/DiffView.tsx @@ -198,21 +198,11 @@ const InternalDiffView = (props: DiffViewProps) => { if (props.diffViewHighlight) { const registerHighlighter = props.registerHighlighter; if (registerHighlighter) { - if ( - registerHighlighter.name !== currentDiffFile._getHighlighterName() || - registerHighlighter.type !== currentDiffFile._getHighlighterType() || - registerHighlighter.type !== "class" - ) { - currentDiffFile.initSyntax({ registerHighlighter: registerHighlighter }); - currentDiffFile.notifyAll(); - } - } else if ( - (!currentDiffFile._getIsCloned() && currentDiffFile._getHighlighterName() !== buildInHighlighter.name) || - currentDiffFile._getHighlighterType() !== "class" - ) { + currentDiffFile.initSyntax({ registerHighlighter: registerHighlighter }); + } else { currentDiffFile.initSyntax(); - currentDiffFile.notifyAll(); } + currentDiffFile.notifyAll(); } } }; diff --git a/packages/svelte/src/lib/components/DiffView.svelte b/packages/svelte/src/lib/components/DiffView.svelte index ef055cf..24f5bf9 100644 --- a/packages/svelte/src/lib/components/DiffView.svelte +++ b/packages/svelte/src/lib/components/DiffView.svelte @@ -164,23 +164,13 @@ if (enableHighlight) { const registerHighlighter = props.registerHighlighter; if (registerHighlighter) { - if ( - registerHighlighter.name !== diffFile._getHighlighterName() || - registerHighlighter.type !== diffFile._getHighlighterType() || - registerHighlighter.type !== 'class' - ) { - diffFile.initSyntax({ - registerHighlighter: registerHighlighter - }); - diffFile.notifyAll(); - } - } else if ( - (!diffFile._getIsCloned() && diffFile._getHighlighterName() !== buildInHighlighter.name) || - diffFile._getHighlighterType() !== 'class' - ) { + diffFile.initSyntax({ + registerHighlighter: registerHighlighter + }); + } else { diffFile.initSyntax(); - diffFile.notifyAll(); } + diffFile.notifyAll(); } }; diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx index df367bd..e287644 100644 --- a/packages/vue/src/components/DiffView.tsx +++ b/packages/vue/src/components/DiffView.tsx @@ -165,23 +165,13 @@ export const DiffView = defineComponent< if (enableHighlight.value) { const registerHighlighter = props.registerHighlighter; if (registerHighlighter) { - if ( - registerHighlighter.name !== instance._getHighlighterName() || - registerHighlighter.type !== instance._getHighlighterType() || - registerHighlighter.type !== "class" - ) { - instance.initSyntax({ - registerHighlighter: registerHighlighter, - }); - instance.notifyAll(); - } - } else if ( - (!instance._getIsCloned() && instance._getHighlighterName() !== buildInHighlighter.name) || - instance._getHighlighterType() !== "class" - ) { + instance.initSyntax({ + registerHighlighter: registerHighlighter, + }); + } else { instance.initSyntax({}); - instance.notifyAll(); } + instance.notifyAll(); } };