✨ https://github.com/siyuan-note/siyuan/issues/7536

app/src/assets/scss/protyle/_wysiwyg.scss

@@ -28,6 +28,12 @@
       }
     }
 
+    &.av {
+      min-height: 100px;
+      border: 1px solid var(--b3-border-color);
+      border-radius: 4px;
+    }
+
     &.hr {
       cursor: pointer;
 

app/src/editor/getIcon.ts

@@ -63,6 +63,9 @@ export const getIconByType = (type: string, sub?: string) => {
         case "NodeAudio":
             iconName = "iconRecord";
             break;
+        case "NodeAttributeView":
+            iconName = "iconDatabase";
+            break;
     }
     return iconName;
 };

app/src/protyle/util/editorCommonEvent.ts

@@ -1,5 +1,5 @@
 import {focusBlock, focusByRange} from "./selection";
-import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "./hasClosest";
+import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName, hasClosestByTag} from "./hasClosest";
 import {Constants} from "../../constants";
 import {paste} from "./paste";
 import {cancelSB, genEmptyElement, genSBElement} from "../../block/util";
@@ -727,7 +727,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
             event.stopPropagation();
             return;
         }
-        const targetElement = editorElement.querySelector(".dragover__bottom") || editorElement.querySelector(".dragover__top") || editorElement.querySelector(".dragover__left") || editorElement.querySelector(".dragover__right");
+        const targetElement = hasClosestBlock(event.target);
         let gutterType = "";
         for (const item of event.dataTransfer.items) {
             if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) {
@@ -778,6 +778,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                     });
                 }
 
+                const sourceIds: string [] = []
                 sourceElements.forEach(item => {
                     item.classList.remove("protyle-wysiwyg--select", "protyle-wysiwyg--hl");
                     item.removeAttribute("select-start");
@@ -786,11 +787,27 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                     item.querySelectorAll('[data-type="search-mark"]').forEach(markItem => {
                         markItem.outerHTML = markItem.innerHTML;
                     });
+                    sourceIds.push(item.getAttribute("data-node-id"));
                 });
 
                 hideElements(["gutter"], protyle);
                 const targetClass = targetElement.className.split(" ");
                 targetElement.classList.remove("dragover__bottom", "dragover__top", "dragover__left", "dragover__right", "protyle-wysiwyg--select");
+                if (targetElement.className.indexOf("dragover__") === -1) {
+                    // 拖拽到属性试图内
+                    transaction(protyle, [{
+                        action: "insertAttrViewBlock",
+                        id: targetElement.getAttribute("data-node-id"),
+                        parentID: targetElement.getAttribute("data-av-type"),
+                        previousID: "",
+                        srcIDs: sourceIds,
+                    }], [{
+                        action: "removeAttrViewBlock",
+                        id: targetElement.getAttribute("data-node-id"),
+                        parentID: targetElement.getAttribute("data-av-type"),
+                    }]);
+                    return;
+                }
                 if (targetElement.parentElement.getAttribute("data-type") === "NodeSuperBlock" &&
                     targetElement.parentElement.getAttribute("data-sb-layout") === "col") {
                     if (targetClass.includes("dragover__left") || targetClass.includes("dragover__right")) {
@@ -893,7 +910,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
             // 性能优化，目标为同一个元素不再进行校验
             const nodeRect = targetElement.getBoundingClientRect();
             targetElement.classList.remove("protyle-wysiwyg--select", "dragover__top", "dragover__bottom", "dragover__left", "dragover__right");
-
+            if (targetElement.getAttribute("data-type") === "NodeAttributeView" && hasClosestByTag(event.target, "TD")) {
+                targetElement.classList.add("protyle-wysiwyg--select");
+                return;
+            }
             if (targetElement.getAttribute("data-type") === "NodeListItem" || fileTreeIds.indexOf("-") > -1) {
                 if (event.clientY > nodeRect.top + nodeRect.height / 2) {
                     targetElement.classList.add("dragover__bottom", "protyle-wysiwyg--select");

app/src/types/index.d.ts

@@ -25,6 +25,8 @@ type TOperation =
     | "setAttrs"
     | "updateAttrs"
     | "append"
+    | "insertAttrViewBlock"
+    | "removeAttrViewBlock"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes"
 declare module "blueimp-md5"
 
@@ -237,10 +239,11 @@ interface IOperation {
     action: TOperation, // move， delete 不需要传 data
     id: string,
     data?: string, // updateAttr 时为  { old: IObject, new: IObject }
-    parentID?: string
+    parentID?: string   // 为 insertAttrViewBlock 传 avid
     previousID?: string
     retData?: any
     nextID?: string // insert 专享
+    srcIDs?: string[] // insertAttrViewBlock 专享
 }
 
 interface IObject {