Toolbar Drop Down for Headings

[iwatakeshi]

Hi, would anyone know if there is an example of using a drop down for headings instead of using <BlockToolbarButton>? It seems like it's possible, but I'm not finding an example of one. Thank you.

[nmastilovic]

I would also like to learn how to do this!

[ryanbarr]

Define a collection of options and the element types we want to map them to so we can render our dropdown:

const elementOptions = [
  { type: ELEMENT_DEFAULT, label: "Normal" },
  { type: ELEMENT_H1, label: "Heading 1" },
  { type: ELEMENT_H2, label: "Heading 2" },
  { type: ELEMENT_H3, label: "Heading 3" },
  { type: ELEMENT_H4, label: "Heading 4" },
  { type: ELEMENT_H5, label: "Heading 5" },
  { type: ELEMENT_H6, label: "Heading 6" },
];

Now, let's create our select box which is configured to toggle the mark type on change. You'll need to import usePlateEditorRef and getParent:

const LevelSelect = () => {
  const editor = usePlateEditorRef("body");
  const parent = getParent(editor, editor?.selection?.anchor);
  const node = parent && Array.isArray(parent) ? parent[0] : null;
  
  return (
    <select
      id="level"
      name="level"
      onChange={(e: FormEvent<HTMLSelectElement>) =>
        toggleNodeType(editor, {
          activeType: e.currentTarget.value,
          inactiveType: ELEMENT_DEFAULT, 
        })
      }
      value={node?.type}
    >
      {elementOptions.map((option) => (
        <option
          value={option.type}
          key={option.type}
        >
          {option.label}
        </option>
      ))}
    </select>
  );
};

Hopefully this helps send you on the right path! Note that there are different ways to get a Node. This may not be the most appropriate one for your situation. I also haven't tested alternatives to check performance.

(Edit 4: I've updated this to show a way to do this without the isType call and to properly use value on the <select> and to add key to the options.)

[ryanbarr]

When I have time, I'll update this answer to use this new isType function I included in this PR:

const isType = (
  editor: PlateEditor,
  node: any,
  key?: string | string[]
) => {
  const keys = castArray(key);
  const types: string[] = [];

  keys.forEach((_key) => types.push(getPluginType(editor, _key)));

  return types.includes(node?.type);
};

(Edit: this is a now irrelevant anecdote after improving the code above. I'll leave it for posterity.)

[nmastilovic]

Hey!

I'm trying to update an older project that uses Plate, and that used this approach.

After updating, it seems that this solution no longer works. Any ideas on how would this be done now?

Thanks!

[zbeyens]

I'll be publishing the new UI and docs in a few days. It features a dropdown.

https://platejs.org/

[nmastilovic]

Oh wow, that looks amazing!

Thank you!