search

quarto-ext / shinylive

Quarto extension to embed Shinylive for Python applications
https://quarto-ext.github.io/shinylive/
MIT License
141 stars 8 forks source link

List of components and creating custom components #56

Closed fredguth closed 1 month ago

fredguth commented 1 month ago

I couldn't find the code that given

#| components: [editor, viewer]

renders the editor. I wish to tweak it to create a SQL code editor. How could I do that?

gadenbuie commented 1 month ago

We need to add the SQL language features to the Code Mirror editor used by shinylive. I've opened a PR to do that; once that's released, you'll be able to just create SQL files in the editor or include them in your shinylive bundle and those files will have syntax highlighting and other language features supported by Code Mirror.

fredguth commented 1 month ago

Would it be possible to also create a textarea that is a code input? So that I can use it in any module?

gadenbuie commented 1 month ago

Would it be possible to also create a textarea that is a code input? So that I can use it in any module?

That's a great idea and something we'll certainly consider building in the future!

In Shiny for R, the shinyAce package provides a Shiny code editor component. I'd personally love to have a CodeMirror or Monaco component for Shiny for Python.

If anyone in the community wants to work on this, the Custom JavaScript component article series is a good place to start learning about the Shiny side of this kind of extension.

fredguth commented 1 month ago

I managed to make a js component that works with SQL highlight using CodeMirror. But the wrapped Shiny component does not load the js.

I am not sure I understood how to add dependencies:

https://github.com/fredguth/shiny-cm6/blob/f0aa9749b0bb8c15a90304366a555a0a0887c5a6/app.py#L7