webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Added md editor ui dropdown options & their back-end storage

Browse Source 
Still need to perform actual in-editor functionality for those controls.
This commit is contained in:
Dan Brown
2022-11-27 20:30:14 +00:00
parent 3995b01399
commit 9fd5190c70
6 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/components/markdown-editor.js
View File

@ -14,6 +14,7 @@ export class MarkdownEditor extends Component {
this.display = this.$refs.display;
this.input = this.$refs.input;
this.settingContainer = this.$refs.settingContainer;
this.editor = null;
initEditor({
@ -74,6 +75,15 @@ export class MarkdownEditor extends Component {
toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
});
// Setting changes
this.settingContainer.addEventListener('change', e => {
const actualInput = e.target.parentNode.querySelector('input[type="hidden"]');
const name = actualInput.getAttribute('name');
const value = actualInput.getAttribute('value');
window.$http.patch('/preferences/update-boolean', {name, value});
// TODO - Update state locally
});
// Refresh CodeMirror on container resize
const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
const observer = new ResizeObserver(resizeDebounced);

10
resources/sass/_forms.scss
View File

@ -157,6 +157,16 @@ html.markdown-editor-display.dark-mode {
}
}
.editor-toolbar .buttons {
font-size: $fs-m;
.dropdown-menu {
padding: 0;
}
.toggle-switch {
margin: $-s 0;
}
}
.editor-toolbar .buttons button {
font-size: .9rem;
width: 2rem;

12
resources/views/pages/parts/markdown-editor.blade.php
View File

@ -10,13 +10,23 @@
<div class="editor-toolbar-label text-mono px-m py-xs flex-container-row items-center flex">
<span>{{ trans('entities.pages_md_editor') }}</span>
</div>
<div class="buttons flex-container-row items-stretch">
<div component="dropdown" class="buttons flex-container-row items-stretch">
@if(config('services.drawio'))
<button class="text-button" type="button" data-action="insertDrawing" title="{{ trans('entities.pages_md_insert_drawing') }}">@icon('drawing')</button>
@endif
<button class="text-button" type="button" data-action="insertImage" title="{{ trans('entities.pages_md_insert_image') }}">@icon('image')</button>
<button class="text-button" type="button" data-action="insertLink" title="{{ trans('entities.pages_md_insert_link') }}">@icon('link')</button>
<button class="text-button" type="button" data-action="fullscreen" title="{{ trans('common.fullscreen') }}">@icon('fullscreen')</button>
<button refs="dropdown@toggle" class="text-button" type="button" title="{{ trans('common.more') }}">@icon('more')</button>
<div refs="dropdown@menu markdown-editor@setting-container" class="dropdown-menu" role="menu">
<div class="px-m">
@include('form.toggle-switch', ['name' => 'md-show-preview', 'label' => 'Show preview', 'value' => setting()->getForCurrentUser('md-show-preview')])
</div>
<hr class="m-none">
<div class="px-m">
@include('form.toggle-switch', ['name' => 'md-scroll-sync', 'label' => 'Sync preview scroll', 'value' => setting()->getForCurrentUser('md-scroll-sync')])
</div>
</div>
</div>
</div>