feat(editor): added editor menu

.gitignore

@@ -22,6 +22,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+nginx.conf
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -4,11 +4,12 @@
   "private": true,
   "homepage": "https://gravity-ui.com/",
   "dependencies": {
-    "@diplodoc/transform": "^4.26.0",
+    "@diplodoc/transform": "^4.18.0",
     "@gravity-ui/chartkit": "^5.10.1",
     "@gravity-ui/components": "^3.10.1",
     "@gravity-ui/date-components": "^2.10.1",
     "@gravity-ui/icons": "^2.11.0",
+    "@gravity-ui/markdown-editor": "^13.18.0",
     "@gravity-ui/navigation": "^2.23.1",
     "@gravity-ui/page-constructor": "^5.2.0",
     "@gravity-ui/uikit": "^6.27.2",

public/locales/en/common.json

@@ -4,9 +4,11 @@
     "actions_share": "Share",
     "actions_github": "GitHub",
     "actions_storybook": "Storybook",
+    "actions_playground": "Playground",
     "menu_libraries": "Libraries",
     "menu_components": "Components",
     "menu_design": "Design",
+    "menu_editor": "Editor",
     "menu_icons": "Icons",
     "menu_themer": "Themer",
     "roadmap_inProgress": "In progress",

public/locales/en/home.json

@@ -2,6 +2,8 @@
     "header_title": "Build modern interfaces with the Gravity design system and libraries",
     "header_actions_howToStart": "How to Start",
     "news_title": "Recent updates",
+    "banner_title": "Introducing MarkdownEditor",
+    "banner_content": "Markdown-editor combines two modes.<br />It allows you to create and edit content in a convenient visual form while retaining full control over the underlying markup.<br /><br /><a href=\"/libraries/markdown-editor/playground\">Test it on the playground ✨</a>.",
     "news_items_item1": "We're thrilled to unveil <a href=\"/themer\">Themer</a>. Now you can easily customize our design system to your brand style and export your theme as a CSS file.",
     "news_items_item2": "500⭐️ for our <a href=\"/libraries/uikit\">UIKit</a>! We just wanted to say thanks for all the support and <a href=\"https://github.com/gravity-ui/uikit/issues\">feedback</a> we've been getting. There's more to come, so stay tuned!",
     "news_items_item3": "We've released the <a href=\"/components/uikit/pin-input\">PinInput component</a>. You may need it to enter OTP or confirmation codes.",

public/locales/en/markdown-editor.json

@@ -0,0 +1,4 @@
+{
+  "goToLibrary": "Go to library",
+  "title": "Editor"
+}

public/locales/ru/common.json

@@ -4,9 +4,11 @@
     "actions_share": "Поделиться",
     "actions_github": "GitHub",
     "actions_storybook": "Storybook",
+    "actions_playground": "Playground",
     "menu_libraries": "Библиотеки",
     "menu_components": "Компоненты",
     "menu_design": "Дизайн",
+    "menu_editor": "Редактор",
     "menu_icons": "Иконки",
     "menu_themer": "Темизатор",
     "roadmap_inProgress": "В работе",

public/locales/ru/home.json

@@ -2,6 +2,8 @@
     "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity",
     "header_actions_howToStart": "С чего начать",
     "news_title": "Новости",
+    "banner_title": "Представляем MarkdownEditor",
+    "banner_content": "Markdown-редактор объединяет два режима. Это даёт возможность создавать и редактировать контент в удобной визуальной форме, не теряя контроля над исходной разметкой.<br /><br /><a href=\"/libraries/markdown-editor/playground\">Попробуйте в playground ✨</a>.",
     "news_items_item1": "Мы запустили новый раздел <a href=\"/themer\">Themer</a>. В нём вы можете легко адаптировать нашу дизайн-систему к своему бренду и экспортировать результат в CSS файл.",
     "news_items_item2": "500⭐️ у <a href=\"/libraries/uikit\">UIKit</a>! Просто хотим поблагодарить вас за поддержку и <a href=\"https://github.com/gravity-ui/uikit/issues\">идеи</a>. Впереди много нового, продолжайте следить за проектом!",
     "news_items_item3": "Мы выложили <a href=\"/components/uikit/pin-input\">компонент PinInput</a>. Он может пригодиться для ввода OTP кодов или подтверждений.",

public/locales/ru/markdown-editor.json

@@ -0,0 +1,4 @@
+{
+  "goToLibrary": "К библиотеке",
+  "title": "Редактор"
+}

src/[locale]/libraries/[libId]/playground/index.tsx

@@ -0,0 +1,64 @@
+import {GetStaticPaths, GetStaticPathsResult, GetStaticProps} from 'next';
+import {useTranslation} from 'next-i18next';
+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();
+
+export const getStaticPaths: GetStaticPaths = async () => {
+    const paths = getI18nPaths().reduce<GetStaticPathsResult['paths']>((acc, localeItem) => {
+        acc.push(
+            ...libs.map((libItem) => ({
+                params: {locale: localeItem.params.locale, libId: libItem.config.id},
+            })),
+        );
+        return acc;
+    }, []);
+
+    return {
+        paths,
+        fallback: false,
+    };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+    const libId = Array.isArray(context.params?.libId)
+        ? context.params?.libId[0]
+        : context.params?.libId;
+
+    return {
+        props: {
+            libId: libId || null,
+            ...(await getI18nProps(context, ['library', 'libraries-info', libId ?? ''])),
+        },
+    };
+};
+
+// TODO: open with article
+// export const availablePlaygrounds = ['markdown-editor'];
+export const availablePlaygrounds = [] as string[];
+
+export const PlaygroundPage = ({libId}: {libId: string}) => {
+    const hasPlayground = availablePlaygrounds.includes(libId);
+
+    useLocaleRedirect();
+    const {t} = useTranslation();
+
+    return (
+        <>
+            {hasPlayground && (
+                <>
+                    <Layout title={availablePlaygrounds.includes(libId) ? t(libId) : ''}>
+                        {libId === 'markdown-editor' && <MarkdownEditor />}
+                    </Layout>
+                </>
+            )}
+        </>
+    );
+};
+
+export default PlaygroundPage;

src/blocks/CustomHeader/CustomHeader.scss

@@ -46,6 +46,43 @@ $block: '.#{variables.$ns}custom-header';
         }
     }
 
