diff --git a/app/src/protyle/markdown/mathRender.ts b/app/src/protyle/markdown/mathRender.ts index e56a02e7308..fdb0ff73544 100644 --- a/app/src/protyle/markdown/mathRender.ts +++ b/app/src/protyle/markdown/mathRender.ts @@ -66,9 +66,15 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid } } else { if (blockElement && mathElement.getBoundingClientRect().width > blockElement.clientWidth) { - mathElement.setAttribute("style", "max-width:100%;overflow-x:auto;overflow-y:hidden;display:inline-block"); + mathElement.style.maxWidth = "100%" + mathElement.style.overflowX = "auto" + mathElement.style.overflowY = "hidden" + mathElement.style.display = "inline-block" } else { - mathElement.removeAttribute("style"); + mathElement.style.maxWidth = "" + mathElement.style.overflowX = "" + mathElement.style.overflowY = "" + mathElement.style.display = "" } const nextSibling = hasNextSibling(mathElement); if (!nextSibling) { diff --git a/app/src/protyle/toolbar/InlineMath.ts b/app/src/protyle/toolbar/InlineMath.ts index d06495fc28f..ad06beff232 100644 --- a/app/src/protyle/toolbar/InlineMath.ts +++ b/app/src/protyle/toolbar/InlineMath.ts @@ -20,13 +20,6 @@ export class InlineMath extends ToolbarItem { if (!nodeElement) { return; } - - const inlineMathElement = hasClosestByAttribute(range.startContainer, "data-type", "inline-math"); - if (inlineMathElement) { - mathRender(inlineMathElement); - return; - } - if (!["DIV", "TD", "TH"].includes(range.startContainer.parentElement.tagName) && range.startOffset === 0 && !hasPreviousSibling(range.startContainer)) { range.setStartBefore(range.startContainer.parentElement); } @@ -38,14 +31,18 @@ export class InlineMath extends ToolbarItem { const html = nodeElement.outerHTML; const newElement = document.createElement("span"); + const rangeString = range.toString(); newElement.className = "render-node"; newElement.setAttribute("contenteditable", "false"); newElement.setAttribute("data-type", "inline-math"); newElement.setAttribute("data-subtype", "math"); - newElement.setAttribute("data-content", range.toString()); + newElement.setAttribute("data-content", rangeString.trim()); range.extractContents(); range.insertNode(newElement); mathRender(newElement); + if (rangeString.trim() === "") { + protyle.toolbar.showRender(protyle, newElement); + } nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); wbrElement.remove();