Fix logo

Author: usselite

appinfo/info.xml

@@ -4,7 +4,7 @@
     <name>Sendent</name>
     <summary lang="en">Sendent allows you to securely exchange files and emails</summary>
     <description lang="en">Sendent now securely exchanges files and emails, integrating with both Microsoft Outlook and Microsoft Teams. This enhanced capability allows users to seamlessly conduct their work, not only within their preferred email environment but also within the collaborative framework of Microsoft Teams. Whether sharing privacy-sensitive documents, content, or handling attachments that exceed standard email size constraints, Sendent ensures a streamlined and secure communication experience. All files are directed to your Nextcloud instance, empowering you to control and manage access permissions effectively.</description>
-    <version>4.0.1</version>
+    <version>4.0.3</version>
     <licence>agpl</licence>
     <author mail="support@sendent.com" homepage="https://www.sendent.com">Sendent B.V.</author>
     <namespace>Sendent</namespace>

src/components/settings/SettingTextarea.vue

@@ -40,13 +40,17 @@
 
 <script setup lang="ts">
 import { ref, toRef } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useTinyMce } from '../../composables/useTinyMce'
+import { useDependenciesStore } from '../../stores/dependencies'
 
 const props = defineProps<{
 	modelValue: string
 	disabled: boolean
 }>()
 
+const { themingLogoUrl } = storeToRefs(useDependenciesStore())
+
 const emit = defineEmits<{
 	(e: 'save', content: string): void
 	(e: 'reset'): void
@@ -59,6 +63,7 @@ useTinyMce({
 	elementRef: editorRef,
 	value: toRef(props, 'modelValue'),
 	disabled: toRef(props, 'disabled'),
+	logoUrl: themingLogoUrl,
 	onSave(content: string) {
 		emit('save', content)
 	},

src/composables/useTinyMce.ts

@@ -38,12 +38,10 @@ import 'tinymce/plugins/preview'
 import 'tinymce/plugins/table'
 
 import { onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
-import { generateUrl } from '@nextcloud/router'
 import type { Editor } from 'tinymce'
 
-/** NC theming logo URL used to preview cid:logo.png@logo in the editor */
-const CID_LOGO = 'cid:logo.png@logo'
-const NC_LOGO_URL = generateUrl('/apps/theming/image/logoheader')
+/** Placeholder used in email templates for the organisation logo */
+const LOGO_PLACEHOLDER = '{LOGO}'
 
 const TEMPLATE_VARIABLES = [
 	'{URL}',
@@ -61,25 +59,24 @@ const TEMPLATE_VARIABLES = [
 ]
 
 /**
- * Replace cid: logo with NC theming URL for preview
- * @param html
+ * Replace {LOGO} placeholder with the theming logo URL for WYSIWYG preview
  */
-function toPreview(html: string): string {
-	return html.replaceAll(CID_LOGO, NC_LOGO_URL)
+function toPreview(html: string, logoUrl: string): string {
+	return html.replaceAll(LOGO_PLACEHOLDER, logoUrl)
 }
 
 /**
- * Restore cid: logo reference for saving
- * @param html
+ * Restore {LOGO} placeholder before persisting
  */
-function toStorage(html: string): string {
-	return html.replaceAll(NC_LOGO_URL, CID_LOGO)
+function toStorage(html: string, logoUrl: string): string {
+	return html.replaceAll(logoUrl, LOGO_PLACEHOLDER)
 }
 
 interface TinyMceOptions {
 	elementRef: Ref<HTMLElement | null>
 	value: Ref<string>
 	disabled: Ref<boolean>
+	logoUrl: Ref<string>
 	onSave: (content: string) => void
 }
 
@@ -129,12 +126,12 @@ export function useTinyMce(options: TinyMceOptions) {
 
 				// Sync initial content once editor is ready
 				ed.on('init', () => {
-					ed.setContent(toPreview(options.value.value || ''))
+					ed.setContent(toPreview(options.value.value || '', options.logoUrl.value))
 				})
 
 				// Emit changes on blur (not every keystroke)
 				ed.on('blur', () => {
-					const content = toStorage(ed.getContent())
+					const content = toStorage(ed.getContent(), options.logoUrl.value)
 					if (content !== options.value.value) {
 						options.onSave(content)
 					}
@@ -145,7 +142,7 @@ export function useTinyMce(options: TinyMceOptions) {
 
 	// Watch for external value changes (e.g. group switch)
 	watch(options.value, (newVal) => {
-		const preview = toPreview(newVal || '')
+		const preview = toPreview(newVal || '', options.logoUrl.value)
 		if (editor && editor.getContent() !== preview) {
 			editor.setContent(preview)
 		}

src/stores/dependencies.ts

@@ -20,6 +20,7 @@
  */
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { generateUrl } from '@nextcloud/router'
 import { fetchCapabilities } from '../services/capabilitiesApi'
 
 export interface AppDependency {
@@ -48,6 +49,7 @@ export const useDependenciesStore = defineStore('dependencies', () => {
 	const requiredApps = ref<AppDependency[]>([])
 	const recommendedApps = ref<AppDependency[]>([])
 	const loading = ref(false)
+	const themingLogoUrl = ref(generateUrl('/apps/theming/image/logoheader'))
 
 	/** Check which required/recommended apps are installed */
 	async function checkDependencies() {
@@ -67,6 +69,14 @@ export const useDependenciesStore = defineStore('dependencies', () => {
 				installed: capKeys.includes(app.id),
 				required: false,
 			}))
+
+			// Extract versioned logo URL from theming capabilities
+			const theming = capabilities.theming as Record<string, unknown> | undefined
+			if (theming && typeof theming.logoheader === 'string') {
+				themingLogoUrl.value = theming.logoheader
+			} else if (theming && typeof theming.logo === 'string') {
+				themingLogoUrl.value = theming.logo
+			}
 		} catch {
 			requiredApps.value = REQUIRED_APPS.map(app => ({
 				...app,
@@ -87,6 +97,7 @@ export const useDependenciesStore = defineStore('dependencies', () => {
 		requiredApps,
 		recommendedApps,
 		loading,
+		themingLogoUrl,
 		checkDependencies,
 	}
 })