diff --git a/admin-spa/src/components/ui/rich-text-editor.tsx b/admin-spa/src/components/ui/rich-text-editor.tsx
index e9a71c9..72d4620 100644
--- a/admin-spa/src/components/ui/rich-text-editor.tsx
+++ b/admin-spa/src/components/ui/rich-text-editor.tsx
@@ -5,6 +5,7 @@ import Placeholder from '@tiptap/extension-placeholder';
import Link from '@tiptap/extension-link';
import TextAlign from '@tiptap/extension-text-align';
import Image from '@tiptap/extension-image';
+import { ButtonExtension } from './tiptap-button-extension';
import {
Bold,
Italic,
@@ -15,10 +16,15 @@ import {
AlignCenter,
AlignRight,
ImageIcon,
+ MousePointer,
Undo,
Redo,
} from 'lucide-react';
import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './dialog';
import { __ } from '@/lib/i18n';
interface RichTextEditorProps {
@@ -57,6 +63,7 @@ export function RichTextEditor({
class: 'max-w-full h-auto rounded',
},
}),
+ ButtonExtension,
],
content,
onUpdate: ({ editor }) => {
@@ -100,6 +107,11 @@ export function RichTextEditor({
}
};
+ const [buttonDialogOpen, setButtonDialogOpen] = useState(false);
+ const [buttonText, setButtonText] = useState('Click Here');
+ const [buttonHref, setButtonHref] = useState('{order_url}');
+ const [buttonStyle, setButtonStyle] = useState<'solid' | 'outline'>('solid');
+
const addImage = () => {
const url = window.prompt(__('Enter image URL:'));
if (url) {
@@ -107,10 +119,53 @@ export function RichTextEditor({
}
};
+ const openButtonDialog = () => {
+ setButtonText('Click Here');
+ setButtonHref('{order_url}');
+ setButtonStyle('solid');
+ setButtonDialogOpen(true);
+ };
+
+ const insertButton = () => {
+ editor.chain().focus().setButton({ text: buttonText, href: buttonHref, style: buttonStyle }).run();
+ setButtonDialogOpen(false);
+ };
+
+ const getActiveHeading = () => {
+ if (editor.isActive('heading', { level: 1 })) return 'h1';
+ if (editor.isActive('heading', { level: 2 })) return 'h2';
+ if (editor.isActive('heading', { level: 3 })) return 'h3';
+ if (editor.isActive('heading', { level: 4 })) return 'h4';
+ return 'p';
+ };
+
+ const setHeading = (value: string) => {
+ if (value === 'p') {
+ editor.chain().focus().setParagraph().run();
+ } else {
+ const level = parseInt(value.replace('h', '')) as 1 | 2 | 3 | 4;
+ editor.chain().focus().setHeading({ level }).run();
+ }
+ };
+
return (
{/* Toolbar */}
+ {/* Heading Selector */}
+
+
+
)}
+
+ {/* Button Dialog */}
+
);
}
diff --git a/admin-spa/src/components/ui/tiptap-button-extension.ts b/admin-spa/src/components/ui/tiptap-button-extension.ts
new file mode 100644
index 0000000..14e076b
--- /dev/null
+++ b/admin-spa/src/components/ui/tiptap-button-extension.ts
@@ -0,0 +1,105 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export interface ButtonOptions {
+ HTMLAttributes: Record
;
+}
+
+declare module '@tiptap/core' {
+ interface Commands {
+ button: {
+ setButton: (options: { text: string; href: string; style?: 'solid' | 'outline' }) => ReturnType;
+ };
+ }
+}
+
+export const ButtonExtension = Node.create({
+ name: 'button',
+
+ group: 'inline',
+
+ inline: true,
+
+ atom: true,
+
+ addAttributes() {
+ return {
+ text: {
+ default: 'Click Here',
+ },
+ href: {
+ default: '#',
+ },
+ style: {
+ default: 'solid',
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: 'a.button',
+ },
+ {
+ tag: 'a.button-outline',
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ const { text, href, style } = HTMLAttributes;
+ const className = style === 'outline' ? 'button-outline' : 'button';
+
+ const buttonStyle: Record = 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,
+ });
+ },
+ };
+ },
+});