Livingdoc Model

A Livingdoc represents a Livingdocs document. It consists of a componentTree and can have one or more views.

Anchor Link to SectionExamples

Anchor Link to SectionCreate a new livingdoc

const doc = require('@livingdocs/framework')

doc.design.load(jsonSerializedDesign)

const livingdoc = doc.create({
  design: {
    name: 'bootstrap',
    version: '1.0.0'
  }
})
Copy

Anchor Link to SectionCreate views

Simply render a livingdoc into your current page:

livingdoc.appendTo('.article-container', {interactive: false})
Copy

Create multiple views in iframes:

const interactiveView = livingdoc.createView('.editor-section', {interactive: true})
const preview = livingdoc.createView('.editor-preview')
Copy

With the iframe technique you can isolate CSS or Javascript that is needed in your documents and also generate views that will work properly with responsive designs. There can only be one interactive view where the user can edit, but you can have as many readOnly views as you want to preview the content at different screen sizes at the same time.

Anchor Link to SectionProperties

Anchor Link to SectioncomponentTree

A componentTree instance. Here you can manipulate your document.

Anchor Link to Sectiondesign

The Design used in this livingdoc.

Anchor Link to Sectionviews

An array of all views associated with this livingdoc.

Anchor Link to SectioninteractiveView

The interactiveView associated with this livingdoc if you created one.

Anchor Link to SectionMethods

Anchor Link to SectioncreateComponent()

// Create a component
const titleComponent = livingdoc.createComponent('title')
const componentTree = livingdoc.componentTree
componentTree.append(titleComponent)
Copy

Anchor Link to SectiontoJson()

With toJson() you can serialize a Livingdoc to a JSON string. To get a JSON object instead of a string, you can call serialize() instead of toJson().

Here you see a serialized version of a livingdoc in JSON. This is an example document that uses the ‘ghibli’ design and consists of three components: A cover, a title and a lead.

{
  "content": [
    {
      "id": "doc-18fsfqsiq0",
      "component": "cover",
      "content": {}
    },
    {
      "id": "doc-18fsfr5f50",
      "component": "title",
      "content": {
        "title": "Storytellers have more fun"
      }
    },
    {
      "id": "doc-18fsfra8r0",
      "component": "lead",
      "content": {
        "text": "Yet, if we look at the interesting people in our lives, I think we’ll find few of them have climbed Mount Everest or broken a wild mustang. Most have never wrestled an alligator or gotten embroiled in a covert operation. Most haven’t seen a whole lot of real excitement."
      }
    }
  ]
}
Copy

Anchor Link to SectionManage Dependencies

// add js
livingdoc.addJsDependency({src: 'url'})
livingdoc.addJsDependency({code: 'inline js'})

// add css
livingdoc.addCssDependency({src: 'url'})
livingdoc.addCssDependency({code: 'inline css'})

// use namespaces
livingdoc.addJsDependency({src: 'url', namespace: 'embeds.twitter'})

// Access the dependencies collection directly:
const dependencies = livingdoc.dependencies

// Transform to JSON object
dependencies.serialize()

// Get namespaces (Array of String)
dependencies.getNamespaces()

// Get all dependencies of a namespace
dependencies.getNamespace('embeds.twitter')

// Get an HTML string to include in a published document or to
// Add to a document on the server side.
dependencies.printJs()
dependencies.printCss()
Copy

Anchor Link to SectionExposed Modules

For reuse in the editor these modules are exposed on doc: doc.JsLoader and doc.CssLoader

Anchor Link to SectionExample

const jsLoader = new doc.JsLoader({window: iframe.contentWindow})
jsLoader.loadSingleUrl(url, callback)
jsLoader.loadInlineScript(url, callback)
Copy