zapthedingbat / drawio-obsidian

Draw.io plugin for obsidian.md
MIT License
416 stars 53 forks source link

New Release? Everything broken in new Obsidian. #89

Open ckdarby opened 7 months ago

ckdarby commented 7 months ago

Hi @zapthedingbat,

The project appears to still get commits every once in a while, but I notice there hasn't been a release in over 2 years.

Within Obsidian v1.5.3 it appears this community plugin is now entirely broken in both sketch and full mode.

Are you open to releasing a new version? Or do you need help from me to try to automate the releasing process to be able to have these go out for the community?

hunterzhang86 commented 7 months ago

I also encountered this issue

AdvMaple commented 6 months ago

Also facing this issue

calmwaves111 commented 6 months ago

me too,I hope someone can solve it

qiudebenge commented 6 months ago

I think the question is really urgent

NekkroTech commented 6 months ago

I also encountered this issue.

poplar-hub commented 6 months ago

have to use the Official client,but it is inconvenient https://www.drawio.com/

AdvMaple commented 6 months ago

I have look through this for a bit and these are my finding:

The error seem to be cause by Obsidian 1.5

Minimal 1.4 setup console.log, using the latest drawio version. image

After update to 1.5 image

The blob:null is not an issue image

VM207:15 Refused to load the stylesheet 'blob:null/67c6b0e5-a81c-4dde-bf52-04c91145380f' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline' 'self' https://fonts.googleapis.com". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

(anonymous) @ VM207:15
(anonymous) @ VM207:15
onWindowMessage @ data:text/html,%0A%3Cscript%3E%0Aconst%20onWindowMessage%20%3D%20(messageEvent)%20%3D%3E%20%7B%0A%20%20const%20message%20%3D%20JSON.parse(messageEvent.data)%3B%0A%20%20if(message.action%3D%3D%3D%22script%22)%7B%0A%20%20%20%20const%20scriptElement%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20scriptElement.text%20%3D%20message.script%3B%0A%20%20%20%20document.head.appendChild(scriptElement)%3B%0A%20%20%7D%0A%20%20window.removeEventListener(%22message%22%2C%20onWindowMessage)%3B%0A%7D%0Awindow.addEventListener(%22message%22%2ConWindowMessage)%3B%0Awindow.parent.postMessage(%22%7B%5C%22event%5C%22%3A%5C%22iframe%5C%22%7D%22%2C'*')%3B%0A%3C%2Fscript%3E:8
postMessage (async)
sendMessage @ plugin:drawio-obsidian:15
addScriptToFrame @ plugin:drawio-obsidian:15
handleMessage @ plugin:drawio-obsidian:15
listener @ plugin:drawio-obsidian:15
postMessage (async)
(anonymous) @ data:text/html,%0A%3Cscript%3E%0Aconst%20onWindowMessage%20%3D%20(messageEvent)%20%3D%3E%20%7B%0A%20%20const%20message%20%3D%20JSON.parse(messageEvent.data)%3B%0A%20%20if(message.action%3D%3D%3D%22script%22)%7B%0A%20%20%20%20const%20scriptElement%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20scriptElement.text%20%3D%20message.script%3B%0A%20%20%20%20document.head.appendChild(scriptElement)%3B%0A%20%20%7D%0A%20%20window.removeEventListener(%22message%22%2C%20onWindowMessage)%3B%0A%7D%0Awindow.addEventListener(%22message%22%2ConWindowMessage)%3B%0Awindow.parent.postMessage(%22%7B%5C%22event%5C%22%3A%5C%22iframe%5C%22%7D%22%2C'*')%3B%0A%3C%2Fscript%3E:13
VM208:242 Refused to load the stylesheet 'blob:null/985d0a81-0bcb-4d02-ad96-5a6ab1ceba4d' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline' 'self' https://fonts.googleapis.com". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

