Skip to content

Commit

Permalink
🎨 fix #8617
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Jun 29, 2023
1 parent 7ea6f08 commit 6e52e78
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 87 deletions.
113 changes: 113 additions & 0 deletions app/src/menus/protyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,104 @@ import {renameTag} from "../util/noRelyPCFunction";
import {hideElements} from "../protyle/ui/hideElements";
import {emitOpenMenu} from "../plugin/EventBus";

export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement) => {
const nodeElement = hasClosestBlock(refElement);
if (!nodeElement) {
return;
}
hideElements(["util", "toolbar", "hint"], protyle);
const id = nodeElement.getAttribute("data-node-id");
const oldHTML = nodeElement.outerHTML;
window.siyuan.menus.menu.remove();
let anchorElement: HTMLInputElement;
window.siyuan.menus.menu.append(new MenuItem({
label: `<input style="margin: 4px 0" class="b3-text-field fn__block" value="${refElement.getAttribute("data-id") || ""}" readonly placeholder="ID">`,
}).element);
window.siyuan.menus.menu.append(new MenuItem({
label: `<input style="margin: 4px 0" class="b3-text-field fn__block" data-type="anchor" placeholder="${window.siyuan.languages.anchor}">`,
bind(menuItemElement) {
anchorElement = menuItemElement.querySelector("input");
anchorElement.value = refElement.textContent;
const inputEvent = () => {
if (anchorElement.value) {
refElement.innerHTML = Lute.EscapeHTMLStr(anchorElement.value);
} else {
refElement.innerHTML = "*";
}
}
anchorElement.addEventListener("input", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
inputEvent();
event.stopPropagation();
});
anchorElement.addEventListener("compositionend", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
inputEvent();
event.stopPropagation();
});
anchorElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
if (event.key === "Enter" && !event.isComposing) {
window.siyuan.menus.menu.remove();
} else if (electronUndo(event)) {
return;
}
});
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
icon: "iconTrashcan",
label: window.siyuan.languages.remove,
click() {
refElement.outerHTML = refElement.textContent + "<wbr>";
}
}).element);

if (protyle?.app?.plugins) {
emitOpenMenu({
plugins: protyle.app.plugins,
type: "open-menu-fileannotationref",
detail: {
protyle,
element: refElement,
},
separatorPosition: "top",
});
}

const rect = refElement.getBoundingClientRect();
window.siyuan.menus.menu.popup({
x: rect.left,
y: rect.top + 26,
h: 26
});

anchorElement.select();
window.siyuan.menus.menu.removeCB = () => {
if (nodeElement.outerHTML !== oldHTML) {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, oldHTML);
}

const currentRange = getSelection().rangeCount === 0 ? undefined : getSelection().getRangeAt(0);
if (currentRange && !protyle.element.contains(currentRange.startContainer)) {
if (refElement.parentElement) {
protyle.toolbar.range.selectNodeContents(refElement);
protyle.toolbar.range.collapse(false);
focusByRange(protyle.toolbar.range);
} else {
focusByWbr(nodeElement, protyle.toolbar.range);
}
}
};
};

export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
const nodeElement = hasClosestBlock(element);
if (!nodeElement) {
Expand Down Expand Up @@ -71,6 +169,9 @@ export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
element.setAttribute("data-subtype", inputElement.value ? "s" : "d");
});
inputElement.addEventListener("keydown", (event) => {
if (event.isComposing) {
return;
}
if (event.key === "Enter" && !event.isComposing) {
window.siyuan.menus.menu.remove();
} else if (electronUndo(event)) {
Expand Down Expand Up @@ -443,6 +544,18 @@ export const contentMenu = (protyle: IProtyle, nodeElement: Element) => {
}).element);
}
}
if (protyle?.app?.plugins) {
emitOpenMenu({
plugins: protyle.app.plugins,
type: "open-menu-content",
detail: {
protyle,
range,
element: nodeElement,
},
separatorPosition: "top",
});
}
};

