simplified preview hack code and styles

This commit is contained in:
Nikita 2024-12-27 23:26:25 +03:00
parent 295ecf6aa5
commit f054220647
2 changed files with 26 additions and 35 deletions

View file

@ -12,12 +12,9 @@ import './style.scss';
import { memo, useState, useEffect, useRef } from '@wordpress/element';
import { BlockPreview } from '@wordpress/block-editor';
function RenderPreview({ response, className, style }) {
function RenderPreview({ response }) {
return (
<div
className={clsx('mind-popup-response__preview', className)}
style={style}
>
<div className="mind-popup-response__preview">
<BlockPreview
// Since the preview does not render properly first block align full, we need to create the wrapper Group block with our custom styles.
// Align classes rendered properly only for the inner blocks.
@ -96,38 +93,18 @@ const AIResponse = memo(
return null;
}
const hiddenPreviewStyles = {
position: 'absolute',
top: 0,
left: 0,
right: 0,
};
return (
<div className="mind-popup-response">
<div
className={clsx(
'mind-popup-response',
`mind-popup-response--${activePreview}`
)}
>
{(preview1Data.length > 0 || preview2Data.length > 0) && (
<div style={{ position: 'relative' }}>
<RenderPreview
response={preview1Data}
style={{
...(activePreview === 1
? {}
: hiddenPreviewStyles),
opacity: activePreview === 1 ? 1 : 0,
zIndex: activePreview === 1 ? 2 : 1,
}}
/>
<RenderPreview
response={preview2Data}
style={{
...(activePreview === 2
? {}
: hiddenPreviewStyles),
opacity: activePreview === 2 ? 1 : 0,
zIndex: activePreview === 2 ? 2 : 1,
}}
/>
</div>
<>
<RenderPreview response={preview1Data} />
<RenderPreview response={preview2Data} />
</>
)}
</div>
);

View file

@ -1,4 +1,6 @@
.mind-popup-response {
position: relative;
/* GPU acceleration */
transform: translateZ(0);
will-change: transform;
@ -17,6 +19,18 @@
will-change: opacity;
backface-visibility: hidden;
transform: translateZ(0);
z-index: 2;
}
// Hidden preview styles.
.mind-popup-response--1 .mind-popup-response__preview:nth-child(2),
.mind-popup-response--2 .mind-popup-response__preview:nth-child(1), {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
z-index: 1;
}
@keyframes mind-cursor-blink {