#12041 Support direct use of vue.js components in submission wizard (#12042)

Author: jardakotesovec

classes/template/PKPTemplateManager.php

@@ -359,6 +359,8 @@ public function initialize(PKPRequest $request)
         $this->registerPlugin('modifier', 'count', count(...));
         $this->registerPlugin('modifier', 'intval', intval(...));
         $this->registerPlugin('modifier', 'json_encode', json_encode(...));
+        // Register the safe JSON modifier
+        $this->registerPlugin('modifier', 'json_encode_html_attribute', $this->smartyJsonEncodeHtmlAttribute(...));
         $this->registerPlugin('modifier', 'uniqid', uniqid(...));
         $this->registerPlugin('modifier', 'substr', substr(...));
         $this->registerPlugin('modifier', 'strstr', strstr(...));
@@ -1792,6 +1794,26 @@ public function smartyTranslate(array $params, Smarty_Internal_Template $smarty)
         return $count === null ? __($key, $variables, $locale) : __p($key, $count, $variables, $locale);
     }
 
+    /**
+     * Smarty modifier: json_encode_html_attribute
+     * 
+     * Encodes a value to JSON with full HTML-attribute safety.
+     * Escapes ", ', <, >, & as \u0022, \u0027, \u003C, \u003E, \u0026
+     * so the output can be safely placed inside any HTML attribute
+     */
+    function smartyJsonEncodeHtmlAttribute($value)
+    {
+        return json_encode(
+            $value,
+            JSON_HEX_TAG          // < →
+            | JSON_HEX_AMP        // & →
+            | JSON_HEX_APOS       // ' →
+            | JSON_HEX_QUOT       // " →
+            | JSON_UNESCAPED_UNICODE
+            | JSON_UNESCAPED_SLASHES   // optional but highly recommended
+        );
+    }
+
     /**
      * Smarty usage: {html_options_translate ...}
      * For parameter usage, see http://smarty.php.net/manual/en/language.function.html.options.php

templates/submission/wizard.tpl

@@ -106,6 +106,8 @@
                             {foreach from=$reviewSteps item=$step}
                                 {if $step.reviewTemplate}
                                     {include file=$step.reviewTemplate}
+                                {elseif $step.component}
+                                    <component :is="'{$step.component}'" v-bind='{$step.props|json_encode_html_attribute}'></component>
                                 {/if}
                                 {call_hook name="Template::SubmissionWizard::Section::Review" submission=$submission step=$step.id}
                             {/foreach}
@@ -120,6 +122,7 @@
                                 </span>
                             </transition>
                         </template>
+                        <component v-else-if="section.component" :is="section.component" v-bind="section?.props || {}"></component>
                         <pkp-form
                             v-if="section.type === 'confirm'"
                             v-bind="section.form"