Gaea Editor ·

gaea-editor

Help develops build a scalable website visualization builder.

Try it online.

Quick start

npm i gaea-editor --save

And then, it's easy to use:

import Editor from "gaea-editor"

ReactDOM.render(
    <div style={{width: '100vw', height: '100vh'}}>
        <Editor />
    </div>,
    document.getElementById("react-root")
)

• For vue - gaea-editor-vue, thanks CharlieLau.

Add custom component to the drag menu

You can add any react components to the drag menu, through the following line of code:

<Editor componentClasses={[CustomComponent1, CustomComponent2]} />

Add editSetting to each component props, to let the editor know how to edit it visualizations:

defaultProps = {
    editSetting: {
        key: 'my-custom-key', // Unique key.
        name: 'Custom one', // The name shown in drag menu.
        editors: [{
            field: "title",
            text: "Text",
            type: "string"
        }] // Tell gaea-editor, which props can be edited and how to edit it.
    }
}

More about editors

gaea-editor provides several built-in type editing props. If you need to expand it, you can refer to custom plugin.

common field:

• field: which props to edit. EX: value visible style.backgroundColor.
• text: If exist, will appear in the form label to prompt the user.

The following are the built-in types:

string

Suitable for any string editing scene.

{
    type: 'string',
    text: 'Text',
    field: 'value'
}

number

Suitable for any number editing scene.

In many cases, it is suggested that inputRange and outputRange be set to the same value.

{
    type: 'number',
    text: 'Text',
    field: 'value',
    data: {
        useSlider: true,
        step: 1,
        inputRange: [0, 100],
        outputRange: [0, 1]
    }
}

boolean

Suitable for any boolean editing scene.

{
    type: 'boolean',
    text: 'Checked',
    field: 'value'
}

select

Suitable for enumable editing scene.

{
    type: 'select',
    text: 'Text',
    field: 'value',
    data: [{
        text: 'Default',
        value: 0
    }, {
        text: 'Small',
        value: 1
    }, {
        text: 'Large',
        value: 2
    }]
}

color

Suitable for color picker editing scene.

{
    type: 'color',
    text: 'Text',
    field: 'style.backgroundColor',
}

display

Suitable for layout editing scene.

Because this type will edit multiple props properties, such as style.display style.flexDirection, so don't need to specify the field field.

{
    type: 'display',
    text: 'Text'
}

box-editor

Suitable for margin-padding editing scene.

Because this type will edit multiple props properties, such as margin padding, so don't need to specify the field field.

{
    type: 'box-editor',
    text: 'Text'
}

array

Super type, allow visualizations to edit a array type props.

{
    type: 'array',
    text: 'values',
    data: 'string'
}

You can change string to boolean, than it can edit boolean array:

object array

Super type, allow visualizations to edit a array type props.

Each field in data describes how the key should be edited in the object in array.

Each field in data is a editor type. You can even nested array or object type inside.

{
    type: 'array',
    text: 'Options',
    data: [{
        field: "value",
        type: "string",
        text: "Value"
    }, {
        field: "text",
        type: "string",
        text: "Text"
    }, {
        field: "disabled",
        type: "boolean",
        text: "Disabled"
    }]
}

object

Super type, allow visualizations to edit a object type props.

Each field in data describes how the key should be edited in this object.

Each field in data is a editor type. You can even nested array or object type inside.

{
    type: 'object',
    text: 'Text',
    data: [{
        field: "name",
        type: "string",
        text: "Name"
    }, {
        field: "age",
        type: "number",
        text: "Age"
    }]
}

Options

You can add custom components, custom plugins, save callback, and read saved data.

Props	Type	Description
onSave	(info?: string) => void	When you click the Save button, feed back to you to save the information
value	string	Editor initial value, you can pass the value of the onSave callback and resume the draft
componentClasses	Array<React.ComponentClass<IGaeaProps>>	React classes. Any react component is supported, but you need some configuration information to tell the editor how to edit it. see custom-component-config
plugins	IPlugin[]	Advanced usage for custom editor functionality. TODO

Parameter: onSave

export function renderGaeaEditor() {
    return (
        <Editor onSave={ value => {
            // send the value data to your server.
        } }/>
    )
}

Parameter: value

The value came from onSave.

export function renderGaeaEditor() {
    return (
        <Editor value={value} />
    )
}

Parameter: componentClasses

class MyInput extends React.Component {
    render() {
        return <input />
    }
}

export function renderGaeaEditor() {
    return (
        <Editor componentClasses={[ MyInput ]}/>
    )
}

LiveDemo

Read more in custom-component-config.

Parameter: plugins

First you should install dob-react.

npm i dob-react

import { Connect } from 'dob-react'

@Connect
class Plugin extends React.Component {
  render() {	
  	return 'plugin'
  }
}

const plugin {
  position: "mainToolEditorTypeShow",
  class: ShowEditor
}

export function renderGaeaEditor() {
    return (
        <Editor plugins={[ Plugin ]}/>
    )
}

CustomEditTypeLiveDemo

What is position? What can i do with plugin? See more in custom-plugin

Local development run

git clone https://github.com/ascoders/gaea-editor.git
cd gaea-editor
yarn
npm start

Will automatically open the default browser.

Deploy

The page configured with the editor cannot be used as a production environment, and we provide gaea-app to deploy it:

Render application with routes, the value of the gaea-editor onSave callback is required.