Replace tribute with text-expander-element for textarea

package.json

@@ -13,6 +13,7 @@
  "@citation-js/plugin-software-formats": "0.6.1",
  "@claviska/jquery-minicolors": "2.3.6",
  "@github/markdown-toolbar-element": "2.1.1",
+ "@github/text-expander-element": "2.3.0",
  "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
  "@primer/octicons": "18.3.0",
  "@vue/compiler-sfc": "3.2.47",

templates/shared/combomarkdowneditor.tmpl

@@ -39,7 +39,9 @@ Template Attributes:
  <span class="markdown-toolbar-button markdown-switch-easymde">{{svg "octicon-arrow-switch"}}</span>
  </div>
  </markdown-toolbar>
- <textarea class="markdown-text-editor js-quick-submit" name="{{.TextareaName}}" placeholder="{{.TextareaPlaceholder}}">{{.TextareaContent}}</textarea>
+ <text-expander keys=": @">
+ <textarea class="markdown-text-editor js-quick-submit" name="{{.TextareaName}}" placeholder="{{.TextareaPlaceholder}}">{{.TextareaContent}}</textarea>
+ </text-expander>
  </div>
  <div class="ui tab markup" data-tab-panel="markdown-previewer">
  {{.locale.Tr "loading"}}

web_src/css/editor-markdown.css

@@ -30,3 +30,44 @@
 .combo-markdown-editor .CodeMirror-scroll {
  max-height: calc(100vh - 200px);
 }
+
+text-expander {
+ display: block;
+ position: relative;
+}
+
+text-expander .suggestions {
+ position: absolute;
+ min-width: 180px;
+ padding: 0;
+ margin-top: 24px;
+ list-style: none;
+ background: var(--color-box-body);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-secondary);
+ box-shadow: 0 .5rem 1rem var(--color-shadow);
+}
+
+text-expander .suggestions li {
+ display: block;
+ cursor: pointer;
+ padding: 4px 8px;
+ font-weight: 500;
+}
+
+text-expander .suggestions li + li {
+ border-top: 1px solid var(--color-secondary);
+}
+
+text-expander .suggestions li:first-child {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+text-expander .suggestions li:last-child {
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+text-expander li[aria-selected="true"] {
+ background: var(--color-primary);
+ color: var(--color-primary-contrast);
+}

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -1,11 +1,13 @@
 import '@github/markdown-toolbar-element';
+import '@github/text-expander-element';
 import $ from 'jquery';
 import {attachTribute} from '../tribute.js';
 import {hideElem, showElem, autosize} from '../../utils/dom.js';
 import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
 import {initMarkupContent} from '../../markup/content.js';
 import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
 import {attachRefIssueContextPopup} from '../contextpopup.js';
+import {emojiKeys, emojiString} from '../emoji.js';
 
 let elementIdCounter = 0;
 
@@ -43,11 +45,9 @@ class ComboMarkdownEditor {
 
  this.setupTab();
  this.setupDropzone();
-
+ this.setupExpander();
  this.setupTextarea();
 
- await attachTribute(this.textarea, {mentions: true, emoji: true});
-
  if (this.userPreferredEditor === 'easymde') {
  await this.switchToEasyMDE();
  }
@@ -83,6 +83,40 @@ class ComboMarkdownEditor {
  }
  }
 
+ setupExpander() {
+ const expander = this.container.querySelector('text-expander');
+ expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
+ if (key === ':') {
+ const ul = document.createElement('ul');
+ ul.classList.add('suggestions');
+
+ const matches = [];
+ for (const name of emojiKeys) {
+ if (name.includes(text)) {
+ matches.push(name);
+ if (matches.length > 5) break;
+ }
+ }
+
+ for (const name of matches) {
+ const emoji = emojiString(name);
+ const li = document.createElement('li');
+ li.setAttribute('role', 'option');
+ li.setAttribute('data-value', emoji);
+ li.textContent = `${emoji} :${name}:`;
+ ul.append(li);
+ }
+
+ provide(Promise.resolve({matched: true, fragment: ul}));
+ }
+ });
+ expander?.addEventListener('text-expander-value', ({detail}) => {
+ if (detail?.key === ':' && detail?.item) {
+ detail.value = detail.item.getAttribute('data-value');
+ }
+ });
+ }
+
  setupDropzone() {
  const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
  if (dropzoneParentContainer) {