@quario/editor

The banded document designer. It takes your quario() instance as a property and reports the edited definition on every change. Its design surface is the same layout the viewer paints. It sits on @quario/landing, the package the two surface elements share, which a host never imports.

Registering the element

const TAG: 'quario-editor'

Import @quario/editor/register to define the element, or import QuarioEditor and define it yourself.

QuarioEditor

A LitElement. Set properties as element properties, not attributes.

get renderComplete(): Promise<boolean>
boxes(path: string): DOMRect[]

Since 0.8.0 the element returns every hit box the render reported for path, in document order, as client rectangles. It returns boxes for every page, whether or not that page has an element yet. Use it to anchor your own UI to a node, such as a badge, a comment marker, or a step in a tour. Await renderComplete first.

The array is empty for a node that drew nothing, for a group, and for a path the schema doesn’t have. It’s empty before any render lands.

Styling the surface

Chrome styles live on --qe-* custom properties under qe-* class names. The tokens are the theming surface. The class names are a reference seam, not a frozen vocabulary, and 0.8.0 renames four of them. If you style the design surface directly, rename as follows.

0.8.0 drops .qe-box. No element represents a hit box any more, so call boxes(path) to find where the render drew a node. The --qe-* tokens, .qe-peek and .qe-lifted stay as they were.

0.10.0 adds --qe-icon-active and --qe-active, matching the viewer’s --qv-icon-active and --qv-active.

Events

interface QuarioEditorEventMap {
  change: CustomEvent<EditorChangeDetail>
  error: CustomEvent<EditorErrorDetail>
}

interface EditorChangeDetail {
  schema: ReportSchema
  problems: readonly Problem[]
  warnings: readonly Warning[]
}

interface EditorErrorDetail {
  error: unknown
  kind: 'mount-render' | 'update-render' | 'host-option'
}

Every change carries the edited definition alongside the problems and the warnings the same traversal found. Nothing that gates on problems should gate on warnings: a document carrying only warnings compiles and renders.

Types

type EditorPage = LayoutPage
type EditorFonts = LayoutFonts

EditorStrings

Every key is optional, and a key left out stays English, as in the viewer’s ViewerStrings. The record doesn’t reach the Issues list, an error’s own message, the marking, or the schema’s field names.

The other keys take a string.