remove typenames extension and move attribute logic back to the schema initialization logic

This commit is contained in:
Dominik Biedebach 2024-10-30 16:21:33 +01:00
parent 0f450d7edd
commit a2d810f446
7 changed files with 34 additions and 37 deletions

View File

@ -230,6 +230,6 @@ const content = `
export default () => {
return (
<EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
<EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content} rendering={{ addTypeAttributes: true }}></EditorProvider>
)
}

View File

@ -16,7 +16,6 @@ import {
ClipboardTextSerializer, Commands, Drop, Editable, FocusEvents, Keymap, Paste,
Tabindex,
} from './extensions/index.js'
import { Typenames } from './extensions/typenames.js'
import { createDocument } from './helpers/createDocument.js'
import { getAttributes } from './helpers/getAttributes.js'
import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
@ -79,8 +78,9 @@ export class Editor extends EventEmitter<EditorEvents> {
coreExtensionOptions: {},
enableInputRules: true,
enablePasteRules: true,
enableCoreExtensions: { typenames: false },
enableCoreExtensions: true,
enableContentCheck: false,
addTypeAttributes: false,
onBeforeCreate: () => null,
onCreate: () => null,
onUpdate: () => null,
@ -287,7 +287,6 @@ export class Editor extends EventEmitter<EditorEvents> {
Tabindex,
Drop,
Paste,
Typenames,
].filter(ext => {
if (typeof this.options.enableCoreExtensions === 'object') {
return this.options.enableCoreExtensions[ext.name as keyof typeof this.options.enableCoreExtensions] !== false

View File

@ -272,6 +272,7 @@ export class ExtensionManager {
const extensionAttributes = this.attributes.filter(
attribute => attribute.type === extension.name,
)
const context = {
name: extension.name,
options: extension.options,

View File

@ -1,19 +0,0 @@
import { Extension } from '../Extension.js'
export const Typenames = Extension.create({
name: 'typenames',
addGlobalAttributes() {
return this.extensions.filter(extension => {
return extension.name !== 'text' && extension.name !== 'doc'
}).map(extension => ({
types: [extension.name],
attributes: {
'data-tiptap': {
default: extension.name,
rendered: true,
},
},
}))
},
})

View File

@ -3,11 +3,6 @@ import { DOMSerializer, Fragment, Schema } from '@tiptap/pm/model'
export function getHTMLFromFragment(fragment: Fragment, schema: Schema): string {
const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(fragment)
// remove the data-tiptap attribute
documentFragment.querySelectorAll('[data-tiptap]').forEach(node => {
node.removeAttribute('data-tiptap')
})
const temporaryDocument = document.implementation.createHTMLDocument()
const container = temporaryDocument.createElement('div')

View File

@ -106,10 +106,19 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
)
if (renderHTML) {
schema.toDOM = node => renderHTML({
node,
HTMLAttributes: getRenderedAttributes(node, extensionAttributes),
})
schema.toDOM = node => {
const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
if (editor?.options.addTypeAttributes) {
HTMLAttributes['data-tiptap-element'] = ''
HTMLAttributes['data-tiptap-name'] = extension.name
}
return renderHTML({
node,
HTMLAttributes,
})
}
}
const renderText = getExtensionField<NodeConfig['renderText']>(
@ -186,10 +195,19 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
)
if (renderHTML) {
schema.toDOM = mark => renderHTML({
mark,
HTMLAttributes: getRenderedAttributes(mark, extensionAttributes),
})
schema.toDOM = mark => {
const HTMLAttributes = getRenderedAttributes(mark, extensionAttributes)
if (editor?.options.addTypeAttributes) {
HTMLAttributes['data-tiptap-element'] = ''
HTMLAttributes['data-tiptap-name'] = extension.name
}
return renderHTML({
mark,
HTMLAttributes,
})
}
}
return [extension.name, schema]

View File

@ -114,7 +114,6 @@ export interface EditorOptions {
| 'focusEvents'
| 'keymap'
| 'tabindex'
| 'typenames'
| 'drop'
| 'paste',
false
@ -127,6 +126,10 @@ export interface EditorOptions {
* @default false
*/
enableContentCheck: boolean;
/**
* If `true`, all editor nodes will have a `data-tiptap-element` attribute with the node type name.
*/
addTypeAttributes?: boolean;
onBeforeCreate: (props: EditorEvents['beforeCreate']) => void;
onCreate: (props: EditorEvents['create']) => void;
/**