vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

chore(editor): format

This commit is contained in:
kolaente 2023-10-21 10:53:41 +02:00
parent 4f3efe4454
commit 0772acbead
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/base/EditorToolbar.vue
View File

@ -7,7 +7,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
title="h1" title="h1"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>1 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>1
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -15,7 +15,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
title="h2" title="h2"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>2 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>2
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -23,7 +23,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
title="h3" title="h3"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>3 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>3
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -31,7 +31,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
title="h4" title="h4"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>4 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>4
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -39,7 +39,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
title="h5" title="h5"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>5 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>5
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -47,7 +47,7 @@
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
title="h6" title="h6"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>6 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>6
</BaseButton> </BaseButton>
</div> </div>
@ -59,7 +59,7 @@
title="bold" title="bold"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-bold']" /> <icon :icon="['fa', 'fa-bold']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -69,7 +69,7 @@
title="italic" title="italic"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-italic']" /> <icon :icon="['fa', 'fa-italic']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -79,7 +79,7 @@
title="strike" title="strike"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-strikethrough']" /> <icon :icon="['fa', 'fa-strikethrough']"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -92,7 +92,7 @@
title="code" title="code"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-code']" /> <icon :icon="['fa', 'fa-code']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -102,7 +102,7 @@
title="code block" title="code block"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-code']" /> <icon :icon="['fa', 'fa-code']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -112,7 +112,7 @@
title="quote" title="quote"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-quote-right']" /> <icon :icon="['fa', 'fa-quote-right']"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -125,7 +125,7 @@
title="bullet list" title="bullet list"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-list-ol']" /> <icon :icon="['fa', 'fa-list-ol']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -135,7 +135,7 @@
title="ordered list" title="ordered list"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-list-ul']" /> <icon :icon="['fa', 'fa-list-ul']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -145,7 +145,7 @@
title="task list" title="task list"
> >
<span class="icon"> <span class="icon">
<icon icon="fa-list-check" /> <icon icon="fa-list-check"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -153,7 +153,7 @@
<div class="editor-toolbar__segment"> <div class="editor-toolbar__segment">
<BaseButton class="editor-toolbar__button" @click="uploadInputRef?.click()" title="Add image"> <BaseButton class="editor-toolbar__button" @click="uploadInputRef?.click()" title="Add image">
<span class="icon"> <span class="icon">
<icon icon="fa-image" /> <icon icon="fa-image"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -181,7 +181,7 @@
title="set link" title="set link"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-link']" /> <icon :icon="['fa', 'fa-link']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -191,7 +191,7 @@
title="unset link" title="unset link"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-unlink']" /> <icon :icon="['fa', 'fa-unlink']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -201,7 +201,7 @@
title="paragraph" title="paragraph"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-paragraph']" /> <icon :icon="['fa', 'fa-paragraph']"/>
</span> </span>
</BaseButton> </BaseButton>
@ -218,7 +218,7 @@
@click="editor.chain().focus().setHardBreak().run()" @click="editor.chain().focus().setHardBreak().run()"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-arrow-turn-down']" /> <icon :icon="['fa', 'fa-arrow-turn-down']"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -230,7 +230,7 @@
title="undo" title="undo"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-undo']" /> <icon :icon="['fa', 'fa-undo']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -239,7 +239,7 @@
title="redo" title="redo"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-redo']" /> <icon :icon="['fa', 'fa-redo']"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -253,7 +253,7 @@
title="table" title="table"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-table']" /> <icon :icon="['fa', 'fa-table']"/>
</span> </span>
</BaseButton> </BaseButton>
<div v-if="tableMode"> <div v-if="tableMode">
@ -399,28 +399,28 @@ function toggleTableMode() {
} }
function addImage() { function addImage() {
if (typeof uploadCallback !== 'undefined') { if (typeof uploadCallback !== 'undefined') {
const files = uploadInputRef.value?.files const files = uploadInputRef.value?.files
if (!files || files.length === 0) { if (!files || files.length === 0) {
return return
} }
uploadCallback(files).then(urls => { uploadCallback(files).then(urls => {
urls.forEach(url => { urls.forEach(url => {
editor?.chain().focus().setImage({ src: url }).run() editor?.chain().focus().setImage({src: url}).run()
}) })
emit('imageAdded') emit('imageAdded')
}) })
return return
} }
const url = window.prompt('URL') const url = window.prompt('URL')
if (url) { if (url) {
editor?.chain().focus().setImage({ src: url }).run() editor?.chain().focus().setImage({src: url}).run()
emit('imageAdded') emit('imageAdded')
} }
} }
@ -446,7 +446,7 @@ function setLink() {
.chain() .chain()
.focus() .focus()
.extendMarkRange('link') .extendMarkRange('link')
.setLink({ href: url, target: '_blank' }) .setLink({href: url, target: '_blank'})
.run() .run()
} }
</script> </script>

