Added ability to use templates

- Added replace, append and prepend actions for template content into
both the WYSIWYG editor and markdown editor.
- Added further testing to cover.

app/Entities/Repos/PageRepo.php

@@ -9,6 +9,7 @@ use Carbon\Carbon;
 use DOMDocument;
 use DOMElement;
 use DOMXPath;
+use Illuminate\Support\Collection;
 
 class PageRepo extends EntityRepo
 {
@@ -532,4 +533,29 @@ class PageRepo extends EntityRepo
 
         return $this->publishPageDraft($copyPage, $pageData);
     }
+
+    /**
+     * Get pages that have been marked as templates.
+     * @param int $count
+     * @param int $page
+     * @param string $search
+     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
+     */
+    public function getPageTemplates(int $count = 10, int $page = 1,  string $search = '')
+    {
+        $query = $this->entityQuery('page')
+            ->where('template', '=', true)
+            ->orderBy('name', 'asc')
+            ->skip( ($page - 1) * $count)
+            ->take($count);
+
+        if ($search) {
+            $query->where('name', 'like', '%' . $search . '%');
+        }
+
+        $paginator = $query->paginate($count, ['*'], 'page', $page);
+        $paginator->withPath('/templates');
+
+        return $paginator;
+    }
 }

app/Http/Controllers/PageController.php

@@ -110,11 +110,14 @@ class PageController extends Controller
         $this->setPageTitle(trans('entities.pages_edit_draft'));
 
         $draftsEnabled = $this->signedIn;
+        $templates = $this->pageRepo->getPageTemplates(10);
+
         return view('pages.edit', [
             'page' => $draft,
             'book' => $draft->book,
             'isDraft' => true,
-            'draftsEnabled' => $draftsEnabled
+            'draftsEnabled' => $draftsEnabled,
+            'templates' => $templates,
         ]);
     }
 
@@ -239,11 +242,14 @@ class PageController extends Controller
         }
 
         $draftsEnabled = $this->signedIn;
+        $templates = $this->pageRepo->getPageTemplates(10);
+
         return view('pages.edit', [
             'page' => $page,
             'book' => $page->book,
             'current' => $page,
-            'draftsEnabled' => $draftsEnabled
+            'draftsEnabled' => $draftsEnabled,
+            'templates' => $templates,
         ]);
     }
 

app/Http/Controllers/PageTemplateController.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace BookStack\Http\Controllers;
+
+use BookStack\Entities\Repos\PageRepo;
+use BookStack\Exceptions\NotFoundException;
+use Illuminate\Http\Request;
+
+class PageTemplateController extends Controller
+{
+    protected $pageRepo;
+
+    /**
+     * PageTemplateController constructor.
+     * @param $pageRepo
+     */
+    public function __construct(PageRepo $pageRepo)
+    {
+        $this->pageRepo = $pageRepo;
+        parent::__construct();
+    }
+
+    /**
+     * Fetch a list of templates from the system.
+     * @param Request $request
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function list(Request $request)
+    {
+        $page = $request->get('page', 1);
+        $search = $request->get('search', '');
+        $templates = $this->pageRepo->getPageTemplates(10, $page, $search);
+
+        if ($search) {
+            $templates->appends(['search' => $search]);
+        }
+
+        return view('pages.template-manager-list', [
+            'templates' => $templates
+        ]);
+    }
+
+    /**
+     * Get the content of a template.
+     * @param $templateId
+     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Symfony\Component\HttpFoundation\Response
+     * @throws NotFoundException
+     */
+    public function get($templateId)
+    {
+        $page = $this->pageRepo->getById('page', $templateId);
+
+        if (!$page->template) {
+            throw new NotFoundException();
+        }
+
+        return response()->json([
+            'html' => $page->html,
+            'markdown' => $page->markdown,
+        ]);
+    }
+
+}

resources/assets/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8L12 12.58 16.59 8 18 9.41l-6 6-6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

resources/assets/js/components/index.js

@@ -27,6 +27,7 @@ import customCheckbox from "./custom-checkbox";
 import bookSort from "./book-sort";
 import settingAppColorPicker from "./setting-app-color-picker";
 import entityPermissionsEditor from "./entity-permissions-editor";
