UI/TagInput: 45566, raw-encode tags

components/ILIAS/UI/UI.php

@@ -573,8 +573,6 @@ public function init(
             new Component\Resource\ComponentJS($this, "js/Input/Field/file.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/Input/Field/input.js");
-        $contribute[Component\Resource\PublicAsset::class] = fn() =>
-            new Component\Resource\ComponentJS($this, "js/Input/Field/tagInput.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/Item/dist/notification.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
@@ -607,8 +605,6 @@ public function init(
             new Component\Resource\OfComponent($this, "fonts", "assets");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\OfComponent($this, "ui-examples", "assets");
-        $contribute[Component\Resource\PublicAsset::class] = static fn() =>
-            new Component\Resource\NodeModule("@yaireo/tagify/dist/tagify.js");
         $contribute[Component\Resource\PublicAsset::class] = static fn() =>
             new Component\Resource\NodeModule("@yaireo/tagify/dist/tagify.css");
         $contribute[Component\Resource\PublicAsset::class] = static fn() =>

components/ILIAS/UI/resources/js/Input/Field/rollup.config.js

@@ -23,6 +23,7 @@ export default {
     'jquery',
     'ilias',
     'document',
+    'Tagify',
   ],
   output: {
     // file: '../../../../../../../public/assets/js/input.factory.min.js',

components/ILIAS/UI/resources/js/Input/Field/src/Tag/tag.factory.js

@@ -0,0 +1,91 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+import Tagify from '../../../../../../../../../node_modules/@yaireo/tagify/src/tagify.js';
+
+export default class TagFactory {
+  /**
+     * @type {Array<string, Tag>}
+     */
+  instances = [];
+
+  /**
+     * @param {string} componentId
+     * @param {array} config
+     * @param {array} value
+     * @return {void}
+     * @throws {Error} if the input was already initialized.
+     */
+  init(componentId, config, value) {
+    if (undefined !== this.instances[componentId]) {
+      throw new Error(`Tag with input-id '${componentId}' has already been initialized.`);
+    }
+    const inputId = document.querySelector(`#${componentId} .c-input__field .c-field-tag__wrapper input`)?.id;
+    const input = document.getElementById(inputId);
+    const settings = {
+      whitelist: config.options,
+      enforceWhitelist: !config.userInput,
+      duplicates: config.allowDuplicates,
+      maxTags: config.maxItems,
+      delimiters: null,
+      templates: {
+        tag: (tagData) => `<tag 
+              contenteditable='false'
+              spellcheck="false" class='tagify__tag'
+              value="${tagData.value}"
+              tabindex="0">
+                <x title='remove tag' class='tagify__tag__removeBtn'></x>
+                <div>
+                  <span class='tagify__tag-text'>${tagData.display}</span>
+                </div>
+            </tag>`,
+        dropdownItem: (tagData) => `<div 
+              class='tagify__dropdown__item' 
+              tagifySuggestionIdx="${tagData.tagifySuggestionIdx}" 
+              value="${tagData.value}">
+                <span>${tagData.display}</span>
+              </div>`,
+      },
+      originalInputValueFormat: (valuesArr) => valuesArr.map((item) => item.value),
+      dropdown: {
+        enabled: config.dropdownSuggestionsStartAfter,
+        maxItems: config.dropdownMaxItems,
+        closeOnSelect: config.dropdownCloseOnSelect,
+        highlightFirst: config.highlight,
+      },
+      transformTag: (tagData) => {
+        if (!tagData.display) {
+          tagData.display = tagData.value;
+          tagData.value = encodeURIComponent(tagData.value);
+        }
+        tagData.display = tagData.display
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+      },
+    };
+
+    const tagify = new Tagify(input, settings);
+    tagify.addTags(value);
+    this.instances[componentId] = tagify;
+  }
+
+  /**
+     * @param {string} componentId
+     * @return {Tagify|null}
+     */
+  get(componentId) {
+    return this.instances[componentId] ?? null;
+  }
+}

components/ILIAS/UI/resources/js/Input/Field/src/input.factory.js

@@ -31,6 +31,7 @@ import TextareaFactory from './Textarea/textarea.factory.js';
 import MarkdownFactory from './Markdown/markdown.factory.js';
 import TreeSelectFactory from './TreeSelect/TreeSelectFactory.js';
 import JQueryEventListener from '../../../Core/src/JQueryEventListener.js';
+import TagFactory from './Tag/tag.factory.js';
 
 il.UI = il.UI || {};
 il.UI.Input = il.UI.Input || {};
@@ -42,7 +43,8 @@ il.UI.Input = il.UI.Input || {};
     new JQueryEventListener($),
     il.UI.menu.drilldown,
     // workaround for language being initialised after UI
-    {txt: (s) => il.Language.txt(s)},
+    { txt: (s) => il.Language.txt(s) },
     document,
   );
+  Input.tagInput = new TagFactory();
 }(il.UI.Input));

components/ILIAS/UI/src/Implementation/Component/Input/Field/Renderer.php

@@ -399,7 +399,7 @@ protected function renderTagField(F\Tag $component, RendererInterface $default_r
         if ($value) {
             $value = array_map(
                 function ($v) {
-                    return ['value' => urlencode($v), 'display' => $v];
+                    return ['value' => rawurlencode($v), 'display' => $v];
                 },
                 $value
             );
@@ -847,9 +847,7 @@ protected function renderHiddenField(F\Hidden $input): string
     public function registerResources(ResourceRegistry $registry): void
     {
         parent::registerResources($registry);
-        $registry->register('assets/js/tagify.js');
         $registry->register('assets/css/tagify.css');
-        $registry->register('assets/js/tagInput.js');
 
         $registry->register('assets/js/dropzone.min.js');
         $registry->register('assets/js/dropzone.js');

components/ILIAS/UI/src/Implementation/Component/Input/Field/Tag.php

@@ -75,7 +75,7 @@ protected function addAdditionalTransformations(): void
             if (count($v) == 1 && $v[0] === '') {
                 return [];
             }
-            $array = array_map("urldecode", $v);
+            $array = array_map("rawurldecode", $v);
             return array_map('strip_tags', $array);
         }));
     }
