From 74ed9992e7debdcf15ed0b3d91e6aecd2ecce477 Mon Sep 17 00:00:00 2001 From: redzzzi Date: Wed, 15 May 2024 03:35:31 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20toast=20ui=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=84=B0=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - toast ui의 code syntax highlight 모듈 임포트 - code syntax의 테마 설정을 위해 prismjs 임포트 - toast ui의 code syntax highlight에서 모든 언어를 지원하는 js 파일을 타입스크립트로 선언 #468 --- package-lock.json | 44 ++++++++++++++++++++++++ package.json | 3 ++ src/components/Editor/StandardEditor.tsx | 5 +++ src/components/Viewer/StandardViewer.tsx | 13 +++++-- 4 files changed, 63 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index a640ed5c9..112a62466 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^14.4.3", "@toast-ui/editor": "^3.2.2", + "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0", "@toast-ui/react-editor": "^3.2.3", "@types/jest": "^27.5.2", "@types/node": "^16.18.3", @@ -25,6 +26,7 @@ "axios": "^1.3.2", "cross-env": "^7.0.3", "luxon": "^3.2.1", + "prismjs": "^1.29.0", "react": "^17.0.1", "react-auth-code-input": "^3.2.1", "react-codes-input": "^2.2.3", @@ -44,6 +46,7 @@ "devDependencies": { "@craco/craco": "^7.0.0", "@types/luxon": "^3.2.0", + "@types/prismjs": "^1.26.4", "@typescript-eslint/eslint-plugin": "^5.44.0", "@typescript-eslint/parser": "^5.60.1", "autoprefixer": "^10.4.13", @@ -4222,6 +4225,14 @@ "prosemirror-view": "^1.18.7" } }, + "node_modules/@toast-ui/editor-plugin-code-syntax-highlight": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@toast-ui/editor-plugin-code-syntax-highlight/-/editor-plugin-code-syntax-highlight-3.1.0.tgz", + "integrity": "sha512-OgX5pZiTnHREoTTXDAFu1k6RzEspGOxeJNRlt/Lnoi1GvLbIpUTTbBcls9becpXT/Qdls++8G3r5C60cVdellA==", + "dependencies": { + "prismjs": "^1.23.0" + } + }, "node_modules/@toast-ui/react-editor": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/@toast-ui/react-editor/-/react-editor-3.2.3.tgz", @@ -4532,6 +4543,12 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==" }, + "node_modules/@types/prismjs": { + "version": "1.26.4", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.4.tgz", + "integrity": "sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==", + "dev": true + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -13885,6 +13902,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -20331,6 +20356,14 @@ "prosemirror-view": "^1.18.7" } }, + "@toast-ui/editor-plugin-code-syntax-highlight": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@toast-ui/editor-plugin-code-syntax-highlight/-/editor-plugin-code-syntax-highlight-3.1.0.tgz", + "integrity": "sha512-OgX5pZiTnHREoTTXDAFu1k6RzEspGOxeJNRlt/Lnoi1GvLbIpUTTbBcls9becpXT/Qdls++8G3r5C60cVdellA==", + "requires": { + "prismjs": "^1.23.0" + } + }, "@toast-ui/react-editor": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/@toast-ui/react-editor/-/react-editor-3.2.3.tgz", @@ -20634,6 +20667,12 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==" }, + "@types/prismjs": { + "version": "1.26.4", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.4.tgz", + "integrity": "sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==", + "dev": true + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -27234,6 +27273,11 @@ } } }, + "prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==" + }, "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", diff --git a/package.json b/package.json index c59942572..c22c65e39 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^14.4.3", "@toast-ui/editor": "^3.2.2", + "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0", "@toast-ui/react-editor": "^3.2.3", "@types/jest": "^27.5.2", "@types/node": "^16.18.3", @@ -20,6 +21,7 @@ "axios": "^1.3.2", "cross-env": "^7.0.3", "luxon": "^3.2.1", + "prismjs": "^1.29.0", "react": "^17.0.1", "react-auth-code-input": "^3.2.1", "react-codes-input": "^2.2.3", @@ -63,6 +65,7 @@ "devDependencies": { "@craco/craco": "^7.0.0", "@types/luxon": "^3.2.0", + "@types/prismjs": "^1.26.4", "@typescript-eslint/eslint-plugin": "^5.44.0", "@typescript-eslint/parser": "^5.60.1", "autoprefixer": "^10.4.13", diff --git a/src/components/Editor/StandardEditor.tsx b/src/components/Editor/StandardEditor.tsx index ff45e05b0..b5ecafd10 100644 --- a/src/components/Editor/StandardEditor.tsx +++ b/src/components/Editor/StandardEditor.tsx @@ -1,9 +1,13 @@ import React from 'react'; import { useMediaQuery, useTheme } from '@mui/material'; +import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js'; import { Editor, EditorProps } from '@toast-ui/react-editor'; +import Prism from 'prismjs'; import '@toast-ui/editor/dist/toastui-editor.css'; import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'; +import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'; +import 'prismjs/themes/prism-tomorrow.css'; interface StandardEditorProps extends EditorProps { forwardedRef?: React.MutableRefObject; @@ -24,6 +28,7 @@ const StandardEditor = ({ forwardedRef, ...props }: StandardEditorProps) => { language="ko" theme="dark" autofocus={false} + plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]} {...props} /> ); diff --git a/src/components/Viewer/StandardViewer.tsx b/src/components/Viewer/StandardViewer.tsx index 3d0eeccf1..d2ca2c6df 100644 --- a/src/components/Viewer/StandardViewer.tsx +++ b/src/components/Viewer/StandardViewer.tsx @@ -1,6 +1,10 @@ import React, { useEffect, useRef } from 'react'; -import '@toast-ui/editor/dist/toastui-editor-viewer.css'; +import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js'; import { Viewer } from '@toast-ui/react-editor'; +import Prism from 'prismjs'; + +import '@toast-ui/editor/dist/toastui-editor-viewer.css'; +import 'prismjs/themes/prism-tomorrow.css'; interface StandardViewerProps { content: string; @@ -16,7 +20,12 @@ const StandardViewer = ({ content, className }: StandardViewerProps) => { return (
- +
); }; From 7a0fb351795b3615399ae31b5c78d02adf508a2c Mon Sep 17 00:00:00 2001 From: redzzzi Date: Mon, 20 May 2024 23:34:52 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20toast=20ui=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=84=B0=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - '@toast-ui/editor-plugin-code-syntax-highlight' 모듈을 임포트하여 codeSyntaxHighlight 사용 - 하이라이트 지원하는 언어 파일을 임포트 - Prism 테마 사용 #468 --- src/components/Editor/StandardEditor.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Editor/StandardEditor.tsx b/src/components/Editor/StandardEditor.tsx index b5ecafd10..ee0061455 100644 --- a/src/components/Editor/StandardEditor.tsx +++ b/src/components/Editor/StandardEditor.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { useMediaQuery, useTheme } from '@mui/material'; -import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js'; +import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'; import { Editor, EditorProps } from '@toast-ui/react-editor'; -import Prism from 'prismjs'; import '@toast-ui/editor/dist/toastui-editor.css'; import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'; -import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'; +import Prism from 'prismjs'; import 'prismjs/themes/prism-tomorrow.css'; +import '@constants/prismLang'; interface StandardEditorProps extends EditorProps { forwardedRef?: React.MutableRefObject; From d76ad86d3e80795bb8a5461b01a243d8300d63f5 Mon Sep 17 00:00:00 2001 From: redzzzi Date: Mon, 20 May 2024 23:39:12 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20toast=20ui=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=84=B0=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - '@toast-ui/editor-plugin-code-syntax-highlight' 모듈을 임포트하여 codeSyntaxHighlight 사용 - Prism 테마 사용 #468 --- src/components/Viewer/StandardViewer.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Viewer/StandardViewer.tsx b/src/components/Viewer/StandardViewer.tsx index d2ca2c6df..f9a40f318 100644 --- a/src/components/Viewer/StandardViewer.tsx +++ b/src/components/Viewer/StandardViewer.tsx @@ -1,9 +1,10 @@ import React, { useEffect, useRef } from 'react'; -import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js'; +import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'; import { Viewer } from '@toast-ui/react-editor'; -import Prism from 'prismjs'; import '@toast-ui/editor/dist/toastui-editor-viewer.css'; +import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'; +import Prism from 'prismjs'; import 'prismjs/themes/prism-tomorrow.css'; interface StandardViewerProps { From c0216c385af330e16f5bbd5cdc5b0d614783332a Mon Sep 17 00:00:00 2001 From: redzzzi Date: Mon, 20 May 2024 23:43:57 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20toast=20ui=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=84=B0=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - code syntax highlight 적용할 언어를 prismjs가 지원하는 선에서 임포트 - 임포트 해오는 언어 모듈이 많아 'prism-markup-templating' 모듈을 활용 #468 --- src/constants/prismLang.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/constants/prismLang.ts diff --git a/src/constants/prismLang.ts b/src/constants/prismLang.ts new file mode 100644 index 000000000..f21db8c76 --- /dev/null +++ b/src/constants/prismLang.ts @@ -0,0 +1,26 @@ +import 'prismjs/components/prism-markup-templating'; + +import 'prismjs/components/prism-c'; +import 'prismjs/components/prism-cpp'; +import 'prismjs/components/prism-csharp'; +import 'prismjs/components/prism-python'; +import 'prismjs/components/prism-css'; +import 'prismjs/components/prism-javascript'; +import 'prismjs/components/prism-typescript'; +import 'prismjs/components/prism-jsx'; +import 'prismjs/components/prism-bash'; +import 'prismjs/components/prism-nasm'; +import 'prismjs/components/prism-java'; +import 'prismjs/components/prism-markdown'; +import 'prismjs/components/prism-rust'; +import 'prismjs/components/prism-ruby'; +import 'prismjs/components/prism-go'; +import 'prismjs/components/prism-php'; +import 'prismjs/components/prism-powershell'; +import 'prismjs/components/prism-r'; +import 'prismjs/components/prism-sql'; +import 'prismjs/components/prism-latex'; +import 'prismjs/components/prism-solidity'; +import 'prismjs/components/prism-kotlin'; +import 'prismjs/components/prism-coffeescript'; +import 'prismjs/components/prism-xml-doc'; From 4ffad93a6398862e285619b04fb27dc6cf4a2079 Mon Sep 17 00:00:00 2001 From: redzzzi Date: Thu, 23 May 2024 15:26:37 +0900 Subject: [PATCH 5/7] =?UTF-8?q?style=20:=20prismLang.ts=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EC=9D=84=20Editor=20=ED=8F=B4=EB=8D=94=20=ED=95=98?= =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #468 --- src/{constants => components/Editor}/prismLang.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{constants => components/Editor}/prismLang.ts (100%) diff --git a/src/constants/prismLang.ts b/src/components/Editor/prismLang.ts similarity index 100% rename from src/constants/prismLang.ts rename to src/components/Editor/prismLang.ts From d4d5c445bad533b65cb75872e32341b3be25d786 Mon Sep 17 00:00:00 2001 From: redzzzi Date: Thu, 23 May 2024 15:28:12 +0900 Subject: [PATCH 6/7] =?UTF-8?q?style=20:=20prismLang.ts=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EA=B2=BD=EB=A1=9C=20=EC=9E=AC?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #468 --- src/components/Editor/StandardEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Editor/StandardEditor.tsx b/src/components/Editor/StandardEditor.tsx index ee0061455..fc02b3782 100644 --- a/src/components/Editor/StandardEditor.tsx +++ b/src/components/Editor/StandardEditor.tsx @@ -7,7 +7,7 @@ import '@toast-ui/editor/dist/toastui-editor.css'; import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'; import Prism from 'prismjs'; import 'prismjs/themes/prism-tomorrow.css'; -import '@constants/prismLang'; +import './prismLang'; interface StandardEditorProps extends EditorProps { forwardedRef?: React.MutableRefObject; From 0ece0de7888bf98745deb71502228641acb3448c Mon Sep 17 00:00:00 2001 From: redzzzi Date: Thu, 23 May 2024 15:33:11 +0900 Subject: [PATCH 7/7] =?UTF-8?q?style=20:=20css=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=A4=84=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #468 --- src/components/Editor/StandardEditor.tsx | 4 ++-- src/components/Viewer/StandardViewer.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Editor/StandardEditor.tsx b/src/components/Editor/StandardEditor.tsx index fc02b3782..8d5372230 100644 --- a/src/components/Editor/StandardEditor.tsx +++ b/src/components/Editor/StandardEditor.tsx @@ -2,12 +2,12 @@ import React from 'react'; import { useMediaQuery, useTheme } from '@mui/material'; import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'; import { Editor, EditorProps } from '@toast-ui/react-editor'; +import Prism from 'prismjs'; +import './prismLang'; import '@toast-ui/editor/dist/toastui-editor.css'; import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'; -import Prism from 'prismjs'; import 'prismjs/themes/prism-tomorrow.css'; -import './prismLang'; interface StandardEditorProps extends EditorProps { forwardedRef?: React.MutableRefObject; diff --git a/src/components/Viewer/StandardViewer.tsx b/src/components/Viewer/StandardViewer.tsx index f9a40f318..eae4df7c3 100644 --- a/src/components/Viewer/StandardViewer.tsx +++ b/src/components/Viewer/StandardViewer.tsx @@ -1,10 +1,10 @@ import React, { useEffect, useRef } from 'react'; import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'; import { Viewer } from '@toast-ui/react-editor'; +import Prism from 'prismjs'; import '@toast-ui/editor/dist/toastui-editor-viewer.css'; import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'; -import Prism from 'prismjs'; import 'prismjs/themes/prism-tomorrow.css'; interface StandardViewerProps {