Placeholder element for every new paragraph

[diegohaz]

I'd like to show a placeholder element for every new paragraph (while it's empty) saying something like:

Type / to choose a block

I imagine I'd have to create a custom paragraph node or something, but how could this be done?

[trueadm]

You could add some styling to the Paragraph theme and do something in ::before.

[diegohaz]

@Proful I'm adding the empty class to the paragraph element when there's no text content (code above). Then, I can use .paragraph.empty::before on CSS.

[DaniGuardiola]

Lol hi @diegohaz, I have this use case too. That's a nice solution. Did you end up building something with this? Is it Ariakit related by any chance?

[diegohaz]

@DaniGuardiola Yes. I didn't finish it though. https://ariakit-kmqava9a4-ariakit.vercel.app/examples/combobox-lexical

[CanRau]

Inspired by Diego's code I came up with this to only add the class .p-placeholder if the paragraph is currently selected & empty (just in case)

const placeholderClass = ".p-placeholder";

// handles toggling of .p-placeholder css class on currently focused & empty ParagraphNode
useEffect(() => {
  const editor = editorRef.current;
  if (!editor) return;
  return editor.registerCommand(
    lexical.SELECTION_CHANGE_COMMAND,
    () => {
      const root = lexical.$getRoot();
      const rootElement = editor.getElementByKey(root.getKey());
      rootElement?.querySelectorAll(`.${placeholderClass}`).forEach((el) => el?.classList.remove(placeholderClass));

      const selection = lexical.$getSelection();
      if (!lexical.$isRangeSelection(selection)) {
        return false;
      }

      const anchorNode = selection.anchor.getNode();
      if (!lexical.$isParagraphNode(anchorNode) || !anchorNode.isEmpty()) {
        return false;
      }

      const anchorElement = editor.getElementByKey(anchorNode.getKey());
      anchorElement?.classList.toggle(placeholderClass, !anchorElement.textContent);

      return false;
    },
    lexical.COMMAND_PRIORITY_LOW,
  );
}, []);

It's not widely tested yet, tho maybe it helps or inspires someone 🤗

[pazhamalai]

@trueadm @CanRau Thanks for posting. Your solution worked like a charm.

I just had to change rootElement?.querySelectorAll(.${placeholderClass}).forEach((el) => el?.classList.remove(placeholderClass)); to Array.from(rootElement.children).forEach(child => child.classList.remove(placeholderClass));. Not sure why but the previous one was causing issues.