BookStack/resources/sass/_codemirror.scss

/**
 * Custom CodeMirror BookStack overrides
 */

.cm-editor {
  font-size: 12px;
  border: 1px solid #ddd;
  line-height: 1.4;
  margin-bottom: $-l;
}

.page-content .cm-editor,
.CodeMirrorContainer .cm-editor {
  border-radius: 4px;
}

.cm-editor .cm-line, .cm-editor .cm-gutter {
  font-family: var(--font-code);
}

// Manual dark-mode definition so that it applies to code blocks within the shadow
// dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
// <html> node are not applies so instead we have the class on the parent element.
.dark-mode .cm-editor {
  border-color: #444;
}

/**
 * Custom Copy Button
 */
.cm-copy-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -1px;
  inset-inline-end: -1px;
  background-color: #EEE;
  border: 1px solid #DDD;
  border-start-end-radius: 4px;
  @include lightDark(background-color, #eee, #333);
  @include lightDark(border-color, #ddd, #444);
  @include lightDark(color, #444, #888);
  line-height: 0;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  width: 32px;
  height: 32px;
  transition: background-color linear 60ms, color linear 60ms;
  svg {
    fill: currentColor;
  }
  &.success {
    background: var(--color-positive);
    color: #FFF;
  }
  &:focus {
    outline: 0 !important;
  }
}
.cm-editor:hover .cm-copy-button  {
  user-select: all;
  opacity: .6;
  pointer-events: all;
}
Started work on supporting a dark-mode - Most elements done, but still need to do editors, tables and final pass. - Toggled only by quick js check at the moment, checking via css media query. Need to make into user-preference toggle. For #1234 2020-04-10 17:38:29 -04:00			`/**`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`* Custom CodeMirror BookStack overrides`
Started work on supporting a dark-mode - Most elements done, but still need to do editors, tables and final pass. - Toggled only by quick js check at the moment, checking via css media query. Need to make into user-preference toggle. For #1234 2020-04-10 17:38:29 -04:00			`*/`

CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`.cm-editor {`
Moved from highlight.js to codemirror 2017-05-28 08:16:21 -04:00			`font-size: 12px;`
CM6: Added tabbing, fixed dark mode border in WYSIWYG 2023-04-18 08:41:28 -04:00			`border: 1px solid #ddd;`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`line-height: 1.4;`
CM6: Further fixes/improvements after testing - Updated event naming to be "cm6" when codemirror-specific. - Removed cm block border in md editor to prevent double bordering. - Updated copy handling to fallback to execCommand. 2023-04-18 10:08:17 -04:00			`margin-bottom: $-l;`
CM6: Fixed a range of issues during browser testing - Fixed some keybindings not running as expected, due to some editor defaults overriding or further actions taking place since the action would not indicate it's been dealt with (by returning boolean). - Fixed spacing/border-radius being used on codeblocks on non-intended areas like the MD editor. - Fixed lack of BG on default light theme, visible on full screen md editor. - Fixed error thrown when the user does not have access to change the current editor (Likely non-cm related existing issue) 2023-04-18 09:21:22 -04:00			`}`

			`.page-content .cm-editor,`
			`.CodeMirrorContainer .cm-editor {`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`border-radius: 4px;`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`}`

Updated fonts to be defined via CSS variables Exports system remains separate due to lacking css variable support. 2023-06-14 07:53:48 -04:00			`.cm-editor .cm-line, .cm-editor .cm-gutter {`
			`font-family: var(--font-code);`
			`}`

CM6: Added tabbing, fixed dark mode border in WYSIWYG 2023-04-18 08:41:28 -04:00			`// Manual dark-mode definition so that it applies to code blocks within the shadow`
			`// dom which are used within the WYSIWYG editor, as the .dark-mode on the parent`
			`// <html> node are not applies so instead we have the class on the parent element.`
			`.dark-mode .cm-editor {`
			`border-color: #444;`
			`}`

Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`/**`
			`* Custom Copy Button`
			`*/`
Addressed existing cm6 todos - Updated clipboard handling - Removed old clipboard package for browser-native API. - Updated codemirror editor events to use new props for new data types. 2023-04-14 09:08:40 -04:00			`.cm-copy-button {`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`position: absolute;`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`display: flex;`
			`align-items: center;`
			`justify-content: center;`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`top: -1px;`
WYSIWYG: Updated code handling to respect direction Specifically supports "dir" attribute being on top level "pre" element, and handles application/switching of this within the editor. For #4809 2024-02-18 12:55:56 -05:00			`inset-inline-end: -1px;`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`background-color: #EEE;`
Started work on supporting a dark-mode - Most elements done, but still need to do editors, tables and final pass. - Toggled only by quick js check at the moment, checking via css media query. Need to make into user-preference toggle. For #1234 2020-04-10 17:38:29 -04:00			`border: 1px solid #DDD;`
WYSIWYG: Updated code handling to respect direction Specifically supports "dir" attribute being on top level "pre" element, and handles application/switching of this within the editor. For #4809 2024-02-18 12:55:56 -05:00			`border-start-end-radius: 4px;`
Started work on supporting a dark-mode - Most elements done, but still need to do editors, tables and final pass. - Toggled only by quick js check at the moment, checking via css media query. Need to make into user-preference toggle. For #1234 2020-04-10 17:38:29 -04:00			`@include lightDark(background-color, #eee, #333);`
			`@include lightDark(border-color, #ddd, #444);`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`@include lightDark(color, #444, #888);`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`line-height: 0;`
			`cursor: pointer;`
			`z-index: 5;`
			`user-select: none;`
Only show codeblock copy icon on hover Fixes #980 2018-09-22 09:55:33 -04:00			`opacity: 0;`
			`pointer-events: none;`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`width: 32px;`
			`height: 32px;`
			`transition: background-color linear 60ms, color linear 60ms;`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`svg {`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`fill: currentColor;`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`}`
			`&.success {`
CSS: Updated status colors to be CSS variables, Added dark variants Needed some level of harcoding though due to callouts using colors, which can't be css colors as DOMPDF won't understand these. Use css variables elsewhere and added new dark variants to fit a bit better. 2023-06-13 10:52:33 -04:00			`background: var(--color-positive);`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`color: #FFF;`
			`}`
			`&:focus {`
			`outline: 0 !important;`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`}`
			`}`
Addressed existing cm6 todos - Updated clipboard handling - Removed old clipboard package for browser-native API. - Updated codemirror editor events to use new props for new data types. 2023-04-14 09:08:40 -04:00			`.cm-editor:hover .cm-copy-button {`
Added copy button to codemirror-rendered code blocks Closes #858 2018-06-09 05:41:01 -04:00			`user-select: all;`
CM6: Aligned styling with existing, improved theme handling 2023-04-16 11:05:16 -04:00			`opacity: .6;`
Only show codeblock copy icon on hover Fixes #980 2018-09-22 09:55:33 -04:00			`pointer-events: all;`
Updated the markdown editor to use codemirror as editor Improved scroll sync system to be smarter 2017-05-28 11:02:46 -04:00			`}`