This commit is contained in:
Vanessa 2023-01-15 22:44:05 +08:00
parent 4db1dc065a
commit 46b818c987
5 changed files with 135 additions and 26 deletions

View file

@ -46,6 +46,8 @@ import {removeLink} from "../protyle/toolbar/Link";
import {alignImgCenter, alignImgLeft} from "../protyle/wysiwyg/commonHotkey";
import {getEnableHTML} from "../protyle/wysiwyg/removeEmbed";
import {updateTitle} from "../dialog/processSystem";
import {renameTag} from "../layout/dock/util";
import {openGlobalSearch} from "../search/util";
export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
const nodeElement = hasClosestBlock(element);
@ -897,6 +899,99 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
}
};
export const tagMenu = (protyle: IProtyle, tagElement: HTMLElement) => {
window.siyuan.menus.menu.remove();
const nodeElement = hasClosestBlock(tagElement);
if (!nodeElement) {
return;
}
const id = nodeElement.getAttribute("data-node-id");
let html = nodeElement.outerHTML;
window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.tag}"><div class="fn__hr--small"></div>`,
bind(element) {
const inputElement = element.querySelector("input");
inputElement.value = tagElement.textContent.replace(Constants.ZWSP, "");
inputElement.addEventListener("change", () => {
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
});
inputElement.addEventListener("compositionend", () => {
tagElement.innerHTML = Constants.ZWSP + Lute.EscapeHTMLStr(inputElement.value || "");
});
inputElement.addEventListener("input", (event: KeyboardEvent) => {
if (!event.isComposing) {
// https://github.com/siyuan-note/siyuan/issues/4511
tagElement.innerHTML = Constants.ZWSP + Lute.EscapeHTMLStr(inputElement.value || "");
}
});
inputElement.addEventListener("keydown", (event) => {
if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) {
event.preventDefault();
event.stopPropagation();
if (!inputElement.value) {
const oldHTML = nodeElement.outerHTML;
tagElement.insertAdjacentHTML("afterend", "<wbr>");
tagElement.remove();
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, oldHTML);
focusByWbr(nodeElement, protyle.toolbar.range);
} else {
protyle.toolbar.range.selectNodeContents(tagElement);
protyle.toolbar.range.collapse(false);
focusByRange(protyle.toolbar.range);
}
window.siyuan.menus.menu.remove();
} else if (electronUndo(event)) {
return;
}
});
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.search,
accelerator: "Click",
icon: "iconSearch",
click() {
openGlobalSearch(`#${tagElement.textContent}#`, false);
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
label: `${window.siyuan.languages.turnInto} <b>${window.siyuan.languages.text}</b>`,
icon: "iconRefresh",
click() {
protyle.toolbar.range.setStart(tagElement.firstChild, 0);
protyle.toolbar.range.setEnd(tagElement.lastChild, tagElement.lastChild.textContent.length);
protyle.toolbar.setInlineMark(protyle, "tag", "range");
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.rename,
click() {
renameTag(tagElement.textContent.replace(Constants.ZWSP, ""))
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
icon: "iconTrashcan",
label: window.siyuan.languages.remove,
click() {
const oldHTML = nodeElement.outerHTML;
tagElement.insertAdjacentHTML("afterend", "<wbr>");
tagElement.remove();
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, oldHTML);
focusByWbr(nodeElement, protyle.toolbar.range);
}
}).element);
const rect = tagElement.getBoundingClientRect();
window.siyuan.menus.menu.popup({
x: rect.left,
y: rect.top + 26,
h: 26
});
window.siyuan.menus.menu.element.querySelector("input").select();
};
const genImageWidthMenu = (label: string, assetElement: HTMLElement, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => {
return {
label,