Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[POC] Use the Ace Editor for Writing Snapshot Descriptions #6487

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

rak-phillip
Copy link
Contributor

This is a proof of concept to demonstrate how Rancher Desktop can utilize the Ace editor to get syntax highlighting for fields that might require it. This example demonstrates writing markdown for a snapshot description.

rancher-dekstop-5913.mp4

@jandubois
Copy link
Member

Thank you Phil!

I've played with it a little and noticed that the editor doesn't really work well compared to the examples I saw on the ACE website. E.g. you can't fold any additional headings.

I looked a little at the packages and found that https://github.com/chairuosen/vue2-ace-editor was last updated 5 years ago, and uses https://github.com/thlorenz/brace, which hasn't updated the ACE component in 7 years, which explains why it is working differently from the current version.

So this means we would be using an ancient version. Unfortunately I could not find any non-abandoned Vue2 bindings for ACE so far; I guess I need to spend some more effort into understanding how it is getting packaged for Vue. Or maybe people have all migrated to Vue3 by now???

@rak-phillip
Copy link
Contributor Author

For the record, from our discussion

So this means we would be using an ancient version. Unfortunately I could not find any non-abandoned Vue2 bindings for ACE so far; I guess I need to spend some more effort into understanding how it is getting packaged for Vue.

Yes, we can explore wrapping Ace in a vue component. Doing this will give us direct control over component design and Ace dependencies.

Or maybe people have all migrated to Vue3 by now???

For the most part.. We have serious efforts underway for Dashboard to migrate to Vue 3. Depending on how those efforts go, we might have some scripts that can aid Rancher Desktop with a Vue 3 migration as well.

@jandubois
Copy link
Member

we can explore wrapping Ace in a vue component. Doing this will give us direct control over component design and Ace dependencies.

That would give us the most control over our destiny, but it is unclear to me how much effort that would be.

Or maybe people have all migrated to Vue3 by now???

For the most part.. We have serious efforts underway for Dashboard to migrate to Vue 3. Depending on how those efforts go, we might have some scripts that can aid Rancher Desktop with a Vue 3 migration as well.

It looks like https://github.com/CarterLi/vue3-ace-editor is being updated with latest ACE release. And while I looked there, I noticed that https://github.com/defghy/vue2.7-ace-editor is a fork of the vue3 component for vue2.7, so may be just what we need.

@jandubois
Copy link
Member

Just wanted to comment that this is all to eventually enable #5913, so this PR is linked back to that issue as well.

@rak-phillip
Copy link
Contributor Author

I noticed that https://github.com/defghy/vue2.7-ace-editor is a fork of the vue3 component for vue2.7, so may be just what we need.

This is a good find, I updated the PR to implement the updated library.

That would give us the most control over our destiny, but it is unclear to me how much effort that would be.

On a semi-related note, I experienced issues that required me to clear my gpu cache while upgrading packages to use ace-builds. Before I realized what the problem really was, I mistakenly interpreted the error as an issue with our electron version and ace dependencies, so I started working on a monaco editor poc..

I decided to move back to ace after I realized what the actual issue was, but I had enough demonstrate a barebones example of working with monaco in PR #6500. Keep in mind that these are fairly minimal implementations, but we can do the same with ace if we'd like; there's additional effort involved, but not a great deal more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants