Component documentation
SGUI / Development
A controlled rich-document editor with formatting, insertion and read-only presentation.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary.
A controlled rich-document editor with formatting, insertion and read-only presentation.
Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { PageRichTextEditorSection } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function PageRichTextEditorSectionExample() {
const [lexical,setLexical] = 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}><PageRichTextEditorSection editorKey="example-document" lexicalValue={lexical} onLexicalChange={setLexical} placeholder={"Building a thoughtful learning experience"} readOnly={false} toolPreset={"base"} aria-label="Example rich document"/><Typography variant="caption">{"Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary."}</Typography></Stack>
</ThemeScope>
</>
);
}
A controlled rich-document editor with formatting, insertion and read-only presentation.
Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { PageRichTextEditorSection } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function PageRichTextEditorSectionExample() {
const [lexical,setLexical] = 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}><PageRichTextEditorSection editorKey="example-document" lexicalValue={lexical} onLexicalChange={setLexical} placeholder={"Building a thoughtful learning experience"} readOnly={false} toolPreset={"base"} aria-label="Example rich document"/><Typography variant="caption">{"Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary."}</Typography></Stack>
</ThemeScope>
</>
);
}
A controlled rich-document editor with formatting, insertion and read-only presentation.
Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { PageRichTextEditorSection } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function PageRichTextEditorSectionExample() {
const [lexical,setLexical] = 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}><PageRichTextEditorSection editorKey="example-document" lexicalValue={lexical} onLexicalChange={setLexical} placeholder={"Building a thoughtful learning experience"} readOnly={false} toolPreset={"full"} aria-label="Example rich document"/><Typography variant="caption">{"Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary."}</Typography></Stack>
</ThemeScope>
</>
);
}
A controlled rich-document editor with formatting, insertion and read-only presentation.
Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { PageRichTextEditorSection } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function PageRichTextEditorSectionExample() {
const [lexical,setLexical] = 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}><PageRichTextEditorSection editorKey="example-document" lexicalValue={lexical} onLexicalChange={setLexical} placeholder={"Building a thoughtful learning experience"} readOnly={true} toolPreset={"full"} aria-label="Example rich document"/><Typography variant="caption">{"Changes update local JSON only. Image uploads require a durable host URL; the default preview is temporary."}</Typography></Stack>
</ThemeScope>
</>
);
}
Representative host-owned JSON contains headings, formatted text, a safe link, list, code, table and image. In the editable document, use Select table cells, then click the first and last cells to select a rectangle without dragging. Editing updates this example only; it does not persist. The host must serve /course-guide.svg or replace that image URL and metadata with its own asset.
'use client';
import { useState } from 'react';
import {PageRichTextEditorSection} from '@structured-growth/sg-ui/components';
export default function EditableCourseGuideExample() {
const [value,setValue]=useState<unknown>({"root":{"type":"root","version":1,"children":[{"type":"heading","version":1,"children":[{"type":"text","version":1,"text":"Design a meaningful learning activity","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"tag":"h2"},{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Begin with a clear goal. ","detail":0,"format":1,"mode":"normal","style":""},{"type":"text","version":1,"text":"Plan one activity that lets learners practice and reflect.","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0},{"type":"paragraph","version":1,"children":[{"type":"link","version":1,"children":[{"type":"text","version":1,"text":"Read the course planning guide","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"url":"https://example.com/course-guide","target":"_blank","rel":"noopener noreferrer","title":"Course planning guide"}],"direction":null,"format":"","indent":0},{"type":"list","version":1,"children":[{"type":"listitem","version":1,"children":[{"type":"text","version":1,"text":"Name the learning outcome","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"value":1},{"type":"listitem","version":1,"children":[{"type":"text","version":1,"text":"Choose evidence of progress","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"value":2},{"type":"listitem","version":1,"children":[{"type":"text","version":1,"text":"Plan feedback and reflection","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"value":3}],"direction":null,"format":"","indent":0,"listType":"number","start":1,"tag":"ol"},{"type":"code","version":1,"children":[{"type":"text","version":1,"text":"const nextStep = \"practice\";","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"language":"javascript"},{"type":"table","version":1,"children":[{"type":"tablerow","version":1,"children":[{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Activity","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":1},{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Duration","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":1}],"direction":null,"format":"","indent":0},{"type":"tablerow","version":1,"children":[{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Practice and reflect","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":0},{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"15 minutes","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":0}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0},{"type":"paragraph","version":1,"children":[{"type":"image","version":1,"src":"/course-guide.svg","altText":"Learning sequence: learn, practice, reflect","width":640,"height":240,"assetId":"course-guide","assetVersionId":"v1"}],"direction":null,"format":"","indent":0},{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Save your reflections before continuing to the next activity.","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0}});
return (
<>
<PageRichTextEditorSection lexicalValue={value} onLexicalChange={setValue} editorKey="saved-course-guide" aria-label="Saved course guide" readOnly={false} toolPreset="full" style={{height:480}} />
</>
);
}
Representative host-owned JSON contains headings, formatted text, a safe link, list, code, table and image. In the editable document, use Select table cells, then click the first and last cells to select a rectangle without dragging. Editing updates this example only; it does not persist. The host must serve /course-guide.svg or replace that image URL and metadata with its own asset.
'use client';
import { useState } from 'react';
import {PageRichTextEditorSection} from '@structured-growth/sg-ui/components';
export default function ReadOnlyCourseGuideExample() {
const [value,setValue]=useState<unknown>({"root":{"type":"root","version":1,"children":[{"type":"heading","version":1,"children":[{"type":"text","version":1,"text":"Design a meaningful learning activity","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"tag":"h2"},{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Begin with a clear goal. ","detail":0,"format":1,"mode":"normal","style":""},{"type":"text","version":1,"text":"Plan one activity that lets learners practice and reflect.","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0},{"type":"paragraph","version":1,"children":[{"type":"link","version":1,"children":[{"type":"text","version":1,"text":"Read the course planning guide","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"url":"https://example.com/course-guide","target":"_blank","rel":"noopener noreferrer","title":"Course planning guide"}],"direction":null,"format":"","indent":0},{"type":"list","version":1,"children":[{"type":"listitem","version":1,"children":[{"type":"text","version":1,"text":"Name the learning outcome","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"value":1},{"type":"listitem","version":1,"children":[{"type":"text","version":1,"text":"Choose evidence of progress","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"value":2},{"type":"listitem","version":1,"children":[{"type":"text","version":1,"text":"Plan feedback and reflection","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"value":3}],"direction":null,"format":"","indent":0,"listType":"number","start":1,"tag":"ol"},{"type":"code","version":1,"children":[{"type":"text","version":1,"text":"const nextStep = \"practice\";","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0,"language":"javascript"},{"type":"table","version":1,"children":[{"type":"tablerow","version":1,"children":[{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Activity","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":1},{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Duration","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":1}],"direction":null,"format":"","indent":0},{"type":"tablerow","version":1,"children":[{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Practice and reflect","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":0},{"type":"tablecell","version":1,"children":[{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"15 minutes","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0,"colSpan":1,"rowSpan":1,"headerState":0}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0},{"type":"paragraph","version":1,"children":[{"type":"image","version":1,"src":"/course-guide.svg","altText":"Learning sequence: learn, practice, reflect","width":640,"height":240,"assetId":"course-guide","assetVersionId":"v1"}],"direction":null,"format":"","indent":0},{"type":"paragraph","version":1,"children":[{"type":"text","version":1,"text":"Save your reflections before continuing to the next activity.","detail":0,"format":0,"mode":"normal","style":""}],"direction":null,"format":"","indent":0}],"direction":null,"format":"","indent":0}});
return (
<>
<PageRichTextEditorSection lexicalValue={value} onLexicalChange={setValue} editorKey="saved-course-guide" aria-label="Saved course guide" readOnly={true} toolPreset="full" style={{height:480}} />
</>
);
}
Choose Insert → Image. The local mock rejects its first upload, preserving the dialog for retry. A successful retry returns a predefined durable local asset instead of uploading the selected bytes. Serve /course-guide.svg for this sample. Production hosts own file transfer, access control, durable asset URLs/metadata, cancellation and storage; the editor ignores results after its document lifetime ends.
'use client';
import { useState } from 'react';
import {useRef} from 'react';
import {PageRichTextEditorSection} from '@structured-growth/sg-ui/components';
export default function HostImageUploadExample() {
const [value,setValue]=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":""}]}]}});
const attempted=useRef(false);
async function uploadImage(file:File) {
await new Promise(resolve=>setTimeout(resolve,350));
if(!attempted.current){attempted.current=true;throw new Error('Sample upload failed. Retry with the same file.');}
return {assetId:'course-guide',assetVersionId:'v1',src:"/course-guide.svg",altText:'Learning sequence: learn, practice, reflect',width:640,height:240};
}
return (
<>
<PageRichTextEditorSection lexicalValue={value} onLexicalChange={setValue} editorKey="host-upload-example" aria-label="Host image upload document" toolPreset="full" style={{height:420}} onUploadImage={uploadImage} />
</>
);
}