fix

web/pages/gist/[...pathSegments].tsx

@@ -1,12 +1,14 @@
 import debug from 'debug';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
-import { GistSource, GistSourceLocator } from '../../src/core/GistSource';
+import React, { useEffect, useState } from 'react';
+import { GistSource } from '../../src/core/GistSource';
 import useSWR from 'swr';
 import { GistTextarea } from '../../src/gist/gist-textarea';
 import { PageContainer, PageHeader } from '../../src/layouts';
 import { RevealSlidePlayer } from '../../src/player/reveal-slide-player';
 import { useRenderSwr } from '../../src/components/useRenderSwr';
+import clsx from 'clsx';
+import { StartPlaybackButton } from '../../src/markdown/markdown-textarea';
 
 const logger = debug('pages:gist');
 
@@ -21,7 +23,12 @@ function GistSourcePageContent({ src }: { src: GistSource }) {
   };
 
   const textArea = useRenderSwr(fetched, (v) => (
-    <GistTextarea bundle={v} initialValue={text} onStart={onStartPlayback} />
+    <>
+      <div className={clsx('flex justify-center my-4 items-center', { ['space-x-12']: text })}>
+        <StartPlaybackButton onClick={() => onStartPlayback(v.slideText)} />
+      </div>
+      <GistTextarea bundle={v} initialValue={text} onStart={onStartPlayback} />
+    </>
   ));
 
   logger(src, fetched);

web/src/gist/gist-textarea.tsx

@@ -1,7 +1,5 @@
 import { SlideBundle } from '../core/SlideBundle';
 import { ReactElement, useState } from 'react';
-import clsx from 'clsx';
-import { Button } from '@mui/material';
 import { MarkdownTextarea } from '../markdown/markdown-textarea';
 
 export function GistTextarea(props: {
@@ -11,5 +9,5 @@ export function GistTextarea(props: {
   onStart?(markdownText: string): void;
 }): ReactElement {
   const [text, setText] = useState(props.initialValue || props.bundle.slideText);
-  return <MarkdownTextarea value={text} onChange={setText} className={props.className} />;
+  return <MarkdownTextarea readOnly={true} value={text} onChange={setText} className={props.className} />;
 }

web/src/markdown/markdown-textarea.tsx

@@ -82,6 +82,7 @@ export function MarkdownTextarea(props: {
   value: string;
   onChange(value: string, isManualEdit: boolean): void;
   className?: string;
+  readOnly?: boolean;
 }) {
   return (
     <div className={clsx('max-w-screen-lg mx-auto px-4', props.className)}>
@@ -91,6 +92,7 @@ export function MarkdownTextarea(props: {
         rows={20}
         cols={80}
         value={props.value}
+        readOnly={props.readOnly}
         onChange={(ev) => props.onChange(ev.target.value, true)}
       />
     </div>