From d97b476ecfdabcef28658c7ae3f9cb378594bef8 Mon Sep 17 00:00:00 2001 From: Anna No Date: Tue, 3 Oct 2023 17:53:51 +0700 Subject: [PATCH] Text editor: Move is empty to extension (#3781) * Move is empty to extension Signed-off-by: Anna No * Move is empty to extension Signed-off-by: Anna No * Move is empty to extension Signed-off-by: Anna No --------- Signed-off-by: Anna No --- .../src/components/ReferenceInput.svelte | 8 ++++++-- .../src/components/StyledTextBox.svelte | 6 ------ .../src/components/StyledTextEditor.svelte | 7 ------- .../text-editor/src/components/TextEditor.svelte | 15 +-------------- .../src/components/AccordionEditor.svelte | 4 ++-- .../src/components/AttachmentStyledBox.svelte | 3 --- 6 files changed, 9 insertions(+), 34 deletions(-) diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte index 670fc1b493..754dcdaf94 100644 --- a/packages/text-editor/src/components/ReferenceInput.svelte +++ b/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 @@
{ 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={[ diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte index 45d2adc31b..ce874848bf 100644 --- a/packages/text-editor/src/components/StyledTextBox.svelte +++ b/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} diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte index 38fe91e584..d0163a5259 100644 --- a/packages/text-editor/src/components/StyledTextEditor.svelte +++ b/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) diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte index ed83107b38..59c43c860e 100644 --- a/packages/text-editor/src/components/TextEditor.svelte +++ b/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 } diff --git a/plugins/attachment-resources/src/components/AccordionEditor.svelte b/plugins/attachment-resources/src/components/AccordionEditor.svelte index 56f3584d5f..b0c4ebcc97 100644 --- a/plugins/attachment-resources/src/components/AccordionEditor.svelte +++ b/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 @@ (isEmpty[i] = value) })]} on:value={(ev) => { dispatch('update', { item, value: ev.detail }) }} diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte index a148392707..c1ea6536b1 100644 --- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte +++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte @@ -339,9 +339,6 @@ } } } - export function isEmptyContent (): boolean { - return refInput.isEmptyContent() - } $: dispatch('attachments', { size: attachments.size,