UBER-134: Back references

* UBER-134: Back references
* Slight UI update

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/panel/src/components/Panel.svelte

@@ -141,6 +141,7 @@
   </svelte:fragment>
 
   <svelte:fragment slot="utils">
+    <slot name="pre-utils" />
     <Component is={calendar.component.DocReminder} props={{ value: object, title, focusIndex: 9000 }} />
     {#if isUtils && $$slots.utils}
       <div class="buttons-divider" />

packages/presentation/lang/en.json

@@ -4,6 +4,7 @@
     "Cancel": "Cancel",
     "Ok": "Ok",
     "Save": "Save",
+    "Saved": "Saved...",
     "Download": "Download",
     "Delete": "Delete",
     "Close": "Close",

packages/presentation/lang/ru.json

@@ -4,6 +4,7 @@
     "Cancel": "Отменить",
     "Ok": "Ок",
     "Save": "Сохранить",
+    "Saved": "Сохранено...",
     "Download": "Скачать",
     "Delete": "Удалить",
     "Close": "Закрыть",

packages/presentation/src/plugin.ts

@@ -33,6 +33,7 @@ export default plugin(presentationId, {
     Cancel: '' as IntlString,
     Ok: '' as IntlString,
     Save: '' as IntlString,
+    Saved: '' as IntlString,
     Download: '' as IntlString,
     Delete: '' as IntlString,
     Close: '' as IntlString,

packages/text-editor/src/Completion.ts

@@ -1,13 +1,38 @@
 import { Node, mergeAttributes } from '@tiptap/core'
 import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
 
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
 export interface CompletionOptions {
   HTMLAttributes: Record<string, any>
   renderLabel: (props: { options: CompletionOptions, node: any }) => string
   suggestion: Omit<SuggestionOptions, 'editor'>
+  showDoc?: (event: MouseEvent, _id: string, _class: string) => void
 }
 
-// export const CompletionPluginKey = new PluginKey('completion')
+export function clickHandler (opt: CompletionOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey('completion-handleClickLink'),
+    props: {
+      handleClick: (view, pos, event) => {
+        if (event.button !== 0) {
+          return false
+        }
+
+        const link = (event.target as HTMLElement)?.closest('span')
+        if (link != null) {
+          const _class = link.getAttribute('data-objectclass')
+          const _id = link.getAttribute('data-id')
+          if (_id != null && _class != null) {
+            opt.showDoc?.(event, _id, _class)
+          }
+        }
+
+        return false
+      }
+    }
+  })
+}
 
 export const Completion = Node.create<CompletionOptions>({
   name: 'reference',
@@ -63,10 +88,16 @@ export const Completion = Node.create<CompletionOptions>({
 
   inline: true,
 
-  selectable: false,
+  selectable: true,
 
   atom: true,
 
+  draggable: true,
+
+  onFocus () {
+    console.log('focus')
+  },
+
   addAttributes () {
     return {
       id: {
@@ -126,7 +157,15 @@ export const Completion = Node.create<CompletionOptions>({
   renderHTML ({ node, HTMLAttributes }) {
     return [
       'span',
-      mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),
+      mergeAttributes(
+        {
+          'data-type': this.name,
+          class: 'antiButton secondary cursor-pointer',
+          style: 'width: fit-content;display: inline-flex;'
+        },
+        this.options.HTMLAttributes,
+        HTMLAttributes
+      ),
       this.options.renderLabel({
         options: this.options,
         node
@@ -174,7 +213,8 @@ export const Completion = Node.create<CompletionOptions>({
       Suggestion({
         editor: this.editor,
         ...this.options.suggestion
-      })
+      }),
+      clickHandler(this.options)
     ]
   }
 })

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

@@ -26,6 +26,7 @@
   export let icon: Asset | AnySvelteComponent = IconDescription
   export let content: string = ''
   export let maxHeight: string = '40vh'
+  export let enableBackReferences = false
 
   const dispatch = createEventDispatcher()
 
@@ -44,5 +45,14 @@
       <Label {label} />
     </span>
   </div>
-  <StyledTextBox {content} alwaysEdit focusable mode={2} hideExtraButtons {maxHeight} on:value={checkValue} />
+  <StyledTextBox
+    {content}
+    alwaysEdit
+    focusable
+    mode={2}
+    hideExtraButtons
+    {maxHeight}
+    on:value={checkValue}
+    {enableBackReferences}
+  />
 </div>

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

@@ -27,32 +27,30 @@
     showPopup,
     tooltip
   } from '@hcengineering/ui'
-  import { AnyExtension } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
   import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
   import { FORMAT_MODES, FormatMode, RefAction, RefInputActionItem, TextEditorHandler } from '../types'
   import LinkPopup from './LinkPopup.svelte'
-  import MentionList from './MentionList.svelte'
-  import { SvelteRenderer } from './SvelteRenderer'
   import TextEditor from './TextEditor.svelte'
+  import { completionConfig } from './extensions'
   import Attach from './icons/Attach.svelte'
   import Bold from './icons/Bold.svelte'
-  import RIBold from './icons/RIBold.svelte'
   import Code from './icons/Code.svelte'
-  import RICode from './icons/RICode.svelte'
   import CodeBlock from './icons/CodeBlock.svelte'
-  import RILink from './icons/RILink.svelte'
-  import RIMention from './icons/RIMention.svelte'
   import Italic from './icons/Italic.svelte'
-  import RIItalic from './icons/RIItalic.svelte'
   import Link from './icons/Link.svelte'
   import ListBullet from './icons/ListBullet.svelte'
   import ListNumber from './icons/ListNumber.svelte'
   import Quote from './icons/Quote.svelte'
+  import RIBold from './icons/RIBold.svelte'
+  import RICode from './icons/RICode.svelte'
+  import RIItalic from './icons/RIItalic.svelte'
+  import RILink from './icons/RILink.svelte'
+  import RIMention from './icons/RIMention.svelte'
+  import RIStrikethrough from './icons/RIStrikethrough.svelte'
   import Send from './icons/Send.svelte'
   import Strikethrough from './icons/Strikethrough.svelte'
-  import RIStrikethrough from './icons/RIStrikethrough.svelte'
   import TextStyle from './icons/TextStyle.svelte'
 
   const dispatch = createEventDispatcher()
@@ -185,42 +183,6 @@
     textEditor.submit()
   }
 
-  const editorExtensions: AnyExtension[] = [
-    Completion.configure({
-      HTMLAttributes: {
-        class: 'reference'
-      },
-      suggestion: {
-        items: async (query: { query: string }) => {
-          return []
-        },
-        render: () => {
-          let component: any
-
-          return {
-            onStart: (props: any) => {
-              component = new SvelteRenderer(MentionList, {
-                ...props,
-                close: () => {
-                  component.destroy()
-                }
-              })
-            },
-            onUpdate (props: any) {
-              component.updateProps(props)
-            },
-            onKeyDown (props: any) {
-              return component.onKeyDown(props)
-            },
-            onExit () {
-              component.destroy()
-            }
-          }
-        }
-      }
-    })
-  ]
-
   const editorHandler: TextEditorHandler = {
     insertText: (text) => {
       textEditor.insertText(text)
@@ -277,6 +239,12 @@
       focusManager?.setFocus(idx)
     }
   }
+  const completionPlugin = Completion.configure({
+    ...completionConfig,
+    showDoc (event: MouseEvent, _id: string, _class: string) {
+      dispatch('open-document', { event, _id, _class })
+    }
+  })
 </script>
 
 <div class="ref-container">
@@ -380,7 +348,7 @@
           focused = true
           updateFocus()
         }}
-        extensions={editorExtensions}
+        extensions={[completionPlugin]}
         on:selection-update={updateFormattingState}
         on:update
         placeholder={placeholder ?? textEditorPlugin.string.EditorPlaceholder}

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

@@ -13,8 +13,10 @@
     resizeObserver
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
+  import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
   import StyledTextEditor from './StyledTextEditor.svelte'
+  import { completionConfig } from './extensions'
 
   export let label: IntlString | undefined = undefined
   export let content: string
@@ -33,6 +35,7 @@
   export let focusable: boolean = false
   export let enableFormatting = false
   export let autofocus = false
+  export let enableBackReferences: boolean = false
 
   const Mode = {
     View: 1,
@@ -119,6 +122,12 @@
       focusManager?.setFocus(idx)
     }
   }
+  const completionPlugin = Completion.configure({
+    ...completionConfig,
+    showDoc (event: MouseEvent, _id: string, _class: string) {
+      dispatch('open-document', { event, _id, _class })
+    }
+  })
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -149,6 +158,7 @@
       {focusable}
       {enableFormatting}
       {autofocus}
+      extensions={enableBackReferences ? [completionPlugin] : []}
       bind:content={rawValue}
       bind:this={textEditor}
       on:attach

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

@@ -32,22 +32,23 @@
   import { headingLevels, mInsertTable } from './extensions'
   import Attach from './icons/Attach.svelte'
   import Bold from './icons/Bold.svelte'
-  import RIBold from './icons/RIBold.svelte'
   import Code from './icons/Code.svelte'
-  import RICode from './icons/RICode.svelte'
   import CodeBlock from './icons/CodeBlock.svelte'
   import Header from './icons/Header.svelte'
   import IconTable from './icons/IconTable.svelte'
   import Italic from './icons/Italic.svelte'
-  import RIItalic from './icons/RIItalic.svelte'
   import Link from './icons/Link.svelte'
-  import RILink from './icons/RILink.svelte'
   import ListBullet from './icons/ListBullet.svelte'
   import ListNumber from './icons/ListNumber.svelte'
   import Quote from './icons/Quote.svelte'
-  import Strikethrough from './icons/Strikethrough.svelte'
+  import RIBold from './icons/RIBold.svelte'
+  import RICode from './icons/RICode.svelte'
+  import RIItalic from './icons/RIItalic.svelte'
+  import RILink from './icons/RILink.svelte'
   import RIStrikethrough from './icons/RIStrikethrough.svelte'
+  import Strikethrough from './icons/Strikethrough.svelte'
   // import RIMention from './icons/RIMention.svelte'
+  import { AnyExtension } from '@tiptap/core'
   import AddColAfter from './icons/table/AddColAfter.svelte'
   import AddColBefore from './icons/table/AddColBefore.svelte'
   import AddRowAfter from './icons/table/AddRowAfter.svelte'
@@ -75,6 +76,7 @@
   export let enableFormatting = false
   export let autofocus = false
   export let full = false
+  export let extensions: AnyExtension[] = []
 
   let textEditor: TextEditor
   let isEmpty = true
@@ -555,6 +557,7 @@
           <TextEditor
             bind:content
             {placeholder}
+            {extensions}
             bind:this={textEditor}
             bind:isEmpty
             on:value
@@ -573,7 +576,7 @@
         <TextEditor
           bind:content
           {placeholder}
-          bind:this={textEditor}
+          {extensions}
           bind:isEmpty
           on:value
           on:content={(ev) => {

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

@@ -14,6 +14,9 @@ import TipTapCodeBlock from '@tiptap/extension-code-block'
 import Gapcursor from '@tiptap/extension-gapcursor'
 
 import Link from '@tiptap/extension-link'
+import { CompletionOptions } from '../Completion'
+import MentionList from './MentionList.svelte'
+import { SvelteRenderer } from './SvelteRenderer'
 
 export const tableExtensions = [
   Table.configure({
@@ -126,3 +129,40 @@ export const mInsertTable = [
     header: true
   }
 ]
+
+/**
+ * @public
+ */
+export const completionConfig: Partial<CompletionOptions> = {
+  HTMLAttributes: {
+    class: 'reference'
+  },
+  suggestion: {
+    items: async (query: { query: string }) => {
+      return []
+    },
+    render: () => {
+      let component: any
+
+      return {
+        onStart: (props: any) => {
+          component = new SvelteRenderer(MentionList, {
+            ...props,
+            close: () => {
+              component.destroy()
+            }
+          })
+        },
+        onUpdate (props: any) {
+          component.updateProps(props)
+        },
+        onKeyDown (props: any) {
+          return component.onKeyDown(props)
+        },
+        onExit () {
+          component.destroy()
+        }
+      }
+    }
+  }
+}