diff --git a/app/src/assets/scss/_typography.scss b/app/src/assets/scss/_typography.scss index cceaa591c..fb38c0715 100644 --- a/app/src/assets/scss/_typography.scss +++ b/app/src/assets/scss/_typography.scss @@ -188,9 +188,12 @@ box-shadow: inset 0 -1px 0 var(--b3-border-color); } + u { + text-decoration: none; + } + u, span[data-type~="u"] { - text-decoration: none; border-bottom: 1px solid var(--b3-theme-on-background); } diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 463931de7..8c8d59935 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -663,7 +663,6 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText = false) => { window.siyuan.menus.menu.remove(); - protyle.toolbar.isNewEmptyInline = false; const nodeElement = hasClosestBlock(linkElement); if (!nodeElement) { return; diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 6fa1c3e78..afa36e265 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -45,7 +45,6 @@ export class Toolbar { public element: HTMLElement; public subElement: HTMLElement; public range: Range; - public isNewEmptyInline: boolean; private toolbarHeight: number; constructor(protyle: IProtyle) { @@ -62,7 +61,6 @@ export class Toolbar { const itemElement = this.genItem(protyle, menuItem); this.element.appendChild(itemElement); }); - this.isNewEmptyInline = false; } public render(protyle: IProtyle, range: Range, event?: KeyboardEvent) { @@ -131,7 +129,7 @@ export class Toolbar { }); } - public getCurrentType(range = this.range, useEndType = true) { + public getCurrentType(range = this.range) { let types: string[] = []; let startElement = range.startContainer as HTMLElement; if (startElement.nodeType === 3) { @@ -143,11 +141,7 @@ export class Toolbar { return []; } if (!["DIV", "TD", "TH", "TR"].includes(startElement.tagName)) { - if (!useEndType && range.startContainer.textContent.length === range.startOffset && !hasNextSibling(range.startContainer)) { - // 光标在 span 结尾不算 type,否则如在粗体后 ctrl+b 就无法继续使用粗体了 - } else { - types = (startElement.getAttribute("data-type") || "").split(" "); - } + types = (startElement.getAttribute("data-type") || "").split(" "); } let endElement = range.endContainer as HTMLElement; if (endElement.nodeType === 3) { @@ -161,17 +155,6 @@ export class Toolbar { if (!["DIV", "TD", "TH", "TR"].includes(endElement.tagName) && !startElement.isSameNode(endElement)) { types = types.concat((endElement.getAttribute("data-type") || "").split(" ")); } - // if (range.startOffset === range.startContainer.textContent.length) { - // const nextSibling = hasNextSibling(range.startContainer) as Element; - // if (nextSibling && nextSibling.nodeType !== 3) { - // types = types.concat((nextSibling.getAttribute("data-type") || "").split(" ")); - // } - // } else if (range.endOffset === 0) { - // const previousSibling = hasPreviousSibling(range.startContainer) as Element; - // if (previousSibling && previousSibling.nodeType !== 3) { - // types = types.concat((previousSibling.getAttribute("data-type") || "").split(" ")); - // } - // } range.cloneContents().childNodes.forEach((item: HTMLElement) => { if (item.nodeType !== 3) { types = types.concat((item.getAttribute("data-type") || "").split(" ")); @@ -251,7 +234,7 @@ export class Toolbar { if (!nodeElement) { return; } - const rangeTypes = this.getCurrentType(this.range, false); + const rangeTypes = this.getCurrentType(this.range); const selectText = this.range.toString(); // table 选中处理 @@ -314,7 +297,7 @@ export class Toolbar { const contents = this.range.extractContents(); this.mergeNode(contents.childNodes); // 选择 span 中的一部分需进行包裹 - if (previousElement && nextElement && previousElement.isSameNode(nextElement) && contents.firstChild.nodeType === 3) { + if (previousElement && nextElement && previousElement.isSameNode(nextElement) && contents.firstChild?.nodeType === 3) { const attributes = previousElement.attributes; contents.childNodes.forEach(item => { const spanElement = document.createElement("span"); @@ -327,6 +310,7 @@ export class Toolbar { } const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined; const newNodes: Node[] = []; + if (actionBtn?.classList.contains("protyle-toolbar__item--current") || ( action === "range" && rangeTypes.length > 0 && rangeTypes.includes(type) && (!textObj || textObj.type === "remove") )) { @@ -360,6 +344,9 @@ export class Toolbar { } }); if (types.length === 0) { + if (item.textContent === "") { + item.textContent = Constants.ZWSP; + } newNodes.push(document.createTextNode(item.textContent)); } else { if (textObj && textObj.type === "remove") { @@ -380,11 +367,17 @@ export class Toolbar { nextIndex = item.textContent.length; nextElement.innerHTML = item.innerHTML + nextElement.innerHTML; } else { + if (item.textContent === "") { + item.textContent = Constants.ZWSP; + } item.setAttribute("data-type", types.join(" ")); newNodes.push(item); } } } else { + if (item.textContent === "") { + item.textContent = Constants.ZWSP; + } newNodes.push(item); } }); diff --git a/app/src/protyle/wysiwyg/input.ts b/app/src/protyle/wysiwyg/input.ts index 0bb1eb785..e6f0a0958 100644 --- a/app/src/protyle/wysiwyg/input.ts +++ b/app/src/protyle/wysiwyg/input.ts @@ -143,7 +143,8 @@ export const input = async (protyle: IProtyle, blockElement: HTMLElement, range: if (blockElement.classList.contains("table")) { scrollLeft = getContenteditableElement(blockElement).scrollLeft; } - blockElement.outerHTML = html; + // 使用 md 闭合后继续输入应为普通文本 + blockElement.outerHTML = html.replace("", "" + Constants.ZWSP + ""); blockElement = protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`); Array.from(tempElement.content.children).forEach((item, index) => { const tempId = item.getAttribute("data-node-id"); diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index 5b5dd33fd..303ef16d5 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -231,13 +231,6 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } } - if (range.toString() !== "") { - // 选中后继续输入 https://ld246.com/article/1626710391372 - if (protyle.toolbar.getCurrentType(range).length > 0) { - protyle.toolbar.isNewEmptyInline = true; - } - } - // 仅处理以下快捷键操作 if (event.key !== "PageUp" && event.key !== "PageDown" && event.key !== "Home" && event.key !== "End" && event.key.indexOf("Arrow") === -1 && !isCtrl(event) && event.key !== "Escape" && !event.shiftKey && !event.altKey && !/^F\d{1,2}$/.test(event.key) && @@ -246,9 +239,6 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { hideElements(["select"], protyle); return false; } - if (!isCtrl(event) && !event.shiftKey && event.key !== "Backspace" && event.key !== "PageUp" && event.key !== "PageDown" && event.key.indexOf("Arrow") === -1) { - protyle.toolbar.isNewEmptyInline = false; - } if (matchHotKey(window.siyuan.config.keymap.editor.general.collapse.custom, event)) { const selectElements = protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"); if (selectElements.length > 0) { @@ -562,7 +552,6 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { // 上下左右光标移动 if (!event.altKey && !event.shiftKey && !isCtrl(event) && !event.isComposing && (event.key.indexOf("Arrow") > -1)) { - protyle.toolbar.isNewEmptyInline = false; protyle.hint.enableEmoji = false; // 需使用 editabled,否则代码块会把语言字数算入 const nodeEditableElement = getContenteditableElement(nodeElement) || nodeElement;