SGUI / Development
RichTextFormattingToolbar
Host-controlled formatting commands, checked states and optional control groups.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Host-controlled formatting commands, checked states and optional control groups.
Loading examples…
Loading examples…
Loading examples…
Building a thoughtful learning experience
Host-controlled formatting commands, checked states and optional control groups.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RichTextFormattingToolbar, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RichTextFormattingToolbarExample() {
const [heading,setHeading] = useState<NonNullable<React.ComponentProps<typeof RichTextFormattingToolbar>['headingValue']>>("Normal");
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [underline,setUnderline] = useState(false);
const [alignment,setAlignment] = useState<AlignOption>("left");
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><RichTextFormattingToolbar headingValue={heading} onHeadingChange={setHeading} boldActive={bold} onBold={()=>setBold(!bold)} italicActive={italic} onItalic={()=>setItalic(!italic)} underlineActive={underline} onUnderline={()=>setUnderline(!underline)} alignmentValue={alignment} onAlignmentChange={setAlignment} showFontFamilySelector={false} showFontSizeControls={false} textColorValue={color} onTextColorChange={setColor}/><Typography>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Host-controlled formatting commands, checked states and optional control groups.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RichTextFormattingToolbar, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RichTextFormattingToolbarExample() {
const [heading,setHeading] = useState<NonNullable<React.ComponentProps<typeof RichTextFormattingToolbar>['headingValue']>>("Normal");
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [underline,setUnderline] = useState(false);
const [alignment,setAlignment] = useState<AlignOption>("left");
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><RichTextFormattingToolbar headingValue={heading} onHeadingChange={setHeading} boldActive={bold} onBold={()=>setBold(!bold)} italicActive={italic} onItalic={()=>setItalic(!italic)} underlineActive={underline} onUnderline={()=>setUnderline(!underline)} alignmentValue={alignment} onAlignmentChange={setAlignment} showFontFamilySelector={false} showFontSizeControls={false} textColorValue={color} onTextColorChange={setColor}/><Typography>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Host-controlled formatting commands, checked states and optional control groups.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RichTextFormattingToolbar, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RichTextFormattingToolbarExample() {
const [heading,setHeading] = useState<NonNullable<React.ComponentProps<typeof RichTextFormattingToolbar>['headingValue']>>("Normal");
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [underline,setUnderline] = useState(false);
const [alignment,setAlignment] = useState<AlignOption>("left");
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><RichTextFormattingToolbar headingValue={heading} onHeadingChange={setHeading} boldActive={bold} onBold={()=>setBold(!bold)} italicActive={italic} onItalic={()=>setItalic(!italic)} underlineActive={underline} onUnderline={()=>setUnderline(!underline)} alignmentValue={alignment} onAlignmentChange={setAlignment} showFontFamilySelector={false} showFontSizeControls={false} textColorValue={color} onTextColorChange={setColor}/><Typography>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Host-controlled formatting commands, checked states and optional control groups.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RichTextFormattingToolbar, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RichTextFormattingToolbarExample() {
const [heading,setHeading] = useState<NonNullable<React.ComponentProps<typeof RichTextFormattingToolbar>['headingValue']>>("Normal");
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [underline,setUnderline] = useState(false);
const [alignment,setAlignment] = useState<AlignOption>("left");
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><RichTextFormattingToolbar headingValue={heading} onHeadingChange={setHeading} boldActive={bold} onBold={()=>setBold(!bold)} italicActive={italic} onItalic={()=>setItalic(!italic)} underlineActive={underline} onUnderline={()=>setUnderline(!underline)} alignmentValue={alignment} onAlignmentChange={setAlignment} showFontFamilySelector={false} showFontSizeControls={false} hiddenControlSets={{colors:true,textStyle:true,insert:true,alignment:true}} textColorValue={color} onTextColorChange={setColor}/><Typography>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Host-controlled formatting commands, checked states and optional control groups.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RichTextFormattingToolbar, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RichTextFormattingToolbarExample() {
const [heading,setHeading] = useState<NonNullable<React.ComponentProps<typeof RichTextFormattingToolbar>['headingValue']>>("Normal");
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [underline,setUnderline] = useState(false);
const [alignment,setAlignment] = useState<AlignOption>("left");
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><RichTextFormattingToolbar headingValue={heading} onHeadingChange={setHeading} boldActive={bold} onBold={()=>setBold(!bold)} italicActive={italic} onItalic={()=>setItalic(!italic)} underlineActive={underline} onUnderline={()=>setUnderline(!underline)} alignmentValue={alignment} onAlignmentChange={setAlignment} showFontFamilySelector={false} showFontSizeControls={false} hiddenControlSets={{colors:true,textStyle:true,insert:true,alignment:true}} textColorValue={color} onTextColorChange={setColor}/><Typography>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}
Host-controlled formatting commands, checked states and optional control groups.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { RichTextFormattingToolbar, type AlignOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function RichTextFormattingToolbarExample() {
const [heading,setHeading] = useState<NonNullable<React.ComponentProps<typeof RichTextFormattingToolbar>['headingValue']>>("Normal");
const [bold,setBold] = useState(false);
const [italic,setItalic] = useState(false);
const [underline,setUnderline] = useState(false);
const [alignment,setAlignment] = useState<AlignOption>("left");
const [color,setColor] = useState("var(--sgui-text)");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><RichTextFormattingToolbar headingValue={heading} onHeadingChange={setHeading} boldActive={bold} onBold={()=>setBold(!bold)} italicActive={italic} onItalic={()=>setItalic(!italic)} underlineActive={underline} onUnderline={()=>setUnderline(!underline)} alignmentValue={alignment} onAlignmentChange={setAlignment} showFontFamilySelector={false} showFontSizeControls={false} disabledControlSets={{heading:true,inlineFormats:true,alignment:true,colors:true,textStyle:true,insert:true}} textColorValue={color} onTextColorChange={setColor}/><Typography>{"Building a thoughtful learning experience"}</Typography></Stack>
</ThemeScope>
</>
);
}