1ce99e2bb6
Added getAttrs functions to parseHTML in tiptap-button-extension.ts. Now properly extracts text/href/style from DOM elements: - data-button: extracts from data-text, data-href, data-style - a.button: extracts text/href, defaults to solid style - a.button-outline: extracts text/href, defaults to outline style This fixes the issue where buttons appeared unstyled (outline instead of solid) when editing a card that contained buttons.
124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import { Node, mergeAttributes } from '@tiptap/core';
|
|
|
|
export interface ButtonOptions {
|
|
HTMLAttributes: Record<string, any>;
|
|
}
|
|
|
|
declare module '@tiptap/core' {
|
|
interface Commands<ReturnType> {
|
|
button: {
|
|
setButton: (options: { text: string; href: string; style?: 'solid' | 'outline' }) => ReturnType;
|
|
};
|
|
}
|
|
}
|
|
|
|
export const ButtonExtension = Node.create<ButtonOptions>({
|
|
name: 'button',
|
|
|
|
group: 'inline',
|
|
|
|
inline: true,
|
|
|
|
atom: true,
|
|
|
|
addAttributes() {
|
|
return {
|
|
text: {
|
|
default: 'Click Here',
|
|
},
|
|
href: {
|
|
default: '#',
|
|
},
|
|
style: {
|
|
default: 'solid',
|
|
},
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [
|
|
{
|
|
tag: 'a[data-button]',
|
|
getAttrs: (node: HTMLElement) => ({
|
|
text: node.getAttribute('data-text') || node.textContent || 'Click Here',
|
|
href: node.getAttribute('data-href') || node.getAttribute('href') || '#',
|
|
style: node.getAttribute('data-style') || 'solid',
|
|
}),
|
|
},
|
|
{
|
|
tag: 'a.button',
|
|
getAttrs: (node: HTMLElement) => ({
|
|
text: node.textContent || 'Click Here',
|
|
href: node.getAttribute('href') || '#',
|
|
style: 'solid',
|
|
}),
|
|
},
|
|
{
|
|
tag: 'a.button-outline',
|
|
getAttrs: (node: HTMLElement) => ({
|
|
text: node.textContent || 'Click Here',
|
|
href: node.getAttribute('href') || '#',
|
|
style: 'outline',
|
|
}),
|
|
},
|
|
];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
const { text, href, style } = HTMLAttributes;
|
|
const className = style === 'outline' ? 'button-outline' : 'button';
|
|
|
|
const buttonStyle: Record<string, string> = style === 'solid'
|
|
? {
|
|
display: 'inline-block',
|
|
background: '#7f54b3',
|
|
color: '#fff',
|
|
padding: '14px 28px',
|
|
borderRadius: '6px',
|
|
textDecoration: 'none',
|
|
fontWeight: '600',
|
|
cursor: 'pointer',
|
|
}
|
|
: {
|
|
display: 'inline-block',
|
|
background: 'transparent',
|
|
color: '#7f54b3',
|
|
padding: '12px 26px',
|
|
border: '2px solid #7f54b3',
|
|
borderRadius: '6px',
|
|
textDecoration: 'none',
|
|
fontWeight: '600',
|
|
cursor: 'pointer',
|
|
};
|
|
|
|
return [
|
|
'a',
|
|
mergeAttributes(this.options.HTMLAttributes, {
|
|
href,
|
|
class: className,
|
|
style: Object.entries(buttonStyle)
|
|
.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
|
|
.join('; '),
|
|
'data-button': '',
|
|
'data-text': text,
|
|
'data-href': href,
|
|
'data-style': style,
|
|
}),
|
|
text,
|
|
];
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
setButton:
|
|
(options) =>
|
|
({ commands }) => {
|
|
return commands.insertContent({
|
|
type: this.name,
|
|
attrs: options,
|
|
});
|
|
},
|
|
};
|
|
},
|
|
});
|