Merge pull request #12 from ts-graphviz/auto-fit-height-on-editor

Auto resize the editor

Author: kamiazya

docs/ts-graphviz/02-core-features/index.mdx

@@ -13,14 +13,12 @@ import TSGraphvizLiveEditor from '@site/src/components/TSGraphvizLiveEditor';
 **Playground:**
 
  <TSGraphvizLiveEditor
-  script={`
-import { digraph, attribute as _ } from 'ts-graphviz';
+  script={`import { digraph, attribute as _ } from 'ts-graphviz';
 
 const G = digraph('G', (g) => {
     g.node('A', { [_.color]: 'red' });
     g.edge(['A', 'B'], { [_.label]: 'A to B' });
 });`}
-  height={150}
   readOnly
 />
 

i18n/ja/docusaurus-plugin-content-docs/current/ts-graphviz/02-core-features/index.mdx

@@ -12,14 +12,12 @@ import TSGraphvizLiveEditor from '@site/src/components/TSGraphvizLiveEditor';
 **プレイグラウンド:**
 
 <TSGraphvizLiveEditor
-  script={`
-import { digraph, attribute as _ } from 'ts-graphviz';
+  script={`import { digraph, attribute as _ } from 'ts-graphviz';
 
 const G = digraph('G', (g) => {
     g.node('A', { [_.color]: 'red' });
     g.edge(['A', 'B'], { [_.label]: 'A to B' });
 });`}
-  height={150}
   readOnly
 />
 

src/components/TSGraphvizLiveEditor/index.tsx

@@ -3,7 +3,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import { Editor as Monaco, useMonaco } from '@monaco-editor/react';
 import type monaco_editor from 'monaco-editor';
 import type { editor } from 'monaco-editor';
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 
 interface Props {
   script: string;
@@ -21,6 +21,7 @@ const MONACO_THEMES: Record<ColorMode, string> = {
 
 function TSGraphvizLiveEditor({
   script,
+  // Auto resize the editor to fit the content height
   onMount,
   readOnly,
 }: Props): JSX.Element {
@@ -31,6 +32,40 @@ function TSGraphvizLiveEditor({
     () => (colorMode === 'dark' ? MONACO_THEMES.dark : MONACO_THEMES.light),
     [colorMode],
   );
+  const onMountCallback = useCallback(
+    onMount ??
+      ((editor: editor.IStandaloneCodeEditor) => {
+        const lineHeight = editor.getOption(
+          monaco.editor.EditorOption.lineHeight,
+        );
+        const currentLayout = editor.getLayoutInfo();
+        const MIN_HEIGHT = 100;
+        const MAX_HEIGHT = 500;
+        const PADDING = 10;
+        resize();
+
+        // Auto-resize on content changes
+        if (!readOnly) {
+          editor.getModel().onDidChangeContent(() => {
+            resize();
+          });
+        }
+        function resize() {
+          const newHeight = Math.min(
+            Math.max(
+              editor.getModel().getLineCount() * lineHeight + PADDING,
+              MIN_HEIGHT,
+            ),
+            MAX_HEIGHT,
+          );
+          editor.layout({
+            height: newHeight,
+            width: currentLayout.contentWidth,
+          });
+        }
+      }),
+    [monaco, readOnly],
+  );
   const dtsUrl = useBaseUrl('/dts.json');
   useEffect(() => {
     if (monaco) {
@@ -70,7 +105,7 @@ function TSGraphvizLiveEditor({
             lineDecorationsWidth: 0,
             readOnly,
           }}
-          onMount={onMount}
+          onMount={onMountCallback}
         />
       ) : null}
     </>