fix placeholder prop

packages/slate-react/src/components/children.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Editor, Range, Element, NodeEntry, Ancestor, Descendant } from 'slate'
 
-import { ReactEditor } from '..'
 import ElementComponent from './element'
 import TextComponent from './text'
+import { ReactEditor } from '..'
 import { useEditor } from '../hooks/use-editor'
 import { NODE_TO_INDEX, NODE_TO_PARENT } from '../utils/weak-maps'
 import {
@@ -36,6 +36,7 @@ const Children = (props: {
   } = props
   const editor = useEditor()
   const path = ReactEditor.findPath(editor, node)
+  const decs = decorations.concat(decorate([node, path]))
   const children = []
   const isLeafBlock =
     Element.isElement(node) &&
@@ -48,13 +49,13 @@ const Children = (props: {
     const key = ReactEditor.findKey(editor, n)
     const range = Editor.range(editor, p)
     const sel = selection && Range.intersection(range, selection)
-    const decs = decorate([n, p])
+    const ds = decorate([n, p])
 
-    for (const dec of decorations) {
+    for (const dec of decs) {
       const d = Range.intersection(dec, range)
 
       if (d) {
-        decs.push(d)
+        ds.push(d)
       }
     }
 
@@ -62,7 +63,7 @@ const Children = (props: {
       children.push(
         <ElementComponent
           decorate={decorate}
-          decorations={decs}
+          decorations={ds}
           element={n}
           key={key.id}
           renderDecoration={renderDecoration}

packages/slate-react/src/components/editable.tsx

@@ -24,7 +24,7 @@ import {
   IS_READ_ONLY,
   NODE_TO_ELEMENT,
   IS_FOCUSED,
-  PLACEHOLDER,
+  PLACEHOLDER_SYMBOL,
 } from '../utils/weak-maps'
 import {
   CustomDecorationProps,
@@ -63,7 +63,6 @@ export const Editable = (props: {
   const ref = useRef<HTMLDivElement>(null)
 
   // Update internal state on each render.
-  PLACEHOLDER.set(editor, placeholder)
   IS_READ_ONLY.set(editor, readOnly)
 
   // Keep track of some state for the event handler logic.
@@ -349,6 +348,23 @@ export const Editable = (props: {
     []
   )
 
+  const decorations = []
+
+  if (
+    placeholder &&
+    editor.children.length === 1 &&
+    Array.from(Node.texts(editor)).length === 1 &&
+    Node.text(editor) === ''
+  ) {
+    const start = Editor.start(editor, [])
+    decorations.push({
+      [PLACEHOLDER_SYMBOL]: true,
+      placeholder,
+      anchor: start,
+      focus: start,
+    })
+  }
+
   return (
     <ReadOnlyContext.Provider value={readOnly}>
       <div
@@ -701,7 +717,7 @@ export const Editable = (props: {
       >
         <Children
           decorate={decorate}
-          decorations={decorate([editor, []])}
+          decorations={decorations}
           node={editor}
           renderDecoration={renderDecoration}
           renderElement={renderElement}

packages/slate-react/src/react-editor.ts

@@ -10,7 +10,6 @@ import {
   NODE_TO_INDEX,
   NODE_TO_KEY,
   NODE_TO_PARENT,
-  PLACEHOLDER,
   PLACEHOLDER_SYMBOL,
 } from './utils/weak-maps'
 import {
@@ -76,34 +75,6 @@ export const ReactEditor = {
     )
   },
 
-  /**
-   * Resolve the decorations for a node.
-   */
-
-  getDecorations(editor: ReactEditor, node: Node): Range[] {
-    const placeholder = PLACEHOLDER.get(editor)
-    const decorations = []
-
-    if (
-      placeholder &&
-      Editor.isEditor(node) &&
-      node.children.length === 1 &&
-      Array.from(Node.texts(node)).length === 1 &&
-      Node.text(node) === ''
-    ) {
-      const start = Editor.start(editor, [])
-
-      decorations.push({
-        [PLACEHOLDER_SYMBOL]: true,
-        placeholder,
-        anchor: start,
-        focus: start,
-      })
-    }
-
-    return decorations
-  },
-
   /**
    * Check if the editor is focused.
    */
@@ -392,9 +363,12 @@ export const ReactEditor = {
         range.setStart(textNode, 0)
         range.setEnd(nearestNode, nearestOffset)
         const contents = range.cloneContents()
-        const zeroWidths = contents.querySelectorAll('[data-slate-zero-width]')
+        const removals = [
+          ...contents.querySelectorAll('[data-slate-zero-width]'),
+          ...contents.querySelectorAll('[contenteditable=false]'),
+        ]
 
-        Array.from(zeroWidths).forEach(el => {
+        removals.forEach(el => {
           el!.parentNode!.removeChild(el)
         })
 

packages/slate-react/src/utils/weak-maps.ts

@@ -29,7 +29,6 @@ export const IS_READ_ONLY: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_FOCUSED: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()
-export const PLACEHOLDER: WeakMap<Editor, string | undefined> = new WeakMap()
 
 /**
  * Symbols.

site/examples/links.js

@@ -83,7 +83,11 @@ const Element = ({ attributes, children, element }) => {
   switch (element.type) {
     case 'link':
       return (
-        <a {...attributes} href={element.url}>
+        <a
+          {...attributes}
+          href={element.url}
+          style={{ border: '1px solid red', padding: '5px', margin: '5px' }}
+        >
           {children}
         </a>
       )

site/examples/plain-text.js

@@ -16,7 +16,7 @@ const initialValue = [
   {
     children: [
       {
-        text: 'This is editable plain text, just like a <textarea>!',
+        text: '',
         marks: [],
       },
     ],