mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: parseHTML for attributes should return the value instead of an object now, fix #1863

Browse Source
This commit is contained in:
Philipp Kühn 2021-09-08 23:53:44 +02:00
parent d3285e9308
commit 8a3b47a529
17 changed files with 38 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demos/src/Examples/Tables/React/index.jsx
View File

@ -16,11 +16,7 @@ const CustomTableCell = TableCell.extend({
// and add a new one …
backgroundColor: {
default: null,
parseHTML: element => {
return {
backgroundColor: element.getAttribute('data-background-color'),
}
},
parseHTML: element => element.getAttribute('data-background-color'),
renderHTML: attributes => {
return {
'data-background-color': attributes.backgroundColor,
@ -36,7 +32,7 @@ export const tableHTML = `
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>

6
demos/src/Examples/Tables/Vue/index.vue
View File

@ -76,11 +76,7 @@ const CustomTableCell = TableCell.extend({
// and add a new one …
backgroundColor: {
default: null,
parseHTML: element => {
return {
backgroundColor: element.getAttribute('data-background-color'),
}
},
parseHTML: element => element.getAttribute('data-background-color'),
renderHTML: attributes => {
return {
'data-background-color': attributes.backgroundColor,

6
demos/src/Experiments/Embeds/Vue/iframe.ts
View File

@ -42,11 +42,7 @@ export default Node.create({
},
allowfullscreen: {
default: this.options.allowFullscreen,
parseHTML: () => {
return {
allowfullscreen: this.options.allowFullscreen,
}
},
parseHTML: () => this.options.allowFullscreen,
},
}
},

18
demos/src/Experiments/Figure/Vue/figure.ts
View File

@ -57,29 +57,17 @@ export const Figure = Node.create<FigureOptions>({
return {
src: {
default: null,
parseHTML: element => {
return {
src: element.querySelector('img')?.getAttribute('src'),
}
},
parseHTML: element => element.querySelector('img')?.getAttribute('src'),
},
alt: {
default: null,
parseHTML: element => {
return {
alt: element.querySelector('img')?.getAttribute('alt'),
}
},
parseHTML: element => element.querySelector('img')?.getAttribute('alt'),
},
title: {
default: null,
parseHTML: element => {
return {
title: element.querySelector('img')?.getAttribute('title'),
}
},
parseHTML: element => element.querySelector('img')?.getAttribute('title'),
},
}
},

12
docs/src/docPages/guide/custom-extensions.md
View File

@ -163,11 +163,7 @@ const CustomParagraph = Paragraph.extend({
color: {
default: null,
// Customize the HTML parsing (for example, to load the initial content)
parseHTML: element => {
return {
color: element.getAttribute('data-color'),
}
},
parseHTML: element => element.getAttribute('data-color'),
// … and customize the HTML rendering.
renderHTML: attributes => {
return {
@ -187,7 +183,7 @@ const CustomParagraph = Paragraph.extend({
You can completly disable the rendering of attributes with `rendered: false`.
#### Extend existing attributes
If you want to add an attribute to an extension and keep existing attributes, you can access them through `this.parent()`.
If you want to add an attribute to an extension and keep existing attributes, you can access them through `this.parent()`.
In some cases, it is undefined, so make sure to check for that case, or use optional chaining `this.parent?.()`
@ -228,9 +224,7 @@ const TextAlign = Extension.create({
renderHTML: attributes => ({
style: `text-align: ${attributes.textAlign}`,
}),
parseHTML: element => ({
textAlign: element.style.textAlign || 'left',
}),
parseHTML: element => element.style.textAlign || 'left',
},
},
},

20
packages/core/src/helpers/injectExtensionAttributesToParseRule.ts
View File

@ -1,6 +1,7 @@
import { ParseRule } from 'prosemirror-model'
import { ExtensionAttribute } from '../types'
import fromString from '../utilities/fromString'
import isObject from '../utilities/isObject'
/**
* This function merges extension attributes into parserule attributes (`attrs` or `getAttrs`).
@ -27,18 +28,21 @@ export default function injectExtensionAttributesToParseRule(parseRule: ParseRul
const newAttributes = extensionAttributes
.filter(item => item.attribute.rendered)
.reduce((items, item) => {
const attributes = item.attribute.parseHTML
? item.attribute.parseHTML(node as HTMLElement) || {}
: {
[item.name]: fromString((node as HTMLElement).getAttribute(item.name)),
}
const value = item.attribute.parseHTML
? item.attribute.parseHTML(node as HTMLElement)
: fromString((node as HTMLElement).getAttribute(item.name))
const filteredAttributes = Object.fromEntries(Object.entries(attributes)
.filter(([, value]) => value !== undefined && value !== null))
if (isObject(value)) {
console.warn(`[tiptap warn]: BREAKING CHANGE: "parseHTML" for your attribute "${item.name}" returns an object but should return the value itself. If this is expected you can ignore this message. This warning will be removed in one of the next releases. Further information: https://github.com/ueberdosis/tiptap/issues/1863`)
}
if (value === null || value === undefined) {
return items
}
return {
...items,
...filteredAttributes,
[item.name]: value,
}
}, {})

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

@ -98,7 +98,7 @@ export type Attribute = {
default: any,
rendered?: boolean,
renderHTML?: ((attributes: Record<string, any>) => Record<string, any> | null) | null,
parseHTML?: ((element: HTMLElement) => Record<string, any> | null) | null,
parseHTML?: ((element: HTMLElement) => any | null) | null,
keepOnSplit: boolean,
}

4
packages/extension-code-block/src/code-block.ts
View File

@ -58,9 +58,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
return null
}
return {
language,
}
return language
},
renderHTML: attributes => {
if (!attributes.language) {

6
packages/extension-color/src/color.ts
View File

@ -34,6 +34,7 @@ export const Color = Extension.create<ColorOptions>({
attributes: {
color: {
default: null,
parseHTML: element => element.style.color.replace(/['"]+/g, ''),
renderHTML: attributes => {
if (!attributes.color) {
return {}
@ -43,11 +44,6 @@ export const Color = Extension.create<ColorOptions>({
style: `color: ${attributes.color}`,
}
},
parseHTML: element => {
return {
color: element.style.color.replace(/['"]+/g, ''),
}
},
},
},
},

4
packages/extension-font-family/src/font-family.ts
View File

@ -34,6 +34,7 @@ export const FontFamily = Extension.create<FontFamilyOptions>({
attributes: {
fontFamily: {
default: null,
parseHTML: element => element.style.fontFamily.replace(/['"]+/g, ''),
renderHTML: attributes => {
if (!attributes.fontFamily) {
return {}
@ -43,9 +44,6 @@ export const FontFamily = Extension.create<FontFamilyOptions>({
style: `font-family: ${attributes.fontFamily}`,
}
},
parseHTML: element => ({
fontFamily: element.style.fontFamily.replace(/['"]+/g, ''),
}),
},
},
},

6
packages/extension-highlight/src/highlight.ts
View File

@ -48,11 +48,7 @@ export const Highlight = Mark.create<HighlightOptions>({
return {
color: {
default: null,
parseHTML: element => {
return {
color: element.getAttribute('data-color') || element.style.backgroundColor,
}
},
parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,
renderHTML: attributes => {
if (!attributes.color) {
return {}

12
packages/extension-mention/src/mention.ts
View File

@ -68,11 +68,7 @@ export const Mention = Node.create<MentionOptions>({
return {
id: {
default: null,
parseHTML: element => {
return {
id: element.getAttribute('data-id'),
}
},
parseHTML: element => element.getAttribute('data-id'),
renderHTML: attributes => {
if (!attributes.id) {
return {}
@ -86,11 +82,7 @@ export const Mention = Node.create<MentionOptions>({
label: {
default: null,
parseHTML: element => {
return {
label: element.getAttribute('data-label'),
}
},
parseHTML: element => element.getAttribute('data-label'),
renderHTML: attributes => {
if (!attributes.label) {
return {}

8
packages/extension-ordered-list/src/ordered-list.ts
View File

@ -33,11 +33,11 @@ export const OrderedList = Node.create<OrderedListOptions>({
return {
start: {
default: 1,
parseHTML: element => ({
start: element.hasAttribute('start')
parseHTML: element => {
return element.hasAttribute('start')
? parseInt(element.getAttribute('start') || '', 10)
: 1,
}),
: 1
},
},
}
},

4
packages/extension-table-cell/src/table-cell.ts
View File

@ -29,9 +29,7 @@ export const TableCell = Node.create<TableCellOptions>({
? [parseInt(colwidth, 10)]
: null
return {
colwidth: value,
}
return value
},
},
}

4
packages/extension-table-header/src/table-header.ts
View File

@ -28,9 +28,7 @@ export const TableHeader = Node.create<TableHeaderOptions>({
? [parseInt(colwidth, 10)]
: null
return {
colwidth: value,
}
return value
},
},
}

6
packages/extension-task-item/src/task-item.ts
View File

@ -26,13 +26,11 @@ export const TaskItem = Node.create<TaskItemOptions>({
return {
checked: {
default: false,
parseHTML: element => ({
checked: element.getAttribute('data-checked') === 'true',
}),
keepOnSplit: false,
parseHTML: element => element.getAttribute('data-checked') === 'true',
renderHTML: attributes => ({
'data-checked': attributes.checked,
}),
keepOnSplit: false,
},
}
},

4
packages/extension-text-align/src/text-align.ts
View File

@ -37,9 +37,7 @@ export const TextAlign = Extension.create<TextAlignOptions>({
attributes: {
textAlign: {
default: this.options.defaultAlignment,
parseHTML: element => ({
textAlign: element.style.textAlign || this.options.defaultAlignment,
}),
parseHTML: element => element.style.textAlign || this.options.defaultAlignment,
renderHTML: attributes => {
if (attributes.textAlign === this.options.defaultAlignment) {
return {}