codevdesign 0.0.70 → 0.0.72

package/composants/csqcEditeurTexteRiche.vue

@@ -1,326 +1,318 @@
-<template>
-  <div class="editor">
-    <!-- Remount contrôlé pour TinyMCE -->
-    <Editor
-      v-if="editorReady"
-      v-model="editorValue"
-      :init="initOptions"
-      :disabled="desactiver"
-      @blur="surEvenementBlur"
-      @keydown="surEvenementBlur"
-      @input="surEvenementBlur"
-      @change="surEvenementBlur"
-      license-key="gpl"
-    />
-  </div>
-</template>
-
-<script>
-  /* Vue 3 - Options API */
-  import Editor from '@tinymce/tinymce-vue'
-  import * as tinymce from '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'
-  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' // activé/désactivé via "pluginsEffective"
-  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: {
-      langue: { type: String, default: 'fr_FR' },
-      value: { type: String, default: '' },
-      interdireRedimension: { type: Boolean, default: false },
-      desactiver: { type: Boolean, default: false },
-      plugins: {
-        type: [String, Array],
-        default: 'autoresize table image link fullscreen advlist lists emoticons autolink code',
-      },
-      interdireImage: { type: Boolean, default: false },
-      imageTailleMaximale: { type: Number, default: 5 }, // en 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',
-      },
-    },
-
-    data() {
-      return {
-        editorReady: true,
-        _editor: null,
-        editorValue: this.value,
-        _reinitPending: false,
-        _reinitLock: false,
-      }
-    },
-
-    computed: {
-      // <= ICI on force un plafond d'image à 100 Mo (et on gère les valeurs non numériques)
-      imageTailleMaxMo() {
-        const n = Number(this.imageTailleMaximale)
-        if (!Number.isFinite(n)) return 5
-        return Math.min(100, Math.max(0, n))
-      },
-
-      // Nettoie la toolbar en retirant "image" et ses séparateurs orphelins
-      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, '') // retire le bouton
-          .replace(/\s*\|\s*/g, ' | ') // normalise les séparateurs
-          .replace(/(\s*\|\s*){2,}/g, ' | ') // évite les doubles |
-          .replace(/^\s*\|\s*|\s*\|\s*$/g, '') // retire | en début/fin
-          .replace(/\s{2,}/g, ' ') // espaces doublés
-          .trim()
-
-        return this._normalizeToolbar(sansImage)
-      },
-
-      // Plugins effectifs : retire "image" si interdireImage = true
-      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(' ')
-      },
-
-      // Options TinyMCE réactives
-      initOptions() {
-        const opts = {
-          autolink: !this.desactiver,
-          autoresize: true,
-          branding: false,
-          browser_spellcheck: true,
-          content_css: 'default',
-          deprecation_warnings: false,
-          emoticons_database: 'emojis',
-          //height: this.height,
-          //min_heignt: 100,
-          //max_height: 800,
-          highlight_on_focus: false,
-          language: this.langue == 'en' ? 'en_US' : 'fr_FR',
-          license_key: 'gpl',
-          menubar: !this.cacherBarreMenu,
-          promotion: false,
-          resize: !this.interdireRedimension,
-          skin_url: 'default',
-          statusbar: this.cacherBarreOutils === false,
-          theme_advanced_resizing: true,
-          theme_advanced_resizing_use_cookie: false,
-
-          // Gestion images selon interdireImage
-          plugins: this.pluginsEffective,
-          toolbar: this.toolbarEffective,
-          automatic_uploads: !this.interdireImage,
-          object_resizing: !this.interdireImage,
-          paste_data_images: !this.interdireImage,
-          ...(this.interdireImage ? {} : { file_picker_types: 'image' }),
-
-          // Certaines options images n'ont effet que si plugin "image" est actif
-          image_dimensions: !this.interdireImage,
-          resize_img_proportional: !this.interdireImage,
-
-          readonly: this.desactiver,
-
-          setup: editor => {
-            this._editor = editor
-            editor.on('init', () => {
-              //console.log('[Editeur] TinyMCE INIT done')
-            })
-            // Délégation d’événements pour intercepter les clics de 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'))
-              }
-            })
-          },
-        }
-
-        // File picker uniquement si images permises
-        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: {
-      // Re-montage propre de l’éditeur dès qu’on touche aux props
-      interdireImage() {
-        this._scheduleReinit()
-      },
-      interdireRedimension() {
-        this._scheduleReinit()
-      },
-      toolbar() {
-        this._scheduleReinit()
-      },
-      imageTailleMaximale() {
-        this._scheduleReinit()
-      },
-      plugins() {
-        this._scheduleReinit()
-      },
-      cacherBarreOutils() {
-        this._scheduleReinit()
-      },
-      cacherBarreMenu() {
-        this._scheduleReinit()
-      },
-
-      value(v) {
-        this.editorValue = v
-      },
-      editorValue(v) {
-        this.$emit('input', v)
-      },
-    },
-
-    methods: {
-      _normalizeToolbar(tb) {
-        // Si la toolbar devient vide après nettoyage, on met au moins "undo redo"
-        const trimmed = (tb || '').trim()
-        return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
-      },
-
-      _scheduleReinit() {
-        // coalesce toutes les demandes de réinit dans la même micro-tâche
-        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 {
-          //  détruire proprement l’instance via l’instance elle-même
-          const ed = this._editor
-          if (ed) {
-            try {
-              ed.remove && 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
-        }
-      },
-
-      surEvenementBlur() {
-        if (!this.desactiver) {
-          this.$emit('blur')
-          this.$emit('input', this.editorValue)
-        }
-      },
-    },
-
-    beforeUnmount() {
-      // Cleanup sûr lors du démontage du composant parent
-      try {
-        if (this._editor) tinymce.remove(this._editor)
-      } catch {}
-      this._editor = null
-    },
-  }
-</script>
-
-<style scoped>
-  .editor a {
-    cursor: pointer !important;
-  }
-</style>
+<template>
+  <div class="editor">
+    <!-- Remount contrôlé pour TinyMCE -->
+    <Editor
+      v-if="editorReady"
+      v-model="editorValue"
+      :init="initOptions"
+      :disabled="desactiver"
+      @blur="onBlur"
+      @keydown="onUserActivity"
+      @change="onUserActivity"
+      license-key="gpl"
+    />
+  </div>
+</template>
+
+<script>
+  import Editor from '@tinymce/tinymce-vue'
+  import tinymce from 'tinymce'
+
+  // 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() {},
+
+      _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>