New editor. (#1034)

* New editor. * Fix tests
3 years ago · 0909a21fc7
37 changed files with 5340 additions and 1278 deletions
--- a/backend/src/Squidex/wwwroot/editor/squidex-editor.css
+++ b/backend/src/Squidex/wwwroot/editor/squidex-editor.css
@ -0,0 +1 @@
+.remirror-theme{width:100%}.remirror-theme *{box-sizing:border-box}.remirror-editor{min-height:300px!important;max-height:500px}.menu{border:1px solid #dedfe3;border-bottom:0}.MuiStack-root{padding:5px}.MuiStack-root>.MuiBox-root{margin-right:5px}.MuiStack-root>.MuiBox-root>button.MuiButtonBase-root{margin-left:-1px}.MuiBox-root>.MuiButtonBase-root{border-color:#dedfe3!important;border-radius:0}.MuiButtonBase-root.Mui-selected:hover{background-color:#3284f4!important}.remirror-editor img{max-width:300px;max-height:300px}.remirror-editor-wrapper{padding-top:0!important}.custom-icon path{fill:#0000008a}.remirror-theme div.ProseMirror{border:1px solid #dedfe3!important;border-radius:0!important;box-shadow:none!important}.MuiTooltip-popper>div{background-color:#1a2129;border-radius:0;font-size:85%;font-weight:400;padding:.5rem}.squidex-editor-disabled{pointer-events:none}.squidex-editor-floating{border:1px solid #dedfe3}.squidex-editor-floating .MuiBox-root{margin-right:0!important}.squidex-editor-floating input{border:1px solid #dedfe3;border-radius:0;box-sizing:border-box;height:30px;margin-left:0;margin-right:5px;outline:none;padding:6px 12px}.squidex-editor-floating input:active{border-color:#3389ff}.squidex-editor-floating .MuiButtonBase-root{height:30px}.squidex-editor-counter{border:1px solid #dedfe3;border-top:0;font-size:85%;font-weight:400;opacity:.8;padding:4px 10px 4px 4px;text-align:right}
--- a/backend/src/Squidex/wwwroot/editor/squidex-editor.js
+++ b/backend/src/Squidex/wwwroot/editor/squidex-editor.js
--- a/backend/src/Squidex/wwwroot/scripts/editor-combined.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-combined.html
@ -6,10 +6,21 @@

    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
 </head>

 <body>
-    <textarea style="width: 100%; box-sizing: border-box; height: 40px;" name="content" id="editor"></textarea>
+    <textarea class="form-control" id="editor"></textarea>

    <script>
        var element = document.getElementById('editor');
--- a/backend/src/Squidex/wwwroot/scripts/editor-context.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-context.html
@ -7,13 +7,14 @@
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>

+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
+        body {
+            background-color: white;
+        }
+
        textarea {
-            box-sizing: border-box; 
-            resize: none;
-            overflow-x: hidden;
-            overflow-y: hidden;
-            width: 100%;
+            height: 300px;
        }
    </style>
 </head>
@ -26,7 +27,7 @@
        }
    </script>

-    <textarea oninput="grow(this)" name="content" id="editor"></textarea>
+    <textarea oninput="grow(this)" class="form-control" name="content" id="editor"></textarea>

    <script>
        var element = document.getElementById('editor');
--- a/backend/src/Squidex/wwwroot/scripts/editor-dialogs.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-dialogs.html
@ -6,22 +6,29 @@

    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
 </head>

 <body>
-    <button id="alert">
+    <button class="btn btn-outline-secondary" id="alert">
        ALERT
    </button>

-    <button id="info">
+    <button class="btn btn-outline-secondary" id="info">
        INFO
    </button>

-    <button id="confirm">
+    <button class="btn btn-outline-secondary" id="confirm">
        CONFIRM
    </button>

-    <button id="pickAssets">
+    <button class="btn btn-outline-secondary" id="pickAssets">
        PICK ASSETS
    </button>

--- a/backend/src/Squidex/wwwroot/scripts/editor-editorjs.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-editorjs.html
@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-
-    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
-    <script src="editor-sdk.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
-
-    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
-
-    <style>
-        .editor {
-            border: 1px solid #eee;
-            border-radius: 4px;
-            min-height: 50px;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="editor">
-        <div id="editorjs"></div>
-    </div>
-
-    <script>
-        // When the field is instantiated it notifies the UI that it has been loaded.
-        // 
-        // Furthermore it sends the current size to the parent.
-        var field = new SquidexFormField();
-
-        var editor = new EditorJS({
-            holder: 'editorjs',
-
-            tools: {
-                header: {
-                    class: Header,
-                    inlineToolbar : true
-                }
-            },
-
-            minHeight: 50,
-
-            data: {},
-
-            onReady: function () {
-                field.onValueChanged(function (value) {
-                    if (value) {
-                        editor.render(value);
-                    }
-                });
-
-                field.onDisabled(function (disabled) {
-                    editor.readOnly.toggle(disabled);
-                });
-            },
-            onChange: function () {
-                editor.save().then(function (data) {
-                    // Notify the UI that the value has been changed. Will be used to trigger validation.
-                    field.valueChanged(data);
-                });
-            }
-        });
-    </script>
-</body>
-
-</html>
--- a/backend/src/Squidex/wwwroot/scripts/editor-json-schema.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-json-schema.html
@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-
-    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
-    <script src="editor-sdk.js"></script>
-    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@rjsf/core/dist/react-jsonschema-form.js"></script>
-    
-    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
-
-    <style>
-        body {
-            background: none;
-        }
-
-        #root__title {
-            display: none;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="editor"></div>
-
-    <script>
-        const Form = JSONSchemaForm.default;
-        
-        // When the field is instantiated it notifies the UI that it has been loaded.
-        // 
-        // Furthermore it sends the current size to the parent.
-        const field = new SquidexFormField();
-
-        function Editor() {
-            var stateDisabled = React.useState(false); // Use ES5 language features only.
-            var stateValue = React.useState(undefined);
-            var stateSchema = React.useState(undefined);
-
-            React.useEffect(function () {
-                field.onDisabled(function (disabled) {
-                    stateDisabled[1](disabled);
-                });
-                
-                field.onValueChanged(function (value) {
-                    stateValue[1](value);
-                });
-
-                if (window.location.hash && window.location.hash.length > 1) {
-                    fetch(window.location.hash.substr(1))
-                        .then(x => x.json())
-                        .then(x => stateSchema[1](x));
-                }
-            }, []);
-
-            const doBlur = React.useCallback(function () {
-                field.touched();
-            }, []);
-
-            const doChange = React.useCallback(function (editor) {
-                if (editor.errors.length === 0) {
-                    field.valueChanged(editor.formData);
-                }
-            }, []);
-
-            if (!stateSchema[0]) {
-                return null;
-            }
-        
-            return (
-                React.createElement(Form, {
-                    formData: stateValue[0],
-                    disabled: stateDisabled[0],
-                    onChange: doChange,
-                    onBlur: doBlur,
-                    schema: stateSchema[0],
-                    children: [] // Hide submit button
-                })
-            );
-        }
-
-        ReactDOM.render(React.createElement(Editor), document.getElementById("editor"));
-    </script>
-</body>
-
-</html>
--- a/backend/src/Squidex/wwwroot/scripts/editor-log.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-log.html
@ -7,22 +7,26 @@
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>

+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
-        #textarea {
-            box-sizing: border-box;
-            min-width: 100%;
-            min-height: 200px;
-            margin-top: 10px;
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+            font-family: monospace;
+            font-size: 12px;
        }
    </style>
 </head>

 <body>
-    <div>
-        <button id="button">Generate New Value</button>
+    <div class="mb-2">
+        <button class="btn btn-outline-secondary" id="button">Generate New Value</button>
    </div>

-    <textarea readonly id="textarea"></textarea>
+    <textarea class="form-control" readonly id="textarea"></textarea>

    <script>
        var numberGenerator = 1;
--- a/backend/src/Squidex/wwwroot/scripts/editor-monaco.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-monaco.html
@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-
-    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
-    <script src="editor-sdk.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
-
-    <style>
-        .editor {
-            border: 1px solid #eee;
-            border-radius: 4px;
-            height: 500px;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="editor" id="editor"></div>
-
-    <script>
-        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
-
-        // When the field is instantiated it notifies the UI that it has been loaded.
-        // 
-        // Furthermore it sends the current size to the parent.
-        var field = new SquidexFormField();
-
-        // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
-        // the default worker url location (used when creating WebWorkers). The problem here is that
-        // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
-        // a web worker through a same-domain script
-        window.MonacoEnvironment = {
-            getWorkerUrl: function(workerId, label) {
-                return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
-                    self.MonacoEnvironment = {
-                        baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
-                    };
-                    importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');`
-                )}`;
-            }
-        };
-
-        require(["vs/editor/editor.main"], function () {
-            var editor = monaco.editor.create(document.getElementById('editor'), {
-                value: `function x() {
-                    console.log("Hello world!");
-                    }`,
-                language: 'html',
-                theme: 'vs-dark'
-            });
-
-            field.onValueChanged(function (value) {
-                editor.setValue(value || '');
-            });
-
-            field.onDisabled(function (disabled) {
-                editor.updateOptions({ readOnly: disabled });
-            });
-
-            editor.getModel().onDidChangeContent((event) => {
-                var data = editor.getValue();
-
-                // Notify the UI that the value has been changed. Will be used to trigger validation.
-                field.valueChanged(data);
-            });
-
-            window.addEventListener('resize', function () {
-                editor.layout();
-            });
-        });
-    </script>
-</body>
-
-</html>
--- a/backend/src/Squidex/wwwroot/scripts/editor-plain.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-plain.html
@ -4,39 +4,31 @@

    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
-	
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
-        .editor {
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            height: 500px;
-			width: 100%;
+        body {
+            background-color: white;
        }

-        .btn {
-			background: white;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-			padding: 8px 15px;
-			margin-right: 5px;
-			margin-bottom: 5px;
+        textarea {
+            height: 300px;
        }
    </style>
-
 </head>

 <body style="margin: 0px; padding: 0px;">
-	<div>
-		<button class="btn" id="expanded">
+	<div class="mb-2">
+		<button class="btn btn-outline-secondary" id="expanded">
 			Toggle Expanded
 		</button>
-		<button class="btn" id="fullscreen">
+		<button class="btn btn-outline-secondary" id="fullscreen">
 			Toggle Fullscreen
 		</button>
 	</div>

 	<div>
-		<textarea name="content" class="editor" id="editor"></textarea>
+		<textarea class="form-control" id="editor"></textarea>
 	</div>

 	<script>
--- a/backend/src/Squidex/wwwroot/scripts/editor-references.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-references.html
@ -6,12 +6,11 @@

    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
-    
-    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">

+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
        body {
-            height: 38px;
+            background-color: white;
        }
    </style>
 </head>
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts
@ -12,14 +12,14 @@ declare class SquidexSidebar {
    /**
     * Register an function that is called when the sidebar is initialized.
     *
-     * @param {function} callback: The callback to invoke.
+     * @param callback: The callback to invoke.
     */
    onInit(callback: () => void): void;

    /**
     * Register an function that is called whenever the value of the content has changed.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: Content value (any).
+     * @param callback: The callback to invoke. Argument 1: Content value (any).
     */
    onContentChanged(callback: (content: any) => void): void;

@ -38,7 +38,7 @@ declare class SquidexWidget {
    /**
     * Register an function that is called when the sidebar is initialized.
     *
-     * @param {function} callback: The callback to invoke.
+     * @param callback: The callback to invoke.
     */
    onInit(callback: () => void): void;
    /**
@ -96,119 +96,124 @@ declare class SquidexFormField {
    /**
     * Notifies the parent to navigate to the path.
     *
-     * @param {string} url: The url to navigate to.
+     * @param url: The url to navigate to.
     */
    navigate(url: string): void;

    /**
-     * Notifies the parent to go to fullscreen mode.
+     * Notifies the parent to toggle the fullscreen mode.
     */
    toggleFullscreen(): void;

    /**
-     * Notifies the parent to go to expanded mode.
+     * Notifies the parent to toggle the expanded mode.
     */
    toggleExpanded(): void;

    /**
     * Notifies the control container that the value has been changed.
     *
-     * @param {any} newValue: The new field value.
+     * @param newValue: The new field value.
     */
    valueChanged(newValue: any): void;

    /**
     * Shows an info alert.
     * 
-     * @param {string} text: The info text.
+     * @param text: The info text.
     */
    notifyInfo(text: string): void;

    /**
     * Shows an error alert.
     * 
-     * @param {string} text: error info text.
+     * @param text: error info text.
     */
    notifyError(text: string): void;

    /**
     * Shows an confirm dialog.
     * 
-     * @param {string} title The title of the dialog.
-     * @param {string} text The text of the dialog.
-     * @param {function} callback The callback to invoke when the dialog is completed or closed.
+     * @param title The title of the dialog.
+     * @param text The text of the dialog.
+     * @param callback The callback to invoke when the dialog is completed or closed.
     */
    confirm(title: string, text: string, callback: (result: boolean) => void): void;

    /**
     * Shows the dialog to pick assets.
     * 
-     * @param {function} callback The callback to invoke when the dialog is completed or closed.
+     * @param callback The callback to invoke when the dialog is completed or closed.
     */
    pickAssets(callback: (assets: any[]) => void): void;

    /**
     * Shows the dialog to pick contents.
     * 
-     * @param {string} schemas: The list of schema names.
-     * @param {function} callback The callback to invoke when the dialog is completed or closed.
-     * @param {string} query: The initial query that is used in the UI.
+     * @param schemas: The list of schema names.
+     * @param callback The callback to invoke when the dialog is completed or closed.
+     * @param query: The initial query that is used in the UI.
     */
    pickContents(schemas: string[], callback: (assets: any[]) => void, query?: string): void;

+    /**
+     * Shows a dialog to pick a file.
+     */
+    pickFile(): void;
+
    /**
     * Register an function that is called when the field is initialized.
     * 
-     * @param {function} callback: The callback to invoke.
+     * @param callback: The callback to invoke.
     */
    onInit(callback: () => void): void;

    /**
     * Register an function that is called when the field is moved.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: New position (number).
+     * @param callback: The callback to invoke. Argument 1: New position (number).
     */
    onMoved(callback: (index: number) => void): void;

    /**
     * Register an function that is called whenever the field is disabled or enabled.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
+     * @param callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
     */
    onDisabled(callback: (isDisabled: boolean) => void): void;

    /**
     * Register an function that is called whenever the field language is changed.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: Language code (string).
+     * @param callback: The callback to invoke. Argument 1: Language code (string).
     */
    onLanguageChanged(callback: (language: string) => void): void;

    /**
     * Register an function that is called whenever the value of the field has changed.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: Field value (any).
+     * @param callback: The callback to invoke. Argument 1: Field value (any).
     */
    onValueChanged(callback: (value: any) => void): void;

    /**
     * Register an function that is called whenever the value of the content has changed.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: Content value (any).
+     * @param callback: The callback to invoke. Argument 1: Content value (any).
     */
    onFormValueChanged(callback: (value: any) => void): void;

    /**
     * Register an function that is called whenever the fullscreen mode has changed.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
+     * @param callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
     */
    onFullscreen(callback: (isFullscreen: boolean) => void): void;

    /**
     * Register an function that is called whenever the expanded mode has changed.
     *
-     * @param {function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false).
+     * @param callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false).
     */
    onExpanded(callback: (isExpanded: boolean) => void): void;

--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@ -242,6 +242,13 @@ function SquidexFormField() {
    var value;
    var valueHandler;

+    function raiseInit() {
+        if (initHandler && !initCalled && context) {
+            initHandler(context);
+            initCalled = true;
+        }
+    }
+
    function raiseDisabled() {
        if (disabledHandler) {
            disabledHandler(disabled);
@ -284,13 +291,6 @@ function SquidexFormField() {
        }
    }

-    function raiseInit() {
-        if (initHandler && !initCalled && context) {
-            initHandler(context);
-            initCalled = true;
-        }
-    }
-
    function eventListener(event) {
        if (event.source !== window) {
            var type = event.data.type;
@ -451,7 +451,7 @@ function SquidexFormField() {
        },

        /**
-         * Notifies the parent to go to fullscreen mode.
+         * Notifies the parent to toggle the fullscreen mode.
         */
        toggleFullscreen: function () {
            if (window.parent) {
@ -460,7 +460,7 @@ function SquidexFormField() {
        },

        /**
-         * Notifies the parent to go to expanded mode.
+         * Notifies the parent to toggle the expanded mode.
         */
        toggleExpanded: function () {
            if (window.parent) {
@ -517,10 +517,7 @@ function SquidexFormField() {

            var correlationId = new Date().getTime().toString();

-            currentConfirm = {
-                correlationId: correlationId,
-                callback: callback
-            };
+            currentConfirm = { correlationId: correlationId, callback: callback };

            if (window.parent) {
                window.parent.postMessage({ type: 'confirm', title: title, text: text, correlationId: correlationId }, '*');
@ -539,10 +536,7 @@ function SquidexFormField() {

            var correlationId = new Date().getTime().toString();

-            currentPickAssets = {
-                correlationId: correlationId,
-                callback: callback
-            };
+            currentPickAssets = { correlationId: correlationId, callback: callback };

            if (window.parent) {
                window.parent.postMessage({ type: 'pickAssets', correlationId: correlationId }, '*');
@ -563,16 +557,22 @@ function SquidexFormField() {

            var correlationId = new Date().getTime().toString();

-            currentPickContents = {
-                correlationId: correlationId,
-                callback: callback,
-            };
+            currentPickContents = { correlationId: correlationId, callback: callback };

            if (window.parent) {
                window.parent.postMessage({ type: 'pickContents', correlationId: correlationId, schemas: schemas, query: query }, '*');
            }
        },

+        /**
+         * Shows a dialog to pick a file.
+         */
+        pickFile: function () {
+            if (window.parent) {
+                window.parent.postMessage({ type: 'pickFile' }, '*');
+            }
+        },
+
        /**
         * Register an function that is called when the field is initialized.
         * 
--- a/backend/src/Squidex/wwwroot/scripts/editor-simple.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-
-    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
-    <script src="editor-sdk.js"></script>
-    <script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>
-
-    <style>
-        .ck-editor__editable {
-            min-height: 250px;
-        }
-
-        .fullscreen {
-            height: 100vh;
-        }
-
-        .fullscreen .ck-editor {
-            position: fixed !important;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 1000;
-        }
-
-        .fullscreen .ck-editor .ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline,
-        .fullscreen .ck-editor .ck.ck-editor__main {
-            height: 100%;
-        }
-
-        #fullscreenButton {
-            position: absolute;
-            z-index: 10000;
-            right: 10px;
-            top: 10px;
-        }
-    </style>
-</head>
-
-<body>
-    <a href="#" id="fullscreenButton">Toggle fullscreen</a>
-
-    <textarea name="content" id="editor"></textarea>
-
-    <script>
-        var element = document.getElementById('editor');
-
-        ClassicEditor
-            .create(element)
-            .catch(error => {
-                console.error(error);
-            })
-            .then(editor => {
-                // When the field is instantiated it notifies the UI that it has been loaded.
-                // 
-                // Furthermore it sends the current size to the parent.
-                var field = new SquidexFormField();
-
-                // Handle the value change event and set the text to the editor.
-                field.onValueChanged(function (value) {
-                    if (value) {
-                        editor.setData(value);
-                    }
-                });
-
-                // Disable the editor when it should be disabled.
-                field.onDisabled(function (disabled) {
-                    editor.set('isReadOnly', disabled);
-                });
-
-                field.onFullscreen(function (fullscreen) {
-                    if (fullscreen) {
-                        document.body.classList.add('fullscreen');
-                    } else {
-                        document.body.classList.remove('fullscreen');
-                    }
-                });
-
-                editor.model.document.on('change', function () {
-                    var data = editor.getData();
-
-                    // Notify the UI that the value has been changed. Will be used to trigger validation.
-                    field.valueChanged(data);
-                });
-
-                editor.ui.focusTracker.on('change:isFocused', function (event, name, isFocused) {
-                    if (!isFocused) {
-                        // Notify the UI that the value has been touched.
-                        field.touched();
-                    }
-                });
-
-                document.getElementById('fullscreenButton')
-                    .addEventListener('click', function () {
-                        field.toggleFullscreen();
-                    });
-            });
-    </script>
-</body>
-
-</html>
--- a/backend/src/Squidex/wwwroot/scripts/sidebar-content.html
+++ b/backend/src/Squidex/wwwroot/scripts/sidebar-content.html
@ -7,14 +7,10 @@
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>

+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
-        textarea {
-            box-sizing: border-box; 
-            border: 0;
-            border-radius: 0;
-            resize: none;
-            overflow: hidden;
-            width: 100%;
+        body {
+            background-color: white;
        }
    </style>
 </head>
@ -27,7 +23,7 @@
        }
    </script>

-    <textarea oninput="grow(this)" name="content" id="editor"></textarea>
+    <textarea class="form-control" oninput="grow(this)" id="editor"></textarea>

    <script>
        var element = document.getElementById('editor');
--- a/backend/src/Squidex/wwwroot/scripts/sidebar-context.html
+++ b/backend/src/Squidex/wwwroot/scripts/sidebar-context.html
@ -7,15 +7,10 @@
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>

+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
-        textarea {
-            box-sizing: border-box; 
-            border: 0;
-            border-radius: 0;
-            resize: none;
-            overflow-x: hidden;
-            overflow-y: hidden;
-            width: 100%;
+        body {
+            background-color: white;
        }
    </style>
 </head>
@ -28,7 +23,7 @@
        }
    </script>

-    <textarea oninput="grow(this)" name="content" id="editor"></textarea>
+    <textarea class="form-control" oninput="grow(this)" id="editor"></textarea>

    <script>
        var element = document.getElementById('editor');
--- a/backend/src/Squidex/wwwroot/scripts/sidebar-search.html
+++ b/backend/src/Squidex/wwwroot/scripts/sidebar-search.html
@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-
-    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
-    <script src="editor-sdk.js"></script>
-
-    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.0.0/dist/algoliasearch-lite.umd.js" integrity="sha256-MfeKq2Aw9VAkaE9Caes2NOxQf6vUa8Av0JqcUXUGkd0=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js" integrity="sha256-6S7q0JJs/Kx4kb/fv0oMjS855QTz5Rc2hh9AkIUjUsk=" crossorigin="anonymous"></script>
-    
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css" integrity="sha256-HB49n/BZjuqiCtQQf49OdZn63XuKFaxcIHWf0HNKte8=" crossorigin="anonymous">
-
-    <style>
-        .container {
-            min-height: 400px;
-        }
-
-        .ais-Hits {
-            margin-top: 1rem;
-        }
-
-        .ais-Hits-item {
-            margin-right: 0;
-            margin-top: 5px;
-            width: 100%;
-        }
-
-        .button-click {
-            margin-top: 5px;
-            color: #3389ff;
-            cursor: pointer;
-            display: inline-block;
-        }
-
-        .button-click:hover {
-            text-decoration: underline;
-        }
-    </style>
-</head>
-
-<body>
-    <script>
-        function grow(element) {
-            element.style.height = "5px";
-            element.style.height = (element.scrollHeight)+"px";
-        }
-    </script>
-
-    <div class="container">
-        <div id="searchbox"></div>
-
-        <div id="hits"></div>
-    </div>
-
-    <script>
-        var element = document.getElementById('editor');
-
-        // When the field is instantiated it notifies the UI that it has been loaded.
-        // 
-        // Furthermore it sends the current size to the parent.
-        var plugin = new SquidexPlugin();
-
-        // Init is called once with a context that contains the app name, schema name and authentication information.
-        plugin.onInit(function (context) {
-            var searchClient = algoliasearch('CFNTEE51PJ', 'afa3a7605277b85348c6fa160fb5cecc');
-
-            var search = instantsearch({ indexName: 'test', searchClient });
-
-            document.addEventListener('click', event => {
-                if (event.target.matches('.button-click')) {  
-                    // We cannot directly navigate to in the iframe because it would only change the URL of the iframe.
-                    plugin.navigate(`/app/${context.appName}/content/${context.schemaName}`);
-                    // plugin.navigate(`/app/${context.appName}/content/${context.schemaName}/${id}`);
-                }
-            });
-
-            search.addWidgets([
-                instantsearch.widgets.searchBox({
-                    container: '#searchbox'
-                }),
-
-                instantsearch.widgets.hits({
-                    container: '#hits',
-                    templates: {
-                        item(hit, bindEvent) {
-                            return `
-                                <div>
-                                    <div class="hit-name">
-                                        ${instantsearch.highlight({
-                                            attribute: 'firstname',
-                                            hit
-                                        })}
-                                        ${instantsearch.highlight({
-                                            attribute: 'lastname',
-                                            hit
-                                        })}
-
-                                        <div>
-                                            <a data-object-id="${hit.objectID}" class="button-click">EDIT</a>
-                                        </div>
-                                    </div>
-                                </div>
-                            `;
-                        }
-                    }
-                })
-            ]);
-
-            search.start();
-        });
-    </script>
-</body>
-
-</html>
--- a/backend/src/Squidex/wwwroot/scripts/widget-context.html
+++ b/backend/src/Squidex/wwwroot/scripts/widget-context.html
@ -7,23 +7,16 @@
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>

+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
    <style>
-        textarea {
-            border-radius: 0;
-            border: 0;
-            bottom: 0;
-            box-sizing: border-box; 
-            left: 0;
-            position: fixed;
-            resize: none;
-            right: 0;
-            top: 0;
+        body {
+            background-color: white;
        }
    </style>
 </head>

 <body>
-    <textarea name="content" id="editor"></textarea>
+    <textarea class="form-control" id="editor"></textarea>

    <script>
        var element = document.getElementById('editor');
--- a/frontend/package.json
+++ b/frontend/package.json
@ -66,7 +66,6 @@
    "rxjs": "7.8.1",
    "simplemde": "1.11.2",
    "slugify": "1.6.6",
-    "tinymce": "5.10.2",
    "tslib": "2.6.1",
    "tui-calendar": "^1.15.3",
    "typemoq": "^2.1.0",
@ -102,7 +101,6 @@
    "@types/react-dom": "18.2.7",
    "@types/simplemde": "1.11.8",
    "@types/tapable": "2.2.3",
-    "@types/tinymce": "4.6.5",
    "@types/ws": "8.5.5",
    "@typescript-eslint/eslint-plugin": "6.2.1",
    "@typescript-eslint/parser": "6.2.1",
--- a/frontend/src/app/declarations.d.ts
+++ b/frontend/src/app/declarations.d.ts
@ -6,4 +6,84 @@
 */

 declare module 'pikaday/pikaday';
-declare module 'progressbar.js';
+declare module 'progressbar.js';
+
+declare class SquidexEditorWrapper {
+    constructor(element: HTMLElement, props: EditorProps);
+
+    update(newProps: Partial<EditorProps>): void;
+
+    setValue(value: string): void;
+
+    setIsDisabled(isDisabled: boolean): void;
+
+    destroy(): void;
+}
+
+type Asset = {
+    // The alternative text of the image.
+    alt?: string;
+
+    // The src to the asset.
+    src: string;
+
+    // The mime type.
+    type: string;
+
+    // The file name of the asset.
+    fileName: string;
+};
+
+type Content = {
+    // The link of the content item.
+    href: string;
+
+    // The title of the content item.
+    title: string;
+};
+
+type OnSelectAssets = () => Promise<Asset[]>;
+type OnSelectContents = () => Promise<Content[]>;
+
+type OnChange = (value: string | undefined) => void;
+
+type SquidexEditorMode = 'Html' | 'Markdown';
+
+interface UploadRequest {
+    // The file to upload.
+    file: File;
+
+    // The upload progress to update.
+    progress: (progress: number) => void;
+}
+
+interface EditorProps {
+    // The mode of the editor.
+    mode: SquidexEditorMode;
+
+    // The incoming value.
+    value?: string;
+
+    // Called when the value has been changed.
+    onChange?: OnChange;
+
+    // Called when assets are selected.
+    onSelectAssets: OnSelectAssets;
+
+    // Called when content items should be selected.
+    onSelectContents: OnSelectContents;
+
+    // Called when a file needs to be uploaded.
+    onUpload?: (images: UploadRequest[]) => DelayedPromiseCreator<Asset>[];
+
+    // True, if disabled.
+    isDisabled?: boolean;
+
+    // Indicates whether assets can be selected.
+    canSelectAssets?: boolean;
+
+    // Indicates whether content items can be selected.
+    canSelectContents?: boolean;
+}
+
+type DelayedPromiseCreator<T> = (context: unknown) => Promise<T>;
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.html
@ -39,7 +39,8 @@
                [formIndex]="index"
                [formField]="formModel.field.name"
                [language]="language"
-                [languages]="languages">
+                [languages]="languages"
+                [schemaIds]="field.rawProperties.schemaIds">
            </sqx-iframe-editor>
 		</ng-container>

@ -192,7 +193,9 @@
 							<textarea class="form-control" [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder" rows="5"></textarea>
 						</ng-container>
 						<ng-container *ngSwitchCase="'RichText'">
-							<sqx-rich-editor [formControl]="$any(fieldForm)" #editor
+							<sqx-rich-editor #editor
+                                mode="Html"
+                                [formControl]="$any(fieldForm)"
                                [folderId]="field.rawProperties.folderId"
                                [language]="language"
                                [languages]="languages"
@ -203,12 +206,14 @@
 							<sqx-code-editor [formControl]="$any(fieldForm)" #editor mode="ace/mode/html" [height]="350"  ></sqx-code-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'Markdown'">
-							<sqx-markdown-editor [formControl]="$any(fieldForm)" #editor 
+							<sqx-rich-editor #editor
+                                mode="Markdown"
+                                [formControl]="$any(fieldForm)"
                                [folderId]="field.rawProperties.folderId"
                                [language]="language"
                                [languages]="languages"
                                [schemaIds]="field.rawProperties.schemaIds">
-                            </sqx-markdown-editor>
+                            </sqx-rich-editor>
 						</ng-container>
 						<ng-container *ngSwitchCase="'StockPhoto'">
 							<sqx-stock-photo-editor [formControl]="$any(fieldForm)"></sqx-stock-photo-editor>
--- a/frontend/src/app/features/content/shared/forms/iframe-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/iframe-editor.component.ts
@ -42,6 +42,9 @@ export class IFrameEditorComponent extends StatefulComponent<State> implements
    @Input({ transform: booleanAttribute })
    public isExpanded = false;

+    @Input({ required: true })
+    public schemaIds?: ReadonlyArray<string>;
+
    @Input({ required: true })
    public context: any = {};

@ -213,7 +216,7 @@ export class IFrameEditorComponent extends StatefulComponent<State> implements
                if (correlationId) {
                    this.contentsQuery = query;
                    this.contentsCorrelationId = correlationId;
-                    this.contentsSchemas = schemas;
+                    this.contentsSchemas = this.schemaIds && this.schemaIds.length > 0 ? this.schemaIds : schemas;
                    this.contentsDialog.show();
                }
            }
--- a/frontend/src/app/framework/angular/forms/file-drop.directive.ts
+++ b/frontend/src/app/framework/angular/forms/file-drop.directive.ts
@ -121,7 +121,6 @@ export class FileDropDirective {
        }

        const files: File[] = [];
-
        const items = getItems(dataTransfer);

        // Loop over files first, otherwise Chromes deletes them in the async call.
@ -139,7 +138,7 @@ export class FileDropDirective {

                if (webkitEntry && webkitEntry.isDirectory) {
                    // eslint-disable-next-line no-await-in-loop
-                    await this.transferWebkitTree(webkitEntry, files);
+                    await this.traverseWebkitTree(webkitEntry, files);
                }
            }
        }
@ -151,7 +150,7 @@ export class FileDropDirective {
        return files;
    }

-    private async transferWebkitTree(item: any, files: File[]) {
+    private async traverseWebkitTree(item: any, files: File[]) {
        if (item.isFile) {
            const file = await getFilePromise(item);

@ -163,7 +162,7 @@ export class FileDropDirective {

            for (const entry of entries) {
                // eslint-disable-next-line no-await-in-loop
-                await this.transferWebkitTree(entry, files);
+                await this.traverseWebkitTree(entry, files);
            }
        }
    }
--- a/frontend/src/app/shared/components/forms/markdown-editor.component.html
+++ b/frontend/src/app/shared/components/forms/markdown-editor.component.html
@ -1,18 +0,0 @@
-<div #container class="drop-container"
-    (sqxDropFile)="insertFiles($event)"
-    sqxDropOnlyImages="true">
-    <div #inner [class.fullscreen]="snapshot.isFullscreen">
-        <textarea class="form-control editor" #editor></textarea>
-    </div>
-</div>
-
-<sqx-asset-selector *sqxModal="assetsDialog"
-    (select)="insertAssets($event)">
-</sqx-asset-selector>
-
-<sqx-content-selector *sqxModal="contentsDialog"
-    [language]="language"
-    [languages]="languages"
-    [schemaIds]="schemaIds"
-    (select)="insertContents($event)">
-</sqx-content-selector>
--- a/frontend/src/app/shared/components/forms/markdown-editor.component.scss
+++ b/frontend/src/app/shared/components/forms/markdown-editor.component.scss
@ -1,18 +0,0 @@
-@import 'mixins';
-@import 'vars';
-
-$background: #fff;
-
-:host ::ng-deep {
-    /* stylelint-disable-next-line selector-class-pattern */
-    .CodeMirror {
-        height: 300px;
-        padding-bottom: 10px;
-        padding-top: 10px;
-    }
-}
-
-.fullscreen {
-    @include fixed(0, 0, 0, 0);
-    z-index: 1040;
-}
--- a/frontend/src/app/shared/components/forms/markdown-editor.component.ts
+++ b/frontend/src/app/shared/components/forms/markdown-editor.component.ts
@ -1,363 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { marked } from 'marked';
-import { ApiUrlConfig, AssetDto, AssetUploaderState, ContentDto, DialogModel, getContentValue, LanguageDto, ResourceLoaderService, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal';
-
-declare const SimpleMDE: any;
-
-export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true,
-};
-
-interface State {
-    // True, when the editor is shown as fullscreen.
-    isFullscreen: boolean;
-}
-
-@Component({
-    selector: 'sqx-markdown-editor',
-    styleUrls: ['./markdown-editor.component.scss'],
-    templateUrl: './markdown-editor.component.html',
-    providers: [
-        SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR,
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MarkdownEditorComponent extends StatefulControlComponent<State, string> implements AfterViewInit {
-    private simplemde: any;
-    private value?: string;
-
-    @Input()
-    public schemaIds?: ReadonlyArray<string>;
-
-    @Input()
-    public language!: LanguageDto;
-
-    @Input()
-    public languages!: ReadonlyArray<LanguageDto>;
-
-    @Input()
-    public folderId?: string;
-
-    @Input({ transform: booleanAttribute })
-    public set disabled(value: boolean | undefined | null) {
-        this.setDisabledState(value === true);
-    }
-
-    @ViewChild('editor', { static: false })
-    public editor!: ElementRef;
-
-    @ViewChild('container', { static: false })
-    public container!: ElementRef;
-
-    @ViewChild('inner', { static: false })
-    public inner!: ElementRef;
-
-    public assetsDialog = new DialogModel();
-
-    public contentsDialog = new DialogModel();
-
-    constructor(
-        private readonly apiUrl: ApiUrlConfig,
-        private readonly assetUploader: AssetUploaderState,
-        private readonly renderer: Renderer2,
-        private readonly resourceLoader: ResourceLoaderService,
-    ) {
-        super({ isFullscreen: false });
-    }
-
-    public writeValue(obj: any) {
-        const newValue = Types.isString(obj) ? obj : '';
-
-        if (newValue === this.value) {
-            return;
-        }
-
-        this.value = newValue;
-
-        if (this.simplemde) {
-            this.simplemde.value(this.value);
-        }
-    }
-
-    public onDisabled(isDisabled: boolean) {
-        if (this.simplemde) {
-            this.simplemde.codemirror.setOption('readOnly', isDisabled);
-        }
-    }
-
-    private showAssetSelector = () => {
-        if (this.snapshot.isDisabled) {
-            return;
-        }
-
-        this.assetsDialog.show();
-    };
-
-    private showContentsSelector = () => {
-        if (this.snapshot.isDisabled) {
-            return;
-        }
-
-        this.contentsDialog.show();
-    };
-
-    public ngAfterViewInit() {
-        Promise.all([
-            this.resourceLoader.loadLocalStyle('dependencies/simplemde/simplemde.min.css'),
-            this.resourceLoader.loadLocalStyle('dependencies/font-awesome/css/font-awesome.min.css'),
-            this.resourceLoader.loadLocalScript('dependencies/simplemde/simplemde.min.js'),
-        ]).then(() => {
-            const options = {
-                previewRender: (text: string) => {
-                    return marked(text, { pedantic: true, mangle: false, headerIds: false });
-                },
-                autoDownloadFontAwesome: true,
-                spellChecker: false,
-                status: ['lines', 'words', 'cursor'],
-                toolbar: [
-                    {
-                        name: 'bold',
-                        action: SimpleMDE.toggleBold,
-                        className: 'fa fa-bold',
-                        title: 'Bold',
-                    }, {
-                        name: 'italic',
-                        action: SimpleMDE.toggleItalic,
-                        className: 'fa fa-italic',
-                        title: 'Italic',
-                    }, {
-                        name: 'heading',
-                        action: SimpleMDE.toggleHeadingSmaller,
-                        className: 'fa fa-header',
-                        title: 'Heading',
-                    }, {
-                        name: 'quote',
-                        action: SimpleMDE.toggleBlockquote,
-                        className: 'fa fa-quote-left',
-                        title: 'Quote',
-                    }, {
-                        name: 'unordered-list',
-                        action: SimpleMDE.toggleUnorderedList,
-                        className: 'fa fa-list-ul',
-                        title: 'Generic List',
-                    }, {
-                        name: 'ordered-list',
-                        action: SimpleMDE.toggleOrderedList,
-                        className: 'fa fa-list-ol',
-                        title: 'Numbered List',
-                    },
-                    '|',
-                    {
-                        name: 'link',
-                        action: SimpleMDE.drawLink,
-                        className: 'fa fa-link',
-                        title: 'Create Link',
-                    }, {
-                        name: 'image',
-                        action: SimpleMDE.drawImage,
-                        className: 'fa fa-picture-o',
-                        title: 'Insert Image',
-                    },
-                    '|',
-                    {
-                        name: 'preview',
-                        action: SimpleMDE.togglePreview,
-                        className: 'fa fa-eye no-disable',
-                        title: 'Toggle Preview',
-                    }, {
-                        name: 'fullscreen',
-                        action: SimpleMDE.toggleFullScreen,
-                        className: 'fa fa-arrows-alt no-disable no-mobile',
-                        title: 'Toggle Fullscreen',
-                    }, {
-                        name: 'side-by-side',
-                        action: SimpleMDE.toggleSideBySide,
-                        className: 'fa fa-columns no-disable no-mobile',
-                        title: 'Toggle Side by Side',
-                    },
-                    '|',
-                    {
-                        name: 'guide',
-                        action: 'https://simplemde.com/markdown-guide',
-                        className: 'fa fa-question-circle',
-                        title: 'Markdown Guide',
-                    },
-                    '|',
-                    {
-                        name: 'assets',
-                        action: this.showAssetSelector,
-                        className: 'icon-assets icon-bold',
-                        title: 'Insert Assets',
-                    },
-                ],
-                element: this.editor.nativeElement,
-            };
-
-            if (this.schemaIds && this.schemaIds.length > 0) {
-                options.toolbar.push({
-                    name: 'contents',
-                    action: this.showContentsSelector,
-                    className: 'icon-contents icon-bold',
-                    title: 'Insert Contents',
-                });
-            }
-
-            this.simplemde = new SimpleMDE(options);
-            this.simplemde.value(this.value || '');
-            this.simplemde.codemirror.setOption('readOnly', this.snapshot.isDisabled);
-
-            this.simplemde.codemirror.on('change', () => {
-                const value = this.simplemde.value();
-
-                if (this.value !== value) {
-                    this.value = value;
-
-                    this.callChange(value);
-                }
-            });
-
-            this.simplemde.codemirror.on('refresh', () => {
-                const isFullscreen = this.simplemde.isFullscreenActive();
-
-                this.toggleFullscreen(isFullscreen);
-            });
-
-            this.simplemde.codemirror.on('blur', () => {
-                this.callTouched();
-            });
-        });
-    }
-
-    public insertAssets(assets: ReadonlyArray<AssetDto>) {
-        const content = this.buildAssetsMarkup(assets);
-
-        if (content.length > 0) {
-            this.simplemde.codemirror.replaceSelection(content);
-        }
-
-        this.assetsDialog.hide();
-    }
-
-    public insertContents(contents: ReadonlyArray<ContentDto>) {
-        const content = this.buildContentsMarkup(contents);
-
-        if (content.length > 0) {
-            this.simplemde.codemirror.replaceSelection(content);
-        }
-
-        this.contentsDialog.hide();
-    }
-
-    public insertFiles(files: ReadonlyArray<File>) {
-        const doc = this.simplemde.codemirror.getDoc();
-
-        for (const file of files) {
-            this.uploadFile(doc, file);
-        }
-    }
-
-    private uploadFile(doc: any, file: File) {
-        if (this.snapshot.isDisabled) {
-            return;
-        }
-
-        const uploadCursor = doc.getCursor();
-        const uploadText = `![Uploading file...${new Date()}]()`;
-
-        doc.replaceSelection(uploadText);
-
-        const replaceText = (replacement: string) => {
-            const cursor = doc.getCursor();
-
-            const text = doc.getValue().replace(uploadText, replacement);
-
-            doc.setValue(text);
-
-            if (uploadCursor && uploadCursor.line === cursor.line) {
-                const offset = replacement.length - uploadText.length;
-
-                doc.setCursor({ line: cursor.line, ch: cursor.ch + offset });
-            } else {
-                doc.setCursor(cursor);
-            }
-        };
-
-        this.assetUploader.uploadFile(file, this.folderId)
-            .subscribe({
-                next: asset => {
-                    if (Types.is(asset, AssetDto)) {
-                        replaceText(this.buildAssetMarkup(asset));
-                    }
-                },
-                error: error => {
-                    if (!Types.is(error, UploadCanceled)) {
-                        replaceText('FAILED');
-                    }
-                },
-            });
-    }
-
-    private toggleFullscreen(isFullscreen: boolean) {
-        let target = this.container.nativeElement;
-
-        if (isFullscreen) {
-            target = document.body;
-        }
-
-        this.renderer.appendChild(target, this.inner.nativeElement);
-
-        this.next({ isFullscreen });
-    }
-
-    private buildAssetsMarkup(assets: ReadonlyArray<AssetDto>) {
-        let markup = '';
-
-        for (const asset of assets) {
-            markup += this.buildAssetMarkup(asset);
-        }
-
-        return markup;
-    }
-
-    private buildContentsMarkup(contents: ReadonlyArray<ContentDto>) {
-        let markup = '';
-
-        for (const content of contents) {
-            markup += this.buildContentMarkup(content);
-        }
-
-        return markup;
-    }
-
-    private buildContentMarkup(content: ContentDto) {
-        const name =
-            content.referenceFields
-                .map(f => getContentValue(content, this.language, f, false))
-                .map(v => v.formatted)
-                .defined()
-                .join(', ')
-            || 'content';
-
-        return `[${name}](${this.apiUrl.buildUrl(content._links['self'].href)})`;
-    }
-
-    private buildAssetMarkup(asset: AssetDto) {
-        const name = asset.fileNameWithoutExtension;
-
-        if (asset.type === 'Image' || asset.mimeType === 'image/svg+xml' || asset.fileName.endsWith('.svg')) {
-            return `![${name}](${asset.fullUrl(this.apiUrl)} '${name}')`;
-        } else if (asset.type === 'Video') {
-            return `[${name}](${asset.fullUrl(this.apiUrl)})`;
-        } else {
-            return `[${name}](${asset.fullUrl(this.apiUrl)})`;
-        }
-    }
-}
--- a/frontend/src/app/shared/components/forms/rich-editor.component.html
+++ b/frontend/src/app/shared/components/forms/rich-editor.component.html
@ -1,6 +1,4 @@
-<div class="drop-container" (sqxDropFile)="insertFiles($event)" sqxDropOnlyImages="true">
-    <div class="editor" #editor></div>
-</div>
+<div class="editor" #editor></div>

 <sqx-asset-selector *sqxModal="assetsDialog"
    (select)="insertAssets($event)">
--- a/frontend/src/app/shared/components/forms/rich-editor.component.scss
+++ b/frontend/src/app/shared/components/forms/rich-editor.component.scss
@ -1,10 +1,2 @@
@import 'mixins';
-@import 'vars';
-
-.drop-container {
-    min-height: 401px;
-}
-
-.editor {
-    height: 400px;
-}
+@import 'vars';
--- a/frontend/src/app/shared/components/forms/rich-editor.component.ts
+++ b/frontend/src/app/shared/components/forms/rich-editor.component.ts
@ -8,9 +8,7 @@
 import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, Output, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ContentDto } from '@app/shared';
-import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, getContentValue, LanguageDto, ResourceLoaderService, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal';
-
-declare const tinymce: any;
+import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, getContentValue, LanguageDto, ResourceLoaderService, StatefulControlComponent, Types } from '@app/shared/internal';

 export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true,
@ -26,8 +24,10 @@ export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RichEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit, OnDestroy {
-    private tinyEditor: any;
+    private editorWrapper: any;
    private value?: string;
+    private currentContents?: ResolvablePromise<any>;
+    private currentAssets?: ResolvablePromise<any>;

    @Output()
    public assetPluginClick = new EventEmitter<any>();
@ -44,6 +44,9 @@ export class RichEditorComponent extends StatefulControlComponent<{}, string> im
    @Input()
    public folderId = '';

+    @Input({ required: true })
+    public mode: SquidexEditorMode = 'Html';
+
    @Input({ transform: booleanAttribute })
    public set disabled(value: boolean | undefined | null) {
        this.setDisabledState(value === true);
@ -65,23 +68,48 @@ export class RichEditorComponent extends StatefulControlComponent<{}, string> im
    }

    public ngOnDestroy() {
-        if (this.tinyEditor) {
-            this.tinyEditor.destroy();
-            this.tinyEditor = null;
+        if (this.editorWrapper) {
+            this.editorWrapper.destroy?.();
+            this.editorWrapper = null;
        }
    }

    public ngAfterViewInit() {
-        this.resourceLoader.loadLocalScript('dependencies/tinymce/tinymce.min.js').then(() => {
-            const timer = setInterval(() => {
-                const target = this.editor.nativeElement;
+        this.resourceLoader.loadLocalStyle('editor/squidex-editor.css');
+        this.resourceLoader.loadLocalScript('editor/squidex-editor.js').then(() => {
+            this.editorWrapper = new SquidexEditorWrapper(this.editor.nativeElement, {
+                value: this.value || '',
+                isDisabled: this.snapshot.isDisabled,
+                onSelectAssets: async () => {
+                    if (this.snapshot.isDisabled) {
+                        return;
+                    }
+
+                    this.currentAssets = new ResolvablePromise<any>();
+                    this.assetsDialog.show();
+
+                    return await this.currentAssets.promise;
+                },
+                onSelectContents: async () => {
+                    if (this.snapshot.isDisabled) {
+                        return;
+                    }

-                if (document.body.contains(target)) {
-                    tinymce.init(this.getEditorOptions(target));
+                    this.currentContents = new ResolvablePromise<any>();
+                    this.contentsDialog.show();

-                    clearInterval(timer);
-                }
-            }, 10);
+                    return await this.currentContents.promise;
+                },
+                onUpload: (requests: UploadRequest[]) => {
+                    return this.uploadFiles(requests);
+                },
+                onChange: (value: string | undefined) => {
+                    this.callChange(value);
+                },
+                canSelectAssets: true,
+                canSelectContents: !!this.schemaIds,
+                mode: this.mode,
+            });
        });
    }

@ -93,273 +121,87 @@ export class RichEditorComponent extends StatefulControlComponent<{}, string> im
        });
    }

-    private showAssetsSelector = () => {
-        if (this.snapshot.isDisabled) {
-            return;
-        }
-
-        this.assetsDialog.show();
-    };
-
-    private showContentsSelector = () => {
-        if (this.snapshot.isDisabled) {
-            return;
-        }
-
-        this.contentsDialog.show();
-    };
-
-    private getEditorOptions(target: any): any {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const self = this;
-
-        return {
-            ...DEFAULT_PROPS,
-
-            images_upload_handler: (blob: any, success: (url: string) => void, failure: (message: string) => void) => {
-                const file = new File([blob.blob()], blob.filename(), { lastModified: new Date().getTime() });
-
-                self.assetUploader.uploadFile(file, this.folderId)
-                    .subscribe({
-                        next: asset => {
-                            if (Types.is(asset, AssetDto)) {
-                                success(asset.fullUrl(self.apiUrl));
-                            }
-                        },
-                        error: error => {
-                            if (!Types.is(error, UploadCanceled)) {
-                                failure('Failed');
-                            }
-                        },
-                    });
-            },
-
-            setup: (editor: any) => {
-                editor.ui.registry.addButton('assets', {
-                    onAction: self.showAssetsSelector,
-                    icon: 'gallery',
-                    text: '',
-                    tooltip: 'Insert Assets',
-                });
-
-                if (this.schemaIds && this.schemaIds.length > 0) {
-                    editor.ui.registry.addButton('contents', {
-                        onAction: self.showContentsSelector,
-                        icon: 'duplicate',
-                        text: '',
-                        tooltip: 'Insert Contents',
-                    });
-                }
-
-                editor.on('init', () => {
-                    self.tinyEditor = editor;
-
-                    self.setContent();
-                    self.setReadOnly();
-                });
-
-                editor.on('change', () => {
-                    self.onValueChanged();
-                });
-
-                editor.on('paste', (event: ClipboardEvent) => {
-                    let hasFileDropped = false;
-
-                    if (event.clipboardData) {
-                        for (let i = 0; i < event.clipboardData.items.length; i++) {
-                            const file = event.clipboardData.items[i].getAsFile();
-
-                            if (file) {
-                                self.uploadFile(file);
-
-                                hasFileDropped = true;
-                            }
-                        }
-                    }
-
-                    if (!hasFileDropped) {
-                        self.onValueChanged();
-                    } else {
-                        return false;
-                    }
-
-                    return undefined;
-                });
-
-                editor.on('drop', (event: DragEvent) => {
-                    let hasFileDropped = false;
-
-                    if (event.dataTransfer) {
-                        for (let i = 0; i < event.dataTransfer.files.length; i++) {
-                            const file = event.dataTransfer.files.item(i);
-
-                            if (file) {
-                                self.uploadFile(file);
-
-                                hasFileDropped = true;
-                            }
-                        }
-                    }
-
-                    if (!hasFileDropped) {
-                        self.onValueChanged();
-                    }
-
-                    return false;
-                });
-
-                editor.on('blur', () => {
-                    self.callTouched();
-                });
-            },
-
-            target,
-        };
-    }
-
-    private onValueChanged() {
-        const value = this.tinyEditor.getContent();
-
-        if (this.value !== value) {
-            this.value = value;
-
-            this.callChange(value);
-        }
-    }
-
    public writeValue(obj: any) {
-        const newValue = Types.isString(obj) ? obj : '';
-
-        if (newValue == this.value) {
-            return;
-        }
-
-        this.value = newValue;
-
-        if (this.tinyEditor && this.tinyEditor.initialized) {
-            this.setContent();
-        }
+        this.editorWrapper?.setValue(obj);
    }

    public onDisabled() {
-        if (this.tinyEditor && this.tinyEditor.initialized) {
-            this.setReadOnly();
-        }
-    }
-
-    private setContent() {
-        this.tinyEditor.setContent(this.value || '');
-    }
-
-    private setReadOnly() {
-        this.tinyEditor.setMode(this.snapshot.isDisabled ? 'readonly' : 'design');
+        this.editorWrapper?.setIsDisabled(this.snapshot.isDisabled);
    }

    public insertAssets(assets: ReadonlyArray<AssetDto>) {
-        const content = this.buildAssetsMarkup(assets);
+        this.assetsDialog.hide();

-        if (content.length > 0) {
-            this.tinyEditor.execCommand('mceInsertContent', false, content);
+        if (!this.currentAssets) {
+            return;
        }

-        this.assetsDialog.hide();
+        const items = assets.map(a => this.buildAsset(a));
+
+        this.currentAssets.resolve(items);
+        this.currentAssets = undefined;
    }

    public insertContents(contents: ReadonlyArray<ContentDto>) {
-        const content = this.buildContentsMarkup(contents);
-
-        if (content.length > 0) {
-            this.tinyEditor.execCommand('mceInsertContent', false, content);
-        }
-
        this.contentsDialog.hide();
-    }
-
-    public insertFiles(files: ReadonlyArray<File>) {
-        for (const file of files) {
-            this.uploadFile(file);
+        if (!this.currentContents) {
+            return;
        }
-    }
-
-    private uploadFile(file: File) {
-        const uploadText = `[Uploading file...${new Date()}]`;

-        this.tinyEditor.execCommand('mceInsertContent', false, uploadText);
+        const items = contents.map(c => this.buildContent(c));

-        const replaceText = (replacement: string) => {
-            const content = this.tinyEditor.getContent().replace(uploadText, replacement);
+        this.currentContents.resolve(items);
+        this.currentContents = undefined;
+    }

-            this.tinyEditor.setContent(content);
+    private uploadFiles(requests: UploadRequest[]) {
+        const uploadFile = (request: UploadRequest) => {
+            return new Promise<any>((resolve, reject) => {
+                this.assetUploader.uploadFile(request.file, this.folderId)
+                    .subscribe({
+                        next: value => {
+                            if (Types.is(value, AssetDto)) {
+                                resolve(this.buildAsset(value));
+                            } else {
+                                request.progress(value / 100);
+                            }
+                        },
+                        error: reject,
+                    });
+            });
        };

-        this.assetUploader.uploadFile(file, this.folderId)
-            .subscribe({
-                next: asset => {
-                    if (Types.is(asset, AssetDto)) {
-                        replaceText(this.buildAssetMarkup(asset));
-                    }
-                },
-                error: error => {
-                    if (!Types.is(error, UploadCanceled)) {
-                        replaceText('FAILED');
-                    }
-                },
-            });
+        return requests.map(r => () => uploadFile(r));
    }

-    private buildAssetsMarkup(assets: ReadonlyArray<AssetDto>) {
-        let markup = '';
-
-        for (const asset of assets) {
-            markup += this.buildAssetMarkup(asset);
-        }
-
-        return markup;
+    private buildAsset(asset: AssetDto) {
+        return { type: asset.mimeType, src: asset.fullUrl(this.apiUrl), fileName: asset.fileName };
    }

-    private buildContentsMarkup(contents: ReadonlyArray<ContentDto>) {
-        let markup = '';
-
-        for (const content of contents) {
-            markup += this.buildContentMarkup(content);
-        }
-
-        return markup;
+    private buildContent(content: ContentDto) {
+        return { url: this.apiUrl.buildUrl(content._links['self'].href), name: buildContentName(content, this.language) };
    }
+}

-    private buildContentMarkup(content: ContentDto) {
-        const name =
-            content.referenceFields
-                .map(f => getContentValue(content, this.language, f, false))
-                .map(v => v.formatted)
-                .defined()
-                .join(', ')
-            || 'content';
+function buildContentName(content: ContentDto, language: LanguageDto) {
+    const name =
+        content.referenceFields
+            .map(f => getContentValue(content, language, f, false))
+            .map(v => v.formatted)
+            .defined()
+            .join(', ');

-        return `<a href="${this.apiUrl.buildUrl(content._links['self'].href)}" alt="${name}">${name}</a>`;
-    }
+    return name || 'Content';
+}

-    private buildAssetMarkup(asset: AssetDto) {
-        const name = asset.fileNameWithoutExtension;
+class ResolvablePromise<T> {
+    private resolver?: (value: T) => void;

-        if (asset.type === 'Image' || asset.mimeType === 'image/svg+xml' || asset.fileName.endsWith('.svg')) {
-            return `<img src="${asset.fullUrl(this.apiUrl)}" alt="${name}" />`;
-        } else if (asset.type === 'Video') {
-            return `<video src="${asset.fullUrl(this.apiUrl)}" />`;
-        } else {
-            return `<a href="${asset.fullUrl(this.apiUrl)}" alt="${name}">${name}</a>`;
-        }
-    }
-}
+    public readonly promise = new Promise<T>(resolve => {
+        this.resolver = resolve;
+    });

-const DEFAULT_PROPS = {
-    convert_fonts_to_spans: true,
-    convert_urls: false,
-    paste_data_images: true,
-    plugins: 'code image media link lists advlist paste',
-    min_height: 400,
-    max_height: 800,
-    removed_menuitems: 'newdocument',
-    resize: true,
-    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter | bullist numlist outdent indent | link image media | assets contents',
-};
+    public resolve(value: T) {
+        this.resolver?.(value);
+    }
+}
--- a/frontend/src/app/shared/declarations.ts
+++ b/frontend/src/app/shared/declarations.ts
@ -43,7 +43,6 @@ export * from './components/contents/content-value-editor.component';
 export * from './components/contents/content-value.component';
 export * from './components/contents/translation-status.component';
 export * from './components/forms/geolocation-editor.component';
-export * from './components/forms/markdown-editor.component';
 export * from './components/forms/rich-editor.component';
 export * from './components/help/help-markdown.pipe';
 export * from './components/help/help.component';
--- a/frontend/src/app/shared/guards/must-be-authenticated.guard.spec.ts
+++ b/frontend/src/app/shared/guards/must-be-authenticated.guard.spec.ts
@ -6,6 +6,7 @@
 */

 import { Location } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { firstValueFrom, of } from 'rxjs';
 import { IMock, It, Mock, Times } from 'typemoq';
@ -24,13 +25,15 @@ describe('MustBeAuthenticatedGuard', () => {
        uiOptions.value.redirectToLogin = false;

        location = Mock.ofType<Location>();
-
-        location.setup(x => x.path(true))
-            .returns(() => '/my-path');
+        location.setup(x => x.path(true)).returns(() => '/my-path');

        router = Mock.ofType<Router>();
-        authService = Mock.ofType<AuthService>();
-        authGuard = new MustBeAuthenticatedGuard(authService.object, location.object, router.object, uiOptions);
+
+        TestBed.configureTestingModule({ providers: [{ provide: UIOptions, useValue: uiOptions }] });
+        TestBed.runInInjectionContext(() => {
+            authService = Mock.ofType<AuthService>();
+            authGuard = new MustBeAuthenticatedGuard(authService.object, location.object, router.object);
+        });
    });

    it('should navigate to default page if not authenticated', async () => {
--- a/frontend/src/app/shared/guards/must-be-authenticated.guard.ts
+++ b/frontend/src/app/shared/guards/must-be-authenticated.guard.ts
@ -15,7 +15,7 @@ import { AuthService } from './../services/auth.service';

@Injectable()
 export class MustBeAuthenticatedGuard  {
-    private readonly redirectToLogin = inject(UIOptions).value.redirectToLogin;
+    private readonly uiOptions = inject(UIOptions);

    constructor(
        private readonly authService: AuthService,
@ -34,7 +34,7 @@ export class MustBeAuthenticatedGuard  {

                const redirectPath = this.location.path(true);

-                if (this.redirectToLogin) {
+                if (this.uiOptions.value.redirectToLogin) {
                    this.authService.loginRedirect(redirectPath);
                } else {
                    this.router.navigate([''], { queryParams: { redirectPath } });
--- a/frontend/src/app/shared/guards/must-be-not-authenticated.guard.spec.ts
+++ b/frontend/src/app/shared/guards/must-be-not-authenticated.guard.spec.ts
@ -6,6 +6,7 @@
 */

 import { Location } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { firstValueFrom, of } from 'rxjs';
 import { IMock, It, Mock, Times } from 'typemoq';
@ -24,13 +25,15 @@ describe('MustBeNotAuthenticatedGuard', () => {
        uiOptions.value.redirectToLogin = false;

        location = Mock.ofType<Location>();
-
-        location.setup(x => x.path(true))
-            .returns(() => '/my-path');
+        location.setup(x => x.path(true)).returns(() => '/my-path');

        router = Mock.ofType<Router>();
-        authService = Mock.ofType<AuthService>();
-        authGuard = new MustBeNotAuthenticatedGuard(authService.object, location.object, router.object, uiOptions);
+
+        TestBed.configureTestingModule({ providers: [{ provide: UIOptions, useValue: uiOptions }] });
+        TestBed.runInInjectionContext(() => {
+            authService = Mock.ofType<AuthService>();
+            authGuard = new MustBeNotAuthenticatedGuard(authService.object, location.object, router.object);
+        });
    });

    it('should navigate to app page if authenticated', async () => {
--- a/frontend/src/app/shared/guards/must-be-not-authenticated.guard.ts
+++ b/frontend/src/app/shared/guards/must-be-not-authenticated.guard.ts
@ -15,7 +15,7 @@ import { AuthService } from './../services/auth.service';

@Injectable()
 export class MustBeNotAuthenticatedGuard  {
-    private readonly redirectToLogin = inject(UIOptions).value.redirectToLogin;
+    private readonly options = inject(UIOptions);

    constructor(
        private readonly authService: AuthService,
@ -25,7 +25,7 @@ export class MustBeNotAuthenticatedGuard  {
    }

    public canActivate(snapshot: ActivatedRouteSnapshot): Observable<boolean> {
-        const redirect = this.redirectToLogin && !snapshot.queryParams.logout;
+        const redirect = this.options.value.redirectToLogin && !snapshot.queryParams.logout;

        return this.authService.userChanges.pipe(
            take(1),
--- a/frontend/src/app/shared/module.ts
+++ b/frontend/src/app/shared/module.ts
@ -13,7 +13,7 @@ import { MentionModule } from 'angular-mentions';
 import { NgChartsModule } from 'ng2-charts';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
 import { SqxFrameworkModule } from '@app/framework';
-import { ApiCallsCardComponent, ApiCallsSummaryCardComponent, ApiPerformanceCardComponent, ApiTrafficCardComponent, ApiTrafficSummaryCardComponent, AppFormComponent, AppLanguagesService, AppMustExistGuard, AppsService, AppsState, AssetComponent, AssetDialogComponent, AssetFolderComponent, AssetFolderDialogComponent, AssetFolderDropdownComponent, AssetFolderDropdownItemComponent, AssetHistoryComponent, AssetPathComponent, AssetPreviewUrlPipe, AssetScriptsState, AssetSelectorComponent, AssetsListComponent, AssetsService, AssetsState, AssetTextEditorComponent, AssetUploaderComponent, AssetUploaderState, AssetUploadsCountCardComponent, AssetUploadsSizeCardComponent, AssetUploadsSizeSummaryCardComponent, AssetUrlPipe, AuthInterceptor, AuthService, AutoSaveService, BackupsService, BackupsState, buildTasks, ClientsService, ClientsState, CommentComponent, CommentsComponent, CommentsService, ContentListCellDirective, ContentListCellResizeDirective, ContentListFieldComponent, ContentListHeaderComponent, ContentListWidthDirective, ContentMustExistGuard, ContentsColumnsPipe, ContentSelectorComponent, ContentSelectorItemComponent, ContentsService, ContentsState, ContentStatusComponent, ContentValueComponent, ContentValueEditorComponent, ContributorsService, ContributorsState, FileIconPipe, FilterComparisonComponent, FilterLogicalComponent, FilterNodeComponent, FilterOperatorPipe, GeolocationEditorComponent, HelpComponent, HelpMarkdownPipe, HelpService, HistoryComponent, HistoryListComponent, HistoryMessagePipe, HistoryService, IFrameCardComponent, ImageCropperComponent, ImageFocusPointComponent, LanguagesService, LanguagesState, LoadAppsGuard, LoadLanguagesGuard, LoadSchemasGuard, LoadSettingsGuard, LoadTeamsGuard, MarkdownEditorComponent, MustBeAuthenticatedGuard, MustBeNotAuthenticatedGuard, NewsService, NotifoComponent, PlansService, PlansState, PreviewableType, QueryComponent, QueryListComponent, QueryPathComponent, RandomCatCardComponent, RandomDogCardComponent, ReferenceInputComponent, RichEditorComponent, RolesService, RolesState, RuleEventsState, RuleMustExistGuard, RuleSimulatorState, RulesService, RulesState, SavedQueriesComponent, SchemaCategoryComponent, SchemaMustExistGuard, SchemaMustExistPublishedGuard, SchemaMustNotBeSingletonGuard, SchemasService, SchemasState, SchemaTagSource, ScriptNamePipe, SearchFormComponent, SearchService, SortingComponent, StockPhotoService, SupportCardComponent, TableHeaderComponent, TASK_CONFIGURATION, TeamFormComponent, TeamMustExistGuard, TeamsService, TeamsState, TemplatesService, TemplatesState, TourGuideComponent, TourHintDirective, TourState, TranslationsService, TranslationStatusComponent, UIService, UIState, UnsetAppGuard, UnsetTeamGuard, UsagesService, UserDtoPicture, UserIdPicturePipe, UserNamePipe, UserNameRefPipe, UserPicturePipe, UserPictureRefPipe, UsersProviderService, UsersService, WatchingUsersComponent, WorkflowsService, WorkflowsState } from './declarations';
+import { ApiCallsCardComponent, ApiCallsSummaryCardComponent, ApiPerformanceCardComponent, ApiTrafficCardComponent, ApiTrafficSummaryCardComponent, AppFormComponent, AppLanguagesService, AppMustExistGuard, AppsService, AppsState, AssetComponent, AssetDialogComponent, AssetFolderComponent, AssetFolderDialogComponent, AssetFolderDropdownComponent, AssetFolderDropdownItemComponent, AssetHistoryComponent, AssetPathComponent, AssetPreviewUrlPipe, AssetScriptsState, AssetSelectorComponent, AssetsListComponent, AssetsService, AssetsState, AssetTextEditorComponent, AssetUploaderComponent, AssetUploaderState, AssetUploadsCountCardComponent, AssetUploadsSizeCardComponent, AssetUploadsSizeSummaryCardComponent, AssetUrlPipe, AuthInterceptor, AuthService, AutoSaveService, BackupsService, BackupsState, buildTasks, ClientsService, ClientsState, CommentComponent, CommentsComponent, CommentsService, ContentListCellDirective, ContentListCellResizeDirective, ContentListFieldComponent, ContentListHeaderComponent, ContentListWidthDirective, ContentMustExistGuard, ContentsColumnsPipe, ContentSelectorComponent, ContentSelectorItemComponent, ContentsService, ContentsState, ContentStatusComponent, ContentValueComponent, ContentValueEditorComponent, ContributorsService, ContributorsState, FileIconPipe, FilterComparisonComponent, FilterLogicalComponent, FilterNodeComponent, FilterOperatorPipe, GeolocationEditorComponent, HelpComponent, HelpMarkdownPipe, HelpService, HistoryComponent, HistoryListComponent, HistoryMessagePipe, HistoryService, IFrameCardComponent, ImageCropperComponent, ImageFocusPointComponent, LanguagesService, LanguagesState, LoadAppsGuard, LoadLanguagesGuard, LoadSchemasGuard, LoadSettingsGuard, LoadTeamsGuard, MustBeAuthenticatedGuard, MustBeNotAuthenticatedGuard, NewsService, NotifoComponent, PlansService, PlansState, PreviewableType, QueryComponent, QueryListComponent, QueryPathComponent, RandomCatCardComponent, RandomDogCardComponent, ReferenceInputComponent, RichEditorComponent, RolesService, RolesState, RuleEventsState, RuleMustExistGuard, RuleSimulatorState, RulesService, RulesState, SavedQueriesComponent, SchemaCategoryComponent, SchemaMustExistGuard, SchemaMustExistPublishedGuard, SchemaMustNotBeSingletonGuard, SchemasService, SchemasState, SchemaTagSource, ScriptNamePipe, SearchFormComponent, SearchService, SortingComponent, StockPhotoService, SupportCardComponent, TableHeaderComponent, TASK_CONFIGURATION, TeamFormComponent, TeamMustExistGuard, TeamsService, TeamsState, TemplatesService, TemplatesState, TourGuideComponent, TourHintDirective, TourState, TranslationsService, TranslationStatusComponent, UIService, UIState, UnsetAppGuard, UnsetTeamGuard, UsagesService, UserDtoPicture, UserIdPicturePipe, UserNamePipe, UserNameRefPipe, UserPicturePipe, UserPictureRefPipe, UsersProviderService, UsersService, WatchingUsersComponent, WorkflowsService, WorkflowsState } from './declarations';

@NgModule({
    imports: [
@ -75,7 +75,6 @@ import { ApiCallsCardComponent, ApiCallsSummaryCardComponent, ApiPerformanceCard
        IFrameCardComponent,
        ImageCropperComponent,
        ImageFocusPointComponent,
-        MarkdownEditorComponent,
        NotifoComponent,
        PreviewableType,
        QueryComponent,
@ -147,7 +146,6 @@ import { ApiCallsCardComponent, ApiCallsSummaryCardComponent, ApiPerformanceCard
        HistoryListComponent,
        HistoryMessagePipe,
        IFrameCardComponent,
-        MarkdownEditorComponent,
        NotifoComponent,
        PreviewableType,
        QueryListComponent,
--- a/frontend/src/app/shared/state/resolvers.spec.ts
+++ b/frontend/src/app/shared/state/resolvers.spec.ts
@ -5,6 +5,7 @@
 * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
 */

+import { TestBed } from '@angular/core/testing';
 import { firstValueFrom, of, throwError } from 'rxjs';
 import { IMock, Mock, Times } from 'typemoq';
 import { UIOptions } from '@app/framework';
@ -34,8 +35,11 @@ describe('ResolveContents', () => {
    ];

    beforeEach(() => {
-        contentsService = Mock.ofType<ContentsService>();
-        contentsResolver = new ResolveContents(uiOptions, appsState.object, contentsService.object);
+        TestBed.configureTestingModule({ providers: [{ provide: UIOptions, useValue: uiOptions }] });
+        TestBed.runInInjectionContext(() => {
+            contentsService = Mock.ofType<ContentsService>();
+            contentsResolver = new ResolveContents(appsState.object, contentsService.object);
+        });
    });

    it('should not resolve contents immediately', () => {
--- a/frontend/src/config/webpack.config.js
+++ b/frontend/src/config/webpack.config.js
@ -15,20 +15,6 @@ module.exports = (config, _, options) => {
     */
    config.plugins.push(new plugins.CopyPlugin({
        patterns: [
-            { from: './node_modules/simplemde/dist', to: 'dependencies/simplemde' },
-
-            { from: './node_modules/tinymce/icons/default/icons.min.js', to: 'dependencies/tinymce/icons/default' },
-            { from: './node_modules/tinymce/plugins/advlist', to: 'dependencies/tinymce/plugins/advlist' },
-            { from: './node_modules/tinymce/plugins/code', to: 'dependencies/tinymce/plugins/code' },
-            { from: './node_modules/tinymce/plugins/image', to: 'dependencies/tinymce/plugins/image' },
-            { from: './node_modules/tinymce/plugins/link', to: 'dependencies/tinymce/plugins/link' },
-            { from: './node_modules/tinymce/plugins/lists', to: 'dependencies/tinymce/plugins/lists' },
-            { from: './node_modules/tinymce/plugins/media', to: 'dependencies/tinymce/plugins/media' },
-            { from: './node_modules/tinymce/plugins/paste', to: 'dependencies/tinymce/plugins/paste' },
-            { from: './node_modules/tinymce/skins', to: 'dependencies/tinymce/skins' },
-            { from: './node_modules/tinymce/themes/silver', to: 'dependencies/tinymce/themes/silver' },
-            { from: './node_modules/tinymce/tinymce.min.js', to: 'dependencies/tinymce' },
-
            { from: './node_modules/tui-code-snippet/dist', to: 'dependencies/tui-calendar' },
            { from: './node_modules/tui-calendar/dist', to: 'dependencies/tui-calendar' },
			`@ -0,0 +1 @@`
			.remirror-theme{width:100%}.remirror-theme *{box-sizing:border-box}.remirror-editor{min-height:300px!important;max-height:500px}.menu{border:1px solid #dedfe3;border-bottom:0}.MuiStack-root{padding:5px}.MuiStack-root>.MuiBox-root{margin-right:5px}.MuiStack-root>.MuiBox-root>button.MuiButtonBase-root{margin-left:-1px}.MuiBox-root>.MuiButtonBase-root{border-color:#dedfe3!important;border-radius:0}.MuiButtonBase-root.Mui-selected:hover{background-color:#3284f4!important}.remirror-editor img{max-width:300px;max-height:300px}.remirror-editor-wrapper{padding-top:0!important}.custom-icon path{fill:#0000008a}.remirror-theme div.ProseMirror{border:1px solid #dedfe3!important;border-radius:0!important;box-shadow:none!important}.MuiTooltip-popper>div{background-color:#1a2129;border-radius:0;font-size:85%;font-weight:400;padding:.5rem}.squidex-editor-disabled{pointer-events:none}.squidex-editor-floating{border:1px solid #dedfe3}.squidex-editor-floating .MuiBox-root{margin-right:0!important}.squidex-editor-floating input{border:1px solid #dedfe3;border-radius:0;box-sizing:border-box;height:30px;margin-left:0;margin-right:5px;outline:none;padding:6px 12px}.squidex-editor-floating input:active{border-color:#3389ff}.squidex-editor-floating .MuiButtonBase-root{height:30px}.squidex-editor-counter{border:1px solid #dedfe3;border-top:0;font-size:85%;font-weight:400;opacity:.8;padding:4px 10px 4px 4px;text-align:right}