diff --git a/src/components/MessageComposer.vue b/src/components/MessageComposer.vue index c92e1e8..238b922 100644 --- a/src/components/MessageComposer.vue +++ b/src/components/MessageComposer.vue @@ -12,6 +12,7 @@ import type { CollectionObject, MessageAddressObject } from '@MailManager/models import { useMailOperationsStore } from '@/stores/mailOperationsStore' import { useMailCompositionStore } from '@/stores/mailCompositionStore' import { ComposerMode } from '@/types/composer' +import type { ComposerFormat } from '@/types/composer' import { documentsSelectorComponent } from '@/services/documentsSelector' import ComposerToolbar from '@/components/composer/ComposerToolbar.vue' import ComposerSender from '@/components/composer/ComposerSender.vue' @@ -48,6 +49,8 @@ const { // State const showCc = ref(false) const showBcc = ref(false) +const format = ref('rich') +const textEdited = ref(false) const applyingDraftToEditor = ref(false) const showDocumentSelector = ref(false) const showCloseDialog = ref(false) @@ -85,6 +88,14 @@ const subject = computed({ const attachments = computed(() => activeDraft.value?.attachments ?? {}) +const text = computed({ + get: () => activeDraft.value?.message.body.text ?? '', + set: value => { + textEdited.value = true + compositionStore.updateBody({ text: value, html: textToHtml(value) }) + }, +}) + // Initialize Tiptap editor const editor = useEditor({ extensions: [ @@ -118,6 +129,8 @@ watch( compositionStore.openDraft(props.mode, props.source) showCc.value = (activeDraft.value?.message.cc.length ?? 0) > 0 showBcc.value = (activeDraft.value?.message.bcc.length ?? 0) > 0 + format.value = 'rich' + textEdited.value = false applyingDraftToEditor.value = true currentEditor.commands.setContent(activeDraft.value?.message.body.html || '') @@ -249,6 +262,42 @@ const toggleLink = () => { const isActive = (name: string, attrs?: any) => { return editor.value?.isActive(name, attrs) || false } + +const toggleFormat = () => { + if (format.value === 'rich') { + if (editor.value) { + compositionStore.updateBody({ + html: activeDraft.value?.message.body.html ?? '', + text: editor.value.getText(), + }) + } + textEdited.value = false + format.value = 'plain' + return + } + + format.value = 'rich' + if (textEdited.value && editor.value) { + applyingDraftToEditor.value = true + editor.value.commands.setContent(activeDraft.value?.message.body.html || '') + applyingDraftToEditor.value = false + } +} + +function textToHtml(text: string): string { + if (!text) { + return '' + } + + return text + .split(/\r?\n/) + .map(line => `

${escapeHtml(line) || '
'}

`) + .join('') +} + +function escapeHtml(value: string): string { + return value.replace(/&/g, '&').replace(//g, '>') +}