SGUI / Development
FloatingTextSelectionToolbar
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Loading examples…
Loading examples…
Loading examples…
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { FloatingTextSelectionToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { useRef } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
export default function FloatingTextSelectionToolbarExample() {
const boundary = useRef<HTMLDivElement>(null);
const [status,setStatus] = useState("Ready");
const [document,setDocument] = useState<unknown>({"root":{"type":"root","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","detail":0,"format":0,"mode":"normal","style":""}]},{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.","detail":0,"format":0,"mode":"normal","style":""}]}]}});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><div ref={boundary} style={{height:280,maxWidth:320,overflow:'auto',position:'relative'}}><LexicalComposer initialConfig={{namespace:'floating-example',editable:true,onError:(error:Error)=>{throw error;},editorState:JSON.stringify(document)}}><FloatingTextSelectionToolbar boundaryRef={boundary} onRequestLink={()=>setStatus('Link requested for the current selection')}/><OnChangePlugin onChange={editorState=>setDocument(editorState.toJSON())}/><RichTextPlugin ErrorBoundary={LexicalErrorBoundary} contentEditable={<ContentEditable aria-label="Selection demonstration" style={{minHeight:240,padding:16}}/>} placeholder={null}/></LexicalComposer></div><Typography role="status">{status}</Typography><Typography variant="caption">Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.</Typography></Stack>
</ThemeScope>
</>
);
}
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { FloatingTextSelectionToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { useRef } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
export default function FloatingTextSelectionToolbarExample() {
const boundary = useRef<HTMLDivElement>(null);
const [status,setStatus] = useState("Ready");
const [document,setDocument] = useState<unknown>({"root":{"type":"root","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","detail":0,"format":0,"mode":"normal","style":""}]},{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.","detail":0,"format":0,"mode":"normal","style":""}]}]}});
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><div ref={boundary} style={{height:280,maxWidth:320,overflow:'auto',position:'relative'}}><LexicalComposer initialConfig={{namespace:'floating-example',editable:true,onError:(error:Error)=>{throw error;},editorState:JSON.stringify(document)}}><FloatingTextSelectionToolbar boundaryRef={boundary} onRequestLink={()=>setStatus('Link requested for the current selection')}/><OnChangePlugin onChange={editorState=>setDocument(editorState.toJSON())}/><RichTextPlugin ErrorBoundary={LexicalErrorBoundary} contentEditable={<ContentEditable aria-label="Selection demonstration" style={{minHeight:240,padding:16}}/>} placeholder={null}/></LexicalComposer></div><Typography role="status">{status}</Typography><Typography variant="caption">Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.</Typography></Stack>
</ThemeScope>
</>
);
}
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { FloatingTextSelectionToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { useRef } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
export default function FloatingTextSelectionToolbarExample() {
const boundary = useRef<HTMLDivElement>(null);
const [status,setStatus] = useState("Ready");
const [document,setDocument] = useState<unknown>({"root":{"type":"root","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","detail":0,"format":0,"mode":"normal","style":""}]},{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.","detail":0,"format":0,"mode":"normal","style":""}]}]}});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><div ref={boundary} style={{height:280,maxWidth:320,overflow:'auto',position:'relative'}}><LexicalComposer initialConfig={{namespace:'floating-example',editable:true,onError:(error:Error)=>{throw error;},editorState:JSON.stringify(document)}}><FloatingTextSelectionToolbar boundaryRef={boundary} onRequestLink={()=>setStatus('Link requested for the current selection')}/><OnChangePlugin onChange={editorState=>setDocument(editorState.toJSON())}/><RichTextPlugin ErrorBoundary={LexicalErrorBoundary} contentEditable={<ContentEditable aria-label="Selection demonstration" style={{minHeight:240,padding:16}}/>} placeholder={null}/></LexicalComposer></div><Typography role="status">{status}</Typography><Typography variant="caption">Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.</Typography></Stack>
</ThemeScope>
</>
);
}
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { FloatingTextSelectionToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { useRef } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
export default function FloatingTextSelectionToolbarExample() {
const boundary = useRef<HTMLDivElement>(null);
const [status,setStatus] = useState("Ready");
const [document,setDocument] = useState<unknown>({"root":{"type":"root","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","detail":0,"format":0,"mode":"normal","style":""}]},{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.","detail":0,"format":0,"mode":"normal","style":""}]}]}});
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><div ref={boundary} style={{height:280,maxWidth:640,overflow:'auto',position:'relative'}}><LexicalComposer initialConfig={{namespace:'floating-example',editable:true,onError:(error:Error)=>{throw error;},editorState:JSON.stringify(document)}}><FloatingTextSelectionToolbar boundaryRef={boundary} onRequestLink={()=>setStatus('Link requested for the current selection')}/><OnChangePlugin onChange={editorState=>setDocument(editorState.toJSON())}/><RichTextPlugin ErrorBoundary={LexicalErrorBoundary} contentEditable={<ContentEditable aria-label="Selection demonstration" style={{minHeight:240,padding:16}}/>} placeholder={null}/></LexicalComposer></div><Typography role="status">{status}</Typography><Typography variant="caption">Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.</Typography></Stack>
</ThemeScope>
</>
);
}
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { FloatingTextSelectionToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { useRef } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
export default function FloatingTextSelectionToolbarExample() {
const boundary = useRef<HTMLDivElement>(null);
const [status,setStatus] = useState("Ready");
const [document,setDocument] = useState<unknown>({"root":{"type":"root","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","detail":0,"format":0,"mode":"normal","style":""}]},{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.","detail":0,"format":0,"mode":"normal","style":""}]}]}});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><div ref={boundary} style={{height:280,maxWidth:640,overflow:'auto',position:'relative'}}><LexicalComposer initialConfig={{namespace:'floating-example',editable:true,onError:(error:Error)=>{throw error;},editorState:JSON.stringify(document)}}><FloatingTextSelectionToolbar boundaryRef={boundary} onRequestLink={()=>setStatus('Link requested for the current selection')}/><OnChangePlugin onChange={editorState=>setDocument(editorState.toJSON())}/><RichTextPlugin ErrorBoundary={LexicalErrorBoundary} contentEditable={<ContentEditable aria-label="Selection demonstration" style={{minHeight:240,padding:16}}/>} placeholder={null}/></LexicalComposer></div><Typography role="status">{status}</Typography><Typography variant="caption">Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.</Typography></Stack>
</ThemeScope>
</>
);
}
Select text in the integrated Lexical editor; Alt+F10 focuses its floating formatting actions.
Building a thoughtful learning experience
Ready
Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { FloatingTextSelectionToolbar } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { useRef } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
export default function FloatingTextSelectionToolbarExample() {
const boundary = useRef<HTMLDivElement>(null);
const [status,setStatus] = useState("Ready");
const [document,setDocument] = useState<unknown>({"root":{"type":"root","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","detail":0,"format":0,"mode":"normal","style":""}]},{"type":"paragraph","version":1,"direction":null,"format":"","indent":0,"children":[{"type":"text","version":1,"text":"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.","detail":0,"format":0,"mode":"normal","style":""}]}]}});
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Typography>{"Building a thoughtful learning experience"}</Typography><div ref={boundary} style={{height:280,maxWidth:640,overflow:'auto',position:'relative'}}><LexicalComposer initialConfig={{namespace:'floating-example',editable:false,onError:(error:Error)=>{throw error;},editorState:JSON.stringify(document)}}><FloatingTextSelectionToolbar boundaryRef={boundary} onRequestLink={()=>setStatus('Link requested for the current selection')}/><OnChangePlugin onChange={editorState=>setDocument(editorState.toJSON())}/><RichTextPlugin ErrorBoundary={LexicalErrorBoundary} contentEditable={<ContentEditable aria-label="Selection demonstration" style={{minHeight:240,padding:16}}/>} placeholder={null}/></LexicalComposer></div><Typography role="status">{status}</Typography><Typography variant="caption">Select text, then press Alt+F10 to focus formatting. Escape returns to the editor. The host supplies Lexical context and document scrolling.</Typography></Stack>
</ThemeScope>
</>
);
}