Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
  1. npm install slate slate-react and immutable
  2. import { Editor } from 'slate-react'
  3. See error
  4. Import { Value } from 'slate'
  5. Create value with const value = Value.fromJSON({...})
  6. To render text the Value needs at least one document property, A document needs a block, and a block needs text.
  7. Add state to component with const [value, setValue] = useState(value)
  8. Add onKeyDown prop to Editor component
onKeyDown={(event, editor) => {
  if (event.metaKey && event.key === 'b') {
    event.preventDefault()
    editor.toggleMark('bold')
  }
}}
  1. if (event.metaKey && event.key === 'b') editor.toggleMark('bold') then we want to make text bold
  2. event.preventDefault() to make sure there are no side effects
  3. Now define the renderMark prop:
renderMark={(props, editor, next) => {
  const { mark: { type } } = props

  if (type === 'bold') {
    return <strong>{props.children}</strong>
  }

  return next()
}}

About

No description, website, or topics provided.

Resources

Releases

No releases published

Packages

No packages published