From 03c48c90c9f7a9348746ba11d46b665ad2fa0fc7 Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Wed, 25 Sep 2024 18:10:10 +0200 Subject: [PATCH 1/3] fix(editor): fixed build, added code highlight --- package-lock.json | 44 +++++++++++++++++++ package.json | 2 + .../libraries/[libId]/playground/index.tsx | 12 ++++- .../MarkdownEditor/MarkdownEditor.tsx | 10 ++--- src/content/markdown-editor/main.ts | 2 +- 5 files changed, 61 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index e7d95519779c..142f459be012 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@testing-library/user-event": "^13.5.0", "bem-cn-lite": "^4.1.0", "chroma-js": "^2.4.2", + "highlight.js": "^11.8.0", "husky": "^8.0.3", "i18next": "^23.8.3", "javascript-time-ago": "^2.5.9", @@ -32,6 +33,7 @@ "landing-uikit": "npm:@gravity-ui/uikit@^6.23.0", "lint-staged": "^14.0.1", "lodash": "^4.17.21", + "lowlight": "^3.0.0", "micromatch": "^4.0.7", "next": "^14.1.0", "next-global-css": "^1.3.1", @@ -8203,6 +8205,18 @@ "node": ">=6" } }, + "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/diff": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz", @@ -10072,6 +10086,14 @@ "url": "https://opencollective.com/unified" } }, + "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", @@ -11603,6 +11625,28 @@ "tslib": "^2.0.3" } }, + "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/lowlight/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", diff --git a/package.json b/package.json index 0b9843c96920..d78592ecf28a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@testing-library/user-event": "^13.5.0", "bem-cn-lite": "^4.1.0", "chroma-js": "^2.4.2", + "highlight.js": "^11.8.0", "husky": "^8.0.3", "i18next": "^23.8.3", "javascript-time-ago": "^2.5.9", @@ -28,6 +29,7 @@ "landing-uikit": "npm:@gravity-ui/uikit@^6.23.0", "lint-staged": "^14.0.1", "lodash": "^4.17.21", + "lowlight": "^3.0.0", "micromatch": "^4.0.7", "next": "^14.1.0", "next-global-css": "^1.3.1", diff --git a/src/[locale]/libraries/[libId]/playground/index.tsx b/src/[locale]/libraries/[libId]/playground/index.tsx index 5c58ce206af8..047303bfa370 100644 --- a/src/[locale]/libraries/[libId]/playground/index.tsx +++ b/src/[locale]/libraries/[libId]/playground/index.tsx @@ -1,14 +1,24 @@ import {GetStaticPaths, GetStaticPathsResult, GetStaticProps} from 'next'; import {useTranslation} from 'next-i18next'; +import dynamic from 'next/dynamic'; import React from 'react'; import {useLocaleRedirect} from 'src/hooks/useLocaleRedirect'; import {Layout} from '../../../../components/Layout/Layout'; -import {MarkdownEditor} from '../../../../components/MarkdownEditor/MarkdownEditor'; import {getI18nPaths, getI18nProps, getLibsList} from '../../../../utils'; const libs = getLibsList(); +const MarkdownEditor = dynamic( + () => + import('../../../../components/MarkdownEditor/MarkdownEditor').then( + (mod) => mod.MarkdownEditor, + ), + { + ssr: false, + }, +); + export const getStaticPaths: GetStaticPaths = async () => { const paths = getI18nPaths().reduce((acc, localeItem) => { acc.push( diff --git a/src/components/MarkdownEditor/MarkdownEditor.tsx b/src/components/MarkdownEditor/MarkdownEditor.tsx index 076acb76cee7..059d9e21a36c 100644 --- a/src/components/MarkdownEditor/MarkdownEditor.tsx +++ b/src/components/MarkdownEditor/MarkdownEditor.tsx @@ -11,7 +11,6 @@ import {useTranslation} from 'next-i18next'; import React, {useEffect, useRef} from 'react'; import {main} from '../../content/markdown-editor/main'; -import {EnvironmentContext} from '../../contexts'; import {block, getLocaleLink} from '../../utils'; import './MarkdownEditor.scss'; @@ -57,7 +56,6 @@ function Editor() { export const MarkdownEditor = () => { const {t, i18n} = useTranslation('markdown-editor'); - const {isClient} = React.useContext(EnvironmentContext); return ( @@ -78,11 +76,9 @@ export const MarkdownEditor = () => { - {isClient && ( - - - - )} + + + diff --git a/src/content/markdown-editor/main.ts b/src/content/markdown-editor/main.ts index 3c10c5340733..6da84ba0a80a 100644 --- a/src/content/markdown-editor/main.ts +++ b/src/content/markdown-editor/main.ts @@ -46,7 +46,7 @@ Or write your extension using a [convenient api](https://github.com/gravity-ui/m Easily connect to your React app with a hook: -\`\`\` +\`\`\`plaintext import React from 'react'; import { useMarkdownEditor, MarkdownEditorView } from '@gravity-ui/markdown-editor'; import { toaster } from '@gravity-ui/uikit/toaster-singleton-react-18'; From 8de6becb6f4d2a8d9c5181e8a9a3b82a1c1b95b4 Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Wed, 25 Sep 2024 19:34:20 +0200 Subject: [PATCH 2/3] fix(editor): fixed playground getStaticPaths --- src/pages/libraries/[libId]/playground/index.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/pages/libraries/[libId]/playground/index.tsx b/src/pages/libraries/[libId]/playground/index.tsx index 856e4c4aecd9..cc17eb13a6ea 100644 --- a/src/pages/libraries/[libId]/playground/index.tsx +++ b/src/pages/libraries/[libId]/playground/index.tsx @@ -10,10 +10,20 @@ import {getLibsList} from '../../../../utils'; const libs = getLibsList(); export const getStaticPaths: GetStaticPaths = async () => { + const paths = libs + .filter((libItem) => availablePlaygrounds.includes(libItem.config.id)) + .map((libItem) => ({ + params: {libId: libItem.config.id}, + })); + return { - paths: libs - .filter((lib) => availablePlaygrounds.includes(lib.config.id)) - .map((item) => ({params: {libId: item.config.id}})), + paths: paths.length + ? paths + : [ + { + params: {libId: ''}, + }, + ], fallback: false, }; }; From 1ac659fc8efd03f5978a5c321d38e0aa9a06767b Mon Sep 17 00:00:00 2001 From: makhnatkin Date: Thu, 26 Sep 2024 12:25:11 +0200 Subject: [PATCH 3/3] Revert "fix(editor): fixed playground getStaticPaths" This reverts commit 8de6becb6f4d2a8d9c5181e8a9a3b82a1c1b95b4. --- src/pages/libraries/[libId]/playground/index.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/pages/libraries/[libId]/playground/index.tsx b/src/pages/libraries/[libId]/playground/index.tsx index cc17eb13a6ea..856e4c4aecd9 100644 --- a/src/pages/libraries/[libId]/playground/index.tsx +++ b/src/pages/libraries/[libId]/playground/index.tsx @@ -10,20 +10,10 @@ import {getLibsList} from '../../../../utils'; const libs = getLibsList(); export const getStaticPaths: GetStaticPaths = async () => { - const paths = libs - .filter((libItem) => availablePlaygrounds.includes(libItem.config.id)) - .map((libItem) => ({ - params: {libId: libItem.config.id}, - })); - return { - paths: paths.length - ? paths - : [ - { - params: {libId: ''}, - }, - ], + paths: libs + .filter((lib) => availablePlaygrounds.includes(lib.config.id)) + .map((item) => ({params: {libId: item.config.id}})), fallback: false, }; };