From 4b2d4de4bffd5cab9aa2888901aefd201d0436df Mon Sep 17 00:00:00 2001
From: Jim Fisher <jameshfisher@gmail.com>
Date: Thu, 6 Jan 2022 20:15:14 +0000
Subject: [PATCH] Show example of a workaround for Chrome bug that puts cursor
 in wrong place (#4772)

There is a Chromium bug where, if you have an inline at the end of a block,
clicking the end of a block puts the cursor inside the inline
instead of inside the final {text: ''} node.

This commit updates the inlines example to show the problem, and to show
a known workaround for the problem.

See for context: https://github.com/ianstormtaylor/slate/issues/4704
---
 site/examples/inlines.tsx | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/site/examples/inlines.tsx b/site/examples/inlines.tsx
index 617fe86452..aba4412408 100644
--- a/site/examples/inlines.tsx
+++ b/site/examples/inlines.tsx
@@ -47,8 +47,16 @@ const initialValue: Descendant[] = [
     children: [
       {
         text:
-          'There are two ways to add links. You can either add a link via the toolbar icon above, or if you want in on a little secret, copy a URL to your keyboard and paste it while a range of text is selected.',
+          'There are two ways to add links. You can either add a link via the toolbar icon above, or if you want in on a little secret, copy a URL to your keyboard and paste it while a range of text is selected. ',
       },
+      // The following is an example of an inline at the end of a block.
+      // This is an edge case that can cause issues.
+      {
+        type: 'link',
+        url: 'https://twitter.com/JustMissEmma/status/1448679899531726852',
+        children: [{ text: 'Finally, here is our favorite dog video.' }],
+      },
+      { text: '' },
     ],
   },
 ]
@@ -96,6 +104,7 @@ const InlinesExample = () => {
       </Toolbar>
       <Editable
         renderElement={props => <Element {...props} />}
+        renderLeaf={props => <Text {...props} />}
         placeholder="Enter some text..."
         onKeyDown={onKeyDown}
       />
@@ -291,6 +300,29 @@ const Element = props => {
   }
 }
 
+const Text = props => {
+  const { attributes, children, leaf } = props
+  return (
+    <span
+      // The following is a workaround for a Chromium bug where,
+      // if you have an inline at the end of a block,
+      // clicking the end of a block puts the cursor inside the inline
+      // instead of inside the final {text: ''} node
+      // https://github.com/ianstormtaylor/slate/issues/4704#issuecomment-1006696364
+      className={
+        leaf.text === ''
+          ? css`
+              padding-left: 0.1px;
+            `
+          : null
+      }
+      {...attributes}
+    >
+      {children}
+    </span>
+  )
+}
+
 const AddLinkButton = () => {
   const editor = useSlate()
   return (