How to make "Normal" heading working "as expected" in cutom toolbar

Question

I try to cutomize Heading labels

I used a custom toolbar like this :

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header">
      <option value="2">Bloc</option>
      <option value="3">Titre 1</option>
      <option value="4">Titre 2</option>
      <option selected>Normal</option>
    </select>
  </div>
);

Custom labels are ok, but the "Normal" option does not work as expected.

If I select a "Normal" text in content, option "Normal" will not be selected.

According to quill source, i added selected on "Normal" option. But it has no effect


// From snow theme
// { header: [1, 2, 3, false] }

// modules/toolbar.ts : 213
    if (value !== false) {
      option.setAttribute('value', value);
    } else {
      option.setAttribute('selected', 'selected');
    }

thank you for reading

score 0 · Answer 1 · answered Apr 02 '23 at 08:59

Got it ^^ :

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={''}>
      <option value="2">Bloc</option>
      <option value="3">Titre 1</option>
      <option value="4">Titre 2</option>
      <option value={''}>Normal</option>
    </select>
  </div>
);

Have a nice day !

How to make "Normal" heading working "as expected" in cutom toolbar

1 Answers1