Basic text formatting updates
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
import { type Component, createSignal, createEffect, For } from "solid-js";
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
Underline,
|
||||
Highlighter,
|
||||
AlignLeft,
|
||||
AlignCenter,
|
||||
AlignRight,
|
||||
Heading1,
|
||||
Heading2,
|
||||
Heading3,
|
||||
Eraser,
|
||||
ListTodo,
|
||||
Grid3X3
|
||||
} from "lucide-solid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Editor } from "@tiptap/core";
|
||||
|
||||
interface GenericAction {
|
||||
label: string;
|
||||
icon: Component;
|
||||
isActive?: () => boolean;
|
||||
command: () => void;
|
||||
iconClass?: string;
|
||||
}
|
||||
|
||||
interface FormatGroup {
|
||||
name: string;
|
||||
actions: GenericAction[];
|
||||
}
|
||||
|
||||
export const TextBubbleMenu: Component<{ editor: Editor }> = (props) => {
|
||||
// Track state of active styles so we can highlight the buttons
|
||||
const [activeFormats, setActiveFormats] = createSignal<Record<string, boolean>>({});
|
||||
|
||||
createEffect(() => {
|
||||
const updateState = () => {
|
||||
const editor = props.editor;
|
||||
if (!editor) return;
|
||||
|
||||
setActiveFormats({
|
||||
bold: editor.isActive('bold'),
|
||||
italic: editor.isActive('italic'),
|
||||
underline: editor.isActive('underline'),
|
||||
highlight: editor.isActive('highlight'),
|
||||
alignLeft: editor.isActive({ textAlign: 'left' }),
|
||||
alignCenter: editor.isActive({ textAlign: 'center' }),
|
||||
alignRight: editor.isActive({ textAlign: 'right' }),
|
||||
h1: editor.isActive('heading', { level: 1 }),
|
||||
h2: editor.isActive('heading', { level: 2 }),
|
||||
h3: editor.isActive('heading', { level: 3 }),
|
||||
checklist: editor.isActive('taskList'),
|
||||
table: editor.isActive('table'),
|
||||
});
|
||||
};
|
||||
|
||||
props.editor.on("selectionUpdate", updateState);
|
||||
props.editor.on("transaction", updateState);
|
||||
|
||||
return () => {
|
||||
props.editor.off("selectionUpdate", updateState);
|
||||
props.editor.off("transaction", updateState);
|
||||
};
|
||||
});
|
||||
|
||||
const groups: FormatGroup[] = [
|
||||
{
|
||||
name: "Style",
|
||||
actions: [
|
||||
{ label: "Bold", icon: () => <Bold size={16} />, isActive: () => activeFormats().bold, command: () => props.editor.chain().focus().toggleBold().run() },
|
||||
{ label: "Italic", icon: () => <Italic size={16} />, isActive: () => activeFormats().italic, command: () => props.editor.chain().focus().toggleItalic().run() },
|
||||
{ label: "Underline", icon: () => <Underline size={16} />, isActive: () => activeFormats().underline, command: () => props.editor.chain().focus().toggleUnderline().run() },
|
||||
{ label: "Highlight", icon: () => <Highlighter size={16} />, isActive: () => activeFormats().highlight, command: () => props.editor.chain().focus().toggleHighlight().run() },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Headings",
|
||||
actions: [
|
||||
{ label: "Heading 1", icon: () => <Heading1 size={16} />, isActive: () => activeFormats().h1, command: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run() },
|
||||
{ label: "Heading 2", icon: () => <Heading2 size={16} />, isActive: () => activeFormats().h2, command: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run() },
|
||||
{ label: "Heading 3", icon: () => <Heading3 size={16} />, isActive: () => activeFormats().h3, command: () => props.editor.chain().focus().toggleHeading({ level: 3 }).run() },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Alignment",
|
||||
actions: [
|
||||
{ label: "Align Left", icon: () => <AlignLeft size={16} />, isActive: () => activeFormats().alignLeft, command: () => props.editor.chain().focus().setTextAlign('left').run() },
|
||||
{ label: "Align Center", icon: () => <AlignCenter size={16} />, isActive: () => activeFormats().alignCenter, command: () => props.editor.chain().focus().setTextAlign('center').run() },
|
||||
{ label: "Align Right", icon: () => <AlignRight size={16} />, isActive: () => activeFormats().alignRight, command: () => props.editor.chain().focus().setTextAlign('right').run() },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Blocks",
|
||||
actions: [
|
||||
{ label: "Checklist", icon: () => <ListTodo size={16} />, isActive: () => activeFormats().checklist, command: () => props.editor.chain().focus().toggleTaskList().run() },
|
||||
{ label: "Table", icon: () => <Grid3X3 size={16} />, isActive: () => activeFormats().table, command: () => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Clear",
|
||||
actions: [
|
||||
{ label: "Clear Formatting", icon: () => <Eraser size={16} />, command: () => props.editor.chain().focus().clearNodes().unsetAllMarks().run() },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
class={cn(
|
||||
"relative z-[140] w-full bg-background/80 backdrop-blur-md border-b border-border transition-all duration-300 ease-in-out overflow-hidden flex flex-col h-9 opacity-100"
|
||||
)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center justify-center h-full px-2 max-w-4xl mx-auto w-full">
|
||||
<div class="flex items-center gap-1">
|
||||
<For each={groups}>
|
||||
{(group, groupIdx) => (
|
||||
<>
|
||||
<div class="flex items-center gap-0 px-0.5">
|
||||
<For each={group.actions}>
|
||||
{(action) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
action.command();
|
||||
}}
|
||||
class={cn(
|
||||
"p-1.5 rounded-md transition-colors group relative shrink-0",
|
||||
action.isActive?.()
|
||||
? "bg-primary/20 text-primary"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
action.iconClass
|
||||
)}
|
||||
>
|
||||
<action.icon />
|
||||
<span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 text-[10px] font-bold bg-foreground text-background rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-[200] shadow-lg">
|
||||
{action.label}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
{groupIdx() < groups.length - 1 && (
|
||||
<div class="w-[1px] h-4 bg-border/50 mx-1" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user