feat(editor): tiptap integration with UEditor

package.json

@@ -58,7 +58,7 @@
     "@nuxt/eslint-config": "^1.10.0",
     "@nuxt/kit": "^4.2.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/ui": "^4.1.0",
+    "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@af197af",
     "@octokit/types": "^15.0.1",
     "@release-it/conventional-changelog": "^10.0.1",
     "@tailwindcss/typography": "^0.5.19",

src/app/src/components/AppFooter.vue

@@ -32,6 +32,9 @@ const userMenuItems = computed(() => [
         },
       ]
     : undefined,
+  [{
+    slot: 'debug-mode' as const,
+  }],
   [{
     label: t('studio.buttons.signOut'),
     icon: 'i-lucide-log-out',
@@ -84,6 +87,20 @@ function closeStudio() {
           />
         </div>
       </template> -->
+      <template #debug-mode>
+        <div
+          class="w-full"
+          @click.stop="updatePreference('debug', !preferences.debug)"
+        >
+          <USwitch
+            :model-value="preferences.debug"
+            label="Debug Mode"
+            size="xs"
+            :ui="{ root: 'w-full flex-row-reverse justify-between', wrapper: 'ms-0' }"
+            @update:model-value="updatePreference('debug', $event)"
+          />
+        </div>
+      </template>
       <UButton
         color="neutral"
         variant="ghost"

src/app/src/components/content/ContentCardReview.vue

@@ -157,7 +157,7 @@ async function initializeEditor() {
           v-else
           class="relative w-full h-full"
         >
-          <AlertMDCFormatting v-if="isAutomaticFormattingDetected" />
+          <MDCFormattingBanner v-if="isAutomaticFormattingDetected" />
           <div
             ref="diffEditorRef"
             class="w-full h-full"

src/app/src/components/content/ContentEditor.vue

@@ -4,6 +4,7 @@ import { decompressTree } from '@nuxt/content/runtime'
 import type { MarkdownRoot } from '@nuxt/content'
 import { DraftStatus, type DatabasePageItem, type DraftItem } from '../../types'
 import { useStudio } from '../../composables/useStudio'
+import { useStudioState } from '../../composables/useStudioState'
 
 const props = defineProps({
   draftItem: {
@@ -18,6 +19,7 @@ const props = defineProps({
 })
 
 const { context } = useStudio()
+const { preferences } = useStudioState()
 
 const document = computed<DatabasePageItem>({
   get() {
@@ -61,12 +63,17 @@ const document = computed<DatabasePageItem>({
       v-if="draftItem.conflict"
       :draft-item="draftItem"
     />
+    <ContentEditorTipTap
+      v-else-if="preferences.editorMode === 'tiptap'"
+      v-model="document"
+      :draft-item="draftItem"
+      :read-only="readOnly"
+    />
     <ContentEditorCode
       v-else
       v-model="document"
       :draft-item="draftItem"
       :read-only="readOnly"
     />
   </div>
-  <!-- <MDCEditorAST v-model="document" /> -->
 </template>

src/app/src/components/content/ContentEditorCode.vue

@@ -155,7 +155,7 @@ function toggleDiffView() {
 
 <template>
   <div class="relative h-full flex flex-col">
-    <AlertMDCFormatting
+    <MDCFormattingBanner
       v-if="isAutomaticFormattingDetected"
       show-action
       :is-diff-shown="showAutomaticFormattingDiff"