{} Space version npm-asset/quill: 1.3.6

[eric-5512]

1: I have a template: Purchase of [[Lead's Street Address]] for [[First Name]] [[Last Name]]

2: When rendering:

 "Purchase of <span class="ql-placeholder-content" data-id="leadStreetAddress" data-label="Lead's Street Address" spellcheck="false">
    <span contenteditable="false">{Lead's Street Address}</span>
</span> for <span class="ql-placeholder-content" data-id="firstName" data-label="First Name" spellcheck="false">
    <span contenteditable="false">{First Name}</span>
</span> <span class="ql-placeholder-content" data-id="lastName" data-label="Last Name" spellcheck="false">
    <span contenteditable="false">{Last Name}</span>
</span>"

3: When the final quill renders:

The spaces between {First Name}{Last Name} are gone. I'm pretty sure it's a problem with quill.

my code:

 ax.quillhelper.makeRich('#_subject-quill-editor', {
            modules: {
                toolbar: {container: '#toolbar_placeholder'},
                placeholder: {
                    delimiters: ['{', '}'],
                    placeholders: quillPlaceholders,
                },
            }
});

if (typeof ax == 'undefined') var ax = {};


ax.quillhelper = {
  fontSizeOption:[{'size': ['8px','9px','10px','11px','12px','14px','16px','18px','20px','22px','24px','26px','28px','36px','48px','72px']}],

  init: function() {
      var Size = Quill.import('attributors/style/size');
      Size.whitelist = ['8px', '9px', '10px', '11px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '36px', '48px', '72px'];
      Quill.register(Size, true);
  },

  makeRich: function (selector, options) {
      var that = this;
      var defaultOptions = {
          theme: 'snow',
      };
      options = $.extend({}, defaultOptions, options);

      $(selector).each(function () {
          var thisOpt = $.extend({}, options);
          var placeholder = $(this).data('placeholder');
          if (placeholder) {
              thisOpt.placeholder = placeholder;
          }
          var container = $(this).get(0);
          var quill = new Quill(container, thisOpt);

          if (options.onImageChosen) {
              var toolbar = quill.getModule('toolbar');
              toolbar.addHandler('image', function (value) {
                  var fileInput = this.container.querySelector('input.ql-image[type=file]');
                  if (fileInput == null) {
                      fileInput = document.createElement('input');
                      fileInput.setAttribute('type', 'file');
                      fileInput.setAttribute('accept', 'image/*');
                      fileInput.classList.add('ql-image');
                      fileInput.addEventListener('change', function (e) {
                          if (fileInput.files != null && fileInput.files[0] != null) {
                              options.onImageChosen.call(quill, e);
                          }
                      });
                      this.container.appendChild(fileInput);
                  }
                  fileInput.click();
              });
          }

          var nextEle = $(container).next();
          if (nextEle.hasClass('quill-hidden-input')) {
              quill.on('text-change', function () {
                  nextEle.val(quill.root.innerHTML);
              });
          }
      });
  },

  findQuill: function (selectorOrDomNode) {
      var container;
      if (typeof selectorOrDomNode == 'object') {
          container = selectorOrDomNode;
      } else {
          container = document.querySelector(selectorOrDomNode);
      }
      var quill = Quill.find(container);
      quill.getHTML = function () {
          if (this.isEmpty()) {
              return '';
          }
          var deltaOps = quill.getContents().ops;
          var cfg = {
              encodeHtml: false,
              inlineStyles: {
                  size: function (value) {
                      return ('font-size:' + value);
                  },
              }
          };
          var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
          converter.renderCustomWith(function(customOp, contextOp){
              if (customOp.insert.type === 'placeholder') {
                  var label = customOp.insert.value.label;
                  return "[["+label+"]]";
              } else {
                  return '';
              }
          });
          return converter.convert();
      };
      quill.isEmpty = function () {
          return quill.getText().trim().length === 0 && container.firstChild.innerHTML.includes('img') === false;
      };
      quill.setHTML = function (html) {
          quill.setContents([]);
          quill.clipboard.dangerouslyPasteHTML(0, html);
      };
      quill.getNormalizedHtml = function () {
          var deltaOps = quill.getContents().ops;
          var cfg = {
              inlineStyles: true
          };
          var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
          converter.renderCustomWith(function(customOp, contextOp){
              if (customOp.insert.type === 'placeholder') {
                  var label = customOp.insert.value.label;
                  return "[["+label+"]]";
              } else {
                  return '';
              }
          });
          return converter.convert().replace(/<\/?[^>]*>/g, '').replace(/[|]*\n/, '').replace(/&npsp;/ig, '');
      };
      return quill;
  },

  getQuillHTML: function (selector) {
      var quill = this.findQuill(selector);
      return quill.getHTML();
  }
};

[benbro]

Please try to reproduce here: https://quilljs.com/playground/snow