ami/tl-vikunja
1
0
Fork 0
Code

chore(editor): format

Browse Source
This commit is contained in:
kolaente 2023-10-21 11:52:20 +02:00
parent 3bf806f00c
commit e81c98fe5b
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
3 changed files with 121 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/input/editor/CommandsList.vue
View File

@ -44,7 +44,7 @@ export default {
},
methods: {
onKeyDown({ event }) {
onKeyDown({event}) {
if (event.key === 'ArrowUp') {
this.upHandler()
return true
@ -86,19 +86,16 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.items {
padding: 0.2rem;
position: relative;
border-radius: 0.5rem;
background: #FFF;
background: #fff;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
font-size: 0.9rem;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05),
0px 10px 20px rgba(0, 0, 0, 0.1),
;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
}
.item {

40
src/components/input/editor/commands.ts
View File

@ -1,28 +1,28 @@
import { Extension } from '@tiptap/core'
import {Extension} from '@tiptap/core'
import Suggestion from '@tiptap/suggestion'
// Copied and adjusted from https://github.com/ueberdosis/tiptap/tree/252acb32d27a0f9af14813eeed83d8a50059a43a/demos/src/Experiments/Commands/Vue
export default Extension.create({
name: 'commands',
name: 'commands',
addOptions() {
return {
suggestion: {
char: '/',
command: ({ editor, range, props }) => {
props.command({ editor, range })
},
},
}
},
addOptions() {
return {
suggestion: {
char: '/',
command: ({editor, range, props}) => {
props.command({editor, range})
},
},
}
},
addProseMirrorPlugins() {
return [
Suggestion({
editor: this.editor,
...this.options.suggestion,
}),
]
},
addProseMirrorPlugins() {
return [
Suggestion({
editor: this.editor,
...this.options.suggestion,
}),
]
},
})

193
src/components/input/editor/suggestion.ts
View File

@ -1,113 +1,114 @@
import { VueRenderer } from '@tiptap/vue-3'
import {VueRenderer} from '@tiptap/vue-3'
import tippy from 'tippy.js'
import CommandsList from './CommandsList.vue'
export default {
items: ({ query }) => {
return [
{
title: 'H1',
command: ({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', { level: 1 })
.run()
},
},
{
title: 'H2',
command: ({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', { level: 2 })
.run()
},
},
{
title: 'bold',
command: ({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setMark('bold')
.run()
},
},
{
title: 'italic',
command: ({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setMark('italic')
.run()
},
},
].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
},
items: ({query}: { query: string }) => {
return [
{
title: 'H1',
command: ({editor, range}) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', {level: 1})
.run()
},
},
{
title: 'H2',
description: 'Lorem ipsum',
command: ({editor, range}) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode('heading', {level: 2})
.run()
},
},
{
title: 'bold',
command: ({editor, range}) => {
editor
.chain()
.focus()
.deleteRange(range)
.setMark('bold')
.run()
},
},
{
title: 'italic',
command: ({editor, range}) => {
editor
.chain()
.focus()
.deleteRange(range)
.setMark('italic')
.run()
},
},
].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
},
render: () => {
let component
let popup
render: () => {
let component: VueRenderer
let popup
return {
onStart: props => {
component = new VueRenderer(CommandsList, {
// using vue 2:
// parent: this,
// propsData: props,
props,
editor: props.editor,
})
return {
onStart: props => {
component = new VueRenderer(CommandsList, {
// using vue 2:
// parent: this,
// propsData: props,
props,
editor: props.editor,
})
if (!props.clientRect) {
return
}
if (!props.clientRect) {
return
}
popup = tippy('body', {
getReferenceClientRect: props.clientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'bottom-start',
})
},
popup = tippy('body', {
getReferenceClientRect: props.clientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'bottom-start',
})
},
onUpdate(props) {
component.updateProps(props)
onUpdate(props) {
component.updateProps(props)
if (!props.clientRect) {
return
}
if (!props.clientRect) {
return
}
popup[0].setProps({
getReferenceClientRect: props.clientRect,
})
},
popup[0].setProps({
getReferenceClientRect: props.clientRect,
})
},
onKeyDown(props) {
if (props.event.key === 'Escape') {
popup[0].hide()
onKeyDown(props) {
if (props.event.key === 'Escape') {
popup[0].hide()
return true
}
return true
}
return component.ref?.onKeyDown(props)
},
return component.ref?.onKeyDown(props)
},
onExit() {
popup[0].destroy()
component.destroy()
},
}
},
onExit() {
popup[0].destroy()
component.destroy()
},
}
},
}