feat: support auto completion in ruby tab

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smalruby3-gui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "GraphicaL User Interface for creating and running Smalruby 3.0 projects",
   "author": "Ruby Programming Shounendan",
   "license": "BSD-3-Clause",

src/containers/ruby-tab.jsx

@@ -19,6 +19,8 @@ import 'ace-builds/src-noconflict/theme-clouds';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/ext-language_tools';
 
+import SnippetsCompleter from './ruby-tab/snippets-completer';
+
 class RubyTab extends React.Component {
     constructor (props) {
         super(props);
@@ -87,6 +89,9 @@ class RubyTab extends React.Component {
             errors,
             markers
         } = rubyCode;
+
+        const completers = [new SnippetsCompleter()];
+
         return (
             <AceEditor
                 annotations={errors}
@@ -100,7 +105,10 @@ class RubyTab extends React.Component {
                 setOptions={{
                     tabSize: 2,
                     useSoftTabs: true,
-                    showInvisibles: true
+                    showInvisibles: true,
+                    enableAutoIndent: true,
+                    enableBasicAutocompletion: completers,
+                    enableLiveAutocompletion: true
                 }}
                 style={{
                     border: '1px solid hsla(0, 0%, 0%, 0.15)',

src/containers/ruby-tab/base-completer.js

@@ -0,0 +1,36 @@
+class BaseCompleter {
+    getCompletions () {
+        throw new Error('Not implemented');
+    }
+
+    getDocTooltip (item) {
+        if (!item.docHTML) {
+            let description = item.description;
+            let code;
+            if (item.type === 'snippet') {
+                const snippet = this.#removeSnippetVarAroundCode(item.snippet);
+                description = description || snippet;
+                code = snippet;
+            } else {
+                description = description || item.value;
+                code = item.value;
+            }
+            item.docHTML = [
+                '<b>', this.#escapeHTML(description), '</b>', '<hr></hr>',
+                '<code>', this.#escapeHTML(code), '</code>'
+            ].join('');
+        }
+    }
+
+    #escapeHTML = function (str) {
+        return (`${str}`).replace(/&/g, '&#38;').replace(/"/g, '&#34;')
+            .replace(/'/g, '&#39;')
+            .replace(/</g, '&#60;');
+    };
+
+    #removeSnippetVarAroundCode = function (snippet) {
+        return snippet.replace(/\$\{[0-9]+:?([^}]*?)\}/g, '$1');
+    };
+}
+
+export default BaseCompleter;

src/containers/ruby-tab/control-snippets.json

@@ -0,0 +1,54 @@
+{
+    "sleep": {
+        "snippet": "sleep(${1:1})",
+        "description": "(1) 秒待つ"
+    },
+    "times": {
+        "snippet": "${1:10}.times do\n${2}\nend\n",
+        "description": "(10) 回繰り返す"
+    },
+    "loop": {
+        "snippet": "loop do\n${1}\nend\n",
+        "description": "ずっと"
+    },
+    "if": {
+        "snippet": "if ${1:false}\n${2}\nend\n",
+        "description": "もし < > なら"
+    },
+    "if-else": {
+        "snippet": "if ${1:false}\n${2}\nelse\n${3}\nend\n",
+        "description": "もし < > なら、でなければ"
+    },
+    "wait-until": {
+        "snippet": "wait until ${1:false}",
+        "description": "< > まで待つ"
+    },
+    "until": {
+        "snippet": "until ${1:false}\n${2}\nend\n",
+        "description": "< > まで繰り返す"
+    },
+    "stop-all": {
+        "snippet": "stop(\"${1:all}\")",
+        "description": "[すべてを止める▼]"
+    },
+    "stop-this": {
+        "snippet": "stop(\"${1:this script}\")",
+        "description": "[このスクリプトを止める▼]"
+    },
+    "stop-other": {
+        "snippet": "stop(\"${1:other scripts in sprite}\")",
+        "description": "[スプライトの他のスクリプトを止める▼]"
+    },
+    "when_start_as_a_clone": {
+        "snippet": "when_start_as_a_clone do\n${1}\nend\n",
+        "description": "クローンされたとき"
+    },
+    "create_clone": {
+        "snippet": "create_clone(\"${1:_myself_}\")",
+        "description": "(自分自身▼) のクローンを作る"
+    },
+    "delete_this_clone": {
+        "snippet": "delete_this_clone",
+        "description": "このクローンを削除する"
+    }
+}

src/containers/ruby-tab/events-snippets.json

@@ -0,0 +1,34 @@
+{
+    "when_flag_clicked": {
+        "snippet": "when_flag_clicked do\n${1}\nend\n",
+        "description": "旗が押されたとき"
+    },
+    "when_key_pressed": {
+        "snippet": "when_key_pressed(\"${1:space}\") do\n${2}\nend\n",
+        "description": "[スペース▼] キーが押されたとき"
+    },
+    "when_clicked": {
+        "snippet": "when_clicked do\n${1}\nend\n",
+        "description": "このスプライトが押されたとき"
+    },
+    "when_backdrop_switches": {
+        "snippet": "when_backdrop_switches(\"${1:背景1}\") do\n${2}\nend\n",
+        "description": "背景が [背景1▼] になったとき"
+    },
+    "when_greater_than": {
+        "snippet": "when_greater_than(\"${1:loudness}\", ${2:10}) do\n${3}\nend\n",
+        "description": "[音量▼] > (10) のとき"
+    },
+    "when_receive": {
+        "snippet": "when_receive(\"${1:メッセージ1}\") do\n${2}\nend\n",
+        "description": "[メッセージ1▼] を受け取ったとき"
+    },
+    "broadcast": {
+        "snippet": "broadcast(\"${1:メッセージ1}\")",
+        "description": "(メッセージ1) を送る"
+    },
+    "broadcast_and_wait": {
+        "snippet": "broadcast_and_wait(\"${1:メッセージ1}\")",
+        "description": "(メッセージ1) を送って待つ"
+    }
+}

src/containers/ruby-tab/looks-snippets.json

@@ -0,0 +1,86 @@
+{
+    "say-for": {
+        "snippet": "say(\"${1:こんにちは!}\", ${2:2})",
+        "description": "(こんにちは!) と (2) 秒言う"
+    },
+    "say": {
+        "snippet": "say(\"${1:こんにちは!}\")",
+        "description": "(こんにちは!) と言う"
+    },
+    "think-for": {
+        "snippet": "think(\"${1:うーん...}\", ${2:2})",
+        "description": "(うーん...) と (2) 秒考える"
+    },
+    "think": {
+        "snippet": "think(\"${1:うーん...}\")",
+        "description": "(うーん...) と考える"
+    },
+    "switch_costume": {
+        "snippet": "switch_costume(\"${1:コスチューム1}\")",
+        "description": "コスチュームを (コスチューム1▼) にする"
+    },
+    "next_costume": {
+        "snippet": "next_costume",
+        "description": "次のコスチュームにする"
+    },
+    "switch_backdrop": {
+        "snippet": "switch_backdrop(\"${1:背景1}\")",
+        "description": "背景を (背景1▼) にする"
+    },
+    "next_backdrop": {
+        "snippet": "next_backdrop",
+        "description": "次の背景にする"
+    },
+    "size+=": {
+        "snippet": "self.size += ${1:10}",
+        "description": "大きさを (10) ずつ変える"
+    },
+    "size=": {
+        "snippet": "self.size = ${1:100}",
+        "description": "大きさを (100) %にする"
+    },
+    "change_effect_by": {
+        "snippet": "change_effect_by(\"${1:color}\", ${2:25})",
+        "description": "[色▼] の効果を (25) ずつかえる"
+    },
+    "set_effect": {
+        "snippet": "set_effect(\"${1:color}\", ${2:0})",
+        "description": "[色▼] の効果を (0) にする"
+    },
+    "clear_graphic_effects": {
+        "snippet": "clear_graphic_effects",
+        "description": "画像効果をなくす"
+    },
+    "show": {
+        "snippet": "show",
+        "description": "表示する"
+    },
+    "hide": {
+        "snippet": "hide",
+        "description": "隠す"
+    },
+    "go_layers": {
+        "snippet": "go_layers(${1:1}, \"${2:forward}\")",
+        "description": "(1) 層 [手前に出す▼]"
+    },
+    "costume_number": {
+        "snippet": "costume_number",
+        "description": "コスチュームの [番号▼]"
+    },
+    "costume_name": {
+        "snippet": "costume_name",
+        "description": "コスチュームの [名前▼]"
+    },
+    "backdrop_number": {
+        "snippet": "backdrop_number",
+        "description": "背景の [番号▼]"
+    },
+    "backdrop_name": {
+        "snippet": "backdrop_name",
+        "description": "背景の [名前▼]"
+    },
+    "size": {
+        "snippet": "size",
+        "description": "大きさ"
+    }
+}

src/containers/ruby-tab/mesh-snippets.json

@@ -0,0 +1,6 @@
+{
+    "mesh.sensor_value": {
+        "snippet": "mesh.sensor_value(\"${1: }\")",
+        "description": "( ▼) センサーの値"
+    }
+}

src/containers/ruby-tab/microbit-more-snippets.json

@@ -0,0 +1,6 @@
+{
+    "microbit_more.when_button_is": {
+        "snippet": "microbit_more.when_button_is(\"${1:A}\", \"${2:down}\") do\n${3}\nend\n",
+        "description": "ボタン [A▼] が [押された▼] とき"
+    }
+}

src/containers/ruby-tab/microbit-snippets.json

@@ -0,0 +1,38 @@
+{
+    "microbit.when_button_pressed": {
+        "snippet": "microbit.when_button_pressed(\"${1:A}\") do\n${2}\nend\n",
+        "description": "ボタン (A▼) が押されたとき"
+    },
+    "microbit.button_pressed?": {
+        "snippet": "microbit.button_pressed?(\"${1:A}\")",
+        "description": "ボタン (A▼) が押された"
+    },
+    "microbit.when": {
+        "snippet": "microbit.when(\"${1:moved}\") do\n${2}\nend\n",
+        "description": "(動いた▼) とき"
+    },
+    "microbit.display_text": {
+        "snippet": "microbit.display_text(\"${1:こんにちは!}\")",
+        "description": "(こんにちは!) を表示する"
+    },
+    "microbit.display": {
+        "snippet": "microbit.display(\n  \"${1:.1.1.}\",\n  \"${2:1.1.1}\",\n  \"${3:1...1}\",\n  \"${4:.1.1.}\",\n  \"${5:..1..}\"\n)\n",
+        "description": "(♡▼) を表示する"
+    },
+    "microbit.when_tilted": {
+        "snippet": "microbit.when_tilted(\"${1:any}\") do\n${2}\nend\n",
+        "description": "(どれかの向き▼) に傾いたとき"
+    },
+    "microbit.tilted?": {
+        "snippet": "microbit.tilted?(\"${1:any}\")",
+        "description": "(どれかの向き▼) に傾いた"
+    },
+    "microbit.tilt_angle": {
+        "snippet": "microbit.tilt_angle(\"${1:front}\")",
+        "description": "(前▼) 方向の傾き"
+    },
+    "microbit.when_pin_connected": {
+        "snippet": "microbit.when_pin_connected(${1:0}) do\n${2}\nend\n",
+        "description": "ピン (0▼) がつながったとき"
+    }
+}