massivebox/siyuan-jsdraw-plugin
massivebox/siyuan-jsdraw-plugin
2
1
Fork 0
forked from mirrors/plugin-sample-vite-svelte
Code Issues 5 Pull requests Projects 3 Releases 7 Packages Wiki Activity Actions

Prepare for release
Some checks failed
Create Release on Tag Push / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
MassiveBox 2025-04-05 23:23:45 +02:00
parent d8cc4f8caf
commit 0bc89f4a72
Signed by: massivebox
GPG key ID: 9B74D3A59181947D
7 changed files with 48 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -5,16 +5,12 @@ This plugin allows you to embed js-draw whiteboards anywhere in your SiYuan docu
## Usage instructions ## Usage instructions
- Install the plugin from the marketplace. You can find it by searching for `js-draw`. - Install the plugin from the marketplace. You can find it by searching for `js-draw`.
- To edit an SVG image that is already embedded in your document:
1. Right-click on the image, select "Plugin" > "Edit with js-draw" in the menu
2. The editor tab will open, edit your file as you like, then click the Save button and close the tab.
3. The image is updated, but SiYuan will still show the cached (old) image. This will be fixed in future releases,
please be patient. Until them, you can refresh the editor or change the image path.
- To add a new drawing to your document: - To add a new drawing to your document:
1. Type `/Insert Drawing` in your document, and select the correct menu entry 1. Type `/Insert Drawing` in your document, and select the correct menu entry
2. The whiteboard editor will open in a new tab. Draw as you like, then click the Save button and close the tab. 2. The whiteboard editor will open in a new tab. Draw as you like, then click the Save button and close the tab.
3. Click the Gear icon > Refresh to refresh the drawing block. - To edit the image later:
4. Click the drawing block to open the editor again. 1. Right-click on the image (or click the three dots on mobile), select "Plugin" > "Edit with js-draw" in the menu
2. The editor tab will open, edit your file as you like, then click the Save button and close the tab.
## Planned features ## Planned features
Check out the [Projects](https://git.massive.box/massivebox/siyuan-jsdraw-plugin/projects) tab! Check out the [Projects](https://git.massive.box/massivebox/siyuan-jsdraw-plugin/projects) tab!

12
package.json
View file

@ -1,11 +1,11 @@
{ {
"name": "plugin-sample-vite-svelte", "name": "siyuan-jsdraw-plugin",
"version": "0.3.6", "version": "0.2.0",
"type": "module", "type": "module",
"description": "This is a sample plugin based on vite and svelte for Siyuan (https://b3log.org/siyuan)", "description": "Include a whiteboard for freehand drawing anywhere in your documents.",
"repository": "", "repository": "https://git.massive.box/massivebox/siyuan-jsdraw-plugin",
"homepage": "", "homepage": "https://git.massive.box/massivebox/siyuan-jsdraw-plugin",
"author": "frostime", "author": "massivebox",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "cross-env NODE_ENV=development VITE_SOURCEMAP=inline vite build --watch", "dev": "cross-env NODE_ENV=development VITE_SOURCEMAP=inline vite build --watch",

2
plugin.json
View file

@ -2,7 +2,7 @@
"name": "siyuan-jsdraw-plugin", "name": "siyuan-jsdraw-plugin",
"author": "massivebox", "author": "massivebox",
"url": "https://git.massive.box/massivebox/siyuan-jsdraw-plugin", "url": "https://git.massive.box/massivebox/siyuan-jsdraw-plugin",
"version": "0.1.1", "version": "0.2.0",
"minAppVersion": "3.0.12", "minAppVersion": "3.0.12",
"backends": [ "backends": [
"windows", "windows",

21
public/webapp/error.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>Error</title>
<style>
body {
background-color: white;
color: black;
}
</style>
</head>
<body>
<p>It looks like an error occurred. You shouldn't be able to see this page.</p>
<p>No data has been deleted. Please excuse us for the inconvenience.</p>
<p>
Try reloading SiYuan, and if the error persists, open an issue at
<code>https://git.massive.box/massivebox/siyuan-jsdraw-plugin/issues</code>
or contact the developer directly via e-mail at <code>box@massive.box</code>
</p>
</body>
</html>

2
public/webapp/index.html
View file

@ -13,7 +13,7 @@
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const editLink = document.createElement('a'); const editLink = document.createElement('a');
editLink.href = getEditLink(path); editLink.href = "./error.html";
document.body.appendChild(editLink); document.body.appendChild(editLink);
const htmlContainer = document.createElement('div'); const htmlContainer = document.createElement('div');

2
src/file.ts
View file

@ -11,10 +11,8 @@ function toFile(title: string, content: string, mimeType: string){
export async function uploadAsset(fileID: string, mimeType: string, content: string) { export async function uploadAsset(fileID: string, mimeType: string, content: string) {
const file = toFile(fileID + ".svg", content, mimeType); const file = toFile(fileID + ".svg", content, mimeType);
console.log(1, file)
let r = await upload('/' + ASSETS_PATH, [file]); let r = await upload('/' + ASSETS_PATH, [file]);
console.log(2, r)
if(r.errFiles) { if(r.errFiles) {
throw new Error("Failed to upload file"); throw new Error("Failed to upload file");
} }

17
src/migration.ts
View file

@ -3,11 +3,11 @@ import {getFile, uploadAsset} from "@/file";
import {ASSETS_PATH, DATA_PATH, SVG_MIME} from "@/const"; import {ASSETS_PATH, DATA_PATH, SVG_MIME} from "@/const";
import {replaceBlockContent} from "@/protyle"; import {replaceBlockContent} from "@/protyle";
import {generateRandomString, getMarkdownBlock} from "@/helper"; import {generateRandomString, getMarkdownBlock} from "@/helper";
import {Dialog} from "siyuan";
export async function migrate() { export async function migrate() {
let blocks = await findEmbedBlocks(); let blocks = await findEmbedBlocks();
console.log(blocks);
const found = blocks.length > 0; const found = blocks.length > 0;
for(const block of blocks) { for(const block of blocks) {
@ -15,14 +15,25 @@ export async function migrate() {
if(oldFileID) { if(oldFileID) {
const newFileID = generateRandomString() + "-" + oldFileID; const newFileID = generateRandomString() + "-" + oldFileID;
const file = await getFile(DATA_PATH + ASSETS_PATH + oldFileID + ".svg"); const file = await getFile(DATA_PATH + ASSETS_PATH + oldFileID + ".svg");
console.log("file", file)
const r = await uploadAsset(newFileID, SVG_MIME, file); const r = await uploadAsset(newFileID, SVG_MIME, file);
console.log("r", r);
const newMarkdown = getMarkdownBlock(r.fileID, r.syncID); const newMarkdown = getMarkdownBlock(r.fileID, r.syncID);
await replaceBlockContent(block.id, block.markdown, newMarkdown); await replaceBlockContent(block.id, block.markdown, newMarkdown);
} }
} }
if(found) {
new Dialog({
width: "90vw",
height: "90vh",
content: `
<iframe
style="width: 100%; height: 100%; background-color: white"
src="https://notes.massive.box/YRpTbbxLiD"
/>
`
})
}
} }
function extractID(html: string): string | null { function extractID(html: string): string | null {