Index: src/index.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>import {useCallback, useState, useEffect}  from 'react';\nimport {Container, Row, Col} from '@gravity-ui/uikit';\n\nimport {CallOut} from './callout';\nimport {InputArea} from './input-area';\nimport {OutputArea} from './output-area';\n\nimport {useTabs} from './useTabs';\nimport {generateMD, generateHTML, generateTokens} from './generators';\nimport persistRestore from './persistRestore';\n\nimport './styles.css';\n\n(window as any).MonacoEnvironment = {\n    getWorker: (_, label: string) => {\n        if (label === 'json') {\n            return new Worker(\n                new URL('monaco-editor/esm/vs/language/json/json.worker?worker', 'monaco-worker'),\n            );\n        }\n        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker', 'monaco-worker'));\n    },\n};\n\nconst App = () => {\n    return(<>\n        <Container>\n            <CallOut />\n            <Playground persistRestore={true} />\n        </Container>\n    </>)\n};\n\nexport type PlaygroundProperties = {\n    content?: string;\n    persistRestore?: boolean;\n}\n\nfunction Playground(props: PlaygroundProperties) {\n    const persist = useCallback(persistRestore.persist, []);\n    const restore = useCallback(persistRestore.restore, []);\n    const content = props?.persistRestore ? restore() : props?.content\n    const [input, setInput] = useState(content ?? '');\n    const [generated, setGenerated] = useState(input);\n\n    const generate = useCallback((active: string) => {\n        if (active === 'markdown') {\n            setGenerated(generateMD(input));\n        } else if (active === 'html') {\n            setGenerated(generateHTML(input));\n        } else if (active === 'tokens') {\n            setGenerated(generateTokens(input));\n        } else if (active === 'preview') {\n            setGenerated(generateHTML(input));\n        } else {\n            setGenerated(input);\n        }\n    }, [input]);\n\n    const [\n        inputItems,\n        inputActive,\n        handleSetInputAreaTabActive\n    ] = useTabs({\n        items: [ { id: 'input', title: 'input' } ],\n        initial: 'input',\n    });\n\n    const [\n        outputItems,\n        outputActive,\n        handleSetOutputAreaTabActive\n    ] = useTabs({\n        items: [\n            { id: 'preview', title: 'html preview' },\n            { id: 'html', title: 'html' },\n            { id: 'markdown', title: 'markdown' },\n            { id: 'tokens', title: 'tokens' },\n        ],\n        initial: 'preview',\n        onSetActive: generate,\n    });\n\n    const handleInputChange = (input?: string) => {\n        setInput(input || '');\n    };\n\n    useEffect(() => {\n        generate(outputActive);\n\n        if (props?.persistRestore) {\n            persist(input);\n        }\n    }, [input]);\n\n    return (\n        <Row space={6} className=\"diplodoc-playground\">\n            <Col s=\"12\"/>\n            <InputArea\n                handleSelectTab={handleSetInputAreaTabActive}\n                handleInputChange={handleInputChange}\n                input={input}\n\n                tabActive={inputActive}\n                tabItems={inputItems}\n            />\n            <OutputArea\n                handleSelectTab={handleSetOutputAreaTabActive}\n                tabItems={outputItems}\n                tabActive={outputActive}\n                output={generated}\n            />\n        </Row>\n    );\n}\n\nexport {App, Playground};\nexport default {App, Playground};\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/index.tsx b/src/index.tsx
--- a/src/index.tsx	(revision 1b817c8baa5594a7eebd8914f41c6217dd16432f)
+++ b/src/index.tsx	(date 1695408924783)
@@ -33,6 +33,7 @@
 
 export type PlaygroundProperties = {
     content?: string;
+    tabs?: { id: string, title: string }[];
     persistRestore?: boolean;
 }
 
@@ -71,7 +72,7 @@
         outputActive,
         handleSetOutputAreaTabActive
     ] = useTabs({
-        items: [
+        items: props?.tabs || [
             { id: 'preview', title: 'html preview' },
             { id: 'html', title: 'html' },
             { id: 'markdown', title: 'markdown' },
Index: src/input-area.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>import {useRef} from 'react'\nimport {Tabs, TabsProps, Card, Row, Col} from '@gravity-ui/uikit';\n\nimport Editor from '@monaco-editor/react';\nimport type {editor as EditorTypes} from 'monaco-editor';\n\nexport type InputAreaProps = {\n  handleSelectTab: (active: string) => void;\n  tabItems: TabsProps['items'];\n  tabActive: string;\n\n  handleInputChange: (input?: string) => void;\n  input: string;\n}\n\nfunction InputArea(props: InputAreaProps) {\n  const monacoRef = useRef<EditorTypes.IStandaloneCodeEditor | null>(null);\n\n  const {tabActive, tabItems, input, handleInputChange, handleSelectTab} = props;\n\n  const editorOptions = {minimap: {enabled: false}, lineNumbers: \"off\" as const};\n\n  const lines = monacoRef?.current?.getModel()?.getLineCount() ?? 10; \n  const height = `${lines * 16}px`;\n\n  const handleOnMount = (editor) => {\n    monacoRef.current = editor;\n  }\n\n  return (\n    <Col s=\"6\">\n      <Card size=\"m\" className=\"area__card\">\n        <Row space={2}>\n          <Col s=\"12\">\n            <Tabs activeTab={tabActive} items={tabItems} className=\"area__tabs\" onSelectTab={handleSelectTab}/>\n          </Col>\n          <Col s=\"12\"/>\n          <Col s=\"12\">\n            <Card size=\"m\" className=\"area__card area-card__editor\">\n                <Editor height={height} defaultLanguage=\"markdown\" defaultValue={input} onChange={handleInputChange} options={editorOptions} onMount={handleOnMount} />\n            </Card>\n          </Col>\n        </Row>\n      </Card>\n    </Col>);\n}\n\nexport {InputArea};\nexport default {InputArea};\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/input-area.tsx b/src/input-area.tsx
--- a/src/input-area.tsx	(revision 1b817c8baa5594a7eebd8914f41c6217dd16432f)
+++ b/src/input-area.tsx	(date 1695408752627)
@@ -36,7 +36,7 @@
           </Col>
           <Col s="12"/>
           <Col s="12">
-            <Card size="m" className="area__card area-card__editor">
+            <Card size="m" view={'clear'} className="area-card__editor">
                 <Editor height={height} defaultLanguage="markdown" defaultValue={input} onChange={handleInputChange} options={editorOptions} onMount={handleOnMount} />
             </Card>
           </Col>
Index: src/output-area.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>import {Row, Col, Card, Tabs, TabsProps, TextArea} from '@gravity-ui/uikit';\n\nexport type OutputAreaProps = {\n  handleSelectTab: (active: string) => void;\n  tabItems: TabsProps['items'];\n  tabActive: string;\n\n  handleInputChange?: (input: string) => void;\n  output: string;\n};\n\nfunction OutputArea(props: OutputAreaProps) {\n  let {output, tabItems, tabActive, handleSelectTab, handleInputChange} = props;\n\n  if (!handleInputChange) {\n    handleInputChange = () => {}\n  }\n\n  return (\n    <Col s=\"6\">\n      <Card size=\"m\" className=\"area__card\">\n        <Row space={2}>\n          <Col s=\"12\">\n            <Tabs\n              onSelectTab={handleSelectTab}\n              activeTab={tabActive}\n              items={tabItems}\n              className=\"area__tabs\"\n            />\n          </Col>\n          <Col s=\"12\" />\n          <Col s=\"12\">\n            {tabActive === 'preview'\n                ? <Card size=\"m\" className=\"yfm area__yfm\">\n                    <div dangerouslySetInnerHTML={{__html: output}} className=\"area__card\"></div>\n                  </Card>\n                : <TextArea\n                    onUpdate={handleInputChange}\n                    value={output} \n                    size=\"l\" />\n            }\n          </Col>\n        </Row>\n      </Card>\n    </Col>\n  );\n}\n\nexport {OutputArea};\nexport default {OutputArea};\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/output-area.tsx b/src/output-area.tsx
--- a/src/output-area.tsx	(revision 1b817c8baa5594a7eebd8914f41c6217dd16432f)
+++ b/src/output-area.tsx	(date 1695408752630)
@@ -31,8 +31,8 @@
           <Col s="12" />
           <Col s="12">
             {tabActive === 'preview'
-                ? <Card size="m" className="yfm area__yfm">
-                    <div dangerouslySetInnerHTML={{__html: output}} className="area__card"></div>
+                ? <Card size="m" className="yfm area__yfm" view={'clear'}>
+                    <div dangerouslySetInnerHTML={{__html: output}}></div>
                   </Card>
                 : <TextArea
                     onUpdate={handleInputChange}
Index: src/styles.css
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>.callout__card {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  padding: calc(var(--g-text-display-4-font-size) * 2) 0;\n\n  background-color: var(--g-color-base-brand);\n  opacity: .75;\n\n  text-transform: uppercase;\n}\n\n.diplodoc-playground {\n  --diplodoc-playground-height: 300px;\n}\n\n@media (min-width: 768px) {\n  .diplodoc-playground {\n    --diplodoc-playground-height: 600px;\n  }\n}\n\n@media screen and (min-width: 1080px) {\n  .diplodoc-playground {\n    --diplodoc-playground-height: 75vh;\n  }\n}\n\n.callout__heading {\n  font-weight: 100;\n  letter-spacing: 2.5px;\n\n  color: white;\n}\n\n.area__card {\n  padding: var(--g-text-body-1-font-size);\n}\n\n.area__card > section {\n  height: var(--diplodoc-playground-height) !important;\n  min-height: var(--diplodoc-playground-height) !important;\n  max-height: var(--diplodoc-playground-height) !important;\n\n  overflow-y: scroll;\n  overflow-x: hidden;\n\n  padding: 0;\n}\n\n.g-text-area__control {\n  height: calc(var(--diplodoc-playground-height) + 26px) !important;\n  min-height: calc(var(--diplodoc-playground-height) + 26px) !important;\n  max-height: calc(var(--diplodoc-playground-height) + 26px) !important;\n\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.g-text-area__content {\n  border-radius: 2px !important;\n}\n\n/* yfm preview */\n.area__yfm {\n  border-radius: 2px !important;\n\n  height: calc(var(--diplodoc-playground-height) + 26px);\n  min-height: calc(var(--diplodoc-playground-height) + 26px);\n  max-height: calc(var(--diplodoc-playground-height) + 26px);\n\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.area-card__editor {\n  border-radius: 2px !important;\n  padding-right: 0px;\n}\n\n.area__tabs {\n  text-transform: uppercase;\n}\n\n.monaco-scrollable-element {\n  left: 0 !important;\n  min-width: 100% !important;\n}\n\n.margin {\n  display: none !important;\n}\n\n.diplodoc-playground__logo {\n  height: calc(var(--g-text-display-4-font-size) * 2);\n  width: auto;\n}\n\n.diplodoc-playground__logo > path{\n  fill: white;\n}\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/styles.css b/src/styles.css
--- a/src/styles.css	(revision 1b817c8baa5594a7eebd8914f41c6217dd16432f)
+++ b/src/styles.css	(date 1695408773542)
@@ -38,7 +38,7 @@
   padding: var(--g-text-body-1-font-size);
 }
 
-.area__card > section {
+.area-card__editor > section {
   height: var(--diplodoc-playground-height) !important;
   min-height: var(--diplodoc-playground-height) !important;
   max-height: var(--diplodoc-playground-height) !important;