doleance le problème is editable

src/components/ConcernementMapItem.vue

@@ -1106,6 +1106,8 @@ export default {
       
     },
     setPaperEntites(){
+      console.log(`setPaperEntites ${this.cid}`);
+      
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
         name: 'entites'
@@ -1120,7 +1122,8 @@ export default {
       // for (let i = 0; i < this.entites.length; i++) {
       for (let i = 0; i < this.concernement.revisions_byid[this.active_revision].entites.length; i++) {
         let entite = this.concernement.revisions_byid[this.active_revision].entites[i];
-
+        console.log('entite', entite);
+        
         if (!entite.active && !this.concernement.can_update) {
           continue;
         }
@@ -1144,7 +1147,7 @@ export default {
           }
         } 
 
-        // console.log(`item_type: ${item_type}, symbol_name: ${symbol_name}`);
+        console.log(`item_type: ${item_type}, symbol_name: ${symbol_name}`);
 
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
@@ -1157,7 +1160,8 @@ export default {
         instance.is_symbol_instance = true;
         g.addChild(instance);
         // instance.bringToFront();
-
+        console.log('instance', instance);
+        
         if (entite.entite && entite.entite.title) {
           let pad = 2;
           let label_pos = new paper.Point({
@@ -1209,6 +1213,8 @@ export default {
           instance.label_item = label;
         }
       }
+      console.log(`g`, g);
+      
       return g;
     },
     setPaperEntitesSuperposees(){

src/components/contents/Doleancer.vue

@@ -11,6 +11,11 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiArrowLeft } from '@mdi/js';
 import { mdiArrowRight } from '@mdi/js';
 
+import ContentEditable from '@components/editable/ContentEditable.vue';
+// import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
+// import SelectEditable from '@components/editable/SelectEditable.vue';
+
+
 export default {
   props: ['cid'],
   data(){
@@ -31,7 +36,8 @@ export default {
                                     'p_groupes_interets',
                                     'p_reception_et_traitement',
                                     'p_mise_en_oeuvre_decision',
-                                    'p_reception_application_decision'
+                                    'p_reception_application_decision',
+                                    'reloadConcernementCerclePol'
                                   ]),
     ...mapState(CommonStore,['hover_elmt'])
   },
@@ -44,6 +50,7 @@ export default {
         this.doleance_index = index;
       }
     });
+    
   },
   mounted() {
     if (this.doleance_index > 0) 
@@ -71,8 +78,9 @@ export default {
       this.openDoleance()
     },
     openDoleance(){
-      console.log('openDoleance');
       this.doleance = this.concernement.doleances[this.doleance_index];
+      console.log('openDoleance', this.doleance);
+      
       this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
       setTimeout((function(that){
         return function(){
@@ -88,7 +96,10 @@ export default {
   },
   components: {
     CartoucheLayout,
-    SvgIcon
+    SvgIcon,
+    ContentEditable
+    // CheckboxEditable,
+    // SelectEditable
   }
 }
 
@@ -112,7 +123,19 @@ export default {
               v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
               <span class="date">{{ doleance.date_leprobleme.start }}</span>
               <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
-              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
+              <!-- <h4 name="leprobleme">{{ doleance.leprobleme }}</h4> -->
+              <ContentEditable
+                tag="h4"
+                :value="doleance.leprobleme" 
+                class="doleance-leprobleme" 
+                :contenteditable="opened_concernement.can_update"
+                :data="{
+                  entitytype: 'node',
+                  bundle: 'cercle_politique',
+                  id: doleance.id,
+                  field: {field_name: 'field_le_probleme', value:'value'}
+                }"
+                v-on:updated="reloadConcernementCerclePol(cid)"/>
             </section>
 
             <section