Ace editor dynamic loading with wicket-webjars?
VaclavC opened this issue · 7 comments
Hello, my apologies if this should be rather a question than bugreport. But how should I use properly org.webjars.bowergithub.ajaxorg:ace-builds webjar properly with wicket-webjars? I have
@Override
public void renderHead(IHeaderResponse response)
{
super.renderHead(response);
response.render(JavaScriptHeaderItem.forReference(
new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict/ace.js")));
// response.render(JavaScriptHeaderItem.forReference(
// new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict/theme-github.js")));
// response.render(JavaScriptHeaderItem.forReference(
// new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict/mode-html.js")));
// response.render(JavaScriptHeaderItem.forReference(
// new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict/worker-html.js")));
response.render(OnDomReadyHeaderItem.forScript(jsStartEditor(isEditable())));
}
private String jsEditorVar(String componentMId)
{
return componentMId + "Editor";
}
private String jsStartEditor(boolean editable)
{
StringBuilder sb = new StringBuilder();
String editorMId = editor.getMarkupId();
String editorVar = jsEditorVar(editorMId);
String acePath = urlFor(new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict"), new PageParameters()).toString();
sb.append(String.format("%s = ace.edit('%s', {", editorVar, editorMId));
sb.append("fontSize: 'medium',");
sb.append("maxLines: Infinity,");
sb.append("autoScrollEditorIntoView: true,");
sb.append("wrap: true,");
if ( !editable )
sb.append("readOnly: true,");
sb.append("});");
sb.append("ace.config.set('basePath', '");
sb.append(acePath);
sb.append("');");
sb.append(editorVar);
sb.append(".commands.addCommand({");
sb.append("name: 'saveFile',");
sb.append("bindKey: { win: 'Ctrl-S', mac: 'Command-S', sender: 'editor|cli'},");
sb.append("exec: function(env, args, request) {");
sb.append(String.format("$('#%s').trigger('ace:save', %s.getValue());", editorMId, editorVar));
sb.append("}");
sb.append("});");
sb.append(editorVar);
sb.append(".setTheme('ace/theme/github');");
if ( mode != null )
{
sb.append(editorVar);
sb.append(".session.setMode('ace/mode/" + mode + "');");
}
return sb.toString();
}
In my page class. Ace tries to dynamically load theme-github.js and mode-html.js then and is unable to do so. I can add them manually (commented out items in source), but this is probably not the right way. Should I mount whole Ace source directory somewhere? Or how should I do this?
Please create a quickstart and we will take a look what goes wrong.
And, I have turned off PackageResourceGuard completely for this, which is also bad.
The problem is in the generated urls: http://localhost:8080/wicket/resource/de.agilecoders.wicket.webjars.request.resource.WebjarsJavaScriptResourceReference/webjars/ace-builds/src-min-noconflict-ver-1557469347000/theme-github.js
as you can see the the caching hash is added to the folder, not to the filename.
A quick workaround is to add getResourceSettings().setCachingStrategy(NoOpResourceCachingStrategy.INSTANCE);
to your Application#init().
I will investigate where is the bug.
The reason was in the application code: String acePath = urlFor(new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict"), new PageParameters()).toString();
The fix is:
diff --git src/main/java/com/disnel/test/HomePage.java src/main/java/com/disnel/test/HomePage.java
index 9bcdf42..61573fd 100644
--- src/main/java/com/disnel/test/HomePage.java
+++ src/main/java/com/disnel/test/HomePage.java
@@ -74,7 +74,8 @@ public class HomePage extends WebPage
String editorMId = editor.getMarkupId();
String editorVar = jsEditorVar(editorMId);
- String acePath = urlFor(new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict"), new PageParameters()).toString();
+ String acePath = urlFor(new WebjarsJavaScriptResourceReference("ace-builds/src-min-noconflict/ace.js"), new PageParameters()).toString();
+ acePath = acePath.substring(0, acePath.lastIndexOf('/') + 1);
So it was my mistake. Thank you!