From 377d2ca3ad0c2059211aee76a83a00810b921040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Thu, 4 Apr 2024 18:43:25 +0200
Subject: [PATCH] FIX: keep details open in preview (#26518)

when morphing is enabled, details elements in the preview will be kept open
---
 .../discourse/app/components/d-editor.js      | 13 +++++++-
 .../spec/system/preview_spec.rb               | 30 +++++++++++++++++++
 .../page_objects/components/composer.rb       |  2 ++
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 plugins/discourse-details/spec/system/preview_spec.rb

diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index 14885c04a9b..9a1dd3c1411 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/app/assets/javascripts/discourse/app/components/d-editor.js
@@ -460,7 +460,11 @@ export default Component.extend(TextareaTextManipulation, {
 
       resolveCachedShortUrls(this.siteSettings, cookedElement);
 
-      (await import("morphlex")).morph(previewElement, cookedElement);
+      (await import("morphlex")).morph(
+        previewElement,
+        cookedElement,
+        this.morphingOptions
+      );
     }
 
     schedule("afterRender", () => {
@@ -481,6 +485,13 @@ export default Component.extend(TextareaTextManipulation, {
     });
   },
 
+  morphingOptions: {
+    beforeAttributeUpdated: (element, attributeName) => {
+      // Don't morph the open attribute of <details> elements
+      return !(element.tagName === "DETAILS" && attributeName === "open");
+    },
+  },
+
   @observes("ready", "value", "processPreview")
   async _watchForChanges() {
     if (!this.ready) {
diff --git a/plugins/discourse-details/spec/system/preview_spec.rb b/plugins/discourse-details/spec/system/preview_spec.rb
new file mode 100644
index 00000000000..bcdea1a0419
--- /dev/null
+++ b/plugins/discourse-details/spec/system/preview_spec.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+describe "Composer Preview", type: :system do
+  fab!(:user) { Fabricate(:user, refresh_auto_groups: true) }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before { sign_in user }
+
+  it "keeps details element open when morphing content" do
+    SiteSetting.enable_diffhtml_preview = true
+
+    visit("/new-topic")
+
+    composer.type_content <<~MD
+      [details=Velcro]
+      What a rip-off!
+      [/details]
+    MD
+
+    within(composer.preview) do
+      find("details").click
+      expect(page).to have_css("details[open]")
+    end
+
+    composer.move_cursor_after("rip-off!")
+    composer.type_content(" :person_facepalming:")
+
+    within(composer.preview) { expect(page).to have_css("details[open] img.emoji") }
+  end
+end
diff --git a/spec/system/page_objects/components/composer.rb b/spec/system/page_objects/components/composer.rb
index 8f798f36c9a..07c77f6ffcc 100644
--- a/spec/system/page_objects/components/composer.rb
+++ b/spec/system/page_objects/components/composer.rb
@@ -219,6 +219,7 @@ module PageObjects
           const index = composer.value.indexOf(text);
           const position = index + text.length;
 
+          composer.focus();
           composer.setSelectionRange(position, position);
         JS
       end
@@ -226,6 +227,7 @@ module PageObjects
       def select_all
         execute_script(<<~JS, text)
           const composer = document.querySelector("#{COMPOSER_ID} .d-editor-input");
+          composer.focus();
           composer.setSelectionRange(0, composer.value.length);
         JS
       end