'%20d='M64%205c-3%2018-15%2026-13%2043-9-5-13-13-13-22C20%2043%2015%2062%2022%2082c7%2022%2023%2037%2042%2041%2022-4%2039-21%2043-43%203-17-3-32-18-45%202%2011%200%2018-6%2025C84%2036%2075%2019%2064%205Z'%20/%3e%3cpath%20fill='url(%23heat)'%20d='M64%2045c-2%2015-14%2022-13%2038-5-4-8-9-9-15-7%2010-8%2020-4%2030%205%2012%2014%2020%2026%2023%2013-3%2023-12%2027-25%203-11%200-20-8-29%200%207-2%2012-6%2016%201-16-5-27-13-38Z'%20/%3e%3c!--%20The%20glasses%20render%20as%20two%20stacked%20stroke%20groups:%20a%20pale%20warm%20casing%20under%20a%20dark%20warm-charcoal%20stroke.%20The%20casing%20keeps%20the%20dark%20strokes%20legible%20where%20they%20leave%20the%20flame%20body%20(temple%20tips,%20lower%20rims)%20on%20dark%20backgrounds,%20and%20reads%20as%20a%20rim%20light%20against%20the%20flame%20on%20light%20ones.%20--%3e%3cg%20fill='none'%20stroke='%23ffe3ae'%20stroke-opacity='0.85'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='14'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3cpath%20stroke-width='13'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3cg%20fill='none'%20stroke='%2333221b'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='8'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3cpath%20stroke-width='7'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Content · Components
ContentBodyEditor
No summary has been written for ContentBodyEditor. Everything below is generated from the declaration shipped in 0.57.40 and describes the real contract.Public export
typescript
import { ContentBodyEditor } from '@happyvertical/smrt-content/svelte';- Import path
@happyvertical/smrt-content/svelte- Props
- 19
- Props described
- 19 of 19
- Bindable state
- 0
- Callback events
- 7
- Verified release
- 0.57.40
Props
NameTypeRequiredDescription
valuestringYesThe body content string being edited, in HTML or the configured format.formatContentBodyFormat | nullNoFormat of the body content: HTML, Markdown, or auto-detected.showFormatPickerbooleanNoShow the "Save as" HTML/Markdown picker in the toolbar. Off by default: the storage format is a technical choice most editors should not face, so hosts opt in for technical users. The body keeps its `format` either way.placeholderstringNoPlaceholder text shown when the editor is empty.idstringNoDOM id of the editable surface (default `content-body-input`).namestringNoField name; also the control id agents address (default `body`).labelstringNoAccessible and agent-facing label (default "Story").selectedImageIndexnumberNoIndex of the currently selected image in the body, or -1 for none.onChange(change: ContentBodyEditorChange) => voidNoFired when the body content or embedded images change.onOpenImageChooser() => voidNoFired when the user clicks to open the image chooser.onSelectImage(index: number) => voidNoFired when the user selects an image within the body.onUseImageAsThumbnail(assetId: string) => voidNoFired when the user sets an image as the content thumbnail.mainImageAssetIdstring | nullNoAsset id of the current main picture (thumbnail). The selected image's "Use as main picture" button shows as pressed when it is this one.onResolveImage(selected: ImageLike | File | string) => Promise<unknown> | unknownNoResolves an image file, asset, or ID to a persisted image URL or object.imagePanelSnippetNoThe image panel (chooser/editor) the toolbar's image button opens. When provided it renders between the toolbar and the writing surface, sliding open above the text, and the image button reports `aria-expanded` / `aria-controls`. Without it the button only fires `onOpenImageChooser`.imagePanelOpenbooleanNoWhether the image panel is open (controlled by the parent).imagePanelLabelstringNoAccessible name of the image panel region (default "Pictures").onCloseImagePanel() => voidNoFired when the panel asks to close (Escape inside it).onRequestImageChange(request: ContentBodyImageChangeRequest) => voidNoThe person wants a picture changed. With it, a selected or hovered picture shows a "Change this picture" button, the picture toolbar gets one too, and pressing and holding a picture (about half a second, without moving; moving is still a drag) asks with `listen: true`. Without it none of these show.Bindable state
This component has no bindable public state.
Callback events
onChange(change: ContentBodyEditorChange) => voidonOpenImageChooser() => voidonSelectImage(index: number) => voidonUseImageAsThumbnail(assetId: string) => voidonResolveImage(selected: ImageLike | File | string) => Promise<unknown> | unknownonCloseImagePanel() => voidonRequestImageChange(request: ContentBodyImageChangeRequest) => void