codevdesign 0.0.69 → 0.0.71

package/composants/csqcEditeurTexteRiche.vue

@@ -6,28 +6,30 @@
       v-model="editorValue"
       :init="initOptions"
       :disabled="desactiver"
-      @blur="surEvenementBlur"
-      @keydown="surEvenementBlur"
-      @input="surEvenementBlur"
-      @change="surEvenementBlur"
+      @blur="onBlur"
+      @keydown="onUserActivity"
+      @change="onUserActivity"
       license-key="gpl"
     />
   </div>
 </template>
 
 <script>
-  /* Vue 3 - Options API */
   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 */
+  // Plugins
   import 'tinymce/plugins/autoresize/plugin.min.js'
   import 'tinymce/plugins/advlist/plugin.min.js'
   import 'tinymce/plugins/lists/plugin.min.js'
@@ -35,7 +37,7 @@
   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/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'
@@ -56,8 +58,8 @@
     components: { Editor },
 
     props: {
+      modelValue: { type: String, default: '' },
       langue: { type: String, default: 'fr_FR' },
-      value: { type: String, default: '' },
       interdireRedimension: { type: Boolean, default: false },
       desactiver: { type: Boolean, default: false },
       plugins: {
@@ -65,7 +67,7 @@
         default: 'autoresize table image link fullscreen advlist lists emoticons autolink code',
       },
       interdireImage: { type: Boolean, default: false },
-      imageTailleMaximale: { type: Number, default: 5 }, // en Mo
+      imageTailleMaximale: { type: Number, default: 5 }, // Mo
       cacherBarreMenu: { type: Boolean, default: false },
       cacherBarreOutils: { type: Boolean, default: false },
       toolbar: {
@@ -77,95 +79,88 @@
       },
     },
 
+    emits: ['update:modelValue', 'blur'],
+
     data() {
       return {
         editorReady: true,
         _editor: null,
-        editorValue: this.value,
+        editorValue: this.modelValue, // lié au v-model
         _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
+          .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)
       },
 
-      // 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,
+          automatic_uploads: !this.interdireImage,
           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',
+          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,
-
-          // 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,
+          // --- File picker seulement si images permises ---
+          ...(this.interdireImage ? {} : { file_picker_types: 'image' }),
 
           setup: editor => {
             this._editor = editor
+
             editor.on('init', () => {
-              //console.log('[Editeur] TinyMCE INIT done')
+              // init ok
             })
-            // Délégation d’événements pour intercepter les clics de liens
+
+            // Intercepter clics liens
             editor.on('click', e => {
               const a = e.target?.closest?.('a')
               if (!a) return
@@ -190,7 +185,6 @@
           },
         }
 
-        // File picker uniquement si images permises
         if (!this.interdireImage) {
           opts.file_picker_callback = cb => {
             const input = document.createElement('input')
@@ -228,7 +222,17 @@
     },
 
     watch: {
-      // Re-montage propre de l’éditeur dès qu’on touche aux props
+      /* 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()
       },
@@ -250,24 +254,20 @@
       cacherBarreMenu() {
         this._scheduleReinit()
       },
-
-      value(v) {
-        this.editorValue = v
-      },
-      editorValue(v) {
-        this.$emit('input', v)
-      },
     },
 
     methods: {
+      onBlur() {
+        if (!this.desactiver) this.$emit('blur')
+      },
+      onUserActivity() {},
+
       _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 () => {
@@ -280,18 +280,17 @@
         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) {
+          if (ed && typeof ed.remove === 'function') {
             try {
-              ed.remove && ed.remove()
+              ed.remove()
             } catch (e) {
               console.warn('[Editeur] editor.remove erreur', e)
             }
           }
           this._editor = null
 
-          // 🔁 remount contrôlé
+          // remount contrôlé
           this.editorReady = false
           await this.$nextTick()
           this.editorReady = true
@@ -300,19 +299,12 @@
           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)
+        const ed = this._editor
+        if (ed && typeof ed.remove === 'function') ed.remove()
       } catch {}
       this._editor = null
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",
@@ -15,7 +15,10 @@
   "dependencies": {
     "vuetify": "^3.8.0",
     "vue-i18n": "^11.0.0",
-    "@e965/xlsx": "^0.20.3"
+    "@e965/xlsx": "^0.20.3",
+    "tinymce": "^8.0.2",
+    "tinymce-i18n": "^25.9.1",
+    "@tinymce/tinymce-vue": "^6.3.0"
   },
   "devDependencies": {
     "@types/node": "^22.13.5",