Composition / foldkit-builder

Sixty seconds

ts
import { Builder } from 'foldkit-builder'

const PageBuilder = Builder.make('PageBuilder', {
  catalog: Site,
  renderer: SiteRenderer,
  // What a new node of each Block starts with. The insert panel offers exactly these.
  starters: { Section: {}, Heading: { text: 'New heading' } },
})

const PageForm = Form.make('PageForm', PageInput, {
  inputs: { document: PageBuilder.input },
})
  • Builder.make builds a Bundle (PageBuilder.bundle) and the form control that places it as a key (PageBuilder.input). Nothing runs until it is placed.
  • In the form, PageForm.control('document').field(model).value is the Builder's Model. Its page is an undo history whose present is the Document; PageBuilder.document(model) reads it.
  • Its view is a plain editor: a palette of the Blocks with starting props, the layers with move, duplicate and delete for the selected node, the selected node's text props, undo and redo, and the page drawn in edit mode. foldkit-mixins-form draws it with the rest of the form. For the full editor, PageBuilder.inputWith(BuilderView.submodel(view)) is the same control drawn by foldkit-mixins-builder.