diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 84431171b..2ce1b7870 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/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; - line-height: normal; + position: fixed; top: 0; - left: 0; + left: -44px; opacity: 0; - width: 24px; + display: flex; - button { - padding: 0; + svg { + 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 { - padding: 0 5px; - align-items: center; - position: sticky; - left: 49px; + svg { + height: 12px; + width: 12px; + color: var(--b3-theme-on-surface); + 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__firstcol { + .av__row--footer { 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; } diff --git a/app/src/assets/scss/business/_custom.scss b/app/src/assets/scss/business/_custom.scss index 4b010b9f1..4b56e8287 100644 --- a/app/src/assets/scss/business/_custom.scss +++ b/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); } diff --git a/app/src/assets/scss/component/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss index bd4424485..09abc9137 100644 --- a/app/src/assets/scss/component/_tooltips.scss +++ b/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; diff --git a/app/src/plugin/loader.ts b/app/src/plugin/loader.ts index 12f1a838d..b0cf39aea 100644 --- a/app/src/plugin/loader.ts +++ b/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; diff --git a/app/src/plugin/require.ts b/app/src/plugin/require.ts deleted file mode 100644 index b988b311f..000000000 --- a/app/src/plugin/require.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {API as siyuan} from "./API"; - -const libs: Record = { - siyuan, -} as const; - -export const PluginRequire = { - require(module: string) { - return libs[module]; - } -} diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index 42d7d2028..c57fa7296 100644 --- a/app/src/protyle/gutter/index.ts +++ b/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"; - } + 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(); diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 632cb1267..a8daeba91 100644 --- a/app/src/protyle/render/av/action.ts +++ b/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"); - if (firstcolElement) { + const checkElement = hasClosestByClassName(event.target, "av__firstcol"); + 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({ diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 9df03e9a8..42ed89242 100644 --- a/app/src/protyle/render/av/render.ts +++ b/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 = '
'; + let tableHTML = '
'; let calcHTML = ""; data.columns.forEach((column: IAVColumn) => { if (column.hidden) { return; } - tableHTML += `
@@ -80,17 +80,11 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || ' { tableHTML += `
-
- -
- - -
-
`; +
+ + +
+
`; row.cells.forEach((cell, index) => { if (data.columns[index].hidden) { return; @@ -160,12 +154,12 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '`; } } - - tableHTML += `
${text}
`; }); @@ -179,7 +173,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}
`;
`; }); setTimeout(() => { - e.firstElementChild.outerHTML = `
+ e.firstElementChild.outerHTML = `
${tabHTML} @@ -203,17 +197,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}
`;
-
+
${tableHTML}
-
- -
-
- ${window.siyuan.languages.addAttr} -
+ + ${window.siyuan.languages.addAttr}
-
${calcHTML}
+
${calcHTML}
`; diff --git a/app/src/protyle/render/av/row.ts b/app/src/protyle/render/av/row.ts index bea06a194..5a2646ba9 100644 --- a/app/src/protyle/render/av/row.ts +++ b/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") => { - const rowElement = firstcolElement.parentElement; - const useElement = firstcolElement.querySelector(".icon__check use"); +export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => { + const rowElement = checkElement.parentElement; + 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 => { - item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconUncheck"); + rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => { + item.querySelector("use").setAttribute("xlink:href", "#iconUncheck"); item.parentElement.classList.remove("av__row--select"); }); } else { - rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => { - item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconCheck"); + rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => { + 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) { diff --git a/app/src/protyle/scroll/event.ts b/app/src/protyle/scroll/event.ts index 1694f3fda..99fb14f50 100644 --- a/app/src/protyle/scroll/event.ts +++ b/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()); } diff --git a/app/src/protyle/util/resize.ts b/app/src/protyle/util/resize.ts index 889c9d5ec..aa4a06970 100644 --- a/app/src/protyle/util/resize.ts +++ b/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 containerElement = item.querySelector(".av__container"); - if (item.style.width.endsWith("%")) { - containerElement.style.width = "auto"; + const attrElement = item.querySelector(".protyle-attr") as HTMLElement + if (item.style.width.endsWith("%") || item.style.margin) { + const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement; + 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 = ""; + } } }; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 55634d49a..9789d372e 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/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); } } diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index 79b92b60b..bb365b6c0 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/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"; }