Merge branch 'feat/editor' into dev
This commit is contained in:
Alexis
@@ -160,8 +160,8 @@ function deployDeleteModal() {
|
||||
<template v-if="event.description">
|
||||
<hr class="border-border mt-2" >
|
||||
|
||||
<div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ event.description }}
|
||||
<div class="max-h-48 overflow-y-auto mt-2 text-sm opacity-80">
|
||||
<div class="content-editor" v-html="event.description" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -74,14 +74,11 @@ function handleCancel() {
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 my-2 pl-8">
|
||||
<textarea
|
||||
id="new-event-description"
|
||||
<InputEditor
|
||||
disable-blocks
|
||||
v-model="eventSkeleton.description"
|
||||
name="new-event-description"
|
||||
:placeholder="$t('entity.addDescription')"
|
||||
:maxlength="1200"
|
||||
class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
|
||||
/>
|
||||
|
||||
<div class="mt-2 mb-1 text-xs opacity-50">
|
||||
{{ t('entity.calendar.event.patterns.description') }}
|
||||
</div>
|
||||
|
||||
@@ -92,14 +92,11 @@ function handleCancel() {
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 my-2 ml-8">
|
||||
<textarea
|
||||
id="new-event-description"
|
||||
<InputEditor
|
||||
disable-blocks
|
||||
v-model="eventSkeleton.description"
|
||||
name="new-event-description"
|
||||
:placeholder="$t('entity.addDescription')"
|
||||
:maxlength="1200"
|
||||
class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
|
||||
/>
|
||||
|
||||
<div class="mt-2 mb-1 text-xs opacity-50">
|
||||
{{ t('entity.calendar.event.patterns.description') }}
|
||||
</div>
|
||||
|
||||
@@ -113,9 +113,7 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
|
||||
|
||||
<div v-if="event.description" class="text-xs md:text-sm">
|
||||
<hr class="my-3 md:my-2 border-white opacity-50" >
|
||||
<span class="opacity-75">
|
||||
{{ event.description }}
|
||||
</span>
|
||||
<div class="content-editor opacity-75" v-html="event.description" />
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
244
app/components/global/input/Editor.vue
Normal file
244
app/components/global/input/Editor.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<script lang="ts" setup>
|
||||
import { useEditor, EditorContent, type Content } from '@tiptap/vue-3'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import { PhArrowUDownRight, PhArrowUUpLeft, PhListBullets, PhListNumbers, PhQuotes, PhTextB, PhTextItalic, PhTextStrikethrough, PhTextTSlash } from '@phosphor-icons/vue'
|
||||
|
||||
const props = defineProps<{
|
||||
disableInlines?: boolean
|
||||
disableBlocks?: boolean
|
||||
}>()
|
||||
|
||||
const model = defineModel<any>()
|
||||
|
||||
const editor = useEditor({
|
||||
content: model.value as Content,
|
||||
extensions: [
|
||||
StarterKit
|
||||
],
|
||||
|
||||
onUpdate: ({ editor }) => {
|
||||
model.value = editor.getHTML()
|
||||
}
|
||||
})
|
||||
|
||||
function clearFormatting() {
|
||||
editor.value?.chain().focus().unsetAllMarks().run()
|
||||
editor.value?.chain().focus().clearNodes().run()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<!-- Toolbar -->
|
||||
<div class="flex gap-1.5">
|
||||
<!-- Inline styles -->
|
||||
<div class="flex" v-if="!props.disableInlines">
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().toggleBold().run()"
|
||||
:disabled="!editor.can().chain().focus().toggleBold().run()"
|
||||
:variant="editor.isActive('bold') ? 'default' : 'secondary'"
|
||||
class="size-7 rounded-e-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhTextB weight="bold" />
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().toggleItalic().run()"
|
||||
:disabled="!editor.can().chain().focus().toggleItalic().run()"
|
||||
:variant="editor.isActive('italic') ? 'default' : 'secondary'"
|
||||
class="size-7 rounded-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhTextItalic weight="bold" />
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().toggleStrike().run()"
|
||||
:disabled="!editor.can().chain().focus().toggleStrike().run()"
|
||||
:variant="editor.isActive('strike') ? 'default' : 'secondary'"
|
||||
class="size-7 rounded-s-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhTextStrikethrough weight="bold" />
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
<!-- Block styles -->
|
||||
<div class="flex" v-if="!props.disableBlocks">
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().toggleBulletList().run()"
|
||||
:variant="editor.isActive('bulletList') ? 'default' : 'secondary'"
|
||||
class="size-7 rounded-e-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhListBullets weight="bold" />
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().toggleOrderedList().run()"
|
||||
:variant="editor.isActive('orderedList') ? 'default' : 'secondary'"
|
||||
class="size-7 rounded-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhListNumbers weight="bold" />
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().toggleBlockquote().run()"
|
||||
:variant="editor.isActive('blockquote') ? 'default' : 'secondary'"
|
||||
class="size-7 rounded-s-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhQuotes weight="fill" />
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<UiButton
|
||||
@click.prevent="clearFormatting"
|
||||
variant="secondary"
|
||||
class="size-7 rounded-e-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhTextTSlash weight="bold" />
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().undo().run()"
|
||||
:disabled="!editor.can().chain().focus().undo().run()"
|
||||
variant="secondary"
|
||||
class="size-7 rounded-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhArrowUUpLeft weight="bold" />
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
@click.prevent="editor.chain().focus().redo().run()"
|
||||
:disabled="!editor.can().chain().focus().redo().run()"
|
||||
variant="secondary"
|
||||
class="size-7 rounded-s-none"
|
||||
size="icon"
|
||||
>
|
||||
<PhArrowUDownRight weight="bold" />
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EditorContent
|
||||
:editor
|
||||
class="overflow-y-auto md:text-sm border-b-1 border-border"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.tiptap,
|
||||
.content-editor {
|
||||
/* List styles */
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
||||
|
||||
li p {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
/* Heading styles */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
margin-top: 2.5rem;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Code and preformatted text styles */
|
||||
code {
|
||||
background-color: var(--purple-light);
|
||||
border-radius: 0.4rem;
|
||||
color: var(--black);
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25em 0.3em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--black);
|
||||
border-radius: 0.5rem;
|
||||
color: var(--white);
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
margin: 1.5rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid var(--gray-3);
|
||||
margin: 1.5rem 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--gray-2);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic editor styles */
|
||||
.tiptap {
|
||||
padding-block: 0.75rem;
|
||||
min-height: 7rem;
|
||||
max-height: 12rem;
|
||||
overflow-y: auto;
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -47,7 +47,7 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
|
||||
</UiCardHeader>
|
||||
|
||||
<UiCardContent class="grow">
|
||||
<p class="italic">{{ world.description }}</p>
|
||||
<div class="md:text-sm" v-html="world.description"></div>
|
||||
|
||||
<div
|
||||
v-if="isCardHovered || isCardFocused"
|
||||
|
||||
@@ -67,16 +67,13 @@ function handleFormCancel() {
|
||||
name="new-world-name"
|
||||
required
|
||||
:placeholder="$t('common.title')"
|
||||
class="w-full -my-1 mb-4 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
|
||||
class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
|
||||
@input="handleNameChange"
|
||||
>
|
||||
|
||||
<textarea
|
||||
id="new-world-description"
|
||||
<InputEditor
|
||||
disable-blocks
|
||||
v-model="worldSkeleton.description"
|
||||
name="new-world-description"
|
||||
:placeholder="$t('entity.addDescription')"
|
||||
class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
|
||||
/>
|
||||
|
||||
<div class="-mx-1 grid gap-3">
|
||||
|
||||
@@ -85,12 +85,9 @@ function handleFormCancel() {
|
||||
@input="handleNameChange"
|
||||
>
|
||||
|
||||
<textarea
|
||||
id="new-world-description"
|
||||
<InputEditor
|
||||
disable-blocks
|
||||
v-model="worldSkeleton.description"
|
||||
name="new-world-description"
|
||||
:placeholder="$t('entity.addDescription')"
|
||||
class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
|
||||
/>
|
||||
|
||||
<div class="-mx-1 grid gap-3">
|
||||
|
||||
@@ -190,7 +190,7 @@ function hideEditModal() {
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
|
||||
<p>{{ world.data.description }}</p>
|
||||
<div class="content-editor" v-html="world.data.description" />
|
||||
</div>
|
||||
</Spacing>
|
||||
</header>
|
||||
|
||||
17
package.json
17
package.json
@@ -15,22 +15,25 @@
|
||||
"dependencies": {
|
||||
"@intlify/message-compiler": "^11.1.11",
|
||||
"@nuxt/content": "3.6.3",
|
||||
"@nuxt/eslint": "^1.7.1",
|
||||
"@nuxt/eslint": "^1.8.0",
|
||||
"@nuxt/image": "1.11.0",
|
||||
"@nuxthub/core": "^0.9.0",
|
||||
"@nuxtjs/i18n": "^10.0.3",
|
||||
"@phosphor-icons/vue": "^2.2.1",
|
||||
"@pinia/nuxt": "^0.11.2",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"@tiptap/pm": "^3.0.9",
|
||||
"@tiptap/starter-kit": "^3.0.9",
|
||||
"@tiptap/vue-3": "^3.0.9",
|
||||
"@vueuse/core": "^13.6.0",
|
||||
"@vueuse/integrations": "^13.6.0",
|
||||
"@vueuse/nuxt": "^13.6.0",
|
||||
"better-sqlite3": "^12.2.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-vue-next": "^0.536.0",
|
||||
"lucide-vue-next": "^0.537.0",
|
||||
"luxon": "^3.7.1",
|
||||
"nuxt": "^4.0.2",
|
||||
"nuxt": "^4.0.3",
|
||||
"pinia": "^3.0.3",
|
||||
"radix-vue": "^1.9.17",
|
||||
"shadcn-nuxt": "^2.2.0",
|
||||
@@ -39,7 +42,7 @@
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1",
|
||||
"zod": "^4.0.14"
|
||||
"zod": "^4.0.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
@@ -51,14 +54,14 @@
|
||||
"@typescript-eslint/parser": "^8.39.0",
|
||||
"eslint": "^9.32.0",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-prettier": "^5.5.3",
|
||||
"eslint-plugin-prettier": "^5.5.4",
|
||||
"eslint-plugin-vue": "^10.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"prettier": "^3.6.2",
|
||||
"sass": "^1.89.2",
|
||||
"sass": "^1.90.0",
|
||||
"supabase": "^2.33.9",
|
||||
"tailwindcss": "^4.1.11",
|
||||
"typescript": "^5.9.2",
|
||||
"wrangler": "^4.27.0"
|
||||
"wrangler": "^4.28.1"
|
||||
}
|
||||
}
|
||||
|
||||
1458
pnpm-lock.yaml
generated
1458
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user