Page Editors: Added switching/options for new lexical editor

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\Queries\EntityQueries;
 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;
@@ -126,7 +127,9 @@ class PageRepo
         }
 
         $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']);
@@ -135,15 +138,15 @@ class PageRepo
         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 @@ class PageEditorData
         ];
     }
 
-    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 @@ class PageEditorData
      * 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];
+        $requestedType = PageEditorType::fromRequestValue($this->requestedEditor);
-        if (($requestedType === 'markdown' || $requestedType === 'wysiwyg') && userCan('editor-change')) {
+        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;
+    }
+}

lang/en/entities.php

@@ -224,6 +224,8 @@ return [
     'pages_edit_switch_to_markdown_clean' => '(Clean Content)',
     'pages_edit_switch_to_markdown_stable' => '(Stable Content)',
     'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG Editor',
+    'pages_edit_switch_to_new_wysiwyg' => 'Switch to new WYSIWYG',
+    'pages_edit_switch_to_new_wysiwyg_desc' => '(In Alpha Testing)',
     'pages_edit_set_changelog' => 'Set Changelog',
     'pages_edit_enter_changelog_desc' => 'Enter a brief description of the changes you\'ve made',
     'pages_edit_enter_changelog' => 'Enter Changelog',

resources/js/wysiwyg/todo.md

@@ -19,5 +19,6 @@
 
 ## Bugs
 
+- Editor theme classes remain on items after export
 - List selection can get lost on nesting/unnesting
 - Content not properly saving on new pages

resources/views/pages/parts/editor-toolbar.blade.php

@@ -55,7 +55,7 @@
                         <hr>
                     </li>
                     <li>
-                        @if($editor === 'wysiwyg')
+                        @if($editor !== \BookStack\Entities\Tools\PageEditorType::Markdown)
                             <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
                                 @icon('swap-horizontal')
                                 <div>
@@ -72,12 +72,23 @@
                                     <small>{{ trans('entities.pages_edit_switch_to_markdown_stable') }}</small>
                                 </div>
                             </a>
-                        @else
+                        @endif
+                        @if($editor !== \BookStack\Entities\Tools\PageEditorType::WysiwygTinymce)
                             <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
                                 @icon('swap-horizontal')
                                 <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
                             </a>
                         @endif
+                        @if($editor !== \BookStack\Entities\Tools\PageEditorType::WysiwygLexical)
+                            <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg2024" refs="page-editor@changeEditor" class="icon-item">
+                                @icon('swap-horizontal')
+                                <div>
+                                    {{ trans('entities.pages_edit_switch_to_new_wysiwyg') }}
+                                    <br>
+                                    <small>{{ trans('entities.pages_edit_switch_to_new_wysiwyg_desc') }}</small>
+                                </div>
+                            </a>
+                        @endif
                     </li>
                 @endif
             </ul>

resources/views/pages/parts/form.blade.php

@@ -32,18 +32,19 @@
             <div class="flex-fill flex">
                 {{--Editors--}}
                 <div class="edit-area flex-fill flex">
+                    <input type="hidden" name="editor" value="{{ $editor->value }}">
 
-                    @if($editor === 'wysiwyg')
+                    @if($editor === \BookStack\Entities\Tools\PageEditorType::WysiwygLexical)
                         @include('pages.parts.wysiwyg-editor', ['model' => $model])
                     @endif
 
                     {{--WYSIWYG Editor (TinyMCE - Deprecated)--}}
-                    @if($editor === 'wysiwyg-tinymce')
+                    @if($editor === \BookStack\Entities\Tools\PageEditorType::WysiwygTinymce)
                         @include('pages.parts.wysiwyg-editor-tinymce', ['model' => $model])
                     @endif
 
                     {{--Markdown Editor--}}
-                    @if($editor === 'markdown')
+                    @if($editor === \BookStack\Entities\Tools\PageEditorType::Markdown)
                         @include('pages.parts.markdown-editor', ['model' => $model])
                     @endif
 

resources/views/settings/customization.blade.php

@@ -32,6 +32,7 @@
                     <select name="setting-app-editor" id="setting-app-editor">
                         <option @if(setting('app-editor') === 'wysiwyg') selected @endif value="wysiwyg">WYSIWYG</option>
                         <option @if(setting('app-editor') === 'markdown') selected @endif value="markdown">Markdown</option>
+                        <option @if(setting('app-editor') === 'wysiwyg2024') selected @endif value="wysiwyg2024">New WYSIWYG (alpha testing)</option>
                     </select>
                 </div>
             </div>

tests/Entity/PageEditorTest.php

@@ -4,6 +4,7 @@ namespace Tests\Entity;
 
 use BookStack\Entities\Models\Chapter;
 use BookStack\Entities\Models\Page;
+use BookStack\Entities\Tools\PageEditorType;
 use Tests\TestCase;
 
 class PageEditorTest extends TestCase
@@ -25,7 +26,7 @@ class PageEditorTest extends TestCase
 
     public function test_markdown_setting_shows_markdown_editor_for_new_pages()
     {
-        $this->setSettings(['app-editor' => 'markdown']);
+        $this->setSettings(['app-editor' => PageEditorType::Markdown->value]);
 
         $resp = $this->asAdmin()->get($this->page->book->getUrl('/create-page'));
         $this->withHtml($this->followRedirects($resp))
@@ -37,7 +38,7 @@ class PageEditorTest extends TestCase
     {
         $mdContent = '# hello. This is a test';
         $this->page->markdown = $mdContent;
-        $this->page->editor = 'markdown';
+        $this->page->editor = PageEditorType::Markdown;
         $this->page->save();
 
         $resp = $this->asAdmin()->get($this->page->getUrl('/edit'));
@@ -135,6 +136,19 @@ class PageEditorTest extends TestCase
 
         $resp = $this->asAdmin()->get($page->getUrl('/edit?editor=wysiwyg'));
         $resp->assertStatus(200);
+        $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor-tinymce"]');
+        $resp->assertSee("<h2>A Header</h2>\n<p>Some content with <strong>bold</strong> text!</p>", true);
+    }
+
+    public function test_switching_from_markdown_to_wysiwyg2024_works()
+    {
+        $page = $this->entities->page();
+        $page->html = '';
+        $page->markdown = "## A Header\n\nSome content with **bold** text!";
+        $page->save();
+
+        $resp = $this->asAdmin()->get($page->getUrl('/edit?editor=wysiwyg2024'));
+        $resp->assertStatus(200);
         $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor"]');
         $resp->assertSee("<h2>A Header</h2>\n<p>Some content with <strong>bold</strong> text!</p>", true);
     }
@@ -142,7 +156,7 @@ class PageEditorTest extends TestCase
     public function test_page_editor_changes_with_editor_property()
     {
         $resp = $this->asAdmin()->get($this->page->getUrl('/edit'));
-        $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor"]');
+        $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor-tinymce"]');
 
         $this->page->markdown = "## A Header\n\nSome content with **bold** text!";
         $this->page->editor = 'markdown';
@@ -150,6 +164,12 @@ class PageEditorTest extends TestCase
 
         $resp = $this->asAdmin()->get($this->page->getUrl('/edit'));
         $this->withHtml($resp)->assertElementExists('[component="markdown-editor"]');
+
+        $this->page->editor = 'wysiwyg2024';
+        $this->page->save();
+
+        $resp = $this->asAdmin()->get($this->page->getUrl('/edit'));
+        $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor"]');
     }
 
     public function test_editor_type_switch_options_show()
@@ -158,6 +178,7 @@ class PageEditorTest extends TestCase
         $editLink = $this->page->getUrl('/edit') . '?editor=';
         $this->withHtml($resp)->assertElementContains("a[href=\"${editLink}markdown-clean\"]", '(Clean Content)');
         $this->withHtml($resp)->assertElementContains("a[href=\"${editLink}markdown-stable\"]", '(Stable Content)');
+        $this->withHtml($resp)->assertElementContains("a[href=\"${editLink}wysiwyg2024\"]", '(In Alpha Testing)');
 
         $resp = $this->asAdmin()->get($this->page->getUrl('/edit?editor=markdown-stable'));
         $editLink = $this->page->getUrl('/edit') . '?editor=';
@@ -179,7 +200,7 @@ class PageEditorTest extends TestCase
 
         $resp = $this->asEditor()->get($page->getUrl('/edit?editor=markdown-stable'));
         $resp->assertStatus(200);
-        $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor"]');
+        $this->withHtml($resp)->assertElementExists('[component="wysiwyg-editor-tinymce"]');
         $this->withHtml($resp)->assertElementNotExists('[component="markdown-editor"]');
     }
 
@@ -193,4 +214,40 @@ class PageEditorTest extends TestCase
         $this->asEditor()->put($page->getUrl(), ['name' => $page->name, 'markdown' => '## Updated content abc']);
         $this->assertEquals('wysiwyg', $page->refresh()->editor);
     }
