admin-valentin/open-notebook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #305 from xeader/fix/issue-271.1-note-editor-not-full-screen

Browse source 
feat(notebooks): Enhance dialog content styling for fullscreen mode
This commit is contained in:
Luis Novo 2025-12-20 10:12:29 -03:00 committed by GitHub
commit a8bb88e10f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/app/(dashboard)/notebooks/components/NoteEditorDialog.tsx
View file

@ -1,7 +1,7 @@
'use client'
import { Controller, useForm, useWatch } from 'react-hook-form'
import { useEffect } from 'react'
import { useEffect, useState } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
@ -11,6 +11,7 @@ import { useCreateNote, useUpdateNote, useNote } from '@/lib/hooks/use-notes'
import { QUERY_KEYS } from '@/lib/api/query-client'
import { MarkdownEditor } from '@/components/ui/markdown-editor'
import { InlineEdit } from '@/components/common/InlineEdit'
import { cn } from "@/lib/utils";
const createNoteSchema = z.object({
title: z.string().optional(),
@ -53,6 +54,7 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
},
})
const watchTitle = useWatch({ control, name: 'title' })
const [isEditorFullscreen, setIsEditorFullscreen] = useState(false)
useEffect(() => {
if (!open) {
@ -67,6 +69,14 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
reset({ title, content })
}, [open, note, fetchedNote, reset])
useEffect(() => {
const observer = new MutationObserver(() => {
setIsEditorFullscreen(!!document.querySelector('.w-md-editor-fullscreen'))
})
observer.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['class']})
return () => observer.disconnect()
}, [])
const onSubmit = async (data: CreateNoteFormData) => {
if (note) {
await updateNote.mutateAsync({
@ -99,12 +109,16 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
const handleClose = () => {
reset()
setIsEditorFullscreen(false)
onOpenChange(false)
}
return (
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-3xl w-full max-h-[90vh] overflow-hidden p-0">
<DialogContent className={cn(
"sm:max-w-3xl w-full max-h-[90vh] overflow-hidden p-0",
isEditorFullscreen && "!max-w-screen !max-h-screen border-none w-screen h-screen"
)}>
<DialogTitle className="sr-only">
{isEditing ? 'Edit note' : 'Create note'}
</DialogTitle>
@ -126,7 +140,10 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
/>
</div>
<div className="flex-1 overflow-y-auto px-6 py-4">
<div className={cn(
"flex-1 overflow-y-auto",
!isEditorFullscreen && "px-6 py-4")
}>
<Controller
control={control}
name="content"
@ -137,7 +154,10 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
onChange={field.onChange}
height={420}
placeholder="Write your note content here..."
className="rounded-md border"
className={cn(
"w-full h-full min-h-[420px] [&_.w-md-editor]:!static [&_.w-md-editor]:!w-full [&_.w-md-editor]:!h-full",
!isEditorFullscreen && "rounded-md border"
)}
/>
)}
/>
@ -152,8 +172,8 @@ export function NoteEditorDialog({ open, onOpenChange, notebookId, note }: NoteE
<Button type="button" variant="outline" onClick={handleClose}>
Cancel
</Button>
<Button
type="submit"
<Button
type="submit"
disabled={isSaving || (isEditing && noteLoading)}
>
{isSaving

2
frontend/src/components/ui/dialog.tsx
View file

@ -60,7 +60,7 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[calc(100%-2rem)]",
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[calc(100%-2rem)]",
className
)}
{...props}