Quill: did quill support il8n?

[100cm]

i didn't find api in doc. ty

[timeiscoffee]

Official themes (snow and bubble) does not support localization, but you can create your own theme that supports i18n/l10n.

[jhchen]

@timeiscoffee is correct thanks!

[carloshpds]

These messages should never be at the theme. It's not easy to apply i18n by the css instead of use some javascript.

[macsplan]

tried to get quill to support French, wasn't fun but managed with scss. here's my snippet if it helps anyone,

.quill-fr {
  .ql-picker.ql-header {
    .ql-picker-label::before {
      content: "Paragraphe" !important;
    }
    .ql-picker-label[data-value="1"]::before {
      content: "Titre1" !important;
    }
    .ql-picker-label[data-value="2"]::before {
      content: "Titre2" !important;
    }
  }

  .ql-picker.ql-header {
    .ql-picker-item::before {
      content: "Paragraphe" !important;
    }
    .ql-picker-item[data-value="1"]::before {
      content: "Titre1" !important;
    }
    .ql-picker-item[data-value="2"]::before {
      content: "Titre2" !important;
    }
  }
  .ql-tooltip[data-mode=link]::before {
    content: "Entrer le lien" !important;
  }
  .ql-tooltip[data-mode=video]::before {
    content: "Entrez la vidéo" !important;
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: "Sauvegarder" !important;
  }
}

what i did was wrap quill inside the css class quill-fr

i know it's a hack but i was pushed to get this in, doesn't cover the placeholders which you could do with jquery but a start.

please oh please with cherries on the top add i18n support.

[dkacper]

I found a clear solution to React. Just write a function that returns css, then include it between tags <style>.

const translate = () => `
  .ql-snow .ql-tooltip::before {
    content: '${ your_message }';
  }
`;

// somewhere in your component...
<style>{translate()}</style>

Also, some css-in-js should do the trick, but I didn't try it.