From 9d04d5ebd9ed220501de608707cfaaf1d389a8ee Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 17 Jun 2023 08:52:41 +0100
Subject: [PATCH] fix: Cursor jump on long title edit on Firefox (#5449)

---
 app/components/ContentEditable.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/components/ContentEditable.tsx b/app/components/ContentEditable.tsx
index 1e37f03fd..e10879bc2 100644
--- a/app/components/ContentEditable.tsx
+++ b/app/components/ContentEditable.tsx
@@ -53,7 +53,7 @@ const ContentEditable = React.forwardRef(
   ) => {
     const contentRef = React.useRef<HTMLSpanElement>(null);
     const [innerValue, setInnerValue] = React.useState<string>(value);
-    const lastValue = React.useRef("");
+    const lastValue = React.useRef(value);
 
     React.useImperativeHandle(ref, () => ({
       focus: () => {
@@ -94,7 +94,11 @@ const ContentEditable = React.forwardRef(
           | undefined
       ) =>
       (event: any) => {
-        const text = contentRef.current?.innerText || "";
+        if (readOnly) {
+          return;
+        }
+
+        const text = event.currentTarget.textContent || "";
 
         if (
           maxLength &&
@@ -107,7 +111,7 @@ const ContentEditable = React.forwardRef(
 
         if (text !== lastValue.current) {
           lastValue.current = text;
-          onChange && onChange(text);
+          onChange?.(text);
         }
 
         callback?.(event);
@@ -126,13 +130,14 @@ const ContentEditable = React.forwardRef(
     }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
 
     React.useEffect(() => {
-      if (value !== contentRef.current?.innerText) {
+      if (contentRef.current && value !== contentRef.current.textContent) {
         setInnerValue(value);
       }
     }, [value, contentRef]);
 
     // Ensure only plain text can be pasted into input when pasting from another
-    // rich text source
+    // rich text source. Note: If `onPaste` prop is passed then it takes
+    // priority over this behavior.
     const handlePaste = React.useCallback(
       (event: React.ClipboardEvent<HTMLSpanElement>) => {
         event.preventDefault();
@@ -186,6 +191,7 @@ const Content = styled.span`
   outline: none;
   resize: none;
   cursor: text;
+  word-break: anywhere;
 
   &:empty {
     display: inline-block;