fix: Inset icon in collection headers, minor ContentEditable refactor (#3168)

app/components/ContentEditable.tsx

@@ -81,6 +81,17 @@ const ContentEditable = React.forwardRef(
       }
     }, [value, ref]);
 
+    // Ensure only plain text can be pasted into title when pasting from another
+    // rich text editor
+    const handlePaste = React.useCallback(
+      (event: React.ClipboardEvent<HTMLSpanElement>) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData("text/plain");
+        window.document.execCommand("insertText", false, text);
+      },
+      []
+    );
+
     return (
       <div className={className} dir={dir} onClick={onClick}>
         <Content
@@ -89,6 +100,7 @@ const ContentEditable = React.forwardRef(
           onInput={wrappedEvent(onInput)}
           onBlur={wrappedEvent(onBlur)}
           onKeyDown={wrappedEvent(onKeyDown)}
+          onPaste={handlePaste}
           data-placeholder={placeholder}
           suppressContentEditableWarning
           role="textbox"
@@ -103,6 +115,14 @@ const ContentEditable = React.forwardRef(
 );
 
 const Content = styled.span`
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  color: ${(props) => props.theme.text};
+  -webkit-text-fill-color: ${(props) => props.theme.text};
+  outline: none;
+  resize: none;
+  cursor: text;
+
   &:empty {
     display: inline-block;
   }