Designer composable

useCodeSync and DomCodePanel

Beta

The Vue source of the document, edited both ways and kept in step with the stage.

What it does

The code is exported from the same tree the stage renders, with each node’s lines and character offsets. Typing in the code is parsed back into that tree, so the stage, the layers and the inspector follow. Selections follow each other too:

a line in the code selects its element
a selected element highlights its lines
letters selected in the code are highlighted on the stage
an in-place text edit moves the code’s caret as you type

Code sync is optional. An editor without it leaves it out.

Use it

vue

<script setup>
import { ref } from 'vue';
import { DomCodePanel, DomMonacoCodeView, useCodeSync, useEditorSession, useInlineText } from '@getdom/studio/designer';

const session = useEditorSession({ workspace });
const inline = useInlineText({ session });
const stage = ref(null);
const codeSync = useCodeSync({
	session,
	inline,
	// Where a node is rendered, to highlight letters selected in the code.
	element: (id) => stage.value?.$el.querySelector(`[data-designer-id="${id}"]`),
});
</script>

<template>
	<DomCodePanel :sync="codeSync" label="Page.vue source" />
	<!-- Or with Monaco: :editor="DomMonacoCodeView" :editor-props="{ load }" -->
</template>

DomCodePanel is the code and its parse messages; put a header or actions around it as your app needs. Any code view that has these props and events works too:

vue

<MyCodeView
	:model-value="codeSync.text.value"
	:highlight="codeSync.highlight.value"
	@update:model-value="codeSync.edit"
	@cursor="codeSync.selectLine"
	@select="codeSync.selectText"
	@focus="codeSync.enter"
	@blur="codeSync.leave"
/>

API

Options

Name	Type	Default	Description
session	EditorSession	—	The session whose active file the code shows.
inline	InlineText	null	In-place text editing. Text typed on the stage shows in the code as it is typed, with the caret.
element	(id) => Element	—	A node’s rendered element, to highlight letters selected in the code.
isStudioComponent	(tag) => boolean	() => false	Tags that get an import line in new files.
open	Ref<boolean>	ref(true)	Whether the code is shown; closing it drops a typed draft.

Returns

Name	Type	Default	Description
text	ComputedRef<string>	—	What the code view shows: the typed draft, else the exported source.
source	ComputedRef<string>	—	The exported source of the active file, for Copy, Download or Save.
highlight	ComputedRef	—	The selected node’s lines, with the caret and selection of an in-place edit.
error, warning	Ref<string>	—	Why typed code does not parse, or what was left out of it.
marks	ComputedRef	—	Which marks the text selected in the code has, for B/I/U/S toggles; null when no text is selected.
edit(value)	function	—	Typing: kept as a draft and parsed into the document after a pause. Ids survive where the structure matches.
apply()	function	—	Parses the draft now.
selectLine(line)	function	—	Selects the element on a one-based line.
selectText({ start, end })	function	—	The code’s selection as source offsets, highlighted on the stage.
mark(name)	function	—	Bold, italic, underline or strike on the text selected in the code, made the same way as on the stage.
enter(), leave()	function	—	Focus and blur: entering ends an in-place edit, leaving applies the draft.
reset(), forgetMarks()	function	—	Drop the draft; forget the code’s text selection.

DomCodePanel props

Name	Type	Default	Description
sync	CodeSync	—	What useCodeSync returns.
editor	Component	DomCodeView	A code view such as DomMonacoCodeView.
editorProps	object	{}	Props for the editor, such as Monaco’s load.
label	string	Source	Accessible name of the code.

Marks use the rich text model, the same as useInlineText. All composables →

Scheduler

Application

Primitives

Get started