From 3111ab323403077668db7d0ea7b1a5e75d4384b2 Mon Sep 17 00:00:00 2001
From: Yasumichi Akahoshi <sekiseijuju@gmail.com>
Date: Wed, 4 Mar 2026 02:24:37 +0900
Subject: [PATCH] Add text completion (use SuggestionProvider) (#3974)

---
 .../core/helper/completion.scala.html         | 57 +++++++++++++++++++
 .../gitbucket/core/repo/editor.scala.html     |  7 +++
 .../twirl/gitbucket/core/wiki/edit.scala.html |  7 +++
 src/main/webapp/assets/common/js/editor.js    | 13 +++++
 4 files changed, 84 insertions(+)
 create mode 100644 src/main/twirl/gitbucket/core/helper/completion.scala.html

diff --git a/src/main/twirl/gitbucket/core/helper/completion.scala.html b/src/main/twirl/gitbucket/core/helper/completion.scala.html
new file mode 100644
index 000000000..4fe3a298f
--- /dev/null
+++ b/src/main/twirl/gitbucket/core/helper/completion.scala.html
@@ -0,0 +1,57 @@
+@(repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
+  completionContext: String, generateScript: Boolean = true)(implicit context: gitbucket.core.controller.Context)
+@import gitbucket.core.view.helpers
+<style>
+  @gitbucket.core.plugin.PluginRegistry().getSuggestionProviders.map { provider =>
+    @if(provider.context.contains(completionContext)){
+      @if(provider.id == "emoji") {
+        @provider.options(repository).map { case (value, label) =>
+          @Html(s"""
+            .ace_${label.replaceAll("[^a-z0-9\\-_]", "_")}::after {
+              content: '';
+              display: inline-block;
+              background-image: url("${context.path}/plugin-assets/emoji/${label}.png");
+              width: 15px;
+              height: 15px;
+              background-size: contain;
+              vertical-align: middle;
+            }"""
+          )
+        }
+      }
+    }
+  }
+</style>
+<script>
+  var mdCompleters = [];
+
+  @gitbucket.core.plugin.PluginRegistry().getSuggestionProviders.map { provider =>
+    @if(provider.context.contains(completionContext)){
+      var @provider.id = @Html(helpers.json(provider.options(repository).map { case (value, label) =>
+        Map("value" -> (s"${provider.prefix}${value}${provider.suffix}"), "label" -> label)
+      }));
+
+      var @{provider.id}Completer = {
+        triggerCharacters: [ `@provider.prefix.charAt(0)` ],
+        getCompletions: function (editor, session, pos, prefix, callback) {
+          if (session.$mode && session.$mode.$id === 'ace/mode/markdown') {
+            callback(null, @{provider.id}.map(function (table) {
+              var token = session.getTokenAt(pos.row, pos.column).value.slice(-1);
+              return {
+                caption: table.description,
+                value: token == "@provider.prefix.charAt(0)" ? table.value.replace(token, "") : table.value,
+                className: "@{provider.id}" == "emoji" ? table.label.replace(/[^a-z0-9\-_]/g, '_') : "@{provider.id}",
+                meta: "@{provider.id}"
+              };
+            }));
+          }
+        },
+        id: "@{provider.id}Completer"
+      };
+
+      mdCompleters.push(@{provider.id}Completer);
+
+      @Html(provider.additionalScript(repository))
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/main/twirl/gitbucket/core/repo/editor.scala.html b/src/main/twirl/gitbucket/core/repo/editor.scala.html
index b5868ef3d..048b79f1a 100644
--- a/src/main/twirl/gitbucket/core/repo/editor.scala.html
+++ b/src/main/twirl/gitbucket/core/repo/editor.scala.html
@@ -74,12 +74,19 @@
     </form>
     <script src='@helpers.assets("/vendors/ace/ace.js")' type="text/javascript" charset="utf-8"></script>
     <script src='@helpers.assets("/vendors/ace/ext-modelist.js")' type="text/javascript" charset="utf-8"></script>
+    <script src='@helpers.assets("/vendors/ace/ext-language_tools.js")' type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" src='@helpers.assets("/vendors/jsdifflib/difflib.js")'></script>
     <link href='@helpers.assets("/vendors/jsdifflib/diffview.css")' type="text/css" rel="stylesheet" />
+      @gitbucket.core.helper.html.completion(
+        repository        = repository,
+        completionContext = "wiki",
+        generateScript    = false 
+      )
     <script>
       const gitbucket = {
         editor: null,
         enableWikiLink: false,
+        pluginAssets: "@context.path/plugin-assets/",
         protected: @protectedBranch,
         previewTemplate: '<img src="@helpers.assets("/common/images/indicator.gif")"> Previewing...',
         previewUrl: '@helpers.url(repository)/_preview',
diff --git a/src/main/twirl/gitbucket/core/wiki/edit.scala.html b/src/main/twirl/gitbucket/core/wiki/edit.scala.html
index 8c39674a5..2826fb84d 100644
--- a/src/main/twirl/gitbucket/core/wiki/edit.scala.html
+++ b/src/main/twirl/gitbucket/core/wiki/edit.scala.html
@@ -35,12 +35,19 @@
     </form>
     <script src='@helpers.assets("/vendors/ace/ace.js")' type="text/javascript" charset="utf-8"></script>
     <script src='@helpers.assets("/vendors/ace/ext-modelist.js")' type="text/javascript" charset="utf-8"></script>
+    <script src='@helpers.assets("/vendors/ace/ext-language_tools.js")' type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" src='@helpers.assets("/vendors/jsdifflib/difflib.js")'></script>
     <link href='@helpers.assets("/vendors/jsdifflib/diffview.css")' type="text/css" rel="stylesheet" />
+      @gitbucket.core.helper.html.completion(
+        repository        = repository,
+        completionContext = "wiki",
+        generateScript    = false 
+      )
     <script>
       const gitbucket = {
         editor: null,
         enableWikiLink: true,
+        pluginAssets: "@context.path/plugin-assets/",
         protected: false,
         previewTemplate: '<img src="@helpers.assets("/common/images/indicator.gif")"> Previewing...',
         previewUrl: '@helpers.url(repository)/_preview',
diff --git a/src/main/webapp/assets/common/js/editor.js b/src/main/webapp/assets/common/js/editor.js
index 12dfd8695..6fa5d3704 100644
--- a/src/main/webapp/assets/common/js/editor.js
+++ b/src/main/webapp/assets/common/js/editor.js
@@ -291,6 +291,7 @@
             gitbucket.editor.focus();
         });
 
+        var originalCompleter = null;
 
         /**
          * A function to update the file mode of the Ace editor
@@ -302,11 +303,14 @@
                 gitbucket.editor.getSession().setMode(mode.mode);
                 if (mode.name == "markdown") {
                     markdownToolBar.style.display = "block";
+                    gitbucket.editor.completers = mdCompleters ?? [];
                 } else {
                     markdownToolBar.style.display = "none";
+                    gitbucket.editor.completers = originalCompleter ?? [];
                 }
             } else {
                     markdownToolBar.style.display = "none";
+                    gitbucket.editor.completers = originalCompleter ?? [];
             }
         };
 
@@ -325,6 +329,7 @@
         $('#editor').text($('#initial').val());
 
         // Initializing Ace editor
+        const langtools = ace.require("ace/ext/language_tools");
         gitbucket.editor = ace.edit("editor");
 
         // Initialize Ace editor keyboard handler
@@ -370,6 +375,14 @@
             }
         });
 
+        // enable auto completion
+        gitbucket.editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true
+        });
+        originalCompleter = gitbucket.editor.completers;
+
         // Initialize file mode for Ace editor
         updateFileMode();