DOM Studio

Designer composable

useInlineText

Beta

Double-click text on the stage and edit it where it is, with marks, as one undo step.

What it does

The double-clicked text element becomes editable in place. The document stays the model. The browser’s editing only tells the editor what you mean:

  • Typing inside a word is left to the browser.
  • Everything that changes structure is made on the rich text model, and the element is drawn again from it. That covers marks, line breaks, paste and deletes across elements.

Browsers write formatting their own way, such as styled spans or <b>. This way, a mark always comes out as <strong>, <em>, <u> or <s>, the same as in the code panel. Text runs keep their ids, so the file keeps its formatting.

Text bound to data ({{ item.title }}) and elements that mix text with components are not edited this way. Use the Data panel and the inspector for those.

Use it

vue
<script setup>
import { DomDesignerStage } from '@getdom/studio/vue';
import { DomEditorRender, useEditorSession, useInlineText } from '@getdom/studio/designer';

const session = useEditorSession({ workspace });
const { selected, doc, activeArtboard } = session;
const inline = useInlineText({ session, notify: (message) => toast(message) });
const { editing, editState, revisions } = inline;
</script>

<template>
	<DomDesignerStage v-model="selected" :editing="editing?.id || ''" @edit-text="inline.start(activeArtboard, $event)">
		<DomEditorRender :doc="doc" :types="types" :revisions="revisions" />
	</DomDesignerStage>
	<DomTypographyEditor v-model="textStyle" :marks="editing ? editState.marks : null" @mark="inline.toggle" />
</template>

API

Options

NameTypeDefaultDescription
sessionEditorSession—The session the edited text is written to.
view() => string—What is on screen; when it changes (another artboard or view), the edit ends.
notify(message) => void—Says why some text cannot be edited in place, such as text bound to data.

Returns

NameTypeDefaultDescription
start(artboard, event)function—Starts editing from a stage’s edit-text event (a double-click). The nearest text element is edited, so double-clicking a bold word edits its paragraph.
finish()function—Ends the edit and writes it to the document as one undo step. Enter, Escape and selecting something else also end it.
toggle(mark)function—Bold, italic, underline or strike on the selected words; at a caret, for the next text typed.
editingShallowRef—The edit in progress, { board, file, id }, or null. Pass its id to the stage’s editing prop.
editStateRef—Where the selection falls, and its marks for a Text panel.
editDocShallowRef—The document as the edit would save it; useCodeSync shows it while you type.
revisionsRef<Record<string, number>>—Finished edits per layer. Pass to DomEditorRender so edited elements are drawn afresh.

Keys and edits (type: who makes the edit)

NameTypeDefaultDescription
Typingbrowser—Left to the browser inside a word, so input methods (Chinese, Japanese, Korean), spellcheck, autocorrect and phone keyboards work as usual.
⌘/Ctrl B, I, Umodel—Toggle a mark on the selection, or for the next text typed at a caret.
Shift+Entermodel—A line break (<br>) that keeps the marks around it.
Paste, cut, dropmodel—Plain text only, so no foreign markup reaches the file.
Delete, type over a selectionmodel—Across elements, made on the model. Typing takes the marks of the text before it.
⌘/Ctrl Z, ⇧⌘Zmodel—Undo and redo inside the edit; after it ends, the session’s history has it as one step.
Enter, Escape—End the edit.

Related

Pass it to useCodeSync to see the text in the code as it is typed. All composables →