From 6017113e1e829d3ccaf6f2ab32cae4f269864f82 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sat, 16 Dec 2023 03:34:30 +0300
Subject: [PATCH] added auto-level headings -- should these replace
 manual-level headings???

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 experiments/outline-editor/editor.css | 23 ++++++++-------
 experiments/outline-editor/editor.js  |  6 ++++
 experiments/outline-editor/index.html | 41 +++++++++++++++++----------
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css
index 384a53c..c9d0660 100755
--- a/experiments/outline-editor/editor.css
+++ b/experiments/outline-editor/editor.css
@@ -372,39 +372,42 @@
 
 :host .outline,
 .editor .outline {
-	.heading-1,
-	.heading-2,
-	.heading-3,
-	.heading-4,
-	.heading-5,
-	.heading-6 {
+	.heading {
 		margin-top: 1rem;
 
 		&>.text {
 			font-weight: bold;
+			border-bottom: solid 1px rgba(0,0,0,0.1);
 		}
 	}
-	.heading-1>.text,
-	.heading-2>.text,
-	.heading-3>.text {
-		border-bottom: solid 1px rgba(0,0,0,0.1);
+	.auto.heading .auto.heading .auto.heading .auto.heading>.text,
+	.heading-4>.text,
+	.heading-5>.text,
+	.heading-6>.text {
+		border-bottom: none;
 	}
 
+	.auto.heading>.text,
 	.heading-1>.text {
 		--font-size: 2.5em;
 	}
+	.auto.heading .auto.heading>.text,
 	.heading-2>.text {
 		--font-size: 1.9em;
 	}
+	.auto.heading .auto.heading .auto.heading>.text,
 	.heading-3>.text {
 		--font-size: 1.5em;
 	}
+	.auto.heading .auto.heading .auto.heading .auto.heading>.text,
 	.heading-4>.text {
 		--font-size: 1.3em;
 	}
+	.auto.heading .auto.heading .auto.heading .auto.heading .auto.heading>.text,
 	.heading-5>.text {
 		--font-size: 1.1em;
 	}
+	.auto.heading .auto.heading .auto.heading .auto.heading .auto.heading .auto.heading>.text,
 	.heading-6>.text {
 		--font-size: 1em;
 	}
diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js
index 2104519..d7fa431 100755
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@@ -229,6 +229,12 @@ var blocks = {
 			.replace(/^(?<!\\)###\s+(.*)$/, this.style(editor, elem, ['heading', 'heading-3']))
 			.replace(/^(?<!\\)##\s+(.*)$/, this.style(editor, elem, ['heading', 'heading-2']))
 			.replace(/^(?<!\\)#\s+(.*)$/, this.style(editor, elem, ['heading', 'heading-1']))
+			// XXX EXPERIMENTAL
+			// XXX rename css class to "heading"
+			// XXX chose either this or manual headings...
+			// XXX if this is used change syntax to '#'
+			//.replace(/^(?<!\\)#\s+(.*)$/, this.style(editor, elem, ['heading']))
+			.replace(/^(?<!\\)@\s+(.*)$/, this.style(editor, elem, ['heading', 'auto']))
 			// style: list...
 			//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
 			.replace(/^\s*(.*)(?<!\\):\s*$/, this.style(editor, elem, 'list'))
diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html
index 90a13b7..470bac6 100755
--- a/experiments/outline-editor/index.html
+++ b/experiments/outline-editor/index.html
@@ -141,14 +141,6 @@ var setup = function(){
         |text|text|text|
   -
 - ## ToDo:
-  - FEATURE dunamic headings -- level depends on number of headings above..c
-    - syntax:
-	  ```
-	  @ Heading
-	  ```
-    - would be logical to:
-	  - only first top level heading is level 1
-	  - subsequent top level headings all level 2
   - Time to think about a standalone client -- at least to edit own notes as a test...
     - _also this would be a nice opportunity to start the move to a newer electron version_
   - Might be a good idea to think how to avoid the constant selections on focus...
@@ -158,7 +150,6 @@ var setup = function(){
     - DONE set/unset class
     - add animation
     - make this extensible from client...
-  - Q: Make the heading level depend on its depth??
   - Q: When moving up/down between nodes do we want to place the caret relative to markdown (current) or to view? (see: `CARET_V_MOVE`)
   - Q: Should tables be text-based markdown or higher-level?
     collapsed:: true
@@ -267,6 +258,18 @@ var setup = function(){
       - `<editable/>` -- field marker
       - each child node will copy the template and allow editing of only fields
       - not clear how to handle template changes...
+  - DONE FEATURE dynamic headings -- level depends on number of headings above...
+    - DONE Experimental syntax:
+      ```
+      @ Heading
+      ```
+    - Target syntax:
+      ```
+      # Heading
+      ```
+    - would be logical to (???):
+      - only first top level heading is level 1
+      - subsequent top level headings all level 2
   - DONE `.json(..)`, `.data(..)`, ... should be signature compatible with `.get(..)` (???)
   - DONE Q: Should we use `HTMLTextAreaElement.autoUpdateSize(..)` or handle it globally in setup???
     collapsed:: true
@@ -462,12 +465,20 @@ var setup = function(){
     - The formatting mostly adheres to the markdown spec with a few minor differences
     -
     - Styles:
-      - # Heading 1
-      - ## Heading 2
-      - ### Heading 3
-      - #### Heading 4
-      - ##### Heading 5
-      - ###### Heading 6
+      - Automatic Headings
+        - @ Heading 1
+          - @ Heading 2
+            - @ Heading 3
+              - @ Heading 4
+                - @ Heading 5
+                  - @ Heading 6
+      - Manual Headings
+        - # Heading 1
+        - ## Heading 2
+        - ### Heading 3
+        - #### Heading 4
+        - ##### Heading 5
+        - ###### Heading 6
       - Text
       - Lists::
         - bullet: