UBERF-8077 Editor left menu fixes (#6566)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

packages/theme/styles/_text-editor.scss

@@ -10,6 +10,7 @@
 .text-editor-view {
   // overflow-y: auto;
   color: var(--theme-text-primary-color);
+  margin: 0.25rem 0;
 
   .suggestion {
     padding-left: 0.25rem;
@@ -63,6 +64,7 @@
 
   p {
     margin-block-start: 0.5rem;
+    margin-block-end: 0.5rem;
   }
 
   >*+* {
@@ -72,6 +74,8 @@
 
   ul,
   ol {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
     margin-right: .25rem;
     margin-left: .75rem;
     padding: 0;
@@ -88,8 +92,7 @@
 
   ul[data-type="todoList"] {
     list-style: none;
-    margin: 0;
+    margin-left: 0;
-    padding: 0;
 
     li {
       margin: 0;

plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte

@@ -161,15 +161,7 @@
       editor?.commands.insertTable(options)
     },
     insertCodeBlock: () => {
-      editor?.commands.insertContent(
+      editor?.commands.setCodeBlock()
-        {
-          type: 'codeBlock',
-          content: [{ type: 'text', text: ' ' }]
-        },
-        {
-          updateSelection: false
-        }
-      )
     },
     insertContent: (content) => {
       editor?.commands.insertContent(content)
@@ -341,28 +333,18 @@
             targetItem instanceof MouseEvent ? getEventPositionElement(targetItem) : getPopupPositionElement(targetItem)
         }
 
-        // We need to trigger it asynchronously in order for the editor to finish its focus event
+        // addTableHandler opens popup so the editor loses focus
-        // Otherwise, it hoggs the focus from the popup and keyboard navigation doesn't work
+        // so in the callback we need to refocus again
-        setTimeout(() => {
+        void addTableHandler((options: { rows?: number, cols?: number, withHeaderRow?: boolean }) => {
-          addTableHandler(editor.commands.insertTable, position)
+          editor.chain().insertTable(options).focus(pos).run()
-        })
+        }, position)
         break
       }
       case 'code-block':
-        // For some reason .setCodeBlock doesnt work in our case
+        editor.commands.insertContentAt(pos, { type: 'codeBlock' })
-        editor.commands.insertContent(
-          {
-            type: 'codeBlock',
-            content: [{ type: 'text', text: ' ' }]
-          },
-          {
-            updateSelection: false
-          }
-        )
-        editor.commands.focus(pos, { scrollIntoView: false })
         break
       case 'todo-list':
-        editor.commands.toggleTaskList()
+        editor.chain().insertContentAt(pos, { type: 'paragraph' }).toggleTaskList().run()
         break
       case 'separator-line':
         editor.commands.setHorizontalRule()

plugins/text-editor-resources/src/components/extension/leftMenu.ts

@@ -45,10 +45,12 @@ function posAtLeftMenuElement (view: EditorView, leftMenuElement: HTMLElement, o
   })
 
   if (position === null) {
-    return -1
+    return 0
   }
 
-  return position.inside >= 0 ? position.inside : position.pos
+  const pos = position.inside >= 0 ? position.inside : position.pos
+  const $pos = view.state.doc.resolve(pos)
+  return $pos.depth === 0 ? $pos.pos : $pos.before($pos.depth)
 }
 
 function LeftMenu (options: LeftMenuOptions): Plugin {
@@ -106,7 +108,6 @@ function LeftMenu (options: LeftMenuOptions): Plugin {
           (val) => {
             if (leftMenuElement === null) return
             const pos = posAtLeftMenuElement(view, leftMenuElement, offsetX)
-
             void options.handleSelect(val, pos, e)
           }
         )