diff --git a/src/components/islands/EventEditor.tsx b/src/components/islands/EventEditor.tsx index bf1a527..2e6b807 100644 --- a/src/components/islands/EventEditor.tsx +++ b/src/components/islands/EventEditor.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import type { FormEvent, ChangeEvent } from 'react'; import { createBrowserSupabase } from '../../lib/supabase'; import { @@ -16,6 +16,8 @@ import { ListsToggle, BlockTypeSelect, InsertImage, + Separator, + ButtonWithTooltip, } from '@mdxeditor/editor'; import '@mdxeditor/editor/style.css'; import type { Dict } from '../../lib/i18n'; @@ -71,34 +73,103 @@ async function imageUploadHandler(file: File): Promise { } } -function ContentEditor({ content, onChange }: ContentEditorProps) { +function ExpandIcon() { return ( - ( - <> - - - - - - - - ), - }), - ]} - contentEditableClassName="prose prose-sm max-w-none textarea" - /> + + ); +} + +function CollapseIcon() { + return ( + + ); +} + +function ContentEditor({ content, onChange }: ContentEditorProps) { + const [expanded, setExpanded] = useState(false); + + useEffect(() => { + if (!expanded) return; + const previousOverflow = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + function handleKeyDown(e: KeyboardEvent) { + if (e.key === 'Escape') setExpanded(false); + } + document.addEventListener('keydown', handleKeyDown); + return () => { + document.body.style.overflow = previousOverflow; + document.removeEventListener('keydown', handleKeyDown); + }; + }, [expanded]); + + return ( +
+ ( + <> + + + + + + + + setExpanded((v) => !v)} + > + {expanded ? : } + + + ), + }), + ]} + contentEditableClassName="prose prose-sm max-w-none textarea" + /> +
); } export default function EventEditor({ dict: t, event }: Props) { diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index 6c4183b..a51284d 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -45,6 +45,21 @@ resize: vertical; } +.content-editor--expanded { + position: fixed; + inset: 0; + z-index: 1000; + background: var(--surface); + padding: var(--space-4); + display: flex; + flex-direction: column; + + .mdxeditor { + flex: 1; + min-height: 0; + } +} + .form-error { background: var(--danger-soft); color: var(--danger);