Comments: Added input wysiwyg for creating/updating comments

[bookstack] / resources / sass / _tinymce.scss

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index def1dfe19b216a1a01d4bcc59dd93067765a715c..fb5ea7e6ffe7fcabab90b0bc1f4485119ee2bc60 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -9,6 +9,12 @@
   z-index: 100;
 }
 
+// Editor wrapper edits
+.tox.tox-tinymce {
+  border-inline: 0;
+  border-bottom: 0;
+}
+
 // In editor body overrides
 .page-content.mce-content-body {
   padding-block-start: 1rem;
@@ -17,6 +23,20 @@
   display: block;
 }
 
+.wysiwyg-input.mce-content-body {
+  padding-block-start: 1rem;
+  padding-block-end: 1rem;
+  outline: 0;
+  display: block;
+}
+
+.wysiwyg-input.mce-content-body:before {
+  padding: 1rem;
+  top: 4px;
+  font-style: italic;
+  color: rgba(34,47,62,.5)
+}
+
 // Default styles for our custom root nodes
 .page-content.mce-content-body doc-root {
   display: block;
@@ -66,6 +86,30 @@ body.page-content.mce-content-body  {
   overflow: hidden;
 }
 
+// Allow alignment to be reflected in media embed wrappers
+.page-content.mce-content-body .mce-preview-object.align-right {
+  float: right !important;
+  margin: $-xs 0 $-xs $-s;
+}
+
+.page-content.mce-content-body .mce-preview-object.align-left {
+  float: left !important;
+  margin: $-xs $-m $-m 0;
+}
+
+.page-content.mce-content-body .mce-preview-object.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.page-content.mce-content-body .mce-preview-object iframe,
+.page-content.mce-content-body .mce-preview-object video {
+  display: block;
+  margin: 0 !important;
+  float: none !important;
+}
+
 /**
  * Dark Mode Overrides
  */
@@ -76,7 +120,7 @@ body.page-content.mce-content-body  {
 .dark-mode .tox .tox-dialog__footer,
 .dark-mode .tox .tox-pop__dialog,
 .dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow {
-    background-color: #333;
+    background-color: #333 !important;
 }
 .dark-mode .tox .tox-tbtn svg,
 .dark-mode .tox .tox-tbtn,
@@ -110,7 +154,7 @@ body.page-content.mce-content-body  {
   border-left: 3px solid currentColor !important;
 }
 .tox-menu .tox-collection__item[title^="<"] > div > div {
-  font-family: $mono !important;
+  font-family: var(--font-code) !important;
   border: 1px solid #DDD !important;
   background-color: #EEE !important;
   padding: 4px 6px !important;