How to use slate-react-placeholder - 2 common examples

const debugMutationsPlugin = Debug.enabled('slate:mutations')
    ? DebugMutationsPlugin(options)
    : null
  const renderingPlugin = RenderingPlugin(options)
  const commandsPlugin = CommandsPlugin(options)
  const queriesPlugin = QueriesPlugin(options)
  const editorPropsPlugin = EditorPropsPlugin(options)
  const domPlugin = DOMPlugin(options)
  const restoreDomPlugin = RestoreDOMPlugin()

  // Disable placeholder for Android because it messes with reconciliation
  // and doesn't disappear until composition is complete.
  // e.g. In empty, type "h" and autocomplete on Android 9 and deletes all text.
  const placeholderPlugin = IS_ANDROID
    ? null
    : PlaceholderPlugin({
        placeholder,
        when: (editor, node) =>
          node.object === 'document' &&
          node.text === '' &&
          node.nodes.size === 1 &&
          Array.from(node.texts()).length === 1,
      })

  return [
    debugEventsPlugin,
    debugBatchEventsPlugin,
    debugMutationsPlugin,
    editorPropsPlugin,
    domPlugin,
    restoreDomPlugin,
    placeholderPlugin,

const ret = []
  const editorPlugin = PROPS.reduce((memo, prop) => {
    if (prop in options) memo[prop] = options[prop]
    return memo
  }, {})

  ret.push(
    DOMPlugin({
      plugins: [editorPlugin, ...plugins],
    })
  )

  if (placeholder) {
    ret.push(
      PlaceholderPlugin({
        placeholder,
        when: (editor, node) =>
          node.object === 'document' &&
          node.text === '' &&
          node.nodes.size === 1 &&
          node.getTexts().size === 1,
      })
    )
  }

  ret.push({
    decorateNode,
    renderEditor,
    renderNode,
  })