codevdesign 0.0.68 → 0.0.69

package/composants/csqcEditeurTexteRiche.vue

@@ -0,0 +1,326 @@
+<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>

package/index.ts

@@ -1,70 +1,71 @@
-import csqcAlerteErreur from './composants/csqcAlerteErreur.vue'
-import csqcDialogue from './composants/csqcDialogue.vue'
-import csqcOptionSwitch from './composants/csqcOptionSwitch.vue'
-import csqcRecherche from './composants/csqcRecherche.vue'
-import csqcSnackbar from './composants/csqcSnackbar.vue'
-import csqcTiroir from './composants/csqcTiroir.vue'
-import pivEntete from './composants/gabarit/pivEntete.vue'
-import pivFooter from './composants/gabarit/pivPiedPage.vue'
-import csqcMenu from './composants/gabarit/csqcMenu.vue'
-import csqcConfirmation from './composants/csqcConfirmation.vue'
-import csqcTable from './composants/csqcTable/csqcTable.vue'
-import csqcCodeBudgetaire from './composants/codeBudgetaireGenerique.vue'
-//import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
-import csqcAide from './composants/csqcAide.vue'
-import csqcEntete from './composants/csqcEntete.vue'
-import csqcTexteBilingue from './composants/csqcTexteBilingue.vue'
-
-//import validateurs from './validateurs'
-
-import Utilisateur from './modeles/utilisateur'
-import Unite from './modeles/unite'
-import Intervention from './modeles/intervention'
-import DroitIntervention from './modeles/droitIntervention'
-import Role from './modeles/role'
-import RoleMin from './modeles/roleMin'
-import GroupeCE from './modeles/groupeCE'
-import NotificationGabaritDefaut from './modeles/notificationGabaritDefaut'
-import modeleSnackbar from './modeles/composants/snackbar'
-import modeleDatatableColonne from './modeles/composants/datatableColonne'
-import apiReponse from './modeles/apiReponse'
-import data from './modeles/data'
-import response from './modeles/response'
-
-import csqcEn from './locales/en.json'
-import csqcFr from './locales/fr.json'
-
-export {
-  csqcFr,
-  csqcEn,
-  csqcAlerteErreur,
-  csqcDialogue,
-  csqcConfirmation,
-  csqcOptionSwitch,
-  csqcRecherche,
-  csqcSnackbar,
-  csqcTable,
-  csqcTiroir,
-  csqcMenu,
-  csqcCodeBudgetaire,
-  //csqcChaise,
-  pivFooter,
-  pivEntete,
-  csqcAide,
-  csqcEntete,
-  csqcTexteBilingue,
-  //validateurs,
-  Utilisateur,
-  Unite,
-  Intervention,
-  modeleSnackbar,
-  modeleDatatableColonne,
-  apiReponse,
-  data,
-  response,
-  NotificationGabaritDefaut,
-  DroitIntervention,
-  Role,
-  RoleMin,
-  GroupeCE,
-}
+import csqcAlerteErreur from './composants/csqcAlerteErreur.vue'
+import csqcDialogue from './composants/csqcDialogue.vue'
+import csqcOptionSwitch from './composants/csqcOptionSwitch.vue'
+import csqcRecherche from './composants/csqcRecherche.vue'
+import csqcSnackbar from './composants/csqcSnackbar.vue'
+import csqcTiroir from './composants/csqcTiroir.vue'
+import pivEntete from './composants/gabarit/pivEntete.vue'
+import pivFooter from './composants/gabarit/pivPiedPage.vue'
+import csqcMenu from './composants/gabarit/csqcMenu.vue'
+import csqcConfirmation from './composants/csqcConfirmation.vue'
+import csqcTable from './composants/csqcTable/csqcTable.vue'
+import csqcCodeBudgetaire from './composants/codeBudgetaireGenerique.vue'
+//import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
+import csqcAide from './composants/csqcAide.vue'
+import csqcEntete from './composants/csqcEntete.vue'
+import csqcTexteBilingue from './composants/csqcTexteBilingue.vue'
+import csqcEditeurTexteRiche from './composants/csqcEditeurTexteRiche.vue'
+//import validateurs from './validateurs'
+
+import Utilisateur from './modeles/utilisateur'
+import Unite from './modeles/unite'
+import Intervention from './modeles/intervention'
+import DroitIntervention from './modeles/droitIntervention'
+import Role from './modeles/role'
+import RoleMin from './modeles/roleMin'
+import GroupeCE from './modeles/groupeCE'
+import NotificationGabaritDefaut from './modeles/notificationGabaritDefaut'
+import modeleSnackbar from './modeles/composants/snackbar'
+import modeleDatatableColonne from './modeles/composants/datatableColonne'
+import apiReponse from './modeles/apiReponse'
+import data from './modeles/data'
+import response from './modeles/response'
+
+import csqcEn from './locales/en.json'
+import csqcFr from './locales/fr.json'
+
+export {
+  csqcFr,
+  csqcEn,
+  csqcAlerteErreur,
+  csqcDialogue,
+  csqcConfirmation,
+  csqcOptionSwitch,
+  csqcRecherche,
+  csqcSnackbar,
+  csqcTable,
+  csqcTiroir,
+  csqcMenu,
+  csqcCodeBudgetaire,
+  //csqcChaise,
+  pivFooter,
+  pivEntete,
+  csqcAide,
+  csqcEntete,
+  csqcTexteBilingue,
+  csqcEditeurTexteRiche,
+  //validateurs,
+  Utilisateur,
+  Unite,
+  Intervention,
+  modeleSnackbar,
+  modeleDatatableColonne,
+  apiReponse,
+  data,
+  response,
+  NotificationGabaritDefaut,
+  DroitIntervention,
+  Role,
+  RoleMin,
+  GroupeCE,
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",
@@ -13,7 +13,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "vuetify": "^3.7.0",
+    "vuetify": "^3.8.0",
     "vue-i18n": "^11.0.0",
     "@e965/xlsx": "^0.20.3"
   },
@@ -21,7 +21,7 @@
     "@types/node": "^22.13.5",
     "@vitejs/plugin-vue": "^5.2.1",
     "typescript": "^5.7.3",
-    "vite": "^6.2.0"
+    "vite": "^7.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"