Added simple tiptap component

app/components/global/input/Editor.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import { ListItem } from '@tiptap/extension-list'
+import StarterKit from '@tiptap/starter-kit'
+import { PhArrowUDownRight, PhArrowUUpLeft, PhListBullets, PhListNumbers, PhQuotes, PhTextB, PhTextItalic, PhTextStrikethrough, PhTextTSlash } from '@phosphor-icons/vue'
+
+const model = defineModel()
+
+const editor = useEditor({
+  content: model.value,
+  extensions: [
+    StarterKit,
+    ListItem.configure({
+
+    })
+  ],
+
+  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">
+        <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-none"
+          size="icon"
+        >
+          <PhTextStrikethrough weight="bold" />
+        </UiButton>
+
+        <UiButton
+          @click.prevent="clearFormatting"
+          variant="secondary"
+          class="size-7 rounded-s-none"
+          size="icon"
+        >
+          <PhTextTSlash weight="bold" />
+        </UiButton>
+      </div>
+
+      <!-- Block styles -->
+      <div class="flex">
+        <UiButton
+          @click.prevent="editor.chain().focus().toggleBulletList().run()"
+          :variant="editor.isActive('bulletList') ? 'default' : 'secondary'"
+          variant="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'"
+          variant="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'"
+          variant="secondary"
+          class="size-7 rounded-s-none"
+          size="icon"
+        >
+          <PhQuotes weight="fill" />
+        </UiButton>
+      </div>
+
+      <div class="flex">
+        <UiButton
+          @click.prevent="editor.chain().focus().undo().run()"
+          :disabled="!editor.can().chain().focus().undo().run()"
+          variant="secondary"
+          class="size-7 rounded-e-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;
+
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>

app/components/world/PreviewCard.vue

@@ -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"

app/components/world/form/Create.vue

@@ -67,16 +67,20 @@ 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
+        <!-- <textarea
           id="new-world-description"
           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"
+        /> -->
+
+        <InputEditor
+          v-model="worldSkeleton.description"
         />
 
         <div class="-mx-1 grid gap-3">

app/components/world/form/Update.vue

@@ -85,12 +85,16 @@ function handleFormCancel() {
           @input="handleNameChange"
         >
 
-        <textarea
+        <!-- <textarea
           id="new-world-description"
           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"
+        /> -->
+
+        <InputEditor
+          v-model="worldSkeleton.description"
         />
 
         <div class="-mx-1 grid gap-3">

app/pages/my/worlds/[id].vue

@@ -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>

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"
   }
 }