+    &__banner {
+        overflow: hidden;
+        border-radius: 24px;
+        background-color: rgba(37, 27, 37, 0.5);
+        backdrop-filter: blur(60px);
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
+            margin-top: 32px;
+        }
+    }
+    &__banner-image {
+        width: 100%;
+    }
+    &__banner-text {
+        padding: 12px 32px 32px;
+    }
+    &__banner-title {
+        @include pcStyles.heading4();
+        margin-bottom: 16px;
+    }
+    &__banner-content {
+        @include pcStyles.text-size(body-2);
+
+        a {
+            color: #ffbe5c;
+            text-decoration: none;
+
+            &:visited {
+                color: #ffbe5c;
+            }
+
+            &:hover {
+                color: #f3cb8f;
+            }
+        }
+    }
+
     &__news-title {
         @include pcStyles.heading4();
 

src/blocks/CustomHeader/CustomHeader.tsx

@@ -18,6 +18,7 @@ type CustomButton = ButtonProps & {
 };
 
 type NewsItem = {
+    title?: string;
     date: string;
     content: string;
 };
@@ -29,27 +30,61 @@ export type CustomHeaderProps = Animatable & {
         title?: string;
         items: NewsItem[];
     };
+    banner?: BannerBlockProps;
 };
 
 export type CustomHeaderModel = CustomHeaderProps & {
     type: CustomBlock.CustomHeader;
 };
 
