mirror of
https://github.com/go-vikunja/vikunja.git
synced 2026-02-01 22:47:40 +00:00
1010 lines
20 KiB
Vue
1010 lines
20 KiB
Vue
<template>
|
|
<div
|
|
ref="tiptapInstanceRef"
|
|
class="tiptap"
|
|
>
|
|
<EditorToolbar
|
|
v-if="editor && isEditing"
|
|
:editor="editor"
|
|
@imageUploadClicked="triggerImageInput"
|
|
/>
|
|
<BubbleMenu
|
|
v-if="editor && isEditing"
|
|
:editor="editor"
|
|
class="editor-bubble__wrapper"
|
|
>
|
|
<BaseButton
|
|
v-tooltip="$t('input.editor.bold')"
|
|
class="editor-bubble__button"
|
|
:class="{ 'is-active': editor.isActive('bold') }"
|
|
@click="() => editor?.chain().focus().toggleBold().run()"
|
|
>
|
|
<Icon :icon="['fa', 'fa-bold']" />
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-tooltip="$t('input.editor.italic')"
|
|
class="editor-bubble__button"
|
|
:class="{ 'is-active': editor.isActive('italic') }"
|
|
@click="() => editor?.chain().focus().toggleItalic().run()"
|
|
>
|
|
<Icon :icon="['fa', 'fa-italic']" />
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-tooltip="$t('input.editor.underline')"
|
|
class="editor-bubble__button"
|
|
:class="{ 'is-active': editor.isActive('underline') }"
|
|
@click="() => editor?.chain().focus().toggleUnderline().run()"
|
|
>
|
|
<Icon :icon="['fa', 'fa-underline']" />
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-tooltip="$t('input.editor.strikethrough')"
|
|
class="editor-bubble__button"
|
|
:class="{ 'is-active': editor.isActive('strike') }"
|
|
@click="() => editor?.chain().focus().toggleStrike().run()"
|
|
>
|
|
<Icon :icon="['fa', 'fa-strikethrough']" />
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-tooltip="$t('input.editor.code')"
|
|
class="editor-bubble__button"
|
|
:class="{ 'is-active': editor.isActive('code') }"
|
|
@click="() => editor?.chain().focus().toggleCode().run()"
|
|
>
|
|
<Icon :icon="['fa', 'fa-code']" />
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-tooltip="$t('input.editor.link')"
|
|
class="editor-bubble__button"
|
|
:class="{ 'is-active': editor.isActive('link') }"
|
|
@click="setLink"
|
|
>
|
|
<Icon :icon="['fa', 'fa-link']" />
|
|
</BaseButton>
|
|
</BubbleMenu>
|
|
|
|
<EditorContent
|
|
class="tiptap__editor"
|
|
:class="{'tiptap__editor-is-edit-enabled': isEditing}"
|
|
:editor="editor"
|
|
@dblclick="setEditIfApplicable()"
|
|
@click="focusIfEditing()"
|
|
/>
|
|
|
|
<input
|
|
v-if="isEditing"
|
|
id="tiptap__image-upload"
|
|
ref="uploadInputRef"
|
|
type="file"
|
|
class="is-hidden"
|
|
@change="addImage"
|
|
>
|
|
|
|
<ul
|
|
v-if="bottomActions.length === 0 && !isEditing && isEditEnabled"
|
|
class="tiptap__editor-actions d-print-none"
|
|
>
|
|
<li>
|
|
<BaseButton
|
|
class="done-edit"
|
|
@click="() => setEdit()"
|
|
>
|
|
{{ $t('input.editor.edit') }}
|
|
</BaseButton>
|
|
</li>
|
|
</ul>
|
|
<ul
|
|
v-if="bottomActions.length > 0"
|
|
class="tiptap__editor-actions d-print-none"
|
|
>
|
|
<li v-if="isEditing && showSave">
|
|
<BaseButton
|
|
class="done-edit"
|
|
@click="bubbleSave"
|
|
>
|
|
{{ $t('misc.save') }}
|
|
</BaseButton>
|
|
</li>
|
|
<li v-if="!isEditing">
|
|
<BaseButton
|
|
class="done-edit"
|
|
@click="() => setEdit()"
|
|
>
|
|
{{ $t('input.editor.edit') }}
|
|
</BaseButton>
|
|
</li>
|
|
<li
|
|
v-for="(action, k) in bottomActions"
|
|
:key="k"
|
|
>
|
|
<BaseButton @click="action.action">
|
|
{{ action.title }}
|
|
</BaseButton>
|
|
</li>
|
|
</ul>
|
|
<XButton
|
|
v-else-if="isEditing && showSave"
|
|
v-cy="'saveEditor'"
|
|
class="mt-4"
|
|
variant="secondary"
|
|
:shadow="false"
|
|
:disabled="!contentHasChanged"
|
|
@click="bubbleSave"
|
|
>
|
|
{{ $t('misc.save') }}
|
|
</XButton>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
|
|
import {useI18n} from 'vue-i18n'
|
|
import {eventToHotkeyString} from '@github/hotkey'
|
|
|
|
import EditorToolbar from './EditorToolbar.vue'
|
|
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import {Extension, mergeAttributes} from '@tiptap/core'
|
|
import {BubbleMenu, EditorContent, type Extensions, useEditor} from '@tiptap/vue-3'
|
|
import {Plugin, PluginKey} from '@tiptap/pm/state'
|
|
import {marked} from 'marked'
|
|
|
|
import Link from '@tiptap/extension-link'
|
|
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
|
import Table from '@tiptap/extension-table'
|
|
import TableCell from '@tiptap/extension-table-cell'
|
|
import TableHeader from '@tiptap/extension-table-header'
|
|
import TableRow from '@tiptap/extension-table-row'
|
|
import Typography from '@tiptap/extension-typography'
|
|
import Image from '@tiptap/extension-image'
|
|
import Underline from '@tiptap/extension-underline'
|
|
import {Placeholder} from '@tiptap/extension-placeholder'
|
|
|
|
import TaskItem from '@tiptap/extension-task-item'
|
|
import TaskList from '@tiptap/extension-task-list'
|
|
import HardBreak from '@tiptap/extension-hard-break'
|
|
|
|
import {Node} from '@tiptap/pm/model'
|
|
|
|
import Commands from './commands'
|
|
import suggestionSetup from './suggestion'
|
|
|
|
import {common, createLowlight} from 'lowlight'
|
|
|
|
import type {BottomAction, UploadCallback} from './types'
|
|
import type {ITask} from '@/modelTypes/ITask'
|
|
import type {IAttachment} from '@/modelTypes/IAttachment'
|
|
import AttachmentModel from '@/models/attachment'
|
|
import AttachmentService from '@/services/attachment'
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
|
import XButton from '@/components/input/Button.vue'
|
|
|
|
import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
|
|
import inputPrompt from '@/helpers/inputPrompt'
|
|
import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
modelValue: string,
|
|
uploadCallback?: UploadCallback,
|
|
isEditEnabled?: boolean,
|
|
bottomActions?: BottomAction[],
|
|
showSave?: boolean,
|
|
placeholder?: string,
|
|
editShortcut?: string,
|
|
enableDiscardShortcut?: boolean,
|
|
}>(), {
|
|
uploadCallback: undefined,
|
|
isEditEnabled: true,
|
|
bottomActions: () => [],
|
|
showSave: false,
|
|
placeholder: '',
|
|
editShortcut: '',
|
|
enableDiscardShortcut: false,
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'save'])
|
|
|
|
const tiptapInstanceRef = ref<HTMLInputElement | null>(null)
|
|
|
|
const {t} = useI18n()
|
|
|
|
const CustomTableCell = TableCell.extend({
|
|
addAttributes() {
|
|
return {
|
|
// extend the existing attributes …
|
|
...this.parent?.(),
|
|
|
|
// and add a new one …
|
|
backgroundColor: {
|
|
default: null,
|
|
parseHTML: (element: HTMLElement) => element.getAttribute('data-background-color'),
|
|
renderHTML: (attributes) => {
|
|
return {
|
|
'data-background-color': attributes.backgroundColor,
|
|
style: `background-color: ${attributes.backgroundColor}`,
|
|
}
|
|
},
|
|
},
|
|
}
|
|
},
|
|
})
|
|
|
|
type CacheKey = `${ITask['id']}-${IAttachment['id']}`
|
|
const loadedAttachments = ref<{
|
|
[key: CacheKey]: string
|
|
}>({})
|
|
|
|
const CustomImage = Image.extend({
|
|
addAttributes() {
|
|
return {
|
|
src: {
|
|
default: null,
|
|
},
|
|
alt: {
|
|
default: null,
|
|
},
|
|
title: {
|
|
default: null,
|
|
},
|
|
id: {
|
|
default: null,
|
|
},
|
|
'data-src': {
|
|
default: null,
|
|
},
|
|
}
|
|
},
|
|
renderHTML({HTMLAttributes}) {
|
|
if (HTMLAttributes.src?.startsWith(window.API_URL) || HTMLAttributes['data-src']?.startsWith(window.API_URL)) {
|
|
const imageUrl = HTMLAttributes['data-src'] ?? HTMLAttributes.src
|
|
|
|
// The url is something like /tasks/<id>/attachments/<id>
|
|
const parts = imageUrl.slice(window.API_URL.length + 1).split('/')
|
|
const taskId = Number(parts[1])
|
|
const attachmentId = Number(parts[3])
|
|
const cacheKey: CacheKey = `${taskId}-${attachmentId}`
|
|
const id = 'tiptap-image-' + cacheKey
|
|
|
|
nextTick(async () => {
|
|
|
|
const img = document.getElementById(id)
|
|
|
|
if (!img) return
|
|
|
|
if (typeof loadedAttachments.value[cacheKey] === 'undefined') {
|
|
|
|
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
|
|
|
|
const attachmentService = new AttachmentService()
|
|
loadedAttachments.value[cacheKey] = await attachmentService.getBlobUrl(attachment)
|
|
}
|
|
|
|
img.src = loadedAttachments.value[cacheKey]
|
|
})
|
|
|
|
return ['img', mergeAttributes(this.options.HTMLAttributes, {
|
|
'data-src': imageUrl,
|
|
src: '#',
|
|
alt: HTMLAttributes.alt,
|
|
title: HTMLAttributes.title,
|
|
id,
|
|
})]
|
|
}
|
|
|
|
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
|
|
},
|
|
})
|
|
|
|
type Mode = 'edit' | 'preview'
|
|
|
|
const internalMode = ref<Mode>('preview')
|
|
const isEditing = computed(() => internalMode.value === 'edit' && props.isEditEnabled)
|
|
const contentHasChanged = ref<boolean>(false)
|
|
|
|
// TipTap crashes when inserting an image into an empty editor.
|
|
// To work around this, we're inserting an element first, then insert the image, then remove the element.
|
|
const UPLOAD_PLACEHOLDER_ELEMENT = '<p>UPLOAD_PLACEHOLDER</p>'
|
|
|
|
let lastSavedState = ''
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(newValue) => {
|
|
if (!contentHasChanged.value) {
|
|
lastSavedState = newValue
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
watch(
|
|
() => internalMode.value,
|
|
mode => {
|
|
if (mode === 'preview') {
|
|
contentHasChanged.value = false
|
|
}
|
|
},
|
|
)
|
|
|
|
const additionalLinkProtocols = [
|
|
'ftp',
|
|
'git',
|
|
'obsidian',
|
|
'notion',
|
|
]
|
|
|
|
const PasteHandler = Extension.create({
|
|
name: 'pasteHandler',
|
|
|
|
addProseMirrorPlugins() {
|
|
return [
|
|
new Plugin({
|
|
key: new PluginKey('pasteHandler'),
|
|
props: {
|
|
handlePaste: (view, event) => {
|
|
|
|
// Handle images pasted from clipboard
|
|
if (typeof props.uploadCallback !== 'undefined' && event.clipboardData?.items?.length > 0) {
|
|
|
|
for (const item of event.clipboardData.items) {
|
|
console.log({item})
|
|
if (item.kind === 'file' && item.type.startsWith('image/')) {
|
|
const file = item.getAsFile()
|
|
if (file) {
|
|
uploadAndInsertFiles([file])
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle markdown text
|
|
const text = event.clipboardData?.getData('text/plain')
|
|
if (!text) return false
|
|
|
|
const html = marked.parse(text)
|
|
|
|
// It is fine to paste the content without sanitizing because it will be sanitized later by TipTap
|
|
this.editor.commands.insertContent(html)
|
|
// https://github.com/ueberdosis/tiptap/discussions/4118#discussioncomment-8931999
|
|
return true
|
|
},
|
|
},
|
|
}),
|
|
]
|
|
},
|
|
})
|
|
|
|
|
|
const extensions : Extensions = [
|
|
// Starterkit:
|
|
StarterKit.configure({
|
|
codeBlock: false,
|
|
hardBreak: false,
|
|
}),
|
|
|
|
CodeBlockLowlight.configure({
|
|
lowlight: createLowlight(common),
|
|
}),
|
|
HardBreak.extend({
|
|
addKeyboardShortcuts() {
|
|
return {
|
|
'Shift-Enter': () => this.editor.commands.setHardBreak(),
|
|
'Mod-Enter': () => {
|
|
if (contentHasChanged.value) {
|
|
bubbleSave()
|
|
}
|
|
return true
|
|
},
|
|
}
|
|
},
|
|
}),
|
|
|
|
Placeholder.configure({
|
|
placeholder: ({editor}) => {
|
|
if (!isEditing.value) {
|
|
return ''
|
|
}
|
|
|
|
if (editor.getText() !== '' && !editor.isFocused) {
|
|
return ''
|
|
}
|
|
|
|
return props.placeholder !== ''
|
|
? props.placeholder
|
|
: t('input.editor.placeholder')
|
|
},
|
|
}),
|
|
Typography,
|
|
Underline,
|
|
Link.configure({
|
|
openOnClick: false,
|
|
validate: (href: string) => (new RegExp(
|
|
`^(https?|${additionalLinkProtocols.join('|')}):\\/\\/`,
|
|
'i',
|
|
)).test(href),
|
|
protocols: additionalLinkProtocols,
|
|
}),
|
|
Table.configure({
|
|
resizable: true,
|
|
}),
|
|
TableRow,
|
|
TableHeader,
|
|
// Custom TableCell with backgroundColor attribute
|
|
CustomTableCell,
|
|
|
|
CustomImage,
|
|
|
|
TaskList,
|
|
TaskItem.configure({
|
|
nested: true,
|
|
onReadOnlyChecked: (node: Node, checked: boolean): boolean => {
|
|
if (!props.isEditEnabled) {
|
|
return false
|
|
}
|
|
|
|
// The following is a workaround for this bug:
|
|
// https://github.com/ueberdosis/tiptap/issues/4521
|
|
// https://github.com/ueberdosis/tiptap/issues/3676
|
|
|
|
let changed = false
|
|
|
|
editor.value!.state.doc.descendants((subnode, pos) => {
|
|
if (node.eq(subnode)) {
|
|
const {tr} = editor.value!.state
|
|
tr.setNodeMarkup(pos, undefined, {
|
|
...node.attrs,
|
|
checked,
|
|
})
|
|
|
|
editor.value!.view.dispatch(tr)
|
|
changed = true
|
|
}
|
|
})
|
|
|
|
if (changed) {
|
|
nextTick(bubbleSave)
|
|
}
|
|
|
|
return true
|
|
},
|
|
}),
|
|
|
|
Commands.configure({
|
|
suggestion: suggestionSetup(t),
|
|
}),
|
|
|
|
PasteHandler,
|
|
]
|
|
|
|
// Add a custom extension for the Escape key
|
|
if (props.enableDiscardShortcut) {
|
|
extensions.push(Extension.create({
|
|
name: 'escapeKey',
|
|
|
|
addKeyboardShortcuts() {
|
|
return {
|
|
'Escape': () => {
|
|
exitEditMode()
|
|
return true
|
|
},
|
|
}
|
|
},
|
|
}))
|
|
}
|
|
|
|
const editor = useEditor({
|
|
// eslint-disable-next-line vue/no-ref-object-reactivity-loss
|
|
editable: isEditing.value,
|
|
extensions: extensions,
|
|
onUpdate: () => {
|
|
bubbleNow()
|
|
},
|
|
})
|
|
|
|
watch(
|
|
() => isEditing.value,
|
|
() => {
|
|
editor.value?.setEditable(isEditing.value)
|
|
},
|
|
{immediate: true},
|
|
)
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
value => {
|
|
if (!editor?.value) return
|
|
|
|
if (editor.value.getHTML() === value) {
|
|
return
|
|
}
|
|
|
|
setModeAndValue(value)
|
|
},
|
|
{immediate: true},
|
|
)
|
|
|
|
function bubbleNow() {
|
|
if (editor.value?.getHTML() === props.modelValue ||
|
|
(editor.value?.getHTML() === '<p></p>') && props.modelValue === '') {
|
|
return
|
|
}
|
|
|
|
contentHasChanged.value = true
|
|
emit('update:modelValue', editor.value?.getHTML())
|
|
}
|
|
|
|
function bubbleSave() {
|
|
bubbleNow()
|
|
lastSavedState = editor.value?.getHTML() ?? ''
|
|
emit('save', lastSavedState)
|
|
if (isEditing.value) {
|
|
internalMode.value = 'preview'
|
|
}
|
|
}
|
|
|
|
function exitEditMode() {
|
|
editor.value?.commands.setContent(lastSavedState, false)
|
|
if (isEditing.value) {
|
|
internalMode.value = 'preview'
|
|
}
|
|
}
|
|
|
|
function setEditIfApplicable() {
|
|
if (!props.isEditEnabled) return
|
|
if (isEditing.value) return
|
|
|
|
setEdit()
|
|
}
|
|
|
|
function setEdit(focus: boolean = true) {
|
|
internalMode.value = 'edit'
|
|
if (focus) {
|
|
editor.value?.commands.focus()
|
|
}
|
|
}
|
|
|
|
onBeforeUnmount(() => editor.value?.destroy())
|
|
|
|
const uploadInputRef = ref<HTMLInputElement | null>(null)
|
|
|
|
function uploadAndInsertFiles(files: File[] | FileList) {
|
|
if (typeof props.uploadCallback === 'undefined') {
|
|
throw new Error('Can\'t add files here')
|
|
}
|
|
|
|
props.uploadCallback(files).then(urls => {
|
|
urls?.forEach(url => {
|
|
if (editor.value?.isEmpty) {
|
|
editor.value
|
|
?.chain()
|
|
.focus()
|
|
.insertContent(UPLOAD_PLACEHOLDER_ELEMENT)
|
|
.run()
|
|
}
|
|
editor.value
|
|
?.chain()
|
|
.focus()
|
|
.setImage({src: url})
|
|
.run()
|
|
})
|
|
|
|
const html = editor.value?.getHTML().replace(UPLOAD_PLACEHOLDER_ELEMENT, '') ?? ''
|
|
|
|
editor.value?.commands.setContent(html, false)
|
|
|
|
bubbleSave()
|
|
})
|
|
}
|
|
|
|
function triggerImageInput(event) {
|
|
if (typeof props.uploadCallback !== 'undefined') {
|
|
uploadInputRef.value?.click()
|
|
return
|
|
}
|
|
|
|
addImage(event)
|
|
}
|
|
|
|
async function addImage(event) {
|
|
|
|
if (typeof props.uploadCallback !== 'undefined') {
|
|
const files = uploadInputRef.value?.files
|
|
|
|
if (!files || files.length === 0) {
|
|
return
|
|
}
|
|
|
|
uploadAndInsertFiles(files)
|
|
|
|
return
|
|
}
|
|
|
|
const url = await inputPrompt(event.target.getBoundingClientRect())
|
|
|
|
if (url) {
|
|
editor.value?.chain().focus().setImage({src: url}).run()
|
|
bubbleSave()
|
|
}
|
|
}
|
|
|
|
function setLink(event) {
|
|
setLinkInEditor(event.target.getBoundingClientRect(), editor.value)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (props.editShortcut !== '') {
|
|
document.addEventListener('keydown', setFocusToEditor)
|
|
}
|
|
|
|
await nextTick()
|
|
|
|
setModeAndValue(props.modelValue)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (props.editShortcut !== '') {
|
|
document.removeEventListener('keydown', setFocusToEditor)
|
|
}
|
|
})
|
|
|
|
function setModeAndValue(value: string) {
|
|
internalMode.value = isEditorContentEmpty(value) ? 'edit' : 'preview'
|
|
editor.value?.commands.setContent(value, false)
|
|
}
|
|
|
|
|
|
// See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
|
|
function setFocusToEditor(event) {
|
|
if (event.target.shadowRoot) {
|
|
return
|
|
}
|
|
|
|
const hotkeyString = eventToHotkeyString(event)
|
|
if (!hotkeyString) return
|
|
if (hotkeyString !== props.editShortcut ||
|
|
event.target.tagName.toLowerCase() === 'input' ||
|
|
event.target.tagName.toLowerCase() === 'textarea' ||
|
|
event.target.contentEditable === 'true') {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
|
|
if (!isEditing.value && props.isEditEnabled) {
|
|
internalMode.value = 'edit'
|
|
}
|
|
|
|
editor.value?.commands.focus()
|
|
}
|
|
|
|
function focusIfEditing() {
|
|
if (isEditing.value) {
|
|
editor.value?.commands.focus()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tiptap__editor {
|
|
transition: box-shadow $transition;
|
|
border-radius: $radius;
|
|
|
|
&.tiptap__editor-is-edit-enabled {
|
|
min-height: 10rem;
|
|
|
|
.ProseMirror {
|
|
padding: .5rem;
|
|
}
|
|
|
|
&:focus-within, &:focus {
|
|
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
|
|
}
|
|
|
|
ul[data-type='taskList'] li > div {
|
|
cursor: text;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiptap p::before {
|
|
content: attr(data-placeholder);
|
|
color: var(--grey-400);
|
|
pointer-events: none;
|
|
height: 0;
|
|
float: left;
|
|
}
|
|
|
|
// Basic editor styles
|
|
.ProseMirror {
|
|
padding: .5rem .5rem .5rem 0;
|
|
|
|
&:focus-within, &:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
> * + * {
|
|
margin-top: 0.75em;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
code {
|
|
background-color: var(--grey-200);
|
|
color: var(--grey-700);
|
|
border-radius: $radius;
|
|
}
|
|
|
|
pre {
|
|
background: var(--grey-200);
|
|
color: var(--grey-700);
|
|
font-family: 'JetBrainsMono', monospace;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: $radius;
|
|
|
|
code {
|
|
color: inherit;
|
|
padding: 0;
|
|
background: none;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: var(--grey-500);
|
|
}
|
|
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-attribute,
|
|
.hljs-tag,
|
|
.hljs-name,
|
|
.hljs-regexp,
|
|
.hljs-link,
|
|
.hljs-name,
|
|
.hljs-selector-id,
|
|
.hljs-selector-class {
|
|
color: var(--code-variable);
|
|
}
|
|
|
|
.hljs-number,
|
|
.hljs-meta,
|
|
.hljs-built_in,
|
|
.hljs-builtin-name,
|
|
.hljs-literal,
|
|
.hljs-type,
|
|
.hljs-params {
|
|
color: var(--code-literal);
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-symbol,
|
|
.hljs-bullet {
|
|
color: var(--code-symbol);
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-section {
|
|
color: var(--code-section);
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-selector-tag {
|
|
color: var(--code-keyword);
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
|
|
&.ProseMirror-selectednode {
|
|
outline: 3px solid var(--primary);
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
padding-left: 1rem;
|
|
border-left: 2px solid rgba(#0d0d0d, 0.1);
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 2px solid rgba(#0d0d0d, 0.1);
|
|
margin: 2rem 0;
|
|
}
|
|
}
|
|
|
|
.ProseMirror {
|
|
/* Table-specific styling */
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
|
|
td,
|
|
th {
|
|
min-width: 1em;
|
|
border: 2px solid var(--grey-300) !important;
|
|
padding: 3px 5px;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
> * {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
th {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
background-color: var(--grey-200);
|
|
}
|
|
|
|
.selectedCell:after {
|
|
z-index: 2;
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(200, 200, 255, 0.4);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.column-resize-handle {
|
|
position: absolute;
|
|
right: -2px;
|
|
top: 0;
|
|
bottom: -2px;
|
|
width: 4px;
|
|
background-color: #adf;
|
|
pointer-events: none;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Lists
|
|
|
|
ul {
|
|
margin-left: .5rem;
|
|
margin-top: 0 !important;
|
|
|
|
li {
|
|
margin-top: 0;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tableWrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.resize-cursor {
|
|
cursor: ew-resize;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
// tasklist
|
|
ul[data-type='taskList'] {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-left: 0;
|
|
|
|
li[data-checked='true'] {
|
|
color: var(--grey-500);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
margin-top: 0.25rem;
|
|
|
|
> label {
|
|
flex: 0 0 auto;
|
|
margin-right: 0.5rem;
|
|
user-select: none;
|
|
}
|
|
|
|
> div {
|
|
flex: 1 1 auto;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.editor-bubble__wrapper {
|
|
background: var(--white);
|
|
border-radius: $radius;
|
|
border: 1px solid var(--grey-200);
|
|
box-shadow: var(--shadow-md);
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-bubble__button {
|
|
color: var(--grey-700);
|
|
transition: all $transition;
|
|
background: transparent;
|
|
|
|
svg {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
padding: .5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--grey-200);
|
|
}
|
|
}
|
|
|
|
ul.tiptap__editor-actions {
|
|
font-size: .8rem;
|
|
margin: 0;
|
|
|
|
li {
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
content: '·';
|
|
padding: 0 .25rem;
|
|
}
|
|
|
|
&:last-child:after {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
&, a {
|
|
color: var(--grey-500);
|
|
|
|
&.done-edit {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|