vome-core 0.1.30 → 0.1.31

package/dist/admin/crud/components/vm-richtext.vue

@@ -21,148 +21,60 @@
         v-if="editor"
         class="vm-richtext__toolbar"
       >
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('bold') }"
-          title="加粗"
-          @click="editor.chain().focus().toggleBold().run()"
-        >
-          <i class="ri-bold" />
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('italic') }"
-          title="斜体"
-          @click="editor.chain().focus().toggleItalic().run()"
-        >
-          <i class="ri-italic" />
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('underline') }"
-          title="下划线"
-          @click="editor.chain().focus().toggleUnderline().run()"
-        >
-          <i class="ri-underline" />
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('strike') }"
-          title="删除线"
-          @click="editor.chain().focus().toggleStrike().run()"
-        >
-          <i class="ri-strikethrough" />
-        </button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('bold') }" title="加粗" @click="editor.chain().focus().toggleBold().run()"><i class="ri-bold" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('italic') }" title="斜体" @click="editor.chain().focus().toggleItalic().run()"><i class="ri-italic" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('underline') }" title="下划线" @click="editor.chain().focus().toggleUnderline().run()"><i class="ri-underline" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('strike') }" title="删除线" @click="editor.chain().focus().toggleStrike().run()"><i class="ri-strikethrough" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('highlight') }" title="高亮" @click="editor.chain().focus().toggleHighlight().run()"><i class="ri-mark-pen-line" /></button>
         <span class="vm-richtext__sep" />
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-          title="标题 2"
-          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-        >
-          H2
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-          title="标题 3"
-          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-        >
-          H3
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('paragraph') }"
-          title="正文"
-          @click="editor.chain().focus().setParagraph().run()"
-        >
-          P
-        </button>
+        <button type="button" class="vm-richtext__btn" title="文字颜色" @click="pickTextColor"><i class="ri-font-color" /></button>
         <span class="vm-richtext__sep" />
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('bulletList') }"
-          title="无序列表"
-          @click="editor.chain().focus().toggleBulletList().run()"
-        >
-          <i class="ri-list-unordered" />
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('orderedList') }"
-          title="有序列表"
-          @click="editor.chain().focus().toggleOrderedList().run()"
-        >
-          <i class="ri-list-ordered" />
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('blockquote') }"
-          title="引用"
-          @click="editor.chain().focus().toggleBlockquote().run()"
-        >
-          <i class="ri-double-quotes-l" />
-        </button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" title="标题 2" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" title="标题 3" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('paragraph') }" title="正文" @click="editor.chain().focus().setParagraph().run()">P</button>
         <span class="vm-richtext__sep" />
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          :class="{ 'is-active': editor.isActive('link') }"
-          title="链接"
-          @click="toggleLink"
-        >
-          <i class="ri-link" />
-        </button>
-        <button
-          v-if="uploadEnabled"
-          type="button"
-          class="vm-richtext__btn"
-          title="图片"
-          @click="pickImage"
-        >
-          <i class="ri-image-line" />
-        </button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }" title="左对齐" @click="editor.chain().focus().setTextAlign('left').run()"><i class="ri-align-left" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }" title="居中" @click="editor.chain().focus().setTextAlign('center').run()"><i class="ri-align-center" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }" title="右对齐" @click="editor.chain().focus().setTextAlign('right').run()"><i class="ri-align-right" /></button>
         <span class="vm-richtext__sep" />
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          title="撤销"
-          :disabled="!editor.can().undo()"
-          @click="editor.chain().focus().undo().run()"
-        >
-          <i class="ri-arrow-go-back-line" />
-        </button>
-        <button
-          type="button"
-          class="vm-richtext__btn"
-          title="重做"
-          :disabled="!editor.can().redo()"
-          @click="editor.chain().focus().redo().run()"
-        >
-          <i class="ri-arrow-go-forward-line" />
-        </button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('bulletList') }" title="无序列表" @click="editor.chain().focus().toggleBulletList().run()"><i class="ri-list-unordered" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('orderedList') }" title="有序列表" @click="editor.chain().focus().toggleOrderedList().run()"><i class="ri-list-ordered" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('taskList') }" title="任务列表" @click="editor.chain().focus().toggleTaskList().run()"><i class="ri-checkbox-line" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('blockquote') }" title="引用" @click="editor.chain().focus().toggleBlockquote().run()"><i class="ri-double-quotes-l" /></button>
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('codeBlock') }" title="代码块" @click="editor.chain().focus().toggleCodeBlock().run()"><i class="ri-code-box-line" /></button>
+        <button type="button" class="vm-richtext__btn" title="分割线" @click="editor.chain().focus().setHorizontalRule().run()"><i class="ri-separator" /></button>
+        <span class="vm-richtext__sep" />
+        <button type="button" class="vm-richtext__btn" :class="{ 'is-active': editor.isActive('link') }" title="链接" @click="toggleLink"><i class="ri-link" /></button>
+        <button v-if="uploadEnabled" type="button" class="vm-richtext__btn" title="图片" @click="pickImage"><i class="ri-image-line" /></button>
+        <button v-if="uploadEnabled" type="button" class="vm-richtext__btn" title="上传视频" @click="pickVideo"><i class="ri-video-line" /></button>
+        <button type="button" class="vm-richtext__btn" title="YouTube 嵌入" @click="insertYoutube"><i class="ri-youtube-line" /></button>
+        <div ref="emojiWrapRef" class="vm-richtext__emoji-wrap">
+          <button type="button" class="vm-richtext__btn" :class="{ 'is-active': emojiOpen }" title="表情" @click="emojiOpen = !emojiOpen"><i class="ri-emotion-line" /></button>
+          <div v-if="emojiOpen" class="vm-richtext__emoji-panel">
+            <button
+              v-for="(e, i) in VM_RICHTEXT_EMOJIS"
+              :key="i"
+              type="button"
+              class="vm-richtext__emoji-item"
+              @click="insertEmoji(e)"
+            >
+              {{ e }}
+            </button>
+          </div>
+        </div>
+        <span class="vm-richtext__sep" />
+        <button type="button" class="vm-richtext__btn" title="插入表格" @click="insertTable"><i class="ri-table-line" /></button>
+        <button type="button" class="vm-richtext__btn" title="撤销" :disabled="!editor.can().undo()" @click="editor.chain().focus().undo().run()"><i class="ri-arrow-go-back-line" /></button>
+        <button type="button" class="vm-richtext__btn" title="重做" :disabled="!editor.can().redo()" @click="editor.chain().focus().redo().run()"><i class="ri-arrow-go-forward-line" /></button>
       </div>
 
