Add debounce for custom html reset
[MAILPOET-2462]
This commit is contained in:
committed by
Pavel Dohnal
parent
6c30bc9c3e
commit
77abb04c40
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import {
|
||||
Panel,
|
||||
PanelBody,
|
||||
@ -9,8 +9,19 @@ import {
|
||||
import { InspectorControls } from '@wordpress/block-editor';
|
||||
import PropTypes from 'prop-types';
|
||||
import MailPoet from 'mailpoet';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
const CustomHtmlEdit = ({ attributes, setAttributes }) => {
|
||||
const [renderedContent, setRenderedContent] = useState(attributes.content);
|
||||
const setRenderedContentDebounced = useCallback(debounce((content) => {
|
||||
setRenderedContent(content);
|
||||
}, 300), []);
|
||||
|
||||
const handleContentChange = (content) => {
|
||||
setAttributes({ content });
|
||||
setRenderedContentDebounced(content);
|
||||
};
|
||||
|
||||
const inspectorControls = (
|
||||
<InspectorControls>
|
||||
<Panel>
|
||||
@ -20,7 +31,7 @@ const CustomHtmlEdit = ({ attributes, setAttributes }) => {
|
||||
value={attributes.content}
|
||||
data-automation-id="settings_custom_html_content"
|
||||
rows={4}
|
||||
onChange={(content) => setAttributes({ content })}
|
||||
onChange={handleContentChange}
|
||||
/>
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('blockCustomHtmlNl2br')}
|
||||
@ -33,12 +44,12 @@ const CustomHtmlEdit = ({ attributes, setAttributes }) => {
|
||||
</InspectorControls>
|
||||
);
|
||||
const styles = attributes.nl2br ? ['body { white-space: pre-line; }'] : [];
|
||||
const key = `${attributes.content}_${styles}`;
|
||||
const key = `${renderedContent}_${styles}`;
|
||||
return (
|
||||
<>
|
||||
{inspectorControls}
|
||||
<div>
|
||||
<SandBox html={attributes.content} styles={styles} key={key} />
|
||||
<SandBox html={renderedContent} styles={styles} key={key} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
Reference in New Issue
Block a user