From 18afaa87c2071339e7eb62a7cbefde6d47e0b9d2 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Wed, 2 Jul 2025 16:01:34 +0200
Subject: [PATCH] For custom attachments we don't manage figures anymore, but
 action-text-attachments

So that we keep HTML valid when nesting them within paragraphs
---
 Gemfile.lock                                  |  2 +-
 app/assets/stylesheets/actiontext-lexical.css |  2 +-
 app/assets/stylesheets/rich-text-content.css  | 17 +++++++----------
 app/assets/stylesheets/terminals.css          |  2 +-
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index a72a5dc7e..57acd6523 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/basecamp/actiontext-lexical
-  revision: f36a20252aeaaa287d768d70d8a5f48a6e8e0ca7
+  revision: d18725773b8a654ef577061bbdf8c0ab35e07073
   branch: remove-diacritics
   specs:
     actiontext-lexical (0.1.0)
diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css
index 0d1be440e..46ed1e126 100644
--- a/app/assets/stylesheets/actiontext-lexical.css
+++ b/app/assets/stylesheets/actiontext-lexical.css
@@ -4,7 +4,7 @@
     position: relative;
     overflow: visible;
 
-    .node--selected:not(.attachment--custom) {
+    figure.node--selected {
       &:not(:has(img)) {
         box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
       }
diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css
index 776c32f75..b6010662f 100644
--- a/app/assets/stylesheets/rich-text-content.css
+++ b/app/assets/stylesheets/rich-text-content.css
@@ -20,7 +20,7 @@
     :where(h5) { font-size: 0.83em; }
     :where(h6) { font-size: 0.67em; }
 
-    :where(p, ul, ol, dl, blockquote, figure:not(.attachment--custom), .attachment:not(.attachment--custom)) {
+    :where(p, ul, ol, dl, blockquote, figure, .attachment) {
       margin-block: var(--block-margin);
       overflow-wrap: break-word;
       text-wrap: pretty;
@@ -158,7 +158,7 @@
   /* Attachments
   /* ------------------------------------------------------------------------ */
 
-  .attachment:not(.attachment--custom) {
+  .attachment {
     block-size: auto;
     display: inline-block;
     inline-size: 100%;
@@ -325,19 +325,16 @@
   }
 
   /* Custom attachments such as mentions, etc. */
-  .attachment--custom {
-    display: inline;
-    padding: 0;
-    margin: 0;
-    white-space: normal;
-  }
-
-  .attachment--custom,
   action-text-attachment[content-type^='application/vnd.actiontext'] {
     --attachment-bg-color: transparent;
     --attachment-image-size: 1em;
     --attachment-text-color: var(--color-ink);
 
+    display: inline;
+    padding: 0;
+    margin: 0;
+    white-space: normal;
+
     align-items: center;
     color: var(--attachment-text-color);
     display: inline-flex;
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 856011d41..116a92e1c 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -209,7 +209,7 @@
   /* ------------------------------------------------------------------------ */
 
   .terminal {
-    .attachment--custom:not(.node--selected) {
+    action-text-attachment:not(.node--selected) {
       --attachment-bg-color: oklch(var(--lch-white) / 15%);
       --attachment-text-color: var(--color-terminal-text);
     }