WIP: Fixed some issues with list widget line height. BUGS: multiple issues with list items (cannot add items to environments from toolbar), somewhat fixed toolbar in locating the cursor when adding items to editor (still buggy and doesn't work for all nestings), nesting environments works but editing nested environments does not update them in source, adding commands in visual editor now possible, but still problematic with math blocks $$, experimental edit environment on clicking header (still doesn't work as expected), commands can now be edited but nesting doesn't show during edit, invironment does not visually display commands up until switching to latex source and back.

Author: fabawi

src/styles.css

@@ -251,34 +251,48 @@
 
 /* List widget styles */
 .latex-visual-list {
-  margin: 10px 0;
+  margin: 0;
+  padding: 0;
+  line-height: 1.4;
 }
 
 .latex-visual-list-element {
-  margin: 10px 0;
-  padding-left: 40px; /* Increased padding for better spacing from line numbers */
+  margin: 0;
+  padding-left: 40px;
+  line-height: 1.4;
 }
 
 .latex-list-item {
-  margin: 5px 0;
+  margin: 0;
+  padding: 0;
   cursor: text;
-  position: relative; /* Added for better control */
+  position: relative;
+  line-height: 1.4;
+  min-height: 1.4em;
 }
 
 .latex-description-item {
-  margin: 8px 0;
-  position: relative; /* Added for better control */
+  margin: 0;
+  padding: 0;
+  position: relative;
+  line-height: 1.4;
 }
 
 .latex-description-item dt {
   font-weight: bold;
   cursor: text;
-  margin-bottom: 2px;
+  margin: 0;
+  padding: 0;
+  line-height: 1.4;
+  min-height: 1.4em;
 }
 
 .latex-description-item dd {
-  margin-left: 20px;
+  margin: 0 0 0 20px;
+  padding: 0;
   cursor: text;
+  line-height: 1.4;
+  min-height: 1.4em;
 }
 
 .latex-list-item:focus,

src/visual-codemirror/widgets/list-widget.ts

@@ -23,6 +23,7 @@ export class ListWidget extends BaseLatexWidget {
     const wrapper = document.createElement('div');
     wrapper.className = `latex-visual-list latex-list-${this.currentEnvName}`;
     wrapper.style.margin = '0';
+    wrapper.style.padding = '0';
     wrapper.style.lineHeight = '1.4';
 
     this.preserveLineHeight(wrapper, this.token.latex);
@@ -37,8 +38,9 @@ export class ListWidget extends BaseLatexWidget {
     const listTag = this.getListTag();
     const list = document.createElement(listTag);
     list.className = 'latex-visual-list-element';
-    list.style.margin = '10px 0';
+    list.style.margin = '0';
     list.style.paddingLeft = '40px';
+    list.style.lineHeight = '1.4';
 
     const items = this.parseListItems();
 
@@ -103,8 +105,11 @@ export class ListWidget extends BaseLatexWidget {
     li.className = 'latex-list-item';
     li.contentEditable = 'true';
     li.style.outline = 'none';
-    li.style.margin = '5px 0';
+    li.style.margin = '0';
+    li.style.padding = '0';
     li.style.cursor = 'text';
+    li.style.lineHeight = '1.4';
+    li.style.minHeight = '1.4em';
     li.dataset.itemIndex = index.toString();
 
     if (this.currentEnvName === 'description' && content.startsWith('[')) {
@@ -130,7 +135,8 @@ export class ListWidget extends BaseLatexWidget {
   private createDescriptionItem(content: string, index: number, view: EditorView): HTMLElement {
     const wrapper = document.createElement('div');
     wrapper.className = 'latex-description-item';
-    wrapper.style.margin = '5px 0';
+    wrapper.style.margin = '0';
+    wrapper.style.lineHeight = '1.4';
     wrapper.dataset.itemIndex = index.toString();
 
     let term = '';
@@ -147,14 +153,21 @@ export class ListWidget extends BaseLatexWidget {
     dt.style.fontWeight = 'bold';
     dt.style.outline = 'none';
     dt.style.cursor = 'text';
+    dt.style.margin = '0';
+    dt.style.padding = '0';
+    dt.style.lineHeight = '1.4';
+    dt.style.minHeight = '1.4em';
     dt.textContent = term;
     dt.dataset.itemPart = 'term';
 
     const dd = document.createElement('dd');
     dd.contentEditable = 'true';
-    dd.style.marginLeft = '20px';
+    dd.style.margin = '0 0 0 20px';
+    dd.style.padding = '0';
     dd.style.outline = 'none';
     dd.style.cursor = 'text';
+    dd.style.lineHeight = '1.4';
+    dd.style.minHeight = '1.4em';
     dd.textContent = description;
     dd.dataset.itemPart = 'description';