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>
This commit is contained in:
Anna No 2023-10-03 17:53:51 +07:00 committed by GitHub
parent 3082f316e4
commit d97b476ecf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 9 additions and 34 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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