From 4cdb4b2ffc44ea15c05a14bec62d4244728ed1f9 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Thu, 5 Oct 2023 01:13:42 +0700
Subject: [PATCH 1/8] update documents inline comments extensions

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/CollaboratorEditor.svelte  | 49 ++++-----
 .../src/components/TextEditor.svelte          | 21 +---
 .../components/TextEditorStyleToolbar.svelte  |  2 +-
 .../src/components/extension/inlinePopup.ts   | 16 +++
 .../extension/inlineStyleToolbar.ts           | 99 ++++++++++++++-----
 .../src/components/extension/nodeHighlight.ts | 49 +--------
 .../src/components/extension/nodeUuid.ts      | 16 ++-
 packages/text-editor/src/index.ts             |  7 ++
 packages/theme/styles/_colors.scss            |  5 +-
 packages/theme/styles/_text-editor.scss       | 10 +-
 10 files changed, 155 insertions(+), 119 deletions(-)
 create mode 100644 packages/text-editor/src/components/extension/inlinePopup.ts

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 4b75f4997e2..99ae772a645 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -35,7 +35,7 @@
   import { calculateDecorations } from './diff/decorations'
   import { defaultEditorAttributes } from './editor/editorProps'
   import { completionConfig, defaultExtensions } from './extensions'
-  import { InlineStyleToolbar } from './extension/inlineStyleToolbar'
+  import { InlineStyleToolbarExtension } from './extension/inlineStyleToolbar'
   import { NodeUuidExtension } from './extension/nodeUuid'
   import StyleButton from './StyleButton.svelte'
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
@@ -47,7 +47,6 @@
   export let token: string
   export let collaboratorURL: string
 
-  export let isFormatting = true
   export let buttonSize: IconSize = 'small'
   export let focusable: boolean = false
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
@@ -90,7 +89,6 @@
 
   let editor: Editor
   let inlineToolbar: HTMLElement
-  let showInlineToolbar = false
 
   let placeHolderStr: string = ''
 
@@ -144,6 +142,23 @@
 
   export function takeSnapshot (snapshotId: string) {
     provider.copyContent(documentId, snapshotId)
+
+  }
+
+  export function unregisterPlugin (nameOrPluginKey: string | PluginKey) {
+    if (!editor) {
+      return
+    }
+
+    editor.unregisterPlugin(nameOrPluginKey)
+  }
+
+  export function registerPlugin (plugin: Plugin) {
+    if (!editor) {
+      return
+    }
+
+    editor.registerPlugin(plugin)
   }
 
   let needFocus = false
@@ -201,6 +216,7 @@
   })
 
   $: updateEditor(editor, field, comparedVersion)
+  $: if (editor) dispatch('editor', editor)
 
   onMount(() => {
     ph.then(() => {
@@ -211,10 +227,10 @@
         extensions: [
           ...defaultExtensions,
           Placeholder.configure({ placeholder: placeHolderStr }),
-          InlineStyleToolbar.configure({
+          InlineStyleToolbarExtension.configure({
             element: inlineToolbar,
-            getEditorElement: () => element,
-            isShown: () => !readonly && showInlineToolbar
+            isSupported: () => !readonly,
+            isSelectionOnly: () => false
           }),
           Collaboration.configure({
             document: ydoc,
@@ -247,22 +263,14 @@
         onFocus: () => {
           focused = true
         },
-        onUpdate: ({ editor, transaction }) => {
-          showInlineToolbar = false
-
+        onUpdate: ({ transaction }) => {
           // ignore non-document changes
           if (!transaction.docChanged) return
 
-          // TODO this is heavy and should be replaced with more lightweight event
-          dispatch('content', editor.getHTML())
-
           // ignore non-local changes
           if (isChangeOrigin(transaction)) return
 
           dispatch('update')
-        },
-        onSelectionUpdate: () => {
-          showInlineToolbar = false
         }
       })
 
@@ -283,16 +291,11 @@
     }
   })
 
-  function onEditorClick () {
-    if (!editor.isEmpty) {
-      showInlineToolbar = true
-    }
-  }
-
   let showDiff = true
 </script>
 
-<slot />
+<slot {editor} />
+
 {#if visible}
   {#if comparedVersion !== undefined || $$slots.tools}
     <div class="ref-container" class:autoOverflow>
@@ -344,7 +347,7 @@
 
   <div class="ref-container" class:autoOverflow>
     <div class="textInput" class:focusable>
-      <div class="select-text" style="width: 100%;" on:mousedown={onEditorClick} bind:this={element} />
+      <div class="select-text" style="width: 100%;" bind:this={element} />
     </div>
   </div>
 {/if}
diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
index 59c43c860e0..e8666b8110a 100644
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/packages/text-editor/src/components/TextEditor.svelte
@@ -28,7 +28,7 @@
   import { themeStore } from '@hcengineering/ui'
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
   import { TextFormatCategory } from '../types'
-  import { InlineStyleToolbar } from './extension/inlineStyleToolbar'
+  import { InlineStyleToolbarExtension } from './extension/inlineStyleToolbar'
   import { defaultEditorAttributes } from './editor/editorProps'
 
   export let content: string = ''
@@ -77,7 +77,6 @@
   let needFocus = false
   let focused = false
   let posFocus: FocusPosition | undefined = undefined
-  let showContextMenu = false
   let textEditorToolbar: HTMLElement
 
   export function focus (position?: FocusPosition): void {
@@ -137,10 +136,10 @@
           ...(supportSubmit ? [Handle] : []), // order important
           Placeholder.configure({ placeholder: placeHolderStr }),
           ...extensions,
-          InlineStyleToolbar.configure({
+          InlineStyleToolbarExtension.configure({
             element: textEditorToolbar,
-            getEditorElement: () => element,
-            isShown: () => showContextMenu
+            isSupported: () => true,
+            isSelectionOnly: () => false
           })
         ],
         parseOptions: {
@@ -160,12 +159,8 @@
         },
         onUpdate: () => {
           content = editor.getHTML()
-          showContextMenu = false
           dispatch('value', content)
           dispatch('update', content)
-        },
-        onSelectionUpdate: () => {
-          showContextMenu = false
         }
       })
     })
@@ -177,12 +172,6 @@
     }
   })
 
-  function onEditorClick () {
-    if (!editor.isEmpty) {
-      showContextMenu = true
-    }
-  }
-
   /**
    * @public
    */
@@ -209,7 +198,7 @@
     }}
   />
 </div>
