SGUI / Development
ContentEditorChrome
An editable document title with anchor-aware menu commands.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
An editable document title with anchor-aware menu commands.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Ready
An editable document title with anchor-aware menu commands.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ContentEditorChrome } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ContentEditorChromeExample() {
const [title,setTitle] = useState("Course introduction");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<ContentEditorChrome icon={<Typography as="span">✎</Typography>} title={title} onTitleSave={setTitle} titleReadOnly={false} menuItems={[{id:'save',label:'Save',disabled:false,onPress:()=>setStatus('Saved locally')},{id:'preview',label:'Preview',onPress:()=>setStatus('Preview requested')}]} rightSlot={<Typography role="status">{status}</Typography>} />
</ThemeScope>
</>
);
}
An editable document title with anchor-aware menu commands.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ContentEditorChrome } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ContentEditorChromeExample() {
const [title,setTitle] = useState("Course introduction");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<ContentEditorChrome icon={<Typography as="span">✎</Typography>} title={title} onTitleSave={setTitle} titleReadOnly={false} menuItems={[{id:'save',label:'Save',disabled:false,onPress:()=>setStatus('Saved locally')},{id:'preview',label:'Preview',onPress:()=>setStatus('Preview requested')}]} rightSlot={<Typography role="status">{status}</Typography>} />
</ThemeScope>
</>
);
}
An editable document title with anchor-aware menu commands.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ContentEditorChrome } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ContentEditorChromeExample() {
const [title,setTitle] = useState("Course introduction");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<ContentEditorChrome icon={<Typography as="span">✎</Typography>} title={title} onTitleSave={setTitle} titleReadOnly={false} menuItems={[{id:'save',label:'Save',disabled:false,onPress:()=>setStatus('Saved locally')},{id:'preview',label:'Preview',onPress:()=>setStatus('Preview requested')}]} rightSlot={<Typography role="status">{status}</Typography>} />
</ThemeScope>
</>
);
}
An editable document title with anchor-aware menu commands.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ContentEditorChrome } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ContentEditorChromeExample() {
const [title,setTitle] = useState("Course introduction");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<ContentEditorChrome icon={<Typography as="span">✎</Typography>} title={title} onTitleSave={setTitle} titleReadOnly={false} menuItems={[{id:'export',label:'Export',onPress:()=>setStatus('Export requested')}]} rightSlot={<Typography role="status">{status}</Typography>} />
</ThemeScope>
</>
);
}
An editable document title with anchor-aware menu commands.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ContentEditorChrome } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ContentEditorChromeExample() {
const [title,setTitle] = useState("Course introduction");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<ContentEditorChrome icon={<Typography as="span">✎</Typography>} title={title} onTitleSave={setTitle} titleReadOnly={false} menuItems={[{id:'export',label:'Export',onPress:()=>setStatus('Export requested')}]} rightSlot={<Typography role="status">{status}</Typography>} />
</ThemeScope>
</>
);
}
An editable document title with anchor-aware menu commands.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { ContentEditorChrome } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ContentEditorChromeExample() {
const [title,setTitle] = useState("Archived course introduction");
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable" style={{maxWidth:360}}>
<ContentEditorChrome icon={<Typography as="span">✎</Typography>} title={title} onTitleSave={setTitle} titleReadOnly={true} menuItems={[{id:'save',label:'Save',disabled:true,onPress:()=>setStatus('Saved locally')},{id:'preview',label:'Preview',onPress:()=>setStatus('Preview requested')}]} rightSlot={<Typography role="status">{status}</Typography>} />
</ThemeScope>
</>
);
}