Support LiveCodes

[hatemhosny]

This is a very nice project. Thank you. And Codeium is, of course, very useful indeed.

I'm the author of LiveCodes, a feature-rich, open-source, client-side code playground that supports 80+ languages/frameworks. Please read the announcement.

LiveCodes also allows embedding playgrounds in webpages using a powerful SDK.

I'm interested in adding support for LiveCodes to your project.

LiveCodes allows the user to select from 3 code editors:

• Monaco editor (currently v0.40.0): This is the default editor on desktop.
• CodeMirror 6: The default editor on mobile.
• CodeJar (currently v4.1.1): The editor used in lite mode

The user may select the editor from editor settings or configuration options (if using the SDK).

I understand, that currently of these editors, you only support Monaco editor, which is fine with me. In my use-case, this will be the most commonly used editor.

The implementation of the code editors can be found here.

I would be interested to help providing the integration.

[pqn]

If you're using Monaco already, does the extension work if you just add your domain to the allowlist setting?

[hatemhosny]

No, it doesn't

[pqn]

As mentioned in #9, the main Monaco compatibility issues are usually:

The issue here is generally that the Monaco version being used is too old, or webpack is pruning the required inline completion features since they aren't being used by the website themselves.

Do those apply to you?

[hatemhosny]

I'm using a relatively new Monaco editor version (v0.40.0) and I'm not using webpack.

However, the page which hosts the editors is in an iframe whose content is dynamically written using iframe.contentWindow.document.write

https://github.com/live-codes/livecodes/blob/cdd3959f0c59b24956f6936141c9f460c1f0c31b/src/livecodes/main.ts#L75

So may be that's why the domian list does not work. Can I work around that?

[pqn]

You could try adding a

<meta name="codeium:type" content="monaco">

and add detection support for this where we check the allowlist: https://github.com/Exafunction/codeium-chrome/blob/acf76b259633b60a36d801c9603f922bf00c9802/src/script.ts#L230

[hatemhosny]

Do you mean open a PR with something like this?

if (host.test(window.location.href) || document.querySelector('meta[name="codeium:type"]')) {
...

[pqn]

Yes, if you can verify that a solution like that works for your setup, then we could accept such a change.

[hatemhosny]

Thank you. I will try that and let you know.

[hatemhosny]

Yes, the meta tag approach worked without having to add the domain to the allowlist. Thank you.

However, I did need to change the way I loaded the page probably due to CSP. See details here: https://github.com/live-codes/livecodes/pull/409

My app is open-source, and it allows self-hosting. So, the meta tag approach suits me a lot more.

I will open a PR with this change. I just have one question. If we need to add this meta tag:

<meta name="codeium:type" content="monaco">

What happens if we need to support more than one editor (e.g. Monaco and CodeMirror)? do we need to add another meta tag? or should we just keep the tag more generic?

[pqn]

I'm picturing the content value is a comma-separated list of opt-in injections we're requesting basically.

[hatemhosny]

Thank you. This has been solved with #29

Please let us know when the new release is published so that LiveCodes users can use it.

Thank you, indeed.

[pqn]

This should be published now.