@@ -102,25 +102,23 @@ export function Page(props: PageProps) {
-
- {page_id ? (
-
- ) : (
-
-
-
- )}
-
+ {page_id ? (
+
+ ) : (
+
+
+
+ )}
);
@@ -128,7 +126,6 @@ export function Page(props: PageProps) {
const LigoApp = styled('div')({
width: '100vw',
- position: 'relative',
display: 'flex',
flex: '1 1 0%',
backgroundColor: 'white',
@@ -136,19 +133,11 @@ const LigoApp = styled('div')({
});
const LigoRightContainer = styled('div')({
- position: 'relative',
width: '100%',
+ overflowY: 'auto',
flex: 'auto',
});
-const LigoEditorOuterContainer = styled('div')({
- position: 'absolute',
- height: '100%',
- width: '100%',
- overflowX: 'hidden',
- overflowY: 'hidden',
-});
-
const LigoLeftContainer = styled('div')({
flex: '0 0 auto',
});
diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx
index ddeabab4ff..7a4e520f65 100644
--- a/libs/components/editor-core/src/RenderRoot.tsx
+++ b/libs/components/editor-core/src/RenderRoot.tsx
@@ -31,10 +31,8 @@ export const RenderRoot: FC
> = ({
editorElement,
children,
}) => {
- const contentRef = useRef(null);
const selectionRef = useRef(null);
const triggeredBySelect = useRef(false);
- const [container, setContainer] = useState();
const [pageWidth, setPageWidth] = useState(MIN_PAGE_WIDTH);
const isOnDrag = useIsOnDrag(editor);
@@ -55,13 +53,6 @@ export const RenderRoot: FC> = ({
}
}, [editor.workspace, rootId]);
- useEffect(() => {
- if (container) {
- editor.container = container;
- editor.getHooks().render();
- }
- }, [editor, container]);
-
useEffect(() => {
fetchPageBlockWidth();
@@ -85,11 +76,7 @@ export const RenderRoot: FC> = ({
event: React.MouseEvent
) => {
selectionRef.current?.onMouseMove(event);
- if (!contentRef.current) {
- return;
- }
- const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
- editor.getHooks().onRootNodeMouseMove(event, rootRect);
+ editor.getHooks().onRootNodeMouseMove(event);
const slidingBlock = await editor.getBlockByPoint(
new Point(event.clientX, event.clientY)
@@ -100,7 +87,6 @@ export const RenderRoot: FC> = ({
blockId: slidingBlock.id,
dom: slidingBlock.dom,
rect: slidingBlock.dom.getBoundingClientRect(),
- rootRect: rootRect,
type: slidingBlock.type,
properties: slidingBlock.getProperties(),
});
@@ -149,33 +135,21 @@ export const RenderRoot: FC> = ({
};
const onDragOver = (event: React.DragEvent) => {
- event.dataTransfer.dropEffect = 'move';
- event.preventDefault();
- if (!contentRef.current) {
- return;
- }
- const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
editor.dragDropManager.handlerEditorDragOver(event);
if (editor.dragDropManager.isEnabled()) {
- editor.getHooks().onRootNodeDragOver(event, rootRect);
+ editor.getHooks().onRootNodeDragOver(event);
}
};
const onDragOverCapture = (event: React.DragEvent) => {
- event.preventDefault();
- if (!contentRef.current) {
- return;
- }
- const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
if (editor.dragDropManager.isEnabled()) {
- editor.getHooks().onRootNodeDragOver(event, rootRect);
+ editor.getHooks().onRootNodeDragOver(event);
}
};
const onDragEnd = (event: React.DragEvent) => {
- const rootRect: DOMRect = contentRef.current.getBoundingClientRect();
editor.dragDropManager.handlerEditorDragEnd(event);
- editor.getHooks().onRootNodeDragEnd(event, rootRect);
+ editor.getHooks().onRootNodeDragEnd(event);
};
const onDrop = (event: React.DragEvent) => {
@@ -192,7 +166,10 @@ export const RenderRoot: FC> = ({
{
- ref && setContainer(ref);
+ if (ref != null && ref !== editor.container) {
+ editor.container = ref;
+ editor.getHooks().render();
+ }
}}
onMouseMove={onMouseMove}
onMouseDown={onMouseDown}
@@ -208,18 +185,13 @@ export const RenderRoot: FC> = ({
onDrop={onDrop}
isOnDrag={isOnDrag}
>
-
+
{children}
- {patchedNodes}
{/** TODO: remove selectionManager insert */}
- {container && editor && (
-
- )}
+ {editor && }
{editor.isWhiteboard ? null : }
+ {patchedNodes}
);
@@ -281,6 +253,8 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
);
}
+const PADDING_X = 150;
+
const Container = styled('div')(
({
isWhiteboard,
@@ -290,9 +264,7 @@ const Container = styled('div')(
isOnDrag: boolean;
}) => ({
width: '100%',
- height: '100%',
- overflowY: isWhiteboard ? 'unset' : 'auto',
- padding: isWhiteboard ? 0 : '96px 150px 0 150px',
+ padding: isWhiteboard ? 0 : `96px ${PADDING_X}px 0 ${PADDING_X}px`,
minWidth: isWhiteboard ? 'unset' : '940px',
position: 'relative',
...(isOnDrag && {
@@ -309,7 +281,9 @@ const Content = styled('div')({
margin: '0 auto',
transitionDuration: '.2s',
transitionTimingFunction: 'ease-in',
- position: 'relative',
});
-const ScrollBlankContainter = styled('div')({ paddingBottom: '30vh' });
+const ScrollBlankContainter = styled('div')({
+ paddingBottom: '30vh',
+ margin: `0 -${PADDING_X}px`,
+});
diff --git a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx
index 6ef1db4c92..859fea03de 100644
--- a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx
+++ b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx
@@ -1,8 +1,6 @@
import { AsyncBlock, BlockEditor } from '../editor';
import { ReactElement } from 'react';
-export const dragDropWrapperClass = 'drag-drop-wrapper';
-
interface DragDropWrapperProps {
editor: BlockEditor;
block: AsyncBlock;
@@ -14,25 +12,16 @@ export function DragDropWrapper({
editor,
block,
}: DragDropWrapperProps) {
- const handler_drag_over: React.DragEventHandler<
- HTMLDivElement
- > = async event => {
- event.preventDefault();
- const rootDom = await editor.getBlockDomById(editor.getRootBlockId());
- if (block.dom && rootDom) {
+ const handlerDragOver: React.DragEventHandler = event => {
+ if (block.dom) {
editor.getHooks().afterOnNodeDragOver(event, {
blockId: block.id,
dom: block.dom,
rect: block.dom?.getBoundingClientRect(),
- rootRect: rootDom.getBoundingClientRect(),
type: block.type,
properties: block.getProperties(),
});
}
};
- return (
-
- {children}
-
- );
+ return {children}
;
}
diff --git a/libs/components/editor-core/src/editor/plugin/hooks.ts b/libs/components/editor-core/src/editor/plugin/hooks.ts
index 5798b1982d..b20ee0defa 100644
--- a/libs/components/editor-core/src/editor/plugin/hooks.ts
+++ b/libs/components/editor-core/src/editor/plugin/hooks.ts
@@ -15,37 +15,37 @@ interface PluginHookInfo {
}
export class Hooks implements HooksRunner, PluginHooks {
- private hooks_map: Map = new Map();
+ private _hooksMap: Map = new Map();
dispose() {
- this.hooks_map.clear();
+ this._hooksMap.clear();
}
- private run_hook(key: HookType, ...params: unknown[]): void {
- const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || [];
- hook_infos.forEach(hook_info => {
- if (hook_info.once) {
- this.removeHook(key, hook_info.callback);
+ private _runHook(key: HookType, ...params: unknown[]): void {
+ const hookInfos: PluginHookInfo[] = this._hooksMap.get(key) || [];
+ hookInfos.forEach(hookInfo => {
+ if (hookInfo.once) {
+ this.removeHook(key, hookInfo.callback);
}
- let is_stopped_propagation = false;
+ let isStoppedPropagation = false;
const hookOption: HookBaseArgs = {
stopImmediatePropagation: () => {
- is_stopped_propagation = true;
+ isStoppedPropagation = true;
},
};
- hook_info.callback.call(
- hook_info.thisObj || this,
+ hookInfo.callback.call(
+ hookInfo.thisObj || this,
...params,
hookOption
);
- return is_stopped_propagation;
+ return isStoppedPropagation;
});
}
- private has_hook(key: HookType, callback: AnyFunction): boolean {
- const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || [];
- for (let i = hook_infos.length - 1; i >= 0; i--) {
- if (hook_infos[i].callback === callback) {
+ private _hasHook(key: HookType, callback: AnyFunction): boolean {
+ const hookInfos: PluginHookInfo[] = this._hooksMap.get(key) || [];
+ for (let i = hookInfos.length - 1; i >= 0; i--) {
+ if (hookInfos[i].callback === callback) {
return true;
}
}
@@ -59,14 +59,14 @@ export class Hooks implements HooksRunner, PluginHooks {
thisObj?: AnyThisType,
once?: boolean
): void {
- if (this.has_hook(key, callback)) {
+ if (this._hasHook(key, callback)) {
throw new Error('Duplicate registration of the same class');
}
- if (!this.hooks_map.has(key)) {
- this.hooks_map.set(key, []);
+ if (!this._hooksMap.has(key)) {
+ this._hooksMap.set(key, []);
}
- const hook_infos: PluginHookInfo[] = this.hooks_map.get(key);
- hook_infos.push({ callback, thisObj, once });
+ const hookInfos: PluginHookInfo[] = this._hooksMap.get(key);
+ hookInfos.push({ callback, thisObj, once });
}
// 执行一次
@@ -80,122 +80,112 @@ export class Hooks implements HooksRunner, PluginHooks {
// 移除
public removeHook(key: HookType, callback: AnyFunction): void {
- const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || [];
- for (let i = hook_infos.length - 1; i >= 0; i--) {
- if (hook_infos[i].callback === callback) {
- hook_infos.splice(i, 1);
+ const hookInfos: PluginHookInfo[] = this._hooksMap.get(key) || [];
+ for (let i = hookInfos.length - 1; i >= 0; i--) {
+ if (hookInfos[i].callback === callback) {
+ hookInfos.splice(i, 1);
}
}
}
public init(): void {
- this.run_hook(HookType.INIT);
+ this._runHook(HookType.INIT);
}
public render(): void {
- this.run_hook(HookType.RENDER);
+ this._runHook(HookType.RENDER);
}
public onRootNodeKeyDown(e: React.KeyboardEvent): void {
- this.run_hook(HookType.ON_ROOT_NODE_KEYDOWN, e);
+ this._runHook(HookType.ON_ROOT_NODE_KEYDOWN, e);
}
public onRootNodeKeyDownCapture(
e: React.KeyboardEvent
): void {
- this.run_hook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, e);
+ this._runHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, e);
}
public onRootNodeKeyUp(e: React.KeyboardEvent): void {
- this.run_hook(HookType.ON_ROOT_NODE_KEYUP, e);
+ this._runHook(HookType.ON_ROOT_NODE_KEYUP, e);
}
public onRootNodeMouseDown(
e: React.MouseEvent
): void {
- this.run_hook(HookType.ON_ROOTNODE_MOUSE_DOWN, e);
+ this._runHook(HookType.ON_ROOTNODE_MOUSE_DOWN, e);
}
public onRootNodeMouseMove(
- e: React.MouseEvent,
- root_rect: DOMRect
+ e: React.MouseEvent
): void {
- this.run_hook(HookType.ON_ROOTNODE_MOUSE_MOVE, e, root_rect);
+ this._runHook(HookType.ON_ROOTNODE_MOUSE_MOVE, e);
}
public onRootNodeMouseUp(
e: React.MouseEvent
): void {
- this.run_hook(HookType.ON_ROOTNODE_MOUSE_UP, e);
+ this._runHook(HookType.ON_ROOTNODE_MOUSE_UP, e);
}
public onRootNodeMouseOut(
e: React.MouseEvent
): void {
- this.run_hook(HookType.ON_ROOTNODE_MOUSE_OUT, e);
+ this._runHook(HookType.ON_ROOTNODE_MOUSE_OUT, e);
}
public onRootNodeMouseLeave(
e: React.MouseEvent
): void {
- this.run_hook(HookType.ON_ROOTNODE_MOUSE_LEAVE, e);
+ this._runHook(HookType.ON_ROOTNODE_MOUSE_LEAVE, e);
}
public afterOnNodeMouseMove(
e: React.MouseEvent,
node: BlockDomInfo
): void {
- this.run_hook(HookType.AFTER_ON_NODE_MOUSE_MOVE, e, node);
+ this._runHook(HookType.AFTER_ON_NODE_MOUSE_MOVE, e, node);
}
public afterOnResize(
e: React.MouseEvent
): void {
- this.run_hook(HookType.AFTER_ON_RESIZE, e);
+ this._runHook(HookType.AFTER_ON_RESIZE, e);
}
- public onRootNodeDragOver(
- e: React.DragEvent,
- root_rect: DOMRect
- ): void {
- this.run_hook(HookType.ON_ROOTNODE_DRAG_OVER, e, root_rect);
+ public onRootNodeDragOver(e: React.DragEvent): void {
+ this._runHook(HookType.ON_ROOTNODE_DRAG_OVER, e);
}
- public onRootNodeDragEnd(
- e: React.DragEvent,
- root_rect: DOMRect
- ): void {
- this.run_hook(HookType.ON_ROOTNODE_DRAG_END, e, root_rect);
+ public onRootNodeDragEnd(e: React.DragEvent): void {
+ this._runHook(HookType.ON_ROOTNODE_DRAG_END, e);
}
public onRootNodeDrop(e: React.DragEvent): void {
- this.run_hook(HookType.ON_ROOTNODE_DROP, e);
+ this._runHook(HookType.ON_ROOTNODE_DROP, e);
}
- public onRootNodeDragOverCapture(
- e: React.DragEvent,
- root_rect: DOMRect
- ): void {
- this.run_hook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e, root_rect);
+ public onRootNodeDragOverCapture(e: React.DragEvent): void {
+ this._runHook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e);
}
public afterOnNodeDragOver(
e: React.DragEvent,
node: BlockDomInfo
): void {
- this.run_hook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node);
+ this._runHook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node);
}
public onSearch(): void {
- this.run_hook(HookType.ON_SEARCH);
+ this._runHook(HookType.ON_SEARCH);
}
public beforeCopy(e: ClipboardEvent): void {
- this.run_hook(HookType.BEFORE_COPY, e);
+ this._runHook(HookType.BEFORE_COPY, e);
}
public beforeCut(e: ClipboardEvent): void {
- this.run_hook(HookType.BEFORE_CUT, e);
+ this._runHook(HookType.BEFORE_CUT, e);
}
public onRootNodeScroll(e: React.UIEvent): void {
diff --git a/libs/components/editor-core/src/editor/types.ts b/libs/components/editor-core/src/editor/types.ts
index a4166ecfdf..24d8f6a641 100644
--- a/libs/components/editor-core/src/editor/types.ts
+++ b/libs/components/editor-core/src/editor/types.ts
@@ -186,7 +186,6 @@ export interface BlockDomInfo {
dom: HTMLElement;
type: BlockFlavorKeys;
rect: DOMRect;
- rootRect: DOMRect;
properties: Record;
}
@@ -201,8 +200,7 @@ export interface HooksRunner {
e: React.MouseEvent
) => void;
onRootNodeMouseMove: (
- e: React.MouseEvent,
- root_rect: DOMRect
+ e: React.MouseEvent
) => void;
onRootNodeMouseUp: (
e: React.MouseEvent
@@ -219,14 +217,8 @@ export interface HooksRunner {
node: BlockDomInfo
) => void;
afterOnResize: (e: React.MouseEvent) => void;
- onRootNodeDragOver: (
- e: React.DragEvent,
- root_rect: DOMRect
- ) => void;
- onRootNodeDragEnd: (
- e: React.DragEvent,
- root_rect: DOMRect
- ) => void;
+ onRootNodeDragOver: (e: React.DragEvent) => void;
+ onRootNodeDragEnd: (e: React.DragEvent) => void;
onRootNodeDrop: (e: React.DragEvent) => void;
afterOnNodeDragOver: (
e: React.DragEvent,
diff --git a/libs/components/editor-plugins/src/base-plugin.ts b/libs/components/editor-plugins/src/base-plugin.ts
index ad3d211d86..f6086fe56d 100644
--- a/libs/components/editor-plugins/src/base-plugin.ts
+++ b/libs/components/editor-plugins/src/base-plugin.ts
@@ -41,8 +41,8 @@ export abstract class BasePlugin implements Plugin {
return hooks.removeHook(...args);
},
};
- this.on_render = this.on_render.bind(this);
- hooks.addHook(HookType.RENDER, this.on_render, this);
+ this._onRender = this._onRender.bind(this);
+ hooks.addHook(HookType.RENDER, this._onRender, this);
}
/**
@@ -55,7 +55,7 @@ export abstract class BasePlugin implements Plugin {
/**
* will trigger multiple times
*/
- protected on_render(): void {
+ protected _onRender(): void {
// implement in subclass
}
diff --git a/libs/components/editor-plugins/src/block-property/index.tsx b/libs/components/editor-plugins/src/block-property/index.tsx
index 53c00860a5..ced1105839 100644
--- a/libs/components/editor-plugins/src/block-property/index.tsx
+++ b/libs/components/editor-plugins/src/block-property/index.tsx
@@ -60,7 +60,7 @@ export class BlockPropertyPlugin extends BasePlugin {
);
};
- protected override on_render(): void {
+ protected override _onRender(): void {
this.hooks.addHook(
HookType.AFTER_ON_NODE_MOUSE_MOVE,
this.on_mouse_move,
diff --git a/libs/components/editor-plugins/src/comment/Plugin.tsx b/libs/components/editor-plugins/src/comment/Plugin.tsx
index a454aafe9f..e1a3b8d102 100644
--- a/libs/components/editor-plugins/src/comment/Plugin.tsx
+++ b/libs/components/editor-plugins/src/comment/Plugin.tsx
@@ -12,7 +12,7 @@ export class AddCommentPlugin extends BasePlugin {
private root: PluginRenderRoot;
- protected override on_render(): void {
+ protected override _onRender(): void {
this.root = new PluginRenderRoot({
name: AddCommentPlugin.pluginName,
render: this.editor.reactRenderRoot?.render,
diff --git a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx
index 898b471ccf..394ca6ceab 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx
@@ -14,8 +14,7 @@ export class CommandMenuPlugin extends BasePlugin {
return PLUGIN_NAME;
}
- protected override on_render(): void {
- if (this.editor.isWhiteboard) return;
+ protected override _onRender(): void {
const container = document.createElement('div');
// TODO remove
container.classList.add(`id-${PLUGIN_NAME}`);
diff --git a/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx b/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx
index 0c6bc70485..2040cfc33f 100644
--- a/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx
+++ b/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx
@@ -4,7 +4,7 @@ import {
PluginHooks,
Virgo,
} from '@toeverything/components/editor-core';
-import { domToRect, Point } from '@toeverything/utils';
+import { Point } from '@toeverything/utils';
import { GroupDirection } from '@toeverything/framework/virgo';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { DragItem } from './DragItem';
@@ -46,7 +46,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
setShowMenu(false);
}
},
- [setShowMenu]
+ []
);
const handleRootDragOver = useCallback(
@@ -128,8 +128,8 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
if (editor.container) {
setPosition(
new Point(
- groupBlock.dom.offsetLeft - editor.container.offsetLeft,
- groupBlock.dom.offsetTop - editor.container.offsetTop
+ groupBlock.dom.offsetLeft,
+ groupBlock.dom.offsetTop
)
);
}
diff --git a/libs/components/editor-plugins/src/menu/group-menu/Line.tsx b/libs/components/editor-plugins/src/menu/group-menu/Line.tsx
index 4613f37dd2..c826c2ccd9 100644
--- a/libs/components/editor-plugins/src/menu/group-menu/Line.tsx
+++ b/libs/components/editor-plugins/src/menu/group-menu/Line.tsx
@@ -22,9 +22,9 @@ export const Line = function ({ direction, editor, groupBlock }: LineProps) {
if (groupBlock && groupBlock.dom && editor.container) {
setRect(
Rect.fromLWTH(
- groupBlock.dom.offsetLeft - editor.container.offsetLeft,
+ groupBlock.dom.offsetLeft,
groupBlock.dom.offsetWidth,
- groupBlock.dom.offsetTop - editor.container.offsetTop,
+ groupBlock.dom.offsetTop,
groupBlock.dom.offsetHeight
)
);
diff --git a/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
index 8774d7fca6..115e754202 100644
--- a/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
+++ b/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
@@ -13,7 +13,7 @@ export class GroupMenuPlugin extends BasePlugin {
return PLUGIN_NAME;
}
- protected override on_render(): void {
+ protected override _onRender(): void {
if (this.editor.isWhiteboard) return;
this.root = new PluginRenderRoot({
name: PLUGIN_NAME,
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
index b0d16140a2..1c47ca9646 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
@@ -12,7 +12,7 @@ export class InlineMenuPlugin extends BasePlugin {
private root: PluginRenderRoot;
- protected override on_render(): void {
+ protected override _onRender(): void {
this.root = new PluginRenderRoot({
name: InlineMenuPlugin.pluginName,
render: this.editor.reactRenderRoot?.render,
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
index af40c73014..44932ac99c 100644
--- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
@@ -39,8 +39,8 @@ type LineInfo = {
blockInfo: BlockDomInfo;
};
-function Line(props: { lineInfo: LineInfo }) {
- const { lineInfo } = props;
+function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
+ const { lineInfo, rootRect } = props;
if (!lineInfo || lineInfo.direction === BlockDropPlacement.none) {
return null;
}
@@ -58,7 +58,7 @@ function Line(props: { lineInfo: LineInfo }) {
...lineStyle,
width: intersectionRect.width,
height: 2,
- left: intersectionRect.x - blockInfo.rootRect.x,
+ left: intersectionRect.x - rootRect.x,
};
const topLineStyle = {
...horizontalLineStyle,
@@ -66,22 +66,22 @@ function Line(props: { lineInfo: LineInfo }) {
};
const bottomLineStyle = {
...horizontalLineStyle,
- top: intersectionRect.bottom + 1 - blockInfo.rootRect.y,
+ top: intersectionRect.bottom + 1 - rootRect.y,
};
const verticalLineStyle = {
...lineStyle,
width: 2,
height: intersectionRect.height,
- top: intersectionRect.y - blockInfo.rootRect.y,
+ top: intersectionRect.y - rootRect.y,
};
const leftLineStyle = {
...verticalLineStyle,
- left: intersectionRect.x - 10 - blockInfo.rootRect.x,
+ left: intersectionRect.x - 10 - rootRect.x,
};
const rightLineStyle = {
...verticalLineStyle,
- left: intersectionRect.right + 10 - blockInfo.rootRect.x,
+ left: intersectionRect.right + 10 - rootRect.x,
};
const styleMap = {
left: leftLineStyle,
@@ -120,6 +120,7 @@ export const LeftMenuDraggable: FC = props => {
const [visible, setVisible] = useState(defaultVisible);
const [anchorEl, setAnchorEl] = useState();
+ const [rootRect, setRootRect] = useState(() => new DOMRect());
const [block, setBlock] = useState();
const [line, setLine] = useState(undefined);
@@ -135,6 +136,7 @@ export const LeftMenuDraggable: FC = props => {
const onDragStart = async (event: React.DragEvent) => {
editor.dragDropManager.isOnDrag = true;
if (block == null) return;
+ setRootRect(editor.container.getBoundingClientRect());
const dragImage = await editor.blockHelper.getBlockDragImg(
block.blockId
);
@@ -182,6 +184,7 @@ export const LeftMenuDraggable: FC = props => {
const sub = blockInfo.subscribe(block => {
setBlock(block);
if (block != null) {
+ setRootRect(editor.container.getBoundingClientRect());
setVisible(true);
}
});
@@ -194,6 +197,7 @@ export const LeftMenuDraggable: FC = props => {
setLine(undefined);
} else {
const { direction, blockInfo } = data;
+ setRootRect(editor.container.getBoundingClientRect());
setLine(prev => {
if (
prev?.blockInfo.blockId !== blockInfo.blockId ||
@@ -210,7 +214,7 @@ export const LeftMenuDraggable: FC = props => {
}
});
return () => sub.unsubscribe();
- }, [editor.dragDropManager, lineInfo]);
+ }, [editor, lineInfo]);
return (
<>
@@ -223,8 +227,8 @@ export const LeftMenuDraggable: FC = props => {
block.rect.left -
MENU_WIDTH -
MENU_BUTTON_OFFSET
- ) - block.rootRect.left,
- top: block.rect.top - block.rootRect.top,
+ ) - rootRect.left,
+ top: block.rect.top - rootRect.top,
opacity: visible ? 1 : 0,
zIndex: 1,
}}
@@ -246,7 +250,7 @@ export const LeftMenuDraggable: FC = props => {
}
)}
-
+
);
};
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
index d0e21c8063..98eda5a1e7 100644
--- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
@@ -147,7 +147,7 @@ export class LeftMenuPlugin extends BasePlugin {
this._blockInfo.next(blockInfo);
};
- protected override on_render(): void {
+ protected override _onRender(): void {
this.root = new PluginRenderRoot({
name: LeftMenuPlugin.pluginName,
render: (...args) => {
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx b/libs/components/editor-plugins/src/menu/reference-menu/index.tsx
index 18174250f6..192be43463 100644
--- a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx
+++ b/libs/components/editor-plugins/src/menu/reference-menu/index.tsx
@@ -13,7 +13,7 @@ export class ReferenceMenuPlugin extends BasePlugin {
return PLUGIN_NAME;
}
- protected override on_render(): void {
+ protected override _onRender(): void {
const container = document.createElement('div');
// TODO: remove
container.classList.add(`id-${PLUGIN_NAME}`);
diff --git a/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx b/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx
index a4e42216af..38726df026 100644
--- a/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx
+++ b/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx
@@ -12,7 +12,7 @@ export class SelectionGroupPlugin extends BasePlugin {
private root: PluginRenderRoot | undefined;
- protected override on_render() {
+ protected override _onRender() {
this.root = new PluginRenderRoot({
name: SelectionGroupPlugin.pluginName,
render: this.editor.reactRenderRoot?.render,
diff --git a/libs/components/editor-plugins/src/placeholder/Placeholder.tsx b/libs/components/editor-plugins/src/placeholder/Placeholder.tsx
index 5fcfec9e29..4772fc836d 100644
--- a/libs/components/editor-plugins/src/placeholder/Placeholder.tsx
+++ b/libs/components/editor-plugins/src/placeholder/Placeholder.tsx
@@ -12,7 +12,7 @@ export class PlaceholderPlugin extends BasePlugin {
return PLUGIN_NAME;
}
- protected override on_render(): void {
+ protected override _onRender(): void {
const container = document.createElement('div');
// TODO remove
container.classList.add(`id-${PLUGIN_NAME}`);
diff --git a/libs/components/ui/src/patch-elements/index.tsx b/libs/components/ui/src/PatchElements.tsx
similarity index 63%
rename from libs/components/ui/src/patch-elements/index.tsx
rename to libs/components/ui/src/PatchElements.tsx
index 46794e841c..c1326df98c 100644
--- a/libs/components/ui/src/patch-elements/index.tsx
+++ b/libs/components/ui/src/PatchElements.tsx
@@ -6,12 +6,12 @@ export type UnPatchNode = () => void;
export type PatchNode = (key: string, node: ReactNode) => UnPatchNode;
export const usePatchNodes = () => {
- const [nodes, set_nodes] = useState>({});
+ const [nodes, setNodes] = useState>({});
- const patch_node: PatchNode = (key: string, node: ReactNode) => {
- set_nodes(oldNodes => ({ ...oldNodes, [key]: node }));
+ const patchNode: PatchNode = (key: string, node: ReactNode) => {
+ setNodes(oldNodes => ({ ...oldNodes, [key]: node }));
return () => {
- set_nodes(oldNodes => {
+ setNodes(oldNodes => {
const nodes = { ...oldNodes };
delete nodes[key];
return nodes;
@@ -19,11 +19,11 @@ export const usePatchNodes = () => {
};
};
- const has_node = (key: string) => {
+ const hasNode = (key: string) => {
return has(nodes, key);
};
- const patched_nodes = (
+ const patchedNodes = (
<>
{Object.entries(nodes).map(([key, node]) => {
return {node};
@@ -32,8 +32,8 @@ export const usePatchNodes = () => {
);
return {
- patch: patch_node,
- has: has_node,
- patchedNodes: patched_nodes,
+ patch: patchNode,
+ has: hasNode,
+ patchedNodes: patchedNodes,
};
};
diff --git a/libs/components/ui/src/index.ts b/libs/components/ui/src/index.ts
index 24e76564c8..46769d4b9c 100644
--- a/libs/components/ui/src/index.ts
+++ b/libs/components/ui/src/index.ts
@@ -27,8 +27,8 @@ export { message } from './message';
export { Input } from './input';
export type { InputProps } from './input';
export { Tooltip } from './tooltip';
-export { usePatchNodes } from './patch-elements';
-export type { PatchNode, UnPatchNode } from './patch-elements';
+export { usePatchNodes } from './PatchElements';
+export type { PatchNode, UnPatchNode } from './PatchElements';
export { Tag } from './tag';
export type { TagProps } from './tag';
export { Divider } from './divider';