Halko

Halko is content editor powered by React.js plugins.

Join our community on spectrum.chat/halko.

---

How to use

Setup

Install editor core and basic plugins:

npm i --save @halko/editor @halko/plugin-text @halko-plugin-image

Usage

import React from 'react'

import { Editor } from '@halko/editor'
import { Image } from '@halko/plugin-image'
import { Text } from '@halko/plugin-text'

const App = () => (
  <div>
    <h1>Using Halko in React</h1>
    <Editor plugins={[Text, Image]} />
  </div>
)

Configuring plugins

To configure plugin, wrap it in array and pass config as second array element:

<Editor plugins={[Text, [Image, config]]} />

Initializing with content

<Editor
  initialValue={[
    {plugin: 'text', data: '<p>Hello world</p>'},
    {plugin: 'text', data: '<p>Second line</p>'},
  ]}
 />

Getting content

<Editor onChange={api => {
  this.setState({editorContent: api.getContent()})
} />

Rendering read only content

Content rendering is handled by plugins used to create that content. To render it, use Renderer component and pass the same plugins you passed to Editor.

import React from 'react'

import { Renderer } from '@halko/editor'
import { Image } from '@halko/plugin-image'
import { Text } from '@halko/plugin-text'

const App = () => (
  <div>
    <h1>Using Halko in React</h1>
    <Renerer
      plugins={[Text, Image]}
      value={[
        {plugin: 'text', data: '<p>Hello world</p>'},
        {plugin: 'text', data: '<p>Second line</p>'},
      ]}
    />
  </div>
)

Hooks

onInit

<Editor onInit={api => /* handle init */} />

onChange

<Editor onChange={api => /* handle change */} />

Contributing

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Install project dependencies: npm i
3. Install packages dependencies: npm run bootstrap
4. Run packages build script in watch mode: npm run watch
5. Run playground server: npm run dev
6. Access playground at: localhost:3000

Authors

• Kasper Mikiewicz (@idered) – Eyedea