0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ https://github.com/siyuan-note/siyuan/issues/2911 block-ref

Browse source
This commit is contained in:
Vanessa 2022-09-14 23:26:02 +08:00
parent fc932b0065
commit 7e164623cb
14 changed files with 48 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/src/assets/scss/_wysiwyg.scss
View file

@ -239,8 +239,8 @@
background-color: var(--b3-protyle-inline-mark-background);
}
span[data-type="block-ref"],
span[data-type="file-annotation-ref"] {
span[data-type~="block-ref"],
span[data-type~="file-annotation-ref"] {
color: var(--b3-protyle-inline-blockref-color);
opacity: .86;
transition: var(--b3-transition);
@ -573,10 +573,10 @@
// 导出 html 不需要编辑样式
.protyle-wysiwyg[contenteditable="true"] {
span[data-type="inline-math"],
span[data-type="tag"],
span[data-type="block-ref"],
span[data-type="file-annotation-ref"],
span[data-type~="inline-math"],
span[data-type~="tag"],
span[data-type~="block-ref"],
span[data-type~="file-annotation-ref"],
.protyle-action__language,
.img > span:nth-child(2),
.li > .protyle-action,
@ -584,12 +584,12 @@
cursor: pointer;
}
span[data-type="tag"]:hover {
span[data-type~="tag"]:hover {
background-color: var(--b3-border-color);
}
span[data-type="block-ref"]:hover,
span[data-type="file-annotation-ref"]:hover {
span[data-type~="block-ref"]:hover,
span[data-type~="file-annotation-ref"]:hover {
opacity: 1;
}

2
app/src/block/popover.ts
View file

@ -132,7 +132,7 @@ export const initBlockPopover = () => {
ids = [dataId];
}
defIds = JSON.parse(popoverTargetElement.getAttribute("data-defids") || "[]");
} else if (popoverTargetElement.getAttribute("data-type") === "virtual-block-ref") {
} else if (popoverTargetElement.getAttribute("data-type").indexOf("virtual-block-ref") > -1) {
const nodeElement = hasClosestBlock(popoverTargetElement);
if (nodeElement) {
const postResponse = await fetchSyncPost("/api/block/getBlockDefIDsByRefText", {

5
app/src/menus/protyle.ts
View file

@ -794,7 +794,10 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
icon: "iconGraph",
click() {
linkElement.setAttribute("data-subtype", "s");
linkElement.setAttribute("data-type", "block-ref");
const types = linkElement.getAttribute("data-type").split(" ");
types.push("block-ref");
types.splice(types.indexOf("a"), 1);
linkElement.setAttribute("data-type", types.join(" "));
linkElement.setAttribute("data-id", linkAddress?.replace("siyuan://blocks/", ""));
linkElement.removeAttribute("data-href");
linkElement.removeAttribute("data-title");

2
app/src/protyle/gutter/index.ts
View file

@ -322,7 +322,7 @@ export class Gutter {
updateTransaction(options.protyle, options.id, newHTML, oldHTML);
}
focusByWbr(options.protyle.wysiwyg.element, getEditorRange(options.protyle.wysiwyg.element));
options.protyle.wysiwyg.element.querySelectorAll('[data-type="block-ref"]').forEach(item => {
options.protyle.wysiwyg.element.querySelectorAll('[data-type~="block-ref"]').forEach(item => {
if (item.textContent === "") {
fetchPost("/api/block/getRefText", {id: item.getAttribute("data-id")}, (response) => {
item.innerHTML = response.data;

2
app/src/protyle/hint/index.ts
View file

@ -439,9 +439,9 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
}
return;
}
range.deleteContents();
range.insertNode(document.createElement("wbr"));
html = nodeElement.outerHTML;
range.deleteContents();
const tempElement = document.createElement("template");
tempElement.innerHTML = value.replace(/<mark>/g, "").replace(/<\/mark>/g, "");
range.insertNode(tempElement.content.cloneNode(true));

2
app/src/protyle/index.ts
View file

@ -129,7 +129,7 @@ class Protyle {
}
}
// update ref
this.protyle.wysiwyg.element.querySelectorAll(`[data-type="block-ref"][data-id="${data.data.id}"]`).forEach(item => {
this.protyle.wysiwyg.element.querySelectorAll(`[data-type="~block-ref"][data-id="${data.data.id}"]`).forEach(item => {
if (item.getAttribute("data-subtype") === "d") {
item.textContent = data.data.title;
}

3
app/src/protyle/toolbar/BlockRef.ts
View file

@ -1,4 +1,5 @@
import {ToolbarItem} from "./ToolbarItem";
import {hintRef} from "../hint/extend";
export class BlockRef extends ToolbarItem {
public element: HTMLElement;
@ -7,7 +8,7 @@ export class BlockRef extends ToolbarItem {
super(protyle, menuItem);
// 不能用 getEventName，否则会导致光标位置变动到点击的文档中
this.element.addEventListener("click", (event: MouseEvent & { changedTouches: MouseEvent[] }) => {
protyle.toolbar.setInlineMark(protyle, "blockRef", "add");
hintRef(protyle.toolbar.range.toString(), protyle, true);
protyle.toolbar.element.classList.add("fn__none");
event.stopPropagation();
});

20
app/src/protyle/toolbar/index.ts
View file

@ -126,7 +126,7 @@ export class Toolbar {
});
const types = this.getCurrentType();
types.forEach(item => {
if (item === "blockRef") {
if (item === "block-ref" || item === "text") {
return;
}
this.element.querySelector(`[data-type="${item}"]`).classList.add("protyle-toolbar__item--current");
@ -600,15 +600,15 @@ export class Toolbar {
newElement = document.createElement("span");
newElement.setAttribute("data-type", "a");
break;
case "blockRef":
if (refText === "") {
wbrElement.remove();
return;
}
this.range.insertNode(refNode);
this.range.selectNodeContents(refNode);
hintRef(refText, protyle, true);
break;
// case "blockRef":
// if (refText === "") {
// wbrElement.remove();
// return;
// }
// this.range.insertNode(refNode);
// this.range.selectNodeContents(refNode);
// hintRef(refText, protyle, true);
// break;
case "inline-math":
newElement = document.createElement("span");
newElement.className = "render-node";

2
app/src/protyle/util/hasClosest.ts
View file

@ -72,7 +72,7 @@ export const hasClosestByAttribute = (element: Node, attr: string, value: string
let e = element as HTMLElement;
let isClosest = false;
while (e && !isClosest && (top ? e.tagName !== "BODY" : !e.classList.contains("protyle-wysiwyg"))) {
if (typeof value === "string" && e.getAttribute(attr) === value) {
if (typeof value === "string" && e.getAttribute(attr)?.split(" ").includes(value)) {
isClosest = true;
} else if (typeof value !== "string" && e.hasAttribute(attr)) {
isClosest = true;

4
app/src/protyle/util/insertHTML.ts
View file

@ -54,9 +54,11 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false) =>
if (inlineMathElement) {
// 表格内选中数学公式 https://ld246.com/article/1631708573504
inlineMathElement.remove();
} else if (range.startContainer.nodeType === 3 && range.startContainer.parentElement.getAttribute("data-type") === "block-ref") {
} else if (range.startContainer.nodeType === 3 && range.startContainer.parentElement.getAttribute("data-type").indexOf("block-ref")>-1) {
// ref 选中处理 https://ld246.com/article/1629214377537
range.startContainer.parentElement.remove();
// 选中 ref**bbb** 后 alt+[
range.deleteContents();
} else {
range.deleteContents();
}

2
app/src/protyle/util/paste.ts
View file

@ -246,7 +246,7 @@ export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEven
dom: tempElement.innerHTML
}, (response) => {
insertHTML(response.data, protyle);
protyle.wysiwyg.element.querySelectorAll('[data-type="block-ref"]').forEach(item => {
protyle.wysiwyg.element.querySelectorAll('[data-type~="block-ref"]').forEach(item => {
if (item.textContent === "") {
fetchPost("/api/block/getRefText", {id: item.getAttribute("data-id")}, (response) => {
item.innerHTML = response.data;

8
app/src/protyle/wysiwyg/index.ts
View file

@ -1068,8 +1068,8 @@ export class WYSIWYG {
return false;
}
protyle.toolbar.range = getEditorRange(protyle.element);
const type = target.getAttribute("data-type");
if (type === "block-ref") {
const types = target.getAttribute("data-type").split(" ");
if (types.includes("block-ref")) {
refMenu(protyle, target);
// 阻止 popover
target.setAttribute("prevent-popover", "true");
@ -1078,11 +1078,11 @@ export class WYSIWYG {
}, 620);
return false;
}
if (type === "file-annotation-ref") {
if (types.includes("file-annotation-ref")) {
protyle.toolbar.showFileAnnotationRef(protyle, target);
return false;
}
if (type === "a") {
if (types.includes("a")) {
linkMenu(protyle, target);
if (target.getAttribute("data-href")?.startsWith("siyuan://blocks")) {
// 阻止 popover

14
app/src/protyle/wysiwyg/keydown.ts
View file

@ -413,7 +413,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
const ids = protyle.path.split("/");
if (ids.length > 2) {
/// #if MOBILE
openMobileFileById(ids[ids.length - 2],[Constants.CB_GET_FOCUS, Constants.CB_GET_SCROLL]);
openMobileFileById(ids[ids.length - 2], [Constants.CB_GET_FOCUS, Constants.CB_GET_SCROLL]);
/// #else
openFileById({
id: ids[ids.length - 2],
@ -520,14 +520,14 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
event.preventDefault();
const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", null);
if (inlineElement) {
const type = inlineElement.getAttribute("data-type");
if (type === "block-ref") {
const types = inlineElement.getAttribute("data-type").split(" ");
if (types.includes("block-ref")) {
refMenu(protyle, inlineElement);
return;
} else if (type === "file-annotation-ref") {
} else if (types.includes("file-annotation-ref")) {
protyle.toolbar.showFileAnnotationRef(protyle, inlineElement);
return;
} else if (type === "a") {
} else if (types.includes("a")) {
linkMenu(protyle, inlineElement);
return;
}
@ -1185,8 +1185,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
}
if (matchHotKey(menuItem.hotkey, event)) {
protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element);
if (menuItem.name === "text") {
protyle.toolbar.element.querySelector('[data-type="text"]').dispatchEvent(new CustomEvent(getEventName()));
if (menuItem.name === "text" || menuItem.name === "block-ref") {
protyle.toolbar.element.querySelector(`[data-type="${menuItem.name}"]`).dispatchEvent(new CustomEvent(getEventName()));
} else {
protyle.toolbar.setInlineMark(protyle, menuItem.name, "range");
}

6
app/src/protyle/wysiwyg/transaction.ts
View file

@ -132,7 +132,7 @@ const promiseTransaction = () => {
}
});
// 更新引用块
protyle.wysiwyg.element.querySelectorAll(`[data-type="block-ref"][data-id="${operation.id}"]`).forEach(item => {
protyle.wysiwyg.element.querySelectorAll(`[data-type~="block-ref"][data-id="${operation.id}"]`).forEach(item => {
if (item.getAttribute("data-subtype") === "d") {
item.textContent = "block not found";
}
@ -265,7 +265,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
}
});
// 更新 ws 引用块
protyle.wysiwyg.element.querySelectorAll(`[data-type="block-ref"][data-id="${operation.id}"]`).forEach(item => {
protyle.wysiwyg.element.querySelectorAll(`[data-type~="block-ref"][data-id="${operation.id}"]`).forEach(item => {
if (item.getAttribute("data-subtype") === "d") {
item.textContent = "block not found";
}
@ -701,7 +701,7 @@ const updateRef = (protyle: IProtyle, id: string, index = 0) => {
if (index > 6) {
return;
}
protyle.wysiwyg.element.querySelectorAll(`[data-type="block-ref"][data-id="${id}"]`).forEach(item => {
protyle.wysiwyg.element.querySelectorAll(`[data-type~="block-ref"][data-id="${id}"]`).forEach(item => {
if (item.getAttribute("data-subtype") === "d") {
fetchPost("/api/block/getRefText", {id: id}, (response) => {
item.innerHTML = response.data;