Converting Font Sizes

[unitehenry]

My problem regards manually defined font sizes in the quill toolbar. I might be missing something... but quill is using style="font-size: 24px" as inline-styling and uses .ql classes for everything else. My theory is that the converter does not look at the predefined inline-styles and just constructs new ones based on the delta.

I'm creating my own vue wrapper for quill

Templated Font Size Toolbar

<select title="Size" class="ql-size" v-if="fontSize">
    <option v-for="size in fontSizes" :value="size">{{ size }}</option>
</select>

My Font Sizes

const FONT_SIZES = [
  '8px',
  '9px',
  '10px',
  '11px',
  '12px',
  '13px',
  '14px',
  '16px',
  '18px',
  '20px',
  '22px',
  '24px',
  '26px',
  '28px',
  '32px',
  '36px',
  '48px',
  '72px'
]

My Converter

    getHtml: function(){
       // Quill Editor Delta
      const delta = this.editor.getContents();

      // Initialize Array to store Mentioned Users
      const mentions = new Array;

      // Iterate through delta ops
      for(let op in delta.ops){
        // Get each operation from delta ops
        const opeartion = delta.ops[op];

        // If mention is defined, then store it in mentions array
        opeartion.insert.mention ? mentions.push(opeartion.insert.mention) : null;
      }

      let fonts = new Object();
      this.fonts.forEach((font) => {
        fonts[font.class] = `font-family: ${font.family}`
      })

      const styleOptions = {
        font: fonts
      }

      // Initialize Converter with options
      const converter = new QuillDeltaToHtmlConverter(delta.ops, {inlineStyles: styleOptions});

      // Custom Blot Handler
      converter.renderCustomWith((customOp) => {
        // Conditionally renders blot of mention type
        if(customOp.insert.type === 'mention'){
          // Get Mention Blot Data
          const mention = customOp.insert.value;

          // Template Return Data
          return (
            `<span
            class="mention"
            data-index="${mention.index}"
            data-denotation-char="${mention.denotationChar}"
            data-link="${mention.link}"
            data-value='${mention.value}'>
            <span contenteditable="false">
            ${mention.value}
            </span>
            </span>`
          )
        }
      })

      // Return Converted Delta's HTML
      return converter.convert();
    }

Quill Module

    const qFontSize = Quill.import('attributors/style/size');

    qFontSize.whitelist = FONT_SIZES;

    Quill.register(qFontSize, true);

    // Initialize the Quill Editor to the DOM Element
    this.editor = new Quill('#editor', quillConfig);

[nozer]

Hi @unitehenry
Sorry I couldn't reply earlier. I was super busy.

A bit info on generating styles and css classes.
Some terms:
class based styling: where you use css classes to style your html.
inline styling: where you use style property to style your html.

• You must choose one of them; both won't be applied at the same time. Use inline styling to generate content for mail. Otherwise, use class based styling.

• color op property is always generated as inline style.

• in class based styling, background op property is also styled as inline style BUT if allowBackgroundClasses is set to true, then class styling is used for it.

• If inlineStyles is enabled by setting it to true, then inline styles will be generated by using the defaults (defaults are specified in the doc)

• If inlineStyles is enabled by setting it to an object, then inline styles will be generated by using the values from your object. If anything is missing, then default values will be used.

• When working with inlineStyles, your ops should have values for font, size as if they are a class name and then make your inlineStyles object like a look up table to generate the actual style property: value pair.

See the image below: