space-indicator first draft

src/components/editor/Space.svelte

@@ -5,6 +5,7 @@
     import InsertionPointView from './InsertionPointView.svelte';
     import type { InsertionPoint } from '../../edit/Drag';
     import { EXPLICIT_TAB_TEXT, TAB_TEXT } from '../../parser/Spaces';
+    import { spaceIndicator } from '../../db/Database';
 
     export let token: Token;
     export let space: string;
@@ -19,20 +20,31 @@
     $: beforeSpaces =
         insertionIndex === undefined
             ? []
-            : render(space.substring(0, insertionIndex), true);
+            : render(space.substring(0, insertionIndex), true, $spaceIndicator);
     // If there's no insertion, just render the space, otherwise render the right side of the insertion.
     $: afterSpaces = render(
         insertionIndex === undefined ? space : space.substring(insertionIndex),
-        true
+        true,
+        $spaceIndicator,
     );
 
     $: additionalSpaces =
-        additional.length === 0 ? [] : render(additional, false);
+        additional.length === 0
+            ? []
+            : render(additional, false, $spaceIndicator);
 
-    function render(text: string, explicit: boolean): string[] {
+    function render(
+        text: string,
+        explicit: boolean,
+        indicator: boolean,
+    ): string[] {
         return (
             explicit
-                ? text.replaceAll(' ', '·').replaceAll('\t', EXPLICIT_TAB_TEXT)
+                ? indicator
+                    ? text
+                          .replaceAll(' ', '·')
+                          .replaceAll('\t', EXPLICIT_TAB_TEXT)
+                    : text.replaceAll(' ', '\xa0').replaceAll('\t', TAB_TEXT)
                 : text.replaceAll(' ', '\xa0').replaceAll('\t', TAB_TEXT)
         ).split('\n');
     }
@@ -42,21 +54,23 @@
     This monstrosity renders space, accounting for insertion points. We key on space
     to work around a Svelte defect that doesn't correctly update changes in text nodes.
 -->
-{#key space}
-    <span class="space" role="none" data-id={token.id}
-        ><span role="none" class="before"
-            >{#each beforeSpaces as s, index}{#if index > 0}<span
-                        ><br class="break" /></span
-                    >{/if}{#if s === ''}&ZeroWidthSpace;{:else}{s}{/if}{:else}&ZeroWidthSpace;{/each}{#if insertion}<InsertionPointView
-                />{/if}</span
-        ><span role="none" class="after"
-            >{#each afterSpaces as s, index}{#if index > 0}<span
-                        ><br class="break" /></span
-                    >{/if}{s}{/each}{#each additionalSpaces as s, index}{#if index > 0}<span
-                        ><br class="break" /></span
-                    >{/if}{#if s === ''}&ZeroWidthSpace;{:else}{s}{/if}{/each}</span
-        ></span
-    >
+{#key $spaceIndicator}
+    {#key space}
+        <span class="space" role="none" data-id={token.id}
+            ><span role="none" class="before"
+                >{#each beforeSpaces as s, index}{#if index > 0}<span
+                            ><br class="break" /></span
+                        >{/if}{#if s === ''}&ZeroWidthSpace;{:else}{s}{/if}{:else}&ZeroWidthSpace;{/each}{#if insertion}<InsertionPointView
+                    />{/if}</span
+            ><span role="none" class="after"
+                >{#each afterSpaces as s, index}{#if index > 0}<span
+                            ><br class="break" /></span
+                        >{/if}{s}{/each}{#each additionalSpaces as s, index}{#if index > 0}<span
+                            ><br class="break" /></span
+                        >{/if}{#if s === ''}&ZeroWidthSpace;{:else}{s}{/if}{/each}</span
+            ></span
+        >
+    {/key}
 {/key}
 
 <style>

src/components/settings/Settings.svelte

@@ -9,6 +9,7 @@
         mic,
         Settings,
         dark,
+        spaceIndicator,
     } from '../../db/Database';
     import Arrangement from '../../db/Arrangement';
     import Options from '../widgets/Options.svelte';
@@ -208,6 +209,19 @@
                 modes={['☼', '☽', '☼/☽']}
             />
         </p>
+        <p
+        ><Mode
+            descriptions={$locales.get(
+                (l) => l.ui.dialog.settings.mode.space,
+            )}
+            choice={$spaceIndicator === false ? 1 : 0}
+            select={(choice) =>
+                Settings.setSpace(
+                    choice === 0 ? true : false,
+                )}
+            modes={['✓', '✗']}
+        />
+    </p>
     </Dialog>
 </div>
 

src/db/Database.ts

@@ -233,6 +233,7 @@ export const locales = DB.Locales.locales;
 export const writingLayout = Settings.settings.writingLayout.value;
 export const camera = Settings.settings.camera.value;
 export const dark = Settings.settings.dark.value;
+export const spaceIndicator = Settings.settings.space.value;
 export const mic = Settings.settings.mic.value;
 export const blocks = Settings.settings.blocks.value;
 export const localized = Settings.settings.localized.value;

src/db/SettingsDatabase.ts

@@ -23,6 +23,7 @@ import { DarkSetting } from './DarkSetting';
 import { doc, getDoc } from 'firebase/firestore';
 import { firestore } from './firebase';
 import { CreatorCollection } from './CreatorDatabase';
+import { SpaceSetting } from './SpaceSetting';
 
 /** The schema of the record written to the creators collection. */
 export type SettingsSchemaV1 = {
@@ -63,6 +64,7 @@ export default class SettingsDatabase {
         blocks: BlocksSetting,
         localized: LocalizedSetting,
         dark: DarkSetting,
+        space: SpaceSetting,
     };
 
     /** A derived store based on animation factor */
@@ -164,10 +166,18 @@ export default class SettingsDatabase {
         this.settings.dark.set(this.database, dark);
     }
 
+    setSpace(space: boolean) {
+        this.settings.space.set(this.database, space);
+    }
+
     getDark() {
         return this.settings.dark.get();
     }
 
+    getSpace() {
+        return this.settings.space.get();
+    }
+
     setBlocks(on: boolean) {
         this.settings.blocks.set(this.database, on);
     }

src/db/SpaceSetting.ts

@@ -0,0 +1,9 @@
+import Setting from './Setting';
+
+export const SpaceSetting = new Setting<boolean>(
+    'space',
+    false,
+    true,
+    (value) => typeof value === 'boolean',
+    (current, value) => current === value
+);

src/locale/UITexts.ts

@@ -584,6 +584,8 @@ type UITexts = {
                 dark: ModeText<[string, string, string]>;
                 /** The writing layout direction */
                 writing: ModeText<[string, string, string]>;
+                /** The space_indicator on/off mode */
+                space: ModeText<[string, string]>;
             };
             options: {
                 /** The label for the microphone drop down */

src/locale/en-US.json

@@ -4179,6 +4179,13 @@
                             "use device setting"
                         ]
                     },
+                    "space": {
+                        "label": "space indicator",
+                        "modes": [
+                            "show space and tab indicators explicitly",
+                            "do not show space and tab indicators"
+                        ]
+                    },
                     "writing": {
                         "label": "writing layout",
                         "modes": [

static/locales/es-MX/es-MX.json

@@ -4220,6 +4220,13 @@
                             "usar configuración del dispositivo"
                         ]
                     },
+                    "space": {
+                        "label": "$! indicador de espacio",
+                        "modes": [
+                            "$! abierto",
+                            "$! cerrado"
+                        ]
+                    },
                     "writing": {
                         "label": "diseño de escritura",
                         "modes": [

static/locales/example/example.json

@@ -2479,6 +2479,10 @@
                         "label": "$?",
                         "modes": ["$?", "$?", "$?"]
                     },
+                    "space": {
+                        "label": "$?",
+                        "modes": ["$?","$?"]
+                    },
                     "writing": {
                         "label": "$?",
                         "modes": ["$?", "$?", "$?"]

static/locales/zh-CN/zh-CN.json

@@ -4032,6 +4032,13 @@
                         "label": "主题",
                         "modes": ["浅色", "深色", "使用设备设置"]
                     },
+                    "space": {
+                        "label": "$! 空格指示器",
+                        "modes": [
+                            "$! 开启",
+                            "$! 关闭"
+                        ]
+                    },
                     "writing": {
                         "label": "写作布局",
                         "modes": [

static/schemas/Locale.json

@@ -8420,6 +8420,10 @@
                           "$ref": "#/definitions/ModeText%3C%5Bstring%2Cstring%2Cstring%2Cstring%5D%3E",
                           "description": "The project tile layout mode"
                         },
+                        "space": {
+                          "$ref": "#/definitions/ModeText%3C%5Bstring%2Cstring%5D%3E",
+                          "description": "The space_indicator on/off mode"
+                        },
                         "writing": {
                           "$ref": "#/definitions/ModeText%3C%5Bstring%2Cstring%2Cstring%5D%3E",
                           "description": "The writing layout direction"
@@ -8429,7 +8433,8 @@
                         "layout",
                         "animate",
                         "dark",
-                        "writing"
+                        "writing",
+                        "space"
                       ],
                       "type": "object"
                     },