codevdesign 1.0.78 → 2.0.0

package/composants/csqcEditeurTexteRiche.vue

@@ -1,378 +1,378 @@
-<template>
-  <div class="editor">
-    <Editor
-      v-if="editorReady"
-      v-model="editorValue"
-      :init="initOptions"
-      :disabled="desactiver"
-      license-key="gpl"
-      v-bind="$attrs"
-      @blur="onBlur"
-      @keydown="onUserActivity"
-      @change="onUserActivity"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-
-  import { computed, ref, watch, nextTick, defineAsyncComponent } from 'vue'
-  import type { Editor as TinyMCEEditor } from 'tinymce'
-
-  // TinyMCE chargé en chunk séparé (code-splitting)
-  const Editor = defineAsyncComponent(async () => {
-    // Le core doit s'initialiser en premier
-    await import('tinymce/tinymce.js')
-    // Tout le reste en parallèle
-    await Promise.all([
-      import('tinymce/icons/default/icons.min.js'),
-      import('tinymce/themes/silver/theme.min.js'),
-      import('tinymce/models/dom/model.min.js'),
-      import('tinymce/skins/ui/oxide/skin.js'),
-      import('tinymce/skins/ui/oxide/content.js'),
-      import('tinymce/skins/content/default/content.js'),
-      import('tinymce-i18n/langs7/fr_FR'),
-      import('tinymce/plugins/autoresize/plugin.min.js'),
-      import('tinymce/plugins/advlist/plugin.min.js'),
-      import('tinymce/plugins/lists/plugin.min.js'),
-      import('tinymce/plugins/link/plugin.min.js'),
-      import('tinymce/plugins/autolink/plugin.min.js'),
-      import('tinymce/plugins/fullscreen/plugin.min.js'),
-      import('tinymce/plugins/table/plugin.min.js'),
-      import('tinymce/plugins/image/plugin.min.js'),
-      import('tinymce/plugins/code/plugin.min.js'),
-    ])
-    return (await import('@tinymce/tinymce-vue')).default
-  })
-
-  const openLink = (url?: string | null, target?: string | null) => {
-    if (!url) return
-    if (import.meta.env.MODE !== 'development') {
-      if (target && target !== '_blank') {
-        document.location.href = url
-        return
-      }
-      window.open(url, target || '_blank', 'noopener,noreferrer')
-    }
-  }
-
-  type PluginsProp = string | string[]
-  type ToolbarProp = string | string[]
-
-  interface Props {
-    modelValue?: string
-    langue?: string
-    interdireRedimension?: boolean
-    desactiver?: boolean
-    plugins?: PluginsProp // optionnel
-    autoriserImage?: boolean
-    imageTailleMaximale?: number
-    cacherBarreMenu?: boolean
-    cacherBarreOutils?: boolean
-    toolbar?: ToolbarProp // optionnel
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    modelValue: '',
-    langue: 'fr_FR',
-    interdireRedimension: false,
-    desactiver: false,
-    plugins: 'autoresize table image link fullscreen advlist lists autolink code',
-    autoriserImage: false,
-    imageTailleMaximale: 5,
-    cacherBarreMenu: false,
-    cacherBarreOutils: false,
-    toolbar:
-      'print | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | ' +
-      'alignleft aligncenter alignright alignjustify | bullist numlist | ' +
-      'image | link | outdent indent blockquote | undo redo | fullscreen | removeformat | table | code',
-  })
-
-  const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-    (e: 'blur'): void
-  }>()
-
-  const editorReady = ref(true)
-  const editorValue = ref<string>(props.modelValue)
-  const _editor = ref<TinyMCEEditor | null>(null)
-  let _reinitPending = false
-  let _reinitLock = false
-
-  const imageTailleMaxMo = computed<number>(() => {
-    const n = Number(props.imageTailleMaximale)
-    if (!Number.isFinite(n)) return 5
-    return Math.min(100, Math.max(0, n))
-  })
-
-  const normalizeToolbar = (tb: string): string => {
-    const trimmed = (tb || '').trim()
-    return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
-  }
-
-  const toolbarEffective = computed<string | false>(() => {
-    if (props.cacherBarreOutils) return false
-
-    const raw = Array.isArray(props.toolbar) ? props.toolbar.join(' | ') : props.toolbar
-    if (props.autoriserImage) return normalizeToolbar(raw)
-
-    const sansImage = raw
-      .replace(/\bimage\b/g, '')
-      .replace(/\s*\|\s*/g, ' | ')
-      .replace(/(\s*\|\s*){2,}/g, ' | ')
-      .replace(/^\s*\|\s*|\s*\|\s*$/g, '')
-      .replace(/\s{2,}/g, ' ')
-      .trim()
-
-    return normalizeToolbar(sansImage)
-  })
-
-  const pluginsEffective = computed<string>(() => {
-    const list = (Array.isArray(props.plugins) ? props.plugins : props.plugins.split(/\s+/))
-      .map(p => p.trim())
-      .filter(Boolean)
-
-    const filtered = !props.autoriserImage ? list.filter(p => p !== 'image') : list
-    return filtered.join(' ')
-  })
-
-  const initOptions = computed<any>(() => {
-    const opts: any = {
-      autolink: !props.desactiver,
-      autoresize: true,
-      automatic_uploads: props.autoriserImage,
-      branding: false,
-      browser_spellcheck: true,
-      content_css: 'default',
-      deprecation_warnings: false,
-      highlight_on_focus: false,
-      image_dimensions: true,
-      language: props.langue === 'en' ? 'en_US' : 'fr_FR',
-      license_key: 'gpl',
-      menubar: !props.cacherBarreMenu,
-      object_resizing: true,
-      paste_data_images: props.autoriserImage,
-      plugins: pluginsEffective.value,
-      promotion: false,
-      readonly: props.desactiver,
-      resize: !props.interdireRedimension,
-      resize_img_proportional: props.autoriserImage,
-      skin_url: 'default',
-      statusbar: props.cacherBarreOutils === false,
-      theme_advanced_resizing: true,
-      theme_advanced_resizing_use_cookie: false,
-      toolbar: toolbarEffective.value,
-      ...(props.autoriserImage ? { file_picker_types: 'image' } : {}),
-
-      setup: (editor: TinyMCEEditor) => {
-        _editor.value = editor
-
-        // liens cliquables
-        editor.on('click', (e: any) => {
-          const a = e.target?.closest?.('a')
-          if (!a) return
-          const href = a.getAttribute('href')
-          const target = a.getAttribute('target')
-          if (href) {
-            e.preventDefault()
-            openLink(href, target)
-          }
-        })
-
-        editor.on('keydown', (e: KeyboardEvent) => {
-          if (e.key !== 'Enter') return
-          const node = editor.selection?.getNode?.()
-          const a = (node as any)?.closest?.('a')
-          if (a) {
-            e.preventDefault()
-            openLink(a.getAttribute('href'), a.getAttribute('target'))
-          }
-        })
-
-        // Si images interdites
-        if (!props.autoriserImage) {
-          const removeImagesFromDom = () => {
-            const body = editor.getBody()
-            if (!body) return
-            body.querySelectorAll('img').forEach(img => img.remove())
-          }
-
-          // collage
-          editor.on('paste', (e: any) => {
-            const dt: DataTransfer | null = e.clipboardData || e.originalEvent?.clipboardData || null
-            if (!dt) return
-
-            const items = Array.from(dt.items || [])
-            const hasImage = items.some(item => item.kind === 'file' && item.type && item.type.startsWith('image/'))
-
-            if (hasImage) {
-              const text = dt.getData('text/plain')
-              if (!text) {
-                e.preventDefault()
-                return
-              }
-
-              e.preventDefault()
-              editor.insertContent(editor.dom.encode(text))
-            }
-
-            setTimeout(removeImagesFromDom, 0)
-          })
-
-          // drag & drop
-          editor.on('drop', (e: DragEvent) => {
-            const dt = e.dataTransfer
-            if (!dt) return
-            const hasImageFile = Array.from(dt.items || []).some(
-              i => i.kind === 'file' && i.type && i.type.startsWith('image/'),
-            )
-            if (hasImageFile) {
-              e.preventDefault()
-              return
-            }
-            setTimeout(removeImagesFromDom, 0)
-          })
-
-          editor.on('input', removeImagesFromDom)
-          editor.on('SetContent', removeImagesFromDom)
-        }
-      },
-    }
-
-    if (!props.autoriserImage) {
-      opts.paste_data_images = false
-      opts.invalid_elements = 'img'
-      opts.images_upload_handler = (_blobInfo: any, _success: any, failure: (msg: string) => void) => {
-        failure('Les images sont désactivées dans cet éditeur.')
-      }
-    }
-
-    if (props.autoriserImage) {
-      opts.file_picker_callback = (cb: (url: string, meta?: any) => void) => {
-        const input = document.createElement('input')
-        input.type = 'file'
-        input.accept = 'image/*'
-        input.onchange = () => {
-          const file = input.files?.[0]
-          if (!file) return
-
-          const reader = new FileReader()
-          reader.onload = () => {
-            const base64 = String(reader.result).split(',')[1]
-            const editor = _editor.value as any
-            const blobCache = editor?.editorUpload?.blobCache
-            if (!blobCache) return
-
-            const id = 'blobid' + Date.now()
-            const blobInfo = blobCache.create(id, file, base64)
-            const imageSize = blobInfo.blob().size / 1_000_000
-            if (imageSize > imageTailleMaxMo.value) {
-              alert('Fichier trop volumineux > ' + imageTailleMaxMo.value + ' Mo')
-              return
-            }
-            blobCache.add(blobInfo)
-            cb(blobInfo.blobUri(), { title: file.name })
-          }
-          reader.readAsDataURL(file)
-        }
-        input.click()
-      }
-    }
-
-    return opts
-  })
-
-  // --- v-model sync ---
-  watch(
-    () => props.modelValue,
-    v => {
-      if (v !== editorValue.value) {
-        editorValue.value = v
-      }
-    },
-  )
-
-  watch(
-    () => editorValue.value,
-    v => {
-      if (v !== props.modelValue) {
-        emit('update:modelValue', v)
-      }
-    },
-  )
-
-  // --- Re-montage TinyMCE si props importantes changent ---
-  const scheduleReinit = () => {
-    if (_reinitPending) return
-    _reinitPending = true
-    queueMicrotask(async () => {
-      _reinitPending = false
-      await reinitEditor()
-    })
-  }
-
-  const reinitEditor = async () => {
-    if (_reinitLock) return
-    _reinitLock = true
-    try {
-      const ed = _editor.value as any
-      if (ed && typeof ed.remove === 'function') {
-        try {
-          ed.remove()
-        } catch (e) {
-          console.warn('[Editeur] editor.remove erreur', e)
-        }
-      }
-      _editor.value = null
-      editorReady.value = false
-      await nextTick()
-      editorReady.value = true
-      await nextTick()
-    } finally {
-      _reinitLock = false
-    }
-  }
-
-  watch(
-    () => [
-      props.autoriserImage,
-      props.interdireRedimension,
-      props.toolbar,
-      props.imageTailleMaximale,
-      props.plugins,
-      props.cacherBarreOutils,
-      props.cacherBarreMenu,
-    ],
-    () => {
-      scheduleReinit()
-    },
-    { deep: true },
-  )
-
-  const onBlur = () => {
-    if (!props.desactiver) emit('blur')
-  }
-
-  const onUserActivity = () => {
-    // hook pour autosave / "user is typing" si besoin
-  }
-
-  const insererAuCurseur = (texte: string) => {
-    const ed = _editor.value
-    if (!ed) return
-    ed.focus()
-    ;(ed as any).insertContent(texte)
-  }
-
-  // (optionnel) expose si tu veux appeler `insererAuCurseur` depuis le parent
-  defineExpose({
-    insererAuCurseur,
-  })
-</script>
-
-<style scoped>
-  .editor a {
-    cursor: pointer !important;
-  }
-</style>
+<template>
+  <div class="editor">
+    <Editor
+      v-if="editorReady"
+      v-model="editorValue"
+      :init="initOptions"
+      :disabled="desactiver"
+      license-key="gpl"
+      v-bind="$attrs"
+      @blur="onBlur"
+      @keydown="onUserActivity"
+      @change="onUserActivity"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  import { computed, ref, watch, nextTick, defineAsyncComponent } from 'vue'
+  import type { Editor as TinyMCEEditor } from 'tinymce'
+
+  // TinyMCE chargé en chunk séparé (code-splitting)
+  const Editor = defineAsyncComponent(async () => {
+    // Le core doit s'initialiser en premier
+    await import('tinymce/tinymce.js')
+    // Tout le reste en parallèle
+    await Promise.all([
+      import('tinymce/icons/default/icons.min.js'),
+      import('tinymce/themes/silver/theme.min.js'),
+      import('tinymce/models/dom/model.min.js'),
+      import('tinymce/skins/ui/oxide/skin.js'),
+      import('tinymce/skins/ui/oxide/content.js'),
+      import('tinymce/skins/content/default/content.js'),
+      import('tinymce-i18n/langs7/fr_FR'),
+      import('tinymce/plugins/autoresize/plugin.min.js'),
+      import('tinymce/plugins/advlist/plugin.min.js'),
+      import('tinymce/plugins/lists/plugin.min.js'),
+      import('tinymce/plugins/link/plugin.min.js'),
+      import('tinymce/plugins/autolink/plugin.min.js'),
+      import('tinymce/plugins/fullscreen/plugin.min.js'),
+      import('tinymce/plugins/table/plugin.min.js'),
+      import('tinymce/plugins/image/plugin.min.js'),
+      import('tinymce/plugins/code/plugin.min.js'),
+    ])
+    return (await import('@tinymce/tinymce-vue')).default
+  })
+
+  const openLink = (url?: string | null, target?: string | null) => {
+    if (!url) return
+    if (import.meta.env.MODE !== 'development') {
+      if (target && target !== '_blank') {
+        document.location.href = url
+        return
+      }
+      window.open(url, target || '_blank', 'noopener,noreferrer')
+    }
+  }
+
+  type PluginsProp = string | string[]
+  type ToolbarProp = string | string[]
+
+  interface Props {
+    modelValue?: string
+    langue?: string
+    interdireRedimension?: boolean
+    desactiver?: boolean
+    plugins?: PluginsProp // optionnel
+    autoriserImage?: boolean
+    imageTailleMaximale?: number
+    cacherBarreMenu?: boolean
+    cacherBarreOutils?: boolean
+    toolbar?: ToolbarProp // optionnel
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: '',
+    langue: 'fr_FR',
+    interdireRedimension: false,
+    desactiver: false,
+    plugins: 'autoresize table image link fullscreen advlist lists autolink code',
+    autoriserImage: false,
+    imageTailleMaximale: 5,
+    cacherBarreMenu: false,
+    cacherBarreOutils: false,
+    toolbar:
+      'print | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | ' +
+      'alignleft aligncenter alignright alignjustify | bullist numlist | ' +
+      'image | link | outdent indent blockquote | undo redo | fullscreen | removeformat | table | code',
+  })
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+    (e: 'blur'): void
+  }>()
+
+  const editorReady = ref(true)
+  const editorValue = ref<string>(props.modelValue)
+  const _editor = ref<TinyMCEEditor | null>(null)
+  let _reinitPending = false
+  let _reinitLock = false
+
+  const imageTailleMaxMo = computed<number>(() => {
+    const n = Number(props.imageTailleMaximale)
+    if (!Number.isFinite(n)) return 5
+    return Math.min(100, Math.max(0, n))
+  })
+
+  const normalizeToolbar = (tb: string): string => {
+    const trimmed = (tb || '').trim()
+    return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
+  }
+
+  const toolbarEffective = computed<string | false>(() => {
+    if (props.cacherBarreOutils) return false
+
+    const raw = Array.isArray(props.toolbar) ? props.toolbar.join(' | ') : props.toolbar
+    if (props.autoriserImage) return normalizeToolbar(raw)
+
+    const sansImage = raw
+      .replace(/\bimage\b/g, '')
+      .replace(/\s*\|\s*/g, ' | ')
+      .replace(/(\s*\|\s*){2,}/g, ' | ')
+      .replace(/^\s*\|\s*|\s*\|\s*$/g, '')
+      .replace(/\s{2,}/g, ' ')
+      .trim()
+
+    return normalizeToolbar(sansImage)
+  })
+
+  const pluginsEffective = computed<string>(() => {
+    const list = (Array.isArray(props.plugins) ? props.plugins : props.plugins.split(/\s+/))
+      .map(p => p.trim())
+      .filter(Boolean)
+
+    const filtered = !props.autoriserImage ? list.filter(p => p !== 'image') : list
+    return filtered.join(' ')
+  })
+
+  const initOptions = computed<any>(() => {
+    const opts: any = {
+      autolink: !props.desactiver,
+      autoresize: true,
+      automatic_uploads: props.autoriserImage,
+      branding: false,
+      browser_spellcheck: true,
+      content_css: 'default',
+      deprecation_warnings: false,
+      highlight_on_focus: false,
+      image_dimensions: true,
+      language: props.langue === 'en' ? 'en_US' : 'fr_FR',
+      license_key: 'gpl',
+      menubar: !props.cacherBarreMenu,
+      object_resizing: true,
+      paste_data_images: props.autoriserImage,
+      plugins: pluginsEffective.value,
+      promotion: false,
+      readonly: props.desactiver,
+      resize: !props.interdireRedimension,
+      resize_img_proportional: props.autoriserImage,
+      skin_url: 'default',
+      statusbar: props.cacherBarreOutils === false,
+      theme_advanced_resizing: true,
+      theme_advanced_resizing_use_cookie: false,
+      toolbar: toolbarEffective.value,
+      ...(props.autoriserImage ? { file_picker_types: 'image' } : {}),
+
+      setup: (editor: TinyMCEEditor) => {
+        _editor.value = editor
+
+        // liens cliquables
+        editor.on('click', (e: any) => {
+          const a = e.target?.closest?.('a')
+          if (!a) return
+          const href = a.getAttribute('href')
+          const target = a.getAttribute('target')
+          if (href) {
+            e.preventDefault()
+            openLink(href, target)
+          }
+        })
+
+        editor.on('keydown', (e: KeyboardEvent) => {
+          if (e.key !== 'Enter') return
+          const node = editor.selection?.getNode?.()
+          const a = (node as any)?.closest?.('a')
+          if (a) {
+            e.preventDefault()
+            openLink(a.getAttribute('href'), a.getAttribute('target'))
+          }
+        })
+
+        // Si images interdites
+        if (!props.autoriserImage) {
+          const removeImagesFromDom = () => {
+            const body = editor.getBody()
+            if (!body) return
+            body.querySelectorAll('img').forEach(img => img.remove())
+          }
+
+          // collage
+          editor.on('paste', (e: any) => {
+            const dt: DataTransfer | null = e.clipboardData || e.originalEvent?.clipboardData || null
+            if (!dt) return
+
+            const items = Array.from(dt.items || [])
+            const hasImage = items.some(item => item.kind === 'file' && item.type && item.type.startsWith('image/'))
+
+            if (hasImage) {
+              const text = dt.getData('text/plain')
+              if (!text) {
+                e.preventDefault()
+                return
+              }
+
+              e.preventDefault()
+              editor.insertContent(editor.dom.encode(text))
+            }
+
+            setTimeout(removeImagesFromDom, 0)
+          })
+
+          // drag & drop
+          editor.on('drop', (e: DragEvent) => {
+            const dt = e.dataTransfer
+            if (!dt) return
+            const hasImageFile = Array.from(dt.items || []).some(
+              i => i.kind === 'file' && i.type && i.type.startsWith('image/'),
+            )
+            if (hasImageFile) {
+              e.preventDefault()
+              return
+            }
+            setTimeout(removeImagesFromDom, 0)
+          })
+
+          editor.on('input', removeImagesFromDom)
+          editor.on('SetContent', removeImagesFromDom)
+        }
+      },
+    }
+
+    if (!props.autoriserImage) {
+      opts.paste_data_images = false
+      opts.invalid_elements = 'img'
+      opts.images_upload_handler = (_blobInfo: any, _success: any, failure: (msg: string) => void) => {
+        failure('Les images sont désactivées dans cet éditeur.')
+      }
+    }
+
+    if (props.autoriserImage) {
+      opts.file_picker_callback = (cb: (url: string, meta?: any) => void) => {
+        const input = document.createElement('input')
+        input.type = 'file'
+        input.accept = 'image/*'
+        input.onchange = () => {
+          const file = input.files?.[0]
+          if (!file) return
+
+          const reader = new FileReader()
+          reader.onload = () => {
+            const base64 = String(reader.result).split(',')[1]
+            const editor = _editor.value as any
+            const blobCache = editor?.editorUpload?.blobCache
+            if (!blobCache) return
+
+            const id = 'blobid' + Date.now()
+            const blobInfo = blobCache.create(id, file, base64)
+            const imageSize = blobInfo.blob().size / 1_000_000
+            if (imageSize > imageTailleMaxMo.value) {
+              alert('Fichier trop volumineux > ' + imageTailleMaxMo.value + ' Mo')
+              return
+            }
+            blobCache.add(blobInfo)
+            cb(blobInfo.blobUri(), { title: file.name })
+          }
+          reader.readAsDataURL(file)
+        }
+        input.click()
+      }
+    }
+
+    return opts
+  })
+
+  // --- v-model sync ---
+  watch(
+    () => props.modelValue,
+    v => {
+      if (v !== editorValue.value) {
+        editorValue.value = v
+      }
+    },
+  )
+
+  watch(
+    () => editorValue.value,
+    v => {
+      if (v !== props.modelValue) {
+        emit('update:modelValue', v)
+      }
+    },
+  )
+
+  // --- Re-montage TinyMCE si props importantes changent ---
+  const scheduleReinit = () => {
+    if (_reinitPending) return
+    _reinitPending = true
+    queueMicrotask(async () => {
+      _reinitPending = false
+      await reinitEditor()
+    })
+  }
+
+  const reinitEditor = async () => {
+    if (_reinitLock) return
+    _reinitLock = true
+    try {
+      const ed = _editor.value as any
+      if (ed && typeof ed.remove === 'function') {
+        try {
+          ed.remove()
+        } catch (e) {
+          console.warn('[Editeur] editor.remove erreur', e)
+        }
+      }
+      _editor.value = null
+      editorReady.value = false
+      await nextTick()
+      editorReady.value = true
+      await nextTick()
+    } finally {
+      _reinitLock = false
+    }
+  }
+
+  watch(
+    () => [
+      props.autoriserImage,
+      props.interdireRedimension,
+      props.toolbar,
+      props.imageTailleMaximale,
+      props.plugins,
+      props.cacherBarreOutils,
+      props.cacherBarreMenu,
+    ],
+    () => {
+      scheduleReinit()
+    },
+    { deep: true },
+  )
+
+  const onBlur = () => {
+    if (!props.desactiver) emit('blur')
+  }
+
+  const onUserActivity = () => {
+    // hook pour autosave / "user is typing" si besoin
+  }
+
+  const insererAuCurseur = (texte: string) => {
+    const ed = _editor.value
+    if (!ed) return
+    ed.focus()
+    ;(ed as any).insertContent(texte)
+  }
+
+  // (optionnel) expose si tu veux appeler `insererAuCurseur` depuis le parent
+  defineExpose({
+    insererAuCurseur,
+  })
+</script>
+
+<style scoped>
+  .editor a {
+    cursor: pointer !important;
+  }
+</style>