diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 80a458ab1..5295f3797 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -8,6 +8,11 @@ opacity: 1; } + &__cursor { + width: .1px; + height: 0; + } + &__container { overflow: auto; cursor: auto; @@ -70,13 +75,6 @@ color: var(--b3-theme-on-surface); content: attr(data-tip); } - - &--hide { - width: .1px; - overflow: hidden; - height: 0; - min-height: .1px !important; - } } &__counter { diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index f0f36245e..7b826f530 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -229,7 +229,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}`; ${response.data.isMirror ? `
` : ""} -
${response.data.name || ""}
+
${response.data.name || ""}
@@ -254,6 +254,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}
`; +
${Constants.ZWSP}
`; e.setAttribute("data-render", "true"); // 历史兼容 diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts index 560f41c45..3d1800e4e 100644 --- a/app/src/protyle/render/av/view.ts +++ b/app/src/protyle/render/av/view.ts @@ -135,7 +135,7 @@ export const bindViewEvent = (options: { blockID, data: false }]); - options.blockElement.querySelector(".av__title").classList.add("av__title--hide"); + options.blockElement.querySelector(".av__title").classList.add("fn__none"); } else { transaction(options.protyle, [{ action: "hideAttrViewName", @@ -148,7 +148,7 @@ export const bindViewEvent = (options: { blockID, data: true }]); - options.blockElement.querySelector(".av__title").classList.remove("av__title--hide"); + options.blockElement.querySelector(".av__title").classList.remove("fn__none"); } }); }; diff --git a/app/src/protyle/util/selection.ts b/app/src/protyle/util/selection.ts index 396200fca..a5401a901 100644 --- a/app/src/protyle/util/selection.ts +++ b/app/src/protyle/util/selection.ts @@ -491,7 +491,7 @@ export const focusBlock = (element: Element, parentElement?: HTMLElement, toStar return false; } // hr、嵌入块、数学公式、iframe、音频、视频、图表渲染块等,删除段落块后,光标位置矫正 https://github.com/siyuan-note/siyuan/issues/4143 - if (element.classList.contains("render-node") || element.classList.contains("iframe") || element.classList.contains("hr")) { + if (element.classList.contains("render-node") || element.classList.contains("iframe") || element.classList.contains("hr") || element.classList.contains("av")) { const range = document.createRange(); const type = element.getAttribute("data-type"); let setRange = false; @@ -531,6 +531,14 @@ export const focusBlock = (element: Element, parentElement?: HTMLElement, toStar range.selectNodeContents(element); range.collapse(true); setRange = true; + } else if (type === "NodeAttributeView") { + const cursorElement = element.querySelector(".av__cursor") + if (cursorElement) { + range.setStart(cursorElement.firstChild, 0); + setRange = true; + } else { + return false; + } } if (setRange) { focusByRange(range); @@ -539,17 +547,6 @@ export const focusBlock = (element: Element, parentElement?: HTMLElement, toStar focusSideBlock(element); return false; } - } else if (element.classList.contains("av")) { - const avTitleElement = element.querySelector(".av__title"); - if (avTitleElement) { - const range = document.createRange(); - range.selectNodeContents(avTitleElement); - range.collapse(); - focusByRange(range); - return range; - } else { - return false; - } } let cursorElement; if (toStart) { diff --git a/app/src/protyle/wysiwyg/input.ts b/app/src/protyle/wysiwyg/input.ts index 7aad13142..fbc2d5e61 100644 --- a/app/src/protyle/wysiwyg/input.ts +++ b/app/src/protyle/wysiwyg/input.ts @@ -9,7 +9,7 @@ import {getContenteditableElement, getNextBlock, hasNextSibling, isNotEditBlock} import {genEmptyBlock} from "../../block/util"; import {blockRender} from "../render/blockRender"; import {hideElements} from "../ui/hideElements"; -import {hasClosestByAttribute} from "../util/hasClosest"; +import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest"; import {fetchPost, fetchSyncPost} from "../../util/fetch"; import {headingTurnIntoList, turnIntoTaskList} from "./turnIntoList"; import {updateAVName} from "../render/av/action"; @@ -20,7 +20,12 @@ export const input = async (protyle: IProtyle, blockElement: HTMLElement, range: return; } if (blockElement.classList.contains("av")) { - updateAVName(protyle, blockElement); + const avCursorElement = hasClosestByClassName(range.startContainer, "av__cursor") + if (avCursorElement) { + range.startContainer.textContent = Constants.ZWSP; + } else { + updateAVName(protyle, blockElement); + } return; } const editElement = getContenteditableElement(blockElement) as HTMLElement;