31
src/components/base/TipTap.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="tiptap"> <div class="tiptap">
<EditorToolbar <EditorToolbar
v-if="editor" v-if="editor"
:editor="editor" :editor="editor"
:upload-callback="uploadCallback" :upload-callback="uploadCallback"
@image-added="onImageAdded" @image-added="onImageAdded"
/> />
<editor-content <editor-content
class="tiptap__editor" class="tiptap__editor"
:editor="editor" :editor="editor"
/> />
</div> </div>
</template> </template>
@ -102,7 +102,7 @@ watch(
if (modelValue === '') { if (modelValue === '') {
return return
} }
if (!modelValue.startsWith(TIPTAP_TEXT_VALUE_PREFIX)) { if (!modelValue.startsWith(TIPTAP_TEXT_VALUE_PREFIX)) {
// convert Markdown to HTML // convert Markdown to HTML
inputHTML.value = TIPTAP_TEXT_VALUE_PREFIX + marked.parse(modelValue) inputHTML.value = TIPTAP_TEXT_VALUE_PREFIX + marked.parse(modelValue)
@ -113,7 +113,7 @@ watch(
inputHTML.value = modelValue.replace(tiptapRegex, '') inputHTML.value = modelValue.replace(tiptapRegex, '')
nextTick(() => loadImages()) nextTick(() => loadImages())
}, },
{ immediate: true }, {immediate: true},
) )
function onImageAdded() { function onImageAdded() {
@ -123,6 +123,7 @@ function onImageAdded() {
type CacheKey = `${ITask['id']}-${IAttachment['id']}` type CacheKey = `${ITask['id']}-${IAttachment['id']}`
const loadedAttachments = ref<{ [key: CacheKey]: string }>({}) const loadedAttachments = ref<{ [key: CacheKey]: string }>({})
function loadImages() { function loadImages() {
const attachmentImage = document.querySelectorAll<HTMLImageElement>('.tiptap__editor img') const attachmentImage = document.querySelectorAll<HTMLImageElement>('.tiptap__editor img')
const attachmentService = new AttachmentService() const attachmentService = new AttachmentService()
@ -246,7 +247,7 @@ onBeforeUnmount(() => editor.value?.destroy())
/* Basic editor styles */ /* Basic editor styles */
.ProseMirror { .ProseMirror {
padding: .5rem; padding: .5rem;
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }
@ -277,7 +278,7 @@ onBeforeUnmount(() => editor.value?.destroy())
pre { pre {
background: #0d0d0d; background: #0d0d0d;
color: #fff; color: #fff;
font-family: "JetBrainsMono", monospace; font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -292,7 +293,7 @@ onBeforeUnmount(() => editor.value?.destroy())
pre { pre {
background: #0d0d0d; background: #0d0d0d;
color: #fff; color: #fff;
font-family: "JetBrainsMono", monospace; font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -409,7 +410,7 @@ onBeforeUnmount(() => editor.value?.destroy())
.selectedCell:after { .selectedCell:after {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
content: ""; content: '';
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -432,16 +433,16 @@ onBeforeUnmount(() => editor.value?.destroy())
margin: 0; margin: 0;
} }
} }
// Lists // Lists
ul { ul {
margin-left: .5rem; margin-left: .5rem;
margin-top: 0 !important; margin-top: 0 !important;
li { li {
margin-top: 0; margin-top: 0;
} }
p { p {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@ -458,7 +459,7 @@ onBeforeUnmount(() => editor.value?.destroy())
} }
// tasklist // tasklist
ul[data-type="taskList"] { ul[data-type='taskList'] {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-left: 0; margin-left: 0;
@ -477,7 +478,7 @@ ul[data-type="taskList"] {
} }
} }
input[type="checkbox"] { input[type='checkbox'] {
cursor: pointer; cursor: pointer;
} }
} }