Text editor: Move is empty to extension (#3781)

* Move is empty to extension

Signed-off-by: Anna No <anna.no@xored.com>

* Move is empty to extension

Signed-off-by: Anna No <anna.no@xored.com>

* Move is empty to extension

Signed-off-by: Anna No <anna.no@xored.com>

---------

Signed-off-by: Anna No <anna.no@xored.com>

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

@@ -35,6 +35,7 @@
   import TextEditor from './TextEditor.svelte'
   import { completionConfig } from './extensions'
   import { EmojiExtension } from './extension/emoji'
+  import { IsEmptyContentExtension } from './extension/isEmptyContent'
   import Attach from './icons/Attach.svelte'
   import RIMention from './icons/RIMention.svelte'
   import Send from './icons/Send.svelte'
@@ -160,7 +161,6 @@
     <div class="inputMsg">
       <TextEditor
         bind:content
-        bind:isEmpty
         bind:this={textEditor}
         on:content={(ev) => {
           if (!isEmpty || haveAttachment) {
@@ -178,7 +178,11 @@
           updateFocus()
           dispatch('focus', focused)
         }}
-        extensions={[completionPlugin, EmojiExtension.configure()]}
+        extensions={[
+          completionPlugin,
+          EmojiExtension.configure(),
+          IsEmptyContentExtension.configure({ onChange: (value) => (isEmpty = value) })
+        ]}
         on:update
         placeholder={placeholder ?? textEditorPlugin.string.EditorPlaceholder}
         textFormatCategories={[

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

@@ -40,7 +40,6 @@
   export let previewLimit: number = 240
   export let previewUnlimit: boolean = false
   export let focusable: boolean = false
-  export let enableFormatting = false
   export let autofocus = false
   export let enableBackReferences: boolean = false
   export let enableEmojiReplace: boolean = true
@@ -114,10 +113,6 @@
     needFocus = false
   }
 
-  export function isEmptyContent (): boolean {
-    return textEditor.isEmptyContent()
-  }
-
   // Focusable control with index
   export let focusIndex = -1
   const { idx, focusManager } = registerFocus(focusIndex, {
@@ -213,7 +208,6 @@
       {formatButtonSize}
       {maxHeight}
       {focusable}
-      {enableFormatting}
       {autofocus}
       {isScrollable}
       {extensions}

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

@@ -36,7 +36,6 @@
   export let isScrollable: boolean = true
   export let focusable: boolean = false
   export let maxHeight: 'max' | 'card' | 'limited' | string | undefined = undefined
-  export let enableFormatting = false
   export let autofocus = false
   export let full = false
   export let extensions: AnyExtension[] = []
@@ -53,7 +52,6 @@
 
   let textEditor: TextEditor
 
-  let isEmpty = true
   let contentHeight: number
 
   export function submit (): void {
@@ -74,9 +72,6 @@
   export function setContent (data: string): void {
     textEditor.setContent(data)
   }
-  export function isEmptyContent (): boolean {
-    return textEditor.isEmptyContent()
-  }
   export function insertText (text: string): void {
     textEditor.insertText(text)
   }
@@ -216,7 +211,6 @@
             {extensions}
             {textFormatCategories}
             bind:this={textEditor}
-            bind:isEmpty
             on:value
             on:content={(ev) => {
               dispatch('message', ev.detail)
@@ -236,7 +230,6 @@
           {extensions}
           {textFormatCategories}
           bind:this={textEditor}
-          bind:isEmpty
           on:value
           on:content={(ev) => {
             dispatch('message', ev.detail)

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

@@ -36,7 +36,6 @@
   export let extensions: AnyExtension[] = []
   export let textFormatCategories: TextFormatCategory[] = []
   export let supportSubmit = true
-  export let isEmpty = true
   export let editorAttributes: { [name: string]: string } = {}
 
   let element: HTMLElement
@@ -64,25 +63,17 @@
     if (content !== newContent) {
       content = newContent
       editor.commands.setContent(content)
-      isEmpty = editor.isEmpty
     }
   }
   export function clear (): void {
     content = ''
-    editor.commands.clearContent(false)
 
-    // editor.commands.clearContent false as argument prevent from onUpdate
-    // so if we want to stay in sync with editor.isEmpty we need to do this manually
-    isEmpty = true
+    editor.commands.clearContent(true)
   }
   export function insertText (text: string): void {
     editor.commands.insertContent(text as HTMLContent)
   }
 
-  export function isEmptyContent (): boolean {
-    return isEmpty
-  }
-
   let needFocus = false
   let focused = false
   let posFocus: FocusPosition | undefined = undefined
@@ -169,14 +160,10 @@
         },
         onUpdate: () => {
           content = editor.getHTML()
-          isEmpty = editor.isEmpty
           showContextMenu = false
           dispatch('value', content)
           dispatch('update', content)
         },
-        onCreate: () => {
-          isEmpty = editor.isEmpty
-        },
         onSelectionUpdate: () => {
           showContextMenu = false
         }

plugins/attachment-resources/src/components/AccordionEditor.svelte

@@ -16,7 +16,7 @@
   import { createEventDispatcher } from 'svelte'
   import { Doc, Ref, Space, Class } from '@hcengineering/core'
   import { Button, Label, IconDownOutline, tooltip } from '@hcengineering/ui'
-  import textEditorPlugin, { TextEditor } from '@hcengineering/text-editor'
+  import textEditorPlugin, { IsEmptyContentExtension, TextEditor } from '@hcengineering/text-editor'
   import type { AccordionItem } from '..'
   import AttachmentStyledBox from './AttachmentStyledBox.svelte'
 
@@ -87,7 +87,7 @@
             <TextEditor
               bind:content={item.content}
               bind:this={edits[i]}
-              bind:isEmpty={isEmpty[i]}
+              extensions={[IsEmptyContentExtension.configure({ onChange: (value) => (isEmpty[i] = value) })]}
               on:value={(ev) => {
                 dispatch('update', { item, value: ev.detail })
               }}

plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

@@ -339,9 +339,6 @@
       }
     }
   }
-  export function isEmptyContent (): boolean {
-    return refInput.isEmptyContent()
-  }
 
   $: dispatch('attachments', {
     size: attachments.size,