Feature Request: asciicast

[TBK]

Describe the feature you'd like Support for asciicast.

Describe the benefits this feature would bring to BookStack users A way of visualising commandline command execution.

Additional context Check the projects website - https://asciinema.org/

Resources: https://github.com/asciinema/asciinema https://github.com/asciinema/asciinema-player https://github.com/asciinema/asciinema-server

[ssddanbrown]

Thanks for this request. What kind of support were you looking for?

Just had a quick review of embed options. You can currently use the link or image link embed options that asciinema provide. Embedding an actual player is more tricky since it's not an iframe but script. Could maybe update WYSIWYG editor filters to allow asciinema scripts but it won't show in the editor, Adds a chance the script could be unintentially removed on content edit.

Bit of a small-traffic use-case to build in custom editor UI controls like we do for code blocks or drawings.

[TBK]

The ideal workflow for my usecase woulde be:

1. Record.
2. Upload "manually" to BookStack (json file).
3. Edit/Create page and via WYSIWYG add the asciicast.

Could maybe update WYSIWYG editor filters to allow asciinema scripts but it won't show in the editor, Adds a chance the script could be unintentially removed on content edit.

Would a possible solution be to display a "dummy image" with a text telling the user that it contains content that the editor can not display?

[mtorromeo]

I used a hack to embed asciicasts. I'll leave it here for anyone looking into this.

1. In the editor, insert a sharable link to the cast (Eg: https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3)
2. Go into customization settings and add the following script into the "Custom HTML Head Content" field:

<script type="module">
for (const link of document.querySelectorAll('.page-content a[href^="https://asciinema.org/a/"]')) {
  const script = document.createElement('SCRIPT');
  script.src = `${link.href}.js`;
  const urlParts = link.href.split('/');
  script.id = `asciicast-${urlParts[urlParts.length - 1]}`;
  script.async = true;
  link.parentElement.insertBefore(script, link);
  link.remove();
}
</script>

3. add https://asciinema.org to the ALLOWED_IFRAME_SOURCES variable in .env or add ALLOWED_IFRAME_SOURCES="https://*.draw.io https://*.youtube.com https://*.youtube-nocookie.com https://*.vimeo.com https://asciinema.org" if it's missing

The links will be replaced by an embedded iframe on page load.

It should work fine with custom asciinema server by just replacing the domain everywhere.