From c9fec2ef3df420fe23b97da24ee8e31ab85d8d29 Mon Sep 17 00:00:00 2001 From: Laurent Direr <4263535+ldirer@users.noreply.github.com> Date: Fri, 2 Jan 2026 00:17:26 +0100 Subject: [PATCH 1/2] fix(code editor): decorators with columnStart: 0 applied to entire line --- sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx | 1 + sandpack-react/src/components/CodeEditor/highlightDecorators.ts | 2 +- sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx index bdf8814df..59b46cd5b 100644 --- a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx @@ -152,6 +152,7 @@ export default function List() { decorators={[ { className: "highlight", line: 1 }, { className: "highlight", line: 9 }, + { className: "highlight", line: 11, startColumn: 0, endColumn: 1 }, { className: "widget", elementAttributes: { "data-id": "2" }, diff --git a/sandpack-react/src/components/CodeEditor/highlightDecorators.ts b/sandpack-react/src/components/CodeEditor/highlightDecorators.ts index 0ed76708f..d4c3a1b0d 100644 --- a/sandpack-react/src/components/CodeEditor/highlightDecorators.ts +++ b/sandpack-react/src/components/CodeEditor/highlightDecorators.ts @@ -38,7 +38,7 @@ export function highlightDecorators(positions: Decorators): Extension { column: item.startColumn, }) + 1; - if (item.startColumn && item.endColumn) { + if (item.startColumn !== undefined && item.endColumn !== undefined) { const positionLineEnd = getCodeMirrorPosition(view.state.doc, { line: item.line, diff --git a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx index 27f310553..05ec10c03 100644 --- a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx +++ b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx @@ -99,6 +99,7 @@ export default function List() { Date: Fri, 2 Jan 2026 00:17:42 +0100 Subject: [PATCH 2/2] fix(code editor): sort decorators by line and column CodeMirror expects ranges to be sorted by 'from' --- .../src/components/CodeEditor/CodeMirror.stories.tsx | 1 + sandpack-react/src/components/CodeEditor/CodeMirror.tsx | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx index 59b46cd5b..4fd85191f 100644 --- a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx @@ -152,6 +152,7 @@ export default function List() { decorators={[ { className: "highlight", line: 1 }, { className: "highlight", line: 9 }, + { className: "highlight", line: 11, startColumn: 1, endColumn: 2 }, { className: "highlight", line: 11, startColumn: 0, endColumn: 1 }, { className: "widget", diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx index d832471cf..4795339cc 100644 --- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx +++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx @@ -178,7 +178,11 @@ export const CodeMirror = React.forwardRef( const sortedDecorators = React.useMemo( () => decorators - ? decorators.sort((d1, d2) => d1.line - d2.line) + ? decorators.sort( + (d1, d2) => + d1.line - d2.line || + (d1.startColumn ?? 0) - (d2.startColumn ?? 0) + ) : decorators, [decorators] );