synchronize static assets with .NET MAUI

Oqtane.Maui/wwwroot/css/app.css

@@ -286,3 +286,34 @@ app {
     top: 0;
     right: 5px;
 }
+
+.app-modulemessage-toast {
+    position: fixed;
+    width: 350px;
+    z-index: 1000;
+    animation: slide-in 0.5s ease-out, slide-out 0.5s ease-in 5s forwards;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slide-out {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}

Oqtane.Maui/wwwroot/css/texteditors/radzen/radzentexteditor.css

@@ -0,0 +1,42 @@
+.rz-text-editor {
+    outline: none !important;
+}
+
+.rz-html-editor-dropdown-items,
+.rz-popup,
+.rz-editor-dialog-wrapper {
+    z-index: 9999 !important;
+}
+
+.rz-html-editor-dropdown-items .rz-html-editor-dropdown-item,
+.rz-html-editor-dropdown-items .rz-html-editor-dropdown-item > * {
+    color: var(--rz-editor-button-color);
+}
+.rz-text-editor .rz-html-editor-dropdown .rz-html-editor-dropdown-value,
+.rz-text-editor .rz-html-editor-dropdown .rz-html-editor-dropdown-trigger,
+.rz-text-editor .rz-html-editor-colorpicker .rz-html-editor-color {
+    color: var(--rz-editor-button-color);
+}
+.rz-text-editor .rz-colorpicker.rz-state-disabled {
+    border: none !important;
+}
+.rz-text-editor-dialog .rz-html-editor-dialog-item select{
+    border: var(--rz-input-border);
+    border-block-end: var(--rz-input-border-block-end);
+    border-radius: var(--rz-input-border-radius);
+    box-shadow: var(--rz-input-shadow);
+    background-color: var(--rz-input-background-color);
+    padding-block: var(--rz-input-padding-block);
+    padding-inline: var(--rz-input-padding-inline);
+    font-size: var(--rz-input-font-size);
+    color: var(--rz-input-value-color);
+}
+.rz-text-editor-dialog .rz-html-editor-dialog-item select:hover, .rz-text-edit-dialog .rz-html-editor-dialog-item select:active {
+    box-shadow: var(--rz-input-hover-shadow);
+    background-color: var(--rz-input-hover-background-color);
+    border: var(--rz-input-hover-border);
+    border-block-end: var(--rz-input-hover-border-block-end);
+}
+.rz-text-editor-dialog .alert form{
+    display: none;
+}

Oqtane.Maui/wwwroot/js/texteditors/quilljs/quill-interop.js

@@ -0,0 +1,54 @@
+var Oqtane = Oqtane || {};
+
+Oqtane.RichTextEditor = {
+    createQuill: async function (
+        quillElement, toolBar, readOnly,
+        placeholder, theme, debugLevel) {
+
+        Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
+
+        var options = {
+            debug: debugLevel,
+            modules: {
+                toolbar: toolBar,
+                blotFormatter: {}
+            },
+            placeholder: placeholder,
+            readOnly: readOnly,
+            theme: theme
+        };
+
+        new Quill(quillElement, options);
+    },
+    getQuillContent: function (editorElement) {
+        return JSON.stringify(editorElement.__quill.getContents());
+    },
+    getQuillText: function (editorElement) {
+        return editorElement.__quill.getText();
+    },
+    getQuillHTML: function (editorElement) {
+        return editorElement.__quill.root.innerHTML;
+    },
+    loadQuillContent: function (editorElement, editorContent) {
+        return editorElement.__quill.root.innerHTML = editorContent;
+    },
+    enableQuillEditor: function (editorElement, mode) {
+        editorElement.__quill.enable(mode);
+    },
+    getCurrentCursor: function (quillElement) {
+        var editorIndex = 0;
+        if (quillElement.__quill.getSelection() !== null) {
+            editorIndex = quillElement.__quill.getSelection().index;
+        }
+        return editorIndex;
+    },
+    insertQuillImage: function (quillElement, imageURL, altText, editorIndex) {
+        var Delta = Quill.import('delta');
+
+        return quillElement.__quill.updateContents(
+            new Delta()
+                .retain(editorIndex)
+                .insert({ image: imageURL },
+                    { alt: altText }));
+    }
+};

Oqtane.Maui/wwwroot/js/texteditors/radzen/radzen-interop.js

@@ -0,0 +1,47 @@
+var Oqtane = Oqtane || {};
+
+Oqtane.RadzenTextEditor = {
+    initialize: function (editor) {
+        if (typeof Radzen.openPopup === "function" && Radzen.openPopup !== Oqtane.RadzenTextEditor.openPopup) {
+            Oqtane.RadzenTextEditor.radzenOpenPopup = Radzen.openPopup;
+            Radzen.openPopup = Oqtane.RadzenTextEditor.openPopup;
+        }
+    },
+    openPopup: function () {
+        Oqtane.RadzenTextEditor.radzenOpenPopup.apply(this, arguments);
+        var id = arguments[1];
+        var popup = document.getElementById(id);
+        if (popup) {
+            Oqtane.RadzenTextEditor.updateButtonStyles(popup);
+        }
+    },
+    setBackgroundColor: function (editor, color) {
+        editor.getElementsByClassName("rz-html-editor-content")[0].style.backgroundColor = color;
+    },
+    updateDialogLayout: function (editor) {
+        var dialogs = editor.parentElement.getElementsByClassName('rz-dialog-wrapper');
+        for (var dialog of dialogs) {
+            document.body.appendChild(dialog);
+            dialog.classList.add('rz-editor-dialog-wrapper', 'text-dark');
+
+            this.updateButtonStyles(dialog);
+        }
+    },
+    updateButtonStyles: function (parent) {
+        var primaryBtns = parent.getElementsByClassName('rz-primary');
+        if (primaryBtns) {
+            for (var btn of primaryBtns) {
+                btn.classList.remove('rz-button', 'rz-primary');
+                btn.classList.add('btn', 'btn-primary');
+            }
+        }
+
+        var secondaryBtns = parent.getElementsByClassName('rz-secondary');
+        if (secondaryBtns) {
+            for (var btn of secondaryBtns) {
+                btn.classList.remove('rz-button', 'rz-secondary');
+                btn.classList.add('btn', 'btn-secondary');
+            }
+        }
+    }
+}