From 5ec09aa5d7cd361fe1883463a342b801c249d25b Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Fri, 30 May 2025 11:07:26 +0200
Subject: [PATCH 1/2] Not used anymore

---
 app/assets/stylesheets/house.css | 175 -------------------------------
 1 file changed, 175 deletions(-)
 delete mode 100644 app/assets/stylesheets/house.css

diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css
deleted file mode 100644
index 4ab37ba0e..000000000
--- a/app/assets/stylesheets/house.css
+++ /dev/null
@@ -1,175 +0,0 @@
-@layer components {
-  /* Editor */
-  house-md {
-    --placeholder: attr(placeholder);
-
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-
-    &:invalid {
-      border: var(--color-negative) 2px solid;
-    }
-  }
-
-  /* Toolbar */
-  house-md-toolbar {
-    background-color: inherit;
-    border-block-end: 1px solid var(--color-ink-medium);
-    border-radius: 0;
-    color: currentColor;
-    display: inline-flex;
-    font-size: inherit;
-    max-inline-size: 100%;
-    overflow-x: auto;
-    padding: 0.2em;
-
-    button, label {
-      aspect-ratio: 4/3;
-      appearance: none;
-      background-color: transparent;
-      block-size: 2em;
-      border: none;
-      border-radius: 0.5em;
-      color: currentColor;
-      cursor: pointer;
-      display: grid;
-      font-size: inherit;
-      inline-size: auto;
-      place-items: center;
-      transition: background-color 300ms ease;
-
-      svg {
-        -webkit-touch-callout: none;
-        block-size: 0.9em;
-        fill: currentColor;
-        grid-area: 1/1;
-        inline-size: auto;
-        user-select: none;
-      }
-
-      &:is(:focus, :hover) {
-        background-color: var(--color-ink-lighter);
-      }
-
-      &:is(:active) {
-        background-color: var(--color-selected);
-      }
-    }
-  }
-
-  /* Markdown Content */
-  .house-md-content {
-    flex-grow: 1;
-    font-family: var(--font-sans);
-    text-align: left;
-    white-space: break-spaces;
-    padding: 1rem;
-
-    &.house-md-content-empty::before {
-      content: var(--placeholder);
-      color: currentColor;
-      opacity: 0.5;
-      pointer-events: none;
-      display: block;
-    }
-
-    &:active,
-    &:focus {
-      border: none;
-      outline: none;
-    }
-
-    .link, .img {
-      color: var(--color-link);
-      text-decoration: underline;
-    }
-  }
-
-  /* Uploads */
-  house-md-upload {
-    border-radius: 0.5em;
-    margin-block: 0.5ex;
-    position: relative;
-
-    &[status="failed"] {
-      background-color: var(--color-negative);
-      color: var(--color-ink-inverted);
-      font-weight: bold;
-      padding: 0.5em;
-    }
-  }
-
-  .md-close {
-    appearance: none;
-    display: none;
-    inline-size: 1em;
-    block-size: 1em;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    position: absolute;
-    inset: 0.5em 0.5em auto auto;
-    cursor: pointer;
-
-    house-md-upload[status="failed"] & {
-      color: var(--color-ink-inverted);
-      display: inline-block;
-    }
-
-    &::before {
-      content: '×';
-      color: var(--color-ink-inverted);
-      font-size: 24px;
-      font-weight: bold;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  .md-file {
-    font-weight: normal;
-
-    house-md-upload[status="complete"] & {
-      color: var(--color-positive);
-    }
-  }
-
-  .md-progress-bar {
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: var(--color-ink-lighter);
-    border-radius: 0.5em;
-    block-size: 1ex;
-    display: block;
-    inline-size: 100%;
-    line-height: inherit;
-    margin: 0;
-
-    house-md-upload[status="failed"] & ,
-    house-md-upload[status="complete"] &{
-      display: none;
-    }
-
-    &::-webkit-progress-bar {
-      border-radius: 0.5em;
-      background-color: var(--color-ink-lighter);
-    }
-
-    &::-webkit-progress-inner-element {
-      border-radius: 0.5em;
-    }
-
-    &::-webkit-progress-value {
-      border-radius: 0.5em;
-      background-color: var(--color-positive);
-    }
-
-    &::-moz-progress-bar {
-      border-radius: 0.5em;
-      background-color: var(--color-positive);
-    }
-  }
-}

From 40e2dcae0bccd5c4dd29815916f0032d20f14d9e Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Fri, 30 May 2025 11:07:42 +0200
Subject: [PATCH 2/2] Update lexical to support placeholders and style them up

---
 Gemfile.lock                                  |  2 +-
 app/assets/stylesheets/actiontext-lexical.css | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index d75f009a9..b0678ea5a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/basecamp/actiontext-lexical
-  revision: 375dce0f363411a60ad5a60db2f42f406396c919
+  revision: 2b025527aacc85a6c2788176528d359826f304ac
   specs:
     actiontext-lexical (0.1.0)
       rails (>= 8.0.2)
diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css
index c0ab455a5..303b3eec5 100644
--- a/app/assets/stylesheets/actiontext-lexical.css
+++ b/app/assets/stylesheets/actiontext-lexical.css
@@ -10,6 +10,16 @@ lexical-editor {
       }
     }
   }
+
+  &.lexical-editor--empty {
+    .lexical-editor__content:not(:focus):before {
+      content: attr(placeholder);
+      color: currentColor;
+      opacity: 0.5;
+      pointer-events: none;
+      display: block;
+    }
+  }
 }
 
 .lexical-dialog-actions {