Composers take pictures from the keyboard: the reply, post and chat fields are contenteditable.

Android keyboards (Gboard GIFs, stickers) only offer images to fields that
accept them, and Chrome says so for contenteditable, never <textarea> —
hence the greyed-out GIF key and "This app does not support images here".
<coinos-text> (src/rich-text.js) is a contenteditable that acts like a
textarea to the code around it (value, selectionStart/End, setSelection-
Range, placeholder), keeps text plain, and hands any pasted/dropped/
keyboard picture to onMedia — the paperclip's upload. The morph syncs its
value like a field's and leaves its own editing attributes alone.

composer-media-test: types like a textarea, strips pasted formatting,
a pasted GIF uploads and lands in the reply, still editable after repaint.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Du1qT1wbkYwYK6zkGH79Rp

1 files changed, 10 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index 9b0bf45..9bdaf3c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -248,6 +248,16 @@ select {
   background-repeat: no-repeat; background-position: right 14px center;
 }
 textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-size: 15px; }
+/* The composers' text field (src/rich-text.js): a textarea to look at and
+   type in, contenteditable underneath so keyboards offer GIFs and images. */
+coinos-text {
+  display: block; width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper);
+  border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px;
+  white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; line-height: 1.4; cursor: text;
+}
+coinos-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
+coinos-text[data-empty]::before { content: attr(placeholder); color: var(--muted); pointer-events: none; }
+.chat-compose coinos-text { flex: 1; min-width: 0; padding: 10px 13px; max-height: 120px; }
 .mono-input { font-family: var(--mono); }
 .input-group { display: flex; gap: 8px; }
 .input-group input { flex: 1; }