ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

implement basic parseHTML for global attributes

Browse Source
This commit is contained in:
Philipp Kühn
2020-10-23 22:55:48 +02:00
parent 4bff000751
commit 56df3bd392
4 changed files with 35 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/types.ts
View File

@@ -10,7 +10,9 @@ export type Attribute = {
renderHTML?: (attributes: { renderHTML?: (attributes: {
[key: string]: any, [key: string]: any,
}) => any, }) => any,
parseHTML?: () => any, parseHTML?: (node: HTMLElement) => {
[key: string]: any,
},
} }
export type Attributes = { export type Attributes = {

2
packages/core/src/utils/getAttributesFromExtensions.ts
View File

@@ -15,7 +15,7 @@ export default function getAttributesFromExtensions(extensions: Extensions) {
default: null, default: null,
rendered: true, rendered: true,
renderHTML: () => ({}), renderHTML: () => ({}),
parseHTML: () => null, parseHTML: () => ({}),
} }
extensions.forEach(extension => { extensions.forEach(extension => {

37
packages/core/src/utils/getSchema.ts
View File

@@ -25,7 +25,7 @@ export default function getSchema(extensions: Extensions): Schema {
options: extension.options, options: extension.options,
} }
const attributes = allAttributes.filter(attribute => attribute.type === extension.name) const extensionAttributes = allAttributes.filter(attribute => attribute.type === extension.name)
const schema: NodeSpec = cleanUpSchemaItem({ const schema: NodeSpec = cleanUpSchemaItem({
content: extension.content, content: extension.content,
@@ -38,15 +38,34 @@ export default function getSchema(extensions: Extensions): Schema {
code: extension.code, code: extension.code,
defining: extension.defining, defining: extension.defining,
isolating: extension.isolating, isolating: extension.isolating,
attrs: Object.fromEntries(attributes.map(attribute => { attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => {
return [attribute.name, { default: attribute?.attribute?.default }] return [extensionAttribute.name, { default: extensionAttribute?.attribute?.default }]
})), })),
parseDOM: extension.parseHTML.bind(context)(), parseDOM: extension.parseHTML.bind(context)()?.map(parseRule => {
if (parseRule.style) {
return parseRule
}
return {
...parseRule,
getAttrs: node => {
const oldAttributes = parseRule.getAttrs ? parseRule.getAttrs(node) : {}
const newAttributes = extensionAttributes
.filter(item => item.attribute.rendered)
.reduce((items, item) => ({
...items,
...item.attribute.parseHTML(node as HTMLElement),
}), {})
return { ...oldAttributes, ...newAttributes }
},
}
}),
...(typeof extension.renderHTML === 'function') && { ...(typeof extension.renderHTML === 'function') && {
toDOM: node => { toDOM: node => {
return (extension.renderHTML as Function).bind(context)({ return (extension.renderHTML as Function).bind(context)({
node, node,
attributes: getRenderedAttributes(node, attributes), attributes: getRenderedAttributes(node, extensionAttributes),
}) })
}, },
}, },
@@ -60,22 +79,22 @@ export default function getSchema(extensions: Extensions): Schema {
options: extension.options, options: extension.options,
} }
const attributes = allAttributes.filter(attribute => attribute.type === extension.name) const extensionAttributes = allAttributes.filter(attribute => attribute.type === extension.name)
const schema: MarkSpec = cleanUpSchemaItem({ const schema: MarkSpec = cleanUpSchemaItem({
inclusive: extension.inclusive, inclusive: extension.inclusive,
excludes: extension.excludes, excludes: extension.excludes,
group: extension.group, group: extension.group,
spanning: extension.spanning, spanning: extension.spanning,
attrs: Object.fromEntries(attributes.map(attribute => { attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => {
return [attribute.name, { default: attribute?.attribute?.default }] return [extensionAttribute.name, { default: extensionAttribute?.attribute?.default }]
})), })),
parseDOM: extension.parseHTML.bind(context)(), parseDOM: extension.parseHTML.bind(context)(),
...(typeof extension.renderHTML === 'function') && { ...(typeof extension.renderHTML === 'function') && {
toDOM: mark => { toDOM: mark => {
return (extension.renderHTML as Function).bind(context)({ return (extension.renderHTML as Function).bind(context)({
mark, mark,
attributes: getRenderedAttributes(mark, attributes), attributes: getRenderedAttributes(mark, extensionAttributes),
}) })
}, },
}, },

3
packages/extension-text-align/index.ts
View File

@@ -21,6 +21,9 @@ const TextAlign = createExtension({
renderHTML: attributes => ({ renderHTML: attributes => ({
style: `text-align: ${attributes.textAlign}`, style: `text-align: ${attributes.textAlign}`,
}), }),
parseHTML: node => ({
textAlign: node.style.textAlign,
}),
}, },
}, },
}, },