diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/EditorWrapper.vue | 71 | ||||
-rw-r--r-- | src/components/MenuBar.vue | 10 |
2 files changed, 75 insertions, 6 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index e3395fb14..f1ab885ff 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -35,7 +35,8 @@ <MenuBar v-if="!syncError && !readOnly" ref="menubar" :editor="tiptap" - :is-rich-editor="isRichEditor"> + :is-rich-editor="isRichEditor" + :autohide="autohide"> <div v-if="currentSession && active" id="editor-session-list"> <div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass"> {{ lastSavedStatus }} @@ -119,8 +120,12 @@ export default { }, mime: { type: String, - default: null - } + default: null, + }, + autohide: { + type: Boolean, + default: false, + }, }, data() { return { @@ -569,5 +574,65 @@ export default { #editor-wrapper { @import './../../css/prosemirror'; + + &:not(.richEditor) .ProseMirror { + pre { + background-color: var(--color-main-background); + + &::before { + content: attr(data-language); + text-transform: uppercase; + display: block; + text-align: right; + font-weight: bold; + font-size: 0.6rem; + } + code { + .hljs-comment, + .hljs-quote { + color: #999999; + } + .hljs-variable, + .hljs-template-variable, + .hljs-attribute, + .hljs-tag, + .hljs-name, + .hljs-regexp, + .hljs-link, + .hljs-selector-id, + .hljs-selector-class { + color: #f2777a; + } + .hljs-number, + .hljs-meta, + .hljs-built_in, + .hljs-builtin-name, + .hljs-literal, + .hljs-type, + .hljs-params { + color: #f99157; + } + .hljs-string, + .hljs-symbol, + .hljs-bullet { + color: #99cc99; + } + .hljs-title, + .hljs-section { + color: #ffcc66; + } + .hljs-keyword, + .hljs-selector-tag { + color: #6699cc; + } + .hljs-emphasis { + font-style: italic; + } + .hljs-strong { + font-weight: 700; + } + } + } + } } </style> diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue index d8df94393..b848988e0 100644 --- a/src/components/MenuBar.vue +++ b/src/components/MenuBar.vue @@ -22,7 +22,7 @@ <template> <EditorMenuBar v-slot="{ commands, isActive, focused }" :editor="editor"> - <div class="menubar autohide" :class="{ 'is-focused': focused }"> + <div class="menubar" :class="{ 'is-focused': focused, 'autohide': autohide }"> <div v-if="isRichEditor" ref="menubar" class="menubar-icons"> <template v-for="(icon, $index) in allIcons"> <button v-if="icon.class" @@ -102,8 +102,12 @@ export default { }, isRichEditor: { type: Boolean, - default: true - } + default: true, + }, + autohide: { + type: Boolean, + default: false, + }, }, data: () => { return { |