From 6ac4560b3629d36307e1f33b6e55bed2750033c3 Mon Sep 17 00:00:00 2001
From: Franck Nijhof <git@frenck.dev>
Date: Tue, 19 Jul 2022 12:07:51 +0200
Subject: [PATCH] Use YAML in developer tools events (#13222)

---
 src/components/ha-yaml-editor.ts                         | 2 +-
 src/panels/developer-tools/event/event-subscribe-card.ts | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index bfa01b73b9..0367840912 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -41,7 +41,7 @@ export class HaYamlEditor extends LitElement {
     try {
       this._yaml =
         value && !isEmpty(value)
-          ? dump(value, { schema: this.yamlSchema })
+          ? dump(value, { schema: this.yamlSchema, quotingType: '"' })
           : "";
     } catch (err: any) {
       // eslint-disable-next-line no-console
diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index 6e8d889f6a..2600a23178 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -4,6 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatTime } from "../../../common/datetime/format_time";
 import "../../../components/ha-card";
+import "../../../components/ha-yaml-editor";
 import "../../../components/ha-textfield";
 import { HomeAssistant } from "../../../types";
 
@@ -74,7 +75,10 @@ class EventSubscribeCard extends LitElement {
                   ev.id
                 )}
                 ${formatTime(new Date(ev.event.time_fired), this.hass!.locale)}:
-                <pre>${JSON.stringify(ev.event, null, 4)}</pre>
+                <ha-yaml-editor
+                  .defaultValue=${ev.event}
+                  readOnly
+                ></ha-code-editor>
               </div>
             `
           )}