Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit e5cc43e May 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public highlighting text May 30, 2019
src update color May 30, 2019
.gitignore highlighting text May 30, 2019
README.md highlighting text May 30, 2019
package.json highlighting text May 30, 2019
yarn.lock highlighting text May 30, 2019

README.md

  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()
}}
You can’t perform that action at this time.