Add editor formatting for alerts

resources/css/editor.css

@@ -81,3 +81,29 @@ h4.ce-header {
 .cdx-notify__cross::before {
     background: white;
 }
+
+.cdx-alert-primary {
+    @apply bg-primary-800 text-primary-100 border-primary-700 !important;
+}
+
+.cdx-alert-secondary {
+    @apply bg-teal-800 text-teal-100 border-teal-700 !important;
+}
+.cdx-alert-info {
+    @apply bg-blue-800 text-blue-100 border-blue-700 !important;
+}
+.cdx-alert-success {
+    @apply bg-green-800 text-green-100 border-green-700 !important;
+}
+.cdx-alert-warning {
+    @apply bg-yellow-800 text-yellow-100 border-yellow-700 !important;
+}
+.cdx-alert-danger {
+    @apply bg-red-800 text-red-100 border-red-700 !important;
+}
+.cdx-alert-light {
+    @apply bg-gray-400 text-gray-800 border-gray-300 !important;
+}
+.cdx-alert-dark {
+    @apply bg-gray-900 text-gray-200 border-gray-800 !important;
+}

resources/js/components/form/Editor.vue

@@ -17,6 +17,7 @@ import EditorJS from '@editorjs/editorjs';
 import Header from '@editorjs/header';
 import Paragraph from '@editorjs/paragraph';
 import NestedList from '@editorjs/nested-list';
+import Alert from 'editorjs-alert';
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
@@ -71,6 +72,13 @@ onMounted(async () => {
                     placeholder: 'Absatz',
                 },
             },
+            alert: {
+                class: Alert,
+                inlineToolbar: true,
+                config: {
+                    defaultType: 'primary',
+                },
+            },
             heading: {
                 class: Header,
                 shortcut: 'CTRL+H',