😵‍💫 Make the pluto-editor component embeddable inside a pluto editor

[fonsp]

Embedding Pluto inside Pluto was already possible (also without iframe since #1976). But this PR fixes some CSS issues where the two editors influence layout/styling of each other. E.g. the disable_ui feature is no longer global, but specific to each pluto-editor component.

Schermopname.2025-04-04.om.10.53.18.mov

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/fonsp/Pluto.jl", rev="embeddable-in-itself")
julia> using Pluto

TODO

• Disable scroll on load?
• Auto scroll on output height change – check for first parent that is scrolled, and scroll it more

[Copilot]

Copilot reviewed 3 out of 8 changed files in this pull request and generated no comments.

Files not reviewed (5)

• frontend/editor.css: Language not supported
• frontend/editor.html: Language not supported
• frontend/hide-ui.css: Language not supported
• frontend/index.css: Language not supported
• frontend/treeview.css: Language not supported

Comments suppressed due to low confidence (1)

test/frontend/tests/safe_preview.js:49

• The querySelector for 'pluto-editor' might return null if the element is not present, which will cause a runtime error when accessing its classList. Consider adding an assertion to ensure that the element exists before checking its class list.

expect(await page.evaluate(() => [...document.body.querySelector("pluto-editor").classList])).toContain("process_waiting_for_permission")