ThatHurleyGuy/frontend
1
0
Fork 0
forked from vikunja/frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(editor): format

Browse Source
This commit is contained in:
kolaente 2023-10-21 11:52:20 +02:00
parent 3bf806f00c
commit e81c98fe5b
Signed by untrusted user: konrad
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: { methods: {
onKeyDown({ event }) { onKeyDown({event}) {
if (event.key === 'ArrowUp') { if (event.key === 'ArrowUp') {
this.upHandler() this.upHandler()
return true return true
@ -86,19 +86,16 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.items { .items {
padding: 0.2rem; padding: 0.2rem;
position: relative; position: relative;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #FFF; background: #fff;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
overflow: hidden; overflow: hidden;
font-size: 0.9rem; font-size: 0.9rem;
box-shadow: box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
0 0 0 1px rgba(0, 0, 0, 0.05),
0px 10px 20px rgba(0, 0, 0, 0.1),
;
} }
.item { .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' import Suggestion from '@tiptap/suggestion'
// Copied and adjusted from https://github.com/ueberdosis/tiptap/tree/252acb32d27a0f9af14813eeed83d8a50059a43a/demos/src/Experiments/Commands/Vue // Copied and adjusted from https://github.com/ueberdosis/tiptap/tree/252acb32d27a0f9af14813eeed83d8a50059a43a/demos/src/Experiments/Commands/Vue
export default Extension.create({ export default Extension.create({
name: 'commands', name: 'commands',
addOptions() { addOptions() {
return { return {
suggestion: { suggestion: {
char: '/', char: '/',
command: ({ editor, range, props }) => { command: ({editor, range, props}) => {
props.command({ editor, range }) props.command({editor, range})
}, },
}, },
} }
}, },
addProseMirrorPlugins() { addProseMirrorPlugins() {
return [ return [
Suggestion({ Suggestion({
editor: this.editor, editor: this.editor,
...this.options.suggestion, ...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 tippy from 'tippy.js'
import CommandsList from './CommandsList.vue' import CommandsList from './CommandsList.vue'
export default { export default {
items: ({ query }) => { items: ({query}: { query: string }) => {
return [ return [
{ {
title: 'H1', title: 'H1',
command: ({ editor, range }) => { command: ({editor, range}) => {
editor editor
.chain() .chain()
.focus() .focus()
.deleteRange(range) .deleteRange(range)
.setNode('heading', { level: 1 }) .setNode('heading', {level: 1})
.run() .run()
}, },
}, },
{ {
title: 'H2', title: 'H2',
command: ({ editor, range }) => { description: 'Lorem ipsum',
editor command: ({editor, range}) => {
.chain() editor
.focus() .chain()
.deleteRange(range) .focus()
.setNode('heading', { level: 2 }) .deleteRange(range)
.run() .setNode('heading', {level: 2})
}, .run()
}, },
{ },
title: 'bold', {
command: ({ editor, range }) => { title: 'bold',
editor command: ({editor, range}) => {
.chain() editor
.focus() .chain()
.deleteRange(range) .focus()
.setMark('bold') .deleteRange(range)
.run() .setMark('bold')
}, .run()
}, },
{ },
title: 'italic', {
command: ({ editor, range }) => { title: 'italic',
editor command: ({editor, range}) => {
.chain() editor
.focus() .chain()
.deleteRange(range) .focus()
.setMark('italic') .deleteRange(range)
.run() .setMark('italic')
}, .run()
}, },
].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10) },
}, ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
},
render: () => { render: () => {
let component let component: VueRenderer
let popup let popup
return { return {
onStart: props => { onStart: props => {
component = new VueRenderer(CommandsList, { component = new VueRenderer(CommandsList, {
// using vue 2: // using vue 2:
// parent: this, // parent: this,
// propsData: props, // propsData: props,
props, props,
editor: props.editor, editor: props.editor,
}) })
if (!props.clientRect) { if (!props.clientRect) {
return return
} }
popup = tippy('body', { popup = tippy('body', {
getReferenceClientRect: props.clientRect, getReferenceClientRect: props.clientRect,
appendTo: () => document.body, appendTo: () => document.body,
content: component.element, content: component.element,
showOnCreate: true, showOnCreate: true,
interactive: true, interactive: true,
trigger: 'manual', trigger: 'manual',
placement: 'bottom-start', placement: 'bottom-start',
}) })
}, },
onUpdate(props) { onUpdate(props) {
component.updateProps(props) component.updateProps(props)
if (!props.clientRect) { if (!props.clientRect) {
return return
} }
popup[0].setProps({ popup[0].setProps({
getReferenceClientRect: props.clientRect, getReferenceClientRect: props.clientRect,
}) })
}, },
onKeyDown(props) { onKeyDown(props) {
if (props.event.key === 'Escape') { if (props.event.key === 'Escape') {
popup[0].hide() popup[0].hide()
return true return true
} }
return component.ref?.onKeyDown(props) return component.ref?.onKeyDown(props)
}, },
onExit() { onExit() {
popup[0].destroy() popup[0].destroy()
component.destroy() component.destroy()
}, },
} }
}, },
} }