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/6542

Browse source
This commit is contained in:
Vanessa 2022-11-11 14:48:45 +08:00
parent 6a31ab85aa
commit 2cc66e21df
4 changed files with 28 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/src/asset/renderAssets.ts
View file

@ -3,6 +3,7 @@ import {Constants} from "../constants";
import {getAllModels} from "../layout/getAll"; import {getAllModels} from "../layout/getAll";
/// #endif /// #endif
import {pathPosix} from "../util/pathName"; import {pathPosix} from "../util/pathName";
import * as dayjs from "dayjs";
export const renderAssetsPreview = (pathString: string) => { export const renderAssetsPreview = (pathString: string) => {
if (!pathString) { if (!pathString) {
@ -44,3 +45,21 @@ export const pdfResize = () => {
}); });
/// #endif /// #endif
}; };
export const genAssetHTML = (type: string, pathString: string, imgName: string, linkName: string) => {
let html = ""
if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
html = `<div data-node-id="${Lute.NewNodeID()}" data-type="NodeAudio" class="iframe" updated="${dayjs().format("YYYYMMDDHHmmss")}"><div class="iframe-content"><audio controls="controls" src="${pathString}" data-src="${pathString}"></audio>${Constants.ZWSP}</div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div></div>`;
} else if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
let netHTML = ""
if (!pathString.startsWith("assets/")) {
netHTML = '<span class="img__net"><svg><use xlink:href="#iconLanguage"></use></svg></span>'
}
html = `<span contenteditable="false" data-type="img" class="img"><span> </span><span><span class="protyle-action protyle-icons"><span class="protyle-icon protyle-icon--only"><svg class="svg"><use xlink:href="#iconMore"></use></svg></span></span><img src="${pathString}" data-src="${pathString}" alt="${imgName}" /><span class="protyle-action__drag"></span>${netHTML}<span class="protyle-action__title"></span></span><span> </span></span>`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
html = `<div data-node-id="${Lute.NewNodeID()}" data-type="NodeVideo" class="iframe" updated="${dayjs().format("YYYYMMDDHHmmss")}"><div class="iframe-content">${Constants.ZWSP}<video controls="controls" src="${pathString}" data-src="${pathString}"></video><span class="protyle-action__drag" contenteditable="false"></span></div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div></div>`;
} else {
html = `<span data-type="a" data-href="${pathString}">${linkName}</span>`;
}
return html;
}

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

@ -754,7 +754,7 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
html = nodeElement.outerHTML; html = nodeElement.outerHTML;
}); });
inputElement.addEventListener("compositionend", () => { inputElement.addEventListener("compositionend", () => {
linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value) || ""; linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value || "");
}); });
inputElement.addEventListener("input", (event: KeyboardEvent) => { inputElement.addEventListener("input", (event: KeyboardEvent) => {
if (!event.isComposing) { if (!event.isComposing) {

13
app/src/protyle/hint/extend.ts
View file

@ -17,6 +17,7 @@ import {updateListOrder} from "../wysiwyg/list";
import {escapeHtml} from "../../util/escape"; import {escapeHtml} from "../../util/escape";
import {zoomOut} from "../../menus/protyle"; import {zoomOut} from "../../menus/protyle";
import {hideElements} from "../ui/hideElements"; import {hideElements} from "../ui/hideElements";
import {genAssetHTML} from "../../asset/renderAssets";
export const hintSlash = (key: string, protyle: IProtyle) => { export const hintSlash = (key: string, protyle: IProtyle) => {
const allList: IHintData[] = [{ const allList: IHintData[] = [{
@ -428,17 +429,7 @@ export const hintRenderAssets = (value: string, protyle: IProtyle) => {
focusByRange(protyle.toolbar.range); focusByRange(protyle.toolbar.range);
const type = pathPosix().extname(value).toLowerCase(); const type = pathPosix().extname(value).toLowerCase();
const filename = value.startsWith("assets/") ? getAssetName(value) : value; const filename = value.startsWith("assets/") ? getAssetName(value) : value;
let fileMD = ""; insertHTML(genAssetHTML(type, value, filename, value.startsWith("assets/") ? filename + type : value), protyle);
if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
fileMD += `<audio controls="controls" src="${value}"></audio>`;
} else if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
fileMD += `![${filename}](${value})`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
fileMD += `<video controls="controls" src="${value}"></video>`;
} else {
fileMD += `[${value.startsWith("assets/") ? filename + type : value}](${value})`;
}
insertHTML(protyle.lute.SpinBlockDOM(fileMD), protyle);
hideElements(["util"], protyle); hideElements(["util"], protyle);
}; };

18
app/src/protyle/upload/index.ts
View file

@ -5,6 +5,7 @@ import {destroy} from "../util/destroy";
import {fetchPost} from "../../util/fetch"; import {fetchPost} from "../../util/fetch";
import {getEditorRange} from "../util/selection"; import {getEditorRange} from "../util/selection";
import {pathPosix} from "../../util/pathName"; import {pathPosix} from "../../util/pathName";
import {genAssetHTML} from "../../asset/renderAssets";
export class Upload { export class Upload {
public element: HTMLElement; public element: HTMLElement;
@ -102,16 +103,9 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
const path = response.data.succMap[key]; const path = response.data.succMap[key];
const type = pathPosix().extname(key).toLowerCase(); const type = pathPosix().extname(key).toLowerCase();
const filename = protyle.options.upload.filename(key); const filename = protyle.options.upload.filename(key);
if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) { succFileText += genAssetHTML(type, path, filename.substring(0, filename.length - type.length), filename)
succFileText += `<audio controls="controls" src="${path}"></audio>`; if (!Constants.SIYUAN_ASSETS_AUDIO.includes(type) && !Constants.SIYUAN_ASSETS_VIDEO.includes(type) &&
} else if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) { keys.length - 1 !== index) {
succFileText += `![${filename.substring(0, filename.length - type.length)}](${path})`;
} else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
succFileText += `<video controls="controls" src="${path}"></video>`;
} else {
succFileText += `[${filename}](${path})`;
}
if (keys.length - 1 !== index) {
succFileText += "\n"; succFileText += "\n";
} }
}); });
@ -121,10 +115,10 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
range.setEndAfter(range.startContainer.parentElement); range.setEndAfter(range.startContainer.parentElement);
range.collapse(false); range.collapse(false);
} }
insertHTML(protyle.lute.SpinBlockDOM(succFileText), protyle); insertHTML(succFileText, protyle);
}; };
export const uploadLocalFiles = (files: string[], protyle: IProtyle, isUpload:boolean) => { export const uploadLocalFiles = (files: string[], protyle: IProtyle, isUpload: boolean) => {
const msgId = showMessage(window.siyuan.languages.uploading, 0); const msgId = showMessage(window.siyuan.languages.uploading, 0);
fetchPost("/api/asset/insertLocalAssets", { fetchPost("/api/asset/insertLocalAssets", {
assetPaths: files, assetPaths: files,