Revert "Improve adaptive width for Attributes View (#9280)"

This reverts commit 2e46bee776.

app/src/assets/scss/business/_av.scss

@@ -1,8 +1,4 @@
 .av {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
   user-select: none;
   box-sizing: border-box;
 
@@ -31,11 +27,6 @@
     opacity: 1;
   }
 
-  &__container {
-    // width: fit-content;
-    max-width: 100%;
-  }
-
   &__header {
     top: -43px;
     z-index: 2;
@@ -69,15 +60,14 @@
 
   &__gutters {
     @extend .protyle-gutters;
-    position: absolute;
+    position: fixed;
-    line-height: normal;
     top: 0;
-    left: 0;
+    left: -44px;
     opacity: 0;
-    width: 24px;
+    display: flex;
 
-    button {
+    svg {
-      padding: 0;
+      height: 25px;
     }
   }
 
@@ -94,10 +84,6 @@
     cursor: pointer;
   }
 
-  &__body {
-    float: left;
-  }
-
   &__row {
     display: flex;
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
@@ -125,6 +111,10 @@
 
     &--select {
       background-color: var(--b3-theme-primary-lightest);
+
+      .av__firstcol svg {
+        opacity: 1;
+      }
     }
 
     &--header {
@@ -191,15 +181,18 @@
 
     &--add {
       color: var(--b3-theme-on-surface);
+      padding: 5px 5px 5px 7px;
       display: flex;
+      align-items: center;
       transition: background 20ms ease-in 0s;
       font-size: 87.5%;
 
-      .av__calc {
+      svg {
-        padding: 0 5px;
+        height: 12px;
-        align-items: center;
+        width: 12px;
-        position: sticky;
+        color: var(--b3-theme-on-surface);
-        left: 49px;
+        margin-right: 5px;
+        flex-shrink: 0;
       }
 
       &:hover {
@@ -208,27 +201,6 @@
     }
   }
 
-  &__firstcol {
-    display: flex;
-    flex-direction: row-reverse;
-
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    width: 48px;
-    background-color: var(--b3-theme-background);
-    border-right: 1px solid var(--b3-theme-surface-lighter);
-
-    svg {
-      color: var(--b3-theme-on-surface);
-      height: 36px;
-      width: 24px;
-      padding: 5px;
-      box-sizing: border-box;
-      float: left;
-    }
-  }
-
   &__cell {
     box-sizing: border-box;
     position: relative;
@@ -262,18 +234,6 @@
       top: 5px;
     }
 
-    &[data-wrap=true] {
-      white-space: pre-wrap;
-    }
-
-    &[data-wrap=false] {
-      white-space: nowrap;
-
-      img.av__cellassetimg {
-        max-height: 26px;
-      }
-    }
-
     &:hover .block__icon {
       opacity: 1;
       background-color: var(--b3-theme-background-light) !important;
@@ -299,7 +259,6 @@
 
   &__celltext {
     overflow: hidden;
-    line-height: normal;
 
     .b3-chip {
       margin: 1px 2px;
@@ -317,6 +276,22 @@
     }
   }
 
+  &__firstcol {
+    svg {
+      color: var(--b3-theme-on-surface);
+      height: 33px;
+      width: 24px;
+      opacity: 0;
+      padding: 5px;
+      box-sizing: border-box;
+      float: left;
+    }
+
+    &:hover svg {
+      opacity: 1;
+    }
+  }
+
   &__widthdrag {
     position: absolute;
     cursor: col-resize;
@@ -398,13 +373,20 @@
   &.protyle-wysiwyg--select,
   &.protyle-wysiwyg--hl {
     .av__row--header,
-    .av__row--footer,
+    .av__row--footer {
-    .av__firstcol {
       background-color: transparent;
     }
   }
 }
 
+img.av__cellassetimg {
+  max-height: 20px;
+  border-radius: var(--b3-border-radius);
+  margin: 1px 2px;
+  max-width: none;
+  vertical-align: top;
+}
+
 html[data-theme-mode="dark"] .av__panel .b3-menu__item {
   mix-blend-mode: lighten;
 }

app/src/assets/scss/business/_custom.scss

@@ -69,10 +69,6 @@
     line-height: 26px;
     min-height: 26px;
 
-    img.av__cellassetimg {
-      height: 32px;
-    }
-
     &:hover {
       background-color: var(--b3-theme-background);
     }

app/src/assets/scss/component/_tooltips.scss

@@ -8,7 +8,6 @@
   -webkit-font-smoothing: subpixel-antialiased;
   color: var(--b3-tooltips-color);
   word-wrap: break-word;
-  white-space: pre;
   background-color: var(--b3-tooltips-background);
   border-radius: var(--b3-border-radius);
   line-height: 17px;

app/src/plugin/loader.ts

@@ -4,10 +4,18 @@ import {Plugin} from "./index";
 /// #if !MOBILE
 import {exportLayout, resizeTopBar} from "../layout/util";
 /// #endif
-import {PluginRequire} from "./require";
+import {API} from "./API";
 import {getFrontend, isMobile, isWindow} from "../util/functions";
 import {Constants} from "../constants";
 
+const getObject = (key: string) => {
+    const api = {
+        siyuan: API
+    };
+    // @ts-ignore
+    return api[key];
+};
+
 const runCode = (code: string, sourceURL: string) => {
     return window.eval("(function anonymous(require, module, exports){".concat(code, "\n})\n//# sourceURL=").concat(sourceURL, "\n"));
 };
@@ -32,7 +40,7 @@ const loadPluginJS = async (app: App, item: IPluginData) => {
     const exportsObj: { [key: string]: any } = {};
     const moduleObj = {exports: exportsObj};
     try {
-        runCode(item.js, "plugin:" + encodeURIComponent(item.name))(PluginRequire.require, moduleObj, exportsObj);
+        runCode(item.js, "plugin:" + encodeURIComponent(item.name))(getObject, moduleObj, exportsObj);
     } catch (e) {
         console.error(`plugin ${item.name} run error:`, e);
         return;

app/src/plugin/require.ts

@@ -1,11 +0,0 @@
-import {API as siyuan} from "./API";
-
-const libs: Record<string, any> = {
-    siyuan,
-} as const;
-
-export const PluginRequire = {
-    require(module: string) {
-        return libs[module];
-    }
-}

app/src/protyle/gutter/index.ts

@@ -1616,7 +1616,8 @@ export class Gutter {
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "flex-start";
+                            e.style.margin = "";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "left";
                         }
@@ -1629,7 +1630,8 @@ export class Gutter {
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "center";
+                            e.style.margin = "0 auto";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "center";
                         }
@@ -1642,7 +1644,8 @@ export class Gutter {
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "flex-end";
+                            e.style.margin = "0 0 0 auto";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "right";
                         }
@@ -1653,11 +1656,7 @@ export class Gutter {
                 icon: "iconMenu",
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
-                        if (e.classList.contains("av")) {
-                            e.style.alignItems = "stretch";
-                        } else {
                         e.style.textAlign = "justify";
-                        }
                     });
                 }
             }, {
@@ -1687,11 +1686,12 @@ export class Gutter {
                 icon: "iconTrashcan",
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
-                        e.style.direction = "";
                         if (e.classList.contains("av")) {
-                            e.style.alignItems = "";
+                            e.style.margin = "";
+                            resizeAV(e);
                         } else {
                             e.style.textAlign = "";
+                            e.style.direction = "";
                         }
                     });
                 }
@@ -1754,6 +1754,7 @@ export class Gutter {
                                 id: e.getAttribute("data-node-id"),
                                 data: e.outerHTML
                             });
+                            resizeAV(e);
                         });
                         transaction(protyle, operations, undoOperations);
                         window.siyuan.menus.menu.remove();

app/src/protyle/render/av/action.ts

@@ -24,25 +24,6 @@ import {unicode2Emoji} from "../../../emoji";
 import {selectRow} from "./row";
 import * as dayjs from "dayjs";
 
-export const avAdd = (protyle: IProtyle, blockElement: HTMLElement, rowElement: HTMLElement, above: boolean) => {
-    const avID = blockElement.getAttribute("data-av-id");
-    const srcIDs = [Lute.NewNodeID()];
-    const previousID = above ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : rowElement.getAttribute("data-id");
-    transaction(protyle, [{
-        action: "insertAttrViewBlock",
-        avID,
-        previousID,
-        srcIDs,
-        isDetached: true,
-    }], [{
-        action: "removeAttrViewBlock",
-        srcIDs,
-        avID,
-    }]);
-    insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
-    popTextCell(protyle, [rowElement[above ? "previousElementSibling" : "nextElementSibling"].querySelector('[data-detached="true"]')], "block");
-}
-
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     const blockElement = hasClosestBlock(event.target);
     if (!blockElement) {
@@ -56,29 +37,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         }
     }
 
