codevdesign 1.0.27 → 1.0.30

package/composants/csqcEditeurTexteRiche.vue

@@ -1,328 +1,380 @@
-<template>
-  <div class="editor">
-    <!-- Remount contrôlé pour TinyMCE -->
-    <Editor
-      v-bind="$attrs"
-      v-if="editorReady"
-      v-model="editorValue"
-      :init="initOptions"
-      :disabled="desactiver"
-      license-key="gpl"
-      @blur="onBlur"
-      @keydown="onUserActivity"
-      @change="onUserActivity"
-    />
-  </div>
-</template>
-
-<script>
-  import Editor from '@tinymce/tinymce-vue'
-  import * as tinymce from 'tinymce/tinymce.js'
-
-  // Core/skins/thème
-  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'
-
-  // Langue
-  import 'tinymce-i18n/langs7/fr_FR'
-
-  // Plugins
-  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/emoticons/plugin.min.js'
-  //import 'tinymce/plugins/emoticons/js/emojis.min.js'
-  import 'tinymce/plugins/code/plugin.min.js'
-
-  const openLink = (url, target) => {
-    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')
-    }
-  }
-
-  export default {
-    name: 'EditeurForm',
-    components: { Editor },
-
-    props: {
-      modelValue: { type: String, default: '' },
-      langue: { type: String, default: 'fr_FR' },
-      interdireRedimension: { type: Boolean, default: false },
-      desactiver: { type: Boolean, default: false },
-      plugins: {
-        type: [String, Array],
-        default: 'autoresize table image link fullscreen advlist lists autolink code',
-      },
-      interdireImage: { type: Boolean, default: false },
-      imageTailleMaximale: { type: Number, default: 5 }, // Mo
-      cacherBarreMenu: { type: Boolean, default: false },
-      cacherBarreOutils: { type: Boolean, default: false },
-      toolbar: {
-        type: [String, Array],
-        default:
-          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | ' +
-          'alignleft aligncenter alignright alignjustify | emoticons | bullist numlist | ' +
-          'image | link | outdent indent blockquote | undo redo | fullscreen | removeformat | table | code',
-      },
-    },
-
-    emits: ['update:modelValue', 'blur'],
-
-    data() {
-      return {
-        editorReady: true,
-        _editor: null,
-        editorValue: this.modelValue, // lié au v-model
-        _reinitPending: false,
-        _reinitLock: false,
-      }
-    },
-
-    computed: {
-      imageTailleMaxMo() {
-        const n = Number(this.imageTailleMaximale)
-        if (!Number.isFinite(n)) return 5
-        return Math.min(100, Math.max(0, n))
-      },
-
-      toolbarEffective() {
-        if (this.cacherBarreOutils) return false
-        const raw = Array.isArray(this.toolbar) ? this.toolbar.join(' | ') : this.toolbar
-        if (!this.interdireImage) return this._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 this._normalizeToolbar(sansImage)
-      },
-
-      pluginsEffective() {
-        const list = (Array.isArray(this.plugins) ? this.plugins : this.plugins.split(/\s+/))
-          .map(p => p.trim())
-          .filter(Boolean)
-        const filtered = this.interdireImage ? list.filter(p => p !== 'image') : list
-        return filtered.join(' ')
-      },
-
-      initOptions() {
-        const opts = {
-          autolink: !this.desactiver,
-          autoresize: true,
-          automatic_uploads: !this.interdireImage,
-          branding: false,
-          browser_spellcheck: true,
-          content_css: 'default',
-          deprecation_warnings: false,
-          emoticons_database: 'emojis',
-          highlight_on_focus: false,
-          image_dimensions: !this.interdireImage,
-          language: this.langue === 'en' ? 'en_US' : 'fr_FR',
-          license_key: 'gpl',
-          menubar: !this.cacherBarreMenu,
-          object_resizing: !this.interdireImage,
-          paste_data_images: !this.interdireImage,
-          plugins: this.pluginsEffective,
-          promotion: false,
-          readonly: this.desactiver,
-          resize: !this.interdireRedimension,
-          resize_img_proportional: !this.interdireImage,
-          skin_url: 'default',
-          statusbar: this.cacherBarreOutils === false,
-          theme_advanced_resizing: true,
-          theme_advanced_resizing_use_cookie: false,
-          toolbar: this.toolbarEffective,
-
-          // --- File picker seulement si images permises ---
-          ...(this.interdireImage ? {} : { file_picker_types: 'image' }),
-
-          setup: editor => {
-            this._editor = editor
-
-            editor.on('init', () => {
-              // init ok
-            })
-
-            // Intercepter clics liens
-            editor.on('click', e => {
-              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)
-              }
-            })
-
-            // ENTER sur un lien
-            editor.on('keydown', e => {
-              if (e.key !== 'Enter') return
-              const node = editor.selection?.getNode?.()
-              const a = node?.closest?.('a')
-              if (a) {
-                e.preventDefault()
-                openLink(a.getAttribute('href'), a.getAttribute('target'))
-              }
-            })
-          },
-        }
-
-        if (!this.interdireImage) {
-          opts.file_picker_callback = cb => {
-            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 = this._editor
-                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 > this.imageTailleMaxMo) {
-                  alert('Fichier trop volumineux > ' + this.imageTailleMaxMo + ' Mo')
-                  return
-                }
-                blobCache.add(blobInfo)
-                cb(blobInfo.blobUri(), { title: file.name })
-              }
-              reader.readAsDataURL(file)
-            }
-            input.click()
-          }
-        }
-
-        return opts
-      },
-    },
-
-    watch: {
-      /* v-model (parent -> enfant) */
-      modelValue(v) {
-        this.editorValue = v
-      },
-
-      /* v-model (enfant -> parent) */
-      editorValue(v) {
-        this.$emit('update:modelValue', v)
-      },
-
-      // Re-montage propre sur changements des props
-      interdireImage() {
-        this._scheduleReinit()
-      },
-      interdireRedimension() {
-        this._scheduleReinit()
-      },
-      toolbar() {
-        this._scheduleReinit()
-      },
-      imageTailleMaximale() {
-        this._scheduleReinit()
-      },
-      plugins() {
-        this._scheduleReinit()
-      },
-      cacherBarreOutils() {
-        this._scheduleReinit()
-      },
-      cacherBarreMenu() {
-        this._scheduleReinit()
-      },
-    },
-
-    methods: {
-      onBlur() {
-        if (!this.desactiver) this.$emit('blur')
-      },
-      onUserActivity() {},
-      insererAuCurseur(texte) {
-        const ed = this._editor
-        if (!ed) return
-
-        // Focus sur l'éditeur pour que TinyMCE sache où insérer
-        ed.focus()
-
-        // Insert au curseur (respecte le contexte HTML)
-        ed.insertContent(texte)
-      },
-      _normalizeToolbar(tb) {
-        const trimmed = (tb || '').trim()
-        return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
-      },
-
-      _scheduleReinit() {
-        if (this._reinitPending) return
-        this._reinitPending = true
-        queueMicrotask(async () => {
-          this._reinitPending = false
-          await this._reinitEditor()
-        })
-      },
-
-      async _reinitEditor() {
-        if (this._reinitLock) return
-        this._reinitLock = true
-        try {
-          const ed = this._editor
-          if (ed && typeof ed.remove === 'function') {
-            try {
-              ed.remove()
-            } catch (e) {
-              console.warn('[Editeur] editor.remove erreur', e)
-            }
-          }
-          this._editor = null
-
-          // remount contrôlé
-          this.editorReady = false
-          await this.$nextTick()
-          this.editorReady = true
-          await this.$nextTick()
-        } finally {
-          this._reinitLock = false
-        }
-      },
-    },
-
-    beforeUnmount() {
-      try {
-        const ed = this._editor
-        if (ed && typeof ed.remove === 'function') ed.remove()
-      } catch {}
-      this._editor = null
-    },
-  }
-</script>
-
-<style scoped>
-  .editor a {
-    cursor: pointer !important;
-  }
-</style>
+<template>
+  <div class="editor">
+    <Editor
+      v-if="editorReady"
+      v-bind="$attrs"
+      v-model="editorValue"
+      :init="initOptions"
+      :disabled="desactiver"
+      license-key="gpl"
+      @blur="onBlur"
+      @keydown="onUserActivity"
+      @change="onUserActivity"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  import { computed, ref, watch, nextTick } from 'vue'
+  import Editor from '@tinymce/tinymce-vue'
+  import type { Editor as TinyMCEEditor } from 'tinymce'
+
+  // Core / skins / thème
+  import 'tinymce/tinymce.js'
+  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'
+
+  // Langue
+  import 'tinymce-i18n/langs7/fr_FR'
+
+  // Plugins
+  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'
+
+  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 paste',
+    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)
+  const _reinitPending = ref(false)
+  const _reinitLock = ref(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
+
+        editor.on('init', () => {
+          // init ok
+        })
+
+        // 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.value) return
+    _reinitPending.value = true
+    queueMicrotask(async () => {
+      _reinitPending.value = false
+      await reinitEditor()
+    })
+  }
+
+  const reinitEditor = async () => {
+    if (_reinitLock.value) return
+    _reinitLock.value = 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.value = 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>