mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Page Editors: Added switching/options for new lexical editor
This commit is contained in:
parent
c8ccb2bac7
commit
8b32e6c15a
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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];
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
37
app/Entities/Tools/PageEditorType.php
Normal file
37
app/Entities/Tools/PageEditorType.php
Normal file
@ -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;
|
||||
}
|
||||
}
|
@ -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',
|
||||
|
@ -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
|
@ -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>
|
||||
|
@ -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
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user