Adds the ability to define a list of allowed link protocols (#18502)

* Adds the ability to define a list of allowed link protocols

* clean up

* Update rich-editor.js

---------

Co-authored-by: Dan Harrin <git@danharrin.com>

packages/forms/resources/js/components/rich-editor.js

@@ -11,10 +11,12 @@ export default function richEditorFormComponent({
     deleteCustomBlockButtonIconHtml,
     editCustomBlockButtonIconHtml,
     extensions,
-    key,
+    floatingToolbars,
     isDisabled,
     isLiveDebounced,
     isLiveOnBlur,
+    key,
+    linkProtocols,
     liveDebounce,
     livewireId,
     maxFileSize,
@@ -26,7 +28,6 @@ export default function richEditorFormComponent({
     statePath,
     textColors,
     uploadingFileMessage,
-    floatingToolbars,
 }) {
     let editor
     let eventListeners = []
@@ -69,6 +70,7 @@ export default function richEditorFormComponent({
                             },
                             { schemaComponent: key },
                         ),
+                    floatingToolbars,
                     insertCustomBlockUsing: (id, dragPosition = null) =>
                         this.$wire.mountAction(
                             'customBlock',
@@ -76,6 +78,7 @@ export default function richEditorFormComponent({
                             { schemaComponent: key },
                         ),
                     key,
+                    linkProtocols,
                     maxFileSize,
                     maxFileSizeValidationMessage,
                     mergeTags,
@@ -85,7 +88,6 @@ export default function richEditorFormComponent({
                     textColors,
                     uploadingFileMessage,
                     $wire: this.$wire,
-                    floatingToolbars,
                 }),
                 content: this.state,
             })

packages/forms/resources/js/components/rich-editor/extensions.js

@@ -46,6 +46,7 @@ export default async ({
     editCustomBlockButtonIconHtml,
     editCustomBlockUsing,
     insertCustomBlockUsing,
+    linkProtocols,
     key,
     maxFileSize,
     maxFileSizeValidationMessage,
@@ -89,6 +90,7 @@ export default async ({
         Link.configure({
             autolink: true,
             openOnClick: false,
+            protocols: linkProtocols,
         }),
         ListItem,
         ...(canAttachFiles

packages/forms/resources/views/components/rich-editor.blade.php

@@ -11,6 +11,7 @@
     $tools = $getTools();
     $toolbarButtons = $getToolbarButtons();
     $floatingToolbars = $getFloatingToolbars();
+    $linkProtocols = $getLinkProtocols();
     $fileAttachmentsMaxSize = $getFileAttachmentsMaxSize();
     $fileAttachmentsAcceptedFileTypes = $getFileAttachmentsAcceptedFileTypes();
 @endphp
@@ -35,10 +36,12 @@
                         deleteCustomBlockButtonIconHtml: @js(\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::Trash, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_DELETE_BUTTON)->toHtml()),
                         editCustomBlockButtonIconHtml: @js(\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::PencilSquare, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_EDIT_BUTTON)->toHtml()),
                         extensions: @js($getTipTapJsExtensions()),
-                        key: @js($key),
+                        floatingToolbars: @js($floatingToolbars),
                         isDisabled: @js($isDisabled),
                         isLiveDebounced: @js($isLiveDebounced()),
                         isLiveOnBlur: @js($isLiveOnBlur()),
+                        key: @js($key),
+                        linkProtocols: @js($linkProtocols),
                         liveDebounce: @js($getNormalizedLiveDebounce()),
                         livewireId: @js($this->getId()),
                         maxFileSize: @js($fileAttachmentsMaxSize),
@@ -50,7 +53,6 @@
                         statePath: @js($statePath),
                         textColors: @js($getTextColorsForJs()),
                         uploadingFileMessage: @js($getUploadingFileMessage()),
-                        floatingToolbars: @js($floatingToolbars),
                     })"
             x-bind:class="{
                 'fi-fo-rich-editor-uploading-file': isUploadingFile,

packages/forms/src/Components/RichEditor.php

@@ -46,6 +46,11 @@ class RichEditor extends Field implements Contracts\CanBeLengthConstrained
 
     protected string | Closure | null $uploadingFileMessage = null;
 
+    /**
+     * @var array<string> | Closure
+     */
+    protected array | Closure $linkProtocols = ['http', 'https', 'mailto'];
+
     protected bool | Closure | null $isJson = null;
 
     /**
@@ -562,6 +567,24 @@ class RichEditor extends Field implements Contracts\CanBeLengthConstrained
             ->getEditor();
     }
 
+    /**
+     * @param  array<string> | Closure  $protocols
+     */
+    public function linkProtocols(array | Closure $protocols): static
+    {
+        $this->linkProtocols = $protocols;
+
+        return $this;
+    }
+
+    /**
+     * @return array<string>
+     */
+    public function getLinkProtocols(): array
+    {
+        return $this->evaluate($this->linkProtocols);
+    }
+
     /**
      * @return array<RichContentPlugin>
      */

packages/schemas/src/Components/Concerns/CanBeRepeated.php

@@ -11,7 +11,11 @@ trait CanBeRepeated
 
     public function getParentRepeater(): ?Repeater
     {
-        return $this->getParentRepeaterItem()?->getParentComponent();
+        $repeater = $this->getParentRepeaterItem()?->getParentComponent();
+
+        assert($repeater instanceof Repeater);
+
+        return $repeater;
     }
 
     public function getParentRepeaterItem(): ?Schema