+interface BannerImage {
+    href: string;
+    src: string;
+    alt: string;
+    title: string;
+}
+interface BannerBlockProps {
+    image: BannerImage;
+    title?: string;
+    content?: string;
+}
+
+const Banner: React.FC<BannerBlockProps> = ({image, title, content}) => {
+    const img = (
+        <img className={b('banner-image')} src={image.src} alt={image.alt} title={image.title} />
+    );
+
+    return (
+        <div className={b('banner')}>
+            {image.href ? <a href={image.href}>{img}</a> : img}
+            <div className={b('banner-text')}>
+                {title && <div className={b('banner-title')}>{title}</div>}
+                {content && (
+                    <div className={b('banner-content')}>
+                        <HTML>{content}</HTML>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
 export const CustomHeader: React.FC<CustomHeaderProps> = ({
     animated,
     title,
     buttons = [],
     news,
+    banner,
 }) => {
     const {i18n} = useTranslation();
 
-    const showNewsBlock = news && news.items && news.items.length > 0;
+    const showNewsBlock = !banner && news && news.items && news.items.length > 0;
 
     return (
         <AnimateBlock className={b()} animate={animated}>
             <Grid>
                 <Row>
-                    <Col sizes={{all: 12, lg: showNewsBlock ? 8 : 12}}>
+                    <Col sizes={{all: 12, lg: banner || showNewsBlock ? 8 : 12}}>
                         <h1 className={b('title')}>
                             <HTML>{title}</HTML>
                         </h1>
@@ -78,7 +113,7 @@ export const CustomHeader: React.FC<CustomHeaderProps> = ({
                             </div>
                         ) : null}
                     </Col>
-                    {showNewsBlock ? (
+                    {showNewsBlock && (
                         <Col sizes={{md: 12, lg: 4}}>
                             <div className={b('news')}>
                                 {news.title ? (
@@ -102,7 +137,12 @@ export const CustomHeader: React.FC<CustomHeaderProps> = ({
                                 )}
                             </div>
                         </Col>
-                    ) : null}
+                    )}
+                    {banner && (
+                        <Col sizes={{md: 12, lg: 4}}>
+                            <Banner {...banner} />
+                        </Col>
+                    )}
                 </Row>
             </Grid>
         </AnimateBlock>

src/components/Library/Library.tsx

@@ -4,6 +4,7 @@ import {useTranslation} from 'next-i18next';
 import React from 'react';
 
 // import issuesIcon from '../../assets/icons/issues.svg';
+import {availablePlaygrounds} from '../../[locale]/libraries/[libId]/playground';
 import arrowIcon from '../../assets/icons/arrow.svg';
 import githubIcon from '../../assets/icons/github.svg';
 import lastUpdateIcon from '../../assets/icons/last-update.svg';
@@ -166,6 +167,17 @@ export const Library: React.FC<Props> = ({lib}) => {
                                             <span>{t('actions_storybook')}</span>
                                         </Button>
                                     ) : null}
+                                    {availablePlaygrounds.includes(lib.config.id) ? (
+                                        <Button
+                                            key="playground"
+                                            className={b('button')}
+                                            view="outlined"
+                                            size="xl"
+                                            href={`/libraries/${lib.config.id}/playground`}
+                                        >
+                                            <span>{t('actions_playground')}</span>
+                                        </Button>
+                                    ) : null}
                                 </div>
                             ) : null}
                         </div>

src/components/MarkdownEditor/MarkdownEditor.scss

@@ -0,0 +1,72 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '~@gravity-ui/uikit/styles/mixins' as ukitMixins;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}markdown-editor';
+
+#{$block} {
+    margin-block-start: calc(var(--g-spacing-base) * 8);
+
+    &__heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: pcVariables.$indentXS;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+            margin-bottom: pcVariables.$indentXXXS;
+        }
+    }
+
+    &__title {
+        font-size: 48px;
+        line-height: 56px;
+        font-weight: 600;
+        color: #fff;
+        margin: 0;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+            font-size: 32px;
+            line-height: 48px;
+            margin-bottom: pcVariables.$indentXXXS;
+        }
+    }
+
+    &__content {
+        width: 100%;
+        min-height: 300px;
+    }
+}
+
+.g-md-editor-component__editor-wrapper {
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 15px 20px 20px;
+    margin-bottom: 20px;
+}
+
+.yfm-editor {
+    color: var(--g-color-text-primary);
+}
+
+// FIXME: This is a temporary solution, will be fixed after
+// https://github.com/gravity-ui/markdown-editor/pull/369 */
+
+:root {
+    --g-md-sticky-offset-compensate: 100px;
+}
+
+.gravity-ui-landing-markdown-editor_sticky .g-md-editor-component__toolbar {
+    z-index: 2000;
+    position: sticky;
+    top: 8px;
+}
+
+.gravity-ui-landing-markdown-editor_sticky .g-md-editor-component__toolbar::before {
+    position: absolute;
+    inset: -4px;
+    content: '';
+    border: 1px solid var(--g-color-line-generic-solid);
+    border-radius: 4px;
+    background-color: var(--g-color-base-background);
+}