refactor: limit html options in markdown parser

resources/assets/js/modal.js

@@ -8,33 +8,33 @@ const Modal = {
     previousPaddingRight: undefined,
     previousNavPaddingRight: undefined,
 
-    defaultOptions: {
+    defaultSettings: {
         reserveScrollBarGap: true,
         reserveNavScrollBarGap: true,
     },
 
-    onModalOpened(scrollable, options = Modal.defaultOptions) {
-        if (options.reserveScrollBarGap) {
+    onModalOpened(scrollable, settings = Modal.defaultSettings) {
+        if (settings.reserveScrollBarGap) {
             this.reserveModalScrollBarGap(scrollable);
         }
 
-        if (options.reserveNavScrollBarGap) {
+        if (settings.reserveNavScrollBarGap) {
             this.reserveNavScrollBarGap(scrollable);
         }
 
         disableBodyScroll(scrollable, {
-            reserveScrollBarGap: !!options.reserveScrollBarGap,
+            reserveScrollBarGap: !!settings.reserveScrollBarGap,
         });
 
         scrollable.focus();
     },
 
-    onModalClosed(scrollable, options = Modal.defaultOptions) {
-        if (options.reserveScrollBarGap) {
+    onModalClosed(scrollable, settings = Modal.defaultSettings) {
+        if (settings.reserveScrollBarGap) {
             this.restoreModalScrollBarGap(scrollable);
         }
 
-        if (options.reserveNavScrollBarGap) {
+        if (settings.reserveNavScrollBarGap) {
             this.restoreNavScrollBarGap(scrollable);
         }
 
@@ -48,7 +48,7 @@ const Modal = {
     alpine(
         extraData = {},
         modalName = "",
-        eventOptions = Modal.defaultOptions
+        eventSettings = Modal.defaultSettings
     ) {
         return {
             name: modalName,
@@ -57,12 +57,13 @@ const Modal = {
             onBeforeShow: false,
             onHidden: false,
             onShown: false,
+            options: null,
             init() {
                 const scrollable = this.getScrollable();
                 if (this.name) {
-                    Livewire.on("openModal", (modalName) => {
+                    Livewire.on("openModal", (modalName, ...options) => {
                         if (this.name === modalName) {
-                            this.show();
+                            this.show(options);
                         }
                     });
 
@@ -74,39 +75,43 @@ const Modal = {
                 }
 
                 this.$watch("shown", (shown) => {
-                    if (typeof this.onBeforeShow === "function") {
-                        this.onBeforeShow();
+                    if (shown && typeof this.onBeforeShow === "function") {
+                        this.onBeforeShow(this.options);
                     }
 
-                    if (typeof this.onBeforeHide === "function") {
-                        this.onBeforeHide();
+                    if (!shown && typeof this.onBeforeHide === "function") {
+                        this.onBeforeHide(this.options);
                     }
 
                     this.$nextTick(() => {
                         if (shown) {
                             if (typeof this.onShown === "function") {
-                                this.onShown();
+                                this.onShown(this.options);
                             }
 
-                            Modal.onModalOpened(scrollable, eventOptions);
+                            Modal.onModalOpened(scrollable, eventSettings);
                         } else {
                             if (typeof this.onHidden === "function") {
-                                this.onHidden();
+                                this.onHidden(this.options);
                             }
 
-                            Modal.onModalClosed(scrollable, eventOptions);
+                            Modal.onModalClosed(scrollable, eventSettings);
                         }
                     });
                 });
 
                 if (this.shown) {
-                    Modal.onModalOpened(scrollable, eventOptions);
+                    Modal.onModalOpened(scrollable, eventSettings);
                 }
             },
             hide() {
+                this.options = null;
+
                 this.shown = false;
             },
-            show() {
+            show(options) {
+                this.options = options;
+
                 this.shown = true;
             },
             getScrollable() {
@@ -117,18 +122,18 @@ const Modal = {
         };
     },
 
-    livewire(extraData = {}, eventOptions = Modal.defaultOptions) {
+    livewire(extraData = {}, eventSettings = Modal.defaultSettings) {
         return {
             init() {
                 const scrollable = this.getScrollable();
 
                 this.$wire.on("modalClosed", () => {
                     this.$nextTick(() => {
-                        Modal.onModalClosed(scrollable, eventOptions);
+                        Modal.onModalClosed(scrollable, eventSettings);
                     });
                 });
 
-                Modal.onModalOpened(scrollable, eventOptions);
+                Modal.onModalOpened(scrollable, eventSettings);
             },
             getScrollable() {
                 const { modal } = this.$refs;

resources/lang/en/forms.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'do_not_show_message_again'     => 'Do not show this message again.',
     'attachment_pdf'                => 'Attachment (.PDF)',
     'email'                         => 'E-Mail Address',
     'message'                       => 'Message',

resources/views/external-link-confirm.blade.php

@@ -1,66 +1,121 @@
-@props([
-    'url',
-    'text' => null,
-    'noIcon' => false,
-])
-
-@php($identifier = md5($url . '-' . Str::random(8)))
-
-<a
-    href="javascript:;"
+{{-- External icon classes, dont remove are here for purgecss --}}
+{{-- inline ml-1 -mt-1.5 --}}
+<x-ark-js-modal
+    name="external-link-confirm"
+    class="w-full max-w-2xl text-left rounded-xl"
+    title-class="header-2"
+    buttons-style="flex justify-end space-x-3"
     x-data="{
-        openModal() {
-            Livewire.emit('openModal', '{{ $identifier }}')
-        }
+        url: null,
+        hasConfirmedLinkWarning: false,
+        toggle () {
+            this.hasConfirmedLinkWarning = ! this.hasConfirmedLinkWarning;
+        },
+        onBeforeShow ([ url ]) {
+            this.url = url;
+        },
+        onHidden () {
+            this.hasConfirmedLinkWarning = false;
+            document.querySelector('input[name=confirmation]').checked = false;
+        },
+        followLink() {
+            if (this.hasConfirmedLinkWarning) {
+                localStorage.setItem('has_disabled_link_warning', true)
+            }
+
+            this.hide();
+        },
     }"
-    class="items-center font-semibold break-all cursor-pointer link"
-    @click="openModal"
+    init
 >
-    <span>{{ $text ?? $slot ?? '' }}</span>
-
-    @unless($noIcon)
-        <x-ark-icon name="link" size="sm" class="inline flex-shrink-0 ml-1 -mt-1.5" />
-    @endunless
-</a>
-
-@push('footer')
-    <x-ark-js-modal
-        :name="$identifier"
-        class="w-full max-w-2xl text-left rounded-xl"
-        title-class="header-2"
-        buttons-style="flex justify-end space-x-3"
-        init
-    >
-        @slot('title')
-            @lang('generic.external_link')
-        @endslot
-
-        @slot('description')
-            <div class="flex flex-col mt-8 space-y-4 whitespace-normal">
-                <div class="font-semibold text-theme-secondary-900">
-                    <x-ark-alert type="warning" :message="$url" message-class="break-all" />
+    @slot('title')
+        @lang('generic.external_link')
+    @endslot
+
+    @slot('description')
+        <div class="flex flex-col mt-8 space-y-4 whitespace-normal">
+            <div class="font-semibold text-theme-secondary-900">
+                <div class="alert-wrapper alert-warning">
+                    <div class="alert-icon-wrapper alert-warning-icon">
+                        <div class="p-1 rounded-full border-2 border-white">
+                            <x-ark-icon
+                                name="warning"
+                                size="xs"
+                            />
+
+                        </div>
+                    </div>
+                    <div class="alert-content-wrapper alert-warning-content">
+                        <span class="block leading-6 break-all" x-text="url"></span>
+                    </div>
                 </div>
-                <p>@lang('generic.external_link_disclaimer')</p>
             </div>
-        @endslot
 
-        @slot('buttons')
-            <button
-                class="button-secondary"
-                @click="hide"
-            >
-                @lang('actions.back')
-            </button>
-
-            <a
-                target="_blank"
-                rel="noopener nofollow"
-                class="cursor-pointer button-primary"
-                href="{{ $url }}"
-                @click="hide"
+            <p>@lang('generic.external_link_disclaimer')</p>
+
+            <x-ark-checkbox
+                name="confirmation"
+                alpine="toggle"
             >
-                @lang('actions.follow_link')
-            </a>
-        @endslot
-    </x-ark-js-modal>
-@endpush
+                @slot('label')
+                    @lang('ui::forms.do_not_show_message_again')
+                @endslot
+            </x-ark-checkbox>
+        </div>
+    @endslot
+
+    @slot('buttons')
+        <button
+            class="button-secondary"
+            @click="hide"
+        >
+            @lang('actions.back')
+        </button>
+
+        <a
+            target="_blank"
+            rel="noopener nofollow"
+            class="cursor-pointer button-primary"
+            :href="url"
+            @click="followLink()"
+        >
+            @lang('actions.follow_link')
+        </a>
+    @endslot
+</x-ark-js-modal>
+
+
+<script type="text/javascript">
+document.addEventListener("DOMContentLoaded", function (event) {
+    function initExternalLinkConfirm() {
+        const selectors = [
+            '[href*="://"]',
+            ':not([href^="{{ config("app.url") }}"])',
+            ':not([data-safe-external])',
+            ':not([data-external-link-confirm])',
+        ];
+
+        const links = document.querySelectorAll(`a${selectors.join('')}`);
+
+        links.forEach(function (link) {
+            link.setAttribute('data-external-link-confirm', 'true');
+
+            link.addEventListener('click', function(e) {
+                if (localStorage.getItem('has_disabled_link_warning') === 'true') {
+                    return;
+                }
+
+                e.preventDefault();
+
+                Livewire.emit('openModal', 'external-link-confirm', link.getAttribute('href'));
+            });
+        });
+    }
+
+    Livewire.hook("message.processed", function (message, component) {
+        initExternalLinkConfirm();
+    });
+
+    initExternalLinkConfirm();
+});
+</script>

resources/views/external-link.blade.php

@@ -5,6 +5,7 @@
     'inline'    => false,
     'allowWrap' => false,
     'small'     => false,
+    'noIcon'    => false,
 ])
 
 <a
@@ -13,11 +14,13 @@ class="{{ $class }} {{ $inline ? 'inline space-x-1' : 'flex items-center space-x
     target="_blank"
     rel="noopener nofollow noreferrer"
 >
-    <span>{{ $text }}</span>
+    <span>{{ $slot ?? $text }}</span>
 
-    <x-ark-icon
-        name="link"
-        :size="$small ? 'xs' : 'sm'"
-        :class="'flex-shrink-0 '.($inline ? 'inline mr-1 -mt-1' : 'mr-2')"
-    />
+    @unless($noIcon)
+        <x-ark-icon
+            name="link"
+            :size="$small ? 'xs' : 'sm'"
+            :class="'flex-shrink-0 '.($inline ? 'inline mr-1 -mt-1' : 'mr-2')"
+        />
+    @endunless
 </a>

resources/views/footer-social.blade.php

@@ -37,6 +37,6 @@
 
 <div class="flex space-x-5">
     @foreach($networks as $network)
-        <x-ark-social-link :url="$network['url']" :icon="$network['icon']" />
+        <x-ark-social-link :url="$network['url']" :icon="$network['icon']" data-safe-external />
     @endforeach
 </div>

resources/views/inputs/checkbox.blade.php

@@ -9,6 +9,7 @@
     'value'                 => null,
     'checked'               => false,
     'disabled'              => false,
+    'alpine'                => false,
     'right'                 => false
 ])
 
@@ -38,6 +39,7 @@ class="form-checkbox input-checkbox"
                 @if($value) value="{{ $value }}" @endif
                 @if($checked) checked @endif
                 @if($disabled) disabled @endif
+                @if($alpine) @click="{{ $alpine }}" @endif
             />
         </div>
 

resources/views/js-modal.blade.php

@@ -13,6 +13,7 @@
 ])
 
 <div
+    {{ $attributes }}
     x-ref="modal"
     data-modal
     x-cloak

resources/views/social-link.blade.php

@@ -1,4 +1,5 @@
 <a
+    {{ $attributes }}
     href="{{ $url }}"
     target="_blank"
     rel="noopener noreferrer"