112 lines
2.8 KiB
TypeScript
112 lines
2.8 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' | 'link' }) => 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]',
|
|
priority: 100, // Higher priority than Link extension (default 50)
|
|
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',
|
|
priority: 100,
|
|
getAttrs: (node: HTMLElement) => ({
|
|
text: node.textContent || 'Click Here',
|
|
href: node.getAttribute('href') || '#',
|
|
style: 'solid',
|
|
}),
|
|
},
|
|
{
|
|
tag: 'a.button-outline',
|
|
priority: 100,
|
|
getAttrs: (node: HTMLElement) => ({
|
|
text: node.textContent || 'Click Here',
|
|
href: node.getAttribute('href') || '#',
|
|
style: 'outline',
|
|
}),
|
|
},
|
|
];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
const { text, href, style } = HTMLAttributes;
|
|
|
|
// Different styling based on button style
|
|
let inlineStyle: string;
|
|
if (style === 'link') {
|
|
// Plain link - just underlined text, no button-like appearance
|
|
inlineStyle = 'color: #7f54b3; text-decoration: underline; cursor: pointer;';
|
|
} else {
|
|
// Solid/Outline buttons - show as styled link with background hint
|
|
inlineStyle = 'color: #7f54b3; text-decoration: underline; cursor: pointer; font-weight: 600; background: rgba(127,84,179,0.1); padding: 2px 6px; border-radius: 3px;';
|
|
}
|
|
|
|
return [
|
|
'a',
|
|
mergeAttributes(this.options.HTMLAttributes, {
|
|
href,
|
|
class: style === 'link' ? 'link-node' : 'button-node',
|
|
style: inlineStyle,
|
|
'data-button': '',
|
|
'data-text': text,
|
|
'data-href': href,
|
|
'data-style': style,
|
|
title: style === 'link' ? `Link: ${text}` : `Button: ${text} → ${href}`,
|
|
}),
|
|
text,
|
|
];
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
setButton:
|
|
(options) =>
|
|
({ commands }) => {
|
|
return commands.insertContent({
|
|
type: this.name,
|
|
attrs: options,
|
|
});
|
|
},
|
|
};
|
|
},
|
|
});
|