Issue #4796💬 AnsweredOpened December 21, 2022by RakulAgn0 reactions

Custom Traits not Updating if using mjml

快速解答by artf

@RakulAgn please avoid creating issues from discussions.

Read full answer below ↓

Question

setTimeout(() => {
    editor.DomComponents.addType("mj-image", {
      isComponent: (el: any) => el.tagName === "MJ-IMAGE",
      model: {
        defaults: {
          traits: [
            {
              type: "mjchange",
              label: " ",
              name: "mjchange",
            },
            {
              type: "href",
              label: "Link",
              name: "href",
            },
            {
              type: "alt",
              label: "Alt",
              name: "alt",
            },
          ],
        },
      },
    });

  editor.TraitManager.addType("mjchange", {
    noLabel: true,
    createInput({}) {
      let selectedSrc = editor.getSelected();

      let src = selectedSrc!.attributes.attributes!.src;

      const toggleModal = () => {
        editor.runCommand("open-assets", {
          target: editor.getSelected(),
        });
      };
      const el = document.createElement("div");
      el.setAttribute("class", "image-trait-preview");
      el.innerHTML = `<img src="${src}" style="width: 100%; height:auto;background:#f9f9f9;" id="gjs_img_preview_logo_rtl"/>
                <button type="submit" class="btn btn-primary btn-block btn-sm" id="chg-img-trait-btn">Change</button>`;

      const inputType = el.querySelector("#chg-img-trait-btn");
      const imgBox = el.querySelector("#gjs_img_preview_logo_rtl");

      imgBox!.addEventListener("click", toggleModal);
      inputType!.addEventListener("click", toggleModal);

      return el;
    },
  });

  editor.on("modal:open", (component) => {
    const $ = editor.$;
    editor.AssetManager.open({
      types: ["mj-image"],
      select(assets, complete) {
        const selected = editor.getSelected();    
        if (selected && selected.is("mj-image")) {
          selected.addAttributes({ src: assets.getSrc() });
          $("#gjs_img_preview_logo_rtl").attr("src", assets.getSrc());
          complete && editor.AssetManager.close();
        }
      },
    });

This Method Works Fine for Normal HTML. But When I Tried With MJML For MJ-IMAGE Tag The Src is Updated in TR Tag but not updated in img tag inside the TR tag The Below Image Screenshot from 2022-12-21 13-32-13(1)

Originally posted by @RakulAgn in https://github.com/artf/grapesjs/discussions/4795

Answers (2)

artfJanuary 2, 2023

@RakulAgn please avoid creating issues from discussions.

ClaudeCodeMay 17, 2026

Thanks for reporting this, @RakulAgn.

Thanks for sharing your report about Custom Traits not Updating if using mjml. To help the team investigate and prioritize this:

Please provide:

  1. A minimal reproducible example (CodeSandbox/JSFiddle)
  2. Your GrapesJS version number
  3. Browser and OS information
  4. Any error messages from the browser console
  5. Steps to reproduce the issue

What helps most:

  • Minimal code example (not your full project)
  • Screen recording or screenshot showing the issue
  • Expected vs actual behavior clearly stated
  • GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.