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

feat(editor): add placeholder

This commit is contained in:
kolaente 2023-10-21 19:02:55 +02:00
parent d005875bbf
commit a7e4e3adf9
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -62,6 +62,7 @@
"@tiptap/extension-highlight": "2.0.3",
"@tiptap/extension-image": "2.0.3",
"@tiptap/extension-link": "2.0.3",
"@tiptap/extension-placeholder": "2.1.12",
"@tiptap/extension-table": "2.0.3",
"@tiptap/extension-table-cell": "2.0.3",
"@tiptap/extension-table-header": "2.0.3",
@ -69,9 +70,9 @@
"@tiptap/extension-task-item": "2.0.3",
"@tiptap/extension-task-list": "2.0.3",
"@tiptap/extension-typography": "2.0.3",
"@tiptap/extension-underline": "^2.1.12",
"@tiptap/extension-underline": "2.1.12",
"@tiptap/starter-kit": "2.0.3",
"@tiptap/suggestion": "^2.1.12",
"@tiptap/suggestion": "2.1.12",
"@tiptap/vue-3": "2.0.3",
"@types/is-touch-device": "1.0.0",
"@types/lodash.clonedeep": "4.5.7",

17
pnpm-lock.yaml
View File

@ -61,6 +61,9 @@ dependencies:
'@tiptap/extension-link':
specifier: 2.0.3
version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
'@tiptap/extension-placeholder':
specifier: 2.1.12
version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
'@tiptap/extension-table':
specifier: 2.0.3
version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
@ -83,13 +86,13 @@ dependencies:
specifier: 2.0.3
version: 2.0.3(@tiptap/core@2.1.12)
'@tiptap/extension-underline':
specifier: ^2.1.12
specifier: 2.1.12
version: 2.1.12(@tiptap/core@2.1.12)
'@tiptap/starter-kit':
specifier: 2.0.3
version: 2.0.3(@tiptap/pm@2.1.12)
'@tiptap/suggestion':
specifier: ^2.1.12
specifier: 2.1.12
version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
'@tiptap/vue-3':
specifier: 2.0.3
@ -4425,6 +4428,16 @@ packages:
'@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
dev: false
/@tiptap/extension-placeholder@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
resolution: {integrity: sha512-K52o7B1zkP4vaVy3z4ZwHn+tQy6KlXtedj1skLg+796ImwH2GYS5z6MFOTfKzBO2hLncUzLco/s0C5PLCD6SDw==}
peerDependencies:
'@tiptap/core': ^2.0.0
'@tiptap/pm': ^2.0.0
dependencies:
'@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
'@tiptap/pm': 2.1.12
dev: false
/@tiptap/extension-strike@2.1.12(@tiptap/core@2.1.12):
resolution: {integrity: sha512-HlhrzIjYUT8oCH9nYzEL2QTTn8d1ECnVhKvzAe6x41xk31PjLMHTUy8aYjeQEkWZOWZ34tiTmslV1ce6R3Dt8g==}
peerDependencies:

28
src/components/input/editor/TipTap.vue
View File

@ -139,6 +139,7 @@ import AttachmentService from '@/services/attachment'
import {useI18n} from 'vue-i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import XButton from '@/components/input/button.vue'
import {Placeholder} from '@tiptap/extension-placeholder'
const {t} = useI18n()
@ -256,6 +257,9 @@ const editor = useEditor({
content: inputHTML.value,
extensions: [
StarterKit,
Placeholder.configure({
placeholder: t('input.editor.placeholder'),
}),
Typography,
Underline,
Link.configure({
@ -399,22 +403,18 @@ function handleImagePaste(event) {
<style lang="scss">
.tiptap__editor {
// box-sizing: border-box;
// height: auto;
min-height: 150px;
border: 1px solid #ddd;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
//padding: 10px;
// font: inherit;
// z-index: 0;
// word-wrap: break-word;
border: 1px solid var(--grey-200) !important;
background: var(--white);
min-height: 10rem;
}
/* Basic editor styles */
.tiptap p.is-empty::before {
content: attr(data-placeholder);
color: var(--grey-400);
pointer-events: none;
height: 0;
float: left;
}
// Basic editor styles
.ProseMirror {
padding: .5rem;

1
src/i18n/lang/en.json
View File

@ -549,6 +549,7 @@
"taskListTooltip": "Track tasks with a to-do list.",
"undo": "Undo",
"redo": "Redo",
"placeholder": "Type some text or hit '/' to see more options…",
"table": {
"title": "Table",
"insert": "Insert table",