Many clicks to make text area editable

[rgcarrasqueira]

Hi Art!

I'm implementing the ckeditor plugin with grapesjs, but I've perceived that it is necessary so many clicks over the text area to becames editable this place. I think some persons will have some difficulties to deal with it and it could be a block barrier to user experience.

For example, trying to edit a text inside button is little bit hard, because the ckeditor does not allow to edit the text content directly

How can we set the editor to for example, if I click one time over the text, it enable the ckeditor bar and turn the place editable?

Thanks!

[artf]

Try to extend the Text Component with something like this

  var textType = editor.DomComponents.getType('text');
  domComps.addType('text', {
    model: textType.model,
    view: textType.view.extend({
      events: {
        'click': 'enableEditing', // by default is 'dblclick'
      },
    }),
  });

[luishdez]

Just in case someone need this.

const comps = editor.DomComponents;
const textType = comps.getType('text');

comps.addType('text', {
  model: textType.model,
  view: textType.view.extend({
    events: {
      click: 'onActive',
    },
  }),
});

[AbdiasM]

Neither of the above solutions are working for me.

const comps = editor.DomComponents;
const textType = comps.getType('text');

comps.addType('text', {
    model: textType.model,
    view: textType.view.extend({
        events: {
            click: 'enableEditing',
        },
    }),
});

I'm actually adding the 'text' block using block manager as below:

export default (bm, toAdd, category, opt = {}) => {
toAdd("text") && bm.add("text", { label: opt.textBlkLabel, category: category, attributes: { class: "gjs-fonts gjs-f-text" }, content: { type: "text", content: "Insert your text here", style: { padding: "5px" }, activeOnRender: 1, droppable: true,
},
});

@artf , could you suggest something to make this work.

Thanks in advance!