Compact Editor

A short rich-text field with inline formatting, native shortcuts and controlled document changes.

Short rich-text field

A short field with inline formatting through native shortcuts and Markdown.

A short message with emphasis

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-compact-editor/ui-compact-editor.html"
>

<ui-compact-editor
  label="Message"
  content="{&quot;type&quot;:&quot;doc&quot;,&quot;content&quot;:[{&quot;type&quot;:&quot;paragraph&quot;,&quot;content&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;A short message with &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;emphasis&quot;,&quot;marks&quot;:[{&quot;type&quot;:&quot;italic&quot;}]}]}]}"
></ui-compact-editor>

<script setup>
  import { UiCompactEditor } from "@threadlabs/looma";
</script>

<template>
  <UiCompactEditor
    label="Message"
    :content="{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'A short message with ' }, { type: 'text', text: 'emphasis', marks: [{ type: 'italic' }] }] }] }"
  />
</template>

import { UiCompactEditor } from "@threadlabs/looma";

export default function Example() {
  return <UiCompactEditor
    label="Message"
    content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A short message with "},{"type":"text","text":"emphasis","marks":[{"type":"italic"}]}]}]}}
  />;
}

/** @jsxImportSource preact */
import { UiCompactEditor } from "@threadlabs/looma";

export default function Example() {
  return <UiCompactEditor
    label="Message"
    content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A short message with "},{"type":"text","text":"emphasis","marks":[{"type":"italic"}]}]}]}}
  />;
}

<script>
  import { UiCompactEditor } from "@threadlabs/looma";
</script>

<UiCompactEditor
  label="Message"
  content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A short message with "},{"type":"text","text":"emphasis","marks":[{"type":"italic"}]}]}]}}
/>

import { Component } from "@angular/core";
import { UiCompactEditor } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCompactEditor],
  template: `
    <div
      ui-compact-editor
      [label]="'Message'"
      [content]="{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'A short message with ' }, { type: 'text', text: 'emphasis', marks: [{ type: 'italic' }] }] }] }"
    ></div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: div

Attributes

Name	Description	Property	Type	Default	Allowed values
`content`	The controlled short rich-text document.	`content`	`object` `type`: `string` (required)	`{ type: 'doc', content: [{ type: 'paragraph' }] }`	`—`
`editable`	Allow editing the short rich-text document.	`editable`	`boolean`	`true`	`—`
`id`	ID of the native textbox, including for a native commandfor invoker.	`id`	`string`		`—`
`label`	Accessible name of the textbox.	`label`	`string`	`Message`	`—`

Framework props

Name	Type	Default	Allowed values
`content`	`{ readonly type: string; readonly [name: string]: unknown }` `type`: `string` (required)	`{ type: 'doc', content: [{ type: 'paragraph' }] }`	`—`
`editable`	`boolean`	`true`	`—`
`id`	`string`		`—`
`label`	`string`	`Message`	`—`

Events

Name	Detail	Description
`change`	`object` `content`: `object` (required) `content.type`: `string` (required)	Emitted when a toggleable control changes checked state.

Slots

No slots.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

No shared tokens.