Thank you!

[tinchox5]

This library you made is so great! I'm implementing it on my Astro doc site (not public yet).

[jonpyt]

Awesome! I wouldn't mind having a look when it's done.

Have you seen the new docs site on the v4 branch? It's a WIP that's not online yet, but it's also created with Astro and uses a rehype plugin to create editors from fenced code blocks in markdown. Quite convenient I must say. The rehype plugin is only in beta and I'm hoping to finish v4 soon.

[tinchox5]

Oh, I didn't see that. However my component is almost complete :( jaja. I ll publish and then take a deep look at it. Thank you

…

On Wed, 22 Jan 2025 at 16:05 FIameCaster ***@***.***> wrote: Awesome! I wouldn't mind having a look when it's done. Have you seen the new docs site on the v4 branch <https://github.com/FIameCaster/prism-code-editor/tree/v4>? It's a WIP that's not online yet, but it's also created with Astro and uses a rehype plugin to create editors from fenced code blocks in markdown. Quite convenient I must say. The rehype plugin is only in beta and I'm hoping to finish v4 soon. — Reply to this email directly, view it on GitHub <#42 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYFYDNTIPY73HHGZIZCBHL2L6JTLAVCNFSM6AAAAABVUGV6WSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCOJRGY2DGNQ> . You are receiving this because you authored the thread.Message ID: <FIameCaster/prism-code-editor/repo-discussions/42/comments/11916436@ github.com>

[jonpyt]

I also made an Astro example on StackBlitz a few months ago that uses an <Editor> Astro component. This might also be useful for you. Note that the example requires the v4 beta of prism-code-editor.

I would be curious to know what you did as well.

[tinchox5]

Wow it is very clean and easy! Mine is a mess using current version. I will show ASAP. For sure I will use your official implementation in a future

[tinchox5]

Ok, now is working (but not published because I need to adapt examples to new version of Orbit, my proyect). So I share with you and the community the working code. It uses current prism-code-editor version, and I just modified BasicEditor to allow visualize copyButton by adding css style in general style.js as a new variable to be able in the shadowDOM. I tried as well to use createEditor, but I had some visualization problems (maybe css conflicts). It also renders an instant preview in an iframe with the provided or edited code.

---
interface Props {
  name?: string
  htmlCode?: string
  cssCode?: string
  jsCode?: string
  theme?: string
  height?: string
}

import { Tabs, TabItem } from '@astrojs/starlight/components';
import orbitCode from '../assets/orbit.min.css?raw'
import orbitJS from '../assets/orbit.min.js?raw'

const { htmlCode = 'No HTML provided', cssCode, jsCode, name = 'zumer', theme= '', height='300px'} = Astro.props

let htmlClass = `html-${name}`
let cssClass = `css-${name}`
let jsClass = `js-${name}`
---

<script type="module" is:inline define:vars={{htmlCode, cssCode, jsCode,framework, hideCode, theme, name, orbitCode, orbitJS, htmlClass, cssClass, jsClass}}>
  import { basicEditor } from "../../node_modules/prism-code-editor/dist/setups"
  import { copyButton } from "../../node_modules/prism-code-editor/dist/extensions/copyButton"
  import "../../node_modules/prism-code-editor/dist/prism/languages/markup"
  import "../../node_modules/prism-code-editor/dist/prism/languages/css"
  import "../../node_modules/prism-code-editor/dist/prism/languages/javascript"

  let _HTML = htmlCode
  let _CSS = cssCode
  let _JS = jsCode

  htmlCode && basicEditor(
    `.${htmlClass}`,
    {
      language: "html",
      value: `${_HTML}`,
      theme: "github-dark",
      onUpdate(editedHTML) {
        _HTML = editedHTML
        updateIframe()
      }
    },
    () => console.log("html ready")
  ).addExtensions(
  copyButton()
  )
  
  cssCode &&
  basicEditor(
    `.${cssClass}`,
    {
      language: "css",
    
      value: `${_CSS}`,
      theme: "github-dark",
      onUpdate(editedCSS) {
        _CSS = editedCSS
        updateIframe()
      }
    },
    () => console.log("css ready")
  )

  jsCode &&
  basicEditor(
    `.${jsClass}`,
    {
      language: "javascript",
      wordWrap: true,
      value: `${_JS}`,
      theme: "github-dark",
      onUpdate(editedJS) {
        _JS = editedJS
        updateIframe()
      }
    },
    () => console.log("js ready")
  )
    
  function updateIframe() {
    renderCodeInIframe(_HTML, _CSS, _JS)
  }
  
  function renderCodeInIframe(_HTML, _CSS, _JS) {
    const iframeContent = `
      <html style=" margin: 0 !important; padding: 0 !important">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <style>
          ${orbitCode}
          body {
            font-family: "Noto Sans", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;
            font-variation-settings: "wdth" 100;
            background-color: #fbfafa !important; margin: 0 !important; padding: 0 !important; overflow: hidden
          }
          ${_CSS}
          </style>
        </head>
        <body class="${theme}" style="">
          ${_HTML}
          <scr${'ipt'}>
            ${orbitJS}
          </scr${'ipt'}>
          <scr${'ipt'}>
            ${_JS}
          </scr${'ipt'}>
        </body>
      </html>
      `
    const iframe = document.createElement('iframe')
    iframe.setAttribute('id', name)
    iframe.setAttribute('title', name)
    iframe.setAttribute('srcdoc', iframeContent)
    iframe.style.width = '100%'
    iframe.style.border = 'none'
    iframe.style.margin = '0'
    iframe.style.padding = '0'
    iframe.style.height = '100%' 
    const codeRenderer = document.querySelector(`#${name} .codeRenderer`)
    codeRenderer.innerHTML = ''
    codeRenderer.appendChild(iframe)
  }
    // Initially render the code of the active tabs
    updateIframe()
  </script>
  
  <div id={name} class="container">
    <div class="preview">
        <div class="codeRenderer" style={{height: height}}>
          <!-- The iframe for rendering code will be inserted her e -->
        </div>
    </div>
  </div>
  <Tabs>
    <TabItem label="HTML" icon="seti:html" >
      <div class={htmlClass} style="max-height: 250px; overflow-y: auto;"></div>
    </TabItem>
    {cssCode && 
     <TabItem label="CSS" icon="seti:css" >
      <div class={cssClass} style="max-height: 250px; overflow-y: auto;"></div>
    </TabItem>
    }
    {jsCode && 
      <TabItem label="JS" icon="seti:js" >
       <div class={jsClass} style="max-height: 250px; overflow-y: auto;"></div>
     </TabItem>
     }
  </Tabs>

