ouatterrir-app/src/components/editable/ContentEditable.vue

<script>

import REST from '@api/rest-axios'

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@stores/user'


import MediumEditor from 'medium-editor-x'
import 'medium-editor-x/dist/css/medium-editor.css'
import 'medium-editor-x/dist/css/themes/beagle.css'

export default {
  props: {
    tag: String, 
    value: String, 
    contenteditable : {
      type : [Boolean, String],
      default : true,
    },
    html : {
      type : [Boolean, String],
      default : false,
    }, 
    data: Object,
    placeholder : {
      type : String,
      default : 'Ajouter du texte'
    }
  },
  emits: ['updated'],
  data(){
    return {
      editor: null,
      spellcheck: false
    }
  },
  computed: {
    ...mapState(UserStore,['csrf_token']),
  },
  created () {
    console.log('ContentEditable created');
  },
  mounted () {
    if (this.contenteditable && this.html) {
      this.editor = new MediumEditor(this.$refs.html_editable, {
        toolbar: {
          allowMultiParagraphSelection: false,
          buttons: ['anchor'],
        },
        placeholder: {
          /* This example includes the default options for placeholder,
            if nothing is passed this is what it used */
          text: this.placeholder,
          hideOnClick: true
        }
      });
    }
  },
  beforeUnmount() {
  },
  methods: {
    ...mapActions(ConcernementsStore, ['reloadConcernements']),
    onContentEditableFocusOut(e){
      console.log('onContentEditableFocusOut', e);
      // console.log('onContentEditableFocusOut data', this.data);
      let new_field_content = this.html ? e.target.innerHTML : e.target.innerText;
      new_field_content = new_field_content.replace(/<br>$/g, '');
      // console.log('onContentEditableFocusOut', new_field_content);
      this.$emit('focusout');
      if (this.data) {
        this.save(new_field_content)
      }
    },
    save(content){
      // console.log('save csrf_token', this.csrf_token);
      const params = {
        type: this.data.bundle,
        [this.data.field.field_name]: [{[this.data.field.value]: content}]
      };
      if (this.data.entitytype === 'node') {
        params.nid = [{"value":this.data.id}];
      } else {
        params.id = [{"value":this.data.id}];
      }
      // we need additional values for image alt for example
      // console.log('additional_values', this.data.field.additional_values);
      if (this.data.field.additional_values) {
        for (const key in this.data.field.additional_values) {
          if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
            params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
          }
        }
      }
      
      const configs = {
        headers: {'X-CSRF-Token': this.csrf_token}
      };

      // url is not the same between nodes and others entities
      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
      // call the api
      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
        .then(({ data }) => {
          console.log('user REST post node data', data)
          this.$emit('updated');
        })
        .catch(error => {
          console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
          Promise.reject(error)
        })
    }
  },
  components: {
  }
}
</script>

<template>
  <component
    v-if="!html" 
    :is="tag"
    :contenteditable="contenteditable"
    :spellcheck="spellcheck"
    @focusout="onContentEditableFocusOut"
  >{{ value }}</component>
  <component
    v-else
    :is="tag"
    class="html-editable"
    ref="html_editable"
    v-html="value"
    :contenteditable="contenteditable"
    :spellcheck="spellcheck"
    @focusout="onContentEditableFocusOut"
  />
</template>