GitHub - newpolymerization/gaea-editor: Design websites in your browser

gaea-editor

Help develops build a scalable website visualization builder.

Quick start

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

Parameter: `plugins`

First you should install 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.