Updated wysiwyg with dark mode patches

- To better fit in with default BookStack dark theme.
This commit is contained in:
Dan Brown 2022-02-08 10:09:17 +00:00
parent 572d8b3700
commit 130dc05517
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 33 additions and 4 deletions

View File

@ -237,14 +237,13 @@ export function build(options) {
file_picker_types: 'file image', file_picker_types: 'file image',
file_picker_callback, file_picker_callback,
paste_preprocess(plugin, args) { paste_preprocess(plugin, args) {
let content = args.content; const content = args.content;
if (content.indexOf('<img src="file://') !== -1) { if (content.indexOf('<img src="file://') !== -1) {
args.content = ''; args.content = '';
} }
}, },
init_instance_callback(editor) { init_instance_callback(editor) {
let head = editor.getDoc().querySelector('head'); const head = editor.getDoc().querySelector('head');
console.log(fetchCustomHeadContent());
head.innerHTML += fetchCustomHeadContent(); head.innerHTML += fetchCustomHeadContent();
}, },
setup(editor) { setup(editor) {

View File

@ -1,4 +1,5 @@
// Custom full screen mode
.tox.tox-fullscreen { .tox.tox-fullscreen {
position: fixed; position: fixed;
top: 0; top: 0;
@ -8,6 +9,7 @@
z-index: 100; z-index: 100;
} }
// In editor body overrides
.page-content.mce-content-body { .page-content.mce-content-body {
padding-block-start: 1rem; padding-block-start: 1rem;
padding-block-end: 1rem; padding-block-end: 1rem;
@ -15,18 +17,44 @@
display: block; display: block;
} }
// In editor line height override
.page-content.mce-content-body p { .page-content.mce-content-body p {
line-height: 1.6; line-height: 1.6;
} }
// Pad out bottom of editor
.page-content.mce-content-body > :last-child { .page-content.mce-content-body > :last-child {
margin-bottom: 5rem; margin-bottom: 5rem;
} }
// Center toolbar items
.tox-toolbar__primary { .tox-toolbar__primary {
justify-content: center; justify-content: center;
} }
/**
* Dark Mode Overrides
*/
.dark-mode .tox .tox-toolbar__primary,
.dark-mode .tox .tox-menu,
.dark-mode .tox .tox-dialog__header,
.dark-mode .tox .tox-dialog,
.dark-mode .tox .tox-dialog__footer,
.dark-mode .tox .tox-pop__dialog,
.dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow {
background-color: #333;
}
.dark-mode .tox .tox-tbtn svg,
.dark-mode .tox .tox-tbtn,
.dark-mode .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled)
{
color: #dbdbdb;
fill: #dbdbdb;
}
/** /**
* Format Menu Hacks * Format Menu Hacks
*/ */

View File

@ -1,4 +1,5 @@
@extends('layouts.plain') @extends('layouts.plain')
@section('document-class', setting()->getForCurrentUser('dark-mode-enabled') ? 'dark-mode ' : '')
@section('content') @section('content')
<div class="px-l pb-m m-s card"> <div class="px-l pb-m m-s card">

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ config('app.lang') }}" <html lang="{{ config('app.lang') }}"
dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"> dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"
class="@yield('document-class')">
<head> <head>
<title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title> <title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title>