nocodb/packages/nc-gui/components/cell/RichText.vue

<script lang="ts" setup>
import StarterKit from '@tiptap/starter-kit'
import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'
import { EditorContent, useEditor } from '@tiptap/vue-3'
import TurndownService from 'turndown'
import { parse } from 'marked'
import { generateJSON } from '@tiptap/html'
import Underline from '@tiptap/extension-underline'

const props = defineProps<{
  value?: string | null
  readonly?: boolean
}>()

const emits = defineEmits(['update:value'])

const turndownService = new TurndownService()

const vModel = useVModel(props, 'value', emits, { defaultValue: '' })

const tiptapExtensions = [
  StarterKit,
  TaskList,
  TaskItem.configure({
    nested: true,
  }),
  Underline,
]

const editor = useEditor({
  extensions: tiptapExtensions,
  onUpdate: ({ editor }) => {
    const markdown = turndownService.turndown(editor.getHTML())

    vModel.value = markdown
  },
  editable: !props.readonly,
})

const setEditorContent = (contentMd: any) => {
  if (!editor.value) return
  ;(editor.value.state as any).history$.prevRanges = null
  ;(editor.value.state as any).history$.done.eventCount = 0

  const selection = editor.value.view.state.selection

  const contentHtml = parse(contentMd)

  const content = generateJSON(contentHtml, tiptapExtensions)

  editor.value.chain().setContent(content).setTextSelection(selection.to).run()
}

onMounted(() => {
  setTimeout(() => {
    setEditorContent(vModel.value)
  }, 300)
})
</script>

<template>
  <EditorContent :editor="editor" class="nc-textarea-rich w-full h-full" />
  <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" />
</template>

<style lang="scss">
.nc-textarea-rich {
  .ProseMirror {
    @apply min-h-full;
  }
  .ProseMirror-focused {
    // remove all border
    outline: none;
  }
}
</style>