Updated wysiwyg with dark mode patches

- To better fit in with default BookStack dark theme.

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 2c9fb0553971d49eae1c1dae55c83f405133cfa3..1a38c1f597591e72674d260fec06a93b4906cc3e 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -237,14 +237,13 @@ export function build(options) {
         file_picker_types: 'file image',
         file_picker_callback,
         paste_preprocess(plugin, args) {
         file_picker_types: 'file image',
         file_picker_callback,
         paste_preprocess(plugin, args) {

-            let content = args.content;
+            const content = args.content;

             if (content.indexOf('<img src="file://') !== -1) {
                 args.content = '';
             }
         },
         init_instance_callback(editor) {
             if (content.indexOf('<img src="file://') !== -1) {
                 args.content = '';
             }
         },
         init_instance_callback(editor) {

-            let head = editor.getDoc().querySelector('head');
-            console.log(fetchCustomHeadContent());
+            const head = editor.getDoc().querySelector('head');

             head.innerHTML += fetchCustomHeadContent();
         },
         setup(editor) {
             head.innerHTML += fetchCustomHeadContent();
         },
         setup(editor) {

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index d64e0e63d0cfb2668010f9610ffdc236d6bad20d..f98de06a0024d3a948d31f92c347b2acf8556f26 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -1,4 +1,5 @@
 
 

+// Custom full screen mode

 .tox.tox-fullscreen {
   position: fixed;
   top: 0;
 .tox.tox-fullscreen {
   position: fixed;
   top: 0;


@@ -8,6 +9,7 @@
   z-index: 100;
 }
 
   z-index: 100;
 }
 

+// In editor body overrides

 .page-content.mce-content-body {
   padding-block-start: 1rem;
   padding-block-end: 1rem;
 .page-content.mce-content-body {
   padding-block-start: 1rem;
   padding-block-end: 1rem;


@@ -15,18 +17,44 @@
   display: block;
 }
 
   display: block;
 }
 

+// In editor line height override

 .page-content.mce-content-body p {
   line-height: 1.6;
 }
 
 .page-content.mce-content-body p {
   line-height: 1.6;
 }
 

+// Pad out bottom of editor

 .page-content.mce-content-body > :last-child {
   margin-bottom: 5rem;
 }
 
 .page-content.mce-content-body > :last-child {
   margin-bottom: 5rem;
 }
 

+// Center toolbar items

 .tox-toolbar__primary {
   justify-content: center;
 }
 
 .tox-toolbar__primary {
   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
  */

diff --git a/resources/views/help/wysiwyg.blade.php b/resources/views/help/wysiwyg.blade.php
index 8d6b0b8e7eff1d267ca0c4c5c233eec35acf8081..932e37d2e2318082703d3b2af9f1b3cd36fc5b31 100644 (file)
--- a/resources/views/help/wysiwyg.blade.php
+++ b/resources/views/help/wysiwyg.blade.php
@@ -1,4 +1,5 @@
 @extends('layouts.plain')
 @extends('layouts.plain')

+@section('document-class', setting()->getForCurrentUser('dark-mode-enabled') ? 'dark-mode ' : '')

 
 @section('content')
     <div class="px-l pb-m m-s card">
 
 @section('content')
     <div class="px-l pb-m m-s card">

diff --git a/resources/views/layouts/plain.blade.php b/resources/views/layouts/plain.blade.php
index 588bf5b7cf3ae50529104823c9034761bbbb6d65..043d8aa4824e2186346abefb27ef45bd57625f9b 100644 (file)
--- a/resources/views/layouts/plain.blade.php
+++ b/resources/views/layouts/plain.blade.php
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ config('app.lang') }}"
 <!DOCTYPE html>
 <html lang="{{ config('app.lang') }}"

-      dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}">
+      dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"
+      class="@yield('document-class')">

 <head>
     <title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title>
 
 <head>
     <title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title>