link @ VM208:242
(anonymous) @ VM208:245
o.addScript @ VM207:15
o.handleMessages @ VM207:15
listener @ VM207:1
postMessage (async)
sendMessage @ plugin:drawio-obsidian:15
addScriptToFrame @ plugin:drawio-obsidian:15
handleMessage @ plugin:drawio-obsidian:15
listener @ plugin:drawio-obsidian:15
postMessage (async)
(anonymous) @ data:text/html,%0A%3Cscript%3E%0Aconst%20onWindowMessage%20%3D%20(messageEvent)%20%3D%3E%20%7B%0A%20%20const%20message%20%3D%20JSON.parse(messageEvent.data)%3B%0A%20%20if(message.action%3D%3D%3D%22script%22)%7B%0A%20%20%20%20const%20scriptElement%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20scriptElement.text%20%3D%20message.script%3B%0A%20%20%20%20document.head.appendChild(scriptElement)%3B%0A%20%20%7D%0A%20%20window.removeEventListener(%22message%22%2C%20onWindowMessage)%3B%0A%7D%0Awindow.addEventListener(%22message%22%2ConWindowMessage)%3B%0Awindow.parent.postMessage(%22%7B%5C%22event%5C%22%3A%5C%22iframe%5C%22%7D%22%2C'*')%3B%0A%3C%2Fscript%3E:13
VM208:242 Refused to load the stylesheet 'blob:null/7d28a99c-7b9f-44e9-9ffd-47f9afff6637' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline' 'self' https://fonts.googleapis.com". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

link @ VM208:242
EditorUi.initTheme @ VM208:10507
(anonymous) @ VM208:10511
(anonymous) @ VM208:10794
o.addScript @ VM207:15
o.handleMessages @ VM207:15
listener @ VM207:1
postMessage (async)
sendMessage @ plugin:drawio-obsidian:15
addScriptToFrame @ plugin:drawio-obsidian:15
handleMessage @ plugin:drawio-obsidian:15
listener @ plugin:drawio-obsidian:15
postMessage (async)
(anonymous) @ data:text/html,%0A%3Cscript%3E%0Aconst%20onWindowMessage%20%3D%20(messageEvent)%20%3D%3E%20%7B%0A%20%20const%20message%20%3D%20JSON.parse(messageEvent.data)%3B%0A%20%20if(message.action%3D%3D%3D%22script%22)%7B%0A%20%20%20%20const%20scriptElement%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20scriptElement.text%20%3D%20message.script%3B%0A%20%20%20%20document.head.appendChild(scriptElement)%3B%0A%20%20%7D%0A%20%20window.removeEventListener(%22message%22%2C%20onWindowMessage)%3B%0A%7D%0Awindow.addEventListener(%22message%22%2ConWindowMessage)%3B%0Awindow.parent.postMessage(%22%7B%5C%22event%5C%22%3A%5C%22iframe%5C%22%7D%22%2C'*')%3B%0A%3C%2Fscript%3E:13
VM207:15 XHR GET blob:null/a9024585-1f4b-423b-8c86-c0b68797ce25
(anonymous) @ VM207:15
mxXmlRequest.send @ VM208:372
get @ VM208:287
(anonymous) @ VM208:287
getAll @ VM208:287
c @ VM208:11237
b @ VM208:11245
App.main @ VM208:11254
(anonymous) @ VM209:15
(anonymous) @ VM209:15
o.addScript @ VM207:15
o.handleMessages @ VM207:15
listener @ VM207:1
postMessage (async)
sendMessage @ plugin:drawio-obsidian:15
addScriptToFrame @ plugin:drawio-obsidian:15
handleMessage @ plugin:drawio-obsidian:15
listener @ plugin:drawio-obsidian:15
postMessage (async)
(anonymous) @ data:text/html,%0A%3Cscript%3E%0Aconst%20onWindowMessage%20%3D%20(messageEvent)%20%3D%3E%20%7B%0A%20%20const%20message%20%3D%20JSON.parse(messageEvent.data)%3B%0A%20%20if(message.action%3D%3D%3D%22script%22)%7B%0A%20%20%20%20const%20scriptElement%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20scriptElement.text%20%3D%20message.script%3B%0A%20%20%20%20document.head.appendChild(scriptElement)%3B%0A%20%20%7D%0A%20%20window.removeEventListener(%22message%22%2C%20onWindowMessage)%3B%0A%7D%0Awindow.addEventListener(%22message%22%2ConWindowMessage)%3B%0Awindow.parent.postMessage(%22%7B%5C%22event%5C%22%3A%5C%22iframe%5C%22%7D%22%2C'*')%3B%0A%3C%2Fscript%3E:13
VM208:10263     GET https://app.diagrams.net/math/MathJax.js?config=TeX-MML-AM_SVG-full net::ERR_ABORTED 404
Editor.initMath @ VM208:10263
App.main @ VM208:11253
(anonymous) @ VM209:15
(anonymous) @ VM209:15
o.addScript @ VM207:15
o.handleMessages @ VM207:15
listener @ VM207:1
postMessage (async)
sendMessage @ plugin:drawio-obsidian:15
addScriptToFrame @ plugin:drawio-obsidian:15
handleMessage @ plugin:drawio-obsidian:15
listener @ plugin:drawio-obsidian:15
postMessage (async)
(anonymous) @ data:text/html,%0A%3Cscript%3E%0Aconst%20onWindowMessage%20%3D%20(messageEvent)%20%3D%3E%20%7B%0A%20%20const%20message%20%3D%20JSON.parse(messageEvent.data)%3B%0A%20%20if(message.action%3D%3D%3D%22script%22)%7B%0A%20%20%20%20const%20scriptElement%20%3D%20document.createElement(%22script%22)%3B%0A%20%20%20%20scriptElement.text%20%3D%20message.script%3B%0A%20%20%20%20document.head.appendChild(scriptElement)%3B%0A%20%20%7D%0A%20%20window.removeEventListener(%22message%22%2C%20onWindowMessage)%3B%0A%7D%0Awindow.addEventListener(%22message%22%2ConWindowMessage)%3B%0Awindow.parent.postMessage(%22%7B%5C%22event%5C%22%3A%5C%22iframe%5C%22%7D%22%2C'*')%3B%0A%3C%2Fscript%3E:13
data:text/html,%0A%…:1 Refused to execute script from 'https://app.diagrams.net/math/MathJax.js?config=TeX-MML-AM_SVG-full' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Delete update file make it work normally image

