feat(core): support data-content-editable-node-id

alibaba · Aug 21, 2021 · ad7790d · ad7790d
1 parent 2b1cc7c
commit ad7790d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git 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<Engine> {
   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<Engine> {
 
   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
@@ -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
@@ -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
@@ -15,6 +15,8 @@ export type IEngineProps<T = Event> = IEventProps<T> & {
   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<string, string> //属性文案原地编辑{"title":"css selector"}
   resizable?: boolean //是否可修改尺寸，默认为false
   inlineLayout?: boolean //是否是内联布局
   inlineChildrenLayout?: boolean //子节点是否内联