POM

POM Definition and basic Node library

To be used in WYSIWYM tools
- Skaryna editor
- Lackey CMS
Influenced by
- Carbon Editor model
- ProseMirror Editor model
Constrains
- Enforce clear copy structure, i.e. paragraphs can contain only inline formatting.
- Documents can be nested
- Allows components and extensions

Basic Model Schema

Represent various HTML/Markdown artifacts

Node

Extends Object

Field	Type	Required	Description
type	string	Y	Define node type
name	string	N	ID applied by editor for more efficient referencing. Doesn't have to be saved to DB
attrs	object	N	Object of key-value attributes

Naming Convention

type of lowercase represent semantic / html / markdown artifacts and core classes
type of Pascal-case represnet components

Block Node

Extends Node

Field	Type	Required	Description
items	array	Y	Contains nedsted nodes

Document

Extends BlockNode

Field	Value
type	`document`

JSON Example

{
  "type" : "document",
  "items" : [{
    "type" : "heading",
    "level" : 1,
    "text" : "Hello world"
  }, {
    "type" : "paragraph",
    "text" : "This is my lorem ipsum"
  }]
}

YAML Example

type: document
items:
  -
    type: heading
    level: 1
    text: Hello world
  -
    type: paragraph
    text: This is my lorem ipsum

Markdown Example

# Hello world
 
This is my lorem ipsum.

!IMPORTANT! As documents can be serialized to Markdown, they can be stored as it in both JSON and YAML formats. It's used often, when you have Fields component and store sub document (text area) as sub item.

Quote

Extends BlockNode

Field	Value
type	`quote`

TextNode

Extends Node

Field	Type	Required	Description
text	string	Y	Contains text content
formats	array	N	Contains format mappings

Field	Value
type	`text`

JSON Example

{
  "type" : "text",
  "text" : "This is my lorem ipsum"
  "formats" : [{
    "slice": [0,4],
    "apply": ["strong"]
  },{
    "slice": [11,5],
    "apply": [{
      "type": "A",
      "title": "Lorem ipsum"
      "href" : "http://www.lipsum.com/"
    }]
  }]
}

YAML Example

type: paragraph
text: This is my lorem ipsum
formats:
  -
    slice: [0,4]
    apply: [strong]
  -
    splice: [11,5]
    apply:
      -
        type: A
        title: Lorem ipsum
        href: http://www.lipsum.com/

Markdown Example

