diff --git a/packages/core/src/drivers/MouseClickDriver.ts b/packages/core/src/drivers/MouseClickDriver.ts index 8efe43238..a0d2829b8 100644 --- a/packages/core/src/drivers/MouseClickDriver.ts +++ b/packages/core/src/drivers/MouseClickDriver.ts @@ -5,7 +5,9 @@ import { MouseClickEvent, MouseDoubleClickEvent } from '../events' export class MouseClickDriver extends EventDriver { onMouseClick = (e: MouseEvent) => { const target = e.target as HTMLElement - if (target?.closest('*[data-click-stop-propagation]')) { + if ( + target?.closest(`*[${this.engine.props.clickStopPropagationAttrName}]`) + ) { return } this.dispatch( @@ -22,7 +24,9 @@ export class MouseClickDriver extends EventDriver { onMouseDoubleClick = (e: MouseEvent) => { const target = e.target as HTMLElement - if (target?.closest('*[data-click-stop-propagation]')) { + if ( + target?.closest(`*[${this.engine.props.clickStopPropagationAttrName}]`) + ) { return } this.dispatch( diff --git a/packages/core/src/effects/useContentEditableEffect.ts b/packages/core/src/effects/useContentEditableEffect.ts index 3733df13e..0bff695d0 100644 --- a/packages/core/src/effects/useContentEditableEffect.ts +++ b/packages/core/src/effects/useContentEditableEffect.ts @@ -50,6 +50,16 @@ export const useContentEditableEffect = (engine: Engine) => { } } + function findTargetNodeId(element: Element) { + if (!element) return + const nodeId = element.getAttribute( + engine.props.contentEditableNodeIdAttrName + ) + if (nodeId) return nodeId + const parent = element.closest(`*[${engine.props.nodeIdAttrName}]`) + if (parent) return parent.getAttribute(engine.props.nodeIdAttrName) + } + engine.subscribeTo(MouseClickEvent, (event) => { const target = event.data.target as Element const editableElement = target?.closest?.( @@ -77,13 +87,8 @@ export const useContentEditableEffect = (engine: Engine) => { if (editableElement) { const editable = editableElement.getAttribute('contenteditable') if (editable === 'false' || !editable) { - const parentNodeElement = editableElement.closest( - `*[${engine.props.nodeIdAttrName}]` - ) - if (parentNodeElement) { - const nodeId = parentNodeElement.getAttribute( - engine.props.nodeIdAttrName - ) + const nodeId = findTargetNodeId(editableElement) + if (nodeId) { const targetNode = tree.findById(nodeId) if (targetNode) { globalState.activeElements.set(editableElement, targetNode) diff --git a/packages/core/src/models/Engine.ts b/packages/core/src/models/Engine.ts index 595a251d2..6ec308136 100644 --- a/packages/core/src/models/Engine.ts +++ b/packages/core/src/models/Engine.ts @@ -107,6 +107,8 @@ export class Engine extends Event { sourceIdAttrName: 'data-designer-source-id', nodeIdAttrName: 'data-designer-node-id', contentEditableAttrName: 'data-content-editable', + contentEditableNodeIdAttrName: 'data-content-editable-node-id', + clickStopPropagationAttrName: 'data-click-stop-propagation', nodeHelpersIdAttrName: 'data-designer-node-helpers-id', outlineNodeIdAttrName: 'data-designer-outline-node-id', defaultScreenType: ScreenType.PC, diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 4b469da10..8a013006c 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -15,6 +15,8 @@ export type IEngineProps = IEventProps & { sourceIdAttrName?: string //拖拽源Id的dom属性名 nodeIdAttrName?: string //节点Id的dom属性名 contentEditableAttrName?: string //原地编辑属性名 + contentEditableNodeIdAttrName?: string //原地编辑指定Node Id属性名 + clickStopPropagationAttrName?: string //点击阻止冒泡属性 outlineNodeIdAttrName?: string //大纲树节点ID的dom属性名 nodeHelpersIdAttrName?: string //节点工具栏属性名 defaultComponentTree?: ITreeNode[] //默认组件树 @@ -57,7 +59,6 @@ export interface IDesignerProps { draggable?: boolean //是否可拖拽,默认为true deletable?: boolean //是否可删除,默认为true cloneable?: boolean //是否可拷贝,默认为true - contentEditable?: Record //属性文案原地编辑{"title":"css selector"} resizable?: boolean //是否可修改尺寸,默认为false inlineLayout?: boolean //是否是内联布局 inlineChildrenLayout?: boolean //子节点是否内联