Disable RichTextEditor for component

[andcmatias]

I have an icon component that uses the i tag, and it can be inside an a tag. I created an event so that when it is double-clicked, it opens an icon selection modal.

However, I am having problems with the RichTextEditor. When I double-click on the icon, it opens the RichTextEditor and I have to double-click on the icon again.

Is there any way to disable the RichTextEditor in this situation?

import type { BlockProperties, Plugin } from "grapesjs";
import type { Editor } from "grapesjs";
import { getModalIconStore } from "../../../../store/modalIconStore";

export interface PluginOptions {
  block?: Partial<BlockProperties>;
}

const plugin: Plugin<PluginOptions> = function (editor, config = {}) {
  // @ts-ignore TODO TS gjs
  const opts = config.blocks.icon;

  // @ts-ignore TODO TS gjs
  const { blocks, modeloBasico, consts } = config;
  const domc = editor.DomComponents;
  const bm = editor.BlockManager;
  const { acesso } = blocks;
  let { permissoes } = acesso;

  const { idIcon } = consts;

  const commonBlockProps = {
    ...opts,
    activate: true,
    select: true,
  };

  const type = idIcon;
  const comando = "open-icons";

  bm.add(type, {
    ...commonBlockProps,
    media: `<svg viewBox="0 0 24 24">
    <path d="M16 9h3l-5 7m-4-7h4l-2 8M5 9h3l2 7m5-12h2l2 3h-3m-5-3h2l1 3h-4M7 4h2L8 7H5m1-5L2 8l10 14L22 8l-4-6H6z"></path>
  </svg>`,
    content: {
      type: "icon",
    },
  });

  const defaultType = domc.getType("default");
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  domc.addType(type, {
    extend: "default",
    ...permissoes[type],
    editable: false,
    model: {
      defaults: {
        tagName: "i",
        name: "Icone",
        "custom-name": "Icone",
        attributes: { id: type, class: `${type} iconesSVG` },
        style: {
          display: "flex",
          width: "calc(1.375rem + 1.5vw)",
          height: "calc(1.375rem + 1.5vw)",
          "font-size": "2rem",
          "align-items": "center",
        },
      },
    },
    isComponent(el) {
      if (el && el.tagName === "i") {
        return { type: type };
      }
    },
    view: defaultView,

  });

  if (modeloBasico == "S") {
    return false;
  }


  editor.Commands.add(comando, {
    run(_editor: Editor, _sender: any) {
      getModalIconStore().open();
    },
  });

  editor.on("block:drag:stop", (component) => {
    if (!component || !component.attributes || !component.attributes.tagName) {
      return;
    }
    if (component.attributes.tagName.toUpperCase() != "I") {
      return;
    }

    editor.select(component);

    editor.Commands.run(comando);
  });

  editor.on("load", function (editor) {
    let canvasDoc = editor.Canvas.getDocument();
    canvasDoc.addEventListener("dblclick", function (event) {
      event.preventDefault();

      let component = editor.getSelected();
      if (
        !component ||
        !component.attributes ||
        !component.attributes.tagName
      ) {
        return;
      }

      if (component.attributes.tagName.toUpperCase() != "I") {
        component = component.parent();
      }

      if (
        !component ||
        !component.attributes ||
        !component.attributes.tagName
      ) {
        return;
      }

      if (component.attributes.tagName.toUpperCase() != "I") {
        return;
      }

      editor.Commands.run(comando, component);
    });
  });
};
export default plugin;

[artf]

Just prevent the event propagation on double click

[andcmatias]

How would I do that?

I use double-click to open the modal