[POC] Use the Ace Editor for Writing Snapshot Descriptions

[rak-phillip]

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]

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]

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]

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]

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]

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.