resolveEditable()

resolveEditable(editable, [args], [{ targetKey, field }]);

Composes a usage's keys, and the attributes that render them.

React

export function Headline(props) {
	const { attrs } = resolveEditable(editable, props, { targetKey: useTargetKey() });

	return <h1 {...attrs}>{props.children}</h1>;
}

Plain JS

export function headline(options, targetKey) {
	const { attrs } = resolveEditable(editable, options, { targetKey });

	return `<h1 ${toAttributeString(attrs)}>${options.text}</h1>`;
}

Arguments

Argument	Type	Description
editable	Object	What defineEditableSource() returned.
args	Object	The usage's arguments: props, constructor options, or whatever the render function was called with.
options.targetKey	String	Fills {targetKey}. Required where a key uses it.
options.field	String	Which field, where the declaration names several.

A key with no placeholders needs neither: resolveEditable(editable).

Returns

// Headline declares everyone: { key: "{targetKey}-{id}-{instance}" },
// personal: { when: prop("hasPersonalChannel"), key: "{targetKey}-{id}-{instance}" }
resolveEditable(
	editable,
	{ id: "title", hasPersonalChannel: true },
	{ targetKey: "plans" },
);

{
	type: "text",
	keys: { everyone: "plans-title-{instance}", personal: "plans-title-{instance}" },
	ids: { everyone: "title", personal: "title" },
	attrs: {
		"data-companywide-editable": "plans-title",
		"data-editable": "plans-title",
	},
	description: undefined,
}

{instance} stays in keys exactly like this. The slide fills it in once it renders, from wherever it is placed - see {instance}.

Every attribute carries the field's name instead, with no {instance} in it. That is what reads the field back later, and no CSS selector accepts a brace. What ends up in the page is this:

<h1 data-companywide-editable="plans-title" data-editable="plans-title">Plans that grow with you</h1>

type

The field's type, after prop() is read.

keys

The key for each channel the usage uses. Hand these to a component that stores through its own API rather than through markup.

ids

The id behind each key.

attrs

The attributes to spread onto the element. Render these where the component renders its own element.

Type	everyone	personal
text, richtext	data-companywide-editable	data-editable
image	data-companywide-dynamic-image	data-dynamic-image
video	data-companywide-youtube-player

A toolbar adds data-toolbar.

description

What the field is for. Never rendered.