SGUI / Development
DocumentEditorToolbar
Controlled heading, formatting and zoom state with explicit command availability.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Controlled heading, formatting and zoom state with explicit command availability.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
normal / 100% / bold false / italic false / bulleted false / numbered false
Controlled heading, formatting and zoom state with explicit command availability.
normal / 100% / bold false / italic false / bulleted false / numbered false
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DocumentEditorToolbarExample() {
const [heading,setHeading] = useState<'normal'|'h1'|'h2'|'h3'|'h4'|'h5'>("normal");
const [zoom,setZoom] = useState(100);
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [bullet,setBullet] = useState(false);
const [ordered,setOrdered] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><DocumentEditorToolbar canEdit={true} headingValue={heading} onHeadingChange={setHeading} actions={{bold:{active:bold,onClick:()=>setBold(!bold)},italic:{active:italic,onClick:()=>setItalic(!italic)},bulletList:{active:bullet,onClick:()=>setBullet(!bullet)},orderedList:{active:ordered,onClick:()=>setOrdered(!ordered)}}} zoomValue={zoom} onZoomIn={()=>setZoom(n=>Math.min(200,n+10))} onZoomOut={()=>setZoom(n=>Math.max(50,n-10))} showZoomControls={true} showAlignmentControls={false} statusLabel={"Building a thoughtful learning experience"}/><Typography>{heading} / {zoom}% / bold {String(bold)} / italic {String(italic)} / bulleted {String(bullet)} / numbered {String(ordered)}</Typography></Stack>
</ThemeScope>
</>
);
}
Controlled heading, formatting and zoom state with explicit command availability.
normal / 100% / bold false / italic false / bulleted false / numbered false
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DocumentEditorToolbarExample() {
const [heading,setHeading] = useState<'normal'|'h1'|'h2'|'h3'|'h4'|'h5'>("normal");
const [zoom,setZoom] = useState(100);
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [bullet,setBullet] = useState(false);
const [ordered,setOrdered] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><DocumentEditorToolbar canEdit={true} headingValue={heading} onHeadingChange={setHeading} actions={{bold:{active:bold,onClick:()=>setBold(!bold)},italic:{active:italic,onClick:()=>setItalic(!italic)},bulletList:{active:bullet,onClick:()=>setBullet(!bullet)},orderedList:{active:ordered,onClick:()=>setOrdered(!ordered)}}} zoomValue={zoom} onZoomIn={()=>setZoom(n=>Math.min(200,n+10))} onZoomOut={()=>setZoom(n=>Math.max(50,n-10))} showZoomControls={true} showAlignmentControls={false} statusLabel={"Building a thoughtful learning experience"}/><Typography>{heading} / {zoom}% / bold {String(bold)} / italic {String(italic)} / bulleted {String(bullet)} / numbered {String(ordered)}</Typography></Stack>
</ThemeScope>
</>
);
}
Controlled heading, formatting and zoom state with explicit command availability.
normal / 100% / bold false / italic false / bulleted false / numbered false
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DocumentEditorToolbarExample() {
const [heading,setHeading] = useState<'normal'|'h1'|'h2'|'h3'|'h4'|'h5'>("normal");
const [zoom,setZoom] = useState(100);
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [bullet,setBullet] = useState(false);
const [ordered,setOrdered] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><DocumentEditorToolbar canEdit={true} headingValue={heading} onHeadingChange={setHeading} actions={{bold:{active:bold,onClick:()=>setBold(!bold)},italic:{active:italic,onClick:()=>setItalic(!italic)},bulletList:{active:bullet,onClick:()=>setBullet(!bullet)},orderedList:{active:ordered,onClick:()=>setOrdered(!ordered)}}} zoomValue={zoom} onZoomIn={()=>setZoom(n=>Math.min(200,n+10))} onZoomOut={()=>setZoom(n=>Math.max(50,n-10))} showZoomControls={true} showAlignmentControls={false} statusLabel={"Building a thoughtful learning experience"}/><Typography>{heading} / {zoom}% / bold {String(bold)} / italic {String(italic)} / bulleted {String(bullet)} / numbered {String(ordered)}</Typography></Stack>
</ThemeScope>
</>
);
}
Controlled heading, formatting and zoom state with explicit command availability.
normal / 100% / bold false / italic false / bulleted false / numbered false
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DocumentEditorToolbarExample() {
const [heading,setHeading] = useState<'normal'|'h1'|'h2'|'h3'|'h4'|'h5'>("normal");
const [zoom,setZoom] = useState(100);
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [bullet,setBullet] = useState(false);
const [ordered,setOrdered] = useState(false);
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><DocumentEditorToolbar canEdit={true} headingValue={heading} onHeadingChange={setHeading} actions={{bold:{active:bold,onClick:()=>setBold(!bold)},italic:{active:italic,onClick:()=>setItalic(!italic)},bulletList:{active:bullet,onClick:()=>setBullet(!bullet)},orderedList:{active:ordered,onClick:()=>setOrdered(!ordered)}}} zoomValue={zoom} onZoomIn={()=>setZoom(n=>Math.min(200,n+10))} onZoomOut={()=>setZoom(n=>Math.max(50,n-10))} showZoomControls={false} showAlignmentControls={false} statusLabel={"Building a thoughtful learning experience"}/><Typography>{heading} / {zoom}% / bold {String(bold)} / italic {String(italic)} / bulleted {String(bullet)} / numbered {String(ordered)}</Typography></Stack>
</ThemeScope>
</>
);
}
Controlled heading, formatting and zoom state with explicit command availability.
normal / 100% / bold false / italic false / bulleted false / numbered false
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DocumentEditorToolbarExample() {
const [heading,setHeading] = useState<'normal'|'h1'|'h2'|'h3'|'h4'|'h5'>("normal");
const [zoom,setZoom] = useState(100);
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [bullet,setBullet] = useState(false);
const [ordered,setOrdered] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><DocumentEditorToolbar canEdit={true} headingValue={heading} onHeadingChange={setHeading} actions={{bold:{active:bold,onClick:()=>setBold(!bold)},italic:{active:italic,onClick:()=>setItalic(!italic)},bulletList:{active:bullet,onClick:()=>setBullet(!bullet)},orderedList:{active:ordered,onClick:()=>setOrdered(!ordered)}}} zoomValue={zoom} onZoomIn={()=>setZoom(n=>Math.min(200,n+10))} onZoomOut={()=>setZoom(n=>Math.max(50,n-10))} showZoomControls={false} showAlignmentControls={false} statusLabel={"Building a thoughtful learning experience"}/><Typography>{heading} / {zoom}% / bold {String(bold)} / italic {String(italic)} / bulleted {String(bullet)} / numbered {String(ordered)}</Typography></Stack>
</ThemeScope>
</>
);
}
Controlled heading, formatting and zoom state with explicit command availability.
normal / 100% / bold false / italic false / bulleted false / numbered false
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { DocumentEditorToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function DocumentEditorToolbarExample() {
const [heading,setHeading] = useState<'normal'|'h1'|'h2'|'h3'|'h4'|'h5'>("normal");
const [zoom,setZoom] = useState(100);
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [bullet,setBullet] = useState(false);
const [ordered,setOrdered] = useState(false);
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><DocumentEditorToolbar canEdit={false} headingValue={heading} onHeadingChange={setHeading} actions={{bold:{active:bold,onClick:()=>setBold(!bold)},italic:{active:italic,onClick:()=>setItalic(!italic)},bulletList:{active:bullet,onClick:()=>setBullet(!bullet)},orderedList:{active:ordered,onClick:()=>setOrdered(!ordered)}}} zoomValue={zoom} onZoomIn={()=>setZoom(n=>Math.min(200,n+10))} onZoomOut={()=>setZoom(n=>Math.max(50,n-10))} showZoomControls={true} showAlignmentControls={false} statusLabel={"Building a thoughtful learning experience"}/><Typography>{heading} / {zoom}% / bold {String(bold)} / italic {String(italic)} / bulleted {String(bullet)} / numbered {String(ordered)}</Typography></Stack>
</ThemeScope>
</>
);
}