Editable Content

<sl-editable-content> | SlEditableContent
Since 2.0 experimental

A component that allows its content to be edited.

<sl-editable-content>
</sl-editable-content>

Examples

Labels

Labels are shown stacked.

<sl-editable-content label="Here is my label">
</sl-editable-content>

Hiding border except on hover / focus

no-border styled editable content should be used where you want the boundaries of the content to align with other content, rather than the border of the component aligning. 

<sl-editable-content no-border label="No border editor" toolbar>
</sl-editable-content>

Show empty state when empty 

<sl-editable-content show-empty-state toolbar>
</sl-editable-content>

Read only with empty state 

<sl-editable-content show-empty-state toolbar readonly>
</sl-editable-content>

Toolbar 

<sl-editable-content no-border show-empty-state label="Editor with toolbar" toolbar>
</sl-editable-content>

Toolbar suffix

Use the toolbar-suffix slot to add specific actions

Insert… 
<sl-editable-content id="suffix-test" label="Editor with toolbar and a suffix action" toolbar>
  <sl-dropdown slot="toolbar-suffix">
    <sl-icon-button caret size="small" slot="trigger" name="image">Insert...</sl-icon-button>
    <sl-menu>
      <sl-menu-item id="insert-logo">Insert logo</sl-menu-item>
    </sl-menu>
  </sl-dropdown>
</sl-editable-content>

<script>
  document
    .querySelector("#insert-logo")
    .addEventListener("click", () => document.querySelector("#suffix-test").insertImageAtCursor("/assets/images/hub24.svg"));
</script>

Inserting images

Use the insertImageAtCursor method to insert an image. See the “Suffix” example above for an example.

Maximum image size

By default, the maximum allowed image that can be pasted or dragged in is 300kB. This can be overridden using the max-image-size attribute (in kB). The error message shown when the limit is exceeded can be set using max-image-size-message. 

<sl-editable-content label="Small max image size with message" max-image-size='10' max-image-size-message='Only really, really small images are allowed here!'>
</sl-editable-content>

Image upload

To keep the content size sensible, you can provide a URL to upload images to a server and replace with a URL src.

Use the image-upload-url attribute to provide the target. The component will make a POST request to this URL, with content as follows: 

{
  "name": "My image description",
  "fileName": "image1.jpg",
  "mimeType": "image/jpeg",
  "content": "data:base64......"
}

The server must response with a HTTP 201 (Created) response, with the Location header set to the URI of the created image.

Setting initial height

Editable content is 200px high by default. Use the --editable-content-height variable to set the initial height. 

<sl-editable-content label="Taller content" style="--editable-content-height: 300px">
</sl-editable-content>

Fixed size

Editable content is resizable vertically by default. Use the fixed-size attribute to turn this off. 

<sl-editable-content label="Fixed size" fixed-size style="--editable-content-height: 150px">
</sl-editable-content>

Auto size

Applying the ‘auto-size’ attribute will allow content area to adjust as it is edited.

<sl-editable-content label="Auto size" auto-size>
</sl-editable-content>

Auto size with minimum height

Applying the ‘min-size’ attribute will allow content area to adjust as it is edited, but will have a minimum height that is set to the --editable-content-height variable. 

<sl-editable-content label="Auto size with minimum height" min-size>
</sl-editable-content>

[component-metadata:sl-editable-content]

Slots

Name Description
(default) The default slot.
toolbar-suffix A slot to allow other actions to be inserted, for example, inserting an image.

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The value of the editable content - -
readonly Read only boolean false
minSize
min-size 		Minimum size boolean false
fixedSize
fixed-size 		Fixed size boolean false
autoSize
auto-size 		Auto size boolean false
label Label string ''
showToolbar
toolbar 		Show toolbar boolean false
maxImageSizeKB
max-image-size 		Maximum image size in kB number 300
maxImageSizeMessage
max-image-size-message 		Message to show if maximum image size is exceeded string -
imageUploadUrl
image-upload-url 		Image upload URL string ''
showEmptyState
show-empty-state 		Show empty state boolean false
noBorder
no-border 		No border except when hovered or focussed boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-change When the content has been changed -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.
toolbar The toolbar area.
editable-content The editable content area.

Learn more about customizing CSS parts.