**This** is my [lorem ipsum](http://www.lipsum.com/ "Lorem ipsum").

Format

Extends Object

Field	Type	Required	Description
slice	array of 2 integers	Y	Contains slice begining and length
apply	array of strings	Y	Contains list of formats to be applied

Allowed formats:

strong
em
small
code
abbr
cite
code
a
sub
sup

Mapping of not allowed inline tags:

From	To
b	strong
big	strong
i	em
tt	code
acronym	abbr
var	code
kbd	code

Mapping to be defined:

dfn
time
bdo
q
span
del
s

Link

Extends Format

Field	Type	Required	Description
href	string	Y	Target of the link
title	string	N	Title of the link
target	string	N	Target window of the link

Field	Value
type	`A`

Paragraph

Extends TextNode

Field	Value
type	`paragraph`

Image

Extends Node

Field	Type	Required	Description
src	string	Y	Image location
title	string	N	Image title
alt	string	N	Image alternative text

Field	Value
type	`image`

Heading

Extends TextNode

Field	Type	Required	Description
level	number from 1 to 6	Y	Heading level

Field	Value
type	`heading`

StaticBlockNode

Extends BlockNode

Components Model

Reflect more complex logic, mostly facilitated by Skaryna and Lackey.

Fields

Extends Node

Field	Type	Required	Description
* (any other than `type`	mixed	N	Slot for key/value listed children

Field	Value
type	`Fields`

Variants

Extends Node

Applies logic based on besetmatch

Field	Type	Required	Description
* (any other than `type`	mixed	N	Slot for key/value listed children

Field	Value
type	`Variants`

Lackey components to be considered as part of the standard

List
Block
Media

Lackey complex example

From Lackey example site

type: Fields
title: Welcome to Lackey
subtitle: |
    **A new breed of** CMS
headerImage:
    type: Media
    source: img/core/lackey-site-design.png
blocks:
    type: List
    items:
        -
            type: Block
            template: ~/core/partials/block/signup-demo
            fields:
                title: Contact us for a **free** personal demo of the Lackey CMS
            props:
                namePlaceholder: Name
                emailPlaceholder: Email
                buttonLabel: Send me my link!
 
        -
            type: Block
            template: ~/core/partials/block/copy-media
            fields:
                title: For Content Admins
                subtitle: Easy to use and difficult to break.
                copy: |
                    Lackey facilitates the Client / Agency relationship, enforcing design rules and keeping admin users on a need to know basis. No dev stuff. It’s simple, focused &amp; consistent. Most CMS's let admins pick fonts, add hex ref colours, write HTML tags, and inject content in situations where it was never intended to go. Lackey gives admins just enough power and an easy life.
                image:
                    type: Media
                    source: img/core/lackey-cms-screenshot-1.png
            props:
                theme: white
                imageAlignment: side
 
        -
            type: Block
            template: ~/core/partials/block/copy-media
            fields:
                title: Power for Developers
                subtitle: Build better, faster.
                copy: |
                    The core technologies Lackey is built on are [Node.js](https://nodejs.org/) & [PostgreSQL](https://www.postgresql.org/). We use [npm](https://www.npmjs.com/) in favour of a plugin architecture and have the [core implemented as an npm module](https://github.com/getlackey/lackey-cms) and abstracted out from the instance (website or theme to those transitioning to us to escape Wordpress). We also provide an [open source example site](https://github.com/getlackey/lackey-cms-site) which will allow you to run/reuse the exact website you're reading now. Enjoy!
                image:
                    type: Media
                    source: img/core/lackey-cms-screenshot-2.png
            props:
                theme: white
                imageAlignment: side
 
        -
            type: Block
            template: ~/core/partials/block/copy-media
            fields:
                title: Freedom for Designers
                subtitle: Be creative. Not constrained.
                copy: |
                    Downloading $20 Wordpress themes and retrofitting the PSD with a font change brings shame on us all. Be original! Lackey layouts are limited only by your creativity. Structural Page Composition can be delegated to the client/admin who best knows how to tell their story; without giving them the means to compromise it's aesthetic. This new breed of CMS has been reimagined from the ground up as the perfect tool to collaborate on amazing, unique visual content.
                image:
                    type: Media
                    source: img/core/lackey-emblem.svg
            props:
                theme: blue
                imageAlignment: center
 
        -
            type: Block
            template: ~/core/partials/block/copy-cta
            fields:
                copy: The Lackey UI roadmap prototype is on InVision. Use your right arrow key!
                backgroundImage:
                    type: Media
                    source: img/core/lackey-ui-prototype.jpg
            props:
                href: https://invis.io/P383OLENF
                buttonLabel: Let's see it then

pageobjectmodel

POM

Basic Model Schema

Node

Naming Convention

Block Node

Document

JSON Example

YAML Example

Markdown Example

Quote

TextNode

JSON Example

YAML Example

Markdown Example

Format

Link

Paragraph

Image

Heading

StaticBlockNode

Components Model

Fields

Variants

Lackey components to be considered as part of the standard

Lackey complex example

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

pageobjectmodel

POM

Basic Model Schema

Node

Naming Convention

Block Node

Document

JSON Example

YAML Example

Markdown Example

Quote

TextNode

JSON Example

YAML Example

Markdown Example

Format

Link

Paragraph

Image

Heading

StaticBlockNode

Components Model

Fields

Variants

Lackey components to be considered as part of the standard

Lackey complex example

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads