FIX: keep details open in preview (#26518)

when morphing is enabled, details elements in the preview will be kept open

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) {

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

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