From 90a89bc5f5e049b4adfec6c61061da1ff4fff35e Mon Sep 17 00:00:00 2001 From: swve Date: Wed, 4 Oct 2023 21:49:06 +0200 Subject: [PATCH] feat: add code blocks --- .../Activities/DynamicCanva/DynamicCanva.tsx | 170 +++++++++++---- front/components/Objects/Editor/Editor.tsx | 95 ++++++++- .../Objects/Editor/Toolbar/ToolbarButtons.tsx | 12 +- front/package-lock.json | 194 ++++++++++-------- front/package.json | 2 + 5 files changed, 349 insertions(+), 124 deletions(-) diff --git a/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx b/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx index 4c945527..ecf880b0 100644 --- a/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx +++ b/front/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx @@ -12,6 +12,18 @@ import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock"; import { OrderedList } from "@tiptap/extension-ordered-list"; import QuizBlock from "@components/Objects/Editor/Extensions/Quiz/QuizBlock"; +// Lowlight +import { common, createLowlight } from 'lowlight' +const lowlight = createLowlight(common) +import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'; +import css from 'highlight.js/lib/languages/css' +import js from 'highlight.js/lib/languages/javascript' +import ts from 'highlight.js/lib/languages/typescript' +import html from 'highlight.js/lib/languages/xml' +import python from 'highlight.js/lib/languages/python' +import java from 'highlight.js/lib/languages/java' + + interface Editor { content: string; activity: any; @@ -20,6 +32,16 @@ interface Editor { function Canva(props: Editor) { const isEditable = false; + + // Code Block Languages for Lowlight + lowlight.register('html', html) + lowlight.register('css', css) + lowlight.register('js', js) + lowlight.register('ts', ts) + lowlight.register('python', python) + lowlight.register('java', java) + + const editor: any = useEditor({ editable: isEditable, extensions: [ @@ -55,8 +77,10 @@ function Canva(props: Editor) { controls: true, modestBranding: true, }), - - OrderedList.configure() + OrderedList.configure(), + CodeBlockLowlight.configure({ + lowlight, + }), ], @@ -78,50 +102,118 @@ const CanvaWrapper = styled.div` .ProseMirror { -h1 { - font-size: 30px; - font-weight: 600; - margin-bottom: 10px; -} + h1 { + font-size: 30px; + font-weight: 600; + margin-bottom: 10px; + } -h2 { - font-size: 25px; - font-weight: 600; - margin-bottom: 10px; -} + h2 { + font-size: 25px; + font-weight: 600; + margin-bottom: 10px; + } -h3 { - font-size: 20px; - font-weight: 600; - margin-bottom: 10px; -} + h3 { + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; + } -h4 { - font-size: 18px; - font-weight: 600; - margin-top: 10px; - margin-bottom: 10px; -} + h4 { + font-size: 18px; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; + } -h5 { - font-size: 16px; - font-weight: 600; - margin-top: 10px; - margin-bottom: 10px; -} + h5 { + font-size: 16px; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; + } -ul, ol { - padding: 0 1rem; - padding-left: 20px; - list-style-type: decimal; -} + ul, ol { + padding: 0 1rem; + padding-left: 20px; + list-style-type: decimal; + } -&:focus { - outline: none !important; - outline-style: none !important; - box-shadow: none !important; -} + &:focus { + outline: none !important; + outline-style: none !important; + box-shadow: none !important; + } + + // Code Block + pre { + background: #0d0d0d; + border-radius: 0.5rem; + color: #fff; + font-family: "JetBrainsMono", monospace; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } + + .hljs-comment, + .hljs-quote { + color: #616161; + } + + .hljs-variable, + .hljs-template-variable, + .hljs-attribute, + .hljs-tag, + .hljs-name, + .hljs-regexp, + .hljs-link, + .hljs-name, + .hljs-selector-id, + .hljs-selector-class { + color: #f98181; + } + + .hljs-number, + .hljs-meta, + .hljs-built_in, + .hljs-builtin-name, + .hljs-literal, + .hljs-type, + .hljs-params { + color: #fbbc88; + } + + .hljs-string, + .hljs-symbol, + .hljs-bullet { + color: #b9f18d; + } + + .hljs-title, + .hljs-section { + color: #faf594; + } + + .hljs-keyword, + .hljs-selector-tag { + color: #70cff8; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: 700; + } + } } diff --git a/front/components/Objects/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx index fd7ad21e..272fd7f5 100644 --- a/front/components/Objects/Editor/Editor.tsx +++ b/front/components/Objects/Editor/Editor.tsx @@ -26,6 +26,18 @@ import { getCourseThumbnailMediaDirectory } from "@services/media/media"; import { OrderedList } from "@tiptap/extension-ordered-list"; +// Lowlight +import { common, createLowlight } from 'lowlight' +const lowlight = createLowlight(common) +import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'; +import css from 'highlight.js/lib/languages/css' +import js from 'highlight.js/lib/languages/javascript' +import ts from 'highlight.js/lib/languages/typescript' +import html from 'highlight.js/lib/languages/xml' +import python from 'highlight.js/lib/languages/python' +import java from 'highlight.js/lib/languages/java' + + interface Editor { content: string; ydoc: any; @@ -44,6 +56,14 @@ function Editor(props: Editor) { // remove activity_ from activity_id const activity_id = props.activity.activity_id.substring(9); + // Code Block Languages for Lowlight + lowlight.register('html', html) + lowlight.register('css', css) + lowlight.register('js', js) + lowlight.register('ts', ts) + lowlight.register('python', python) + lowlight.register('java', java) + const editor: any = useEditor({ editable: true, @@ -83,6 +103,10 @@ function Editor(props: Editor) { modestBranding: true, }), OrderedList.configure(), + CodeBlockLowlight.configure({ + lowlight, + }), + // Register the document with Tiptap // Collaboration.configure({ @@ -139,7 +163,7 @@ function Editor(props: Editor) { {!auth.isAuthenticated && Loading} {auth.isAuthenticated && } - +
props.setContent(editor.getJSON())}> Save
@@ -328,6 +352,75 @@ export const EditorContentWrapper = styled.div` outline-style: none !important; box-shadow: none !important; } + + // Code Block + pre { + background: #0d0d0d; + border-radius: 0.5rem; + color: #fff; + font-family: "JetBrainsMono", monospace; + padding: 0.75rem 1rem; + + code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; + } + + .hljs-comment, + .hljs-quote { + color: #616161; + } + + .hljs-variable, + .hljs-template-variable, + .hljs-attribute, + .hljs-tag, + .hljs-name, + .hljs-regexp, + .hljs-link, + .hljs-name, + .hljs-selector-id, + .hljs-selector-class { + color: #f98181; + } + + .hljs-number, + .hljs-meta, + .hljs-built_in, + .hljs-builtin-name, + .hljs-literal, + .hljs-type, + .hljs-params { + color: #fbbc88; + } + + .hljs-string, + .hljs-symbol, + .hljs-bullet { + color: #b9f18d; + } + + .hljs-title, + .hljs-section { + color: #faf594; + } + + .hljs-keyword, + .hljs-selector-tag { + color: #70cff8; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: 700; + } + } + } iframe { diff --git a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index 22d5804f..3e910195 100644 --- a/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx +++ b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon, ListBulletIcon } from "@radix-ui/react-icons"; -import { AlertCircle, AlertTriangle, FileText, GraduationCap, HelpCircle, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react"; +import { AlertCircle, AlertTriangle, BadgeHelp, Code, FileText, GraduationCap, HelpCircle, ImagePlus, Info, ListChecks, Sigma, Video, Youtube } from "lucide-react"; import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; export const ToolbarButtons = ({ editor, props }: any) => { @@ -148,7 +148,15 @@ export const ToolbarButtons = ({ editor, props }: any) => { .run() } > - + + + + + editor.chain().focus().toggleCodeBlock().run()} + className={editor.isActive('codeBlock') ? 'is-active' : ''} + > + diff --git a/front/package-lock.json b/front/package-lock.json index a1b3cfe8..b9cd040d 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -16,6 +16,7 @@ "@radix-ui/react-tooltip": "^1.0.5", "@sentry/nextjs": "^7.47.0", "@stitches/react": "^1.2.8", + "@tiptap/extension-code-block-lowlight": "^2.1.11", "@tiptap/extension-collaboration": "^2.0.0-beta.199", "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199", "@tiptap/extension-youtube": "^2.0.0-beta.207", @@ -25,8 +26,9 @@ "avvvatars-react": "^0.4.2", "formik": "^2.2.9", "framer-motion": "^10.16.1", + "lowlight": "^3.0.0", "lucide-react": "^0.268.0", - "next": "^13.5.1", + "next": "^13.5.2", "re-resizable": "^6.9.9", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", @@ -2262,9 +2264,9 @@ } }, "node_modules/@next/env": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.1.tgz", - "integrity": "sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==" + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.4.tgz", + "integrity": "sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ==" }, "node_modules/@next/eslint-plugin-next": { "version": "13.5.1", @@ -2296,9 +2298,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.1.tgz", - "integrity": "sha512-Bcd0VFrLHZnMmJy6LqV1CydZ7lYaBao8YBEdQUVzV8Ypn/l5s//j5ffjfvMzpEQ4mzlAj3fIY+Bmd9NxpWhACw==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz", + "integrity": "sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==", "cpu": [ "arm64" ], @@ -2311,9 +2313,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.1.tgz", - "integrity": "sha512-uvTZrZa4D0bdWa1jJ7X1tBGIxzpqSnw/ATxWvoRO9CVBvXSx87JyuISY+BWsfLFF59IRodESdeZwkWM2l6+Kjg==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz", + "integrity": "sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==", "cpu": [ "x64" ], @@ -2326,9 +2328,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.1.tgz", - "integrity": "sha512-/52ThlqdORPQt3+AlMoO+omicdYyUEDeRDGPAj86ULpV4dg+/GCFCKAmFWT0Q4zChFwsAoZUECLcKbRdcc0SNg==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz", + "integrity": "sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==", "cpu": [ "arm64" ], @@ -2341,9 +2343,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.1.tgz", - "integrity": "sha512-L4qNXSOHeu1hEAeeNsBgIYVnvm0gg9fj2O2Yx/qawgQEGuFBfcKqlmIE/Vp8z6gwlppxz5d7v6pmHs1NB6R37w==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz", + "integrity": "sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==", "cpu": [ "arm64" ], @@ -2356,9 +2358,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.1.tgz", - "integrity": "sha512-QVvMrlrFFYvLtABk092kcZ5Mzlmsk2+SV3xYuAu8sbTuIoh0U2+HGNhVklmuYCuM3DAAxdiMQTNlRQmNH11udw==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz", + "integrity": "sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==", "cpu": [ "x64" ], @@ -2371,9 +2373,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.1.tgz", - "integrity": "sha512-bBnr+XuWc28r9e8gQ35XBtyi5KLHLhTbEvrSgcWna8atI48sNggjIK8IyiEBO3KIrcUVXYkldAzGXPEYMnKt1g==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz", + "integrity": "sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==", "cpu": [ "x64" ], @@ -2386,9 +2388,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.1.tgz", - "integrity": "sha512-EQGeE4S5c9v06jje9gr4UlxqUEA+zrsgPi6kg9VwR+dQHirzbnVJISF69UfKVkmLntknZJJI9XpWPB6q0Z7mTg==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz", + "integrity": "sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==", "cpu": [ "arm64" ], @@ -2401,9 +2403,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.1.tgz", - "integrity": "sha512-1y31Q6awzofVjmbTLtRl92OX3s+W0ZfO8AP8fTnITcIo9a6ATDc/eqa08fd6tSpFu6IFpxOBbdevOjwYTGx/AQ==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz", + "integrity": "sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==", "cpu": [ "ia32" ], @@ -2416,9 +2418,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.1.tgz", - "integrity": "sha512-+9XBQizy7X/GuwNegq+5QkkxAPV7SBsIwapVRQd9WSvvU20YO23B3bZUpevdabi4fsd25y9RJDDncljy/V54ww==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz", + "integrity": "sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==", "cpu": [ "x64" ], @@ -3543,6 +3545,20 @@ "@tiptap/pm": "^2.0.0" } }, + "node_modules/@tiptap/extension-code-block-lowlight": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.1.11.tgz", + "integrity": "sha512-k3olDvsRYO32JR9hyNa6VLqUdhwcpLwvR4Z6tJ66jHag5rsfP/7JZxJhrX9A1AF/jRCILdTiq9DTKybHieFjsw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0", + "@tiptap/extension-code-block": "^2.0.0", + "@tiptap/pm": "^2.0.0" + } + }, "node_modules/@tiptap/extension-collaboration": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/@tiptap/extension-collaboration/-/extension-collaboration-2.1.6.tgz", @@ -3858,6 +3874,14 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==" }, + "node_modules/@types/hast": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.1.tgz", + "integrity": "sha512-hs/iBJx2aydugBQx5ETV3ZgeSS0oIreQrFJ4bjBl0XvM4wAmDjFEALY7p0rTSLt2eL+ibjRAAs9dTPiCLtmbqQ==", + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -3971,6 +3995,11 @@ "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==", "peer": true }, + "node_modules/@types/unist": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", + "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==" + }, "node_modules/@types/uuid": { "version": "9.0.2", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz", @@ -4907,7 +4936,6 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "dev": true, "engines": { "node": ">=6" } @@ -4917,6 +4945,18 @@ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" }, + "node_modules/devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "dependencies": { + "dequal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -6080,6 +6120,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/highlight.js": { + "version": "11.8.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz", + "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -6822,6 +6870,20 @@ "loose-envify": "cli.js" } }, + "node_modules/lowlight": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.0.0.tgz", + "integrity": "sha512-kedX6yxvgak8P4LGh3vKRDQuMbVcnP+qRuDJlve2w+mNJAbEhEQPjYCp9QJnpVL5F2aAAVjeIzzrbQZUKHiDJw==", + "dependencies": { + "@types/hast": "^3.0.0", + "devlop": "^1.0.0", + "highlight.js": "~11.8.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/lru_map": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz", @@ -7003,18 +7065,17 @@ "dev": true }, "node_modules/next": { - "version": "13.5.1", - "resolved": "https://registry.npmjs.org/next/-/next-13.5.1.tgz", - "integrity": "sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==", + "version": "13.5.4", + "resolved": "https://registry.npmjs.org/next/-/next-13.5.4.tgz", + "integrity": "sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==", "dependencies": { - "@next/env": "13.5.1", + "@next/env": "13.5.4", "@swc/helpers": "0.5.2", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", - "postcss": "8.4.14", + "postcss": "8.4.31", "styled-jsx": "5.1.1", - "watchpack": "2.4.0", - "zod": "3.21.4" + "watchpack": "2.4.0" }, "bin": { "next": "dist/bin/next" @@ -7023,15 +7084,15 @@ "node": ">=16.14.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "13.5.1", - "@next/swc-darwin-x64": "13.5.1", - "@next/swc-linux-arm64-gnu": "13.5.1", - "@next/swc-linux-arm64-musl": "13.5.1", - "@next/swc-linux-x64-gnu": "13.5.1", - "@next/swc-linux-x64-musl": "13.5.1", - "@next/swc-win32-arm64-msvc": "13.5.1", - "@next/swc-win32-ia32-msvc": "13.5.1", - "@next/swc-win32-x64-msvc": "13.5.1" + "@next/swc-darwin-arm64": "13.5.4", + "@next/swc-darwin-x64": "13.5.4", + "@next/swc-linux-arm64-gnu": "13.5.4", + "@next/swc-linux-arm64-musl": "13.5.4", + "@next/swc-linux-x64-gnu": "13.5.4", + "@next/swc-linux-x64-musl": "13.5.4", + "@next/swc-win32-arm64-msvc": "13.5.4", + "@next/swc-win32-ia32-msvc": "13.5.4", + "@next/swc-win32-x64-msvc": "13.5.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", @@ -7048,29 +7109,6 @@ } } }, - "node_modules/next/node_modules/postcss": { - "version": "8.4.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", - "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - } - ], - "dependencies": { - "nanoid": "^3.3.4", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, "node_modules/node-fetch": { "version": "2.6.13", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz", @@ -7410,9 +7448,9 @@ } }, "node_modules/postcss": { - "version": "8.4.28", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz", - "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -9525,14 +9563,6 @@ "type": "GitHub Sponsors ❤", "url": "https://github.com/sponsors/holtwick" } - }, - "node_modules/zod": { - "version": "3.21.4", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", - "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==", - "funding": { - "url": "https://github.com/sponsors/colinhacks" - } } } } diff --git a/front/package.json b/front/package.json index bc08a01c..2279d92e 100644 --- a/front/package.json +++ b/front/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-tooltip": "^1.0.5", "@sentry/nextjs": "^7.47.0", "@stitches/react": "^1.2.8", + "@tiptap/extension-code-block-lowlight": "^2.1.11", "@tiptap/extension-collaboration": "^2.0.0-beta.199", "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199", "@tiptap/extension-youtube": "^2.0.0-beta.207", @@ -26,6 +27,7 @@ "avvvatars-react": "^0.4.2", "formik": "^2.2.9", "framer-motion": "^10.16.1", + "lowlight": "^3.0.0", "lucide-react": "^0.268.0", "next": "^13.5.2", "re-resizable": "^6.9.9",