Usage

<ZumerPlay name="progress" htmlCode={progressHTML}  cssCode={progressCSS}> </ZumerPlay>

Result

[jonpyt]

Interesting. So you're using an inline script to create the editors. That is a bit of a mess yeah. I didn't know about the define:vars directive to pass variables to inline scripts. Since inline scripts aren't processed, shouldn't the imports from node_modules break outside of development?

In v4 this should be must easier. You won't need an inline script, and the editors will be visible even before the JavaScript has loaded so the website should feel much faster. It won't be possible to use shadow roots though, so you'd have to sort out any issues with conflicting styles. Since you're using Starlight, adding the not-content class might fix your issue. Lastly, linking the HTML, CSS, and JS editors to the iframe can't be done the same way, but it should be easy to do.

[tinchox5]

Thanks for the tip! I will check no-content. Regarding the node_modules I needed to point files using its folders paths. In a future I will adapt all of this using your conponent to make things easier

…

On Thu, 23 Jan 2025 at 19:16 FIameCaster ***@***.***> wrote: Interesting. So you're using an inline script to create the editors. That is a bit of a mess yeah. I didn't know about the define:vars directive to pass variables to inline scripts. Since inline scripts aren't processed, shouldn't the imports from node_modules break outside of development? In v4 this should be must easier. You won't need an inline, and the editors will be visible even before the JavaScript has loaded so the website should feel much faster. It won't be possible to use shadow roots though, so you'd have to sort out any issues with conflicting styles. Since you're using Starlight, adding the not-content class <https://starlight.astro.build/components/using-components/#compatibility-with-starlights-styles> might fix your issue. Lastly, linking the HTML, CSS, and JS editors to the iframe can't be done the same way, but it should be easy to do. — Reply to this email directly, view it on GitHub <#42 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYFYDMP6NAL73GAZ5RY7JD2MEIU5AVCNFSM6AAAAABVUGV6WSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCOJTGIYTMNQ> . You are receiving this because you authored the thread.Message ID: <FIameCaster/prism-code-editor/repo-discussions/42/comments/11932166@ github.com>

[tinchox5]

Thanks to you I could use createEditor without any css problems adding the 'not-content' class

[tinchox5]

As promised, I upgraded and published my documentation site yesterday, using Prism Code Editor (3.4) in all code snippets and examples. https://zumerlab.github.io/orbit-docs/examples/scifi/

Note: I had to put your library on the doc public folder because as you said "the imports from node_modules break outside of development" :)

[jonpyt]

Looks good! But there are a few easy improvements you can make.

Firstly, there's no automatic indentation or comment toggling. To enable it add the following imports:

import "/orbit-docs/prism-code-editor/dist/languages/html.js"
import "/orbit-docs/prism-code-editor/dist/languages/css.js"
import "/orbit-docs/prism-code-editor/dist/languages/clike.js"

You should consider adding the editHistory extension (exported from the commands entry point). Some browsers delete the undo/redo history of form elements when they're hidden with display: none. The undo/redo history for the editHistory extension won't be cleared.

Vertical scrolling is handled by a parent element (.zeditor) instead of the editor's container. This means the copy button won't be visible unless you're scrolled to the top and you must scroll to the bottom to press the horisontal scrollbar. You should move the max-height and border-radius to .prism-code-editor instead (but this must be in a <style is:global> element, I think. I could be wrong). You can remove overflow-y: auto since .prism-code-editor already has overflow: auto.

Lastly, I found it odd that only the JS editor has wordWrap. I would consider removing it. If not you could remove the indentGuides extension from the JS editor since that extension is incompatible with wordWrap.

Note: I had to put your library on the doc public folder because as you said "the imports from node_modules break outside of development" :)

Shipping package code that's not bundled or minified is certainly not ideal. You'll also get some request waterfalls from chained imports, which is not great for performance. There's only documentation and some polishing left before v4 is done, so I'm hoping to finish is soon-ish.

[tinchox5]

Thank you for your time and help! I've already implemented your suggestions.