martin-g/wicket-webjars

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!