Editors: Added lexical editor for testing

Started basic playground for testing lexical as a new WYSIWYG editor.
Moved out tinymce to be under wysiwyg-tinymce instead so lexical is the
default, but TinyMce code remains.

resources/js/components/index.js

@@ -58,4 +58,5 @@ export {TriLayout} from './tri-layout';
 export {UserSelect} from './user-select';
 export {WebhookEvents} from './webhook-events';
 export {WysiwygEditor} from './wysiwyg-editor';
+export {WysiwygEditorTinymce} from './wysiwyg-editor-tinymce';
 export {WysiwygInput} from './wysiwyg-input';

resources/js/components/page-comment.js

@@ -1,6 +1,6 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
-import {buildForInput} from '../wysiwyg/config';
+import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class PageComment extends Component {
 

resources/js/components/page-comments.js

@@ -1,6 +1,6 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
-import {buildForInput} from '../wysiwyg/config';
+import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class PageComments extends Component {
 

resources/js/components/wysiwyg-editor-tinymce.js

@@ -0,0 +1,48 @@
+import {buildForEditor as buildEditorConfig} from '../wysiwyg-tinymce/config';
+import {Component} from './component';
+
+export class WysiwygEditorTinymce extends Component {
+
+    setup() {
+        this.elem = this.$el;
+
+        this.tinyMceConfig = buildEditorConfig({
+            language: this.$opts.language,
+            containerElement: this.elem,
+            darkMode: document.documentElement.classList.contains('dark-mode'),
+            textDirection: this.$opts.textDirection,
+            drawioUrl: this.getDrawIoUrl(),
+            pageId: Number(this.$opts.pageId),
+            translations: {
+                imageUploadErrorText: this.$opts.imageUploadErrorText,
+                serverUploadLimitText: this.$opts.serverUploadLimitText,
+            },
+            translationMap: window.editor_translations,
+        });
+
+        window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
+        window.tinymce.init(this.tinyMceConfig).then(editors => {
+            this.editor = editors[0];
+        });
+    }
+
+    getDrawIoUrl() {
+        const drawioUrlElem = document.querySelector('[drawio-url]');
+        if (drawioUrlElem) {
+            return drawioUrlElem.getAttribute('drawio-url');
+        }
+        return '';
+    }
+
+    /**
+     * Get the content of this editor.
+     * Used by the parent page editor component.
+     * @return {{html: String}}
+     */
+    getContent() {
+        return {
+            html: this.editor.getContent(),
+        };
+    }
+
+}

resources/js/components/wysiwyg-editor.js

@@ -1,28 +1,13 @@
-import {buildForEditor as buildEditorConfig} from '../wysiwyg/config';
 import {Component} from './component';
 
 export class WysiwygEditor extends Component {
 
     setup() {
         this.elem = this.$el;
+        this.editArea = this.$refs.editArea;
 
-        this.tinyMceConfig = buildEditorConfig({
-            language: this.$opts.language,
-            containerElement: this.elem,
-            darkMode: document.documentElement.classList.contains('dark-mode'),
-            textDirection: this.$opts.textDirection,
-            drawioUrl: this.getDrawIoUrl(),
-            pageId: Number(this.$opts.pageId),
-            translations: {
-                imageUploadErrorText: this.$opts.imageUploadErrorText,
-                serverUploadLimitText: this.$opts.serverUploadLimitText,
-            },
-            translationMap: window.editor_translations,
-        });
-
-        window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
-        window.tinymce.init(this.tinyMceConfig).then(editors => {
-            this.editor = editors[0];
+        window.importVersioned('wysiwyg').then(wysiwyg => {
+            wysiwyg.createPageEditorInstance(this.editArea);
         });
     }
 

resources/js/components/wysiwyg-input.js

@@ -1,5 +1,5 @@
 import {Component} from './component';
-import {buildForInput} from '../wysiwyg/config';
+import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class WysiwygInput extends Component {