Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 16:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

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

@ -132,7 +132,7 @@ export const initBlockPopover = () => {
ids = [dataId]; ids = [dataId];
} }
defIds = JSON.parse(popoverTargetElement.getAttribute("data-defids") || "[]"); 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); const nodeElement = hasClosestBlock(popoverTargetElement);
if (nodeElement) { if (nodeElement) {
const postResponse = await fetchSyncPost("/api/block/getBlockDefIDsByRefText", { 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", icon: "iconGraph",
click() { click() {
linkElement.setAttribute("data-subtype", "s"); 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.setAttribute("data-id", linkAddress?.replace("siyuan://blocks/", ""));
linkElement.removeAttribute("data-href"); linkElement.removeAttribute("data-href");
linkElement.removeAttribute("data-title"); 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); updateTransaction(options.protyle, options.id, newHTML, oldHTML);
} }
focusByWbr(options.protyle.wysiwyg.element, getEditorRange(options.protyle.wysiwyg.element)); 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 === "") { if (item.textContent === "") {
fetchPost("/api/block/getRefText", {id: item.getAttribute("data-id")}, (response) => { fetchPost("/api/block/getRefText", {id: item.getAttribute("data-id")}, (response) => {
item.innerHTML = response.data; item.innerHTML = response.data;

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

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

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

@ -129,7 +129,7 @@ class Protyle {
} }
} }
// update ref // 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") { if (item.getAttribute("data-subtype") === "d") {
item.textContent = data.data.title; item.textContent = data.data.title;
} }

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

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

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

@ -126,7 +126,7 @@ export class Toolbar {
}); });
const types = this.getCurrentType(); const types = this.getCurrentType();
types.forEach(item => { types.forEach(item => {
if (item === "blockRef") { if (item === "block-ref" || item === "text") {
return; return;
} }
this.element.querySelector(`[data-type="${item}"]`).classList.add("protyle-toolbar__item--current"); this.element.querySelector(`[data-type="${item}"]`).classList.add("protyle-toolbar__item--current");
@ -600,15 +600,15 @@ export class Toolbar {
newElement = document.createElement("span"); newElement = document.createElement("span");
newElement.setAttribute("data-type", "a"); newElement.setAttribute("data-type", "a");
break; break;
case "blockRef": // case "blockRef":
if (refText === "") { // if (refText === "") {
wbrElement.remove(); // wbrElement.remove();
return; // return;
} // }
this.range.insertNode(refNode); // this.range.insertNode(refNode);
this.range.selectNodeContents(refNode); // this.range.selectNodeContents(refNode);
hintRef(refText, protyle, true); // hintRef(refText, protyle, true);
break; // break;
case "inline-math": case "inline-math":
newElement = document.createElement("span"); newElement = document.createElement("span");
newElement.className = "render-node"; 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 e = element as HTMLElement;
let isClosest = false; let isClosest = false;
while (e && !isClosest && (top ? e.tagName !== "BODY" : !e.classList.contains("protyle-wysiwyg"))) { 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; isClosest = true;
} else if (typeof value !== "string" && e.hasAttribute(attr)) { } else if (typeof value !== "string" && e.hasAttribute(attr)) {
isClosest = true; 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) { if (inlineMathElement) {
// 表格内选中数学公式 https://ld246.com/article/1631708573504 // 表格内选中数学公式 https://ld246.com/article/1631708573504
inlineMathElement.remove(); 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 // ref 选中处理 https://ld246.com/article/1629214377537
range.startContainer.parentElement.remove(); range.startContainer.parentElement.remove();
// 选中 ref**bbb** 后 alt+[
range.deleteContents();
} else { } else {
range.deleteContents(); 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 dom: tempElement.innerHTML
}, (response) => { }, (response) => {
insertHTML(response.data, protyle); 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 === "") { if (item.textContent === "") {
fetchPost("/api/block/getRefText", {id: item.getAttribute("data-id")}, (response) => { fetchPost("/api/block/getRefText", {id: item.getAttribute("data-id")}, (response) => {
item.innerHTML = response.data; item.innerHTML = response.data;

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

@ -1068,8 +1068,8 @@ export class WYSIWYG {
return false; return false;
} }
protyle.toolbar.range = getEditorRange(protyle.element); protyle.toolbar.range = getEditorRange(protyle.element);
const type = target.getAttribute("data-type"); const types = target.getAttribute("data-type").split(" ");
if (type === "block-ref") { if (types.includes("block-ref")) {
refMenu(protyle, target); refMenu(protyle, target);
// 阻止 popover // 阻止 popover
target.setAttribute("prevent-popover", "true"); target.setAttribute("prevent-popover", "true");
@ -1078,11 +1078,11 @@ export class WYSIWYG {
}, 620); }, 620);
return false; return false;
} }
if (type === "file-annotation-ref") { if (types.includes("file-annotation-ref")) {
protyle.toolbar.showFileAnnotationRef(protyle, target); protyle.toolbar.showFileAnnotationRef(protyle, target);
return false; return false;
} }
if (type === "a") { if (types.includes("a")) {
linkMenu(protyle, target); linkMenu(protyle, target);
if (target.getAttribute("data-href")?.startsWith("siyuan://blocks")) { if (target.getAttribute("data-href")?.startsWith("siyuan://blocks")) {
// 阻止 popover // 阻止 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("/"); const ids = protyle.path.split("/");
if (ids.length > 2) { if (ids.length > 2) {
/// #if MOBILE /// #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 /// #else
openFileById({ openFileById({
id: ids[ids.length - 2], id: ids[ids.length - 2],
@ -520,14 +520,14 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
event.preventDefault(); event.preventDefault();
const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", null); const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", null);
if (inlineElement) { if (inlineElement) {
const type = inlineElement.getAttribute("data-type"); const types = inlineElement.getAttribute("data-type").split(" ");
if (type === "block-ref") { if (types.includes("block-ref")) {
refMenu(protyle, inlineElement); refMenu(protyle, inlineElement);
return; return;
} else if (type === "file-annotation-ref") { } else if (types.includes("file-annotation-ref")) {
protyle.toolbar.showFileAnnotationRef(protyle, inlineElement); protyle.toolbar.showFileAnnotationRef(protyle, inlineElement);
return; return;
} else if (type === "a") { } else if (types.includes("a")) {
linkMenu(protyle, inlineElement); linkMenu(protyle, inlineElement);
return; return;
} }
@ -1185,8 +1185,8 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
} }
if (matchHotKey(menuItem.hotkey, event)) { if (matchHotKey(menuItem.hotkey, event)) {
protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element); protyle.toolbar.range = getEditorRange(protyle.wysiwyg.element);
if (menuItem.name === "text") { if (menuItem.name === "text" || menuItem.name === "block-ref") {
protyle.toolbar.element.querySelector('[data-type="text"]').dispatchEvent(new CustomEvent(getEventName())); protyle.toolbar.element.querySelector(`[data-type="${menuItem.name}"]`).dispatchEvent(new CustomEvent(getEventName()));
} else { } else {
protyle.toolbar.setInlineMark(protyle, menuItem.name, "range"); 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") { if (item.getAttribute("data-subtype") === "d") {
item.textContent = "block not found"; item.textContent = "block not found";
} }
@ -265,7 +265,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
} }
}); });
// 更新 ws 引用块 // 更新 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") { if (item.getAttribute("data-subtype") === "d") {
item.textContent = "block not found"; item.textContent = "block not found";
} }
@ -701,7 +701,7 @@ const updateRef = (protyle: IProtyle, id: string, index = 0) => {
if (index > 6) { if (index > 6) {
return; 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") { if (item.getAttribute("data-subtype") === "d") {
fetchPost("/api/block/getRefText", {id: id}, (response) => { fetchPost("/api/block/getRefText", {id: id}, (response) => {
item.innerHTML = response.data; item.innerHTML = response.data;