Refactor MarkdownEditor to use structured link data

Updated the MarkdownEditor component and its Blade view to handle link and media insertions using structured data objects instead of plain markdown strings. This enables more flexible handling of attributes and supports toggling selected text as links. The PHP methods now return arrays with url, title, tag, and attributes, and the JavaScript logic formats these into markdown as needed.

Author: cklei-carly

resources/views/filament/forms/components/markdown-editor.blade.php

@@ -137,15 +137,69 @@
 
                     var cm = editor.codemirror;
 
-                    const urls = $event.detail.data || '';
+                    // Convert data to array if it's not already
+                    const dataArray = Array.isArray($event.detail.data) ? $event.detail.data : [$event.detail.data || ''];
+                    const pickerName = $event.detail.name;
 
-                    var startPoint = cm.getCursor('start')
-                    var endPoint = cm.getCursor('end')
-                    cm.replaceRange(
-                        urls,
-                        startPoint,
-                        endPoint,
-                    );
+                    var startPoint = cm.getCursor('start');
+                    var endPoint = cm.getCursor('end');
+                    var selectedText = cm.getSelection();
+
+                    // Helper function to format attributes string
+                    const formatAttributes = (attributes) => {
+                        if (!attributes || typeof attributes !== 'string' || attributes.trim() === '') {
+                            return '';
+                        }
+                        
+                        return `{${attributes}}`;
+                    };
+
+                    // Helper function to convert item object to markdown
+                    const itemToMarkdown = (item) => {
+                        if (typeof item === 'string') {
+                            return item; // Fallback for old format
+                        }
+                        
+                        const { url, title, tag, attributes } = item;
+                        let markdown = '';
+                        
+                        if (tag === 'img') {
+                            markdown = `![${title}](${url})`;
+                        } else {
+                            markdown = `[${title}](${url})`;
+                        }
+                        
+                        // Add attributes using helper function
+                        markdown += formatAttributes(attributes);
+                        
+                        return markdown;
+                    };
+
+                    if (pickerName === 'contentPicker' && selectedText && dataArray.length > 0) {
+                        // For contentPicker with selected text, toggle as link
+                        const item = dataArray[0];
+                        const { url, attributes } = item;
+                        
+                        let linkMarkdown = `[${selectedText}](${url})`;
+                        
+                        // Add attributes using helper function
+                        linkMarkdown += formatAttributes(attributes);
+                        
+                        cm.replaceRange(
+                            linkMarkdown,
+                            startPoint,
+                            endPoint,
+                        );
+                    } else {
+                        // Default behavior: insert the content
+                        const markdownItems = dataArray.map(itemToMarkdown);
+                        
+                        cm.replaceRange(
+                            markdownItems.join(' '),
+                            startPoint,
+                            endPoint,
+                        );
+                    }
                 }"
                 {{ $getExtraAlpineAttributeBag() }}
             >

src/Filament/Forms/Components/MarkdownEditor.php

@@ -74,6 +74,7 @@ public function getContentPickerAction()
 
                 $livewire->dispatch(
                     'append-custom-links-to-markdown-editor',
+                    name: 'contentPicker',
                     awaitSchemaComponent: $key,
                     livewireId: $livewire->getId(),
                     key: $key,
@@ -115,6 +116,7 @@ public function getMediaPickerAction()
 
                 $livewire->dispatch(
                     'append-custom-links-to-markdown-editor',
+                    name: 'mediaPicker',
                     awaitSchemaComponent: $key,
                     livewireId: $livewire->getId(),
                     key: $key,
@@ -138,7 +140,7 @@ public function formatMediaPickerState($state)
             ->filter(fn ($record) => $record instanceof MediaAsset)
             ->sortBy(fn (Model $record) => array_search($record->getKey(), $state))
             ->map(fn (Model | MediaAsset $record) => $this->mutateMediaPickerState($record))
-            ->implode(' ');
+            ->toArray();
     }
 
     public function formatContentPickerState($state)
@@ -155,7 +157,7 @@ public function formatContentPickerState($state)
             ->filter(fn ($record) => $record instanceof Content)
             ->sortBy(fn (Model $record) => array_search($record->getKey(), $state))
             ->map(fn (Model | Content $record) => $this->mutateContentPickerState($record))
-            ->implode("\r\n");
+            ->toArray();
     }
 
     protected function mutateMediaPickerState(Model | MediaAsset $mediaAsset)
@@ -165,19 +167,21 @@ protected function mutateMediaPickerState(Model | MediaAsset $mediaAsset)
         $mediaUrl = $mediaAsset->getUrl(isAbsolute: false);
         $title = $media?->title ?? $mediaAsset->title;
 
-        if ($mediaAsset->isImage()) {
-            $template = '![%s](%s)';
-        } else {
-            $template = '[%s](%s)';
-        }
-        $template .= '{data-cmsmediaasset-id="%s"}';
-
-        return sprintf(
-            $template,
-            htmlspecialchars($title),
-            htmlspecialchars($mediaUrl),
-            htmlspecialchars($mediaAsset->getKey()),
-        );
+        $attributes = [
+            'data-cmsmediaasset-id' => $mediaAsset->getKey(),
+        ];
+
+        // Convert attributes array to string
+        $attributesString = collect($attributes)
+            ->map(fn($value, $key) => "{$key}=\"{$value}\"")
+            ->join(' ');
+
+        return [
+            'url' => $mediaUrl,
+            'title' => $title,
+            'tag' => $mediaAsset->isImage() ? 'img' : 'a',
+            'attributes' => $attributesString,
+        ];
     }
 
     protected function mutateContentPickerState(Model | Content $content)
@@ -212,14 +216,21 @@ protected function mutateContentPickerState(Model | Content $content)
             ->prepend('/')
             ->toString();
 
-        $template = '[%s](%s){data-content-id="%s" data-content-slug="%s"}';
+        $attributes = [
+            'data-content-id' => $content->getKey(),
+            'data-content-slug' => $content->slug,
+        ];
+
+        // Convert attributes array to string
+        $attributesString = collect($attributes)
+            ->map(fn($value, $key) => "{$key}=\"{$value}\"")
+            ->join(' ');
 
-        return sprintf(
-            $template,
-            htmlspecialchars($content->title),
-            htmlspecialchars($relativeUrl),
-            htmlspecialchars($content->getKey()),
-            htmlspecialchars($content->slug),
-        );
+        return [
+            'url' => $relativeUrl,
+            'title' => $content->title,
+            'tag' => 'a',
+            'attributes' => $attributesString,
+        ];
     }
 }