{{template "shared/combomarkdowneditor" (dict
"locale" $.locale
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
@@ -16,7 +16,7 @@
{{end}}
diff --git a/templates/repo/issue/fields/textarea.tmpl b/templates/repo/issue/fields/textarea.tmpl
index 6127a32d46de6..8e9eacf17c24c 100644
--- a/templates/repo/issue/fields/textarea.tmpl
+++ b/templates/repo/issue/fields/textarea.tmpl
@@ -1,21 +1,25 @@
-
+{{$useMarkdownEditor := not .item.Validations.render}}
+
{{template "repo/issue/fields/header" .}}
- {{/* FIXME: preview markdown result */}}
-
- {{template "shared/combomarkdowneditor" (dict
- "locale" .Locale
- "MarkdownPreviewUrl" (print .RepoLink "/markup")
- "MarkdownPreviewContext" .RepoLink
- "TextareaName" "content"
- "TextareaContent" .item.Attributes.value
- "TextareaPlaceholder" .item.Attributes.placeholder
- "DropzoneParentContainer" "form, .ui.form"
- )}}
-
+ {{/* the real form element to provide the value */}}
+
+
+ {{if $useMarkdownEditor}}
+ {{template "shared/combomarkdowneditor" (dict
+ "locale" .root.locale
+ "ContainerClasses" "gt-hidden"
+ "MarkdownPreviewUrl" (print .root.RepoLink "/markup")
+ "MarkdownPreviewContext" .root.RepoLink
+ "TextareaContent" .item.Attributes.value
+ "TextareaPlaceholder" .item.Attributes.placeholder
+ "DropzoneParentContainer" ".combo-editor-dropzone"
+ )}}
-{{if .IsAttachmentEnabled}}
-
- {{template "repo/upload" .Context.Data}}
+ {{if .root.IsAttachmentEnabled}}
+
+ {{template "repo/upload" .root}}
+
+ {{end}}
+ {{end}}
-{{end}}
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index dfe795e137533..c12b8149b0864 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -24,7 +24,7 @@
{{else if eq .Type "markdown"}}
{{template "repo/issue/fields/markdown" dict "Context" $.Context "item" .}}
{{else if eq .Type "textarea"}}
- {{template "repo/issue/fields/textarea" dict "Context" $.Context "item" . "RepoLink" $.RepoLink "Locale" $.locale "IsAttachmentEnabled" $.IsAttachmentEnabled}}
+ {{template "repo/issue/fields/textarea" dict "Context" $.Context "item" . "root" $}}
{{else if eq .Type "dropdown"}}
{{template "repo/issue/fields/dropdown" dict "Context" $.Context "item" .}}
{{else if eq .Type "checkboxes"}}
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js
index 42c10e664eaa6..97b0de0216a0d 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -5,10 +5,9 @@ import {attachTribute} from '../tribute.js';
import {hideElem, showElem, autosize} from '../../utils/dom.js';
import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
-import {emojiString} from '../emoji.js';
import {renderPreviewPanelContent} from '../repo-editor.js';
-import {matchEmoji, matchMention} from '../../utils/match.js';
import {svg} from '../../svg.js';
+import {initTributeExpander} from './TributeExpander.js';
let elementIdCounter = 0;
@@ -43,14 +42,12 @@ class ComboMarkdownEditor {
async init() {
this.prepareEasyMDEToolbarActions();
+ this.setupContainer();
this.setupTab();
this.setupDropzone();
this.setupTextarea();
- this.setupExpander();
- if (this.userPreferredEditor === 'easymde') {
- await this.switchToEasyMDE();
- }
+ await this.switchToUserPreference();
}
applyEditorHeights(el, heights) {
@@ -60,6 +57,11 @@ class ComboMarkdownEditor {
if (heights.maxHeight) el.style.maxHeight = heights.maxHeight;
}
+ setupContainer() {
+ initTributeExpander(this.container.querySelector('text-expander'));
+ this.container.addEventListener('ce-editor-content-changed', (e) => this.options?.onContentChanged?.(this, e));
+ }
+
setupTextarea() {
this.textarea = this.container.querySelector('.markdown-text-editor');
this.textarea._giteaComboMarkdownEditor = this;
@@ -103,64 +105,6 @@ class ComboMarkdownEditor {
}
}
- setupExpander() {
- const expander = this.container.querySelector('text-expander');
- expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
- if (key === ':') {
- const matches = matchEmoji(text);
- if (!matches.length) return provide({matched: false});
-
- const ul = document.createElement('ul');
- ul.classList.add('suggestions');
- 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({matched: true, fragment: ul});
- } else if (key === '@') {
- const matches = matchMention(text);
- if (!matches.length) return provide({matched: false});
-
- const ul = document.createElement('ul');
- ul.classList.add('suggestions');
- for (const {value, name, fullname, avatar} of matches) {
- const li = document.createElement('li');
- li.setAttribute('role', 'option');
- li.setAttribute('data-value', `${key}${value}`);
-
- const img = document.createElement('img');
- img.src = avatar;
- li.append(img);
-
- const nameSpan = document.createElement('span');
- nameSpan.textContent = name;
- li.append(nameSpan);
-
- if (fullname && fullname.toLowerCase() !== name) {
- const fullnameSpan = document.createElement('span');
- fullnameSpan.classList.add('fullname');
- fullnameSpan.textContent = fullname;
- li.append(fullnameSpan);
- }
-
- ul.append(li);
- }
-
- provide({matched: true, fragment: ul});
- }
- });
- expander?.addEventListener('text-expander-value', ({detail}) => {
- if (detail?.item) {
- detail.value = detail.item.getAttribute('data-value');
- }
- });
- }
-
setupDropzone() {
const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
if (dropzoneParentContainer) {
@@ -270,7 +214,16 @@ class ComboMarkdownEditor {
return processed;
}
+ async switchToUserPreference() {
+ if (this.userPreferredEditor === 'easymde') {
+ await this.switchToEasyMDE();
+ } else {
+ this.switchToTextarea();
+ }
+ }
+
switchToTextarea() {
+ if (!this.easyMDE) return;
showElem(this.textareaMarkdownToolbar);
if (this.easyMDE) {
this.easyMDE.toTextArea();
@@ -279,6 +232,8 @@ class ComboMarkdownEditor {
}
async switchToEasyMDE() {
+ if (this.easyMDE) return;
+
// EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles.
const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');
const easyMDEOpt = {
diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index 9145b24062f26..dc335495a310f 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -25,6 +25,10 @@ function clipboardPastedImages(e) {
return files;
}
+function triggerEditorContentChanged(target) {
+ target.dispatchEvent(new CustomEvent('ce-editor-content-changed', {bubbles: true}));
+}
+
class TextareaEditor {
constructor(editor) {
this.editor = editor;
@@ -38,6 +42,7 @@ class TextareaEditor {
editor.selectionStart = startPos;
editor.selectionEnd = startPos + value.length;
editor.focus();
+ triggerEditorContentChanged(editor);
}
replacePlaceholder(oldVal, newVal) {
@@ -54,6 +59,7 @@ class TextareaEditor {
}
editor.selectionStart = editor.selectionEnd;
editor.focus();
+ triggerEditorContentChanged(editor);
}
}
@@ -70,6 +76,7 @@ class CodeMirrorEditor {
endPoint.ch = startPoint.ch + value.length;
editor.setSelection(startPoint, endPoint);
editor.focus();
+ triggerEditorContentChanged(editor.getTextArea());
}
replacePlaceholder(oldVal, newVal) {
@@ -84,6 +91,7 @@ class CodeMirrorEditor {
endPoint.ch += newVal.length;
editor.setSelection(endPoint, endPoint);
editor.focus();
+ triggerEditorContentChanged(editor.getTextArea());
}
}
diff --git a/web_src/js/features/comp/QuickSubmit.js b/web_src/js/features/comp/QuickSubmit.js
index 43424a949f1ec..d598a59655308 100644
--- a/web_src/js/features/comp/QuickSubmit.js
+++ b/web_src/js/features/comp/QuickSubmit.js
@@ -6,7 +6,9 @@ export function handleGlobalEnterQuickSubmit(target) {
if ($form.length) {
// here use the event to trigger the submit event (instead of calling `submit()` method directly)
// otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
- $form.trigger('submit');
+ if ($form[0].checkValidity()) {
+ $form.trigger('submit');
+ }
} else {
// if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request.
// the 'ce-' prefix means this is a CustomEvent
diff --git a/web_src/js/features/comp/TributeExpander.js b/web_src/js/features/comp/TributeExpander.js
new file mode 100644
index 0000000000000..815c8e55457a0
--- /dev/null
+++ b/web_src/js/features/comp/TributeExpander.js
@@ -0,0 +1,59 @@
+import {matchEmoji, matchMention} from '../../utils/match.js';
+import {emojiString} from '../emoji.js';
+
+export function initTributeExpander(expander) {
+ expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
+ if (key === ':') {
+ const matches = matchEmoji(text);
+ if (!matches.length) return provide({matched: false});
+
+ const ul = document.createElement('ul');
+ ul.classList.add('suggestions');
+ 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({matched: true, fragment: ul});
+ } else if (key === '@') {
+ const matches = matchMention(text);
+ if (!matches.length) return provide({matched: false});
+
+ const ul = document.createElement('ul');
+ ul.classList.add('suggestions');
+ for (const {value, name, fullname, avatar} of matches) {
+ const li = document.createElement('li');
+ li.setAttribute('role', 'option');
+ li.setAttribute('data-value', `${key}${value}`);
+
+ const img = document.createElement('img');
+ img.src = avatar;
+ li.append(img);
+
+ const nameSpan = document.createElement('span');
+ nameSpan.textContent = name;
+ li.append(nameSpan);
+
+ if (fullname && fullname.toLowerCase() !== name) {
+ const fullnameSpan = document.createElement('span');
+ fullnameSpan.classList.add('fullname');
+ fullnameSpan.textContent = fullname;
+ li.append(fullnameSpan);
+ }
+
+ ul.append(li);
+ }
+
+ provide({matched: true, fragment: ul});
+ }
+ });
+ expander?.addEventListener('text-expander-value', ({detail}) => {
+ if (detail?.item) {
+ detail.value = detail.item.getAttribute('data-value');
+ }
+ });
+}
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index ec0742bca50f2..1fd91b87a1193 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -392,8 +392,7 @@ export async function handleReply($el) {
const $textarea = form.find('textarea');
let editor = getComboMarkdownEditor($textarea);
if (!editor) {
- const editors = await initComboMarkdownEditor(form.find('.combo-markdown-editor'));
- editor = editors[0];
+ editor = await initComboMarkdownEditor(form.find('.combo-markdown-editor'));
}
editor.focus();
return editor;
@@ -523,8 +522,8 @@ export function initRepoPullRequestReview() {
td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
td.find("input[name='path']").val(path);
- const editors = await initComboMarkdownEditor(td.find('.combo-markdown-editor'));
- editors[0].focus();
+ const editor = await initComboMarkdownEditor(td.find('.combo-markdown-editor'));
+ editor.focus();
}
});
}
@@ -636,41 +635,58 @@ export function initRepoIssueBranchSelect() {
$('#branch-select > .item').on('click', changeBranchSelect);
}
-export function initRepoIssueMarkdownTextarea() {
- const hiddenTextarea = function (target) {
- const comboMarkdownEditor = $(target).parent().find('.combo-markdown-editor');
- const markdownTextEditor = comboMarkdownEditor.find('.markdown-text-editor');
- const dropzone = $(target).parent().next().find('.dropzone');
- // show combo markdown editor
- comboMarkdownEditor.removeClass('gt-hidden');
- markdownTextEditor.trigger('focus');
- if (dropzone) {
- dropzone.removeClass('gt-hidden');
- }
- // hidden textarea
- $(target).addClass('gt-hidden');
- };
+export function initSingleCommentEditor($commentForm) {
+ // pages:
+ // * normal new issue/pr page, no status-button
+ // * issue/pr view page, with comment form, has status-button
+ const opts = {};
+ const $statusButton = $('#status-button');
+ if ($statusButton.length) {
+ $statusButton.on('click', (e) => {
+ e.preventDefault();
+ $('#status').val($statusButton.data('status-val'));
+ $('#comment-form').trigger('submit');
+ });
+ opts.onContentChanged = (editor) => {
+ $statusButton.text($statusButton.attr(editor.value().trim() ? 'data-status-and-comment' : 'data-status'));
+ };
+ }
+ initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
+}
- const showTextarea = function (target) {
- const comboMarkdownEditor = $(target).parent().find('.combo-markdown-editor');
- const markdownTextEditor = comboMarkdownEditor.find('.markdown-text-editor');
- const dropzone = $(target).parent().next().find('.dropzone');
- // hidden combo markdown editor
- $(comboMarkdownEditor).addClass('gt-hidden');
- if (dropzone) {
- $(dropzone).addClass('gt-hidden');
- }
- // show textarea
- $(target).removeClass('gt-hidden');
- // sync textarea content
- $(target).val($(markdownTextEditor).val());
- };
+export function initIssueTemplateCommentEditors($commentForm) {
+ // pages:
+ // * new issue with issue template
+ const $comboFields = $commentForm.find('.combo-editor-dropzone');
- // default display all textarea
- $('.field.textarea .fake').each((_, target) => showTextarea(target));
+ const initCombo = async ($combo) => {
+ const $dropzoneContainer = $combo.find('.form-field-dropzone');
+ const $formField = $combo.find('.form-field-real');
+ const $markdownEditor = $combo.find('.combo-markdown-editor');
- $('.field.textarea .fake').on('focus', function() {
- hiddenTextarea(this);
- $('.field.textarea .fake').not(this).each((_, target) => showTextarea(target));
- });
+ const editor = await initComboMarkdownEditor($markdownEditor, {
+ onContentChanged: (editor) => {
+ $formField.val(editor.value());
+ }
+ });
+
+ $formField.on('focus', async () => {
+ // deactivate all markdown editors
+ showElem($commentForm.find('.combo-editor-dropzone .form-field-real'));
+ hideElem($commentForm.find('.combo-editor-dropzone .combo-markdown-editor'));
+ hideElem($commentForm.find('.combo-editor-dropzone .form-field-dropzone'));
+
+ // activate this markdown editor
+ hideElem($formField);
+ showElem($markdownEditor);
+ showElem($dropzoneContainer);
+
+ await editor.switchToUserPreference();
+ editor.focus();
+ });
+ };
+
+ for (const el of $comboFields) {
+ initCombo($(el));
+ }
}
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index d381250b2e709..964ec16d2b008 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -3,7 +3,7 @@ import {
initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete,
initRepoIssueComments, initRepoIssueDependencyDelete, initRepoIssueReferenceIssue,
initRepoIssueTitleEdit, initRepoIssueWipToggle,
- initRepoPullRequestUpdate, updateIssuesMeta, handleReply
+ initRepoPullRequestUpdate, updateIssuesMeta, handleReply, initIssueTemplateCommentEditors, initSingleCommentEditor,
} from './repo-issue.js';
import {initUnicodeEscapeButton} from './repo-unicode-escape.js';
import {svg} from '../svg.js';
@@ -53,6 +53,13 @@ export function initRepoCommentForm() {
return;
}
+ if ($commentForm.find('.field.combo-editor-dropzone').length) {
+ // at the moment, if a form has multiple combo-markdown-editors, it must be a issue template form
+ initIssueTemplateCommentEditors($commentForm);
+ } else {
+ initSingleCommentEditor($commentForm);
+ }
+
function initBranchSelector() {
const $selectBranch = $('.ui.select-branch');
const $branchMenu = $selectBranch.find('.reference-list-menu');
@@ -82,27 +89,6 @@ export function initRepoCommentForm() {
});
}
- const $statusButton = $('#status-button');
- $statusButton.on('click', (e) => {
- e.preventDefault();
- $('#status').val($statusButton.data('status-val'));
- $('#comment-form').trigger('submit');
- });
-
- // default markdown editor should have no more than one
- $commentForm.find('.field.markdown .combo-markdown-editor').each((_, comboMarkdownEditor) => {
- const _promise = initComboMarkdownEditor(comboMarkdownEditor, {
- onContentChanged(editor) {
- $statusButton.text($statusButton.attr(editor.value().trim() ? 'data-status-and-comment' : 'data-status'));
- },
- });
- });
-
- // issue template textarea
- $commentForm.find('.field.textarea .combo-markdown-editor').each((_, comboMarkdownEditor) => {
- initComboMarkdownEditor(comboMarkdownEditor);
- });
-
initBranchSelector();
// List submits
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 7d4b5f2e34b23..f7cbb24e8562e 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -25,7 +25,6 @@ import {initCommentContent, initMarkupContent} from './markup/content.js';
import {initUserAuthLinkAccountView, initUserAuthOauth2} from './features/user-auth.js';
import {
initRepoIssueDue,
- initRepoIssueMarkdownTextarea,
initRepoIssueReferenceRepositorySearch,
initRepoIssueTimeTracking,
initRepoIssueWipTitle,
@@ -147,7 +146,6 @@ onDomReady(() => {
initRepoIssueDue();
initRepoIssueList();
initRepoIssueSidebarList();
- initRepoIssueMarkdownTextarea();
initRepoIssueReferenceRepositorySearch();
initRepoIssueTimeTracking();
initRepoIssueWipTitle();
From 143dcadbc228dd128c3f01692975f1931fdea535 Mon Sep 17 00:00:00 2001
From: wxiaoguang
Date: Wed, 3 May 2023 00:53:02 +0800
Subject: [PATCH 12/14] fix
---
templates/repo/issue/fields/textarea.tmpl | 2 +-
web_src/js/features/comp/ComboMarkdownEditor.js | 1 -
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/templates/repo/issue/fields/textarea.tmpl b/templates/repo/issue/fields/textarea.tmpl
index 8e9eacf17c24c..49d51eb5a8ba2 100644
--- a/templates/repo/issue/fields/textarea.tmpl
+++ b/templates/repo/issue/fields/textarea.tmpl
@@ -1,4 +1,4 @@
-{{$useMarkdownEditor := not .item.Validations.render}}
+{{$useMarkdownEditor := not .item.Attributes.render}}
{{template "repo/issue/fields/header" .}}
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js
index 97b0de0216a0d..d683988f7d76e 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -233,7 +233,6 @@ class ComboMarkdownEditor {
async switchToEasyMDE() {
if (this.easyMDE) return;
-
// EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles.
const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');
const easyMDEOpt = {
From 49b004611e25f6be10f73d10f10a35ea74cf71cf Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Mon, 8 May 2023 05:13:18 +0000
Subject: [PATCH 13/14] fix
---
web_src/js/features/repo-issue.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 3b29e30be14e4..8ecc7aa4ca2af 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -664,6 +664,7 @@ export function initRepoIssueGotoID() {
hideElem($('#hashtag-button'));
}
});
+}
export function initSingleCommentEditor($commentForm) {
// pages:
From d22b77f576f89dacc0d04d257c4cbff96c81e693 Mon Sep 17 00:00:00 2001
From: silverwind
Date: Mon, 8 May 2023 23:54:05 +0200
Subject: [PATCH 14/14] rename TributeExpander to TextExpander
---
web_src/js/features/comp/ComboMarkdownEditor.js | 4 ++--
.../js/features/comp/{TributeExpander.js => TextExpander.js} | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
rename web_src/js/features/comp/{TributeExpander.js => TextExpander.js} (97%)
diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js
index 9e83ba6ea4fe2..103e71daae473 100644
--- a/web_src/js/features/comp/ComboMarkdownEditor.js
+++ b/web_src/js/features/comp/ComboMarkdownEditor.js
@@ -7,7 +7,7 @@ import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js';
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
import {renderPreviewPanelContent} from '../repo-editor.js';
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
-import {initTributeExpander} from './TributeExpander.js';
+import {initTextExpander} from './TextExpander.js';
let elementIdCounter = 0;
@@ -58,7 +58,7 @@ class ComboMarkdownEditor {
}
setupContainer() {
- initTributeExpander(this.container.querySelector('text-expander'));
+ initTextExpander(this.container.querySelector('text-expander'));
this.container.addEventListener('ce-editor-content-changed', (e) => this.options?.onContentChanged?.(this, e));
}
diff --git a/web_src/js/features/comp/TributeExpander.js b/web_src/js/features/comp/TextExpander.js
similarity index 97%
rename from web_src/js/features/comp/TributeExpander.js
rename to web_src/js/features/comp/TextExpander.js
index 815c8e55457a0..e2840610dfd8f 100644
--- a/web_src/js/features/comp/TributeExpander.js
+++ b/web_src/js/features/comp/TextExpander.js
@@ -1,7 +1,7 @@
import {matchEmoji, matchMention} from '../../utils/match.js';
import {emojiString} from '../emoji.js';
-export function initTributeExpander(expander) {
+export function initTextExpander(expander) {
expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
if (key === ':') {
const matches = matchEmoji(text);