SGUI / Development
DocumentEditorLayout
Compose document title, actions and toolbar around host-owned content.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Compose document title, actions and toolbar around host-owned content.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Building a thoughtful learning experience
Ready
Compose document title, actions and toolbar around host-owned content.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorLayout, EditableTitleField, Button, InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function DocumentEditorLayoutExample() {
const [title,setTitle] = useState("Course introduction");
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<DocumentEditorLayout title={"Building a thoughtful learning experience"} titleNode={<EditableTitleField title={title} onSave={setTitle} readOnly={false} minWidth={0}/>} headerRight={<Button disabled={false} onPress={()=>setStatus('Saved locally')}>Save</Button>} toolbar={<InsertContentMenuControl disabled={false} onInsertHorizontalRule={()=>{setText(s=>s+'\n—\n');setStatus('Rule requested in host notes');}}/>} style={{minHeight:300}}><Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><TextField label="Document notes" value={text} onValueChange={setText} readOnly={false}/><Typography role="status">{status}</Typography></Stack></DocumentEditorLayout>
</ThemeScope>
</>
);
}
Compose document title, actions and toolbar around host-owned content.
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorLayout, EditableTitleField, Button, InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function DocumentEditorLayoutExample() {
const [title,setTitle] = useState("Course introduction");
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<DocumentEditorLayout title={"Building a thoughtful learning experience"} titleNode={<EditableTitleField title={title} onSave={setTitle} readOnly={false} minWidth={0}/>} headerRight={<Button disabled={false} onPress={()=>setStatus('Saved locally')}>Save</Button>} toolbar={<InsertContentMenuControl disabled={false} onInsertHorizontalRule={()=>{setText(s=>s+'\n—\n');setStatus('Rule requested in host notes');}}/>} style={{minHeight:300}}><Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><TextField label="Document notes" value={text} onValueChange={setText} readOnly={false}/><Typography role="status">{status}</Typography></Stack></DocumentEditorLayout>
</ThemeScope>
</>
);
}
Compose document title, actions and toolbar around host-owned content.
An editor title and its host commands wrap within a narrow content region.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorLayout, EditableTitleField, Button, InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function DocumentEditorLayoutExample() {
const [title,setTitle] = useState("Course introduction");
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact" style={{maxWidth:360}}>
<DocumentEditorLayout title={"An editor title and its host commands wrap within a narrow content region."} titleNode={<EditableTitleField title={title} onSave={setTitle} readOnly={false} minWidth={0}/>} headerRight={<Button disabled={false} onPress={()=>setStatus('Saved locally')}>Save</Button>} toolbar={<InsertContentMenuControl disabled={false} onInsertHorizontalRule={()=>{setText(s=>s+'\n—\n');setStatus('Rule requested in host notes');}}/>} style={{minHeight:300}}><Stack gap={3}><Typography>{"An editor title and its host commands wrap within a narrow content region."}</Typography><TextField label="Document notes" value={text} onValueChange={setText} readOnly={false}/><Typography role="status">{status}</Typography></Stack></DocumentEditorLayout>
</ThemeScope>
</>
);
}
Compose document title, actions and toolbar around host-owned content.
Building a thoughtful learning experience
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorLayout, EditableTitleField, Button, InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function DocumentEditorLayoutExample() {
const [title,setTitle] = useState("Course introduction");
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<DocumentEditorLayout title={"Building a thoughtful learning experience"} style={{minHeight:300}}><Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><TextField label="Document notes" value={text} onValueChange={setText} readOnly={false}/><Typography role="status">{status}</Typography></Stack></DocumentEditorLayout>
</ThemeScope>
</>
);
}
Compose document title, actions and toolbar around host-owned content.
Building a thoughtful learning experience
Building a thoughtful learning experience
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorLayout, EditableTitleField, Button, InsertContentMenuControl } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function DocumentEditorLayoutExample() {
const [title,setTitle] = useState("Archived course introduction");
const [text,setText] = useState("Style this host-controlled sentence.");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<DocumentEditorLayout title={"Building a thoughtful learning experience"} style={{minHeight:300}}><Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><TextField label="Document notes" value={text} onValueChange={setText} readOnly={true}/><Typography role="status">{status}</Typography></Stack></DocumentEditorLayout>
</ThemeScope>
</>
);
}