-      <EditorContent
-        class="vm-richtext__content"
-        :editor="editor"
-      />
+      <EditorContent class="vm-richtext__content" :editor="editor" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
 import DOMPurify from 'dompurify'
 import { EditorContent, useEditor } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
@@ -170,46 +82,27 @@ import Image from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
 import Placeholder from '@tiptap/extension-placeholder'
 import Underline from '@tiptap/extension-underline'
+import TextAlign from '@tiptap/extension-text-align'
+import Highlight from '@tiptap/extension-highlight'
+import TextStyle from '@tiptap/extension-text-style'
+import Color from '@tiptap/extension-color'
+import Youtube from '@tiptap/extension-youtube'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableHeader from '@tiptap/extension-table-header'
+import TableCell from '@tiptap/extension-table-cell'
 import { useUpload } from '../../hooks/useUpload'
+import { VM_RICHTEXT_EMOJIS, VmRichtextVideo } from './vm-richtext-extensions'
 
 defineOptions({ name: 'vm-richtext' })
 
 const RICH_TAGS = [
-  'p',
-  'br',
-  'div',
-  'span',
-  'strong',
-  'b',
-  'em',
-  'i',
-  'u',
-  's',
-  'del',
-  'strike',
-  'a',
-  'ul',
-  'ol',
-  'li',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'blockquote',
-  'code',
-  'pre',
-  'img',
-  'table',
-  'thead',
-  'tbody',
-  'tr',
-  'th',
-  'td',
-  'hr',
-  'sup',
-  'sub',
+  'p', 'br', 'div', 'span', 'strong', 'b', 'em', 'i', 'u', 's', 'del', 'strike', 'a',
+  'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre',
+  'img', 'video', 'source', 'iframe', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'hr', 'sup', 'sub',
+  'mark',
 ]
 
 const props = withDefaults(
@@ -219,11 +112,8 @@ const props = withDefaults(
     disabled?: boolean
     placeholder?: string
     height?: number | string
-    /** 自定义上传；未传且 autoUpload=true 时走 useUpload 直传 OSS */
     uploadImage?: (file: File) => Promise<string>
-    /** autoUpload 默认前缀（须 app/public/**） */
     uploadPrefixPath?: string
-    /** false 时禁用插图/粘贴上传（不自动 useUpload） */
     autoUpload?: boolean
   }>(),
   {
@@ -235,43 +125,29 @@ const props = withDefaults(
   },
 )
 
-const emit = defineEmits<{
-  'update:modelValue': [v: string]
-}>()
+const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
 
 const { toUpload } = useUpload()
 const syncing = shallowRef(false)
 const uploading = shallowRef(false)
+const emojiOpen = shallowRef(false)
+const emojiWrapRef = shallowRef<HTMLElement>()
 
 const readOnlyMode = computed(() => props.readonly)
-const uploadEnabled = computed(
-  () => Boolean(props.uploadImage) || props.autoUpload !== false,
-)
+const uploadEnabled = computed(() => Boolean(props.uploadImage) || props.autoUpload !== false)
 
 const shellStyle = computed(() => {
-  const h =
-    typeof props.height === 'number' ? `${props.height}px` : String(props.height || '320px')
-  return {
-    '--vm-richtext-height': h,
-  } as Record<string, string>
+  const h = typeof props.height === 'number' ? `${props.height}px` : String(props.height || '320px')
+  return { '--vm-richtext-height': h } as Record<string, string>
 })
 
 function sanitize(html: string) {
   return DOMPurify.sanitize(html, {
     ALLOWED_TAGS: RICH_TAGS,
     ALLOWED_ATTR: [
-      'href',
-      'target',
-      'rel',
-      'class',
-      'src',
-      'alt',
-      'title',
-      'width',
-      'height',
-      'colspan',
-      'rowspan',
-      'align',
+      'href', 'target', 'rel', 'class', 'src', 'alt', 'title', 'width', 'height',
+      'colspan', 'rowspan', 'align', 'controls', 'style', 'data-youtube-video',
+      'frameborder', 'allowfullscreen', 'allow', 'referrerpolicy',
     ],
   })
 }
@@ -302,17 +178,73 @@ async function insertImage(file: File) {
   }
 }
 
