Merge branch 'lexical' into development

Author: ssddanbrown

.github/workflows/lint-js.yml

@@ -13,9 +13,9 @@ on:
 jobs:
   build:
     if: ${{ github.ref != 'refs/heads/l10n_development' }}
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v4
 
     - name: Install NPM deps
       run: npm ci

.github/workflows/test-js.yml

@@ -0,0 +1,29 @@
+name: test-js
+
+on:
+  push:
+    paths:
+      - '**.js'
+      - '**.ts'
+      - '**.json'
+  pull_request:
+    paths:
+      - '**.js'
+      - '**.ts'
+      - '**.json'
+
+jobs:
+  build:
+    if: ${{ github.ref != 'refs/heads/l10n_development' }}
+    runs-on: ubuntu-24.04
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Install NPM deps
+      run: npm ci
+
+    - name: Run TypeScript type checking
+      run: npm run ts:lint
+
+    - name: Run JavaScript tests
+      run: npm run test

.gitignore

@@ -2,6 +2,7 @@
 /node_modules
 /.vscode
 /composer
+/coverage
 Homestead.yaml
 .env
 .idea

app/Entities/Models/Page.php

@@ -3,6 +3,7 @@
 namespace BookStack\Entities\Models;
 
 use BookStack\Entities\Tools\PageContent;
+use BookStack\Entities\Tools\PageEditorType;
 use BookStack\Permissions\PermissionApplicator;
 use BookStack\Uploads\Attachment;
 use Illuminate\Database\Eloquent\Builder;

app/Entities/Repos/PageRepo.php

@@ -12,6 +12,7 @@
 use BookStack\Entities\Tools\BookContents;
 use BookStack\Entities\Tools\PageContent;
 use BookStack\Entities\Tools\PageEditorData;
+use BookStack\Entities\Tools\PageEditorType;
 use BookStack\Entities\Tools\TrashCan;
 use BookStack\Exceptions\MoveOperationException;
 use BookStack\Exceptions\PermissionsException;
@@ -127,7 +128,9 @@ protected function updateTemplateStatusAndContentFromInput(Page $page, array $in
         }
 
         $pageContent = new PageContent($page);
-        $currentEditor = $page->editor ?: PageEditorData::getSystemDefaultEditor();
+        $defaultEditor = PageEditorType::getSystemDefault();
+        $currentEditor = PageEditorType::forPage($page) ?: $defaultEditor;
+        $inputEditor = PageEditorType::fromRequestValue($input['editor'] ?? '') ?? $currentEditor;
         $newEditor = $currentEditor;
 
         $haveInput = isset($input['markdown']) || isset($input['html']);
@@ -136,15 +139,15 @@ protected function updateTemplateStatusAndContentFromInput(Page $page, array $in
         if ($haveInput && $inputEmpty) {
             $pageContent->setNewHTML('', user());
         } elseif (!empty($input['markdown']) && is_string($input['markdown'])) {
-            $newEditor = 'markdown';
+            $newEditor = PageEditorType::Markdown;
             $pageContent->setNewMarkdown($input['markdown'], user());
         } elseif (isset($input['html'])) {
-            $newEditor = 'wysiwyg';
+            $newEditor = ($inputEditor->isHtmlBased() ? $inputEditor : null) ?? ($defaultEditor->isHtmlBased() ? $defaultEditor : null) ?? PageEditorType::WysiwygTinymce;
             $pageContent->setNewHTML($input['html'], user());
         }
 
         if ($newEditor !== $currentEditor && userCan('editor-change')) {
-            $page->editor = $newEditor;
+            $page->editor = $newEditor->value;
         }
     }
 

app/Entities/Tools/PageEditorData.php

@@ -74,17 +74,17 @@ protected function build(): array
         ];
     }
 
-    protected function updateContentForEditor(Page $page, string $editorType): void
+    protected function updateContentForEditor(Page $page, PageEditorType $editorType): void
     {
         $isHtml = !empty($page->html) && empty($page->markdown);
 
         // HTML to markdown-clean conversion
-        if ($editorType === 'markdown' && $isHtml && $this->requestedEditor === 'markdown-clean') {
+        if ($editorType === PageEditorType::Markdown && $isHtml && $this->requestedEditor === 'markdown-clean') {
             $page->markdown = (new HtmlToMarkdown($page->html))->convert();
         }
 
         // Markdown to HTML conversion if we don't have HTML
-        if ($editorType === 'wysiwyg' && !$isHtml) {
+        if ($editorType->isHtmlBased() && !$isHtml) {
             $page->html = (new MarkdownToHtml($page->markdown))->convert();
         }
     }
@@ -94,24 +94,16 @@ protected function updateContentForEditor(Page $page, string $editorType): void
      * Defaults based upon the current content of the page otherwise will fall back
      * to system default but will take a requested type (if provided) if permissions allow.
      */
-    protected function getEditorType(Page $page): string
+    protected function getEditorType(Page $page): PageEditorType
     {
-        $editorType = $page->editor ?: self::getSystemDefaultEditor();
+        $editorType = PageEditorType::forPage($page) ?: PageEditorType::getSystemDefault();
 
         // Use requested editor if valid and if we have permission
-        $requestedType = explode('-', $this->requestedEditor)[0];
-        if (($requestedType === 'markdown' || $requestedType === 'wysiwyg') && userCan('editor-change')) {
+        $requestedType = PageEditorType::fromRequestValue($this->requestedEditor);
+        if ($requestedType && userCan('editor-change')) {
             $editorType = $requestedType;
         }
 
         return $editorType;
     }
-
-    /**
-     * Get the configured system default editor.
-     */
-    public static function getSystemDefaultEditor(): string
-    {
-        return setting('app-editor') === 'markdown' ? 'markdown' : 'wysiwyg';
-    }
 }

app/Entities/Tools/PageEditorType.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace BookStack\Entities\Tools;
+
+use BookStack\Entities\Models\Page;
+
+enum PageEditorType: string
+{
+    case WysiwygTinymce = 'wysiwyg';
+    case WysiwygLexical = 'wysiwyg2024';
+    case Markdown = 'markdown';
+
+    public function isHtmlBased(): bool
+    {
+        return match ($this) {
+            self::WysiwygTinymce, self::WysiwygLexical => true,
+            self::Markdown => false,
+        };
+    }
+
+    public static function fromRequestValue(string $value): static|null
+    {
+        $editor = explode('-', $value)[0];
+        return static::tryFrom($editor);
+    }
+
+    public static function forPage(Page $page): static|null
+    {
+        return static::tryFrom($page->editor);
+    }
+
+    public static function getSystemDefault(): static
+    {
+        $setting = setting('app-editor');
+        return static::tryFrom($setting) ?? static::WysiwygTinymce;
+    }
+}

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,15 @@ esbuild.build({
     format: 'esm',
     minify: isProd,
     logLevel: 'info',
+    loader: {
+        '.svg': 'text',
+    },
+    absWorkingDir: path.join(__dirname, '../..'),
+    alias: {
+        '@icons': './resources/icons',
+        lexical: './resources/js/wysiwyg/lexical/core',
+        '@lexical': './resources/js/wysiwyg/lexical',
+    },
     banner: {
         js: '// See the "/licenses" URI for full package license details',
         css: '/* See the "/licenses" URI for full package license details */',