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;
   }

app/components/Heading.ts

@@ -5,14 +5,6 @@ const Heading = styled.h1<{ centered?: boolean }>`
   align-items: center;
   user-select: none;
   ${(props) => (props.centered ? "text-align: center;" : "")}
-
-  svg {
-    margin-top: 4px;
-    margin-left: -6px;
-    margin-right: 2px;
-    align-self: flex-start;
-    flex-shrink: 0;
-  }
 `;
 
 export default Heading;