+import templateManager from "./template-manager";
 
 const componentMapping = {
     'dropdown': dropdown,
@@ -57,7 +58,8 @@ const componentMapping = {
     'custom-checkbox': customCheckbox,
     'book-sort': bookSort,
     'setting-app-color-picker': settingAppColorPicker,
-    'entity-permissions-editor': entityPermissionsEditor
+    'entity-permissions-editor': entityPermissionsEditor,
+    'template-manager': templateManager,
 };
 
 window.components = {};

resources/assets/js/components/markdown-editor.js

@@ -91,6 +91,7 @@ class MarkdownEditor {
         });
 
         this.codeMirrorSetup();
+        this.listenForBookStackEditorEvents();
     }
 
     // Update the input content and render the display.
@@ -461,6 +462,37 @@ class MarkdownEditor {
         })
     }
 
+    listenForBookStackEditorEvents() {
+
+        function getContentToInsert({html, markdown}) {
+            return markdown || html;
+        }
+
+        // Replace editor content
+        window.$events.listen('editor::replace', (eventContent) => {
+            const markdown = getContentToInsert(eventContent);
+            this.cm.setValue(markdown);
+        });
+
+        // Append editor content
+        window.$events.listen('editor::append', (eventContent) => {
+            const cursorPos = this.cm.getCursor('from');
+            const markdown = getContentToInsert(eventContent);
+            const content = this.cm.getValue() + '\n' + markdown;
+            this.cm.setValue(content);
+            this.cm.setCursor(cursorPos.line, cursorPos.ch);
+        });
+
+        // Prepend editor content
+        window.$events.listen('editor::prepend', (eventContent) => {
+            const cursorPos = this.cm.getCursor('from');
+            const markdown = getContentToInsert(eventContent);
+            const content = markdown + '\n' + this.cm.getValue();
+            this.cm.setValue(content);
+            const prependLineCount = markdown.split('\n').length;
+            this.cm.setCursor(cursorPos.line + prependLineCount, cursorPos.ch);
+        });
+    }
 }
 
 export default MarkdownEditor ;

resources/assets/js/components/template-manager.js

@@ -0,0 +1,85 @@
+import * as DOM from "../services/dom";
+
+class TemplateManager {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.list = elem.querySelector('[template-manager-list]');
+        this.searching = false;
+
+        // Template insert action buttons
+        DOM.onChildEvent(this.elem, '[template-action]', 'click', this.handleTemplateActionClick.bind(this));
+
+        // Template list pagination click
+        DOM.onChildEvent(this.elem, '.pagination a', 'click', this.handlePaginationClick.bind(this));
+
+        // Template list item content click
+        DOM.onChildEvent(this.elem, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
+
+        this.setupSearchBox();
+    }
+
+    handleTemplateItemClick(event, templateItem) {
+        const templateId = templateItem.closest('[template-id]').getAttribute('template-id');
+        this.insertTemplate(templateId, 'replace');
+    }
+
+    handleTemplateActionClick(event, actionButton) {
+        event.stopPropagation();
+
+        const action = actionButton.getAttribute('template-action');
+        const templateId = actionButton.closest('[template-id]').getAttribute('template-id');
+        this.insertTemplate(templateId, action);
+    }
+
+    async insertTemplate(templateId, action = 'replace') {
+        const resp = await window.$http.get(`/templates/${templateId}`);
+        const eventName = 'editor::' + action;
+        window.$events.emit(eventName, resp.data);
+    }
+
+    async handlePaginationClick(event, paginationLink) {
+        event.preventDefault();
+        const paginationUrl = paginationLink.getAttribute('href');
+        const resp = await window.$http.get(paginationUrl);
+        this.list.innerHTML = resp.data;
+    }
+
+    setupSearchBox() {
+        const searchBox = this.elem.querySelector('.search-box');
+        const input = searchBox.querySelector('input');
+        const submitButton = searchBox.querySelector('button');
+        const cancelButton = searchBox.querySelector('button.search-box-cancel');
+
+        async function performSearch() {
+            const searchTerm = input.value;
+            const resp = await window.$http.get(`/templates`, {
+                search: searchTerm
+            });
+            cancelButton.style.display = searchTerm ? 'block' : 'none';
+            this.list.innerHTML = resp.data;
+        }
+        performSearch = performSearch.bind(this);
+
+        // Searchbox enter press
+        searchBox.addEventListener('keypress', event => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                performSearch();
+            }
+        });
+
+        // Submit button press
+        submitButton.addEventListener('click', event => {
+            performSearch();
+        });
+
+        // Cancel button press
+        cancelButton.addEventListener('click', event => {
+            input.value = '';
+            performSearch();
+        });
+    }
+}
+
+export default TemplateManager;

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