export const zoomOut = (options: {
Expand Down
4 changes: 2 additions & 2 deletions app/src/mobile/util/touch.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {closePanel} from "./closePanel";
import {popMenu} from "../menu";
import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar";
import {getCurrentEditor} from "../editor";
import {linkMenu, refMenu, tagMenu} from "../../menus/protyle";
import {fileAnnotationRefMenu, linkMenu, refMenu, tagMenu} from "../../menus/protyle";

let clientX: number;
let clientY: number;
Expand Down Expand Up @@ -46,7 +46,7 @@ export const handleTouchEnd = (event: TouchEvent) => {
if (types.includes("block-ref")) {
refMenu(editor.protyle, target);
} else if (types.includes("file-annotation-ref")) {
editor.protyle.toolbar.showFileAnnotationRef(editor.protyle, target);
fileAnnotationRefMenu(editor.protyle, target);
} else if (types.includes("tag")) {
tagMenu(editor.protyle, target);
} else if (types.includes("a")) {
Expand Down
81 changes: 0 additions & 81 deletions app/src/protyle/toolbar/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -754,87 +754,6 @@ export class Toolbar {
}
}

public showFileAnnotationRef(protyle: IProtyle, refElement: HTMLElement) {
const nodeElement = hasClosestBlock(refElement);
if (!nodeElement) {
return;
}
hideElements(["hint"], protyle);
window.siyuan.menus.menu.remove();
const id = nodeElement.getAttribute("data-node-id");
const html = nodeElement.outerHTML;
this.subElement.style.padding = "";
this.subElement.innerHTML = `<div class="b3-form__space--small">
<label class="fn__flex">
<span class="ft__on-surface fn__flex-center" style="width: 64px">ID</span>
<div class="fn__space"></div>
<input data-type="id" value="${refElement.getAttribute("data-id") || ""}" class="b3-text-field fn__block" readonly />
</label>
<div class="fn__hr"></div>
<label class="fn__flex">
<span class="ft__on-surface fn__flex-center" style="width: 64px">${window.siyuan.languages.anchor}</span>
<div class="fn__space"></div>
<input data-type="anchor" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.anchor}" />
</label>
<div class="fn__hr"></div>
<div class="fn__hr"></div>
<div class="fn__flex"><span class="fn__flex-1"></span>
<button class="b3-button b3-button--cancel">${window.siyuan.languages.remove}</button>
</div></div>`;
this.subElement.querySelector(".b3-button--cancel").addEventListener(getEventName(), () => {
refElement.outerHTML = refElement.textContent + "<wbr>";
hideElements(["util"], protyle);
});
const anchorElement = this.subElement.querySelector('[data-type="anchor"]') as HTMLInputElement;
anchorElement.value = refElement.textContent;
anchorElement.addEventListener("input", (event) => {
if (anchorElement.value) {
refElement.innerHTML = Lute.EscapeHTMLStr(anchorElement.value);
} else {
refElement.innerHTML = "*";
}
event.stopPropagation();
});
anchorElement.addEventListener("keydown", (event: KeyboardEvent) => {
event.stopPropagation();
if (event.isComposing) {
return;
}
if (event.key === "Enter" || event.key === "Escape") {
hideElements(["util"], protyle);
event.preventDefault();
event.stopPropagation();
}
});
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = () => {
if (refElement.parentElement) {
if (anchorElement.value) {
refElement.innerHTML = Lute.EscapeHTMLStr(anchorElement.value);
} else {
refElement.innerHTML = "*";
}
this.range.setStartAfter(refElement);
if (getSelection().rangeCount === 0) {
focusByRange(this.range);
}
} else {
if (getSelection().rangeCount === 0) {
focusByWbr(nodeElement, this.range);
}
}
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
};
/// #if !MOBILE
this.subElement.style.width = Math.min(480, window.innerWidth) + "px";
const nodeRect = refElement.getBoundingClientRect();
setPosition(this.subElement, nodeRect.left, nodeRect.bottom, nodeRect.height + 4);
/// #endif
this.element.classList.add("fn__none");
anchorElement.select();
}

public showRender(protyle: IProtyle, renderElement: Element, updateElements?: Element[], oldHTML?: string) {
const nodeElement = hasClosestBlock(renderElement);
if (!nodeElement) {
Expand Down
13 changes: 11 additions & 2 deletions app/src/protyle/wysiwyg/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,16 @@ import {getSearch, isMobile} from "../../util/functions";
import {isLocalPath, pathPosix} from "../../util/pathName";
import {genEmptyElement} from "../../block/util";
import {previewImage} from "../preview/image";
import {contentMenu, imgMenu, linkMenu, refMenu, setFold, tagMenu, zoomOut} from "../../menus/protyle";
import {
contentMenu,
fileAnnotationRefMenu,
imgMenu,
linkMenu,
refMenu,
setFold,
tagMenu,
zoomOut
} from "../../menus/protyle";
import * as dayjs from "dayjs";
import {dropEvent} from "../util/editorCommonEvent";
import {input} from "./input";
Expand Down Expand Up @@ -1218,7 +1227,7 @@ export class WYSIWYG {
}, 620);
return false;
} else if (types.includes("file-annotation-ref") && !protyle.disabled) {
protyle.toolbar.showFileAnnotationRef(protyle, target);
fileAnnotationRefMenu(protyle, target);
return false;
} else if (types.includes("tag") && !protyle.disabled) {
tagMenu(protyle, target);
Expand Down
4 changes: 2 additions & 2 deletions app/src/protyle/wysiwyg/keydown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ import {
goHome,
upSelect
} from "./commonHotkey";
import {linkMenu, refMenu, setFold, tagMenu, zoomOut} from "../../menus/protyle";
import {fileAnnotationRefMenu, linkMenu, refMenu, setFold, tagMenu, zoomOut} from "../../menus/protyle";
import {removeEmbed} from "./removeEmbed";
import {openAttr} from "../../menus/commonMenuItem";
import {Constants} from "../../constants";
Expand Down Expand Up @@ -538,7 +538,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
protyle.toolbar.showRender(protyle, inlineElement);
return;
} else if (types.includes("file-annotation-ref")) {
protyle.toolbar.showFileAnnotationRef(protyle, inlineElement);
fileAnnotationRefMenu(protyle, inlineElement);
return;
} else if (types.includes("a")) {
linkMenu(protyle, inlineElement);
Expand Down

0 comments on commit 6e52e78

Please sign in to comment.