react-codemirror-runmode 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -3
- package/dist/react-highlighter.js +3 -2
- package/package.json +22 -22
- package/src/react-highlighter.tsx +11 -1
- package/test/fixtures/large.html +17604 -0
- package/test/index.spec.tsx +22 -0
- package/test/perf.bench.tsx +64 -0
- package/tsconfig.json +2 -0
package/README.md
CHANGED
|
@@ -83,9 +83,7 @@ import { markdownLanguage } from '@codemirror/lang-markdown'
|
|
|
83
83
|
theme={[tokenHighlighter, mdTokenHighlighter]}
|
|
84
84
|
markdownConfig={{
|
|
85
85
|
base: markdownLanguage,
|
|
86
|
-
extensions: [
|
|
87
|
-
/* your @lezer/markdown extensions */
|
|
88
|
-
]
|
|
86
|
+
extensions: [/* your @lezer/markdown extensions */]
|
|
89
87
|
}}
|
|
90
88
|
>
|
|
91
89
|
{markdownSource}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useEffect, useState } from 'react';
|
|
3
3
|
import { highlightCode } from './highlight.js';
|
|
4
|
+
const WRAPPER_STYLE = { display: 'contents' };
|
|
4
5
|
export const Highlighter = memo((props) => {
|
|
5
6
|
const { lang, children: code, theme, fallbackLanguage, languages, markdownConfig } = props;
|
|
6
7
|
const [highlightedCode, setHighlightedCode] = useState(null);
|
|
@@ -9,6 +10,6 @@ export const Highlighter = memo((props) => {
|
|
|
9
10
|
return (_jsx("span", { className: style || '', children: text }, from));
|
|
10
11
|
}, markdownConfig).then(setHighlightedCode);
|
|
11
12
|
}, [lang, code, theme, markdownConfig]);
|
|
12
|
-
return _jsx(
|
|
13
|
+
return highlightedCode ? (_jsx("span", { style: WRAPPER_STYLE, children: highlightedCode }, "highlighted")) : (_jsx("span", { style: WRAPPER_STYLE, children: code }, "pending"));
|
|
13
14
|
});
|
|
14
15
|
Highlighter.displayName = 'Highlighter';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-codemirror-runmode",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "Syntax highlighting for react, utilizing CodeMirror's parser",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"codemirror",
|
|
@@ -22,18 +22,9 @@
|
|
|
22
22
|
"types": "./dist/index.d.ts"
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
|
-
"scripts": {
|
|
26
|
-
"build": "tsc --project tsconfig.build.json",
|
|
27
|
-
"test": "vitest",
|
|
28
|
-
"lint": "oxlint",
|
|
29
|
-
"typecheck": "tsc --noEmit",
|
|
30
|
-
"format": "oxfmt",
|
|
31
|
-
"format:check": "oxfmt --check",
|
|
32
|
-
"prepublishOnly": "npm-run-all lint format:check build && npm run test run"
|
|
33
|
-
},
|
|
34
25
|
"dependencies": {
|
|
35
|
-
"@codemirror/lang-markdown": "^6.5.
|
|
36
|
-
"@codemirror/language": "^6.12.
|
|
26
|
+
"@codemirror/lang-markdown": "^6.5.1",
|
|
27
|
+
"@codemirror/language": "^6.12.4",
|
|
37
28
|
"@codemirror/language-data": "^6.5.2",
|
|
38
29
|
"@lezer/common": "^1.5.2",
|
|
39
30
|
"@lezer/highlight": "^1.2.3"
|
|
@@ -41,20 +32,29 @@
|
|
|
41
32
|
"devDependencies": {
|
|
42
33
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
43
34
|
"@testing-library/react": "^16.3.2",
|
|
44
|
-
"@types/node": "^26.
|
|
35
|
+
"@types/node": "^26.1.1",
|
|
45
36
|
"@types/react": "^19.2.17",
|
|
46
|
-
"@vitejs/plugin-react": "^6.0.
|
|
37
|
+
"@vitejs/plugin-react": "^6.0.4",
|
|
47
38
|
"jsdom": "^29.1.1",
|
|
48
39
|
"npm-run-all": "^4.1.5",
|
|
49
|
-
"oxfmt": "0.
|
|
50
|
-
"oxlint": "1.
|
|
51
|
-
"react": "^19.2.
|
|
52
|
-
"react-dom": "^19.2.
|
|
53
|
-
"typescript": "^
|
|
54
|
-
"vite": "^8.
|
|
55
|
-
"vitest": "^4.1.
|
|
40
|
+
"oxfmt": "0.60.0",
|
|
41
|
+
"oxlint": "1.75.0",
|
|
42
|
+
"react": "^19.2.8",
|
|
43
|
+
"react-dom": "^19.2.8",
|
|
44
|
+
"typescript": "^7.0.2",
|
|
45
|
+
"vite": "^8.1.5",
|
|
46
|
+
"vitest": "^4.1.10"
|
|
56
47
|
},
|
|
57
48
|
"peerDependencies": {
|
|
58
49
|
"react": ">= 18"
|
|
50
|
+
},
|
|
51
|
+
"scripts": {
|
|
52
|
+
"build": "tsc --project tsconfig.build.json",
|
|
53
|
+
"test": "vitest --run",
|
|
54
|
+
"bench": "vitest bench --run",
|
|
55
|
+
"lint": "oxlint",
|
|
56
|
+
"typecheck": "tsc --noEmit",
|
|
57
|
+
"format": "oxfmt",
|
|
58
|
+
"format:check": "oxfmt --check"
|
|
59
59
|
}
|
|
60
|
-
}
|
|
60
|
+
}
|
|
@@ -24,6 +24,8 @@ export type HighlighterProps = {
|
|
|
24
24
|
markdownConfig?: MarkdownConfig
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
const WRAPPER_STYLE = { display: 'contents' } as const
|
|
28
|
+
|
|
27
29
|
export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
|
|
28
30
|
const { lang, children: code, theme, fallbackLanguage, languages, markdownConfig } = props
|
|
29
31
|
const [highlightedCode, setHighlightedCode] = useState<React.ReactNode[] | null>(null)
|
|
@@ -46,6 +48,14 @@ export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
|
|
|
46
48
|
).then(setHighlightedCode)
|
|
47
49
|
}, [lang, code, theme, markdownConfig])
|
|
48
50
|
|
|
49
|
-
return
|
|
51
|
+
return highlightedCode ? (
|
|
52
|
+
<span key="highlighted" style={WRAPPER_STYLE}>
|
|
53
|
+
{highlightedCode}
|
|
54
|
+
</span>
|
|
55
|
+
) : (
|
|
56
|
+
<span key="pending" style={WRAPPER_STYLE}>
|
|
57
|
+
{code}
|
|
58
|
+
</span>
|
|
59
|
+
)
|
|
50
60
|
})
|
|
51
61
|
Highlighter.displayName = 'Highlighter'
|