-    const addRowElement = hasClosestByClassName(event.target, "av__row--add");
-    if (addRowElement) {
-        const avID = blockElement.getAttribute("data-av-id");
-        const srcIDs = [Lute.NewNodeID()];
-        const previousID = addRowElement.previousElementSibling.getAttribute("data-id") || "";
-        transaction(protyle, [{
-            action: "insertAttrViewBlock",
-            avID,
-            previousID,
-            srcIDs,
-            isDetached: true,
-        }], [{
-            action: "removeAttrViewBlock",
-            srcIDs,
-            avID,
-        }]);
-        insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
-        popTextCell(protyle, [addRowElement.previousElementSibling.querySelector('[data-detached="true"]')], "block");
-        event.preventDefault();
-        event.stopPropagation();
-        return true;
-    }
-
     const copyElement = hasClosestByAttribute(event.target, "data-type", "copy");
     if (copyElement) {
         writeText(copyElement.previousElementSibling.textContent.trim());
@@ -105,11 +63,26 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const gutterElement = hasClosestByClassName(event.target, "av__gutter");
+    const gutterElement = hasClosestByClassName(event.target, "ariaLabel");
     if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
-        const rowElement = gutterElement.parentElement.parentElement.parentElement;
+        const rowElement = gutterElement.parentElement.parentElement;
         if (gutterElement.dataset.action === "add") {
-            avAdd(protyle, blockElement, rowElement, event.altKey);
+            const avID = blockElement.getAttribute("data-av-id");
+            const srcIDs = [Lute.NewNodeID()];
+            const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : rowElement.getAttribute("data-id");
+            transaction(protyle, [{
+                action: "insertAttrViewBlock",
+                avID,
+                previousID,
+                srcIDs,
+                isDetached: true,
+            }], [{
+                action: "removeAttrViewBlock",
+                srcIDs,
+                avID,
+            }]);
+            insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
+            popTextCell(protyle, [rowElement[event.altKey ? "previousElementSibling" : "nextElementSibling"].querySelector('[data-detached="true"]')], "block");
         } else {
             const gutterRect = gutterElement.getBoundingClientRect();
             avContextmenu(protyle, rowElement, {
@@ -124,10 +97,10 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const firstcolElement = hasClosestByClassName(event.target, "av__firstcol");
+    const checkElement = hasClosestByClassName(event.target, "av__firstcol");
-    if (firstcolElement) {
+    if (checkElement) {
         window.siyuan.menus.menu.remove();
-        selectRow(firstcolElement, "toggle");
+        selectRow(checkElement, "toggle");
         event.preventDefault();
         event.stopPropagation();
         return true;
@@ -229,7 +202,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             selectRow(cellElement.parentElement.querySelector(".av__firstcol"), "toggle");
         } else {
             cellElement.parentElement.parentElement.querySelectorAll(".av__row--select").forEach(item => {
-                item.querySelector(".av__firstcol .icon__check use").setAttribute("xlink:href", "#iconUncheck");
+                item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
                 item.classList.remove("av__row--select");
             });
             updateHeader(cellElement.parentElement);
@@ -248,6 +221,29 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
+    const addRowElement = hasClosestByClassName(event.target, "av__row--add");
+    if (addRowElement) {
+        const avID = blockElement.getAttribute("data-av-id");
+        const srcIDs = [Lute.NewNodeID()];
+        const previousID = addRowElement.previousElementSibling.getAttribute("data-id") || "";
+        transaction(protyle, [{
+            action: "insertAttrViewBlock",
+            avID,
+            previousID,
+            srcIDs,
+            isDetached: true,
+        }], [{
+            action: "removeAttrViewBlock",
+            srcIDs,
+            avID,
+        }]);
+        insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
+        popTextCell(protyle, [addRowElement.previousElementSibling.querySelector('[data-detached="true"]')], "block");
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    }
+
     return false;
 };
 
@@ -263,7 +259,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
         blockElement.querySelectorAll(".av__row--select").forEach(item => {
             item.classList.remove("av__row--select");
         });
-        blockElement.querySelectorAll(".av__firstcol .icon__check use").forEach(item => {
+        blockElement.querySelectorAll(".av__firstcol use").forEach(item => {
             item.setAttribute("xlink:href", "#iconUncheck");
         });
     }
@@ -273,7 +269,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
         return true;
     }
     rowElement.classList.add("av__row--select");
-    rowElement.querySelector(".av__firstcol .icon__check use").setAttribute("xlink:href", "#iconCheck");
+    rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
     const rowIds: string[] = [];
     const blockIds: string[] = [];
     const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)");
@@ -309,24 +305,6 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
         }
     });
     if (rowIds.length === 1) {
-        menu.addSeparator();
-        menu.addItem({
-            label: window.siyuan.languages.addAttr,
-            icon: "iconAdd",
-            type: "submenu",
-            submenu: [
-                {
-                    label: window.siyuan.languages.insertRowAbove,
-                    icon: "iconBefore",
-                    click: () => avAdd(protyle, blockElement, rowElement, true),
-                },
-                {
-                    label: window.siyuan.languages.insertRowBelow,
-                    icon: "iconAfter",
-                    click: () => avAdd(protyle, blockElement, rowElement, false),
-                },
-            ]
-        });
         menu.addSeparator();
         openEditorTab(protyle.app, rowIds[0]);
         menu.addItem({

app/src/protyle/render/av/render.ts

@@ -53,13 +53,13 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
             }, (response) => {
                 const data = response.data.view as IAVTable;
                 // header
-                let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg class="icon__check"><use xlink:href="#iconUncheck"></use></svg></div>';
+                let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 32px"><use xlink:href="#iconUncheck"></use></svg></div>';
                 let calcHTML = "";
                 data.columns.forEach((column: IAVColumn) => {
                     if (column.hidden) {
                         return;
                     }
-                    tableHTML += `<div class="av__cell" data-col-id="${column.id}" data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" 
+                    tableHTML += `<div class="av__cell" data-col-id="${column.id}" data-icon="${column.icon}" data-dtype="${column.type}"  
 style="width: ${column.width || "200px"};
 ${column.wrap ? "" : "white-space: nowrap;"}">
     <div draggable="true" class="av__cellheader">
@@ -80,17 +80,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                 // body
                 data.rows.forEach((row: IAVRow) => {
                     tableHTML += `<div class="av__row" data-id="${row.id}">
-<div class="av__firstcol">
-    <svg class="icon__check"><use xlink:href="#iconUncheck"></use></svg>
 <div class="av__gutters">
-        <button class="av__gutter ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}">
+    <button class="ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
-            <svg><use xlink:href="#iconDrag"></use></svg>
+    <button class="ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
-        </button>
-        <button class="av__gutter ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}">
-            <svg><use xlink:href="#iconAdd"></use></svg>
-        </button>
 </div>
-</div>`;
+<div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
                     row.cells.forEach((cell, index) => {
                         if (data.columns[index].hidden) {
                             return;
@@ -160,12 +154,12 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                                 text += `<span ${cell.valueType !== "number" ? "" : 'style="right:auto;left:5px"'} data-type="copy" class="b3-tooltips b3-tooltips__n block__icon" aria-label="${window.siyuan.languages.copy}"><svg><use xlink:href="#iconCopy"></use></svg></span>`;
                             }
                         }
-
+                        tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
-                        tableHTML += `<div class="av__cell" data-id="${cell.id}" data-col-id="${data.columns[index].id}" data-wrap="${data.columns[index].wrap}"
 ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}  
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
 style="width: ${data.columns[index].width || "200px"};
 ${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
+white-space: ${data.columns[index].wrap ? "pre-wrap" : "nowrap"};
 ${cell.valueType !== "number" ? "" : "flex-direction: row-reverse;"}
 ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
                     });
@@ -179,7 +173,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
 </div>`;
                 });
                 setTimeout(() => {
-                    e.firstElementChild.outerHTML = `<div class="av__container">
+                    e.firstElementChild.outerHTML = `<div>
     <div class="av__header">
         <div class="layout-tab-bar fn__flex">
             ${tabHTML}
@@ -203,17 +197,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
         <div class="av__counter fn__none"></div>
     </div>
     <div class="av__scroll">
-        <div class="av__body">
+        <div style="float: left;">
             ${tableHTML}
             <div class="av__row--add">
-                <div class="av__firstcol">
                 <svg><use xlink:href="#iconAdd"></use></svg>
-                </div>
-                <div class="av__calc" style>
                 ${window.siyuan.languages.addAttr}
             </div>
-            </div>
+            <div class="av__row--footer"><div style="width: 24px"></div>${calcHTML}</div>
-            <div class="av__row--footer"><div class="av__firstcol"></div>${calcHTML}</div>
         </div>
     </div>
 </div>`;

app/src/protyle/render/av/row.ts

@@ -1,27 +1,27 @@
 import {hasClosestBlock} from "../../util/hasClosest";
 import {focusBlock} from "../../util/selection";
 
-export const selectRow = (firstcolElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => {
+export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => {
-    const rowElement = firstcolElement.parentElement;
+    const rowElement = checkElement.parentElement;
-    const useElement = firstcolElement.querySelector(".icon__check use");
+    const useElement = checkElement.querySelector("use");
     if (rowElement.classList.contains("av__row--header") || type === "unselectAll") {
         if ("#iconCheck" === useElement.getAttribute("xlink:href")) {
-            rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => {
+            rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
-                item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconUncheck");
+                item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
                 item.parentElement.classList.remove("av__row--select");
             });
         } else {
-            rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => {
+            rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
-                item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconCheck");
+                item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
                 item.parentElement.classList.add("av__row--select");
             });
         }
     } else {
         if (type === "select" || (useElement.getAttribute("xlink:href") === "#iconUncheck" && type === "toggle")) {
-            firstcolElement.parentElement.classList.add("av__row--select");
+            checkElement.parentElement.classList.add("av__row--select");
             useElement.setAttribute("xlink:href", "#iconCheck");
         } else if (type === "unselect" || (useElement.getAttribute("xlink:href") === "#iconCheck" && type === "toggle")) {
-            firstcolElement.parentElement.classList.remove("av__row--select");
+            checkElement.parentElement.classList.remove("av__row--select");
             useElement.setAttribute("xlink:href", "#iconUncheck");
         }
     }
@@ -37,7 +37,7 @@ export const updateHeader = (rowElement: HTMLElement) => {
     const selectCount = rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").length;
     const diffCount = rowElement.parentElement.childElementCount - 3 - selectCount;
     const headElement = rowElement.parentElement.firstElementChild;
-    const headUseElement = headElement.querySelector(".icon__check use");
+    const headUseElement = headElement.querySelector("use");
     const counterElement = blockElement.querySelector(".av__counter");
     const avHeadElement = blockElement.querySelector(".av__header") as HTMLElement;
     if (diffCount === 0 && rowElement.parentElement.childElementCount - 3 !== 0) {

app/src/protyle/scroll/event.ts

@@ -24,6 +24,30 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
             }
         }
 
+        protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
+            if (item.parentElement.classList.contains("protyle-wysiwyg")) {
+                const headerTop = item.offsetTop + 43;
+                const headerElement = item.querySelector(".av__row--header") as HTMLElement;
+                if (headerElement) {
+                    if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
+                        headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
+                    } else {
+                        headerElement.style.transform = "";
+                    }
+                }
+                const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
+                if (footerElement) {
+                    const footerBottom = headerTop + footerElement.parentElement.clientHeight;
+                    const scrollBottom = element.scrollTop + element.clientHeight + 5;
+                    if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) {
+                        footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`;
+                    } else {
+                        footerElement.style.transform = "";
+                    }
+                }
+            }
+        });
+
         if (!protyle.element.classList.contains("block__edit") && !isMobile()) {
             protyle.contentElement.setAttribute("data-scrolltop", element.scrollTop.toString());
         }

app/src/protyle/util/resize.ts

@@ -42,6 +42,11 @@ export const resize = (protyle: IProtyle) => {
                 }
             }
         }
+        if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) {
+            protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
+                resizeAV(item);
+            });
+        }
     }, Constants.TIMEOUT_TRANSITION);   // 等待 setPadding 动画结束
 };
 
