MML Editor: Disable soft tabs.

MML Editor: Add `Show Invisibles` option to show spaces, tabs and CR/LF codes.
digital-sound-antiques · May 25, 2024 · 953647e · 953647e
1 parent bfaab2d
commit 953647e
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,8 @@
-# 1.8.0 (2023/02/03)
+# 1.9.0 (2024/05/25)
+- MML Editor: Disable soft tabs.
+- MML Editor: Add `Show Invisibles` option to show spaces, tabs and CR/LF codes.
+
+# 1.8.0 (2024/02/03)
 - Install ServiceWorker so that MSXplay works as a PWA.
 
 # 1.7.5 (2023/12/25)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "msxplay-js",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "",
   "type": "module",
   "engines": {

diff --git a/public/editor.html b/public/editor.html
@@ -372,6 +372,15 @@
               </select>
             </td>
           </tr>
+          <tr>
+            <td><label for="show-invisibles"><span lang="ja">空白や改行を表示</span><span lang="en">Show Invisibles</span></label></td>
+            <td>
+              <select name="show-invisibles" onchange="onShowInvisibleChange(event)">
+                <option value="true">On</option>
+                <option value="false">Off</option>
+              </select>
+            </td>
+          </tr>
         </table>
       </div>
       <div class="button-area">

diff --git a/public/js/ace-defines.js b/public/js/ace-defines.js
@@ -293,6 +293,9 @@
   .ace_mgsc .ace_gutter-active-line {
     background-color: rgba(0,0,0,0.071);
   }
+  .ace_mgsc .ace_invisible {
+    color: #bcd;
+  }
   .ace_mgsc .ace_comment {
     color: #888;
   }
@@ -379,6 +382,9 @@
   .ace_mgsc_dark .ace_gutter-active-line {
     background-color: rgba(255,255,255,0.14);
   }
+  .ace_mgsc_dark .ace_invisible {
+    color: #678;
+  }
   .ace_mgsc_dark .ace_comment {
     color: #999;
   }

diff --git a/public/js/editor.js b/public/js/editor.js
@@ -134,6 +134,7 @@ function loadEditorOptions() {
     theme: LIGHT_THEME_PATH,
     fontSize: 12,
     wrap: "free", // "free" | "off"
+    showInvisibles: false,
   };
   const options = JSON.parse(window.localStorage.getItem(EDITOR_OPTIONS_KEY) || "{}");
   return {
@@ -144,12 +145,14 @@ function loadEditorOptions() {
 
 function saveEditorOptions() {
   const options = editor.getOptions();
+  console.log(options);
   window.localStorage.setItem(
     EDITOR_OPTIONS_KEY,
     JSON.stringify({
       theme: options["theme"],
       fontSize: options["fontSize"],
       wrap: options["wrap"],
+      showInvisibles: options["showInvisibles"],
     })
   );
 }
@@ -164,11 +167,13 @@ function createAceEditor() {
     editor.$blockScrolling = Infinity;
     editor.getSession().setUseWrapMode(true);
     editor.setShowPrintMargin(false);
+    editor.setDisplayIndentGuides(true);
     editor.resize(true);
     editor.setOptions({
       mode: "ace/mode/mgsc",
       useWorker: false,
       indentedSoftWrap: false,
+      useSoftTabs: false,
       ...loadEditorOptions(),
     });
     editor.on("change", function () {
@@ -791,6 +796,8 @@ function openSettings() {
   fontSel.value = editor.getOption("fontSize");
   const wrapSel = document.querySelector("#settings select[name='wrap']");
   wrapSel.value = editor.getOption("wrap");
+  const showInvisiblesSel = document.querySelector("#settings select[name='show-invisibles']");
+  showInvisiblesSel.value = editor.getOption("showInvisibles").toString();
 
   showDialog("settings", (value) => {
     if (value == "reset") {
@@ -819,6 +826,12 @@ function onWrapChange(event) {
   saveEditorOptions();
 }
 
+function onShowInvisibleChange(event) {
+  const showInvisibles = event.srcElement.value == "true";
+  editor.setOption("showInvisibles", showInvisibles);
+  saveEditorOptions();
+}
+
 function resetSettings() {
   localStorage.removeItem(EDITOR_OPTIONS_KEY);
   editor.setOptions(loadEditorOptions());