From 9051ea62aa2376539b8ea965eb51b30dee7bcfc0 Mon Sep 17 00:00:00 2001
From: Elena Baidakova <lena.baydakova@gmail.com>
Date: Mon, 8 May 2023 10:04:14 +0400
Subject: [PATCH] Removed `p` wrapper for koenig-lexical-input (#16754)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs TryGhost/Team#3147

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 7dfd8bf</samp>

This file adds a function to clean and format the HTML of the
`koenig-lexical-editor-input` component and passes it to the
`HtmlOutputPlugin` component.
---
 .../app/components/koenig-lexical-editor-input.js  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/koenig-lexical-editor-input.js b/ghost/admin/app/components/koenig-lexical-editor-input.js
index 1ff346d592..0532d336ad 100644
--- a/ghost/admin/app/components/koenig-lexical-editor-input.js
+++ b/ghost/admin/app/components/koenig-lexical-editor-input.js
@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/ember';
 import Component from '@glimmer/component';
 import React, {Suspense} from 'react';
+import cleanBasicHtml from '@tryghost/kg-clean-basic-html';
 import {action} from '@ember/object';
 import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
@@ -117,7 +118,16 @@ export default class KoenigLexicalEditorInput extends Component {
         // don't rethrow, Lexical will attempt to gracefully recover
     }
 
-    ReactComponent = (props) => {
+    ReactComponent = (props = {}) => {
+        // remove `p` wrapper
+        const cleanHtml = (html) => {
+            const cleanedHtml = cleanBasicHtml(html || '', {firstChildInnerContent: true});
+            props.onChangeHtml?.(cleanedHtml);
+        };
+
+        // wrap in a paragraph, so it gets parsed correctly
+        const initialHtml = props.html ? `<p>${props.html}</p>` : null;
+
         return (
             <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
                 <ErrorHandler>
@@ -136,7 +146,7 @@ export default class KoenigLexicalEditorInput extends Component {
                                 placeholderText={props.placeholderText}
                                 placeholderClassName="koenig-lexical-editor-input-placeholder"
                             >
-                                <HtmlOutputPlugin html={props.html} setHtml={props.onChangeHtml} />
+                                <HtmlOutputPlugin html={initialHtml} setHtml={cleanHtml} />
                             </KoenigComposableEditor>
                         </KoenigComposer>
                     </Suspense>