From bc57e6832422ec4cbbf299a73acb8470a146017d Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Sun, 2 Apr 2023 09:49:32 +0000 Subject: [PATCH] Fix text annotations --- .changeset/eleven-comics-agree.md | 5 + lib/dist/browser.esm.mjs | 4 +- lib/dist/index.cjs.js | 4 +- lib/dist/index.esm.mjs | 4 +- lib/src/comments.ts | 6 +- lib/test/__snapshots__/browser.test.ts.snap | 223 ++++++++++++++++++++ lib/test/__snapshots__/cjs.test.ts.snap | 223 ++++++++++++++++++++ lib/test/__snapshots__/esm.test.ts.snap | 223 ++++++++++++++++++++ lib/test/annotations.ts | 31 +++ lib/test/browser.test.ts | 4 +- lib/test/cjs.test.ts | 5 +- lib/test/esm.test.ts | 4 +- 12 files changed, 728 insertions(+), 8 deletions(-) create mode 100644 .changeset/eleven-comics-agree.md create mode 100644 lib/test/annotations.ts diff --git a/.changeset/eleven-comics-agree.md b/.changeset/eleven-comics-agree.md new file mode 100644 index 0000000..ddc4ed4 --- /dev/null +++ b/.changeset/eleven-comics-agree.md @@ -0,0 +1,5 @@ +--- +"@code-hike/lighter": patch +--- + +Fix text annotations diff --git a/lib/dist/browser.esm.mjs b/lib/dist/browser.esm.mjs index e1f6494..6889d5c 100644 --- a/lib/dist/browser.esm.mjs +++ b/lib/dist/browser.esm.mjs @@ -2660,7 +2660,9 @@ const commentsTheme = { ], }; function extractCommentsFromCode(code, grammar, annotationNames) { - const lines = highlightTokens(code, grammar, commentsTheme); + const lines = !grammar + ? highlightText(code) + : highlightTokens(code, grammar, commentsTheme); const allAnnotations = []; let lineNumber = 1; const cleanLines = lines diff --git a/lib/dist/index.cjs.js b/lib/dist/index.cjs.js index 942eb5c..81daef0 100644 --- a/lib/dist/index.cjs.js +++ b/lib/dist/index.cjs.js @@ -3030,7 +3030,9 @@ const commentsTheme = { ], }; function extractCommentsFromCode(code, grammar, annotationNames) { - const lines = highlightTokens(code, grammar, commentsTheme); + const lines = !grammar + ? highlightText(code) + : highlightTokens(code, grammar, commentsTheme); const allAnnotations = []; let lineNumber = 1; const cleanLines = lines diff --git a/lib/dist/index.esm.mjs b/lib/dist/index.esm.mjs index baec995..0815a7e 100644 --- a/lib/dist/index.esm.mjs +++ b/lib/dist/index.esm.mjs @@ -3008,7 +3008,9 @@ const commentsTheme = { ], }; function extractCommentsFromCode(code, grammar, annotationNames) { - const lines = highlightTokens(code, grammar, commentsTheme); + const lines = !grammar + ? highlightText(code) + : highlightTokens(code, grammar, commentsTheme); const allAnnotations = []; let lineNumber = 1; const cleanLines = lines diff --git a/lib/src/comments.ts b/lib/src/comments.ts index 16bff63..280c049 100644 --- a/lib/src/comments.ts +++ b/lib/src/comments.ts @@ -1,6 +1,6 @@ import { IGrammar } from "vscode-textmate"; import { Token } from "./annotations"; -import { highlightTokens } from "./highlighter"; +import { highlightText, highlightTokens } from "./highlighter"; import { CodeRange, parseRelativeRanges } from "./range"; import { FinalTheme } from "./theme"; @@ -35,7 +35,9 @@ export function extractCommentsFromCode( grammar: IGrammar, annotationNames: string[] ) { - const lines = highlightTokens(code, grammar, commentsTheme); + const lines = !grammar + ? highlightText(code) + : highlightTokens(code, grammar, commentsTheme); const allAnnotations: Annotation[] = []; diff --git a/lib/test/__snapshots__/browser.test.ts.snap b/lib/test/__snapshots__/browser.test.ts.snap index 4cc9958..43718a5 100644 --- a/lib/test/__snapshots__/browser.test.ts.snap +++ b/lib/test/__snapshots__/browser.test.ts.snap @@ -1,5 +1,228 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`extract annottations 1`] = ` +{ + "annotations": [ + { + "name": "foo", + "query": "", + "ranges": [ + { + "fromLineNumber": 2, + "toLineNumber": 2, + }, + ], + }, + ], + "code": "const x = 1; +const y = 2;", +} +`; + +exports[`extract annottations 2`] = ` +{ + "colors": { + "activeTabBackground": "#1E1E1E", + "activeTabBorder": "#1E1E1E", + "activeTabForeground": "#ffffff", + "activeTabTopBorder": undefined, + "background": "#1E1E1E", + "colorScheme": "dark", + "diffInsertedLineBackground": "#9bb95533", + "diffInsertedTextBackground": "#9ccc2c33", + "diffRemovedLineBackground": "#ff000033", + "diffRemovedTextBackground": "#ff000033", + "editorBackground": "#1E1E1E", + "editorGroupHeaderBackground": "#252526", + "foreground": "#D4D4D4", + "hoverTabBackground": "#2D2D2D", + "hoverTabForeground": "#ffffff80", + "iconForeground": "#C5C5C5", + "inactiveTabBackground": "#2D2D2D", + "inactiveTabForeground": "#ffffff80", + "lineNumberForeground": "#858585", + "listHoverBackground": "#2A2D2E", + "listHoverForeground": undefined, + "listSelectionBackground": "#37373D", + "listSelectionForeground": undefined, + "selectionBackground": "#264F78", + "sideBarBackground": "#252526", + "sideBarBorder": "#252526", + "sideBarForeground": "#D4D4D4", + "tabBorder": "#252526", + "tabsBorder": undefined, + }, + "lang": "javascript", + "lines": [ + { + "lineNumber": 1, + "tokens": [ + { + "content": "const", + "style": { + "color": "#569CD6", + }, + }, + { + "content": " ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "x", + "style": { + "color": "#4FC1FF", + }, + }, + { + "content": " = ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "1", + "style": { + "color": "#B5CEA8", + }, + }, + { + "content": ";", + "style": { + "color": "#D4D4D4", + }, + }, + ], + }, + { + "annotationName": "foo", + "annotationQuery": "", + "fromLineNumber": 2, + "lines": [ + { + "lineNumber": 2, + "tokens": [ + { + "content": "const", + "style": { + "color": "#569CD6", + }, + }, + { + "content": " ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "y", + "style": { + "color": "#4FC1FF", + }, + }, + { + "content": " = ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "2", + "style": { + "color": "#B5CEA8", + }, + }, + { + "content": ";", + "style": { + "color": "#D4D4D4", + }, + }, + ], + }, + ], + "toLineNumber": 2, + }, + ], +} +`; + +exports[`extract annottations from text 1`] = ` +{ + "annotations": [], + "code": "const x = 1; +// foo[3:5] +const y = 2;", +} +`; + +exports[`extract annottations from text 2`] = ` +{ + "colors": { + "activeTabBackground": "#1E1E1E", + "activeTabBorder": "#1E1E1E", + "activeTabForeground": "#ffffff", + "activeTabTopBorder": undefined, + "background": "#1E1E1E", + "colorScheme": "dark", + "diffInsertedLineBackground": "#9bb95533", + "diffInsertedTextBackground": "#9ccc2c33", + "diffRemovedLineBackground": "#ff000033", + "diffRemovedTextBackground": "#ff000033", + "editorBackground": "#1E1E1E", + "editorGroupHeaderBackground": "#252526", + "foreground": "#D4D4D4", + "hoverTabBackground": "#2D2D2D", + "hoverTabForeground": "#ffffff80", + "iconForeground": "#C5C5C5", + "inactiveTabBackground": "#2D2D2D", + "inactiveTabForeground": "#ffffff80", + "lineNumberForeground": "#858585", + "listHoverBackground": "#2A2D2E", + "listHoverForeground": undefined, + "listSelectionBackground": "#37373D", + "listSelectionForeground": undefined, + "selectionBackground": "#264F78", + "sideBarBackground": "#252526", + "sideBarBorder": "#252526", + "sideBarForeground": "#D4D4D4", + "tabBorder": "#252526", + "tabsBorder": undefined, + }, + "lang": "text", + "lines": [ + { + "lineNumber": 1, + "tokens": [ + { + "content": "const x = 1;", + "style": {}, + }, + ], + }, + { + "lineNumber": 2, + "tokens": [ + { + "content": "// foo[3:5]", + "style": {}, + }, + ], + }, + { + "lineNumber": 3, + "tokens": [ + { + "content": "const y = 2;", + "style": {}, + }, + ], + }, + ], +} +`; + exports[`highlight js 1`] = ` { "colors": { diff --git a/lib/test/__snapshots__/cjs.test.ts.snap b/lib/test/__snapshots__/cjs.test.ts.snap index 4cc9958..43718a5 100644 --- a/lib/test/__snapshots__/cjs.test.ts.snap +++ b/lib/test/__snapshots__/cjs.test.ts.snap @@ -1,5 +1,228 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`extract annottations 1`] = ` +{ + "annotations": [ + { + "name": "foo", + "query": "", + "ranges": [ + { + "fromLineNumber": 2, + "toLineNumber": 2, + }, + ], + }, + ], + "code": "const x = 1; +const y = 2;", +} +`; + +exports[`extract annottations 2`] = ` +{ + "colors": { + "activeTabBackground": "#1E1E1E", + "activeTabBorder": "#1E1E1E", + "activeTabForeground": "#ffffff", + "activeTabTopBorder": undefined, + "background": "#1E1E1E", + "colorScheme": "dark", + "diffInsertedLineBackground": "#9bb95533", + "diffInsertedTextBackground": "#9ccc2c33", + "diffRemovedLineBackground": "#ff000033", + "diffRemovedTextBackground": "#ff000033", + "editorBackground": "#1E1E1E", + "editorGroupHeaderBackground": "#252526", + "foreground": "#D4D4D4", + "hoverTabBackground": "#2D2D2D", + "hoverTabForeground": "#ffffff80", + "iconForeground": "#C5C5C5", + "inactiveTabBackground": "#2D2D2D", + "inactiveTabForeground": "#ffffff80", + "lineNumberForeground": "#858585", + "listHoverBackground": "#2A2D2E", + "listHoverForeground": undefined, + "listSelectionBackground": "#37373D", + "listSelectionForeground": undefined, + "selectionBackground": "#264F78", + "sideBarBackground": "#252526", + "sideBarBorder": "#252526", + "sideBarForeground": "#D4D4D4", + "tabBorder": "#252526", + "tabsBorder": undefined, + }, + "lang": "javascript", + "lines": [ + { + "lineNumber": 1, + "tokens": [ + { + "content": "const", + "style": { + "color": "#569CD6", + }, + }, + { + "content": " ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "x", + "style": { + "color": "#4FC1FF", + }, + }, + { + "content": " = ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "1", + "style": { + "color": "#B5CEA8", + }, + }, + { + "content": ";", + "style": { + "color": "#D4D4D4", + }, + }, + ], + }, + { + "annotationName": "foo", + "annotationQuery": "", + "fromLineNumber": 2, + "lines": [ + { + "lineNumber": 2, + "tokens": [ + { + "content": "const", + "style": { + "color": "#569CD6", + }, + }, + { + "content": " ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "y", + "style": { + "color": "#4FC1FF", + }, + }, + { + "content": " = ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "2", + "style": { + "color": "#B5CEA8", + }, + }, + { + "content": ";", + "style": { + "color": "#D4D4D4", + }, + }, + ], + }, + ], + "toLineNumber": 2, + }, + ], +} +`; + +exports[`extract annottations from text 1`] = ` +{ + "annotations": [], + "code": "const x = 1; +// foo[3:5] +const y = 2;", +} +`; + +exports[`extract annottations from text 2`] = ` +{ + "colors": { + "activeTabBackground": "#1E1E1E", + "activeTabBorder": "#1E1E1E", + "activeTabForeground": "#ffffff", + "activeTabTopBorder": undefined, + "background": "#1E1E1E", + "colorScheme": "dark", + "diffInsertedLineBackground": "#9bb95533", + "diffInsertedTextBackground": "#9ccc2c33", + "diffRemovedLineBackground": "#ff000033", + "diffRemovedTextBackground": "#ff000033", + "editorBackground": "#1E1E1E", + "editorGroupHeaderBackground": "#252526", + "foreground": "#D4D4D4", + "hoverTabBackground": "#2D2D2D", + "hoverTabForeground": "#ffffff80", + "iconForeground": "#C5C5C5", + "inactiveTabBackground": "#2D2D2D", + "inactiveTabForeground": "#ffffff80", + "lineNumberForeground": "#858585", + "listHoverBackground": "#2A2D2E", + "listHoverForeground": undefined, + "listSelectionBackground": "#37373D", + "listSelectionForeground": undefined, + "selectionBackground": "#264F78", + "sideBarBackground": "#252526", + "sideBarBorder": "#252526", + "sideBarForeground": "#D4D4D4", + "tabBorder": "#252526", + "tabsBorder": undefined, + }, + "lang": "text", + "lines": [ + { + "lineNumber": 1, + "tokens": [ + { + "content": "const x = 1;", + "style": {}, + }, + ], + }, + { + "lineNumber": 2, + "tokens": [ + { + "content": "// foo[3:5]", + "style": {}, + }, + ], + }, + { + "lineNumber": 3, + "tokens": [ + { + "content": "const y = 2;", + "style": {}, + }, + ], + }, + ], +} +`; + exports[`highlight js 1`] = ` { "colors": { diff --git a/lib/test/__snapshots__/esm.test.ts.snap b/lib/test/__snapshots__/esm.test.ts.snap index 4cc9958..43718a5 100644 --- a/lib/test/__snapshots__/esm.test.ts.snap +++ b/lib/test/__snapshots__/esm.test.ts.snap @@ -1,5 +1,228 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`extract annottations 1`] = ` +{ + "annotations": [ + { + "name": "foo", + "query": "", + "ranges": [ + { + "fromLineNumber": 2, + "toLineNumber": 2, + }, + ], + }, + ], + "code": "const x = 1; +const y = 2;", +} +`; + +exports[`extract annottations 2`] = ` +{ + "colors": { + "activeTabBackground": "#1E1E1E", + "activeTabBorder": "#1E1E1E", + "activeTabForeground": "#ffffff", + "activeTabTopBorder": undefined, + "background": "#1E1E1E", + "colorScheme": "dark", + "diffInsertedLineBackground": "#9bb95533", + "diffInsertedTextBackground": "#9ccc2c33", + "diffRemovedLineBackground": "#ff000033", + "diffRemovedTextBackground": "#ff000033", + "editorBackground": "#1E1E1E", + "editorGroupHeaderBackground": "#252526", + "foreground": "#D4D4D4", + "hoverTabBackground": "#2D2D2D", + "hoverTabForeground": "#ffffff80", + "iconForeground": "#C5C5C5", + "inactiveTabBackground": "#2D2D2D", + "inactiveTabForeground": "#ffffff80", + "lineNumberForeground": "#858585", + "listHoverBackground": "#2A2D2E", + "listHoverForeground": undefined, + "listSelectionBackground": "#37373D", + "listSelectionForeground": undefined, + "selectionBackground": "#264F78", + "sideBarBackground": "#252526", + "sideBarBorder": "#252526", + "sideBarForeground": "#D4D4D4", + "tabBorder": "#252526", + "tabsBorder": undefined, + }, + "lang": "javascript", + "lines": [ + { + "lineNumber": 1, + "tokens": [ + { + "content": "const", + "style": { + "color": "#569CD6", + }, + }, + { + "content": " ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "x", + "style": { + "color": "#4FC1FF", + }, + }, + { + "content": " = ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "1", + "style": { + "color": "#B5CEA8", + }, + }, + { + "content": ";", + "style": { + "color": "#D4D4D4", + }, + }, + ], + }, + { + "annotationName": "foo", + "annotationQuery": "", + "fromLineNumber": 2, + "lines": [ + { + "lineNumber": 2, + "tokens": [ + { + "content": "const", + "style": { + "color": "#569CD6", + }, + }, + { + "content": " ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "y", + "style": { + "color": "#4FC1FF", + }, + }, + { + "content": " = ", + "style": { + "color": "#D4D4D4", + }, + }, + { + "content": "2", + "style": { + "color": "#B5CEA8", + }, + }, + { + "content": ";", + "style": { + "color": "#D4D4D4", + }, + }, + ], + }, + ], + "toLineNumber": 2, + }, + ], +} +`; + +exports[`extract annottations from text 1`] = ` +{ + "annotations": [], + "code": "const x = 1; +// foo[3:5] +const y = 2;", +} +`; + +exports[`extract annottations from text 2`] = ` +{ + "colors": { + "activeTabBackground": "#1E1E1E", + "activeTabBorder": "#1E1E1E", + "activeTabForeground": "#ffffff", + "activeTabTopBorder": undefined, + "background": "#1E1E1E", + "colorScheme": "dark", + "diffInsertedLineBackground": "#9bb95533", + "diffInsertedTextBackground": "#9ccc2c33", + "diffRemovedLineBackground": "#ff000033", + "diffRemovedTextBackground": "#ff000033", + "editorBackground": "#1E1E1E", + "editorGroupHeaderBackground": "#252526", + "foreground": "#D4D4D4", + "hoverTabBackground": "#2D2D2D", + "hoverTabForeground": "#ffffff80", + "iconForeground": "#C5C5C5", + "inactiveTabBackground": "#2D2D2D", + "inactiveTabForeground": "#ffffff80", + "lineNumberForeground": "#858585", + "listHoverBackground": "#2A2D2E", + "listHoverForeground": undefined, + "listSelectionBackground": "#37373D", + "listSelectionForeground": undefined, + "selectionBackground": "#264F78", + "sideBarBackground": "#252526", + "sideBarBorder": "#252526", + "sideBarForeground": "#D4D4D4", + "tabBorder": "#252526", + "tabsBorder": undefined, + }, + "lang": "text", + "lines": [ + { + "lineNumber": 1, + "tokens": [ + { + "content": "const x = 1;", + "style": {}, + }, + ], + }, + { + "lineNumber": 2, + "tokens": [ + { + "content": "// foo[3:5]", + "style": {}, + }, + ], + }, + { + "lineNumber": 3, + "tokens": [ + { + "content": "const y = 2;", + "style": {}, + }, + ], + }, + ], +} +`; + exports[`highlight js 1`] = ` { "colors": { diff --git a/lib/test/annotations.ts b/lib/test/annotations.ts new file mode 100644 index 0000000..e744ca0 --- /dev/null +++ b/lib/test/annotations.ts @@ -0,0 +1,31 @@ +import { expect, test } from "vitest"; + +export function runAnnotationTests({ extractAnnotations, highlight }) { + test("extract annottations", async () => { + const code = ` +const x = 1; +// foo +const y = 2;`.trim(); + + const result = await extractAnnotations(code, "js", ["foo"]); + expect(result).toMatchSnapshot(); + const hResult = await highlight(result.code, "js", "dark-plus", { + annotations: result.annotations, + }); + expect(hResult).toMatchSnapshot(); + }); + + test("extract annottations from text", async () => { + const code = ` +const x = 1; +// foo[3:5] +const y = 2;`.trim(); + + const result = await extractAnnotations(code, "text", ["foo"]); + expect(result).toMatchSnapshot(); + const hResult = await highlight(result.code, "text", "dark-plus", { + annotations: result.annotations, + }); + expect(hResult).toMatchSnapshot(); + }); +} diff --git a/lib/test/browser.test.ts b/lib/test/browser.test.ts index aec05d6..c471b89 100644 --- a/lib/test/browser.test.ts +++ b/lib/test/browser.test.ts @@ -1,4 +1,6 @@ -import { highlight } from "../dist/browser.esm.mjs"; +import { highlight, extractAnnotations } from "../dist/browser.esm.mjs"; import { runTests } from "./highlight.js"; +import { runAnnotationTests } from "./annotations.js"; runTests({ highlight }); +runAnnotationTests({ extractAnnotations, highlight }); diff --git a/lib/test/cjs.test.ts b/lib/test/cjs.test.ts index 56eb2bd..f7026ff 100644 --- a/lib/test/cjs.test.ts +++ b/lib/test/cjs.test.ts @@ -1,4 +1,7 @@ -import { highlight } from "../dist/index.cjs.js"; +import { highlight, extractAnnotations } from "../dist/index.cjs.js"; import { runTests } from "./highlight.js"; +import { runAnnotationTests } from "./annotations.js"; runTests({ highlight }); + +runAnnotationTests({ extractAnnotations, highlight }); diff --git a/lib/test/esm.test.ts b/lib/test/esm.test.ts index 95367db..5376922 100644 --- a/lib/test/esm.test.ts +++ b/lib/test/esm.test.ts @@ -1,4 +1,6 @@ -import { highlight } from "../dist/index.esm.mjs"; +import { highlight, extractAnnotations } from "../dist/index.esm.mjs"; +import { runAnnotationTests } from "./annotations.js"; import { runTests } from "./highlight.js"; runTests({ highlight }); +runAnnotationTests({ extractAnnotations, highlight });