11import { generateDiffFile } from "@git-diff-view/file" ;
22import { DiffView , DiffFile } from "@git-diff-view/react" ;
3- import { Button , Code , useMantineColorScheme } from "@mantine/core" ;
3+ import { Button , Code , Switch , useMantineColorScheme } from "@mantine/core" ;
44import { debounce } from "lodash" ;
55import { useCallback , useEffect , useState } from "react" ;
66
@@ -50,9 +50,11 @@ const _PlayGroundGitDiff = ({ onClick }: { onClick: () => void }) => {
5050
5151 return (
5252 < div className = "m-auto mb-[1em] mt-[1em] w-[90%]" >
53- < h2 className = "text-[24px]" >
54- < Code className = "text-[24px]" > Git diff</ Code > mode
55- < div className = "ml-4 inline-block text-[14px]" >
53+ < h2 className = "flex flex-wrap gap-x-8 gap-y-4 text-[24px]" >
54+ < span >
55+ < Code className = "text-[24px]" > Git diff</ Code > mode
56+ </ span >
57+ < div className = "inline-block text-[14px]" >
5658 < Button onClick = { onClick } > Go to `File diff` mode</ Button >
5759 </ div >
5860 </ h2 >
@@ -107,6 +109,8 @@ const _PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
107109
108110 const [ lang2 , setLang2 ] = useState ( "ts" ) ;
109111
112+ const [ ignoreWhiteSpace , setIgnoreWhiteSpace ] = useState ( false ) ;
113+
110114 const [ file1 , setFile1 ] = useState (
111115 'import { createLowlight, all } from "lowlight";\n\nimport { processAST, type SyntaxLine } from "./processAST";\n\nconst lowlight = createLowlight(all);\n\n// !SEE https://github.com/highlightjs/highlightjs-vue\n\nlowlight.register("vue", function hljsDefineVue(hljs) {\n return {\n subLanguage: "xml",\n contains: [\n hljs.COMMENT("\x3C!--", "-->", {\n relevance: 10,\n }),\n {\n begin: /^(\\s*)(\x3Cscript>)/gm,\n end: /^(\\s*)(<\\/script>)/gm,\n subLanguage: "javascript",\n excludeBegin: true,\n excludeEnd: true,\n },\n {\n begin: /^(?:\\s*)(?:\x3Cscript\\s+lang=(["\'])ts\\1>)/gm,\n end: /^(\\s*)(<\\/script>)/gm,\n subLanguage: "typescript",\n excludeBegin: true,\n excludeEnd: true,\n },\n {\n begin: /^(\\s*)(<style(\\s+scoped)?>)/gm,\n end: /^(\\s*)(<\\/style>)/gm,\n subLanguage: "css",\n excludeBegin: true,\n excludeEnd: true,\n },\n {\n begin: /^(?:\\s*)(?:<style(?:\\s+scoped)?\\s+lang=(["\'])(?:s[ca]ss)\\1(?:\\s+scoped)?>)/gm,\n end: /^(\\s*)(<\\/style>)/gm,\n subLanguage: "scss",\n excludeBegin: true,\n excludeEnd: true,\n },\n {\n begin: /^(?:\\s*)(?:<style(?:\\s+scoped)?\\s+lang=(["\'])stylus\\1(?:\\s+scoped)?>)/gm,\n end: /^(\\s*)(<\\/style>)/gm,\n subLanguage: "stylus",\n excludeBegin: true,\n excludeEnd: true,\n },\n ],\n };\n});\n\nexport type DiffAST = ReturnType<typeof lowlight.highlight>;\n\nexport type DiffHighlighter = {\n name: string;\n maxLineToIgnoreSyntax: number;\n setMaxLineToIgnoreSyntax: (v: number) => void;\n ignoreSyntaxHighlightList: (string | RegExp)[];\n setIgnoreSyntaxHighlightList: (v: (string | RegExp)[]) => void;\n getAST: (raw: string, fileName?: string, lang?: string) => DiffAST;\n processAST: (ast: DiffAST) => { syntaxFileObject: Record<number, SyntaxLine>; syntaxFileLineNumber: number };\n hasRegisteredCurrentLang: (lang: string) => boolean;\n getHighlighterEngine: () => typeof lowlight;\n};\n\nconst instance = { name: "lowlight" };\n\nlet _maxLineToIgnoreSyntax = 2000;\n\nconst _ignoreSyntaxHighlightList: (string | RegExp)[] = [];\n\nObject.defineProperty(instance, "maxLineToIgnoreSyntax", {\n get: () => _maxLineToIgnoreSyntax,\n});\n\nObject.defineProperty(instance, "setMaxLineToIgnoreSyntax", {\n value: (v: number) => {\n _maxLineToIgnoreSyntax = v;\n },\n});\n\nObject.defineProperty(instance, "ignoreSyntaxHighlightList", {\n get: () => _ignoreSyntaxHighlightList,\n});\n\nObject.defineProperty(instance, "setIgnoreSyntaxHighlightList", {\n value: (v: (string | RegExp)[]) => {\n _ignoreSyntaxHighlightList.length = 0;\n _ignoreSyntaxHighlightList.push(...v);\n },\n});\n\nObject.defineProperty(instance, "getAST", {\n value: (raw: string, fileName?: string, lang?: string) => {\n let hasRegisteredLang = true;\n\n if (!lowlight.registered(lang)) {\n __DEV__ && console.warn(`not support current lang: ${lang} yet`);\n hasRegisteredLang = false;\n }\n\n if (\n fileName &&\n highlighter.ignoreSyntaxHighlightList.some((item) =>\n item instanceof RegExp ? item.test(fileName) : fileName === item\n )\n ) {\n __DEV__ &&\n console.warn(\n `ignore syntax for current file, because the fileName is in the ignoreSyntaxHighlightList: ${fileName}`\n );\n return;\n }\n\n if (hasRegisteredLang) {\n return lowlight.highlight(lang, raw);\n } else {\n return lowlight.highlightAuto(raw);\n }\n },\n});\n\nObject.defineProperty(instance, "processAST", {\n value: (ast: DiffAST) => {\n return processAST(ast);\n },\n});\n\nObject.defineProperty(instance, "hasRegisteredCurrentLang", {\n value: (lang: string) => {\n return lowlight.registered(lang);\n },\n});\n\nexport { processAST } from "./processAST";\n\nexport const versions = __VERSION__;\n\nexport const highlighter: DiffHighlighter = instance as DiffHighlighter;\n'
112116 ) ;
@@ -120,13 +124,13 @@ const _PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
120124 const [ diffInstance , setDiffInstance ] = useState < DiffFile > ( ) ;
121125
122126 const setDiffInstanceCb = useCallback (
123- debounce ( ( lang1 , lang2 , file1 , file2 ) => {
127+ debounce ( ( lang1 , lang2 , file1 , file2 , ignoreWhiteSpace ) => {
124128 if ( ! file1 && ! file2 ) {
125129 setDiffInstance ( undefined ) ;
126130 return ;
127131 }
128132 const data = generateDiffFile ( `foo.${ lang1 } , file1 , `foo.${ lang2 } , file2 , lang1 , lang2 , {
129- ignoreWhitespace : true ,
133+ ignoreWhitespace : ignoreWhiteSpace ,
130134 } ) ;
131135 try {
132136 data ?. init ( ) ;
@@ -140,16 +144,25 @@ const _PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
140144 ) ;
141145
142146 useEffect ( ( ) => {
143- setDiffInstanceCb ( lang1 , lang2 , file1 , file2 ) ;
144- } , [ file1 , file2 , lang1 , lang2 ] ) ;
147+ setDiffInstanceCb ( lang1 , lang2 , file1 , file2 , ignoreWhiteSpace ) ;
148+ } , [ file1 , file2 , lang1 , lang2 , ignoreWhiteSpace ] ) ;
145149
146150 return (
147151 < div className = "m-auto mb-[1em] mt-[1em] w-[90%]" >
148- < h2 className = "text-[24px]" >
149- < Code className = "text-[24px]" > File diff</ Code > mode
150- < div className = "ml-4 inline-block text-[14px]" >
152+ < h2 className = "flex flex-wrap gap-x-8 gap-y-4 text-[24px]" >
153+ < span >
154+ < Code className = "text-[24px]" > File diff</ Code > mode
155+ </ span >
156+ < div className = "inline-block text-[14px]" >
151157 < Button onClick = { onClick } > Go to `Git diff` mode</ Button >
152158 </ div >
159+ < div className = "inline-flex" >
160+ < Switch
161+ checked = { ignoreWhiteSpace }
162+ onChange = { ( e ) => setIgnoreWhiteSpace ( e . target . checked ) }
163+ label = "Ignore WhiteSpace"
164+ />
165+ </ div >
153166 </ h2 >
154167 < div className = "mt-[10px] flex gap-x-[10px]" >
155168 < div className = "flex w-[50%] flex-col gap-y-[10px]" >
0 commit comments