<!-- multiple upload -->
<div id="imageUpload" class="dropzone multiple-dropzone mb-6">
  <div class="dz-message" data-dz-message>
    <div class="pre-upload hsdfdsfhsdf oskasdadiaa justify-center">
      <i class="text-5xl bi bi-cloud-arrow-up"></i>
      <div class="pb-3"><span>Drag & drop images here</span></div>
    </div>
    <div class="pre-upload text-center">
      <button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-semibold border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white text-black">Browse file</button>
    </div>
    <span class="after-upload">+</span>
  </div>
</div>

<!-- Single upload -->
<div id="imageSingle" class="dropzone single-dropzone mb-6">
  <div class="dz-message" data-dz-message>
    <div class="pre-upload hsdfdsfhsdf oskasdadiaa justify-center">
      <i class="text-5xl bi bi-cloud-arrow-up"></i>
      <div class="pb-3"><span>Drag & drop images here</span></div>
    </div>
    <div class="pre-upload text-center">
      <button class="py-2.5 px-5 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-semibold border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white text-black">Browse file</button>
    </div>
  </div>
</div>
              
            

              
<!-- text editor -->
<div class="relative">
  <label for="texteditor" class="inline-block mb-2">Example textarea with editor</label>
  <textarea class="texteditor w-full leading-5 relative py-3 px-5 rounded text-neutral-800 bg-white border border-neutral-300 overflow-x-auto focus:outline-none focus:border-neutral-400 focus:ring-0 dark:text-neutral-300 dark:bg-neutral-700 dark:border-neutral-700 dark:focus:border-neutral-600" id="texteditor" rows="3"></textarea>
</div>
              
            

              
<div class="mb-6">
  <label for="exampletags" class="inline-block mb-2">Input Tags</label>
  <input type="text" name="tags" value="Tags1, Tags2" class="tagify w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" id="exampletags" minlength="2">
</div>

<div class="mb-6">
  <label for="tagsselect" class="inline-block mb-2">Select Tags</label>
  <input name="selectname" value="" class="tagify-select w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" id="tagsselect" minlength="2">
</div>

<!-- tagify -->
<script src="../vendors/@yaireo/tagify/dist/tagify.js"></script>
<!-- input tags -->
<script>
  // Input tags
const myTagify = function () {
  // tagify
  const input_tags = document.querySelectorAll("input.tagify");

  if ( input_tags != null) {
    for( let i = 0; i < input_tags.length; i++)
    {
      new Tagify(input_tags[i]);
    }
  }
}
myTagify();
</script>
 <!-- input select tags -->
<script id="rendered-js">
  var inputElm = document.querySelector('input.tagify-select'),
      whitelist = ["Ari","Boy","Caca","Doni","Ema","Fanny","Ghosh","Hana","Icha","Jeje","Kalban","Leo","Mona","Nabil","Oman","Pepi","Qusa","Radja","Sasa","Toni","Udin","Verlyn","Weird","Xana","Yaoyao","Zuma"];

  // initialize Tagify on the above input node reference
  var tagify = new Tagify(inputElm, {
    enforceWhitelist: true,
    // make an array from the initial input value
    whitelist: inputElm.value.trim().split(/\s*,\s*/) 
  });

  // Chainable event listeners
  tagify.on('add', onAddTag).
  on('remove', onRemoveTag).
  on('input', onInput).
  on('edit', onTagEdit).
  on('invalid', onInvalidTag).
  on('click', onTagClick).
  on('focus', onTagifyFocusBlur).
  on('blur', onTagifyFocusBlur).
  on('dropdown:hide dropdown:show', e => console.log(e.type)).
  on('dropdown:select', onDropdownSelect);

  var mockAjax = function mockAjax() {
    var timeout;
    return function (duration) {
      clearTimeout(timeout); // abort last request
      return new Promise(function (resolve, reject) {
        timeout = setTimeout(resolve, duration || 700, whitelist);
      });
    };
  }();

  // tag added callback
  function onAddTag(e) {
    console.log("onAddTag: ", e.detail);
    console.log("original input value: ", inputElm.value);
    tagify.off('add', onAddTag); // exmaple of removing a custom Tagify event
  }

  // tag remvoed callback
  function onRemoveTag(e) {
    console.log("onRemoveTag:", e.detail, "tagify instance value:", tagify.value);
  }

  // on character(s) added/removed (user is typing/deleting)
  function onInput(e) {
    console.log("onInput: ", e.detail);
    tagify.settings.whitelist.length = 0; // reset current whitelist
    tagify.loading(true).dropdown.hide.call(tagify); // show the loader animation
    // get new whitelist from a delayed mocked request (Promise)
    mockAjax().
    then(function (result) {
      // replace tagify "whitelist" array values with new values
      // and add back the ones already choses as Tags
      tagify.settings.whitelist.push(...result, ...tagify.value);
      // render the suggestions dropdown.
      tagify.loading(false).dropdown.show.call(tagify, e.detail.value);
    });
  }

  function onTagEdit(e) {
    console.log("onTagEdit: ", e.detail);
  }

  // invalid tag added callback
  function onInvalidTag(e) {
    console.log("onInvalidTag: ", e.detail);
  }

  // invalid tag added callback
  function onTagClick(e) {
    console.log(e.detail);
    console.log("onTagClick: ", e.detail);
  }

  function onTagifyFocusBlur(e) {
    console.log(e.type, "event fired");
  }

  function onDropdownSelect(e) {
    console.log("onDropdownSelect: ", e.detail);
  }
</script>