Node specific placeholders and showOnlyCurrent property

[thijskuilman]

In this PR, I've added two functionalities from the TipTap Placeholder extension.

Node specific placeholders
You can now set placeholders for specific node types. For example: I had a case where I wanted to set a different placeholder to a heading and a paragraph. You can now do that like this:

TiptapEditor::make('content')
    // Default placeholder. Also a fallback if a nodePlaceholder entry can't be found
    ->placeholder('Write something...')
    // Specific placeholdes per node
    ->nodePlaceholders([
       'paragraph' => 'Start writing your paragraph...',
       'heading' => 'Insert a heading...',
    ])

The code implementation is based on the official example, see the code example here.

Show only current placeholder
I have added the showOnlyCurrent property to TiptapEditor. You can use it like this:

TiptapEditor::make('content')
    ->showOnlyCurrentPlaceholder(false)

In the example above, all nodes will immediately be displayed, instead of only the selected node.

[thijskuilman]

Hi @awcodes, I was wondering if you might have some time soon to review this PR? This feature would really help with a current project, and I’d prefer to avoid using a forked version if possible. If there’s anything you’d like me to adjust or improve, I’d be more than happy to make those changes. Thanks!

[awcodes]

Hope to get to this review soon. Sorry. Really busy with work at the moment.

[awcodes]

Are you disabling the floating menu? Seems like there would be a conflict with this and also I think that there would need to be changes to the placeholder css to make this work.

[thijskuilman]

Hi @awcodes, thanks for your feedback!

[...] I think that there would need to be changes to the placeholder css to make this work.

I've added the missing placeholder CSS to the fork. It's now updated to use the existing placeholder styling. It now works as expected, see the example:

👁️ View example

 TiptapEditor::make('content')
      ->customDocument('heading block+')
      ->nodePlaceholders([
          'paragraph' => 'Start writing...',
          'heading' => 'A wonderful title',
      ])

Are you disabling the floating menu? Seems like there would be a conflict with this [...]

You are right: I disabled floating menu's in my personal project. I now notice the issue as well: if you enter a block that does not have any floating menu items, then it is still shown. This is not caused by this PR, since I can reproduce it on the main branch:

Reproduction

1. Enter a heading
2. See a empty Tippy tooltip:

I notice the floating menu already contains a x-show to check if it's a paragraph, but it seems like this rule is not respected. I've added some JS code to enforce this rule, see #b0aac1. It now works as expected, see the example:

👁️ View example

If you now focus on an empty heading, then the floating menu will be hidden:

 TiptapEditor::make('content')
      ->customDocument('heading block+')
      ->nodePlaceholders([
          'paragraph' => 'Start writing...',
          'heading' => 'A wonderful title',
      ])

The floating menu still works for paragraphs:

[awcodes]

This looks good. If you can merge in the updates I've done and resolve the conflicts I'll get it merged in. Thanks.

[thijskuilman]

Thanks @awcodes! I just updated the branch.