From e003fb29fb2e15ce2e1afd03ac298cfc6641733e Mon Sep 17 00:00:00 2001 From: Alexander Onnikov Date: Wed, 6 Mar 2024 14:39:25 +0700 Subject: [PATCH] UBER-1249 Make document Todos work with Heap (#4886) --- .../node-view/svelte-node-view-renderer.ts | 25 ++++++++++++++++++- .../components/node-view/svelte-renderer.ts | 4 ++- .../src/components/DocumentEditor.svelte | 16 +++++++++--- ...odeView.svelte => ToDoItemNodeView.svelte} | 25 +++++++++++-------- .../node-view/ToDoListNodeView.svelte | 7 ++++++ 5 files changed, 62 insertions(+), 15 deletions(-) rename plugins/document-resources/src/components/node-view/{ToDoNodeView.svelte => ToDoItemNodeView.svelte} (94%) create mode 100644 plugins/document-resources/src/components/node-view/ToDoListNodeView.svelte diff --git a/packages/text-editor/src/components/node-view/svelte-node-view-renderer.ts b/packages/text-editor/src/components/node-view/svelte-node-view-renderer.ts index 0d8655b17a..5260db70cb 100644 --- a/packages/text-editor/src/components/node-view/svelte-node-view-renderer.ts +++ b/packages/text-editor/src/components/node-view/svelte-node-view-renderer.ts @@ -89,7 +89,9 @@ class SvelteNodeView extends NodeView= this.getPos() + this.node.nodeSize) { + if (this.renderer.props.selected === true) { + return + } + + this.selectNode() + } else { + if (this.renderer.props.selected !== true) { + return + } + + this.deselectNode() + } + } + destroy (): void { this.renderer.destroy() - this.contentDOMElement = null this.editor.off('update', this.handleEditorUpdate.bind(this)) + this.editor.off('selectionUpdate', this.handleSelectionUpdate.bind(this)) + this.contentDOMElement = null } } diff --git a/packages/text-editor/src/components/node-view/svelte-renderer.ts b/packages/text-editor/src/components/node-view/svelte-renderer.ts index fd22530696..51cc5f57cb 100644 --- a/packages/text-editor/src/components/node-view/svelte-renderer.ts +++ b/packages/text-editor/src/components/node-view/svelte-renderer.ts @@ -20,17 +20,19 @@ export type SvelteRendererComponent = typeof SvelteComponent | ComponentType export interface SvelteRendererOptions { element: HTMLElement - props?: any + props?: Record context?: any } export class SvelteRenderer { private readonly component: SvelteComponent element: HTMLElement + props: Record constructor (component: SvelteRendererComponent, { element, props, context }: SvelteRendererOptions) { this.element = element this.element.classList.add('svelte-renderer') + this.props = props ?? {} const options = { target: element, props, context } const Component = component diff --git a/plugins/document-resources/src/components/DocumentEditor.svelte b/plugins/document-resources/src/components/DocumentEditor.svelte index 74825a07c3..62e4e8e4f6 100644 --- a/plugins/document-resources/src/components/DocumentEditor.svelte +++ b/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' } diff --git a/plugins/document-resources/src/components/node-view/ToDoNodeView.svelte b/plugins/document-resources/src/components/node-view/ToDoItemNodeView.svelte similarity index 94% rename from plugins/document-resources/src/components/node-view/ToDoNodeView.svelte rename to plugins/document-resources/src/components/node-view/ToDoItemNodeView.svelte index cebcff75c3..1a479f137e 100644 --- a/plugins/document-resources/src/components/node-view/ToDoNodeView.svelte +++ b/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 + $: userId = node.attrs.userid as Ref + $: 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 - $: userId = node.attrs.userid as Ref - $: checked = node.attrs.checked ?? false - $: readonly = !editor.isEditable || object === undefined - async function syncTodo (todo: ToDo | undefined): Promise { 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() } ) } - +
.todo-item { + .assignee { + cursor: pointer; + } + &.unassigned { .assignee { opacity: 0; diff --git a/plugins/document-resources/src/components/node-view/ToDoListNodeView.svelte b/plugins/document-resources/src/components/node-view/ToDoListNodeView.svelte new file mode 100644 index 0000000000..4fcae829a8 --- /dev/null +++ b/plugins/document-resources/src/components/node-view/ToDoListNodeView.svelte @@ -0,0 +1,7 @@ + + + + +