feat(DownView): ✨ Option to enable/disable linewrapping (fix #188)

src/BreadcrumbsSettingTab.ts

@@ -666,6 +666,21 @@ export class BCSettingTab extends PluginSettingTab {
           })
       );
 
+    const downViewDetails: HTMLDetailsElement = containerEl.createEl("details");
+    downViewDetails.createEl("summary", { text: "Down View" });
+
+    new Setting(downViewDetails)
+      .setName("Enable line wrapping")
+      .setDesc(
+        "Make the items in the down view line wrap when there isn't enough space (On). Off makes them overflow off the screen."
+      )
+      .addToggle((toggle) =>
+        toggle.setValue(settings.downViewWrap).onChange(async (value) => {
+          settings.downViewWrap = value;
+          await plugin.saveSettings();
+        })
+      );
+
     const writeBCsToFileDetails: HTMLDetailsElement =
       containerEl.createEl("details");
     writeBCsToFileDetails.createEl("summary", {

src/Components/Down.svelte

@@ -80,7 +80,7 @@
 <div class="BC-downs">
   {#each lines as line}
     {#if line.length > 1}
-      <div>
+      <div style={settings.downViewWrap ? "" : "white-space: nowrap;"}>
         <pre>{line[0] + "-"}</pre>
         <span
           class="internal-link"
@@ -103,9 +103,9 @@
   .BC-downs {
     padding-left: 5px;
   }
-  .BC-downs > div {
+  /* .BC-downs > div {
     white-space: nowrap;
-  }
+  } */
   pre {
     display: inline;
   }

src/constants.ts

@@ -141,8 +141,9 @@ export const DEFAULT_SETTINGS: BCSettings = {
   CSVPaths: "",
   debugMode: "WARN",
   defaultView: true,
-  dvWaitTime: 5000,
+  downViewWrap: false,
   dotsColour: "#000000",
+  dvWaitTime: 5000,
   fieldSuggestor: true,
   filterImpliedSiblingsOfDifferentTypes: false,
   limitWriteBCCheckboxStates: {},

src/interfaces.ts

@@ -16,6 +16,7 @@ export interface BCSettings {
   dvWaitTime: number;
   debugMode: DebugLevel;
   defaultView: boolean;
+  downViewWrap: boolean;
   dotsColour: string;
   fieldSuggestor: boolean;
   filterImpliedSiblingsOfDifferentTypes: boolean;