Designer composable

useEditorSession

Beta

One document, one selection and one undo history for every part of an editor.

What it does

A session holds a workspace of Vue or HTML files and the artboards that show them. Each file is an editor document: a flat map of nodes by id. Nothing edits the document directly. Every change is an operation with an inverse, applied through run, so undo works for every part of the editor. The stage, the layers, the code panel and in-place text editing all take the same session, so they always show the same tree.

Use it

vue

import { createWorkspace, useEditorSession } from '@getdom/studio/designer';

const session = useEditorSession({
	workspace: createWorkspace([{ name: 'Page.vue', source }]),
	onChange: () => save(session.workspace.value),
});
const { selected, doc, onFile, run, undo, redo } = session;

// Every edit is an operation; this is one undo step.
run(onFile({ op: 'setProp', id: selected.value, key: 'class', value: 'text-2xl' }));

// Continuous input, such as typing or dragging, merges into one step.
run(onFile({ op: 'setText', id: textId, value }), { merge: `text:${textId}` });

API

Options

Name	Type	Default	Description
workspace	DesignerWorkspace	—	The files and artboards to start with, such as createWorkspace(sources) or a saved workspace.
onChange	() => void	—	Called after every change, undo and redo. Save or recompile styles here.
afterChange	() => void	—	Called after run, undo and redo, once the selection has been checked. Re-measure the stage here.
onError	(message) => void	—	An operation that could not apply. Nothing is changed when one fails.

Returns

Name	Type	Default	Description
workspace	Ref<DesignerWorkspace>	—	Files and artboards. Change them only through run.
activeArtboardId	Ref<string>	—	The artboard being worked on; its file is the active file.
selected	Ref<string>	—	Id of the selected node, the one the inspector edits. Bind it to a stage, the layers and the inspector.
selection	Ref<string[]>	—	Every selected id when several are chosen. Bind it as v-model:selection on the stage and v-model:values on the layers for Shift-click. Setting selected to a node outside it starts a new selection.
selectedIds	ComputedRef<string[]>	—	Every selected id, the primary one included, without ids that no longer exist.
artboards, activeArtboard	ComputedRef	—	All artboards, and the active one.
activeFile, doc	ComputedRef	—	The active file and its document: a flat map of nodes by id.
active, parent	ComputedRef	—	The selected node and its parent.
run(operations, options?)	function	—	Applies operations as one undo step. With { merge: key }, steps with the same key in quick succession become one.
undo(), redo()	function	—	Step through the history.
historySize	Ref<{ undo, redo }>	—	How many steps there are, for enabling buttons.
history	EditorHistory	—	The history itself; seal() ends a merge so the next change is a new step.
onFile(operation)	function	—	Tags a document operation with the active file.
fileById(id)	function	—	Finds a file in the workspace.

Document operations

Name	Type	Default	Description
setProp	{ id, key, value }	—	Sets an attribute or component prop.
setText	{ id, value }	—	Sets a text run.
setField	{ id, key, value }	—	Sets another node field: style, layout, placements, label, locked, hidden.
insert, remove, move	{ parent, index, fragment } …	—	Changes the tree. Fragments come from fromTree or copySubtree.
setFile, setArtboard	{ id, key, value }	—	Workspace operations, without onFile: a file’s source or name, an artboard’s size or place.

useCodeSync and useInlineText take a session. All composables →

Scheduler

Application

Primitives

Get started