Make space element visible

This enables customization of colors and display attributes.

Resolves #21

src/components/output/PS1Variable.vue

@@ -173,11 +173,11 @@ function generatePS1(elements: PromptElement[]): string {
   const outputElements: string[] = [];
 
   elements.forEach((element) => {
-    if (!element.type.printable) {
+    if (!element.type.visible) {
       outputElements.push(element.type.char(element.parameters));
       // skip any handling of escape sequences for invisible elements as they are not affected by them
-      // for instance, if two elements with identical properties are separated by only whitespace, we do not need to
-      // insert any reset escape codes in between them
+      // for instance, if two elements with identical properties are separated by only invisible elements, we do not
+      // need to insert any reset escape codes in between them
       return;
     }
 

src/components/properties/ElementProperties.vue

@@ -15,7 +15,7 @@
         />
       </label>
     </div>
-    <div class="properties_color" v-if="element.type.printable">
+    <div class="properties_color" v-if="element.type.visible">
       <h3>Colors</h3>
       <br />
       <Popper placement="left-start" arrow>
@@ -54,7 +54,7 @@
         </template>
       </Popper>
     </div>
-    <div class="properties_attributes" v-if="element.type.printable">
+    <div class="properties_attributes" v-if="element.type.visible">
       <h3>Display Attributes</h3>
       <br />
       <label for="attribute-bold">

src/lib/enum/promptElementType.ts

@@ -51,9 +51,9 @@ export class PromptElementType {
    * Whether the prompt element is visible.
    *
    * This is used in order to decide whether a prompt element's display attributes, such as color, can be configured.
-   * Whitespace elements are not considered printable in this regard.
+   * Whitespace elements are considered visible if they can have a background (e.g. space, but not newline).
    */
-  printable: boolean;
+  visible: boolean;
 
   /**
    * Whether the prompt element displays the output of a command.
@@ -83,15 +83,15 @@ export class PromptElementType {
     name: string,
     char: string | ParameterizedString,
     parameters: Parameter[],
-    printable: boolean,
+    visible: boolean,
     command: boolean,
     description: string,
     preview: string | ParameterizedString,
   ) {
     this.name = name;
     this.char = typeof char === 'string' ? () => char : char;
     this.parameters = parameters;
-    this.printable = printable;
+    this.visible = visible;
     this.command = command;
     this.description = description;
     this.preview = typeof preview === 'string' ? () => preview : preview;
@@ -239,7 +239,7 @@ export const PROMPT_ELEMENT_TYPES = [
     'Value of an environment variable.',
     (args) => ((args.variable ?? '').trim().length === 0 ? '' : `${args.variable} value`),
   ),
-  new PromptElementType('␣', ' ', [], false, false, 'Space.', ' '),
+  new PromptElementType('␣', ' ', [], true, false, 'Space.', ' '),
   new PromptElementType('~', '~', [], true, false, 'Tilde.', '~'),
   new PromptElementType('!', '!', [], true, false, 'Exclamation mark.', '!'),
   new PromptElementType('?', '?', [], true, false, 'Question mark.', '?'),