Wavedrom editor in BookStack #5423

Closed
opened 2026-02-05 10:03:29 +03:00 by OVERLORD · 2 comments
Owner

Originally created by @s0bakkaa on GitHub (Sep 5, 2025).

Attempted Debugging

  • I have read the debugging page

Searched GitHub Issues

  • I have searched GitHub for the issue.

Describe the Scenario

Hello!
Maybe you have some ideas how I can add the Wavedrom editor to the BookStack?

Exact BookStack Version

v22.10.2

Log Content


Hosting Environment

PHP 8.2.3 on Ubuntu 18.04

Originally created by @s0bakkaa on GitHub (Sep 5, 2025). ### Attempted Debugging - [x] I have read the debugging page ### Searched GitHub Issues - [x] I have searched GitHub for the issue. ### Describe the Scenario Hello! Maybe you have some ideas how I can add the Wavedrom editor to the BookStack? ### Exact BookStack Version v22.10.2 ### Log Content ```text ``` ### Hosting Environment PHP 8.2.3 on Ubuntu 18.04
OVERLORD added the 🐕 Support label 2026-02-05 10:03:29 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Sep 5, 2025):

Hi @s0bakkaa,

I played around with adding a viewer for wavedrom code blocks, but the wavedrom code libraries are buggy, and relies on sketchy use of JavaScript eval which will be blocked in many contexts. Therefore I stopped trying.
Any kind of editor would be more complex, and this is all outside the scope of the core BookStack project.

Non-working code for reference

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.5.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.5.0/wavedrom.min.js" type="text/javascript"></script>

<script type="module">
    function convertWavedromCodeBlocks() {
        const wavedromCodeBlocks = document.querySelectorAll('.page-content pre > code.language-wavedrom');
        for (const codeBlock of wavedromCodeBlocks) {
            const code = codeBlock.textContent;

            const wavedromScript = document.createElement('script');
            wavedromScript.type = 'WaveDrom';
            wavedromScript.innerHTML = code;

            codeBlock.parentElement.before(wavedromScript);
            codeBlock.parentElement.remove();
        }
    }

    if (window.WaveDrom) {
        convertWavedromCodeBlocks();
        window.WaveDrom.ProcessAll();
    }
</script>

@ssddanbrown commented on GitHub (Sep 5, 2025): Hi @s0bakkaa, I played around with adding a viewer for wavedrom code blocks, but the wavedrom code libraries are buggy, and relies on sketchy use of JavaScript `eval` which will be blocked in many contexts. Therefore I stopped trying. Any kind of editor would be more complex, and this is all outside the scope of the core BookStack project. <details><summary>Non-working code for reference</summary> <p> ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.5.0/skins/default.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.5.0/wavedrom.min.js" type="text/javascript"></script> <script type="module"> function convertWavedromCodeBlocks() { const wavedromCodeBlocks = document.querySelectorAll('.page-content pre > code.language-wavedrom'); for (const codeBlock of wavedromCodeBlocks) { const code = codeBlock.textContent; const wavedromScript = document.createElement('script'); wavedromScript.type = 'WaveDrom'; wavedromScript.innerHTML = code; codeBlock.parentElement.before(wavedromScript); codeBlock.parentElement.remove(); } } if (window.WaveDrom) { convertWavedromCodeBlocks(); window.WaveDrom.ProcessAll(); } </script> ``` </p> </details>
Author
Owner

@ssddanbrown commented on GitHub (Dec 21, 2025):

Since there's been no further follow-up I'm going to close this off.

@ssddanbrown commented on GitHub (Dec 21, 2025): Since there's been no further follow-up I'm going to close this off.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#5423