Skip to content

contco/editor

Repository files navigation

editor

Rich Text Editor

NPM JavaScript Style Guide

Install

 npm install @contco/[email protected]

Usage

import React, {useState} from 'react'

import  Editor  from 'editor'
import 'editor/dist/index.css'

const App = () => {
  const [document, setDocument] = useState<any>(initialValue);

  const setContent = (content: any) => {
    setDocument(content);
  };
  return (
    <Editor data={document} setContent={setContent} readOnly={false} />

  )
}
const initialValue = [
  {
    type: 'paragraph',
    children: [
      { text: 'This is editable ' },
      { text: 'rich', bold: true },
      { text: ' text, ' },
      { text: 'much', italic: true },
      { text: ' better than a ' },
      { text: '<textarea>', code: true },
      { text: '!' },
    ],
  },
  {
    type: 'paragraph',
    children: [
      {
        text:
          "Since it's rich text, you can do things like turn a selection of text ",
      },
      { text: 'bold', bold: true },
      {
        text:
          ', or add a semantically rendered block quote in the middle of the page, like this:',
      },
    ],
  },
  {
    type: 'block-quote',
    children: [{ text: 'A wise quote.' }],
  },
  {
    type: 'paragraph',
    children: [{ text: 'Try it out for yourself!' }],
  },
]