Lexical based editor

dev/build/esbuild.js

@@ -14,6 +14,7 @@ const entryPoints = {
     code: path.join(__dirname, '../../resources/js/code/index.mjs'),
     'legacy-modes': path.join(__dirname, '../../resources/js/code/legacy-modes.mjs'),
     markdown: path.join(__dirname, '../../resources/js/markdown/index.mjs'),
+    wysiwyg: path.join(__dirname, '../../resources/js/wysiwyg/index.ts'),
 };
 
 // Locate our output directory
@@ -31,6 +32,13 @@ esbuild.build({
     format: 'esm',
     minify: isProd,
     logLevel: 'info',
+    loader: {
+        '.svg': 'text',
+    },
+    absWorkingDir: path.join(__dirname, '../..'),
+    alias: {
+        '@icons': './resources/icons',
+    },
     banner: {
         js: '// See the "/licenses" URI for full package license details',
         css: '/* See the "/licenses" URI for full package license details */',

package.json

@@ -5,7 +5,7 @@
     "build:css:watch": "sass ./resources/sass:./public/dist --watch --embed-sources",
     "build:css:production": "sass ./resources/sass:./public/dist -s compressed",
     "build:js:dev": "node dev/build/esbuild.js",
-    "build:js:watch": "chokidar --initial \"./resources/**/*.js\" \"./resources/**/*.mjs\" -c \"npm run build:js:dev\"",
+    "build:js:watch": "chokidar --initial \"./resources/**/*.js\" \"./resources/**/*.mjs\" \"./resources/**/*.ts\" -c \"npm run build:js:dev\"",
     "build:js:production": "node dev/build/esbuild.js production",
     "build": "npm-run-all --parallel build:*:dev",
     "production": "npm-run-all --parallel build:*:production",
@@ -14,7 +14,8 @@
     "livereload": "livereload ./public/dist/",
     "permissions": "chown -R $USER:$USER bootstrap/cache storage public/uploads",
     "lint": "eslint \"resources/**/*.js\" \"resources/**/*.mjs\"",
-    "fix": "eslint --fix \"resources/**/*.js\" \"resources/**/*.mjs\""
+    "fix": "eslint --fix \"resources/**/*.js\" \"resources/**/*.mjs\"",
+    "ts:lint": "tsc --noEmit"
   },
   "devDependencies": {
     "@lezer/generator": "^1.5.1",
@@ -25,7 +26,8 @@
     "eslint-plugin-import": "^2.29.0",
     "livereload": "^0.9.3",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.69.5"
+    "sass": "^1.69.5",
+    "typescript": "^5.4.5"
   },
   "dependencies": {
     "@codemirror/commands": "^6.3.2",
@@ -41,11 +43,20 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.2",
+    "@lexical/history": "^0.16.0",
+    "@lexical/html": "^0.16.0",
+    "@lexical/link": "^0.16.0",
+    "@lexical/list": "^0.16.0",
+    "@lexical/rich-text": "^0.16.0",
+    "@lexical/selection": "^0.16.0",
+    "@lexical/table": "^0.16.0",
+    "@lexical/utils": "^0.16.0",
     "@lezer/highlight": "^1.2.0",
     "@ssddanbrown/codemirror-lang-smarty": "^1.0.0",
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
     "codemirror": "^6.0.1",
     "idb-keyval": "^6.2.1",
+    "lexical": "^0.16.0",
     "markdown-it": "^14.1.0",
     "markdown-it-task-lists": "^2.1.1",
     "snabbdom": "^3.5.1",
@@ -59,7 +70,8 @@
     },
     "extends": "airbnb-base",
     "ignorePatterns": [
-      "resources/**/*-stub.js"
+      "resources/**/*-stub.js",
+      "resources/**/*.ts"
     ],
     "overrides": [],
     "parserOptions": {

resources/js/app.js

@@ -1,9 +1,8 @@
 import * as events from './services/events';
 import * as httpInstance from './services/http';
 import Translations from './services/translations';
-
-import * as components from './services/components';
 import * as componentMap from './components';
+import {ComponentStore} from './services/components.ts';
 
 // Url retrieval function
 window.baseUrl = function baseUrl(path) {
@@ -32,6 +31,6 @@ window.trans_choice = translator.getPlural.bind(translator);
 window.trans_plural = translator.parsePlural.bind(translator);
 
 // Load & initialise components
-components.register(componentMap);
-window.$components = components;
-components.init();
+window.$components = new ComponentStore();
+window.$components.register(componentMap);
+window.$components.init();

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/markdown-editor.js

@@ -133,9 +133,9 @@ export class MarkdownEditor extends Component {
     /**
      * Get the content of this editor.
      * Used by the parent page editor component.
-     * @return {{html: String, markdown: String}}
+     * @return {Promise<{html: String, markdown: String}>}
      */
-    getContent() {
+    async getContent() {
         return this.editor.actions.getContent();
     }
 

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/page-editor.js

@@ -118,7 +118,7 @@ export class PageEditor extends Component {
     async saveDraft() {
         const data = {name: this.titleElem.value.trim()};
 
-        const editorContent = this.getEditorComponent().getContent();
+        const editorContent = await this.getEditorComponent().getContent();
         Object.assign(data, editorContent);
 
         let didSave = false;
@@ -235,10 +235,12 @@ export class PageEditor extends Component {
     }
 
     /**
-     * @return MarkdownEditor|WysiwygEditor
+     * @return {MarkdownEditor|WysiwygEditor|WysiwygEditorTinymce}
      */
     getEditorComponent() {
-        return window.$components.first('markdown-editor') || window.$components.first('wysiwyg-editor');
+        return window.$components.first('markdown-editor')
+            || window.$components.first('wysiwyg-editor')
+            || window.$components.first('wysiwyg-editor-tinymce');
     }
 
 }

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 {Promise<{html: String}>}
+     */
+    async getContent() {
+        return {
+            html: this.editor.getContent(),
+        };
+    }
+
+}