+
+    public function test_editor_type_change_to_wysiwyg_infers_type_from_request_or_uses_system_default()
+    {
+        $tests = [
+            [
+                'setting' => 'wysiwyg',
+                'request' => 'wysiwyg2024',
+                'expected' => 'wysiwyg2024',
+            ],
+            [
+                'setting' => 'wysiwyg2024',
+                'request' => 'wysiwyg',
+                'expected' => 'wysiwyg',
+            ],
+            [
+                'setting' => 'wysiwyg',
+                'request' => null,
+                'expected' => 'wysiwyg',
+            ],
+            [
+                'setting' => 'wysiwyg2024',
+                'request' => null,
+                'expected' => 'wysiwyg2024',
+            ]
+        ];
+
+        $page = $this->entities->page();
+        foreach ($tests as $test) {
+            $page->editor = 'markdown';
+            $page->save();
+
+            $this->setSettings(['app-editor' => $test['setting']]);
+            $this->asAdmin()->put($page->getUrl(), ['name' => $page->name, 'html' => '<p>Hello</p>', 'editor' => $test['request']]);
+            $this->assertEquals($test['expected'], $page->refresh()->editor, "Failed asserting global editor {$test['setting']} with request editor {$test['request']} results in {$test['expected']} set for the page");
+        }
+    }
 }