feat: amis-editor 支持内联编辑 (#11470)

baidu · Jan 9, 2025 · 7811d19 · 7811d19
1 parent db7172f
commit 7811d19
Show file tree

Hide file tree

Showing 17 changed files with 486 additions and 9 deletions.
diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss
@@ -730,6 +730,14 @@
     }
   }
 
+  &.focused {
+    border: 1px solid $Editor-hlbox--onActive-bg;
+    padding: 5px;
+    box-sizing: content-box;
+    transform: translate(-5px, -5px);
+    box-shadow: inset 0 0 10px rgba($Editor-hlbox--onActive-bg, 0.5);
+  }
+
   &.regionOn {
     background: transparent;
     z-index: 5;
@@ -1266,6 +1274,17 @@
   position: relative !important;
 }
 
+[data-editor-id] [contenteditable]:focus {
+  outline: 0px solid transparent;
+}
+
+[data-editor-id] {
+  .fr-quick-insert,
+  .fr-qi-helper {
+    transform: translateX(60px);
+  }
+}
+
 .ae-Region-placeholder {
   display: none;
   text-align: center;

diff --git a/packages/amis-editor-core/src/component/Editor.tsx b/packages/amis-editor-core/src/component/Editor.tsx
@@ -463,6 +463,11 @@ export default class Editor extends Component<EditorProps> {
   // 右键菜单
   @autobind
   async handleContextMenu(e: React.MouseEvent<HTMLElement>) {
+    // inline edit 模式不要右键
+    if (this.store.activeElement) {
+      return;
+    }
+
     e.persist();
     await closeContextMenus();
     let targetId: string = '';

diff --git a/packages/amis-editor-core/src/component/HighlightBox.tsx b/packages/amis-editor-core/src/component/HighlightBox.tsx
@@ -269,7 +269,9 @@ export default observer(function ({
         'ae-Editor-hlbox',
         {
           shake: id === store.insertOrigId,
-          selected: isActive || ~store.selections.indexOf(id),
+          focused: store.activeElement && isActive,
+          selected:
+            (isActive && !store.activeElement) || ~store.selections.indexOf(id),
           hover: isHover,
           regionOn: node.childRegions.some(region =>
             store.isRegionHighlighted(region.id, region.region)
@@ -293,7 +295,7 @@ export default observer(function ({
       onDragStart={handleDragStart}
       onClick={handleClick}
     >
-      {isActive && !readonly ? (
+      {isActive && !store.activeElement && !readonly ? (
         <div
           className={`ae-Editor-toolbarPopover ${
             isRightElem ? 'is-right-elem' : ''

diff --git a/packages/amis-editor-core/src/component/Preview.tsx b/packages/amis-editor-core/src/component/Preview.tsx
@@ -85,6 +85,7 @@ export default class Preview extends Component<PreviewProps> {
     this.currentDom.addEventListener('mouseleave', this.handleMouseLeave);
     this.currentDom.addEventListener('mousemove', this.handleMouseMove);
     this.currentDom.addEventListener('click', this.handleClick, true);
+    this.currentDom.addEventListener('dblclick', this.handleDBClick);
     this.currentDom.addEventListener('mouseover', this.handeMouseOver);
 
     this.currentDom.addEventListener('mousedown', this.handeMouseDown);
@@ -97,6 +98,7 @@ export default class Preview extends Component<PreviewProps> {
       this.currentDom.removeEventListener('mouseleave', this.handleMouseLeave);
       this.currentDom.removeEventListener('mousemove', this.handleMouseMove);
       this.currentDom.removeEventListener('click', this.handleClick, true);
+      this.currentDom.removeEventListener('dblclick', this.handleDBClick);
       this.currentDom.removeEventListener('mouseover', this.handeMouseOver);
       this.currentDom.removeEventListener('mousedown', this.handeMouseDown);
       this.props.manager.off('after-update', this.handlePanelChange);
@@ -302,6 +304,12 @@ export default class Preview extends Component<PreviewProps> {
   @autobind
   handleClick(e: MouseEvent) {
     const store = this.props.store;
+
+    // 处于编辑态时，不响应点击事件
+    if (store.activeElement) {
+      return;
+    }
+
     const target = (e.target as HTMLElement).closest(`[data-editor-id]`);
 
     if ((e.target as HTMLElement).closest('.ae-editor-action-btn')) {
@@ -353,6 +361,40 @@ export default class Preview extends Component<PreviewProps> {
     }
   }
 
+  @autobind
+  handleDBClick(e: MouseEvent) {
+    const store = this.props.store;
+    const target = e.target as HTMLElement;
+    const hostElem = target.closest(`[data-editor-id]`) as HTMLElement;
+    if (hostElem) {
+      const node = store.getNodeById(hostElem.getAttribute('data-editor-id')!);
+      if (!node) {
+        return;
+      }
+
+      const rendererInfo = node.info;
+
+      // 需要支持 :scope > xxx 语法，所以才这么写
+      let inlineElem: HTMLElement | undefined | null = null;
+      const inlineSetting = (rendererInfo.inlineEditableElements || []).find(
+        elem => {
+          inlineElem = (
+            [].slice.call(
+              hostElem.querySelectorAll(elem.match)
+            ) as Array<HTMLElement>
+          ).find(dom => dom.contains(target));
+          return !!inlineElem;
+        }
+      )!;
+
+      // 如果命中了支持内联编辑的元素，则开始内联编辑
+      if (inlineElem && inlineSetting) {
+        const manager = this.props.manager;
+        manager.startInlineEdit(node, inlineElem, inlineSetting, e);
+      }
+    }
+  }
+
   @autobind
   handleNavSwitch(id: string) {
     const store = this.props.store;
@@ -625,6 +667,7 @@ export default class Preview extends Component<PreviewProps> {
             >
               {node.childRegions.map(region =>
                 !node.memberImmutable(region.region) &&
+                !store.activeElement &&
                 !this.props.readonly &&
                 store.isRegionActive(region.id, region.region) ? (
                   <RegionHighlightBox