Canvas Editor

The canvas editor is the main editor usually encountered in a SocialStack admin panel. It edits Canvas content, and a canvas is a JSON structure which describes a tree of components.

How it works

Essentially the canvas editor is a what-you-see-is-what-you-get experience and it has a primary goal of getting out of the way of the content itself. One of the most common uses of a canvas editor is to edit rich text content, and that is primarily handled by the editor Draft.js.

Making your components available to the editor

For a component to appear in the canvas editor's "Add Component" UI, it must simply have propTypes. It can be an empty object too.

export default function HelloWorld(props) {
}

HelloWorld.propTypes = {};

export default class HelloWorld extends React.Component {
}

HelloWorld.propTypes = {};

The propTypes you specify will directly drive which fields (and what input type they'll be) will appear in the properties UI.

HelloWorld.propTypes = {
    title: 'text',
    isBold: 'bool',
    friendlyImageRef: 'image'
};