Giter Club home page Giter Club logo

Comments (2)

kickbk avatar kickbk commented on June 8, 2024

OK, so self closing tags is a known issue and a tough one at that. Currently seems like the only way around it is not to use self closing tags.

For us, there were two problematic entry points:

  1. When importing MJML - core grapesjs-mjml
  2. When using fromElement to load MJML - core grapesjs-mjml
  3. When saving MJML - Our own action to save the MJML so that users may edit later

The work around we use was to run the MJML through a simple script that converts self closing tags to normal ones. See below.

// Get the MJML from the editor 
let selfMJMLOriginal = editor.getHtml();

// Parse and convert all self-closing tags.
function removeSelfClosingTags(selfClosingMJML) {
  let split = selfClosingMJML.split("/>");
  let convertedHtml = "";
  for (let i = 0; i < split.length - 1;i++) {
    let edsplit = split[i].split("<");
    convertedHtml += split[i] + "></" + edsplit[edsplit.length - 1].split(" ")[0] + ">";
  }
  return convertedHtml + split[split.length-1];
}

// Run the MJML through the script
let outputMJML = removeSelfClosingTags(selfMJMLOriginal)

You can apply the same script to the import function in command-import-mjml.js

btnImp.onclick = () => {
    let selfMJMLOriginal = codeViewer.editor.getValue();
    editor.DomComponents.getWrapper().set('content', '');

    // Script to parse and close all self closing tags.
    function removeSelfClosingTags(selfClosingMJML) {
      //See above
    }

    let code = removeSelfClosingTags(selfMJMLOriginal)
    editor.setComponents(code.trim());
    editor.Modal.close();
};

Open to more elegant solutions.

from mjml.

DRoet avatar DRoet commented on June 8, 2024

closing this as we already have an issue for self-closing tags: #149

from mjml.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.