Merge pull request #515 from sibizwolle/extension-placeholders

Node specific placeholders and showOnlyCurrent property

README.md

@@ -509,6 +509,33 @@ If you are using any of the tools that require a modal (e.g. Insert media, Inser
 {{ $this->modal }}
 ```
 
+### Placeholders
+
+You can easily set a placeholder, the Filament way:
+
+```php
+TiptapEditor::make('content')
+    ->placeholder('Write something...')
+```
+
+You can define specific placeholders for each node type using the `->nodePlaceholders()` method. This method accepts an associative array, where the keys are the node type names, and the values are the corresponding placeholder texts.
+
+```php
+TiptapEditor::make('content')
+    ->nodePlaceholders([
+        'paragraph' => 'Start writing your paragraph...',
+        'heading' => 'Insert a heading...',
+    ])
+```
+
+The `->showOnlyCurrentPlaceholder()` method allows you to control whether placeholders are shown for all nodes simultaneously or only for the currently active node.
+
+```php
+TiptapEditor::make('content')
+    // All nodes will immediately be displayed, instead of only the selected node
+    ->showOnlyCurrentPlaceholder(false)
+```
+
 ## Custom Extensions
 
 You can add your own extensions to the editor by creating the necessary files and adding them to the config file extensions array.

resources/css/plugin.css

@@ -680,7 +680,8 @@
     font-family: theme("fontFamily.mono") monospace;
 }
 
-.tiptap-editor p.is-editor-empty:first-child::before {
+.tiptap-editor p.is-editor-empty:first-child::before,
+.tiptap-wrapper .is-empty::before {
     content: attr(data-placeholder);
     float: left;
     height: 0;

resources/js/plugin.js

@@ -159,7 +159,9 @@ export default function tiptap({
    floatingMenuTools = [],
    placeholder = null,
    mergeTags = [],
-  customDocument = null,
+   customDocument = null,
+   nodePlaceholders = [],
+   showOnlyCurrentPlaceholder = true,
 }) {
     let editor = null;
 
@@ -205,8 +207,16 @@ export default function tiptap({
                 TiptapBlock,
             ];
 
-            if (placeholder && (!disabled)) {
-                extensions.push(Placeholder.configure({placeholder}));
+            if ((placeholder || nodePlaceholders) && (!disabled)) {
+                extensions.push(
+                  Placeholder.configure({
+                      showOnlyCurrent: showOnlyCurrentPlaceholder,
+                      placeholder: ({ node }) => {
+                          const nodeSpecificPlaceholder = nodePlaceholders?.[node.type.name];
+                          return nodeSpecificPlaceholder || placeholder || '';
+                      },
+                  })
+                );
             }
 
             if (tools.length) {
@@ -260,6 +270,9 @@ export default function tiptap({
                             appendTo: this.$refs.element,
                             zIndex: 10,
                         },
+                        shouldShow: ({state, from, to}) => {
+                           return isActive(state, 'paragraph');
+                       }
                     }))
 
                     this.floatingMenuTools.forEach((tool) => {

resources/views/tiptap-editor.blade.php

@@ -9,6 +9,8 @@
     $shouldSupportBlocks = $shouldSupportBlocks();
     $shouldShowMergeTagsInBlocksPanel = $shouldShowMergeTagsInBlocksPanel();
     $customDocument = $getCustomDocument();
+    $nodePlaceholders = $getNodePlaceholders();
+    $showOnlyCurrentPlaceholder = $getShowOnlyCurrentPlaceholder();
 @endphp
 
 <x-dynamic-component
@@ -44,7 +46,9 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900 focus-wi
                         floatingMenuTools: @js($floatingMenuTools),
                         placeholder: @js($getPlaceholder()),
                         mergeTags: @js($mergeTags),
-                        customDocument: @js($customDocument)
+                        customDocument: @js($customDocument),
+                        nodePlaceholders: @js($nodePlaceholders),
+                        showOnlyCurrentPlaceholder: @js($showOnlyCurrentPlaceholder)
                     })"
                     x-init="$nextTick(() => { init() })"
                     x-on:click.away="blur()"

src/TiptapEditor.php

@@ -51,6 +51,10 @@ class TiptapEditor extends Field
 
     protected string | Closure | null $customDocument = null;
 
+    protected array | Closure | null $nodePlaceholders = null;
+
+    protected array | bool | null $showOnlyCurrentPlaceholder = false;
+
     protected array $gridLayouts = [
         'two-columns',
         'three-columns',
@@ -407,6 +411,44 @@ public function getCustomDocument(): ?string
         return $this->evaluate($this->customDocument);
     }
 
+    /**
+     * Set placeholders for specific node types.
+     *
+     * You can provide an associative array where the keys are the node type names and the
+     * values are the corresponding placeholders. For instance:
+     *
+     * ['heading' => 'What’s the title?', 'paragraph' => 'Start writing here...']
+     * @return $this
+     */
+    public function nodePlaceholders(array | Closure | null $nodePlaceholders): static
+    {
+        $this->nodePlaceholders = $nodePlaceholders;
+
+        return $this;
+    }
+
+    public function getNodePlaceholders(): ?array
+    {
+        return $this->evaluate($this->nodePlaceholders);
+    }
+
+    /**
+     * Show placeholder decorations only in currently selected node.
+     *
+     * @return $this
+     */
+    public function showOnlyCurrentPlaceholder(bool | Closure | null $showOnlyCurrent): static
+    {
+        $this->showOnlyCurrentPlaceholder = $showOnlyCurrent;
+
+        return $this;
+    }
+
+    public function getShowOnlyCurrentPlaceholder(): ?bool
+    {
+        return $this->evaluate($this->showOnlyCurrentPlaceholder);
+    }
+
     public function shouldDisableStylesheet(): bool
     {
         return $this->shouldDisableStylesheet ?? config('filament-tiptap-editor.disable_stylesheet');