mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Removed p
wrapper for koenig-lexical-input (#16754)
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.
This commit is contained in:
parent
6518d2ccae
commit
9051ea62aa
1 changed files with 12 additions and 2 deletions
|
@ -1,6 +1,7 @@
|
||||||
import * as Sentry from '@sentry/ember';
|
import * as Sentry from '@sentry/ember';
|
||||||
import Component from '@glimmer/component';
|
import Component from '@glimmer/component';
|
||||||
import React, {Suspense} from 'react';
|
import React, {Suspense} from 'react';
|
||||||
|
import cleanBasicHtml from '@tryghost/kg-clean-basic-html';
|
||||||
import {action} from '@ember/object';
|
import {action} from '@ember/object';
|
||||||
import {inject} from 'ghost-admin/decorators/inject';
|
import {inject} from 'ghost-admin/decorators/inject';
|
||||||
import {inject as service} from '@ember/service';
|
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
|
// 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 (
|
return (
|
||||||
<div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
|
<div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
|
||||||
<ErrorHandler>
|
<ErrorHandler>
|
||||||
|
@ -136,7 +146,7 @@ export default class KoenigLexicalEditorInput extends Component {
|
||||||
placeholderText={props.placeholderText}
|
placeholderText={props.placeholderText}
|
||||||
placeholderClassName="koenig-lexical-editor-input-placeholder"
|
placeholderClassName="koenig-lexical-editor-input-placeholder"
|
||||||
>
|
>
|
||||||
<HtmlOutputPlugin html={props.html} setHtml={props.onChangeHtml} />
|
<HtmlOutputPlugin html={initialHtml} setHtml={cleanHtml} />
|
||||||
</KoenigComposableEditor>
|
</KoenigComposableEditor>
|
||||||
</KoenigComposer>
|
</KoenigComposer>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
Loading…
Add table
Reference in a new issue