From 00393bb18548976d4e79c8bc46d54b2125bb6701 Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Wed, 31 Mar 2021 22:04:30 -0400
Subject: [PATCH] port long placeholder pr to master

---
 .../slate-react/src/components/editable.tsx   |  2 ++
 packages/slate-react/src/components/leaf.tsx  | 25 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index 140a1e5eb..9afec8af1 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -521,6 +521,8 @@ export const Editable = (props: EditableProps) => {
           suppressContentEditableWarning
           ref={ref}
           style={{
+            // Allow positioning relative to the editable element.
+            position: 'relative',
             // Prevent the default outline styles.
             outline: 'none',
             // Preserve adjacent whitespace and new lines.
diff --git a/packages/slate-react/src/components/leaf.tsx b/packages/slate-react/src/components/leaf.tsx
index 417ea797b..21e064af8 100644
--- a/packages/slate-react/src/components/leaf.tsx
+++ b/packages/slate-react/src/components/leaf.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import { Element, Text } from 'slate'
 import String from './string'
 import { PLACEHOLDER_SYMBOL } from '../utils/weak-maps'
@@ -23,6 +23,25 @@ const Leaf = (props: {
     renderLeaf = (props: RenderLeafProps) => <DefaultLeaf {...props} />,
   } = props
 
+  const placeholderRef = useRef<HTMLSpanElement | null>(null)
+
+  useEffect(() => {
+    const placeholderEl = placeholderRef?.current
+    const editorEl = document.querySelector<HTMLDivElement>(
+      '[data-slate-editor="true"]'
+    )
+
+    if (!placeholderEl || !editorEl) {
+      return
+    }
+
+    editorEl.style.minHeight = `${placeholderEl.clientHeight}px`
+
+    return () => {
+      editorEl.style.minHeight = 'auto'
+    }
+  }, [placeholderRef])
+
   let children = (
     <String isLast={isLast} leaf={leaf} parent={parent} text={text} />
   )
@@ -31,11 +50,12 @@ const Leaf = (props: {
     children = (
       <React.Fragment>
         <span
+          ref={placeholderRef}
           contentEditable={false}
           style={{
             pointerEvents: 'none',
             display: 'inline-block',
-            width: '0',
+            width: '100%',
             maxWidth: '100%',
             whiteSpace: 'nowrap',
             opacity: '0.333',
@@ -43,6 +63,7 @@ const Leaf = (props: {
             fontStyle: 'normal',
             fontWeight: 'normal',
             textDecoration: 'none',
+            position: 'absolute',
           }}
         >
           {leaf.placeholder}