@@ -49,11 +54,34 @@ export const resizeAV = (item: HTMLElement) => {
     if (!item.classList.contains("av") || item.getAttribute("data-render") !== "true") {
         return;
     }
-
+    const attrElement = item.querySelector(".protyle-attr") as HTMLElement
-    const containerElement = item.querySelector<HTMLElement>(".av__container");
+    if (item.style.width.endsWith("%") || item.style.margin) {
-    if (item.style.width.endsWith("%")) {
+        const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
-        containerElement.style.width = "auto";
+        avHeaderElement.style.paddingLeft = "";
+        avHeaderElement.style.paddingRight = "";
+        const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
+        avBodyElement.style.paddingLeft = "";
+        avBodyElement.style.paddingRight = "";
+        attrElement.style.paddingRight = "";
+        item.style.alignSelf = "";
+        if (!item.style.width.endsWith("%")) {
+            item.style.width = "";
+            item.style.maxWidth = "100%";
+        }
     } else {
-        containerElement.style.width = "";
+        const paddingLeft = item.parentElement.style.paddingLeft;
+        const paddingRight = item.parentElement.style.paddingRight;
+        const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
+        avHeaderElement.style.paddingLeft = paddingLeft;
+        avHeaderElement.style.paddingRight = paddingRight;
+        const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement;
+        avBodyElement.style.paddingLeft = paddingLeft;
+        avBodyElement.style.paddingRight = paddingRight;
+        attrElement.style.paddingRight = paddingRight;
+        item.style.alignSelf = "center";
+        if (item.parentElement.clientWidth > 0) {
+            item.style.width = item.parentElement.clientWidth + "px";
+            item.style.maxWidth = "";
+        }
     }
 };

app/src/protyle/wysiwyg/index.ts

@@ -1452,6 +1452,12 @@ export class WYSIWYG {
                 if (embedElement) {
                     protyle.gutter.render(protyle, embedElement, this.element);
                 } else {
+                    // database 行块标
+                    const rowElement = hasClosestByClassName(event.target, "av__row");
+                    if (rowElement && rowElement.dataset.id) {
+                        const rowRect = rowElement.getBoundingClientRect();
+                        rowElement.firstElementChild.setAttribute("style", `left:${rowRect.left - 44}px;top:${rowRect.top}px`);
+                    }
                     protyle.gutter.render(protyle, nodeElement, this.element);
                 }
             }

app/src/protyle/wysiwyg/keydown.ts

@@ -69,6 +69,7 @@ import {escapeHtml} from "../../util/escape";
 import {insertHTML} from "../util/insertHTML";
 import {removeSearchMark} from "../toolbar/util";
 import {avKeydown} from "../render/av/keydown";
+import {resizeAV} from "../util/resize";
 
 
 export const getContentByInlineHTML = (range: Range, cb: (content: string) => void) => {
@@ -1146,7 +1147,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                 }
                 updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => {
                     if (e.classList.contains("av")) {
-                        e.style.alignItems = "flex-start";
+                        e.style.margin = "";
+                        resizeAV(e);
                     } else {
                         e.style.textAlign = "left";
                     }
@@ -1167,7 +1169,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
                 }
                 updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => {
                     if (e.classList.contains("av")) {
-                        e.style.alignItems = "center";
+                        e.style.margin = "0 auto";
+                        resizeAV(e);
                     } else {
                         e.style.textAlign = "center";
                     }
@@ -1184,7 +1187,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
             }
             updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => {
                 if (e.classList.contains("av")) {
-                    e.style.alignItems = "flex-end";
+                    e.style.margin = "0 0 0 auto";
+                    resizeAV(e);
                 } else {
                     e.style.textAlign = "right";
                 }