UBER-1249 Make document Todos work with Heap (#4886)

plugins/document-resources/src/components/DocumentEditor.svelte

@@ -29,7 +29,8 @@
   } from '@hcengineering/text-editor'
   import { createEventDispatcher } from 'svelte'
 
-  import ToDoNodeView from './node-view/ToDoNodeView.svelte'
+  import ToDoItemNodeView from './node-view/ToDoItemNodeView.svelte'
+  import ToDoListNodeView from './node-view/ToDoListNodeView.svelte'
 
   export let object: Document
   export let readonly = false
@@ -55,14 +56,23 @@
     }),
     TodoItemExtension.extend({
       addNodeView () {
-        return SvelteNodeViewRenderer(ToDoNodeView, { contentAs: 'li', componentProps: { object } })
+        return SvelteNodeViewRenderer(ToDoItemNodeView, {
+          contentAs: 'li',
+          contentClass: 'todo-item',
+          componentProps: { object },
+          ignoreMutation: () => true
+        })
       }
     }).configure({
       HTMLAttributes: {
         class: 'todo-item'
       }
     }),
-    TodoListExtension.configure({
+    TodoListExtension.extend({
+      addNodeView () {
+        return SvelteNodeViewRenderer(ToDoListNodeView, { ignoreMutation: () => true })
+      }
+    }).configure({
       HTMLAttributes: {
         class: 'todo-list'
       }

plugins/document-resources/src/components/node-view/ToDoItemNodeView.svelte

@@ -18,6 +18,11 @@
   const client = getClient()
   const query = createQuery()
 
+  $: todoId = node.attrs.todoid as Ref<ToDo>
+  $: userId = node.attrs.userid as Ref<Person>
+  $: checked = node.attrs.checked ?? false
+  $: readonly = !editor.isEditable || object === undefined
+
   let todo: ToDo | undefined = undefined
   $: query.query(
     time.class.ToDo,
@@ -26,15 +31,10 @@
     },
     (res) => {
       ;[todo] = res
-      syncTodo(todo)
+      void syncTodo(todo)
     }
   )
 
-  $: todoId = node.attrs.todoid as Ref<ToDo>
-  $: userId = node.attrs.userid as Ref<Person>
-  $: checked = node.attrs.checked ?? false
-  $: readonly = !editor.isEditable || object === undefined
-
   async function syncTodo (todo: ToDo | undefined): Promise<void> {
     if (todo !== undefined) {
       const todoChecked = todo.doneOn != null
@@ -59,7 +59,7 @@
     if (todo !== undefined) {
       await client.update(todo, { doneOn: todo.doneOn == null ? Date.now() : null })
     } else {
-      updateAttributes({ checked: !node.attrs.checked })
+      updateAttributes({ checked: node.attrs.checked !== true })
     }
   }
 
@@ -72,7 +72,7 @@
     const ops = client.apply('todo')
 
     if (todo !== undefined) {
-      await ops.removeDoc(todo._class, todo.space, todo._id)
+      await ops.remove(todo)
     }
 
     const id = await ops.addCollection(time.class.ProjectToDo, time.space.ToDos, object._id, object._class, 'todos', {
@@ -101,7 +101,7 @@
     })
 
     if (todo !== undefined) {
-      await client.removeDoc(todo._class, todo.space, todo._id)
+      await client.remove(todo)
     }
   }
 
@@ -164,12 +164,13 @@
           await changeAssignee(result?._id)
         }
         hovered = false
+        editor.commands.focus()
       }
     )
   }
 </script>
 
-<NodeViewWrapper data-drag-handle="">
+<NodeViewWrapper data-drag-handle="" data-type="todoItem">
   <div
     class="todo-item flex-row-top flex-gap-3"
     class:empty={node.textContent.length === 0}
@@ -197,6 +198,10 @@
 
 <style lang="scss">
   .todo-item {
+    .assignee {
+      cursor: pointer;
+    }
+
     &.unassigned {
       .assignee {
         opacity: 0;

plugins/document-resources/src/components/node-view/ToDoListNodeView.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { NodeViewContent, NodeViewWrapper } from '@hcengineering/text-editor'
+</script>
+
+<NodeViewWrapper data-drag-handle="">
+  <NodeViewContent as="ul" class="todo-list" data-type="todoList" />
+</NodeViewWrapper>