Update custom alloyEditor button to work with SPA navigation

Author: Norbert Nemeth

modules/alloy-editor-custom-button-web/build.gradle

@@ -11,17 +11,12 @@ buildscript {
 }
 
 dependencies {
-	compileOnly group: "com.liferay", name: "com.liferay.frontend.js.loader.modules.extender.api", version: "3.0.0"
-	compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "4.38.2"
-	compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "4.0.8"
+	compileOnly group: "com.liferay", name: "com.liferay.frontend.js.loader.modules.extender", version: "4.0.34"
+	compileOnly group: "com.liferay", name: "com.liferay.frontend.js.loader.modules.extender.api", version: "3.2.10"
+	compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "4.60.1"
+	compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "default"
 	compileOnly group: "javax.portlet", name: "portlet-api", version: "3.0.0"
 	compileOnly group: "javax.servlet", name: "javax.servlet-api", version: "3.0.1"
 	compileOnly group: "jstl", name: "jstl", version: "1.2"
 	compileOnly group: "org.osgi", name: "osgi.cmpn", version: "6.0.0"
-}
-
-repositories {
-	maven {
-		url "https://repository-cdn.liferay.com/nexus/content/groups/public"
-	}
 }

modules/alloy-editor-custom-button-web/src/main/java/com/liferay/frontend/editor/servlet/taglib/CustomButtonDynamicInclude.java

@@ -38,15 +38,17 @@ public void include(
 			HttpServletResponse httpServletResponse, String key)
 		throws IOException {
 
-		ScriptData scriptData = new ScriptData();
+			ScriptData scriptData = new ScriptData();
 
-		String buttonsCollection = _npmResolver.resolveModuleName(
-			"frontend-editor-custom-button-web/main");
-
-		scriptData.append(
-			null, "", buttonsCollection, ScriptData.ModulesType.ES6);
-
-		scriptData.writeTo(httpServletResponse.getWriter());
+			String buttonsCollection = _npmResolver.resolveModuleName(
+				"frontend-editor-custom-button-web/main");
+	
+			scriptData.append(
+				null,
+				"main.default();", buttonsCollection + " as main",
+				ScriptData.ModulesType.ES6);
+	
+			scriptData.writeTo(httpServletResponse.getWriter());
 	}
 
 	@Override
@@ -59,5 +61,4 @@ public void register(
 
 	@Reference
 	private NPMResolver _npmResolver;
-
-}
+}

modules/alloy-editor-custom-button-web/src/main/resources/META-INF/resources/buttons/ButtonMarquee.jsx

@@ -32,5 +32,4 @@ class ButtonMarquee extends React.Component {
 	}
 }
 
-export default AlloyEditor.Base.ButtonActionStyle(AlloyEditor.Base.ButtonStateClasses(AlloyEditor.Base.ButtonStyle(ButtonMarquee))
-);
+export default ButtonMarquee;

modules/alloy-editor-custom-button-web/src/main/resources/META-INF/resources/main.js

@@ -1,3 +1,11 @@
 import ButtonMarquee from './buttons/ButtonMarquee';
 
-AlloyEditor.Buttons[ButtonMarquee.key] = AlloyEditor.ButtonMarquee = ButtonMarquee;
+export default function () {
+	AlloyEditor.Buttons[
+		ButtonMarquee.key
+	] = AlloyEditor.ButtonMarquee = AlloyEditor.Base.ButtonActionStyle(
+		AlloyEditor.Base.ButtonStateClasses(
+			AlloyEditor.Base.ButtonStyle(ButtonMarquee)
+		)
+	);
+}