diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 2ce1b7870..84431171b 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -1,4 +1,8 @@ .av { + display: flex; + flex-direction: column; + align-items: center; + user-select: none; box-sizing: border-box; @@ -27,6 +31,11 @@ opacity: 1; } + &__container { + // width: fit-content; + max-width: 100%; + } + &__header { top: -43px; z-index: 2; @@ -60,14 +69,15 @@ &__gutters { @extend .protyle-gutters; - position: fixed; + position: absolute; + line-height: normal; top: 0; - left: -44px; + left: 0; opacity: 0; - display: flex; + width: 24px; - svg { - height: 25px; + button { + padding: 0; } } @@ -84,6 +94,10 @@ cursor: pointer; } + &__body { + float: left; + } + &__row { display: flex; border-bottom: 1px solid var(--b3-theme-surface-lighter); @@ -111,10 +125,6 @@ &--select { background-color: var(--b3-theme-primary-lightest); - - .av__firstcol svg { - opacity: 1; - } } &--header { @@ -181,18 +191,15 @@ &--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%; - svg { - height: 12px; - width: 12px; - color: var(--b3-theme-on-surface); - margin-right: 5px; - flex-shrink: 0; + .av__calc { + padding: 0 5px; + align-items: center; + position: sticky; + left: 49px; } &:hover { @@ -201,6 +208,27 @@ } } + &__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; @@ -234,6 +262,18 @@ 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; @@ -259,6 +299,7 @@ &__celltext { overflow: hidden; + line-height: normal; .b3-chip { margin: 1px 2px; @@ -276,22 +317,6 @@ } } - &__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; @@ -373,20 +398,13 @@ &.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; } diff --git a/app/src/assets/scss/business/_custom.scss b/app/src/assets/scss/business/_custom.scss index 4b56e8287..4b010b9f1 100644 --- a/app/src/assets/scss/business/_custom.scss +++ b/app/src/assets/scss/business/_custom.scss @@ -69,6 +69,10 @@ 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 09abc9137..bd4424485 100644 --- a/app/src/assets/scss/component/_tooltips.scss +++ b/app/src/assets/scss/component/_tooltips.scss @@ -8,6 +8,7 @@ -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 b0cf39aea..12f1a838d 100644 --- a/app/src/plugin/loader.ts +++ b/app/src/plugin/loader.ts @@ -4,18 +4,10 @@ import {Plugin} from "./index"; /// #if !MOBILE import {exportLayout, resizeTopBar} from "../layout/util"; /// #endif -import {API} from "./API"; +import {PluginRequire} from "./require"; 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")); }; @@ -40,7 +32,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))(getObject, moduleObj, exportsObj); + runCode(item.js, "plugin:" + encodeURIComponent(item.name))(PluginRequire.require, 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 new file mode 100644 index 000000000..b988b311f --- /dev/null +++ b/app/src/plugin/require.ts @@ -0,0 +1,11 @@ +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 c57fa7296..42d7d2028 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -1616,8 +1616,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = ""; - resizeAV(e); + e.style.alignItems = "flex-start"; } else { e.style.textAlign = "left"; } @@ -1630,8 +1629,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 auto"; - resizeAV(e); + e.style.alignItems = "center"; } else { e.style.textAlign = "center"; } @@ -1644,8 +1642,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 0 0 auto"; - resizeAV(e); + e.style.alignItems = "flex-end"; } else { e.style.textAlign = "right"; } @@ -1656,7 +1653,11 @@ export class Gutter { icon: "iconMenu", click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - e.style.textAlign = "justify"; + if (e.classList.contains("av")) { + e.style.alignItems = "stretch"; + } else { + e.style.textAlign = "justify"; + } }); } }, { @@ -1686,12 +1687,11 @@ export class Gutter { icon: "iconTrashcan", click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { + e.style.direction = ""; if (e.classList.contains("av")) { - e.style.margin = ""; - resizeAV(e); + e.style.alignItems = ""; } else { e.style.textAlign = ""; - e.style.direction = ""; } }); } @@ -1754,7 +1754,6 @@ 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 a8daeba91..632cb1267 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -24,6 +24,25 @@ 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) { @@ -37,6 +56,29 @@ 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()); @@ -63,26 +105,11 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle return true; } - const gutterElement = hasClosestByClassName(event.target, "ariaLabel"); + const gutterElement = hasClosestByClassName(event.target, "av__gutter"); if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) { - const rowElement = gutterElement.parentElement.parentElement; + const rowElement = gutterElement.parentElement.parentElement.parentElement; if (gutterElement.dataset.action === "add") { - 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"); + avAdd(protyle, blockElement, rowElement, event.altKey); } else { const gutterRect = gutterElement.getBoundingClientRect(); avContextmenu(protyle, rowElement, { @@ -97,10 +124,10 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle return true; } - const checkElement = hasClosestByClassName(event.target, "av__firstcol"); - if (checkElement) { + const firstcolElement = hasClosestByClassName(event.target, "av__firstcol"); + if (firstcolElement) { window.siyuan.menus.menu.remove(); - selectRow(checkElement, "toggle"); + selectRow(firstcolElement, "toggle"); event.preventDefault(); event.stopPropagation(); return true; @@ -202,7 +229,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 use").setAttribute("xlink:href", "#iconUncheck"); + item.querySelector(".av__firstcol .icon__check use").setAttribute("xlink:href", "#iconUncheck"); item.classList.remove("av__row--select"); }); updateHeader(cellElement.parentElement); @@ -221,29 +248,6 @@ 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; }; @@ -259,7 +263,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 use").forEach(item => { + blockElement.querySelectorAll(".av__firstcol .icon__check use").forEach(item => { item.setAttribute("xlink:href", "#iconUncheck"); }); } @@ -269,7 +273,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi return true; } rowElement.classList.add("av__row--select"); - rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck"); + rowElement.querySelector(".av__firstcol .icon__check use").setAttribute("xlink:href", "#iconCheck"); const rowIds: string[] = []; const blockIds: string[] = []; const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)"); @@ -305,6 +309,24 @@ 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 42ed89242..9df03e9a8 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,11 +80,17 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || ' { tableHTML += `
-
- - -
-
`; +
+ +
+ + +
+
`; row.cells.forEach((cell, index) => { if (data.columns[index].hidden) { return; @@ -154,12 +160,12 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '`; } } - tableHTML += `
${text}
`; }); @@ -173,7 +179,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}
`;
`; }); setTimeout(() => { - e.firstElementChild.outerHTML = `
+ e.firstElementChild.outerHTML = `
${tabHTML} @@ -197,13 +203,17 @@ ${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 5a2646ba9..bea06a194 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 = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => { - const rowElement = checkElement.parentElement; - const useElement = checkElement.querySelector("use"); +export const selectRow = (firstcolElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => { + const rowElement = firstcolElement.parentElement; + const useElement = firstcolElement.querySelector(".icon__check use"); if (rowElement.classList.contains("av__row--header") || type === "unselectAll") { if ("#iconCheck" === useElement.getAttribute("xlink:href")) { - rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => { - item.querySelector("use").setAttribute("xlink:href", "#iconUncheck"); + rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => { + item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconUncheck"); item.parentElement.classList.remove("av__row--select"); }); } else { - rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => { - item.querySelector("use").setAttribute("xlink:href", "#iconCheck"); + rowElement.parentElement.querySelectorAll(".av__row .av__firstcol").forEach(item => { + item.querySelector(".icon__check use").setAttribute("xlink:href", "#iconCheck"); item.parentElement.classList.add("av__row--select"); }); } } else { if (type === "select" || (useElement.getAttribute("xlink:href") === "#iconUncheck" && type === "toggle")) { - checkElement.parentElement.classList.add("av__row--select"); + firstcolElement.parentElement.classList.add("av__row--select"); useElement.setAttribute("xlink:href", "#iconCheck"); } else if (type === "unselect" || (useElement.getAttribute("xlink:href") === "#iconCheck" && type === "toggle")) { - checkElement.parentElement.classList.remove("av__row--select"); + firstcolElement.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("use"); + const headUseElement = headElement.querySelector(".icon__check 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 99fb14f50..1694f3fda 100644 --- a/app/src/protyle/scroll/event.ts +++ b/app/src/protyle/scroll/event.ts @@ -24,30 +24,6 @@ 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 aa4a06970..889c9d5ec 100644 --- a/app/src/protyle/util/resize.ts +++ b/app/src/protyle/util/resize.ts @@ -42,11 +42,6 @@ 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 动画结束 }; @@ -54,34 +49,11 @@ export const resizeAV = (item: HTMLElement) => { if (!item.classList.contains("av") || item.getAttribute("data-render") !== "true") { return; } - 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%"; - } + + const containerElement = item.querySelector(".av__container"); + if (item.style.width.endsWith("%")) { + containerElement.style.width = "auto"; } else { - 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 = ""; - } + containerElement.style.width = ""; } }; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 9789d372e..55634d49a 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -1452,12 +1452,6 @@ 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 bb365b6c0..79b92b60b 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -69,7 +69,6 @@ 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) => { @@ -1147,8 +1146,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = ""; - resizeAV(e); + e.style.alignItems = "flex-start"; } else { e.style.textAlign = "left"; } @@ -1169,8 +1167,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 auto"; - resizeAV(e); + e.style.alignItems = "center"; } else { e.style.textAlign = "center"; } @@ -1187,8 +1184,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 0 0 auto"; - resizeAV(e); + e.style.alignItems = "flex-end"; } else { e.style.textAlign = "right"; }