-<div class="select-text" style="width: 100%;" on:mousedown={onEditorClick} bind:this={element} />
+<div class="select-text" style="width: 100%;" bind:this={element} />
 
 <style lang="scss">
   .formatPanel {
diff --git a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
index aa759d23879..4c2ecb09261 100644
--- a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
+++ b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
@@ -330,7 +330,7 @@
       disabled={textEditor.view.state.selection.empty}
       showTooltip={{ label: action.label }}
       on:click={() => {
-        dispatch('action', action.id)
+        dispatch('action', { action: action.id, editor: textEditor })
       }}
     />
   {/each}
diff --git a/packages/text-editor/src/components/extension/inlinePopup.ts b/packages/text-editor/src/components/extension/inlinePopup.ts
new file mode 100644
index 00000000000..b344591c92a
--- /dev/null
+++ b/packages/text-editor/src/components/extension/inlinePopup.ts
@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core'
+import BubbleMenu, { BubbleMenuOptions } from '@tiptap/extension-bubble-menu'
+
+export const InlinePopupExtension: Extension<BubbleMenuOptions> = BubbleMenu.extend({
+  addOptions () {
+    return {
+      ...this.parent?.(),
+      pluginKey: 'inline-popup',
+      element: null,
+      tippyOptions: {
+        maxWidth: '38rem',
+        appendTo: () => document.body
+      }
+    }
+  }
+})
diff --git a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
index 042985644a1..7cb43efee64 100644
--- a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
+++ b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
@@ -1,48 +1,86 @@
-import { Extension, isTextSelection } from '@tiptap/core'
-import BubbleMenu, { BubbleMenuOptions } from '@tiptap/extension-bubble-menu'
+import { Editor, Extension, isTextSelection } from '@tiptap/core'
+import { BubbleMenuOptions } from '@tiptap/extension-bubble-menu'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { InlinePopupExtension } from './inlinePopup'
 
-type InlineStyleToolbarOptions = BubbleMenuOptions & {
-  getEditorElement: () => HTMLElement | null | undefined
-  isShown?: () => boolean
+export type InlineStyleToolbarOptions = BubbleMenuOptions & {
+  isSupported: () => boolean
+  isSelectionOnly?: () => boolean
 }
 
-export const InlineStyleToolbar = Extension.create<InlineStyleToolbarOptions>({
-  defaultOptions: {
-    pluginKey: 'inline-style-toolbar',
-    element: null,
-    tippyOptions: {
-      maxWidth: '38rem',
-      appendTo: () => document.body
-    },
-    getEditorElement: () => null
+export interface InlineStyleToolbarStorage {
+  isShown: boolean
+}
+
+const handleFocus = (editor: Editor, options: InlineStyleToolbarOptions, storage: InlineStyleToolbarStorage): void => {
+  if (!options.isSupported()) {
+    return
+  }
+
+  if (editor.isEmpty) {
+    return
+  }
+
+  if (options.isSelectionOnly?.() === true && editor.view.state.selection.empty) {
+    return
+  }
+
+  storage.isShown = true
+}
+
+export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOptions, InlineStyleToolbarStorage>({
+  pluginKey: new PluginKey('inline-style-toolbar'),
+  addProseMirrorPlugins () {
+    const options = this.options
+    const storage = this.storage
+    const editor = this.editor
+
+    const plugins = [
+      ...(this.parent?.() ?? []),
+      new Plugin({
+        key: new PluginKey('inline-style-toolbar-click-plugin'),
+        props: {
+          handleClick () {
+            handleFocus(editor, options, storage)
+          }
+        }
+      })
+    ]
+
+    return plugins
+  },
+  addStorage () {
+    return {
+      isShown: false
+    }
   },
   addExtensions () {
     const options: InlineStyleToolbarOptions = this.options
 
     return [
-      BubbleMenu.configure({
+      InlinePopupExtension.configure({
         ...options,
-        // to override shouldShow behaviour a little
-        // I need to copypaste original function and make a little change
-        // with showContextMenu falg
         shouldShow: ({ editor, view, state, oldState, from, to }) => {
-          const editorElement = options.getEditorElement()
-          // For some reason shouldShow might be called after dismount and
-          // after destroing the editor. We should handle this just no to have
-          // any errors in runtime
-          if (editorElement === null || editorElement === undefined) {
+          if (!this.options.isSupported()) {
             return false
           }
 
-          if (!editor.isEditable) {
+          if (editor.isDestroyed || !editor.isEditable) {
             return false
           }
 
-          const isShown = options.isShown?.() ?? false
-          if (isShown) {
+          if (this.storage.isShown) {
             return true
           }
 
+          // For some reason shouldShow might be called after dismount and
+          // after destroing the editor. We should handle this just no to have
+          // any errors in runtime
+          const editorElement = editor.view.dom
+          if (editorElement === null || editorElement === undefined) {
+            return false
+          }
+
           // When clicking on a element inside the bubble menu the editor "blur" event
           // is called and the bubble menu item is focussed. In this case we should
           // consider the menu as part of the editor and keep showing the menu
@@ -67,5 +105,14 @@ export const InlineStyleToolbar = Extension.create<InlineStyleToolbarOptions>({
         }
       })
     ]
+  },
+  onFocus () {
+    handleFocus(this.editor, this.options, this.storage)
+  },
+  onSelectionUpdate () {
+    this.storage.isShown = false
+  },
+  onUpdate () {
+    this.storage.isShown = false
   }
 })
diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index bbca722b264..fda438c4f3b 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -1,9 +1,8 @@
-import { Extension, Range, getMarkRange, mergeAttributes } from '@tiptap/core'
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+import { Extension, mergeAttributes } from '@tiptap/core'
 import { NodeUuidExtension, NodeUuidOptions } from './nodeUuid'
 
 export enum NodeHighlightType {
-  INFO = 'info',
+  WARNING = 'warning',
   ADD = 'add',
   DELETE = 'delete'
 }
@@ -12,51 +11,13 @@ export interface NodeHighlightExtensionOptions extends NodeUuidOptions {
   isHighlightModeOn: () => boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-function isRange (range: Range | undefined | null | void): range is Range {
-  return range !== null && range !== undefined
-}
-
 /**
  * Extension allows to highlight nodes based on uuid
  */
 export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
   Extension.create<NodeHighlightExtensionOptions>({
-    addProseMirrorPlugins () {
-      const options = this.options
-      const plugins = [
-        ...(this.parent?.() ?? []),
-        new Plugin({
-          key: new PluginKey('handle-node-highlight-click-plugin'),
-          props: {
-            handleClick (view, pos) {
-              if (!options.isHighlightModeOn()) {
-                return
-              }
-              const { schema, doc, tr } = view.state
-
-              const range = getMarkRange(doc.resolve(pos), schema.marks[NodeUuidExtension.name])
-
-              if (!isRange(range)) {
-                return false
-              }
-
-              const { from, to } = range
-              const [$start, $end] = [doc.resolve(from), doc.resolve(to)]
-
-              view.dispatch(tr.setSelection(new TextSelection($start, $end)))
-
-              return true
-            }
-          }
-        })
-      ]
-
-      return plugins
-    },
-
     addExtensions () {
-      const options = this.options
+      const options: NodeHighlightExtensionOptions = this.options
 
       return [
         NodeUuidExtension.extend({
@@ -77,8 +38,8 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
                   if (options.isHighlightModeOn()) {
                     const type = options.getNodeHighlightType(uuid)
 
-                    if (type === NodeHighlightType.INFO) {
-                      classAttrs.class = 'text-editor-highlighted-node-info'
+                    if (type === NodeHighlightType.WARNING) {
+                      classAttrs.class = 'text-editor-highlighted-node-warning'
                     } else if (type === NodeHighlightType.ADD) {
                       classAttrs.class = 'text-editor-highlighted-node-add'
                     } else if (type === NodeHighlightType.DELETE) {
diff --git a/packages/text-editor/src/components/extension/nodeUuid.ts b/packages/text-editor/src/components/extension/nodeUuid.ts
index 1014564e0e0..6f55c7fc0c5 100644
--- a/packages/text-editor/src/components/extension/nodeUuid.ts
+++ b/packages/text-editor/src/components/extension/nodeUuid.ts
@@ -73,6 +73,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
 
   addProseMirrorPlugins () {
     const options = this.options
+    const storage = this.storage
     const plugins = [
       ...(this.parent?.() ?? []),
       new Plugin({
@@ -83,10 +84,14 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
 
             const attrs = getMarkAttributes(view.state, schema.marks[NAME])
             const nodeUuid = attrs?.[NAME]
-
             if (nodeUuid !== null || nodeUuid !== undefined) {
               options.onNodeClicked?.(nodeUuid)
             }
+
+            if (storage.activeNodeUuid !== nodeUuid) {
+              storage.activeNodeUuid = nodeUuid
+              options.onNodeSelected?.(storage.activeNodeUuid)
+            }
           }
         }
       })
@@ -118,16 +123,19 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     const { $head } = this.editor.state.selection
 
     const marks = $head.marks()
-    this.storage.activeNodeUuid = null
+    let activeNodeUuid = null
     if (marks.length > 0) {
       const nodeUuidMark = this.editor.schema.marks[NAME]
       const activeNodeUuidMark = marks.find((mark) => mark.type === nodeUuidMark)
 
       if (activeNodeUuidMark !== undefined && activeNodeUuidMark !== null) {
-        this.storage.activeNodeUuid = activeNodeUuidMark.attrs[NAME]
+        activeNodeUuid = activeNodeUuidMark.attrs[NAME]
       }
     }
 
-    this.options.onNodeSelected?.(this.storage.activeNodeUuid)
+    if (this.storage.activeNodeUuid !== activeNodeUuid) {
+      this.storage.activeNodeUuid = activeNodeUuid
+      this.options.onNodeSelected?.(this.storage.activeNodeUuid)
+    }
   }
 })
diff --git a/packages/text-editor/src/index.ts b/packages/text-editor/src/index.ts
index 871e8bee4b3..0c16b00f367 100644
--- a/packages/text-editor/src/index.ts
+++ b/packages/text-editor/src/index.ts
@@ -27,6 +27,7 @@ export { default as StyledTextArea } from './components/StyledTextArea.svelte'
 export { default as StyledTextBox } from './components/StyledTextBox.svelte'
 export { default as StyledTextEditor } from './components/StyledTextEditor.svelte'
 export { default as TextEditor } from './components/TextEditor.svelte'
+export { default as TextEditorStyleToolbar } from './components/TextEditorStyleToolbar.svelte'
 export { default } from './plugin'
 export * from './types'
 
@@ -41,5 +42,11 @@ export {
   NodeHighlightType
 } from './components/extension/nodeHighlight'
 export { NodeUuidCommands, NodeUuidExtension, NodeUuidOptions, NodeUuidStorage } from './components/extension/nodeUuid'
+export { InlinePopupExtension } from './components/extension/inlinePopup'
+export {
+  InlineStyleToolbarExtension,
+  InlineStyleToolbarOptions,
+  InlineStyleToolbarStorage
+} from './components/extension/inlineStyleToolbar'
 
 export { textEditorId }
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 299a1aece02..214eea980b1 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -73,8 +73,9 @@
   --highlight-red-hover: #ff967e;
   --highlight-red-press: #f96f50bd;
 
-  --text-editor-highlighted-node-info-background-color: #F2D7AE;
-  --text-editor-highlighted-node-info-border-color: #DE9B35;
+  --text-editor-highlighted-node-warning-active-background-color: #F2D7AE;
+  --text-editor-highlighted-node-warning-background-color: #F8EBD7;
+  --text-editor-highlighted-node-warning-border-color: #DE9B35;
 
   --text-editor-highlighted-node-add-background-color: #DAEDDC;
   --text-editor-highlighted-node-add-font-color: #1C4220;
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index 6da29a594de..3dcad27036a 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/packages/theme/styles/_text-editor.scss
@@ -108,9 +108,13 @@
   object-fit: contain;
 }
 
-.text-editor-highlighted-node-info {
-  background-color: var(--text-editor-highlighted-node-info-background-color);
-  border-bottom: 0.0625rem solid var(--text-editor-highlighted-node-info-border-color);
+.text-editor-highlighted-node-warning {
+  background-color: var(--text-editor-highlighted-node-warning-background-color);
+  border-bottom: 0.0625rem solid var(--text-editor-highlighted-node-warning-border-color);
+
+  &.active, &:hover {
+    background-color: var(--text-editor-highlighted-node-warning-active-background-color);
+  }
 }
 
 .text-editor-highlighted-node-delete {

From e82359599808734a3a8fae82d14ac379b25d9338 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Fri, 6 Oct 2023 22:27:25 +0700
Subject: [PATCH 2/8] update qms documents inline comments

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/CollaboratorEditor.svelte  |  17 ++-
 .../components/TextEditorStyleToolbar.svelte  |   2 +-
 .../extension/inlineStyleToolbar.ts           |   5 +-
 .../src/components/extension/nodeHighlight.ts |  92 +++++++++-----
 .../src/components/extension/nodeUuid.ts      | 112 +++++++++++-------
 packages/text-editor/src/index.ts             |   2 +-
 6 files changed, 148 insertions(+), 82 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 99ae772a645..bb3e37edfa4 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -36,14 +36,13 @@
   import { defaultEditorAttributes } from './editor/editorProps'
   import { completionConfig, defaultExtensions } from './extensions'
   import { InlineStyleToolbarExtension } from './extension/inlineStyleToolbar'
-  import { NodeUuidExtension } from './extension/nodeUuid'
   import StyleButton from './StyleButton.svelte'
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
 
   export let documentId: string
   export let readonly = false
   export let visible = true
-
+  
   export let token: string
   export let collaboratorURL: string
 
@@ -98,7 +97,7 @@
 
   const dispatch = createEventDispatcher()
 
-  export function getHTML (): string | undefined {
+  export function getHTML(): string | undefined {
     if (editor) {
       return editor.getHTML()
     }
@@ -164,7 +163,7 @@
   let needFocus = false
 
   let focused = false
-  export function focus (): void {
+  export function focus(): void {
     needFocus = true
   }
 
@@ -182,7 +181,7 @@
   let _decoration = DecorationSet.empty
   let oldContent = ''
 
-  function updateEditor (editor?: Editor, field?: string, comparedVersion?: Markup | ArrayBuffer): void {
+  function updateEditor(editor?: Editor, field?: string, comparedVersion?: Markup | ArrayBuffer): void {
     const r = calculateDecorations(editor, oldContent, field, comparedVersion)
     if (r !== undefined) {
       oldContent = r.oldContent
@@ -197,12 +196,12 @@
   }
 
   const DecorationExtension = Extension.create({
-    addProseMirrorPlugins () {
+    addProseMirrorPlugins() {
       return [
         new Plugin({
           key: new PluginKey('diffs'),
           props: {
-            decorations (state) {
+            decorations(state) {
               updateDecorations()
               if (showDiff) {
                 return _decoration
@@ -294,7 +293,7 @@
   let showDiff = true
 </script>
 
-<slot {editor} />
+<slot editor={editor} />
 
 {#if visible}
   {#if comparedVersion !== undefined || $$slots.tools}
@@ -339,7 +338,7 @@
         needFocus = true
       }}
       on:action={(event) => {
-        dispatch('action', { action: event.detail, editor })
+        dispatch('action', event.detail)
         needFocus = true
       }}
     />
diff --git a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
index 4c2ecb09261..a4085e6c36d 100644
--- a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
+++ b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
@@ -330,7 +330,7 @@
       disabled={textEditor.view.state.selection.empty}
       showTooltip={{ label: action.label }}
       on:click={() => {
-        dispatch('action', { action: action.id, editor: textEditor })
+        dispatch('action', {action: action.id, editor: textEditor})
       }}
     />
   {/each}
diff --git a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
index 7cb43efee64..fc78f50a8bc 100644
--- a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
+++ b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
@@ -42,7 +42,7 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
         props: {
           handleClick () {
             handleFocus(editor, options, storage)
-          }
+          },
         }
       })
     ]
@@ -103,7 +103,8 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
 
           return true
         }
-      })
+      }),
+      
     ]
   },
   onFocus () {
diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index fda438c4f3b..460d643af47 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -1,5 +1,6 @@
-import { Extension, mergeAttributes } from '@tiptap/core'
+import { Extension, Range, getMarkRange, mergeAttributes } from '@tiptap/core'
 import { NodeUuidExtension, NodeUuidOptions } from './nodeUuid'
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
 
 export enum NodeHighlightType {
   WARNING = 'warning',
@@ -9,6 +10,31 @@ export enum NodeHighlightType {
 export interface NodeHighlightExtensionOptions extends NodeUuidOptions {
   getNodeHighlightType: (uuid: string) => NodeHighlightType | undefined | null
   isHighlightModeOn: () => boolean
+  isAutoSelect?: () => boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+function isRange (range: Range | undefined | null | void): range is Range {
+  return range !== null && range !== undefined
+}
+
+const generateAttributes = (uuid: string, options: NodeHighlightExtensionOptions) => {
+  const parentAttrs = options.onNodeAttributes?.(uuid) ?? {}
+  const classAttrs: { class?: string } = {}
+
+  if (options.isHighlightModeOn()) {
+    const type = options.getNodeHighlightType(uuid)
+
+    if (type === NodeHighlightType.WARNING) {
+      classAttrs.class = 'text-editor-highlighted-node-warning'
+    } else if (type === NodeHighlightType.ADD) {
+      classAttrs.class = 'text-editor-highlighted-node-add'
+    } else if (type === NodeHighlightType.DELETE) {
+      classAttrs.class = 'text-editor-highlighted-node-delete'
+    }
+  }
+
+  return mergeAttributes(parentAttrs, classAttrs)
 }
 
 /**
@@ -16,42 +42,50 @@ export interface NodeHighlightExtensionOptions extends NodeUuidOptions {
  */
 export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
   Extension.create<NodeHighlightExtensionOptions>({
-    addExtensions () {
+    addProseMirrorPlugins () {
+      const options = this.options
+      const plugins = [
+        ...(this.parent?.() ?? []),
+        new Plugin({
+          key: new PluginKey('handle-node-highlight-click-plugin'),
+          props: {
+            handleClick (view, pos) {
+              if (!options.isHighlightModeOn() || !options.isAutoSelect?.()) {
+                return
+              }
+              const { schema, doc, tr } = view.state
+
+              const range = getMarkRange(doc.resolve(pos), schema.marks[NodeUuidExtension.name])
+
+              if (!isRange(range)) {
+                return false
+              }
+
+              const { from, to } = range
+              const [$start, $end] = [doc.resolve(from), doc.resolve(to)]
+
+              view.dispatch(tr.setSelection(new TextSelection($start, $end)))
+
+              return true
+            }
+          }
+        })
+      ]
+
+      return plugins
+    },
+    addExtensions() {
       const options: NodeHighlightExtensionOptions = this.options
 
       return [
         NodeUuidExtension.extend({
-          addOptions () {
+          addOptions() {
             return {
               ...this.parent?.(),
-              ...options
+              ...options,
+              onNodeAttributes: (uuid: string) => generateAttributes(uuid, options)
             }
           },
-          addAttributes () {
-            return {
-              [NodeUuidExtension.name]: {
-                renderHTML: (attrs) => {
-                  // get uuid from parent mark (NodeUuidExtension) attributes
-                  const uuid = attrs[NodeUuidExtension.name]
-                  const classAttrs: { class?: string } = {}
-
-                  if (options.isHighlightModeOn()) {
-                    const type = options.getNodeHighlightType(uuid)
-
-                    if (type === NodeHighlightType.WARNING) {
-                      classAttrs.class = 'text-editor-highlighted-node-warning'
-                    } else if (type === NodeHighlightType.ADD) {
-                      classAttrs.class = 'text-editor-highlighted-node-add'
-                    } else if (type === NodeHighlightType.DELETE) {
-                      classAttrs.class = 'text-editor-highlighted-node-delete'
-                    }
-                  }
-
-                  return mergeAttributes(attrs, classAttrs)
-                }
-              }
-            }
-          }
         })
       ]
     }
diff --git a/packages/text-editor/src/components/extension/nodeUuid.ts b/packages/text-editor/src/components/extension/nodeUuid.ts
index 6f55c7fc0c5..961c0a6606e 100644
--- a/packages/text-editor/src/components/extension/nodeUuid.ts
+++ b/packages/text-editor/src/components/extension/nodeUuid.ts
@@ -1,10 +1,12 @@
-import { Mark, getMarkAttributes, mergeAttributes } from '@tiptap/core'
-import { Plugin, PluginKey } from 'prosemirror-state'
+import { CommandProps, Mark, getMarkAttributes, getMarkType, mergeAttributes } from '@tiptap/core'
+import { Mark as ProseMirrorMark } from 'prosemirror-model'
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 
 const NAME = 'node-uuid'
 
 export interface NodeUuidOptions {
   HTMLAttributes: Record<string, any>
+  onNodeAttributes?: (uuid: string) => Record<string, any> | undefined
   onNodeSelected?: (uuid: string | null) => void
   onNodeClicked?: (uuid: string) => void
 }
@@ -14,44 +16,75 @@ export interface NodeUuidCommands<ReturnType> {
     /**
      * Add uuid mark
      */
-    setUuid: (uuid: string) => ReturnType
+    setNodeUuid: (uuid: string) => ReturnType
     /**
-     * Unset uuid mark
-     */
-    unsetUuid: () => ReturnType
+         * Unset uuid mark
+         */
+    unsetNodeUuid: () => ReturnType
   }
 }
 
 declare module '@tiptap/core' {
-  interface Commands<ReturnType> extends NodeUuidCommands<ReturnType> {}
+  interface Commands<ReturnType> extends NodeUuidCommands<ReturnType> { }
 }
 
 export interface NodeUuidStorage {
   activeNodeUuid: string | null
 }
 
+const generateNodeUuidAttributes = (uuid: string | undefined, options: NodeUuidOptions): Record<string, any> => {
+  if (!uuid) {
+    return {}
+  }
+
+  return mergeAttributes(options.onNodeAttributes?.(uuid) ?? {}, { [NAME]: uuid })
+}
+
+const findNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
+  if (!state.selection) {
+    return
+  }
+
+  let nodeUuidMark: ProseMirrorMark | undefined = undefined
+  state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
+    if (nodeUuidMark) {
+      return false
+    }
+    nodeUuidMark = node.marks.find(
+      (mark) => mark.type.name === NAME && mark.attrs[NAME]
+    )
+  })
+
+  return nodeUuidMark
+}
+
 /**
- * This mark allows to add node uuid to the selected text
+ * This extension allows to add node uuid to the selected text
  * Creates span node with attribute node-uuid
  */
 export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
   name: NAME,
-  addOptions () {
+  addOptions() {
     return {
       HTMLAttributes: {}
     }
   },
 
-  addAttributes () {
+  addAttributes() {
     return {
       [NAME]: {
         default: null,
-        parseHTML: (el) => (el as HTMLSpanElement).getAttribute(NAME)
+        parseHTML: (el) => (el as HTMLSpanElement).getAttribute(NAME),
+        renderHTML: (attrs) => {
+          const uuid: string | undefined = attrs[NAME]
+
+          return mergeAttributes(attrs, generateNodeUuidAttributes(uuid, this.options))
+        }
       }
     }
   },
 
-  parseHTML () {
+  parseHTML() {
     return [
       {
         tag: `span[${NAME}]`,
@@ -67,22 +100,20 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     ]
   },
 
-  renderHTML ({ HTMLAttributes }) {
+  renderHTML({ HTMLAttributes }) {
     return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 
-  addProseMirrorPlugins () {
+  addProseMirrorPlugins() {
     const options = this.options
-    const storage = this.storage
+    const storage: NodeUuidStorage = this.storage
     const plugins = [
       ...(this.parent?.() ?? []),
       new Plugin({
         key: new PluginKey('handle-node-uuid-click-plugin'),
         props: {
-          handleClick (view) {
-            const { schema } = view.state
-
-            const attrs = getMarkAttributes(view.state, schema.marks[NAME])
+          handleClick(view) {
+            const attrs = getMarkAttributes(view.state, view.state.schema.marks[NAME])
             const nodeUuid = attrs?.[NAME]
             if (nodeUuid !== null || nodeUuid !== undefined) {
               options.onNodeClicked?.(nodeUuid)
@@ -100,38 +131,39 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     return plugins
   },
 
-  addCommands () {
-    return {
-      setUuid:
+  addCommands() {
+    const result = {
+      setNodeUuid:
         (uuid: string) =>
-          ({ commands }) =>
-            commands.setMark(this.name, { [NAME]: uuid }),
-      unsetUuid:
+          ({ commands, state }: CommandProps) => {
+            const { doc, selection } = state
+            if (selection.empty) {
+              return false
+            }
+            if (doc.rangeHasMark(selection.from, selection.to, getMarkType(NAME, state.schema))) {
+              return false
+            }
+
+            return commands.setMark(this.name, generateNodeUuidAttributes(uuid, this.options))
+          },
+      unsetNodeUuid:
         () =>
-          ({ commands }) =>
+          ({ commands }: CommandProps) =>
             commands.unsetMark(this.name)
     }
+
+    return result
   },
 
-  addStorage () {
+  addStorage() {
     return {
       activeNodeUuid: null
     }
   },
 
-  onSelectionUpdate () {
-    const { $head } = this.editor.state.selection
-
-    const marks = $head.marks()
-    let activeNodeUuid = null
-    if (marks.length > 0) {
-      const nodeUuidMark = this.editor.schema.marks[NAME]
-      const activeNodeUuidMark = marks.find((mark) => mark.type === nodeUuidMark)
-
-      if (activeNodeUuidMark !== undefined && activeNodeUuidMark !== null) {
-        activeNodeUuid = activeNodeUuidMark.attrs[NAME]
-      }
-    }
+  onSelectionUpdate() {
+    const activeNodeUuidMark = findNodeUuidMark(this.editor.state)
+    const activeNodeUuid = activeNodeUuidMark ? activeNodeUuidMark.attrs[NAME]: null
 
     if (this.storage.activeNodeUuid !== activeNodeUuid) {
       this.storage.activeNodeUuid = activeNodeUuid
diff --git a/packages/text-editor/src/index.ts b/packages/text-editor/src/index.ts
index 0c16b00f367..fa4440df0fb 100644
--- a/packages/text-editor/src/index.ts
+++ b/packages/text-editor/src/index.ts
@@ -42,7 +42,7 @@ export {
   NodeHighlightType
 } from './components/extension/nodeHighlight'
 export { NodeUuidCommands, NodeUuidExtension, NodeUuidOptions, NodeUuidStorage } from './components/extension/nodeUuid'
-export { InlinePopupExtension } from './components/extension/inlinePopup'
+export {InlinePopupExtension} from './components/extension/inlinePopup'
 export {
   InlineStyleToolbarExtension,
   InlineStyleToolbarOptions,

From 7e989338edb359e10e0b94b1ec2010e753548da6 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Fri, 6 Oct 2023 22:34:06 +0700
Subject: [PATCH 3/8] qms: update document inline comments extensions

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/CollaboratorEditor.svelte  | 14 +++----
 .../components/TextEditorStyleToolbar.svelte  |  2 +-
 .../extension/inlineStyleToolbar.ts           |  5 +--
 .../src/components/extension/nodeHighlight.ts |  6 +--
 .../src/components/extension/nodeUuid.ts      | 38 +++++++++----------
 packages/text-editor/src/index.ts             |  2 +-
 6 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index bb3e37edfa4..405675d3537 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -42,7 +42,7 @@
   export let documentId: string
   export let readonly = false
   export let visible = true
-  
+
   export let token: string
   export let collaboratorURL: string
 
@@ -97,7 +97,7 @@
 
   const dispatch = createEventDispatcher()
 
-  export function getHTML(): string | undefined {
+  export function getHTML (): string | undefined {
     if (editor) {
       return editor.getHTML()
     }
@@ -163,7 +163,7 @@
   let needFocus = false
 
   let focused = false
-  export function focus(): void {
+  export function focus (): void {
     needFocus = true
   }
 
@@ -181,7 +181,7 @@
   let _decoration = DecorationSet.empty
   let oldContent = ''
 
-  function updateEditor(editor?: Editor, field?: string, comparedVersion?: Markup | ArrayBuffer): void {
+  function updateEditor (editor?: Editor, field?: string, comparedVersion?: Markup | ArrayBuffer): void {
     const r = calculateDecorations(editor, oldContent, field, comparedVersion)
     if (r !== undefined) {
       oldContent = r.oldContent
@@ -196,12 +196,12 @@
   }
 
   const DecorationExtension = Extension.create({
-    addProseMirrorPlugins() {
+    addProseMirrorPlugins () {
       return [
         new Plugin({
           key: new PluginKey('diffs'),
           props: {
-            decorations(state) {
+            decorations (state) {
               updateDecorations()
               if (showDiff) {
                 return _decoration
@@ -293,7 +293,7 @@
   let showDiff = true
 </script>
 
-<slot editor={editor} />
+<slot {editor} />
 
 {#if visible}
   {#if comparedVersion !== undefined || $$slots.tools}
diff --git a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
index a4085e6c36d..4c2ecb09261 100644
--- a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
+++ b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
@@ -330,7 +330,7 @@
       disabled={textEditor.view.state.selection.empty}
       showTooltip={{ label: action.label }}
       on:click={() => {
-        dispatch('action', {action: action.id, editor: textEditor})
+        dispatch('action', { action: action.id, editor: textEditor })
       }}
     />
   {/each}
diff --git a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
index fc78f50a8bc..7cb43efee64 100644
--- a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
+++ b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
@@ -42,7 +42,7 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
         props: {
           handleClick () {
             handleFocus(editor, options, storage)
-          },
+          }
         }
       })
     ]
@@ -103,8 +103,7 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
 
           return true
         }
-      }),
-      
+      })
     ]
   },
   onFocus () {
diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index 460d643af47..23b4cb7de14 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -74,18 +74,18 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
 
       return plugins
     },
-    addExtensions() {
+    addExtensions () {
       const options: NodeHighlightExtensionOptions = this.options
 
       return [
         NodeUuidExtension.extend({
-          addOptions() {
+          addOptions () {
             return {
               ...this.parent?.(),
               ...options,
               onNodeAttributes: (uuid: string) => generateAttributes(uuid, options)
             }
-          },
+          }
         })
       ]
     }
diff --git a/packages/text-editor/src/components/extension/nodeUuid.ts b/packages/text-editor/src/components/extension/nodeUuid.ts
index 961c0a6606e..52e8baac8dc 100644
--- a/packages/text-editor/src/components/extension/nodeUuid.ts
+++ b/packages/text-editor/src/components/extension/nodeUuid.ts
@@ -1,4 +1,4 @@
-import { CommandProps, Mark, getMarkAttributes, getMarkType, mergeAttributes } from '@tiptap/core'
+import { Command, CommandProps, Mark, getMarkAttributes, getMarkType, mergeAttributes } from '@tiptap/core'
 import { Mark as ProseMirrorMark } from 'prosemirror-model'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 
@@ -18,14 +18,14 @@ export interface NodeUuidCommands<ReturnType> {
      */
     setNodeUuid: (uuid: string) => ReturnType
     /**
-         * Unset uuid mark
-         */
+     * Unset uuid mark
+     */
     unsetNodeUuid: () => ReturnType
   }
 }
 
 declare module '@tiptap/core' {
-  interface Commands<ReturnType> extends NodeUuidCommands<ReturnType> { }
+  interface Commands<ReturnType> extends NodeUuidCommands<ReturnType> {}
 }
 
 export interface NodeUuidStorage {
@@ -45,14 +45,12 @@ const findNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
     return
   }
 
-  let nodeUuidMark: ProseMirrorMark | undefined = undefined
+  let nodeUuidMark: ProseMirrorMark | undefined
   state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
-    if (nodeUuidMark) {
+    if (nodeUuidMark != null) {
       return false
     }
-    nodeUuidMark = node.marks.find(
-      (mark) => mark.type.name === NAME && mark.attrs[NAME]
-    )
+    nodeUuidMark = node.marks.find((mark) => mark.type.name === NAME && mark.attrs[NAME])
   })
 
   return nodeUuidMark
@@ -64,13 +62,13 @@ const findNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
  */
 export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
   name: NAME,
-  addOptions() {
+  addOptions () {
     return {
       HTMLAttributes: {}
     }
   },
 
-  addAttributes() {
+  addAttributes () {
     return {
       [NAME]: {
         default: null,
@@ -84,7 +82,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     }
   },
 
-  parseHTML() {
+  parseHTML () {
     return [
       {
         tag: `span[${NAME}]`,
@@ -100,11 +98,11 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     ]
   },
 
-  renderHTML({ HTMLAttributes }) {
+  renderHTML ({ HTMLAttributes }) {
     return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
   },
 
-  addProseMirrorPlugins() {
+  addProseMirrorPlugins () {
     const options = this.options
     const storage: NodeUuidStorage = this.storage
     const plugins = [
@@ -112,7 +110,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
       new Plugin({
         key: new PluginKey('handle-node-uuid-click-plugin'),
         props: {
-          handleClick(view) {
+          handleClick (view) {
             const attrs = getMarkAttributes(view.state, view.state.schema.marks[NAME])
             const nodeUuid = attrs?.[NAME]
             if (nodeUuid !== null || nodeUuid !== undefined) {
@@ -131,8 +129,8 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     return plugins
   },
 
-  addCommands() {
-    const result = {
+  addCommands () {
+    const result: NodeUuidCommands<Command>[typeof NAME] = {
       setNodeUuid:
         (uuid: string) =>
           ({ commands, state }: CommandProps) => {
@@ -155,15 +153,15 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     return result
   },
 
-  addStorage() {
+  addStorage () {
     return {
       activeNodeUuid: null
     }
   },
 
-  onSelectionUpdate() {
+  onSelectionUpdate () {
     const activeNodeUuidMark = findNodeUuidMark(this.editor.state)
-    const activeNodeUuid = activeNodeUuidMark ? activeNodeUuidMark.attrs[NAME]: null
+    const activeNodeUuid = (activeNodeUuidMark != null) ? activeNodeUuidMark.attrs[NAME] : null
 
     if (this.storage.activeNodeUuid !== activeNodeUuid) {
       this.storage.activeNodeUuid = activeNodeUuid
diff --git a/packages/text-editor/src/index.ts b/packages/text-editor/src/index.ts
index fa4440df0fb..0c16b00f367 100644
--- a/packages/text-editor/src/index.ts
+++ b/packages/text-editor/src/index.ts
@@ -42,7 +42,7 @@ export {
   NodeHighlightType
 } from './components/extension/nodeHighlight'
 export { NodeUuidCommands, NodeUuidExtension, NodeUuidOptions, NodeUuidStorage } from './components/extension/nodeUuid'
-export {InlinePopupExtension} from './components/extension/inlinePopup'
+export { InlinePopupExtension } from './components/extension/inlinePopup'
 export {
   InlineStyleToolbarExtension,
   InlineStyleToolbarOptions,

From 39c3165c9eb8dc6e766ef8c4bbf0397b7ad98ec6 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Sat, 7 Oct 2023 01:12:22 +0700
Subject: [PATCH 4/8] qms: move highlight to prose mirror decorations

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/CollaboratorEditor.svelte  |  7 +-
 .../src/components/extension/nodeHighlight.ts | 90 +++++++++++++++----
 .../src/components/extension/nodeUuid.ts      | 34 +++----
 packages/theme/styles/_text-editor.scss       |  2 +-
 4 files changed, 94 insertions(+), 39 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 405675d3537..3fb6c583ea6 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -38,6 +38,7 @@
   import { InlineStyleToolbarExtension } from './extension/inlineStyleToolbar'
   import StyleButton from './StyleButton.svelte'
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
+  import { NodeUuidExtension } from './extension/nodeUuid'
 
   export let documentId: string
   export let readonly = false
@@ -132,8 +133,11 @@
         return false
       }
 
-      const [$start, $end] = [doc.resolve(range.from), doc.resolve(range.to)]
 
+      console.log(range)
+
+      const [$start, $end] = [doc.resolve(range.from), doc.resolve(range.to)]
+      console.log($start + ' ' + $end)
       editor.view.dispatch(tr.setSelection(new TextSelection($start, $end)))
       needFocus = true
     })
@@ -160,6 +164,7 @@
     editor.registerPlugin(plugin)
   }
 
+
   let needFocus = false
 
   let focused = false
diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index 23b4cb7de14..0be01f2249f 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -1,6 +1,7 @@
 import { Extension, Range, getMarkRange, mergeAttributes } from '@tiptap/core'
-import { NodeUuidExtension, NodeUuidOptions } from './nodeUuid'
+import { NodeUuidExtension, NodeUuidOptions, NodeUuidStorage } from './nodeUuid'
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
 
 export enum NodeHighlightType {
   WARNING = 'warning',
@@ -19,31 +20,39 @@ function isRange (range: Range | undefined | null | void): range is Range {
 }
 
 const generateAttributes = (uuid: string, options: NodeHighlightExtensionOptions) => {
-  const parentAttrs = options.onNodeAttributes?.(uuid) ?? {}
-  const classAttrs: { class?: string } = {}
+  if (!options.isHighlightModeOn()) {
+    return undefined
+  }
 
-  if (options.isHighlightModeOn()) {
-    const type = options.getNodeHighlightType(uuid)
+  const type = options.getNodeHighlightType(uuid)
+  if (!type) {
+    return undefined
+  }
+  const classAttrs: { class?: string } = {}
 
-    if (type === NodeHighlightType.WARNING) {
-      classAttrs.class = 'text-editor-highlighted-node-warning'
-    } else if (type === NodeHighlightType.ADD) {
-      classAttrs.class = 'text-editor-highlighted-node-add'
-    } else if (type === NodeHighlightType.DELETE) {
-      classAttrs.class = 'text-editor-highlighted-node-delete'
-    }
+  if (type === NodeHighlightType.WARNING) {
+    classAttrs.class = 'text-editor-highlighted-node-warning'
+  } else if (type === NodeHighlightType.ADD) {
+    classAttrs.class = 'text-editor-highlighted-node-add'
+  } else if (type === NodeHighlightType.DELETE) {
+    classAttrs.class = 'text-editor-highlighted-node-delete'
   }
 
-  return mergeAttributes(parentAttrs, classAttrs)
+  return classAttrs
 }
 
 /**
  * Extension allows to highlight nodes based on uuid
  */
-export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
+export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions, NodeUuidStorage> =
   Extension.create<NodeHighlightExtensionOptions>({
+    addStorage (): NodeUuidStorage {
+      return { activeNodeUuid: null }
+    },
     addProseMirrorPlugins () {
       const options = this.options
+      const storage: NodeUuidStorage = this.storage
+
       const plugins = [
         ...(this.parent?.() ?? []),
         new Plugin({
@@ -69,6 +78,50 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
               return true
             }
           }
+        }),
+        new Plugin({
+          key: new PluginKey('node-highlight-click-decorations-plugin'),
+          props: {
+            decorations (state) {
+              if (!options.isHighlightModeOn()) {
+                return undefined
+              }
+              const decorations: Decoration[] = []
+              const { doc, schema } = state
+              doc.descendants((node, pos) => {
+                const nodeUuidMark = node.marks.find(
+                  (mark) => mark.type.name === NodeUuidExtension.name && mark.attrs[NodeUuidExtension.name]
+                )
+
+                if (nodeUuidMark != null) {
+                  const nodeUuid = nodeUuidMark.attrs[NodeUuidExtension.name]
+                  const attributes = generateAttributes(nodeUuid, options)
+                  if (attributes == null) {
+                    return
+                  }
+
+                  // the first pos does not contain the mark, so we need to add 1 (pos + 1) to get the correct range
+                  const range = getMarkRange(doc.resolve(pos + 1), schema.marks[NodeUuidExtension.name])
+                  if (range == null) {
+                    return
+                  }
+
+                  decorations.push(
+                    Decoration.inline(
+                      range.from,
+                      range.to,
+                      mergeAttributes(
+                        attributes,
+                        nodeUuid === storage.activeNodeUuid ? { class: 'text-editor-highlighted-node-selected' } : {}
+                      )
+                    )
+                  )
+                }
+              })
+
+              return DecorationSet.empty.add(doc, decorations)
+            }
+          }
         })
       ]
 
@@ -76,14 +129,17 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
     },
     addExtensions () {
       const options: NodeHighlightExtensionOptions = this.options
-
+      const storage: NodeUuidStorage = this.storage
       return [
         NodeUuidExtension.extend({
-          addOptions () {
+          addOptions (): NodeUuidOptions {
             return {
               ...this.parent?.(),
               ...options,
-              onNodeAttributes: (uuid: string) => generateAttributes(uuid, options)
+              onNodeSelected: (uuid: string) => {
+                storage.activeNodeUuid = uuid
+                options.onNodeSelected?.(uuid)
+              }
             }
           }
         })
diff --git a/packages/text-editor/src/components/extension/nodeUuid.ts b/packages/text-editor/src/components/extension/nodeUuid.ts
index 52e8baac8dc..87c9bce5372 100644
--- a/packages/text-editor/src/components/extension/nodeUuid.ts
+++ b/packages/text-editor/src/components/extension/nodeUuid.ts
@@ -1,12 +1,11 @@
 import { Command, CommandProps, Mark, getMarkAttributes, getMarkType, mergeAttributes } from '@tiptap/core'
-import { Mark as ProseMirrorMark } from 'prosemirror-model'
+import { Node, Mark as ProseMirrorMark } from 'prosemirror-model'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 
 const NAME = 'node-uuid'
 
 export interface NodeUuidOptions {
   HTMLAttributes: Record<string, any>
-  onNodeAttributes?: (uuid: string) => Record<string, any> | undefined
   onNodeSelected?: (uuid: string | null) => void
   onNodeClicked?: (uuid: string) => void
 }
@@ -32,15 +31,7 @@ export interface NodeUuidStorage {
   activeNodeUuid: string | null
 }
 
-const generateNodeUuidAttributes = (uuid: string | undefined, options: NodeUuidOptions): Record<string, any> => {
-  if (!uuid) {
-    return {}
-  }
-
-  return mergeAttributes(options.onNodeAttributes?.(uuid) ?? {}, { [NAME]: uuid })
-}
-
-const findNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
+const findSelectionNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
   if (!state.selection) {
     return
   }
@@ -50,12 +41,20 @@ const findNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
     if (nodeUuidMark != null) {
       return false
     }
-    nodeUuidMark = node.marks.find((mark) => mark.type.name === NAME && mark.attrs[NAME])
+    nodeUuidMark = findNodeUuidMark(node)
   })
 
   return nodeUuidMark
 }
 
+export const findNodeUuidMark = (node: Node): ProseMirrorMark | undefined => {
+  if (!node) {
+    return
+  }
+
+  return node.marks.find((mark) => mark.type.name === NAME && mark.attrs[NAME])
+}
+
 /**
  * This extension allows to add node uuid to the selected text
  * Creates span node with attribute node-uuid
@@ -72,12 +71,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
     return {
       [NAME]: {
         default: null,
-        parseHTML: (el) => (el as HTMLSpanElement).getAttribute(NAME),
-        renderHTML: (attrs) => {
-          const uuid: string | undefined = attrs[NAME]
-
-          return mergeAttributes(attrs, generateNodeUuidAttributes(uuid, this.options))
-        }
+        parseHTML: (el) => (el as HTMLSpanElement).getAttribute(NAME)
       }
     }
   },
@@ -142,7 +136,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
               return false
             }
 
-            return commands.setMark(this.name, generateNodeUuidAttributes(uuid, this.options))
+            return commands.setMark(this.name, { [NAME]: uuid })
           },
       unsetNodeUuid:
         () =>
@@ -160,7 +154,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
   },
 
   onSelectionUpdate () {
-    const activeNodeUuidMark = findNodeUuidMark(this.editor.state)
+    const activeNodeUuidMark = findSelectionNodeUuidMark(this.editor.state)
     const activeNodeUuid = (activeNodeUuidMark != null) ? activeNodeUuidMark.attrs[NAME] : null
 
     if (this.storage.activeNodeUuid !== activeNodeUuid) {
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index 3dcad27036a..05a6b23f0d0 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/packages/theme/styles/_text-editor.scss
@@ -112,7 +112,7 @@
   background-color: var(--text-editor-highlighted-node-warning-background-color);
   border-bottom: 0.0625rem solid var(--text-editor-highlighted-node-warning-border-color);
 
-  &.active, &:hover {
+  &.text-editor-highlighted-node-selected, &:hover {
     background-color: var(--text-editor-highlighted-node-warning-active-background-color);
   }
 }

From 96b5160e980868025f93e21ea03c6a09b76f429b Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 9 Oct 2023 12:18:34 +0700
Subject: [PATCH 5/8] fix formatting issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../text-editor/src/components/CollaboratorEditor.svelte  | 4 ----
 .../text-editor/src/components/extension/nodeHighlight.ts | 6 +++---
 packages/text-editor/src/components/extension/nodeUuid.ts | 8 ++++----
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 3fb6c583ea6..0a7e20be359 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -133,11 +133,7 @@
         return false
       }
 
-
-      console.log(range)
-
       const [$start, $end] = [doc.resolve(range.from), doc.resolve(range.to)]
-      console.log($start + ' ' + $end)
       editor.view.dispatch(tr.setSelection(new TextSelection($start, $end)))
       needFocus = true
     })
diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index 0be01f2249f..7125a3cfcd0 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -19,13 +19,13 @@ function isRange (range: Range | undefined | null | void): range is Range {
   return range !== null && range !== undefined
 }
 
-const generateAttributes = (uuid: string, options: NodeHighlightExtensionOptions) => {
+const generateAttributes = (uuid: string, options: NodeHighlightExtensionOptions): Record<string, any> | undefined => {
   if (!options.isHighlightModeOn()) {
     return undefined
   }
 
   const type = options.getNodeHighlightType(uuid)
-  if (!type) {
+  if (type === null || type === undefined) {
     return undefined
   }
   const classAttrs: { class?: string } = {}
@@ -59,7 +59,7 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions, No
           key: new PluginKey('handle-node-highlight-click-plugin'),
           props: {
             handleClick (view, pos) {
-              if (!options.isHighlightModeOn() || !options.isAutoSelect?.()) {
+              if (!options.isHighlightModeOn() || options.isAutoSelect?.() !== true) {
                 return
               }
               const { schema, doc, tr } = view.state
diff --git a/packages/text-editor/src/components/extension/nodeUuid.ts b/packages/text-editor/src/components/extension/nodeUuid.ts
index 87c9bce5372..a100f0dc7d0 100644
--- a/packages/text-editor/src/components/extension/nodeUuid.ts
+++ b/packages/text-editor/src/components/extension/nodeUuid.ts
@@ -32,13 +32,13 @@ export interface NodeUuidStorage {
 }
 
 const findSelectionNodeUuidMark = (state: EditorState): ProseMirrorMark | undefined => {
-  if (!state.selection) {
+  if (state.selection === null || state.selection === undefined) {
     return
   }
 
   let nodeUuidMark: ProseMirrorMark | undefined
   state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
-    if (nodeUuidMark != null) {
+    if (nodeUuidMark !== null || nodeUuidMark !== undefined) {
       return false
     }
     nodeUuidMark = findNodeUuidMark(node)
@@ -48,7 +48,7 @@ const findSelectionNodeUuidMark = (state: EditorState): ProseMirrorMark | undefi
 }
 
 export const findNodeUuidMark = (node: Node): ProseMirrorMark | undefined => {
-  if (!node) {
+  if (node === null || node === undefined) {
     return
   }
 
@@ -155,7 +155,7 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
 
   onSelectionUpdate () {
     const activeNodeUuidMark = findSelectionNodeUuidMark(this.editor.state)
-    const activeNodeUuid = (activeNodeUuidMark != null) ? activeNodeUuidMark.attrs[NAME] : null
+    const activeNodeUuid = activeNodeUuidMark != null ? activeNodeUuidMark.attrs[NAME] : null
 
     if (this.storage.activeNodeUuid !== activeNodeUuid) {
       this.storage.activeNodeUuid = activeNodeUuid

From 9aa870438cbaf51b0ac2ad2a9ba560fd05143ab4 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 9 Oct 2023 12:26:16 +0700
Subject: [PATCH 6/8] fix formatting issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../text-editor/src/components/extension/nodeHighlight.ts     | 4 ++--
 packages/text-editor/src/components/extension/nodeUuid.ts     | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index 7125a3cfcd0..1b82e108873 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -93,10 +93,10 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions, No
                   (mark) => mark.type.name === NodeUuidExtension.name && mark.attrs[NodeUuidExtension.name]
                 )
 
-                if (nodeUuidMark != null) {
+                if (nodeUuidMark !== null && nodeUuidMark !== undefined) {
                   const nodeUuid = nodeUuidMark.attrs[NodeUuidExtension.name]
                   const attributes = generateAttributes(nodeUuid, options)
-                  if (attributes == null) {
+                  if (attributes === null || attributes === undefined) {
                     return
                   }
 
diff --git a/packages/text-editor/src/components/extension/nodeUuid.ts b/packages/text-editor/src/components/extension/nodeUuid.ts
index a100f0dc7d0..8f16f47e7e9 100644
--- a/packages/text-editor/src/components/extension/nodeUuid.ts
+++ b/packages/text-editor/src/components/extension/nodeUuid.ts
@@ -155,7 +155,8 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
 
   onSelectionUpdate () {
     const activeNodeUuidMark = findSelectionNodeUuidMark(this.editor.state)
-    const activeNodeUuid = activeNodeUuidMark != null ? activeNodeUuidMark.attrs[NAME] : null
+    const activeNodeUuid =
+      activeNodeUuidMark !== null && activeNodeUuidMark !== undefined ? activeNodeUuidMark.attrs[NAME] : null
 
     if (this.storage.activeNodeUuid !== activeNodeUuid) {
       this.storage.activeNodeUuid = activeNodeUuid

From 70a431d21c8b2de9f3ffb490004272ac192c098f Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 9 Oct 2023 12:39:03 +0700
Subject: [PATCH 7/8] fix formatting issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/text-editor/src/components/CollaboratorEditor.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 0a7e20be359..2ee6a7ff32e 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -141,7 +141,6 @@
 
   export function takeSnapshot (snapshotId: string) {
     provider.copyContent(documentId, snapshotId)
-
   }
 
   export function unregisterPlugin (nameOrPluginKey: string | PluginKey) {
@@ -160,7 +159,6 @@
     editor.registerPlugin(plugin)
   }
 
-
   let needFocus = false
 
   let focused = false

From 0e7c24fad65263ca7e0fdd0c4a926cf8e0f170f0 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 9 Oct 2023 12:52:11 +0700
Subject: [PATCH 8/8] fix formatting issues

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../text-editor/src/components/CollaboratorEditor.svelte  | 2 +-
 .../text-editor/src/components/extension/nodeHighlight.ts | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 2ee6a7ff32e..b748a8b5eec 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -36,9 +36,9 @@
   import { defaultEditorAttributes } from './editor/editorProps'
   import { completionConfig, defaultExtensions } from './extensions'
   import { InlineStyleToolbarExtension } from './extension/inlineStyleToolbar'
+  import { NodeUuidExtension } from './extension/nodeUuid'
   import StyleButton from './StyleButton.svelte'
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
-  import { NodeUuidExtension } from './extension/nodeUuid'
 
   export let documentId: string
   export let readonly = false
diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts
index 1b82e108873..9fadffa9427 100644
--- a/packages/text-editor/src/components/extension/nodeHighlight.ts
+++ b/packages/text-editor/src/components/extension/nodeHighlight.ts
@@ -1,5 +1,5 @@
 import { Extension, Range, getMarkRange, mergeAttributes } from '@tiptap/core'
-import { NodeUuidExtension, NodeUuidOptions, NodeUuidStorage } from './nodeUuid'
+import { NodeUuidExtension, NodeUuidOptions, NodeUuidStorage, findNodeUuidMark } from './nodeUuid'
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 
@@ -89,9 +89,7 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions, No
               const decorations: Decoration[] = []
               const { doc, schema } = state
               doc.descendants((node, pos) => {
-                const nodeUuidMark = node.marks.find(
-                  (mark) => mark.type.name === NodeUuidExtension.name && mark.attrs[NodeUuidExtension.name]
-                )
+                const nodeUuidMark = findNodeUuidMark(node)
 
                 if (nodeUuidMark !== null && nodeUuidMark !== undefined) {
                   const nodeUuid = nodeUuidMark.attrs[NodeUuidExtension.name]
@@ -102,7 +100,7 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions, No
 
                   // the first pos does not contain the mark, so we need to add 1 (pos + 1) to get the correct range
                   const range = getMarkRange(doc.resolve(pos + 1), schema.marks[NodeUuidExtension.name])
-                  if (range == null) {
+                  if (!isRange(range)) {
                     return
                   }