My current solution:

Downgrade back to Obsidian 1.4 image

AdvMaple commented 6 months ago

Quick Solution Found

Created a bug report on Obsidian Forum: forum

Delete this file in obsidian-1.5.3.asar works!!

image

If you guy need the file editted and packed. Just replace the file obsidian-1.5.3.zip

Prove

image

Step to do it your self:

Command used:

  1. Install asar: npm install -g asar
  2. unpack the update
  3. edit the bug causing line in index.html
  4. pack the file
  5. run Obsidian again, and it works now.

image

BeJa1996 commented 6 months ago

Thank you for the quick-fix. When I try the commands in the Terminal (Mac), I get only: ".: is a directory" I also tried replacing the .asar file, but the finder does not find it.

Could you maybe explain it for someone who has no idea about those things?

SteinGaming commented 6 months ago

Thank you for the quick-fix. When I try the commands in the Terminal (Mac), I get only: ".: is a directory" I also tried replacing the .asar file, but the finder does not find it.

Could you maybe explain it for someone who has no idea about those things?

Please include a full log of the commands you've run and their output next time. I'm guessing code . is giving you the error. At that part you should just open the build_unpack folder, open the index.html and delete the line that has been already given in the previous line.


From Obsidian 1.5, a new Content Security Policy is enforced for external themes, images, audios and anything being media/style related. WhiteNoise, a Obsidian Developer, stated that this won't change to preserve the security of the user. Instead of loading those remotely, we should embed them in the code using base64.

I will try to look for the stylesheets that are loaded remotely myself, but as I am pretty inexperienced with the code-base of this project, some support would speed this up a notch.

SteinGaming commented 6 months ago

Update, found the solution to the majority of the problem. It lies within the loadStylesheet(href: string) function in src/drawio-client/init/RequestManager.ts:

export function loadStylesheet(href: string) {
  const link = document.createElement("link");
  link.setAttribute("rel", "stylesheet");
  link.setAttribute("href", href);
  document.head.appendChild(link);
}

This function gets called by src/drawio-client/init/index.ts with the string "local://drawio.css".


Even though the url uses the prefix local://, it's still considered a external stylesheet.

Found simple fix

import drawioCss from "inline!./src/drawio-client/drawio.css";
export function loadStylesheet() {
  const style = document.createElement("style");
  style.innerHTML = drawioCss
  document.head.appendChild(style);
}

Problem

This fix repairs the Layout, but does not respect any themes selected e. g. it's always in light mode.

jn-novasol commented 6 months ago

An official fix for this issue would make this person very very happy!

molaw commented 6 months ago

Also looking for an official fix in lieu of downgrading. Is an official fix being actively worked on?

plc-dev commented 6 months ago

Not the ideal solution, but I've built the project with the fix proposed by @SteinGaming. The transpiled "main.js"-file needs to be swapped out in the local plugin folder, e.g. "[vault_name]/.obsidian/plugins/drawio-obsidian" to include the changes in your local installation. The changes apply after restarting obsidian.

For anyone who does not want to build the project themselves, a transpiled "main.js"-file can be downloaded from https://drive.google.com/file/d/13Ow5pKLMWzNOUMG3zNZA1szMBE9lKvT-/view?usp=drive_link

CobyPear commented 5 months ago

