mirror of
https://github.com/WenPai-org/wpmind.git
synced 2025-08-03 02:48:41 +08:00
simplified preview hack code and styles
This commit is contained in:
parent
295ecf6aa5
commit
f054220647
2 changed files with 26 additions and 35 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue