some fixes

why is plaintext editing such a nightmare...

css/breaks.css

@@ -2,62 +2,96 @@
     height: 0.25rem;
 }
 
-.vb-1 {
-    width: 0.25rem;
-}
-
 .hb-2 {
     height: 0.5rem;
 }
 
-.vb-2 {
-    width: 0.5rem;
-}
-
 .hb-3 {
     height: 0.75rem;
 }
 
-.vb-3 {
-    width: 0.75rem;
-}
-
 .hb-4 {
     height: 1rem;
 }
 
-.vb-4 {
-    width: 1rem;
-}
-
 .hb-5 {
     height: 1.25rem;
 }
 
-.vb-5 {
-    width: 1.25rem;
-}
-
 .hb-6 {
     height: 1.5rem;
 }
 
-.vb-6 {
-    width: 1.5rem;
-}
-
 .hb-7 {
     height: 2rem;
 }
 
-.vb-7 {
-    width: 2rem;
-}
-
 .hb-8 {
     height: 3rem;
 }
 
+
+.vb-1 {
+    width: 0.25rem;
+}
+
+.vb-2 {
+    width: 0.5rem;
+}
+
+.vb-3 {
+    width: 0.75rem;
+}
+
+.vb-4 {
+    width: 1rem;
+}
+
+.vb-5 {
+    width: 1.25rem;
+}
+
+.vb-6 {
+    width: 1.5rem;
+}
+
+.vb-7 {
+    width: 2rem;
+}
+
 .vb-8 {
     width: 3rem;
 }
+
+
+.gap-1 {
+    gap: 0.25rem;
+}
+
+.gap-2 {
+    gap: 0.5rem;
+}
+
+.gap-3 {
+    gap: 0.75rem;
+}
+
+.gap-4 {
+    gap: 1rem;
+}
+
+.gap-5 {
+    gap: 1.25rem;
+}
+
+.gap-6 {
+    gap: 1.5rem;
+}
+
+.gap-7 {
+    gap: 2rem;
+}
+
+.gap-8 {
+    gap: 3rem;
+}

css/helpers.css

@@ -167,4 +167,36 @@ b {
 
 *:disabled, [disabled] {
     opacity: 0.3;
+}
+
+.maxHeight-1 {
+    max-height: 100px;
+}
+
+.maxHeight-2 {
+    max-height: 200px;
+}
+
+.maxHeight-3 {
+    max-height: 300px;
+}
+
+.maxHeight-4 {
+    max-height: 400px;
+}
+
+.maxHeight-5 {
+    max-height: 500px;
+}
+
+.maxHeight-6 {
+    max-height: 600px;
+}
+
+.maxHeight-7 {
+    max-height: 700px;
+}
+
+.maxHeight-8 {
+    max-height: 800px;
 }

css/lists.css

@@ -12,7 +12,7 @@
     flex-direction: column;
 }
 
-.listHorizontal, .listVertical, .divList {
+.listHorizontal, .listVertical {
     display: flex;
     flex-wrap: wrap;
     padding: 0;
@@ -31,7 +31,8 @@
 }
 
 .divList {
-    align-items: start;
+    flex-direction: column;
+    display: flex;
 }
 
 .nowrap {

css/markdown.css

@@ -1,8 +1,13 @@
 
-.markdown p {
+.markdown p, .markdownRawText {
     margin-bottom: 16px;
 }
 
+.markdownRawText {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
 .markdown table {
     margin-bottom: 16px;
 }

js/contentEditableHelpers.js

@@ -36,17 +36,20 @@ class ContentEditableHelpers {
             event.preventDefault();
 
             // Get pasted data via clipboard API
-            let text = (event.clipboardData || window.clipboardData).getData('text');
-
-            // Insert text only at the current cursor position
+            const text = (event.clipboardData || window.clipboardData).getData('text');
             document.execCommand('insertText', false, text);
         });
     }
 
     // Function to check and convert elements with contenteditable-type="plainTextOnly"
     static checkAndConvertPlainTextOnly(element) {
         if (element.getAttribute('contenteditable-type') === 'plainTextOnly') {
-            ContentEditableHelpers.convertToPlainText(element);
+            if (isFirefox) {
+                ContentEditableHelpers.convertToPlainText(element);
+            } else {
+                console.log(element, element.getAttribute('contenteditable'));
+               element.setAttribute('contenteditable', 'plaintext-only');
+            }
         }
     }
 

js/coreHelpers.js

@@ -135,4 +135,14 @@ function wrapElement(element, wrapper) {
 
     // Start observing the document element for added nodes (the body)
     observer.observe(document.documentElement, { childList: true, subtree: true });
-})();
+})();
+
+function onBodyCreated(callback) {
+    if (document.body) {
+        callback();
+    } else {
+        window.addEventListener('body-created', e => callback());
+    }
+}
+
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');