view-customize workaround of redmine patch #31989 Inline issue auto complete (#) in fields with text-formatting enabled

view-customize-31989-workaround.html

<script src="https://unpkg.com/[email protected]/dist/tribute.min.js"></script>
<link type="text/css" href="https://unpkg.com/[email protected]/dist/tribute.css" rel="stylesheet">
<script>
//<![CDATA[
function inlineAutoComplete(element) {
    'use strict';
    // do not attach if Tribute is already initialized
    if (element.dataset.tribute === 'true') {return;}

    const issuesUrl = element.dataset.issuesUrl;
    const usersUrl = element.dataset.usersUrl;

    const remoteSearch = function(url, cb) {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function ()
      {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            cb(data);
          } else if (xhr.status === 403) {
            cb([]);
          }
        }
      };
      xhr.open("GET", url, true);
      xhr.send();
    };

    const tribute = new Tribute({
      trigger: '#',
      values: function (text, cb) {
        remoteSearch(issuesUrl + text, function (issues) {
          return cb(issues);
        });
      },
      lookup: 'label',
      fillAttr: 'label',
      requireLeadingSpace: true,
      selectTemplate: function (issue) {
        return '#' + issue.original.id;
      }
    });

    tribute.attach(element);
}


$(document).on('focus', '.wiki-edit', function(event) {
  $(this).attr({'data-auto-complete': 'true', 'data-issues-url': '/issues/auto_complete?project_id' + ViewCustomize.context.project.identifier + '&q='});
  inlineAutoComplete(event.target);
});
//]]>
</script>
<style>
.tribute-container ul {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.tribute-container li.highlight {background-color: #759FCF; color:#fff;}
</style>