diff --git a/libs/components/editor-plugins/src/block-property/Plugin.tsx b/libs/components/editor-plugins/src/block-property/Plugin.tsx deleted file mode 100644 index 6178064f52..0000000000 --- a/libs/components/editor-plugins/src/block-property/Plugin.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import { createRoot, type Root } from 'react-dom/client'; -import { BasePlugin } from '../base-plugin'; -import { BlockDomInfo, HookType } from '@toeverything/framework/virgo'; - -import View from './View'; -import { Subscription } from 'rxjs'; -const PLUGIN_NAME = 'block-property'; - -export class BlockPropertyPlugin extends BasePlugin { - public static override get pluginName(): string { - return PLUGIN_NAME; - } - - private _root: Root | undefined; - private _rootDom: HTMLElement; - // record mouse moving block id - private _currentSlidingBlockInfo: BlockDomInfo; - private _hover = false; - - private _setHover = (isHover: boolean) => { - this._hover = isHover; - }; - private _insertRootToBlock = async () => { - this._rootDom = document.createElement('div'); - this._rootDom.style.position = 'relative'; - this._rootDom.style.zIndex = '1000'; - this._rootDom.classList.add(`id-${PLUGIN_NAME}`); - this._currentSlidingBlockInfo.dom.appendChild(this._rootDom); - this._root = createRoot(this._rootDom); - }; - - private _onSlidingBlockChange = async (blockDomInfo: BlockDomInfo) => { - this._currentSlidingBlockInfo = blockDomInfo; - await this._insertRootToBlock(); - this._renderView(); - }; - - private _onMouseMove = async ([event, blockDomInfo]: [ - React.MouseEvent, - BlockDomInfo - ]) => { - if ( - blockDomInfo.blockId !== this._currentSlidingBlockInfo?.blockId && - !this._hover - ) { - await this.dispose(); - - await this._onSlidingBlockChange(blockDomInfo); - } - }; - - private _renderView = () => { - this._root.render( - - ); - }; - - protected override _onRender(): void { - const sub = this.hooks - .get(HookType.AFTER_ON_NODE_MOUSE_MOVE) - .subscribe(this._onMouseMove); - - this.sub.add(sub); - } - - override async dispose() { - if (this._currentSlidingBlockInfo) { - this._currentSlidingBlockInfo.dom.removeChild(this._rootDom); - this._currentSlidingBlockInfo = undefined; - } - - this._rootDom = undefined; - if (this._root) { - this._root.unmount(); - } - super.dispose(); - } -} diff --git a/libs/components/editor-plugins/src/block-property/View.tsx b/libs/components/editor-plugins/src/block-property/View.tsx deleted file mode 100644 index 4d97f4cdc6..0000000000 --- a/libs/components/editor-plugins/src/block-property/View.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { StrictMode, useState } from 'react'; -import { BlockDomInfo } from '@toeverything/framework/virgo'; -import style9 from 'style9'; -import { styled } from '@toeverything/components/ui'; -import { Add } from '@mui/icons-material'; - -export default (props: { - blockDomInfo: BlockDomInfo; - setIsHover: (isHover: boolean) => void; -}) => { - const { blockDomInfo, setIsHover } = props; - - const [showPopover, setShowPopover] = useState(false); - return ( - -
{ - setShowPopover(true); - setIsHover(true); - }} - onMouseLeave={() => { - setShowPopover(false); - setIsHover(false); - }} - > -
-
- -
-
- - ); -}; -const Container = styled('div')({ - background: 'blue', - '&:hover .popover': { - background: 'red', - display: 'flex', - }, -}); - -const styles = style9.create({ - popover: { - backgroundColor: '#fff', - display: 'none', - boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', - padding: '8px', - borderRadius: '0 8px 8px 8px', - position: 'absolute', - }, - popoverShow: { - display: 'flex', - }, - triggerLine: { - position: 'absolute', - bottom: 0, - left: 0, - height: '4px', - width: '20px', - backgroundColor: '#aaa', - cursor: 'pointer', - }, -});