From 119b611c31dfb85c9f70fe85aa37d2cccd96c708 Mon Sep 17 00:00:00 2001 From: Justin H <1746134+soupaJ@users.noreply.github.com> Date: Sun, 26 Jun 2022 13:44:10 -0700 Subject: [PATCH 1/4] initial attempt at a code splitted syntax highligher --- components/markdown/CodeBlock.tsx | 46 ++ components/markdown/Markdown.tsx | 2 + .../syntax-highlighter.module.css | 88 +++ .../syntax-highlighter/syntax-highlighter.tsx | 91 +++ components/syntax-highlighter/utils.ts | 50 ++ next.config.js | 14 +- package-lock.json | 725 ++++++++++++++++++ package.json | 8 +- tailwind.config.js | 22 - 9 files changed, 1017 insertions(+), 29 deletions(-) create mode 100644 components/markdown/CodeBlock.tsx create mode 100644 components/syntax-highlighter/syntax-highlighter.module.css create mode 100644 components/syntax-highlighter/syntax-highlighter.tsx create mode 100644 components/syntax-highlighter/utils.ts diff --git a/components/markdown/CodeBlock.tsx b/components/markdown/CodeBlock.tsx new file mode 100644 index 0000000..040e626 --- /dev/null +++ b/components/markdown/CodeBlock.tsx @@ -0,0 +1,46 @@ +import dynamic from "next/dynamic"; +import React, { PropsWithChildren, useState } from "react"; + +const SyntaxHighlighter = dynamic( + () => import("../syntax-highlighter/syntax-highlighter") +); + +interface CodeBlockProps { + inline?: boolean; + className?: string; +} + +export default function CodeBlock({ + children, + className, + inline, +}: PropsWithChildren) { + if (!children) { + return null; + } + + const [codeViewLoaded, setCodeViewLoaded] = useState(false); + + if (inline) { + return ( + + {children} + + ); + } + + const language = className.replace("language-", ""); + return ( + + {codeViewLoaded ? null : children} + { + setCodeViewLoaded(true); + }} + > + {children} + + + ); +} diff --git a/components/markdown/Markdown.tsx b/components/markdown/Markdown.tsx index 2ca5cf4..0baee6e 100644 --- a/components/markdown/Markdown.tsx +++ b/components/markdown/Markdown.tsx @@ -1,6 +1,7 @@ import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { Link } from "../link"; +import CodeBlock from "./CodeBlock"; interface MarkdownProps { document: string; @@ -42,6 +43,7 @@ export default function Markdown({ document, className }: MarkdownProps) { return ; }, + code: CodeBlock, }} > {document} diff --git a/components/syntax-highlighter/syntax-highlighter.module.css b/components/syntax-highlighter/syntax-highlighter.module.css new file mode 100644 index 0000000..56cd5de --- /dev/null +++ b/components/syntax-highlighter/syntax-highlighter.module.css @@ -0,0 +1,88 @@ +.codeBlock { + --code-syntax-plain: #ffffff; + --code-syntax-comment: #757575; + --code-syntax-keyword: #37b9e5; + --code-syntax-tag: #975cdf; + --code-syntax-punctuation: #ffffff; + --code-syntax-definition: #86d9ca; + --code-syntax-property: #34d087; + --code-syntax-definition-property: #34d087; + --code-syntax-variable: #34d087; + --code-syntax-definition-variable: #ea8347; + --code-syntax-static: #ea8347; + --code-syntax-string: #977cdc; + --code-syntax-literal: #cec336; + --code-syntax-atom: #f66de8; + --code-syntax-bracket: #9d78ff; + --code-syntax-quotes: #a25cdf; +} + +.keyword, +.moduleKeyword { + color: var(--code-syntax-keyword); + font-weight: 500; +} + +.string { + color: var(--code-syntax-string); +} + +.variableName { + color: var(--code-syntax-variable); +} + +.definition_variableName { + color: var(--code-syntax-definition-variable); +} + +.plain { + color: var(--code-syntax-plain); +} + +.comment { + color: var(--code-syntax-comment); +} + +.property { + color: var(--code-syntax-property); +} + +.tag { + color: var(--code-syntax-property); +} + +.punctuation { + color: var(--code-syntax-punctuation); +} + +.number { + color: var(--code-syntax-static); +} + +.atom { + color: var(--code-syntax-atom); +} + +.brace, +.quote, +.doubleQuote { + color: var(--code-syntax-quotes); +} + +.angleBracket, +.squareBracket, +.paren { + color: var(--code-syntax-bracket); +} + +.labelName, +.typeName, +.operator, +.literal, +.propertyName { + color: var(--code-syntax-literal); +} + +.definition_propertyName { + color: var(--code-syntax-definition-property); +} diff --git a/components/syntax-highlighter/syntax-highlighter.tsx b/components/syntax-highlighter/syntax-highlighter.tsx new file mode 100644 index 0000000..2fc12a7 --- /dev/null +++ b/components/syntax-highlighter/syntax-highlighter.tsx @@ -0,0 +1,91 @@ +import React, { useEffect, useRef, useState } from "react"; +import { + EditorView, + highlightSpecialChars, + lineNumbers, +} from "@codemirror/view"; +import { + defaultHighlightStyle, + syntaxHighlighting, +} from "@codemirror/language"; +import { languages } from "@codemirror/language-data"; +import { EditorState } from "@codemirror/state"; +import { createHighlighterTokensFromStyles } from "./utils"; +import styles from "./syntax-highlighter.module.css"; + +export interface SyntaxHighlighterProps { + children: React.ReactNode; + language: string; + onLoaded: () => void; +} + +const highlightStyle = createHighlighterTokensFromStyles(styles); + +export default function SyntaxHighlighter({ + language, + children = "", + onLoaded = () => {}, +}: SyntaxHighlighterProps) { + const editorViewRef = useRef(); + const [loading, setLoading] = useState(true); + const languageConfig = languages.find((langConfig) => + langConfig.alias.includes(language) + ); + const block = useRef(); + + useEffect(() => { + let mounted = true; + + (async function () { + setLoading(true); + const languageSupport = await languageConfig.load(); + + if (block.current && mounted) { + const extensions = [ + lineNumbers(), + EditorView.editable.of(false), + EditorView.theme( + { + ".cm-gutters": { + borderRight: "1px solid #739fee73", + color: "#739fee", + backgroundColor: "transparent", + minWidth: "4ch", + marginRight: "12px", + }, + }, + { dark: true } + ), + syntaxHighlighting(defaultHighlightStyle), + syntaxHighlighting(highlightStyle), + highlightSpecialChars(), + languageSupport, + EditorState.tabSize.of(2), + ]; + + let view = new EditorView({ + doc: String(children).trimEnd(), + extensions, + parent: block.current, + }); + + editorViewRef.current = view; + setLoading(false); + } + })(); + + return () => { + mounted = false; + // If there's a view, destroy it. + editorViewRef.current?.destroy(); + }; + }, []); + + useEffect(() => { + if (!loading) { + onLoaded(); + } + }, [loading]); + + return
; +} diff --git a/components/syntax-highlighter/utils.ts b/components/syntax-highlighter/utils.ts new file mode 100644 index 0000000..c19841e --- /dev/null +++ b/components/syntax-highlighter/utils.ts @@ -0,0 +1,50 @@ +import { HighlightStyle, TagStyle } from "@codemirror/language"; +import { tags } from "@lezer/highlight"; + +export function createHighlighterTokensFromStyles( + styles: Record +): HighlightStyle { + const highlightConfig: TagStyle[] = Object.entries(styles).map( + ([key, className]) => { + if (key.includes("_")) { + return { + tag: composeTagsFromString(key), + class: className, + }; + } + + return { + tag: tags[key], + class: className, + }; + } + ); + + return HighlightStyle.define( + highlightConfig.filter((config) => typeof config.tag !== "undefined") + ); +} + +const composeTagsFromString = (stringifiedTagName) => + stringifiedTagName.split("_").reduceRight((val, fn) => { + if (!tags[fn]) { + const error = Error( + [ + `Unable to find a tag function named ${fn},`, + `while parsing key ${stringifiedTagName}.`, + "Key will be ignored in release build.", + "Fix styles to remove this error.", + ].join(" ") + ); + + // Don't want to break production app if something slips out, + // but hopefully by breaking the dev app, a developer will fix + // any issues before releasing to prod. + if (process.env.NODE_ENV !== "development") { + throw error; + } else { + console.error({ error }); + } + } + return tags[fn](typeof val === "string" ? tags[val] : val); + }); diff --git a/next.config.js b/next.config.js index e7e6b48..ac4abc8 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,7 @@ module.exports = { - swcMinify: true, + // Leaving this off for now. + // Codemirror does not minify correctly with this on. + swcMinify: false, reactStrictMode: true, i18n: { locales: ["en"], @@ -8,10 +10,10 @@ module.exports = { async redirects() { return [ { - source: '/:username/:gist_id', - destination: '/:gist_id', + source: "/:username/:gist_id", + destination: "/:gist_id", permanent: true, }, - ] - } -} \ No newline at end of file + ]; + }, +}; diff --git a/package-lock.json b/package-lock.json index 447bd17..49bc487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,6 +6,11 @@ "": { "name": "gistdoc", "dependencies": { + "@codemirror/language": "^6.1.0", + "@codemirror/language-data": "^6.1.0", + "@codemirror/state": "^6.0.1", + "@codemirror/view": "^6.0.2", + "@lezer/highlight": "^1.0.0", "dayjs": "^1.10.7", "next": "12.1.0", "react": "17.0.2", @@ -148,6 +153,234 @@ "node": ">=6.9.0" } }, + "node_modules/@codemirror/autocomplete": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.0.2.tgz", + "integrity": "sha512-9PDjnllmXan/7Uax87KGORbxerDJ/cu10SB+n4Jz0zXMEvIh3+TGgZxhIvDOtaQ4jDBQEM7kHYW4vLdQB0DGZQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-cpp": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.1.tgz", + "integrity": "sha512-46p3ohfhjzkLWJ3VwvzX0aqlXh8UkEqX1xo2Eds9l6Ql3uDoxI2IZEjR9cgJaGOZTXCkDzQuQH7sfYAxMvzLjA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/cpp": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-css": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz", + "integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/css": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-html": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.1.0.tgz", + "integrity": "sha512-gA7NmJxqvnhwza05CvR7W/39Ap9r/4Vs9uiC0IeFYo1hSlJzc/8N6Evviz6vTW1x8SpHcRYyqKOf6rpl6LfWtg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/html": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-java": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.0.tgz", + "integrity": "sha512-aeWq+ikUS6Eubk6RBbiMgxuBIT4Ih8Asb1qc2pSiMcstrwr4ODbazPXsBHbLBYg3aObvFyOm2bNQncbQJjZ3sQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/java": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.0.tgz", + "integrity": "sha512-IQLfR+pgydwLxP3AQYOhjGfLWlAZz5SEH+M1tnUXVvp2+KZhn3iDTQX/7HZgoJ3w0oySKOxPjdq6jmkTCW6/sg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-json": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.0.tgz", + "integrity": "sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-markdown": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.0.0.tgz", + "integrity": "sha512-ozJaO1W4WgGlwWOoYCSYzbVhhM0YM/4lAWLrNsBbmhh5Ztpl0qm4CgEQRl3t8/YcylTZYBIXiskui8sHNGd4dg==", + "dependencies": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/markdown": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-php": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.0.tgz", + "integrity": "sha512-96CEjq0xEgbzc6bdFPwILPfZ6m8917JRbh2oPszZJABlYxG4Y+eYjtYkUTDb4yuyjQKyigHoeGC6zoIOYA1NWA==", + "dependencies": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/php": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-python": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.0.0.tgz", + "integrity": "sha512-wI448yup4Y2Xxq/7r3Q4eEmth74ud263ABcexumEFEcoU+0c1k5XRKXp1aT5PrrVavlAKxWQMEvgi+x+HBU4zQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/python": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-rust": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.0.tgz", + "integrity": "sha512-VQql3Qk1BwoXb3SUkeWll/EEwhsgQWc1bpia7CFqqp2PhQBb5A6r4Vj2JCkU/nE6A7TDPSGHTOoqJSG5s/VXtQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/rust": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-sql": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.0.0.tgz", + "integrity": "sha512-mq4NwTDbbo7QZktfgPsS+ms0FmAceH4WM2jLbgf+N28FoKUy0JzGe3XJymgnTewXnNUwujKBxArQzibxSDdVyQ==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-wast": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.0.tgz", + "integrity": "sha512-vSbtLrxuB95PC5LJ+yszKVmBUkLmMdowNFjjn0e+LHeBzvpdQJHVomgE76UUFeZGW+Ht0VfM6rxEd9SL85FuhA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-xml": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.0.0.tgz", + "integrity": "sha512-M/HLWxIiP956xGjtrxkeHkCmDGVQGKu782x8pOH5CLJIMkWtiB1DWfDoDHqpFjdEE9dkfcqPWvYfVi6GbhuXEg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/xml": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.1.0.tgz", + "integrity": "sha512-CeqY80nvUFrJcXcBW115aNi06D0PS8NSW6nuJRSwbrYFkE0SfJnPfyLGrcM90AV95lqg5+4xUi99BCmzNaPGJg==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/language-data": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.1.0.tgz", + "integrity": "sha512-g9V23fuLRI9AEbpM6bDy1oquqgpFlIDHTihUhL21NPmxp+x67ZJbsKk+V71W7/Bj8SCqEO1PtqQA/tDGgt1nfw==", + "dependencies": { + "@codemirror/lang-cpp": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/lang-java": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/lang-json": "^6.0.0", + "@codemirror/lang-markdown": "^6.0.0", + "@codemirror/lang-php": "^6.0.0", + "@codemirror/lang-python": "^6.0.0", + "@codemirror/lang-rust": "^6.0.0", + "@codemirror/lang-sql": "^6.0.0", + "@codemirror/lang-wast": "^6.0.0", + "@codemirror/lang-xml": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/legacy-modes": "^6.1.0" + } + }, + "node_modules/@codemirror/legacy-modes": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.1.0.tgz", + "integrity": "sha512-V/PgGpndkZeTn3Hdlg/gd8MLFdyvTCIX+iwJzjUw5iNziWiNsAY8X0jvf7m3gSfxnKkNzmid6l0g4rYSpiDaCw==", + "dependencies": { + "@codemirror/language": "^6.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz", + "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.0.1.tgz", + "integrity": "sha512-6vYgaXc4KjSY0BUfSVDJooGcoswg/RJZpq/ZGjsUYmY0KN1lmB8u03nv+jiG1ncUV5qoggyxFT5AGD5Ak+5Zrw==" + }, + "node_modules/@codemirror/view": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.0.2.tgz", + "integrity": "sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@eslint/eslintrc": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz", @@ -261,6 +494,126 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@lezer/common": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz", + "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==" + }, + "node_modules/@lezer/cpp": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.0.0.tgz", + "integrity": "sha512-Klk3/AIEKoptmm6cNm7xTulNXjdTKkD+hVOEcz/NeRg8tIestP5hsGHJeFDR/XtyDTxsjoPjKZRIGohht7zbKw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/css": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.0.tgz", + "integrity": "sha512-616VqgDKumHmYIuxs3tnX1irEQmoDHgF/TlP4O5ICWwyHwLMErq+8iKVuzTkOdBqvYAVmObqThcDEAaaMJjAdg==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/highlight": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz", + "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/html": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.0.0.tgz", + "integrity": "sha512-wZHBcieArLTxEi198hqRBBHMySzDKo5suWaESdUw0t44IXp01vkSRwX2brG1qBbKdwJ+C6U0iMl00vWNiyAROg==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/java": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.0.0.tgz", + "integrity": "sha512-z2EA0JHq2WoiKfQy5uOOd4t17PJtq8guh58gPkSzOnNcQ7DNbkrU+Axak+jL8+Noinwyz2tRNOseQFj+Tg+P0A==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.0.tgz", + "integrity": "sha512-RawBSrMD9yrVdrXWKn7hqo5BqgBaFelUx80i6p2/V0f+0THjncSSrRC6v3QWVv++RpqWT59L8ujKZjlExJq9xw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/json": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz", + "integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.0.0.tgz", + "integrity": "sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/markdown": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.0.tgz", + "integrity": "sha512-zXPyB87LoEEGzwxtzfLaeiHOgxCgw/eEAD+meDmF8ldNggD4H22pEMCEwgKZKc8wV9dEeQGxYmuC+yW+LqAFew==", + "dependencies": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@lezer/php": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.0.tgz", + "integrity": "sha512-kFQu/mk/vmjpA+fjQU87d9eimqKJ9PFCa8CZCPFWGEwNnm7Ahpw32N+HYEU/YAQ0XcfmOAnW/YJCEa8WpUOMMw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/python": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.0.0.tgz", + "integrity": "sha512-UQtDPmNhXxQZ7/Uoh8mR6sckrFzeyrjCkTIy7WQY8Sjdfi8wmr49iPbgsThy1Jy0DDBTnqZRULDngXNJ5AWVqg==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/rust": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.0.tgz", + "integrity": "sha512-IpGAxIjNxYmX9ra6GfQTSPegdCAWNeq23WNmrsMMQI7YNSvKtYxO4TX5rgZUmbhEucWn0KTBMeDEPXg99YKtTA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/xml": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.0.tgz", + "integrity": "sha512-73iI9UK8iqSvWtLlOEl/g+50ivwQn8Ge6foHVN66AXUS1RccFnAoc7BYU8b3c8/rP6dfCOGqAGaWLxBzhj60MA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, "node_modules/@next/env": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz", @@ -1233,6 +1586,11 @@ "node": ">=10" } }, + "node_modules/crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -4609,6 +4967,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==" + }, "node_modules/style-to-object": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz", @@ -5005,6 +5368,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/w3c-keyname": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz", + "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==" + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -5183,6 +5551,228 @@ "regenerator-runtime": "^0.13.4" } }, + "@codemirror/autocomplete": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.0.2.tgz", + "integrity": "sha512-9PDjnllmXan/7Uax87KGORbxerDJ/cu10SB+n4Jz0zXMEvIh3+TGgZxhIvDOtaQ4jDBQEM7kHYW4vLdQB0DGZQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/lang-cpp": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.1.tgz", + "integrity": "sha512-46p3ohfhjzkLWJ3VwvzX0aqlXh8UkEqX1xo2Eds9l6Ql3uDoxI2IZEjR9cgJaGOZTXCkDzQuQH7sfYAxMvzLjA==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/cpp": "^1.0.0" + } + }, + "@codemirror/lang-css": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz", + "integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/css": "^1.0.0" + } + }, + "@codemirror/lang-html": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.1.0.tgz", + "integrity": "sha512-gA7NmJxqvnhwza05CvR7W/39Ap9r/4Vs9uiC0IeFYo1hSlJzc/8N6Evviz6vTW1x8SpHcRYyqKOf6rpl6LfWtg==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/html": "^1.0.0" + } + }, + "@codemirror/lang-java": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.0.tgz", + "integrity": "sha512-aeWq+ikUS6Eubk6RBbiMgxuBIT4Ih8Asb1qc2pSiMcstrwr4ODbazPXsBHbLBYg3aObvFyOm2bNQncbQJjZ3sQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/java": "^1.0.0" + } + }, + "@codemirror/lang-javascript": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.0.tgz", + "integrity": "sha512-IQLfR+pgydwLxP3AQYOhjGfLWlAZz5SEH+M1tnUXVvp2+KZhn3iDTQX/7HZgoJ3w0oySKOxPjdq6jmkTCW6/sg==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "@codemirror/lang-json": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.0.tgz", + "integrity": "sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "@codemirror/lang-markdown": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.0.0.tgz", + "integrity": "sha512-ozJaO1W4WgGlwWOoYCSYzbVhhM0YM/4lAWLrNsBbmhh5Ztpl0qm4CgEQRl3t8/YcylTZYBIXiskui8sHNGd4dg==", + "requires": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/markdown": "^1.0.0" + } + }, + "@codemirror/lang-php": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.0.tgz", + "integrity": "sha512-96CEjq0xEgbzc6bdFPwILPfZ6m8917JRbh2oPszZJABlYxG4Y+eYjtYkUTDb4yuyjQKyigHoeGC6zoIOYA1NWA==", + "requires": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/php": "^1.0.0" + } + }, + "@codemirror/lang-python": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.0.0.tgz", + "integrity": "sha512-wI448yup4Y2Xxq/7r3Q4eEmth74ud263ABcexumEFEcoU+0c1k5XRKXp1aT5PrrVavlAKxWQMEvgi+x+HBU4zQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/python": "^1.0.0" + } + }, + "@codemirror/lang-rust": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.0.tgz", + "integrity": "sha512-VQql3Qk1BwoXb3SUkeWll/EEwhsgQWc1bpia7CFqqp2PhQBb5A6r4Vj2JCkU/nE6A7TDPSGHTOoqJSG5s/VXtQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/rust": "^1.0.0" + } + }, + "@codemirror/lang-sql": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.0.0.tgz", + "integrity": "sha512-mq4NwTDbbo7QZktfgPsS+ms0FmAceH4WM2jLbgf+N28FoKUy0JzGe3XJymgnTewXnNUwujKBxArQzibxSDdVyQ==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@codemirror/lang-wast": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.0.tgz", + "integrity": "sha512-vSbtLrxuB95PC5LJ+yszKVmBUkLmMdowNFjjn0e+LHeBzvpdQJHVomgE76UUFeZGW+Ht0VfM6rxEd9SL85FuhA==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@codemirror/lang-xml": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.0.0.tgz", + "integrity": "sha512-M/HLWxIiP956xGjtrxkeHkCmDGVQGKu782x8pOH5CLJIMkWtiB1DWfDoDHqpFjdEE9dkfcqPWvYfVi6GbhuXEg==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/xml": "^1.0.0" + } + }, + "@codemirror/language": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.1.0.tgz", + "integrity": "sha512-CeqY80nvUFrJcXcBW115aNi06D0PS8NSW6nuJRSwbrYFkE0SfJnPfyLGrcM90AV95lqg5+4xUi99BCmzNaPGJg==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "@codemirror/language-data": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.1.0.tgz", + "integrity": "sha512-g9V23fuLRI9AEbpM6bDy1oquqgpFlIDHTihUhL21NPmxp+x67ZJbsKk+V71W7/Bj8SCqEO1PtqQA/tDGgt1nfw==", + "requires": { + "@codemirror/lang-cpp": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/lang-java": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/lang-json": "^6.0.0", + "@codemirror/lang-markdown": "^6.0.0", + "@codemirror/lang-php": "^6.0.0", + "@codemirror/lang-python": "^6.0.0", + "@codemirror/lang-rust": "^6.0.0", + "@codemirror/lang-sql": "^6.0.0", + "@codemirror/lang-wast": "^6.0.0", + "@codemirror/lang-xml": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/legacy-modes": "^6.1.0" + } + }, + "@codemirror/legacy-modes": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.1.0.tgz", + "integrity": "sha512-V/PgGpndkZeTn3Hdlg/gd8MLFdyvTCIX+iwJzjUw5iNziWiNsAY8X0jvf7m3gSfxnKkNzmid6l0g4rYSpiDaCw==", + "requires": { + "@codemirror/language": "^6.0.0" + } + }, + "@codemirror/lint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz", + "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/state": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.0.1.tgz", + "integrity": "sha512-6vYgaXc4KjSY0BUfSVDJooGcoswg/RJZpq/ZGjsUYmY0KN1lmB8u03nv+jiG1ncUV5qoggyxFT5AGD5Ak+5Zrw==" + }, + "@codemirror/view": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.0.2.tgz", + "integrity": "sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==", + "requires": { + "@codemirror/state": "^6.0.0", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "@eslint/eslintrc": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz", @@ -5266,6 +5856,126 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "@lezer/common": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz", + "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==" + }, + "@lezer/cpp": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.0.0.tgz", + "integrity": "sha512-Klk3/AIEKoptmm6cNm7xTulNXjdTKkD+hVOEcz/NeRg8tIestP5hsGHJeFDR/XtyDTxsjoPjKZRIGohht7zbKw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/css": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.0.tgz", + "integrity": "sha512-616VqgDKumHmYIuxs3tnX1irEQmoDHgF/TlP4O5ICWwyHwLMErq+8iKVuzTkOdBqvYAVmObqThcDEAaaMJjAdg==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/highlight": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz", + "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/html": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.0.0.tgz", + "integrity": "sha512-wZHBcieArLTxEi198hqRBBHMySzDKo5suWaESdUw0t44IXp01vkSRwX2brG1qBbKdwJ+C6U0iMl00vWNiyAROg==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/java": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.0.0.tgz", + "integrity": "sha512-z2EA0JHq2WoiKfQy5uOOd4t17PJtq8guh58gPkSzOnNcQ7DNbkrU+Axak+jL8+Noinwyz2tRNOseQFj+Tg+P0A==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/javascript": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.0.tgz", + "integrity": "sha512-RawBSrMD9yrVdrXWKn7hqo5BqgBaFelUx80i6p2/V0f+0THjncSSrRC6v3QWVv++RpqWT59L8ujKZjlExJq9xw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/json": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz", + "integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/lr": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.0.0.tgz", + "integrity": "sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/markdown": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.0.tgz", + "integrity": "sha512-zXPyB87LoEEGzwxtzfLaeiHOgxCgw/eEAD+meDmF8ldNggD4H22pEMCEwgKZKc8wV9dEeQGxYmuC+yW+LqAFew==", + "requires": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "@lezer/php": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.0.tgz", + "integrity": "sha512-kFQu/mk/vmjpA+fjQU87d9eimqKJ9PFCa8CZCPFWGEwNnm7Ahpw32N+HYEU/YAQ0XcfmOAnW/YJCEa8WpUOMMw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/python": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.0.0.tgz", + "integrity": "sha512-UQtDPmNhXxQZ7/Uoh8mR6sckrFzeyrjCkTIy7WQY8Sjdfi8wmr49iPbgsThy1Jy0DDBTnqZRULDngXNJ5AWVqg==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/rust": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.0.tgz", + "integrity": "sha512-IpGAxIjNxYmX9ra6GfQTSPegdCAWNeq23WNmrsMMQI7YNSvKtYxO4TX5rgZUmbhEucWn0KTBMeDEPXg99YKtTA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/xml": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.0.tgz", + "integrity": "sha512-73iI9UK8iqSvWtLlOEl/g+50ivwQn8Ge6foHVN66AXUS1RccFnAoc7BYU8b3c8/rP6dfCOGqAGaWLxBzhj60MA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, "@next/env": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz", @@ -5896,6 +6606,11 @@ "yaml": "^1.10.0" } }, + "crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -8230,6 +8945,11 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==" + }, "style-to-object": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz", @@ -8514,6 +9234,11 @@ "unist-util-stringify-position": "^3.0.0" } }, + "w3c-keyname": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz", + "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==" + }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 7d86866..6dedd0e 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,15 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "clean": "rm -rf .next node_modules" }, "dependencies": { + "@codemirror/language": "^6.1.0", + "@codemirror/language-data": "^6.1.0", + "@codemirror/state": "^6.0.1", + "@codemirror/view": "^6.0.2", + "@lezer/highlight": "^1.0.0", "dayjs": "^1.10.7", "next": "12.1.0", "react": "17.0.2", diff --git a/tailwind.config.js b/tailwind.config.js index b7fd8d7..11603be 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,27 +3,5 @@ module.exports = { "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], - theme: { - extend: { - typography: ({ theme }) => ({ - DEFAULT: { - css: { - // In markdown, code starting with ``` are block - // style code snippets vs a single ` which are - // inline snippets. The `code` element by default - // is an inline element. Remark wraps block style - // code snippets in a `pre` tag. This attempts to - // target those elements to make them block elements. - // This also makes code blocks respect `pre`'s - // padding when scrolled. - "pre > code": { - display: "block", - overflow: "auto", - }, - }, - }, - }), - }, - }, plugins: [require("@tailwindcss/typography")], }; From 3f8d49fe5d1de303023edfd73b620cbbc74c8fe9 Mon Sep 17 00:00:00 2001 From: Justin H <1746134+soupaJ@users.noreply.github.com> Date: Sun, 26 Jun 2022 14:22:58 -0700 Subject: [PATCH 2/4] updates deps and fixes lint errors --- components/markdown/CodeBlock.tsx | 23 +- .../syntax-highlighter/syntax-highlighter.tsx | 19 +- package-lock.json | 346 +++++++++--------- package.json | 6 +- 4 files changed, 188 insertions(+), 206 deletions(-) diff --git a/components/markdown/CodeBlock.tsx b/components/markdown/CodeBlock.tsx index 040e626..548f811 100644 --- a/components/markdown/CodeBlock.tsx +++ b/components/markdown/CodeBlock.tsx @@ -1,8 +1,11 @@ import dynamic from "next/dynamic"; -import React, { PropsWithChildren, useState } from "react"; +import React, { PropsWithChildren, useState, Suspense } from "react"; const SyntaxHighlighter = dynamic( - () => import("../syntax-highlighter/syntax-highlighter") + () => import("../syntax-highlighter/syntax-highlighter"), + { + suspense: true, + } ); interface CodeBlockProps { @@ -19,8 +22,6 @@ export default function CodeBlock({ return null; } - const [codeViewLoaded, setCodeViewLoaded] = useState(false); - if (inline) { return ( @@ -30,17 +31,13 @@ export default function CodeBlock({ } const language = className.replace("language-", ""); + const codeToParse = String(children?.[0] || ""); + return ( - {codeViewLoaded ? null : children} - { - setCodeViewLoaded(true); - }} - > - {children} - + + + ); } diff --git a/components/syntax-highlighter/syntax-highlighter.tsx b/components/syntax-highlighter/syntax-highlighter.tsx index 2fc12a7..9788976 100644 --- a/components/syntax-highlighter/syntax-highlighter.tsx +++ b/components/syntax-highlighter/syntax-highlighter.tsx @@ -14,20 +14,17 @@ import { createHighlighterTokensFromStyles } from "./utils"; import styles from "./syntax-highlighter.module.css"; export interface SyntaxHighlighterProps { - children: React.ReactNode; + code: string; language: string; - onLoaded: () => void; } const highlightStyle = createHighlighterTokensFromStyles(styles); export default function SyntaxHighlighter({ language, - children = "", - onLoaded = () => {}, + code = "", }: SyntaxHighlighterProps) { const editorViewRef = useRef(); - const [loading, setLoading] = useState(true); const languageConfig = languages.find((langConfig) => langConfig.alias.includes(language) ); @@ -37,7 +34,6 @@ export default function SyntaxHighlighter({ let mounted = true; (async function () { - setLoading(true); const languageSupport = await languageConfig.load(); if (block.current && mounted) { @@ -64,13 +60,12 @@ export default function SyntaxHighlighter({ ]; let view = new EditorView({ - doc: String(children).trimEnd(), + doc: code.trimEnd(), extensions, parent: block.current, }); editorViewRef.current = view; - setLoading(false); } })(); @@ -79,13 +74,7 @@ export default function SyntaxHighlighter({ // If there's a view, destroy it. editorViewRef.current?.destroy(); }; - }, []); - - useEffect(() => { - if (!loading) { - onLoaded(); - } - }, [loading]); + }, [languageConfig, code]); return
; } diff --git a/package-lock.json b/package-lock.json index 49bc487..0b8dddc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,9 @@ "@codemirror/view": "^6.0.2", "@lezer/highlight": "^1.0.0", "dayjs": "^1.10.7", - "next": "12.1.0", - "react": "17.0.2", - "react-dom": "17.0.2", + "next": "^12.1.6", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-markdown": "^7.1.2", "remark-gfm": "^3.0.1", "swr": "^1.1.2" @@ -615,9 +615,9 @@ } }, "node_modules/@next/env": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz", - "integrity": "sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ==" + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz", + "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA==" }, "node_modules/@next/eslint-plugin-next": { "version": "12.0.7", @@ -628,10 +628,25 @@ "glob": "7.1.7" } }, + "node_modules/@next/swc-android-arm-eabi": { + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz", + "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-android-arm64": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.0.tgz", - "integrity": "sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz", + "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==", "cpu": [ "arm64" ], @@ -644,9 +659,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.0.tgz", - "integrity": "sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz", + "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==", "cpu": [ "arm64" ], @@ -659,9 +674,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.0.tgz", - "integrity": "sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz", + "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==", "cpu": [ "x64" ], @@ -674,9 +689,9 @@ } }, "node_modules/@next/swc-linux-arm-gnueabihf": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.0.tgz", - "integrity": "sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz", + "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==", "cpu": [ "arm" ], @@ -689,9 +704,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.0.tgz", - "integrity": "sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz", + "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==", "cpu": [ "arm64" ], @@ -704,9 +719,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.0.tgz", - "integrity": "sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz", + "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==", "cpu": [ "arm64" ], @@ -719,9 +734,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz", - "integrity": "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz", + "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==", "cpu": [ "x64" ], @@ -734,9 +749,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz", - "integrity": "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz", + "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==", "cpu": [ "x64" ], @@ -749,9 +764,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.0.tgz", - "integrity": "sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz", + "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==", "cpu": [ "arm64" ], @@ -764,9 +779,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.0.tgz", - "integrity": "sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz", + "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==", "cpu": [ "ia32" ], @@ -779,9 +794,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz", - "integrity": "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz", + "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==", "cpu": [ "x64" ], @@ -1451,9 +1466,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001319", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz", - "integrity": "sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==", + "version": "1.0.30001359", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz", + "integrity": "sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==", "funding": [ { "type": "opencollective", @@ -4078,15 +4093,14 @@ "dev": true }, "node_modules/next": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/next/-/next-12.1.0.tgz", - "integrity": "sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/next/-/next-12.1.6.tgz", + "integrity": "sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==", "dependencies": { - "@next/env": "12.1.0", - "caniuse-lite": "^1.0.30001283", + "@next/env": "12.1.6", + "caniuse-lite": "^1.0.30001332", "postcss": "8.4.5", - "styled-jsx": "5.0.0", - "use-subscription": "1.5.1" + "styled-jsx": "5.0.2" }, "bin": { "next": "dist/bin/next" @@ -4095,17 +4109,18 @@ "node": ">=12.22.0" }, "optionalDependencies": { - "@next/swc-android-arm64": "12.1.0", - "@next/swc-darwin-arm64": "12.1.0", - "@next/swc-darwin-x64": "12.1.0", - "@next/swc-linux-arm-gnueabihf": "12.1.0", - "@next/swc-linux-arm64-gnu": "12.1.0", - "@next/swc-linux-arm64-musl": "12.1.0", - "@next/swc-linux-x64-gnu": "12.1.0", - "@next/swc-linux-x64-musl": "12.1.0", - "@next/swc-win32-arm64-msvc": "12.1.0", - "@next/swc-win32-ia32-msvc": "12.1.0", - "@next/swc-win32-x64-msvc": "12.1.0" + "@next/swc-android-arm-eabi": "12.1.6", + "@next/swc-android-arm64": "12.1.6", + "@next/swc-darwin-arm64": "12.1.6", + "@next/swc-darwin-x64": "12.1.6", + "@next/swc-linux-arm-gnueabihf": "12.1.6", + "@next/swc-linux-arm64-gnu": "12.1.6", + "@next/swc-linux-arm64-musl": "12.1.6", + "@next/swc-linux-x64-gnu": "12.1.6", + "@next/swc-linux-x64-musl": "12.1.6", + "@next/swc-win32-arm64-msvc": "12.1.6", + "@next/swc-win32-ia32-msvc": "12.1.6", + "@next/swc-win32-x64-msvc": "12.1.6" }, "peerDependencies": { "fibers": ">= 3.1.0", @@ -4577,28 +4592,26 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-is": { @@ -4811,12 +4824,11 @@ } }, "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/semver": { @@ -4981,14 +4993,14 @@ } }, "node_modules/styled-jsx": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz", - "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz", + "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==", "engines": { "node": ">= 12.0.0" }, "peerDependencies": { - "react": ">= 16.8.0 || 17.x.x || 18.x.x" + "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0" }, "peerDependenciesMeta": { "@babel/core": { @@ -5300,17 +5312,6 @@ "punycode": "^2.1.0" } }, - "node_modules/use-subscription": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", - "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==", - "dependencies": { - "object-assign": "^4.1.1" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -5977,9 +5978,9 @@ } }, "@next/env": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz", - "integrity": "sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ==" + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz", + "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA==" }, "@next/eslint-plugin-next": { "version": "12.0.7", @@ -5990,70 +5991,76 @@ "glob": "7.1.7" } }, + "@next/swc-android-arm-eabi": { + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz", + "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==", + "optional": true + }, "@next/swc-android-arm64": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.0.tgz", - "integrity": "sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz", + "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==", "optional": true }, "@next/swc-darwin-arm64": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.0.tgz", - "integrity": "sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz", + "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==", "optional": true }, "@next/swc-darwin-x64": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.0.tgz", - "integrity": "sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz", + "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==", "optional": true }, "@next/swc-linux-arm-gnueabihf": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.0.tgz", - "integrity": "sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz", + "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==", "optional": true }, "@next/swc-linux-arm64-gnu": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.0.tgz", - "integrity": "sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz", + "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==", "optional": true }, "@next/swc-linux-arm64-musl": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.0.tgz", - "integrity": "sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz", + "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==", "optional": true }, "@next/swc-linux-x64-gnu": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz", - "integrity": "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz", + "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==", "optional": true }, "@next/swc-linux-x64-musl": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz", - "integrity": "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz", + "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==", "optional": true }, "@next/swc-win32-arm64-msvc": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.0.tgz", - "integrity": "sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz", + "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==", "optional": true }, "@next/swc-win32-ia32-msvc": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.0.tgz", - "integrity": "sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz", + "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==", "optional": true }, "@next/swc-win32-x64-msvc": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz", - "integrity": "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz", + "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==", "optional": true }, "@nodelib/fs.scandir": { @@ -6521,9 +6528,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001319", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz", - "integrity": "sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==" + "version": "1.0.30001359", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz", + "integrity": "sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==" }, "ccount": { "version": "2.0.1", @@ -8358,26 +8365,26 @@ "dev": true }, "next": { - "version": "12.1.0", - "resolved": "https://registry.npmjs.org/next/-/next-12.1.0.tgz", - "integrity": "sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q==", - "requires": { - "@next/env": "12.1.0", - "@next/swc-android-arm64": "12.1.0", - "@next/swc-darwin-arm64": "12.1.0", - "@next/swc-darwin-x64": "12.1.0", - "@next/swc-linux-arm-gnueabihf": "12.1.0", - "@next/swc-linux-arm64-gnu": "12.1.0", - "@next/swc-linux-arm64-musl": "12.1.0", - "@next/swc-linux-x64-gnu": "12.1.0", - "@next/swc-linux-x64-musl": "12.1.0", - "@next/swc-win32-arm64-msvc": "12.1.0", - "@next/swc-win32-ia32-msvc": "12.1.0", - "@next/swc-win32-x64-msvc": "12.1.0", - "caniuse-lite": "^1.0.30001283", + "version": "12.1.6", + "resolved": "https://registry.npmjs.org/next/-/next-12.1.6.tgz", + "integrity": "sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==", + "requires": { + "@next/env": "12.1.6", + "@next/swc-android-arm-eabi": "12.1.6", + "@next/swc-android-arm64": "12.1.6", + "@next/swc-darwin-arm64": "12.1.6", + "@next/swc-darwin-x64": "12.1.6", + "@next/swc-linux-arm-gnueabihf": "12.1.6", + "@next/swc-linux-arm64-gnu": "12.1.6", + "@next/swc-linux-arm64-musl": "12.1.6", + "@next/swc-linux-x64-gnu": "12.1.6", + "@next/swc-linux-x64-musl": "12.1.6", + "@next/swc-win32-arm64-msvc": "12.1.6", + "@next/swc-win32-ia32-msvc": "12.1.6", + "@next/swc-win32-x64-msvc": "12.1.6", + "caniuse-lite": "^1.0.30001332", "postcss": "8.4.5", - "styled-jsx": "5.0.0", - "use-subscription": "1.5.1" + "styled-jsx": "5.0.2" }, "dependencies": { "postcss": { @@ -8675,22 +8682,20 @@ "dev": true }, "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" } }, "react-is": { @@ -8832,12 +8837,11 @@ } }, "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "semver": { @@ -8959,9 +8963,9 @@ } }, "styled-jsx": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz", - "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz", + "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==", "requires": {} }, "supports-color": { @@ -9183,14 +9187,6 @@ "punycode": "^2.1.0" } }, - "use-subscription": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", - "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==", - "requires": { - "object-assign": "^4.1.1" - } - }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 6dedd0e..a02ceb2 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "@codemirror/view": "^6.0.2", "@lezer/highlight": "^1.0.0", "dayjs": "^1.10.7", - "next": "12.1.0", - "react": "17.0.2", - "react-dom": "17.0.2", + "next": "^12.1.6", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-markdown": "^7.1.2", "remark-gfm": "^3.0.1", "swr": "^1.1.2" From b7ffdce571c0b8400c4c3280b072044c649ef381 Mon Sep 17 00:00:00 2001 From: Justin H <1746134+soupaJ@users.noreply.github.com> Date: Sun, 26 Jun 2022 21:36:21 -0700 Subject: [PATCH 3/4] fixes some mobile styling issues attempts to match the nord theme colors --- .../syntax-highlighter.module.css | 79 +++++++++++++------ .../syntax-highlighter/syntax-highlighter.tsx | 11 ++- 2 files changed, 65 insertions(+), 25 deletions(-) diff --git a/components/syntax-highlighter/syntax-highlighter.module.css b/components/syntax-highlighter/syntax-highlighter.module.css index 56cd5de..2c0ad30 100644 --- a/components/syntax-highlighter/syntax-highlighter.module.css +++ b/components/syntax-highlighter/syntax-highlighter.module.css @@ -1,20 +1,24 @@ .codeBlock { --code-syntax-plain: #ffffff; - --code-syntax-comment: #757575; - --code-syntax-keyword: #37b9e5; - --code-syntax-tag: #975cdf; + --code-syntax-comment: #616e88; + --code-syntax-keyword: #81a1c1; + --code-syntax-tag: #d08770; --code-syntax-punctuation: #ffffff; - --code-syntax-definition: #86d9ca; - --code-syntax-property: #34d087; - --code-syntax-definition-property: #34d087; - --code-syntax-variable: #34d087; - --code-syntax-definition-variable: #ea8347; - --code-syntax-static: #ea8347; - --code-syntax-string: #977cdc; - --code-syntax-literal: #cec336; - --code-syntax-atom: #f66de8; - --code-syntax-bracket: #9d78ff; - --code-syntax-quotes: #a25cdf; + --code-syntax-property: #81a1c1; + --code-syntax-propertyname: #8fbcbb; + --code-syntax-definition-name: red; + --code-syntax-definition-property: #88c0d0; + --code-syntax-variable: #d8dee9; + --code-syntax-function-variable: #8fbcbb; + --code-syntax-definition-variable: #d8dee9; + --code-syntax-static: #b48ead; + --code-syntax-string: #a3be8c; + --code-syntax-special-string: #d08770; + --code-syntax-literal: #d8dee9; + --code-syntax-atom: #b48ead; + --code-syntax-bracket: #e5e9f0; + --code-syntax-quotes: #e5e9f0; + --code-syntax-brace: #e5e9f0; } .keyword, @@ -23,6 +27,8 @@ font-weight: 500; } +.processingInstruction, +.inserted, .string { color: var(--code-syntax-string); } @@ -35,6 +41,10 @@ color: var(--code-syntax-definition-variable); } +.function_variableName { + color: var(--code-syntax-function-variable); +} + .plain { color: var(--code-syntax-plain); } @@ -43,12 +53,9 @@ color: var(--code-syntax-comment); } -.property { - color: var(--code-syntax-property); -} - -.tag { - color: var(--code-syntax-property); +.tag, +.tagName { + color: var(--code-syntax-tag); } .punctuation { @@ -59,11 +66,16 @@ color: var(--code-syntax-static); } -.atom { +.atom, +.bool, +.special_variableName { color: var(--code-syntax-atom); } -.brace, +.brace { + color: var(--code-syntax-brace); +} + .quote, .doubleQuote { color: var(--code-syntax-quotes); @@ -77,12 +89,31 @@ .labelName, .typeName, -.operator, -.literal, +.property { + color: var(--code-syntax-property); +} + .propertyName { + color: var(--code-syntax-propertyname); +} + +.operator, +.literal { color: var(--code-syntax-literal); } +.link, +.regexp, +.escape, +.url, +.special_string { + color: var(--code-syntax-special-string); +} + .definition_propertyName { color: var(--code-syntax-definition-property); } + +.definition_name { + color: var(--code-syntax-definition-name); +} diff --git a/components/syntax-highlighter/syntax-highlighter.tsx b/components/syntax-highlighter/syntax-highlighter.tsx index 9788976..e6b1055 100644 --- a/components/syntax-highlighter/syntax-highlighter.tsx +++ b/components/syntax-highlighter/syntax-highlighter.tsx @@ -42,10 +42,19 @@ export default function SyntaxHighlighter({ EditorView.editable.of(false), EditorView.theme( { + ".cm-scroller": { + // Shifting the horizontal scrollbar slightly below + // the bottom line. This reverts the bottom padding + // added on the `pre` tag. + paddingBottom: "0.857143em", + marginBottom: "-0.857143rem", + }, ".cm-gutters": { borderRight: "1px solid #739fee73", color: "#739fee", - backgroundColor: "transparent", + // Matching the `pre` tag's background since the editor + // text sits below the gutter when scrolled horizontal. + backgroundColor: "var(--tw-prose-pre-bg)", minWidth: "4ch", marginRight: "12px", }, From fc998deae42d2d79bafc01a391773df938510313 Mon Sep 17 00:00:00 2001 From: Justin H <1746134+soupaJ@users.noreply.github.com> Date: Thu, 30 Jun 2022 20:12:29 -0700 Subject: [PATCH 4/4] fixes some styling issues --- .../syntax-highlighter/syntax-highlighter.module.css | 8 ++------ components/syntax-highlighter/syntax-highlighter.tsx | 8 +------- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/components/syntax-highlighter/syntax-highlighter.module.css b/components/syntax-highlighter/syntax-highlighter.module.css index 2c0ad30..dfe65fe 100644 --- a/components/syntax-highlighter/syntax-highlighter.module.css +++ b/components/syntax-highlighter/syntax-highlighter.module.css @@ -6,7 +6,6 @@ --code-syntax-punctuation: #ffffff; --code-syntax-property: #81a1c1; --code-syntax-propertyname: #8fbcbb; - --code-syntax-definition-name: red; --code-syntax-definition-property: #88c0d0; --code-syntax-variable: #d8dee9; --code-syntax-function-variable: #8fbcbb; @@ -22,7 +21,8 @@ } .keyword, -.moduleKeyword { +.moduleKeyword, +.className { color: var(--code-syntax-keyword); font-weight: 500; } @@ -113,7 +113,3 @@ .definition_propertyName { color: var(--code-syntax-definition-property); } - -.definition_name { - color: var(--code-syntax-definition-name); -} diff --git a/components/syntax-highlighter/syntax-highlighter.tsx b/components/syntax-highlighter/syntax-highlighter.tsx index e6b1055..aa9325d 100644 --- a/components/syntax-highlighter/syntax-highlighter.tsx +++ b/components/syntax-highlighter/syntax-highlighter.tsx @@ -42,13 +42,6 @@ export default function SyntaxHighlighter({ EditorView.editable.of(false), EditorView.theme( { - ".cm-scroller": { - // Shifting the horizontal scrollbar slightly below - // the bottom line. This reverts the bottom padding - // added on the `pre` tag. - paddingBottom: "0.857143em", - marginBottom: "-0.857143rem", - }, ".cm-gutters": { borderRight: "1px solid #739fee73", color: "#739fee", @@ -57,6 +50,7 @@ export default function SyntaxHighlighter({ backgroundColor: "var(--tw-prose-pre-bg)", minWidth: "4ch", marginRight: "12px", + backdropFilter: "blur(4px)", }, }, { dark: true }