Fix event description (#3741)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/calendar-resources/src/components/CreateEvent.svelte

@@ -17,15 +17,16 @@
   import { Person, PersonAccount } from '@hcengineering/contact'
   import { Class, Doc, Ref, getCurrentAccount } from '@hcengineering/core'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import { Button, EditBox, Icon, IconClose, showPopup, IconMoreH } from '@hcengineering/ui'
+  import { StyledTextBox } from '@hcengineering/text-editor'
+  import { Button, EditBox, Icon, IconClose, IconMoreH, showPopup } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
   import { saveUTC } from '../utils'
   import EventParticipants from './EventParticipants.svelte'
-  import EventTimeEditor from './EventTimeEditor.svelte'
-  import ReccurancePopup from './ReccurancePopup.svelte'
   import EventReminders from './EventReminders.svelte'
+  import EventTimeEditor from './EventTimeEditor.svelte'
   import EventTimeExtraButton from './EventTimeExtraButton.svelte'
+  import ReccurancePopup from './ReccurancePopup.svelte'
 
   export let attachedTo: Ref<Doc> = calendar.ids.NoAttached
   export let attachedToClass: Ref<Class<Doc>> = calendar.class.Event
@@ -153,7 +154,14 @@
   <div class="block flex-no-shrink">
     <div class="flex-row-center gap-1-5">
       <Icon icon={calendar.icon.Description} size={'small'} />
-      <EditBox bind:value={description} placeholder={calendar.string.Description} kind={'ghost'} fullSize focusable />
+      <StyledTextBox
+        alwaysEdit={true}
+        kind={'indented'}
+        maxHeight={'limited'}
+        showButtons={false}
+        placeholder={calendar.string.Description}
+        bind:content={description}
+      />
     </div>
   </div>
   <div class="block rightCropPadding">

plugins/calendar-resources/src/components/EditEvent.svelte

@@ -17,17 +17,18 @@
   import { Person } from '@hcengineering/contact'
   import { DocumentUpdate, Ref } from '@hcengineering/core'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import { Button, DAY, EditBox, Icon, IconClose, IconMoreH, closePopup, showPopup } from '@hcengineering/ui'
+  import { StyledTextBox } from '@hcengineering/text-editor'
+  import { Button, DAY, EditBox, Icon, IconClose, closePopup, showPopup } from '@hcengineering/ui'
+  import { deepEqual } from 'fast-equals'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
   import { isReadOnly, saveUTC } from '../utils'
   import EventParticipants from './EventParticipants.svelte'
+  import EventReminders from './EventReminders.svelte'
   import EventTimeEditor from './EventTimeEditor.svelte'
+  import EventTimeExtraButton from './EventTimeExtraButton.svelte'
   import ReccurancePopup from './ReccurancePopup.svelte'
   import UpdateRecInstancePopup from './UpdateRecInstancePopup.svelte'
-  import { deepEqual } from 'fast-equals'
-  import EventReminders from './EventReminders.svelte'
-  import EventTimeExtraButton from './EventTimeExtraButton.svelte'
 
   export let object: Event
   $: readOnly = isReadOnly(object)
@@ -225,7 +226,6 @@
       focusIndex={10001}
     />
     <div class="flex-row-center gap-1 flex-no-shrink ml-3">
-      <Button id="card-more" focusIndex={10002} icon={IconMoreH} kind={'ghost'} size={'small'} on:click={() => {}} />
       <Button
         id="card-close"
         focusIndex={10003}
@@ -248,13 +248,13 @@
   <div class="block flex-no-shrink">
     <div class="flex-row-center gap-1-5">
       <Icon icon={calendar.icon.Description} size={'small'} />
-      <EditBox
-        bind:value={description}
+      <StyledTextBox
+        alwaysEdit={true}
+        kind={'indented'}
+        maxHeight={'limited'}
+        showButtons={false}
         placeholder={calendar.string.Description}
-        kind={'ghost'}
-        fullSize
-        focusable
-        disabled={readOnly}
+        bind:content={description}
       />
     </div>
   </div>

plugins/calendar-resources/src/components/EventPresenter.svelte

@@ -14,7 +14,10 @@
 -->
 <script lang="ts">
   import { Event } from '@hcengineering/calendar'
+  import { Doc } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
   import { DatePresenter, DateTimeRangePresenter, Label, showPopup } from '@hcengineering/ui'
+  import view, { ObjectEditor } from '@hcengineering/view'
   import calendar from '../plugin'
 
   export let value: Event
@@ -22,7 +25,14 @@
   export let inline: boolean = false
 
   function click (): void {
-    showPopup(calendar.component.EditEvent, { object: value }, 'content')
+    if (!hideDetails) {
+      const client = getClient()
+      const hierarchy = client.getHierarchy()
+      const editor = hierarchy.classHierarchyMixin<Doc, ObjectEditor>(value._class, view.mixin.ObjectEditor)
+      if (editor?.editor !== undefined) {
+        showPopup(editor.editor, { object: value })
+      }
+    }
   }
 </script>