@@ -378,6 +378,27 @@ function customHrPlugin() {
 }
 
 
+function listenForBookStackEditorEvents(editor) {
+
+    // Replace editor content
+    window.$events.listen('editor::replace', ({html}) => {
+        editor.setContent(html);
+    });
+
+    // Append editor content
+    window.$events.listen('editor::append', ({html}) => {
+        const content = editor.getContent() + html;
+        editor.setContent(content);
+    });
+
+    // Prepend editor content
+    window.$events.listen('editor::prepend', ({html}) => {
+        const content = html + editor.getContent();
+        editor.setContent(content);
+    });
+
+}
+
 class WysiwygEditor {
 
     constructor(elem) {
@@ -536,6 +557,7 @@ class WysiwygEditor {
                 });
 
                 function editorChange() {
+                    console.log('CHANGE');
                     let content = editor.getContent();
                     window.$events.emit('editor-html-change', content);
                 }
@@ -553,6 +575,10 @@ class WysiwygEditor {
                     editor.focus();
                 }
 
+                listenForBookStackEditorEvents(editor);
+
+                // TODO - Update to standardise across both editors
+                // Use events within listenForBookStackEditorEvents instead (Different event signature)
                 window.$events.listen('editor-html-update', html => {
                     editor.setContent(html);
                     editor.selection.select(editor.getBody(), true);

resources/assets/sass/_blocks.scss

@@ -83,6 +83,10 @@
   line-height: 1;
 }
 
+.card.border-card {
+  border: 1px solid #DDD;
+}
+
 .card.drag-card {
   border: 1px solid #DDD;
   border-radius: 4px;

resources/assets/sass/_components.scss

@@ -655,4 +655,32 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 .permissions-table tr:hover [permissions-table-toggle-all-in-row] {
   display: inline;
+}
+
+.template-item {
+  cursor: pointer;
+  position: relative;
+  &:hover, .template-item-actions button:hover {
+    background-color: #F2F2F2;
+  }
+  .template-item-actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #DDD;
+  }
+  .template-item-actions button {
+    cursor: pointer;
+    flex: 1;
+    background: #FFF;
+    border: 0;
+    border-top: 1px solid #DDD;
+  }
+  .template-item-actions button:first-child {
+    border-top: 0;
+  }
 }

resources/lang/en/entities.php

@@ -273,6 +273,9 @@ return [
     'templates' => 'Templates',
     'templates_set_as_template' => 'Page is a template',
     'templates_explain_set_as_template' => 'You can set this page as a template so its contents be utilized when creating other pages. Other users will be able to use this template if they have view permissions for this page.',
+    'templates_replace_content' => 'Replace page content',
+    'templates_append_content' => 'Append to page content',
+    'templates_prepend_content' => 'Prepend to page content',
 
     // Profile View
     'profile_user_for_x' => 'User for :time',

resources/views/pages/editor-toolbox.blade.php

@@ -24,10 +24,9 @@
         <h4>{{ trans('entities.templates') }}</h4>
 
         <div class="px-l">
-            @include('pages.templates-manager', ['page' => $page])
+            @include('pages.template-manager', ['page' => $page, 'templates' => $templates])
         </div>
 
-
     </div>
 
 </div>

resources/views/pages/template-manager-list.blade.php

@@ -0,0 +1,20 @@
+{{ $templates->links() }}
+
+@foreach($templates as $template)
+    <div class="card template-item border-card p-m mb-m" draggable="true" template-id="{{ $template->id }}">
+        <div class="template-item-content" title="{{ trans('entities.templates_replace_content') }}">
+            <div>{{ $template->name }}</div>
+            <div class="text-muted">{{ trans('entities.meta_updated', ['timeLength' => $template->updated_at->diffForHumans()]) }}</div>
+        </div>
+        <div class="template-item-actions">
+            <button type="button"
+                    title="{{ trans('entities.templates_prepend_content') }}"
+                    template-action="prepend">@icon('chevron-up')</button>
+            <button type="button"
+                    title="{{ trans('entities.templates_append_content') }}"
+                    template-action="append">@icon('chevron-down')</button>
+        </div>
+    </div>
+@endforeach
+
+{{ $templates->links() }}

resources/views/pages/template-manager.blade.php

@@ -0,0 +1,25 @@
+<div template-manager>
+    @if(userCan('templates-manage'))
+        <p class="text-muted small mb-none">
+            {{ trans('entities.templates_explain_set_as_template') }}
+        </p>
+        @include('components.toggle-switch', [
+               'name' => 'template',
+               'value' => old('template', $page->template ? 'true' : 'false') === 'true',
+               'label' => trans('entities.templates_set_as_template')
+        ])
+        <hr>
+    @endif
+
+    @if(count($templates) > 0)
+        <div class="search-box flexible mb-m">
+            <input type="text" name="template-search" placeholder="{{ trans('common.search') }}">
+            <button type="button">@icon('search')</button>
+            <button class="search-box-cancel text-neg hidden" type="button">@icon('close')</button>
+        </div>
+    @endif
+
+    <div template-manager-list>
+        @include('pages.template-manager-list', ['templates' => $templates])
+    </div>
+</div>

resources/views/pages/templates-manager.blade.php

@@ -1,11 +0,0 @@
-@if(userCan('templates-manage'))
-    <p class="text-muted small mb-none">
-        {{ trans('entities.templates_explain_set_as_template') }}
-    </p>
-    @include('components.toggle-switch', [
-           'name' => 'template',
-           'value' => old('template', $page->template ? 'true' : 'false') === 'true',
-           'label' => trans('entities.templates_set_as_template')
-    ])
-    <hr>
-@endif

routes/web.php

@@ -158,6 +158,9 @@ Route::group(['middleware' => 'auth'], function () {
     Route::get('/search/chapter/{bookId}', 'SearchController@searchChapter');
     Route::get('/search/entity/siblings', 'SearchController@searchSiblings');
 
+    Route::get('/templates', 'PageTemplateController@list');
+    Route::get('/templates/{templateId}', 'PageTemplateController@get');
+
     // Other Pages
     Route::get('/', 'HomeController@index');
     Route::get('/home', 'HomeController@index');

tests/Entity/PageTemplateTest.php

@@ -47,4 +47,44 @@ class PageTemplateTest extends TestCase
         ]);
     }
 
+    public function test_templates_content_should_be_fetchable_only_if_page_marked_as_template()
+    {
+        $content = '<div>my_custom_template_content</div>';
+        $page = Page::first();
+        $editor = $this->getEditor();
+        $this->actingAs($editor);
+
+        $templateFetch = $this->get('/templates/' . $page->id);
+        $templateFetch->assertStatus(404);
+
+        $page->html = $content;
+        $page->template = true;
+        $page->save();
+
+        $templateFetch = $this->get('/templates/' . $page->id);
+        $templateFetch->assertStatus(200);
+        $templateFetch->assertJson([
+            'html' => $content,
+            'markdown' => '',
+        ]);
+    }
+
+    public function test_template_endpoint_returns_paginated_list_of_templates()
+    {
+        $editor = $this->getEditor();
+        $this->actingAs($editor);
+
+        $toBeTemplates = Page::query()->take(12)->get();
+        $page = $toBeTemplates->first();
+
+        $emptyTemplatesFetch = $this->get('/templates');
+        $emptyTemplatesFetch->assertDontSee($page->name);
+
+        Page::query()->whereIn('id', $toBeTemplates->pluck('id')->toArray())->update(['template' => true]);
+
+        $templatesFetch = $this->get('/templates');
+        $templatesFetch->assertSee($page->name);
+        $templatesFetch->assertSee('pagination');
+    }
+
 }