Editor

A structured document editor with formatting, tables, references and host-owned services.

Document editor

A full document editor with persistent formatting controls.

Code

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

<ui-editor
  label="Article body"
  toolbar-mode="sticky"
  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;Select words to format them, or type / to insert a block.&quot;}]}]}"
></ui-editor>

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

<template>
  <UiEditor
    label="Article body"
    toolbar-mode="sticky"
    :content="{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Select words to format them, or type / to insert a block.' }] }] }"
  />
</template>

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

export default function Example() {
  return <UiEditor
    label="Article body"
    toolbarMode="sticky"
    content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Select words to format them, or type / to insert a block."}]}]}}
  />;
}

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

export default function Example() {
  return <UiEditor
    label="Article body"
    toolbarMode="sticky"
    content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Select words to format them, or type / to insert a block."}]}]}}
  />;
}

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

<UiEditor
  label="Article body"
  toolbarMode="sticky"
  content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Select words to format them, or type / to insert a block."}]}]}}
/>

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

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiEditor],
  template: `
    <div
      ui-editor
      [label]="'Article body'"
      [toolbarMode]="'sticky'"
      [content]="{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Select words to format them, or type / to insert a block.' }] }] }"
    ></div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: div

Attributes

Name	Description	Property	Type	Default	Allowed values
`compact-toolbar`	Keep frequent inline controls visible and put the full inventory behind Format.	`compactToolbar`	`boolean`	`false`	`—`
`content`	The controlled Tiptap document. A change reports the updated content.	`content`	`object` `type`: `string` (required)	`{ type: 'doc', content: [{ type: 'paragraph' }] }`	`—`
`content-density`	Choose the padding and minimum height of read-only documents.	`contentDensity`	`keyword`	`comfortable`	`comfortable, compact`
`disable-highlight`	Disable authoring new highlights while retaining saved highlights.	`disableHighlight`	`boolean`	`false`	`—`
`editable`	Allow authoring. Read-only documents can still expose passage actions.	`editable`	`boolean`	`true`	`—`
`label`	Accessible name of the textbox.	`label`	`string`	`Document`	`—`
`link-base-url`	Origin used for newly inserted relative links.	`linkBaseUrl`	`string`		`—`
`link-target-label`	The name of a searchable link destination.	`linkTargetLabel`	`string`	`Item`	`—`
`mention-items`	Default mention choices when nobody answers mention-query.	`mentionItems`	`list(object)` `[].id`: `string` (required) `[].label`: `string` (required) `[].detail`: `string` `[].initials`: `string`	`[]`	`—`
`mention-limit`	Maximum number of mention suggestions.	`mentionLimit`	`integer`	`8`	`—`
`placeholder`	The empty document's writing prompt.	`placeholder`	`string`	`Type “/” for commands, or start writing…`	`—`
`range-actions`	Application caret actions with host-owned durable ranges.	`rangeActions`	`list(object)` `[].id`: `string` (required) `[].label`: `string` (required) `[].from`: `integer` (required) `[].to`: `integer` (required)	`[]`	`—`
`references`	Cached reference display values. Replacing this map refreshes labels without editing content.	`references`	`object`	`—`	`—`
`selection-actions`	Application actions available for a selected passage.	`selectionActions`	`list(object)` `[].id`: `string` (required) `[].label`: `string` (required)	`[]`	`—`
`toolbar-mode`	Where formatting controls appear.	`toolbarMode`	`keyword`	`bubble`	`bubble, sticky, popover, contextual`
`toolbar-open`	Controlled popover toolbar visibility.	`toolbarOpen`	`boolean`	`false`	`—`
`toolbar-trigger-id`	External trigger for popover mode.	`toolbarTriggerId`	`string`		`—`

Framework props

Name	Type	Default	Allowed values
`compactToolbar`	`boolean`	`false`	`—`
`content`	`{ readonly type: string; readonly [name: string]: unknown }` `type`: `string` (required)	`{ type: 'doc', content: [{ type: 'paragraph' }] }`	`—`
`contentDensity`	`"comfortable" \| "compact"`	`comfortable`	`comfortable, compact`
`disableHighlight`	`boolean`	`false`	`—`
`editable`	`boolean`	`true`	`—`
`label`	`string`	`Document`	`—`
`linkBaseUrl`	`string`		`—`
`linkTargetLabel`	`string`	`Item`	`—`
`mentionItems`	`readonly ({ readonly id: string; readonly label: string; readonly detail?: string \| null; readonly initials?: string \| null })[]` `[].id`: `string` (required) `[].label`: `string` (required) `[].detail`: `string` `[].initials`: `string`	`[]`	`—`
`mentionLimit`	`number`	`8`	`—`
`placeholder`	`string`	`Type “/” for commands, or start writing…`	`—`
`rangeActions`	`readonly ({ readonly id: string; readonly label: string; readonly from: number; readonly to: number })[]` `[].id`: `string` (required) `[].label`: `string` (required) `[].from`: `integer` (required) `[].to`: `integer` (required)	`[]`	`—`
`references`	`{ readonly [name: string]: unknown }`	`—`	`—`
`selectionActions`	`readonly ({ readonly id: string; readonly label: string })[]` `[].id`: `string` (required) `[].label`: `string` (required)	`[]`	`—`
`toolbarMode`	`"bubble" \| "sticky" \| "popover" \| "contextual"`	`bubble`	`bubble, sticky, popover, contextual`
`toolbarOpen`	`boolean`	`false`	`—`
`toolbarTriggerId`	`string`		`—`

Events

Name	Detail	Description
`change`	`object` `content`: `object` (required) `content.type`: `string` (required)	Emitted when a toggleable control changes checked state.
`image-activate`	`object` `src`: `string` (required) `trigger`: `keyword` (required)	Emitted with the declared detail payload.
`image-rendition-error`	`object` `src`: `string` (required) `trigger`: `keyword` (required)	Emitted with the declared detail payload.
`range-action`	`object({ id: string, ranges: list(object({ from: integer, to: integer })) })`	Emitted with the declared detail payload.
`selection-action`	`object({ id: string, from: integer, to: integer, text: string, before: string, after: string })`	Emitted with the declared detail payload.
`toolbar-close`	`object({ ... })`	Emitted with the declared detail payload.
`toolbar-open`	`object({ ... })`	Emitted with the declared detail payload.
`upload-error`	`object` `error`: `unknown` (required) `file`: `unknown` (required)	Emitted with the declared detail payload.

Slots

Name	Purpose
`fallback`	Named content for the fallback region.

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.