TUNGTUNG SUPER EDITOR

Install

---

Install tungtung-super-editor

yarn add tungtung-super-editor
# or with npm
# npm install --save tungtung-super-editor

2. Add style to ...

For Example

• rekit | create-react-app : update file public/index.html
• next.js : update file pages/_document.js

<!-- Import Editor-Style -->
<link
    rel='stylesheet'
    href='https://tungtung-space.sgp1.cdn.digitaloceanspaces.com/static/community/css/style.min.css'
/>
<!-- Import Editor-Font -->
<link
    rel='stylesheet'
    href='https://tungtung-space.sgp1.cdn.digitaloceanspaces.com/static/community/css/fonts.css'
/>
<!-- Import Editor-CodemirrorStyle -->
<link
    key='codemirror'
    rel='stylesheet'
    href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.2/codemirror.min.css'
/>
<!-- Import Editor-KaTeXStyle -->
<link
    rel='stylesheet'
    href='https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css'
    integrity='sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j'
    crossOrigin='anonymous'
/>

The third step is add LatexPopover and ToolBarPopover to Root App

For Example

• rekit | create-react-app : update file src/index.js
• next.js : update file pages/_document.js

import {
    LatexPopover,
    ToolBarPopover
} from 'tungtung-super-editor/dist/style'

...

<LatexPopover id='slate_latexPopover' className='fadeIn animated' />
<ToolBarPopover id='slate_toolbarPopover' className='faster' />

Usage

---

1 . Require tungtung-super-editor after installation

import Editor from 'tungtung-test-module'

2 . Include tungtung-super-editor component

...
render () {
    return (
        <Editor
            onChange={this.handleChange}
            value={this.props.question.content}
            placeholder='Enter content ...'
            ... // For more, let's view Props Section
        />
    )
}
...

Props

---

value

Type	Required	Default Value	Description
Object	No		Initialize the initial value for the editor.

const initValue = {
    document: {
        nodes: [
          {
            object: 'block',
            type: 'paragraph',
            nodes: [
              {
                object: 'text',
                leaves: [
                  {
                    text: ''
                  }
                ]
              }
            ]
          }
        ]
    }
}

...

render () {
    return (
        <Editor value={initValue} />
    )
}

placeholder

Type	Required	Default Value	Description
String	No	Super Editor!

...
render () {
    return (
        <Editor placeholder='Enter content ...' />
    )
}
...

onChange

Type	Required	Default Value	Description
Function	No
Example

...

handleChange = value => this.setState({ questionContent: value })

render () {
    return (
        <Editor onChange={handleChange} />
    )
}

...

readOnly

Type	Required	Default Value	Description
Boolean	No	false	if true, user can only view content. If false, user can edit the content.

...
render () {
    return (
        <Editor readOnly /> // User can only view content
    )
}
...