The library still under development. # Intro A block-styled editor for reactJs, friendly for mobile. # Getting started ``` import cEditor, { h1, h2, p, list } from 'c-react-editor'
npm install c-react-editor
import cEditor, { h1, h2, p, list } from 'c-react-editor'const Editor = cEditor({
blocks: [
h1,
h2,
p,
list
]
})
const page = () => {
const [data, setData] = useState()
return (
)
}
Custom block
import cEditor, { h1, h2, p, list, ToolBar } from 'c-react-editor'const h3Component = ({ controller, focusing, i, data }) => {
const onFocus = focusing === i
const change = e => {
controller.change(data, i, {
type: data[i].type,
data: e.target.value,
})
}
if (!onFocus) {
return (
{data[i].data || '(Empty)'})
}
return (
)
}const customBlock = {
type: 'h3',
component: h3Component,
exchange: data => {
if (data && typeof data !== 'string') {
if (Array.isArray(data)) {
data = data.join(',')
} else {
return { type: 'INSERT' }
}
}
return { type: 'EDIT', data }
},
icon: (Sub title)
}
const Editor = cEditor({
blocks: [
h1,
h2,
customBlock,
p,
list
]
})
....