F0rce/ace

Bug: Theme update from serverside "setTheme" not working

rudiejd opened this issue · 8 comments

Describe the bug
Theme update not working

To Reproduce
Steps to reproduce the behavior:

  1. initialize editor
  2. try to update theme from server side

Expected behavior
Theme should change. In reality, it just remains the old eclipse theme.

Maybe there is some event that needs to be fired to update the editor's theme on the client side? If I figure it out, I will PR. Thanks for updating this editor for v14.

Here's the code I was using to toggle the theme. Debugger is firing and it gets to the set theme, but nothing happens from there. Have tried a bunch of different dark themes. Not sure whether I need to download additional files for themes

    ComponentUtil.addListener(UI.getCurrent(), ThemeChangedEvent.class, (e) -> {
       if (e.getTheme() == Lumo.DARK)  {
           UI ui = getUI().orElse(UI.getCurrent());
           if (ui != null) {
               ui.access(() -> {
                   editor.setTheme(AceTheme.chaos);
               });
           }
           
       }
    });

I should also mention that the value of the theme attribute for my lit-ace element is set correctly, the editor appearance just isn't updated to reflect this. Set value and other commands work fine

Think this might be my problem: it's looking for themes in the folder ace-builds instead of the VAADIN directory that redirects to stuff on the classpath. I might have a kind of weird case in that I have two projects, each of which is running VAADIN, and I'm sharing resources between both of them.
the problem

F0rce commented

Hello @rudiejd,

Could you please Tell me which Version of the ace Editor aswell as which Vaadin Version you are using?

On https://preview.f0rce.de/ace I set the theme on server side initially and that works perfectly.

I hope I can help you out,
David

@F0rce I was on 14.6.5 and the latest version of the editor.

I suspect it works on you demo because you have all of the requisite JavaScript files for the default modes and themes included in an accessible folder. On mine, I do not.

I managed to fix it on the PR I linked. Basically, Vaadin add-ons force you to include everything that you want to be visible to the Vaadin application in an @JsModule annotation. It's a super ugly fix.

F0rce commented

Thanks for your answer and taking the time to write the pr but you actually don't have to do that.

I was thinking the same when I had the problem. But Vaadin Support thought me different. In a Vaadin Add-on Setup (which I use for creating my add-on's) everything is packaged (you don't need to reference everything). Due to your setup you would have to change the baseUrl (the path to the files). In a normal Setup the base url is relative beeing "ace-builds/src-min-noconflict/" but you said that you share resources so you would have to change it.

Just use ace.setBaseUrl() and make sure to read the JavaDoc carefully. I am pretty sure that that will solve your problem without having to add 200+ lines of annotations and increasing build time.

If you need any further help, I am willing to help you set the base url.

Be sure to keep me updated,
David

Unfortunately, I don't think that this would work for my use case since none of the resources are visible without annotations.

My project is manually loading resources by calling Vaadin's DevModeInitializer on every class which has @jsmodule, @CssImport, etc. annotations. Essentially, we are embedding Vaadin in our application. If a class does not annotate its dependencies, we can't pick up which JS/CSS files to import.

It might be better to port to a more standard way of running, but for now it won't serve any of the mode or theme files from the editor. I will probably just keep my fork alive on a local maven repository with all of the annotations, because that's more convenient than adding all of these 300 files in our repo.

Thank you for your help, and feel free to close the PR/issue

F0rce commented

@rudiejd I will keep this repo open and I will try to help you a bit. Unfortunately I am in Croatia at the moment and this is my last day here. I'm working normally from tomorrow and will then be able to help you the fullest.

The Themes and Modes are loaded as soon as you choose them (loaded into the browser cache). I will try to show that to you when I'm home.

As a workaround be sure to use your annotations.

We'll find a nice way around that for sure and please be sure to give .setBaseUrl() a try for sure. You can't destroy anything :)

Have a nice day,
David

F0rce commented

Closed due to inactivity