Add CustomDiv extension to preserve div tags in Jeditor

This commit is contained in:
jingrow 2025-11-14 12:52:18 +08:00
parent be79e5e46d
commit ffc10a7089

View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
import { Editor, Extension } from '@tiptap/core'
import { Editor, Extension, Node } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
@ -67,6 +67,24 @@ let editor: Editor | null = null
let sourceShowing = false
let sourceTextarea: HTMLTextAreaElement | null = null
// CustomDiv div p
// content 'block*' heading, paragraph, table
const CustomDiv = Node.create({
name: 'customDiv',
group: 'block',
content: 'block*',
parseHTML() {
return [
{
tag: 'div',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['div', HTMLAttributes, 0]
},
})
// FontSize jingrow TextStyle setFontSize/unsetFontSize
// jingrow extensions
const FontSize = Extension.create({
@ -147,7 +165,7 @@ function dropdown(title: string, iconName: string, items: Array<{ label: string;
menu.appendChild(item)
})
btn.onmousedown = (e) => { e.preventDefault(); menu.style.display = menu.style.display === 'block' ? 'none' : 'block' }
document.addEventListener('mousedown', (e) => { if (!wrap.contains(e.target as Node)) menu.style.display = 'none' })
document.addEventListener('mousedown', (e) => { if (!wrap.contains(e.target as globalThis.Node)) menu.style.display = 'none' })
btn.appendChild(caret)
wrap.appendChild(menu)
return wrap
@ -606,7 +624,10 @@ function mountControl() {
content: props.modelValue || '',
editable: !props.disabled,
extensions: [
Document,
Document.extend({
content: '(heading | paragraph | blockquote | codeBlock | horizontalRule | customDiv | table | bulletList | orderedList | taskList)+',
}),
CustomDiv,
Paragraph,
Text,
Bold,