Not the ideal solution, but I've built the project with the fix proposed by @SteinGaming. The transpiled "main.js"-file needs to be swapped out in the local plugin folder, e.g. "[vault_name]/.obsidian/plugins/drawio-obsidian" to include the changes in your local installation. The changes apply after restarting obsidian.

For anyone who does not want to build the project themselves, a transpiled "main.js"-file can be downloaded from https://drive.google.com/file/d/13Ow5pKLMWzNOUMG3zNZA1szMBE9lKvT-/view?usp=drive_link

@plc-dev I appreciate you making this fix however please upload it into a gist or a branch/fork instead of google drive!

I have opened a PR with what is essentially the fix offered in this thread (thanks ya'll!) It's open at #90. The dark/light mode switching doesn't seem to be working and dark mode is partial (but better than nothing). If you don't want it, remove the line adding the dark mode css from that init file. Open to feedback/help getting things working correctly since this project seems unmaintained atm!

xh542428798 commented 5 months ago

Quick Solution Found

Created a bug report on Obsidian Forum: forum

Delete this file in obsidian-1.5.3.asar works!!

image

If you guy need the file editted and packed. Just replace the file obsidian-1.5.3.zip

Prove

image

Step to do it your self:

Command used:

  1. Install asar: npm install -g asar
  2. unpack the update
  3. edit the bug causing line in index.html
  4. pack the file
  5. run Obsidian again, and it works now.

image

Thank you a lot!!

rainleon commented 5 months ago

Not the ideal solution, but I've built the project with the fix proposed by @SteinGaming. The transpiled "main.js"-file needs to be swapped out in the local plugin folder, e.g. "[vault_name]/.obsidian/plugins/drawio-obsidian" to include the changes in your local installation. The changes apply after restarting obsidian. For anyone who does not want to build the project themselves, a transpiled "main.js"-file can be downloaded from https://drive.google.com/file/d/13Ow5pKLMWzNOUMG3zNZA1szMBE9lKvT-/view?usp=drive_link

@plc-dev I appreciate you making this fix however please upload it into a gist or a branch/fork instead of google drive!

I have opened a PR with what is essentially the fix offered in this thread (thanks ya'll!) It's open at #90. The dark/light mode switching doesn't seem to be working and dark mode is partial (but better than nothing). If you don't want it, remove the line adding the dark mode css from that init file. Open to feedback/help getting things working correctly since this project seems unmaintained atm!

Extremely grateful !!!

axb21 commented 5 months ago

This problem is affecting me too. For obvious reasons, I am reluctant to download and sideload unofficial code. Would very much like an official release that can updated within Obsidian. Thanks!

zMynxx commented 5 months ago

Not the ideal solution, but I've built the project with the fix proposed by @SteinGaming. The transpiled "main.js"-file needs to be swapped out in the local plugin folder, e.g. "[vault_name]/.obsidian/plugins/drawio-obsidian" to include the changes in your local installation. The changes apply after restarting obsidian. For anyone who does not want to build the project themselves, a transpiled "main.js"-file can be downloaded from https://drive.google.com/file/d/13Ow5pKLMWzNOUMG3zNZA1szMBE9lKvT-/view?usp=drive_link

@plc-dev I appreciate you making this fix however please upload it into a gist or a branch/fork instead of google drive!

I have opened a PR with what is essentially the fix offered in this thread (thanks ya'll!) It's open at #90. The dark/light mode switching doesn't seem to be working and dark mode is partial (but better than nothing). If you don't want it, remove the line adding the dark mode css from that init file. Open to feedback/help getting things working correctly since this project seems unmaintained atm!

Much appreciated. However, AWS logo's on general are still shitty - has anyone encountered this issue?

Hunanbean-Collective commented 4 months ago

@zMynxx Curious as to why this file is so much bigger than the original Original, 6,480KB Your File, 8,091KB

austin-millan commented 3 months ago

There hasn't been a release of this plugin on Obsidian 2y now, but can confirm the PR introduced by @plc-dev works on my end. Is there a reason the plugin* author hasn't updated the plugin via Obsidian yet is still maintaining the repo?

JorgenSQ commented 3 months ago

Should maybe a fork be made, and plugin maintained on a new repo?

bllendev commented 1 month ago

There hasn't been a release of this plugin on Obsidian 2y now, but can confirm the PR introduced by @plc-dev works on my end. Is there a reason the plugin* author hasn't updated the plugin via Obsidian yet is still maintaining the repo?

this fix is sooo close to working, however, there is still a bug when you try to embed a fresh drawio diagram in excalidraw, such that if you try to save the edited text in some diagram, it breaks your ability to input any text in all of obsidian

snip

image