-function pickImage() {
+async function insertVideo(file: File) {
+  if (!editor.value || uploading.value) return
+  uploading.value = true
+  try {
+    const url = await resolveUpload(file)
+    editor.value.chain().focus().setVideo({ src: url }).run()
+  } finally {
+    uploading.value = false
+  }
+}
+
+function pickFile(accept: string, handler: (file: File) => void) {
   const input = document.createElement('input')
   input.type = 'file'
-  input.accept = 'image/*'
+  input.accept = accept
   input.onchange = () => {
     const file = input.files?.[0]
-    if (file) void insertImage(file)
+    if (file) handler(file)
   }
   input.click()
 }
 
+function pickImage() {
+  pickFile('image/*', (file) => void insertImage(file))
+}
+
+function pickVideo() {
+  pickFile('video/*', (file) => void insertVideo(file))
+}
+
+function insertEmoji(emoji: string) {
+  editor.value?.chain().focus().insertContent(emoji).run()
+  emojiOpen.value = false
+}
+
+function insertYoutube() {
+  const ed = editor.value
+  if (!ed) return
+  const url = window.prompt('YouTube 链接', 'https://www.youtube.com/watch?v=')
+  if (url == null) return
+  const src = url.trim()
+  if (!src) return
+  ed.chain().focus().setYoutubeVideo({ src }).run()
+}
+
+function insertTable() {
+  editor.value
+    ?.chain()
+    .focus()
+    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+    .run()
+}
+
+function pickTextColor() {
+  const ed = editor.value
+  if (!ed) return
+  const current = (ed.getAttributes('textStyle').color as string | undefined) || '#111827'
+  const color = window.prompt('文字颜色（#RRGGBB）', current)
+  if (color == null) return
+  const v = color.trim()
+  if (!v) {
+    ed.chain().focus().unsetColor().run()
+    return
+  }
+  ed.chain().focus().setColor(v).run()
+}
+
 function toggleLink() {
   const ed = editor.value
   if (!ed) return
@@ -331,51 +263,75 @@ function toggleLink() {
   ed.chain().focus().extendMarkRange('link').setLink({ href, target: '_blank', rel: 'noopener noreferrer' }).run()
 }
 
+function handleMediaPaste(event: ClipboardEvent) {
+  if (!uploadEnabled.value) return false
+  const items = Array.from(event.clipboardData?.items || [])
+  const imageItem = items.find((item) => item.type.startsWith('image/'))
+  if (imageItem) {
+    const file = imageItem.getAsFile()
+    if (!file) return false
+    event.preventDefault()
+    void insertImage(file)
+    return true
+  }
+  const videoItem = items.find((item) => item.type.startsWith('video/'))
+  if (videoItem) {
+    const file = videoItem.getAsFile()
+    if (!file) return false
+    event.preventDefault()
+    void insertVideo(file)
+    return true
+  }
+  return false
+}
+
+function handleMediaDrop(event: DragEvent, moved: boolean) {
+  if (moved || !uploadEnabled.value) return false
+  const files = Array.from(event.dataTransfer?.files || [])
+  const image = files.find((f) => f.type.startsWith('image/'))
+  if (image) {
+    event.preventDefault()
+    void insertImage(image)
+    return true
+  }
+  const video = files.find((f) => f.type.startsWith('video/'))
+  if (video) {
+    event.preventDefault()
+    void insertVideo(video)
+    return true
+  }
+  return false
+}
+
 const editor = useEditor({
   content: normalizeHtml(String(props.modelValue || '')),
   editable: !props.disabled,
   extensions: [
-    StarterKit.configure({
-      heading: { levels: [2, 3] },
-    }),
+    StarterKit.configure({ heading: { levels: [2, 3] } }),
     Underline,
+    TextStyle,
+    Color,
+    Highlight.configure({ multicolor: false }),
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    TaskList,
+    TaskItem.configure({ nested: true }),
     Link.configure({
       openOnClick: false,
-      HTMLAttributes: {
-        rel: 'noopener noreferrer',
-        target: '_blank',
-      },
+      HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
     }),
     Image.configure({ allowBase64: false }),
-    Placeholder.configure({
-      placeholder: props.placeholder,
-    }),
+    VmRichtextVideo,
+    Youtube.configure({ width: 640, height: 360, nocookie: true }),
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    Placeholder.configure({ placeholder: props.placeholder }),
   ],
   editorProps: {
-    attributes: {
-      class: 'vm-richtext__prose',
-    },
-    handlePaste: (_view, event) => {
-      if (!uploadEnabled.value) return false
-      const items = Array.from(event.clipboardData?.items || [])
-      const imageItem = items.find((item) => item.type.startsWith('image/'))
-      if (!imageItem) return false
-      const file = imageItem.getAsFile()
-      if (!file) return false
-      event.preventDefault()
-      void insertImage(file)
-      return true
-    },
-    handleDrop: (_view, event, _slice, moved) => {
-      if (moved || !uploadEnabled.value) return false
-      const file = Array.from(event.dataTransfer?.files || []).find((f) =>
-        f.type.startsWith('image/'),
-      )
-      if (!file) return false
-      event.preventDefault()
-      void insertImage(file)
-      return true
-    },
+    attributes: { class: 'vm-richtext__prose' },
+    handlePaste: (_view, event) => handleMediaPaste(event),
+    handleDrop: (_view, event, _slice, moved) => handleMediaDrop(event, moved),
   },
   onUpdate: ({ editor: ed }) => {
     if (syncing.value) return
@@ -383,28 +339,30 @@ const editor = useEditor({
   },
 })
 
-watch(
-  () => props.modelValue,
-  (next) => {
-    const ed = editor.value
-    if (!ed || readOnlyMode.value) return
-    const html = normalizeHtml(String(next || ''))
-    const current = normalizeHtml(ed.getHTML())
-    if (current === html) return
-    syncing.value = true
-    ed.commands.setContent(html || '<p></p>', false)
-    syncing.value = false
-  },
-)
+watch(() => props.modelValue, (next) => {
+  const ed = editor.value
+  if (!ed || readOnlyMode.value) return
+  const html = normalizeHtml(String(next || ''))
+  const current = normalizeHtml(ed.getHTML())
+  if (current === html) return
+  syncing.value = true
+  ed.commands.setContent(html || '<p></p>', false)
+  syncing.value = false
+})
 
-watch(
-  () => props.disabled,
-  (v) => {
-    editor.value?.setEditable(!v)
-  },
-)
+watch(() => props.disabled, (v) => {
+  editor.value?.setEditable(!v)
+})
 
+function onDocClick(e: MouseEvent) {
+  if (!emojiOpen.value) return
+  const el = emojiWrapRef.value
+  if (el && !el.contains(e.target as Node)) emojiOpen.value = false
+}
+
+onMounted(() => document.addEventListener('click', onDocClick))
 onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocClick)
   editor.value?.destroy()
 })
 </script>
@@ -459,10 +417,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
 
-  i {
-    font-size: 15px;
-    line-height: 1;
-  }
+  i { font-size: 15px; line-height: 1; }
 
   &:hover:not(:disabled) {
     background: color-mix(in srgb, var(--brand) 10%, transparent);
@@ -474,10 +429,7 @@ onBeforeUnmount(() => {
     color: var(--brand);
   }
 
-  &:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
+  &:disabled { opacity: 0.35; cursor: not-allowed; }
 }
 
 .vm-richtext__sep {
@@ -487,6 +439,43 @@ onBeforeUnmount(() => {
   background: var(--border);
 }
 
+.vm-richtext__emoji-wrap {
+  position: relative;
+}
+
+.vm-richtext__emoji-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: repeat(8, 28px);
+  gap: 2px;
+  width: max-content;
+  max-width: 240px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card);
+  box-shadow: var(--shadow-soft);
+}
+
+.vm-richtext__emoji-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover { background: var(--muted); }
+}
+
 .vm-richtext__content {
   height: var(--vm-richtext-height, 320px) !important;
   min-height: var(--vm-richtext-height, 320px) !important;
@@ -502,43 +491,15 @@ onBeforeUnmount(() => {
   line-height: 1.65;
   word-break: break-word;
 
-  :deep(p) {
-    margin: 0.5em 0;
-  }
-
-  :deep(ul),
-  :deep(ol) {
-    margin: 0.5em 0;
-    padding-left: 1.25em;
-  }
-
-  :deep(a) {
-    color: var(--brand);
-    text-decoration: underline;
-  }
-
-  :deep(img) {
-    max-width: 100%;
-    height: auto;
-    margin: 8px 0;
-    border-radius: 8px;
-  }
-
-  :deep(blockquote) {
-    margin: 0.5em 0;
-    padding-left: 12px;
-    border-left: 3px solid var(--border);
-    color: var(--muted-foreground);
-  }
-
-  :deep(h1),
-  :deep(h2),
-  :deep(h3),
-  :deep(h4) {
-    margin: 0.65em 0 0.35em;
-    font-weight: 650;
-    line-height: 1.35;
-  }
+  :deep(p) { margin: 0.5em 0; }
+  :deep(ul), :deep(ol) { margin: 0.5em 0; padding-left: 1.25em; }
+  :deep(a) { color: var(--brand); text-decoration: underline; }
+  :deep(img), :deep(video) { max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
+  :deep(iframe) { max-width: 100%; margin: 8px 0; border: none; border-radius: 8px; }
+  :deep(table) { width: 100%; border-collapse: collapse; margin: 8px 0; }
+  :deep(th), :deep(td) { border: 1px solid var(--border); padding: 6px 8px; }
+  :deep(blockquote) { margin: 0.5em 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
+  :deep(h1), :deep(h2), :deep(h3), :deep(h4) { margin: 0.65em 0 0.35em; font-weight: 650; line-height: 1.35; }
 }
 
 .vm-richtext.is-readonly .vm-richtext__html {
@@ -557,9 +518,7 @@ onBeforeUnmount(() => {
   font-size: 14px;
   line-height: 1.65;
 
-  p {
-    margin: 0.45em 0;
-  }
+  p { margin: 0.45em 0; }
 
   p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
@@ -569,58 +528,23 @@ onBeforeUnmount(() => {
     color: var(--muted-foreground);
   }
 
-  h2,
-  h3 {
-    margin: 0.75em 0 0.35em;
-    font-weight: 650;
-    line-height: 1.35;
-  }
-
-  ul,
-  ol {
-    margin: 0.45em 0;
-    padding-left: 1.25em;
-  }
-
-  blockquote {
-    margin: 0.45em 0;
-    padding-left: 12px;
-    border-left: 3px solid var(--border);
-    color: var(--muted-foreground);
-  }
-
-  a {
-    color: var(--brand);
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    margin: 8px 0;
-    border-radius: 8px;
-  }
-
-  code {
-    padding: 0.1em 0.35em;
-    border-radius: 4px;
-    background: var(--muted);
-    font-size: 0.92em;
-  }
-
-  pre {
-    margin: 0.5em 0;
-    padding: 10px 12px;
-    border-radius: 8px;
-    background: var(--muted);
-    overflow-x: auto;
-
-    code {
-      padding: 0;
-      background: transparent;
-    }
+  h2, h3 { margin: 0.75em 0 0.35em; font-weight: 650; line-height: 1.35; }
+  ul, ol { margin: 0.45em 0; padding-left: 1.25em; }
+  ul[data-type='taskList'] { list-style: none; padding-left: 0.25em; }
+  ul[data-type='taskList'] li { display: flex; gap: 8px; align-items: flex-start; }
+  ul[data-type='taskList'] li label { margin-top: 2px; }
+  blockquote { margin: 0.45em 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
+  a { color: var(--brand); text-decoration: underline; cursor: pointer; }
+  img, video { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
+  iframe { display: block; max-width: 100%; margin: 8px 0; border: none; border-radius: 8px; }
+  mark { background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 2px; padding: 0 2px; }
+  code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--muted); font-size: 0.92em; }
+  pre { margin: 0.5em 0; padding: 10px 12px; border-radius: 8px; background: var(--muted); overflow-x: auto;
+    code { padding: 0; background: transparent; }
   }
+  table { width: 100%; border-collapse: collapse; margin: 8px 0; }
+  th, td { border: 1px solid var(--border); padding: 6px 8px; vertical-align: top; }
+  th { background: var(--muted); font-weight: 600; }
+  hr { margin: 12px 0; border: none; border-top: 1px solid var(--border); }
 }
 </style>