@@ -84,7 +84,7 @@ public function getConfiguration(): stdClass
     {
         $options = array_map(
             fn($tag) => [
-                'value' => urlencode(trim($tag)),
+                'value' => rawurlencode(trim($tag)),
                 'display' => $tag,
                 'searchBy' => $tag
             ],

components/ILIAS/UI/tests/Component/Input/Field/TagInputTest.php

@@ -231,4 +231,38 @@ public function testMaxTaglengthTagsNotOk(): void
             )
         );
     }
+
+    public static function getUITagSpecialCharValues(): array
+    {
+        return [
+            ['1', '2', '3'],
+            ['++1#*', '[-2]', '{?3}'],
+            ['some\'thing "else"', '&/\\'],
+            ['fünf, sechs', 'sieben, acht'],
+        ];
+    }
+
+    /** @dataProvider getUITagSpecialCharValues */
+    public function testUITagInputSpecialChars(string ...$tags): void
+    {
+        $f = $this->getFieldFactory();
+        $name = "name_0";
+        $tag = $f->tag('', $tags)->withNameFrom($this->name_source);
+
+        $encoded_tags = array_map('rawurlencode', $tags);
+
+        $this->assertEquals(
+            $encoded_tags,
+            array_map(
+                fn($o) => $o['value'],
+                $tag->getConfiguration()->options
+            )
+        );
+
+        $raw_value = implode(',', $encoded_tags);
+        $tag = $tag->withInput(new DefInputData([$name => $raw_value]));
+        $content = $tag->getContent();
+        $this->assertTrue($content->isOk());
+        $this->assertEquals($tags, $content->value());
+    }
 }