UBER-1028 Improve list / sublist editing (#3830)

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

common/config/rush/pnpm-lock.yaml

@@ -6608,6 +6608,14 @@ packages:
       '@tiptap/core': 2.1.11(@tiptap/pm@2.1.11)
     dev: false
 
+  /@tiptap/extension-list-keymap@2.1.12(@tiptap/core@2.1.11):
+    resolution: {integrity: sha512-f19nGaqhIZhssM2k8nYR+zcoMc7UCLcW6YCNhTXSrybUsb6SMFVob9OL7+sy1x2n5Was5IqsvyAGakLjdTEwAw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.1.11(@tiptap/pm@2.1.11)
+    dev: false
+
   /@tiptap/extension-mention@2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11)(@tiptap/suggestion@2.1.11):
     resolution: {integrity: sha512-QMHmAkhiDQEgAdUHdKRfVna0AINcbSbQCrpgwKLIHGWcpbi1zJbAPpm+xngbl0I9ZNxaMzbP4utTAzeQ92pJkw==}
     peerDependencies:
@@ -22823,7 +22831,7 @@ packages:
     dev: false
 
   file:projects/text-editor.tgz(@types/node@16.11.68)(bufferutil@4.0.7)(esbuild@0.16.17)(postcss-load-config@4.0.1)(postcss@8.4.31)(ts-node@10.9.1):
-    resolution: {integrity: sha512-A8GMRWDl/8wZvvR2RbR4ydEkDjF/NwPNJSaI8po5tAfcaq/n4a4p5lTLLTd5JfSJYdk7+ZmRiOQdZpQOg/MJ7A==, tarball: file:projects/text-editor.tgz}
+    resolution: {integrity: sha512-gFt4pWS+w2BvcKvPgGEGDjUrGAjzVk2GT49u+mb+xekNK+Efy+0hjVUioA1fgQ5imSJNjWCEZKB4eZioBlhaVA==, tarball: file:projects/text-editor.tgz}
     id: file:projects/text-editor.tgz
     name: '@rush-temp/text-editor'
     version: 0.0.0
@@ -22839,6 +22847,7 @@ packages:
       '@tiptap/extension-heading': 2.1.11(@tiptap/core@2.1.11)
       '@tiptap/extension-highlight': 2.1.11(@tiptap/core@2.1.11)
       '@tiptap/extension-link': 2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11)
+      '@tiptap/extension-list-keymap': 2.1.12(@tiptap/core@2.1.11)
       '@tiptap/extension-mention': 2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11)(@tiptap/suggestion@2.1.11)
       '@tiptap/extension-placeholder': 2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11)
       '@tiptap/extension-table': 2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11)
@@ -23095,7 +23104,7 @@ packages:
     dev: false
 
   file:projects/tracker-resources.tgz(@types/node@16.11.68)(esbuild@0.16.17)(postcss-load-config@4.0.1)(postcss@8.4.31)(ts-node@10.9.1):
-    resolution: {integrity: sha512-gc8Lofv1m1ZC0J1ATe4loePxjNQU1c836J4PHRu+brrhOSIClbUKR/weLckcxsOtrn6imVkCEs3pisrOTQ+MvA==, tarball: file:projects/tracker-resources.tgz}
+    resolution: {integrity: sha512-Ikg4KXyZO5fRqMu1KSfX76R2HmkLbG2wC0JQUTkmIOgy7K/1/mzp8kQ33se2ljNYybz6Qj2csqZhD4Ptya4DUQ==, tarball: file:projects/tracker-resources.tgz}
     id: file:projects/tracker-resources.tgz
     name: '@rush-temp/tracker-resources'
     version: 0.0.0

packages/text-editor/package.json

@@ -82,6 +82,7 @@
     "@tiptap/extension-code": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.0.4",
     "@tiptap/extension-underline": "^2.0.4",
-    "@hocuspocus/provider": "^2.5.0"
+    "@hocuspocus/provider": "^2.5.0",
+    "@tiptap/extension-list-keymap": "^2.0.4"
   }
 }

packages/text-editor/src/components/CollaboratorEditor.svelte

@@ -25,7 +25,7 @@
   import Placeholder from '@tiptap/extension-placeholder'
   import { getCurrentAccount, Markup } from '@hcengineering/core'
   import { IntlString, translate } from '@hcengineering/platform'
-  import { getPlatformColorForText, IconObjects, IconSize, themeStore } from '@hcengineering/ui'
+  import { getPlatformColorForText, IconObjects, IconSize, registerFocus, themeStore } from '@hcengineering/ui'
 
   import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
@@ -278,6 +278,8 @@
         },
         onFocus: () => {
           focused = true
+          updateFocus()
+          dispatch('focus')
         },
         onUpdate: ({ transaction }) => {
           // ignore non-document changes
@@ -308,6 +310,26 @@
   })
 
   let showDiff = true
+
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      if (visible) {
+        element?.focus()
+      }
+      return visible && element !== null
+    },
+    isFocus: () => document.activeElement === element,
+    canBlur: () => false
+  })
+  const updateFocus = () => {
+    if (focusIndex !== -1) {
+      focusManager?.setFocus(idx)
+    }
+  }
+  $: if (element) {
+    element.addEventListener('focus', updateFocus, { once: true })
+  }
 </script>
 
 <slot {editor} />

packages/text-editor/src/components/extensions.ts

@@ -12,6 +12,7 @@ import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline'
 
 import Gapcursor from '@tiptap/extension-gapcursor'
+import ListKeymap from '@tiptap/extension-list-keymap'
 
 import { AnyExtension } from '@tiptap/core'
 import Link from '@tiptap/extension-link'
@@ -77,6 +78,7 @@ export const defaultExtensions: AnyExtension[] = [
     openOnClick: true,
     HTMLAttributes: { class: 'cursor-pointer', rel: 'noopener noreferrer', target: '_blank' }
   }),
+  ListKeymap.configure({}),
   NodeUuidExtension,
   ...tableExtensions
   // ...taskListExtensions // Disable since tasks are not working properly now.