Merge branch 'feature/tiptap-editor' into 'main'
Feature: Add TipTap editor package See merge request crux/admin!29
This commit is contained in:
Igor Martyniuk
@@ -9,6 +9,11 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
### Added
|
||||
|
||||
- Added `@crux-kit/editor-tiptap`, a free, headless rich-text editor package built on TipTap. The `light` preset covers bold, italic, underline,
|
||||
strikethrough, headings, lists, blockquote, text alignment, links, and undo/redo, reading and
|
||||
writing content as plain HTML so it themes with the shared design-system tokens.
|
||||
- Added the `InputTiptapEditor` composed form field.
|
||||
|
||||
### Changed
|
||||
|
||||
### Fixed
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@crux-kit/editor-tiptap": "*",
|
||||
"@crux-kit/hooks": "*",
|
||||
"@crux-kit/intl-date": "*",
|
||||
"@crux-kit/intl-name": "*",
|
||||
|
||||
@@ -3,6 +3,10 @@
|
||||
@plugin "@tailwindcss/typography";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* @crux-kit/editor-tiptap — Tailwind class scanning + editor content styles */
|
||||
@source '../../../../../packages/design-system/editor-tiptap/src';
|
||||
@import '@crux-kit/editor-tiptap/styles.css';
|
||||
|
||||
/* ReUI Configs */
|
||||
@import './config.reui.css';
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useForm } from 'react-hook-form';
|
||||
import SandboxShowcase from '#devtools/view/components/SandboxShowcase';
|
||||
import { FormElement, FormGrid, GridElement, InputMCEEditor } from '#shared/forms/composed';
|
||||
import { FormElement, FormGrid, GridElement, InputMCEEditor, InputTiptapEditor } from '#shared/forms/composed';
|
||||
import { Form as FormProvider } from '#shared/ui/form';
|
||||
import template from '../lib/templates/richTextField';
|
||||
import FormActions from './FormActions';
|
||||
|
||||
export default function RichTextFieldSection() {
|
||||
const form = useForm({ defaultValues: { content: '' } });
|
||||
const form = useForm({ defaultValues: { content: '', contentLight: '' } });
|
||||
|
||||
return (
|
||||
<SandboxShowcase
|
||||
@@ -21,11 +21,19 @@ export default function RichTextFieldSection() {
|
||||
<GridElement colSpan={12}>
|
||||
<InputMCEEditor
|
||||
name="content"
|
||||
label="Rich text editor"
|
||||
label="Rich text editor (TinyMCE)"
|
||||
placeholder="Write formatted content…"
|
||||
description="Full rich-text editing with the shared TinyMCE configuration."
|
||||
/>
|
||||
</GridElement>
|
||||
<GridElement colSpan={12}>
|
||||
<InputTiptapEditor
|
||||
name="contentLight"
|
||||
label="Rich text editor (TipTap · light preset)"
|
||||
placeholder="Write formatted content…"
|
||||
description="Free, headless editor from @crux-kit/editor-tiptap. HTML in / HTML out."
|
||||
/>
|
||||
</GridElement>
|
||||
<GridElement colSpan={12}>
|
||||
<FormActions form={form} />
|
||||
</GridElement>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { RichTextEditor, type EditorPreset } from '@crux-kit/editor-tiptap';
|
||||
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '#shared/ui/form';
|
||||
|
||||
/**
|
||||
* Free rich-text field backed by @crux-kit/editor-tiptap (TipTap). Same
|
||||
* value/onChange (HTML string) seam as InputMCEEditor, so it is a drop-in
|
||||
* replacement.
|
||||
*/
|
||||
export const InputTiptapEditor: React.FC<{
|
||||
name: string;
|
||||
label?: string;
|
||||
description?: React.ReactNode;
|
||||
placeholder?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
preset?: EditorPreset;
|
||||
}> = ({
|
||||
name,
|
||||
description,
|
||||
label,
|
||||
placeholder,
|
||||
required = false,
|
||||
disabled = false,
|
||||
preset = 'light'
|
||||
}) => {
|
||||
const form = useFormContext();
|
||||
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={name}
|
||||
disabled={disabled}
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem>
|
||||
{label && (
|
||||
<FormLabel>
|
||||
{label}
|
||||
{required && <span className="ml-1 text-red-500">*</span>}
|
||||
</FormLabel>
|
||||
)}
|
||||
<FormControl>
|
||||
<RichTextEditor
|
||||
value={field.value ?? ''}
|
||||
onChange={field.onChange}
|
||||
disabled={field.disabled}
|
||||
placeholder={placeholder}
|
||||
preset={preset}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage>{description}</FormMessage>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -30,3 +30,4 @@ export * from './fields/InputDate';
|
||||
|
||||
/* Text editor fields */
|
||||
export * from './fields/InputMCEEditor';
|
||||
export * from './fields/InputTiptapEditor';
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '#shared/ui/Accordion';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '#shared/ui/Card';
|
||||
|
||||
export interface FaqItem {
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export type FaqItems = Array<FaqItem>;
|
||||
|
||||
export function Faq() {
|
||||
const items: FaqItems = [
|
||||
{
|
||||
title: 'How is pricing determined for each plan ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision. Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision. Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'What payment methods are accepted for subscriptions ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Are there any hidden fees in the pricing ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Is there a discount for annual subscriptions ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Do you offer refunds on subscription cancellations ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Can I add extra features to my current plan ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
}
|
||||
];
|
||||
|
||||
const generateItems = () => {
|
||||
return (
|
||||
<Accordion type="single" collapsible>
|
||||
{items.map((item, index) => (
|
||||
<AccordionItem key={index} value={`item-${index}`}>
|
||||
<AccordionTrigger>{item.title}</AccordionTrigger>
|
||||
<AccordionContent>{item.text}</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>FAQ</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="py-3">{generateItems()}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -30,6 +30,12 @@ export default defineConfig(({ mode }) => {
|
||||
new URL('../../packages/design-system/keenicon/src', import.meta.url)
|
||||
)
|
||||
},
|
||||
{
|
||||
find: '@crux-kit/editor-tiptap',
|
||||
replacement: fileURLToPath(
|
||||
new URL('../../packages/design-system/editor-tiptap/src', import.meta.url)
|
||||
)
|
||||
},
|
||||
{
|
||||
find: '@crux-kit/hooks',
|
||||
replacement: fileURLToPath(new URL('../../packages/hooks/src', import.meta.url))
|
||||
|
||||
Generated
+660
-121
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,5 @@
|
||||
*.md
|
||||
node_modules
|
||||
dist
|
||||
public
|
||||
build
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2,
|
||||
"endOfLine": "lf",
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": true,
|
||||
"semi": true,
|
||||
"bracketSameLine": false,
|
||||
"jsxSingleQuote": false,
|
||||
"arrowParens": "always"
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
# @crux-kit/editor-tiptap
|
||||
|
||||
A free, headless rich-text editor for Crux apps, built on [TipTap](https://tiptap.dev)
|
||||
(MIT-licensed). Emits and consumes plain **HTML strings**, so it drops into the same
|
||||
`value` / `onChange` seam the previous TinyMCE editor used.
|
||||
|
||||
This package contains **all TipTap-specific editor code**. Other editor libraries live in
|
||||
their own sibling packages (e.g. `@crux-kit/editor-quill`, `@crux-kit/editor-lexical`).
|
||||
|
||||
The editor is **preset-driven**: one library, multiple feature levels. Pick a preset per
|
||||
app / per field instead of shipping a different editor library in each app.
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { RichTextEditor } from '@crux-kit/editor-tiptap';
|
||||
|
||||
<RichTextEditor value={html} onChange={setHtml} preset="light" placeholder="Write…" />;
|
||||
```
|
||||
|
||||
### Presets
|
||||
|
||||
| Preset | Features |
|
||||
| ------- | ------------------------------------------------------------------------------------------- |
|
||||
| `light` | Bold, italic, underline, strike, headings, lists, blockquote, text align, links, undo/redo. |
|
||||
|
||||
Extend by adding new presets in `src/presets.ts` — the toolbar renders from the preset, so
|
||||
new apps (e.g. web studio / page manager) reuse the same component with a different preset.
|
||||
|
||||
## Styling
|
||||
|
||||
The toolbar uses the shared design-system Tailwind tokens (`bg-accent`, `border-input`,
|
||||
`text-muted-foreground`, …), so it themes automatically with the host app.
|
||||
|
||||
Wire it up once, entirely in the app's main Tailwind CSS entry:
|
||||
|
||||
```css
|
||||
/* generate the toolbar's utility classes */
|
||||
@source '../../../../../packages/design-system/editor-tiptap/src';
|
||||
/* editor content styles */
|
||||
@import '@crux-kit/editor-tiptap/styles.css';
|
||||
```
|
||||
|
||||
(The content styles can also be pulled in from JS with
|
||||
`import '@crux-kit/editor-tiptap/styles.css';` — but keeping both lines together in the CSS
|
||||
entry is cleaner.)
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "@crux-kit/editor-tiptap",
|
||||
"version": "1.2.0",
|
||||
"type": "module",
|
||||
"types": "src/index.ts",
|
||||
"private": true,
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./styles.css": "./src/styles.css"
|
||||
},
|
||||
"style": "src/styles.css",
|
||||
"scripts": {
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@crux-kit/utils": "*",
|
||||
"@tiptap/core": "^3.29.2",
|
||||
"@tiptap/extension-text-align": "^3.29.2",
|
||||
"@tiptap/extensions": "^3.29.2",
|
||||
"@tiptap/pm": "^3.29.2",
|
||||
"@tiptap/react": "^3.29.2",
|
||||
"@tiptap/starter-kit": "^3.29.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"lucide-react": "*",
|
||||
"react": ">=19",
|
||||
"react-dom": ">=19"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { type Editor, EditorContent, useEditor } from '@tiptap/react';
|
||||
import React from 'react';
|
||||
import { cn } from '@crux-kit/utils';
|
||||
import { Toolbar } from './components/Toolbar';
|
||||
import { buildExtensions, type EditorPreset } from './presets';
|
||||
|
||||
export type RichTextEditorProps = {
|
||||
/** Current value as an HTML string. */
|
||||
value: string;
|
||||
/** Called with the new HTML string on every change. */
|
||||
onChange: (value: string) => void;
|
||||
/** Feature level. Defaults to `light`. */
|
||||
preset?: EditorPreset;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
/** Access the underlying TipTap editor instance once it is ready. */
|
||||
onReady?: (editor: Editor) => void;
|
||||
};
|
||||
|
||||
export const RichTextEditor: React.FC<RichTextEditorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
preset = 'light',
|
||||
disabled = false,
|
||||
placeholder,
|
||||
className,
|
||||
onReady,
|
||||
}) => {
|
||||
const onChangeRef = React.useRef(onChange);
|
||||
onChangeRef.current = onChange;
|
||||
const onReadyRef = React.useRef(onReady);
|
||||
onReadyRef.current = onReady;
|
||||
|
||||
const editor = useEditor({
|
||||
immediatelyRender: false,
|
||||
editable: !disabled,
|
||||
extensions: buildExtensions(preset, placeholder),
|
||||
content: value,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'crux-editor__content',
|
||||
role: 'textbox',
|
||||
'aria-multiline': 'true',
|
||||
},
|
||||
},
|
||||
onCreate: ({ editor }) => onReadyRef.current?.(editor),
|
||||
onUpdate: ({ editor }) => onChangeRef.current(editor.getHTML()),
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!editor) return;
|
||||
const next = value ?? '';
|
||||
if (next !== editor.getHTML()) {
|
||||
editor.commands.setContent(next, { emitUpdate: false });
|
||||
}
|
||||
}, [editor, value]);
|
||||
|
||||
React.useEffect(() => {
|
||||
editor?.setEditable(!disabled);
|
||||
}, [editor, disabled]);
|
||||
|
||||
return (
|
||||
<div className={cn('crux-editor border-input overflow-hidden rounded-md border', className)}>
|
||||
<Toolbar editor={editor} preset={preset} disabled={disabled} />
|
||||
<EditorContent editor={editor} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@crux-kit/utils';
|
||||
import { type BlockType } from '../presets';
|
||||
|
||||
const OPTIONS: Array<{ value: BlockType; label: string }> = [
|
||||
{ value: 'paragraph', label: 'Paragraph' },
|
||||
{ value: 'h1', label: 'Heading 1' },
|
||||
{ value: 'h2', label: 'Heading 2' },
|
||||
{ value: 'h3', label: 'Heading 3' },
|
||||
];
|
||||
|
||||
export const BlockTypeSelect: React.FC<{
|
||||
value: BlockType;
|
||||
disabled?: boolean;
|
||||
onChange: (value: BlockType) => void;
|
||||
}> = ({ value, disabled = false, onChange }) => {
|
||||
return (
|
||||
<select
|
||||
aria-label="Text style"
|
||||
title="Text style"
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onChange={(e) => onChange(e.target.value as BlockType)}
|
||||
className={cn(
|
||||
'border-input bg-background text-foreground h-8 rounded-md border px-2 text-sm',
|
||||
'hover:bg-muted focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1',
|
||||
'disabled:pointer-events-none disabled:opacity-40',
|
||||
)}
|
||||
>
|
||||
{OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,103 @@
|
||||
import { Check, Link2, Trash2 } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { cn } from '@crux-kit/utils';
|
||||
import { ToolbarButton } from './ToolbarButton';
|
||||
|
||||
export const LinkEditor: React.FC<{
|
||||
isActive: boolean;
|
||||
disabled?: boolean;
|
||||
getHref: () => string;
|
||||
onApply: (href: string) => void;
|
||||
onRemove: () => void;
|
||||
}> = ({ isActive, disabled = false, getHref, onApply, onRemove }) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [href, setHref] = React.useState('');
|
||||
const wrapperRef = React.useRef<HTMLSpanElement>(null);
|
||||
const inputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const close = React.useCallback(() => setOpen(false), []);
|
||||
|
||||
const toggle = React.useCallback(() => {
|
||||
setOpen((prev) => {
|
||||
const next = !prev;
|
||||
if (next) setHref(getHref());
|
||||
return next;
|
||||
});
|
||||
}, [getHref]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
const id = window.setTimeout(() => inputRef.current?.focus(), 0);
|
||||
|
||||
const onPointerDown = (e: MouseEvent) => {
|
||||
if (!wrapperRef.current?.contains(e.target as Node)) close();
|
||||
};
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') close();
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', onPointerDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
window.clearTimeout(id);
|
||||
document.removeEventListener('mousedown', onPointerDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [open, close]);
|
||||
|
||||
const apply = () => {
|
||||
const trimmed = href.trim();
|
||||
if (trimmed) onApply(trimmed);
|
||||
else onRemove();
|
||||
close();
|
||||
};
|
||||
|
||||
const remove = () => {
|
||||
onRemove();
|
||||
close();
|
||||
};
|
||||
|
||||
return (
|
||||
<span ref={wrapperRef} className="relative inline-flex">
|
||||
<ToolbarButton title="Insert link" active={isActive} disabled={disabled} onClick={toggle}>
|
||||
<Link2 />
|
||||
</ToolbarButton>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="Edit link"
|
||||
className={cn(
|
||||
'border-border bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 flex w-72 items-center gap-1 rounded-md border p-1.5 shadow-md',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="url"
|
||||
value={href}
|
||||
placeholder="https://example.com"
|
||||
onChange={(e) => setHref(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
apply();
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'border-input bg-background text-foreground h-8 flex-1 rounded-md border px-2 text-sm',
|
||||
'focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2',
|
||||
)}
|
||||
/>
|
||||
<ToolbarButton title="Apply link" onClick={apply}>
|
||||
<Check />
|
||||
</ToolbarButton>
|
||||
{isActive && (
|
||||
<ToolbarButton title="Remove link" onClick={remove}>
|
||||
<Trash2 />
|
||||
</ToolbarButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,285 @@
|
||||
import {
|
||||
AlignCenter,
|
||||
AlignJustify,
|
||||
AlignLeft,
|
||||
AlignRight,
|
||||
Bold,
|
||||
Italic,
|
||||
List,
|
||||
ListOrdered,
|
||||
Quote,
|
||||
RemoveFormatting,
|
||||
Redo2,
|
||||
Strikethrough,
|
||||
Underline,
|
||||
Undo2,
|
||||
Unlink,
|
||||
} from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { type Editor, useEditorState } from '@tiptap/react';
|
||||
import { type BlockType, type ToolbarItem, toolbarLayouts, type EditorPreset } from '../presets';
|
||||
import { BlockTypeSelect } from './BlockTypeSelect';
|
||||
import { LinkEditor } from './LinkEditor';
|
||||
import { ToolbarButton, ToolbarSeparator } from './ToolbarButton';
|
||||
|
||||
function getBlockType(editor: Editor): BlockType {
|
||||
if (editor.isActive('heading', { level: 1 })) return 'h1';
|
||||
if (editor.isActive('heading', { level: 2 })) return 'h2';
|
||||
if (editor.isActive('heading', { level: 3 })) return 'h3';
|
||||
return 'paragraph';
|
||||
}
|
||||
|
||||
export const Toolbar: React.FC<{
|
||||
editor: Editor | null;
|
||||
preset: EditorPreset;
|
||||
disabled?: boolean;
|
||||
}> = ({ editor, preset, disabled = false }) => {
|
||||
const state = useEditorState({
|
||||
editor,
|
||||
selector: ({ editor: e }) => {
|
||||
if (!e) return null;
|
||||
return {
|
||||
canUndo: e.can().undo(),
|
||||
canRedo: e.can().redo(),
|
||||
blockType: getBlockType(e),
|
||||
isBold: e.isActive('bold'),
|
||||
isItalic: e.isActive('italic'),
|
||||
isUnderline: e.isActive('underline'),
|
||||
isStrike: e.isActive('strike'),
|
||||
isBulletList: e.isActive('bulletList'),
|
||||
isOrderedList: e.isActive('orderedList'),
|
||||
isBlockquote: e.isActive('blockquote'),
|
||||
alignLeft: e.isActive({ textAlign: 'left' }),
|
||||
alignCenter: e.isActive({ textAlign: 'center' }),
|
||||
alignRight: e.isActive({ textAlign: 'right' }),
|
||||
alignJustify: e.isActive({ textAlign: 'justify' }),
|
||||
isLink: e.isActive('link'),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
if (!editor || !state) return null;
|
||||
|
||||
const setBlockType = (type: BlockType) => {
|
||||
const chain = editor.chain().focus();
|
||||
if (type === 'paragraph') chain.setParagraph().run();
|
||||
else chain.setHeading({ level: Number(type.slice(1)) as 1 | 2 | 3 }).run();
|
||||
};
|
||||
|
||||
const renderItem = (item: ToolbarItem, index: number): React.ReactNode => {
|
||||
switch (item) {
|
||||
case '|':
|
||||
return <ToolbarSeparator key={`sep-${index}`} />;
|
||||
case 'undo':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Undo"
|
||||
disabled={disabled || !state.canUndo}
|
||||
onClick={() => editor.chain().focus().undo().run()}
|
||||
>
|
||||
<Undo2 />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'redo':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Redo"
|
||||
disabled={disabled || !state.canRedo}
|
||||
onClick={() => editor.chain().focus().redo().run()}
|
||||
>
|
||||
<Redo2 />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'blockType':
|
||||
return (
|
||||
<BlockTypeSelect
|
||||
key={item}
|
||||
value={state.blockType}
|
||||
disabled={disabled}
|
||||
onChange={setBlockType}
|
||||
/>
|
||||
);
|
||||
case 'bold':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Bold"
|
||||
active={state.isBold}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
>
|
||||
<Bold />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'italic':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Italic"
|
||||
active={state.isItalic}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
>
|
||||
<Italic />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'underline':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Underline"
|
||||
active={state.isUnderline}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
>
|
||||
<Underline />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'strike':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Strikethrough"
|
||||
active={state.isStrike}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
>
|
||||
<Strikethrough />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'bulletList':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Bullet list"
|
||||
active={state.isBulletList}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
>
|
||||
<List />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'orderedList':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Numbered list"
|
||||
active={state.isOrderedList}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
>
|
||||
<ListOrdered />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'blockquote':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Quote"
|
||||
active={state.isBlockquote}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
>
|
||||
<Quote />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'alignLeft':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Align left"
|
||||
active={state.alignLeft}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().setTextAlign('left').run()}
|
||||
>
|
||||
<AlignLeft />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'alignCenter':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Align center"
|
||||
active={state.alignCenter}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().setTextAlign('center').run()}
|
||||
>
|
||||
<AlignCenter />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'alignRight':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Align right"
|
||||
active={state.alignRight}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().setTextAlign('right').run()}
|
||||
>
|
||||
<AlignRight />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'alignJustify':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Justify"
|
||||
active={state.alignJustify}
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().setTextAlign('justify').run()}
|
||||
>
|
||||
<AlignJustify />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'link':
|
||||
return (
|
||||
<LinkEditor
|
||||
key={item}
|
||||
isActive={state.isLink}
|
||||
disabled={disabled}
|
||||
getHref={() => (editor.getAttributes('link')['href'] as string) ?? ''}
|
||||
onApply={(href) =>
|
||||
editor.chain().focus().extendMarkRange('link').setLink({ href }).run()
|
||||
}
|
||||
onRemove={() => editor.chain().focus().extendMarkRange('link').unsetLink().run()}
|
||||
/>
|
||||
);
|
||||
case 'unlink':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Remove link"
|
||||
disabled={disabled || !state.isLink}
|
||||
onClick={() => editor.chain().focus().extendMarkRange('link').unsetLink().run()}
|
||||
>
|
||||
<Unlink />
|
||||
</ToolbarButton>
|
||||
);
|
||||
case 'clear':
|
||||
return (
|
||||
<ToolbarButton
|
||||
key={item}
|
||||
title="Clear formatting"
|
||||
disabled={disabled}
|
||||
onClick={() => editor.chain().focus().clearNodes().unsetAllMarks().run()}
|
||||
>
|
||||
<RemoveFormatting />
|
||||
</ToolbarButton>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
role="toolbar"
|
||||
aria-label="Formatting"
|
||||
className="border-input flex flex-wrap items-center gap-0.5 rounded-t-md border border-b-0 p-1"
|
||||
>
|
||||
{toolbarLayouts[preset].map((item, index) => renderItem(item, index))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@crux-kit/utils';
|
||||
|
||||
export type ToolbarButtonProps = {
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* A single toolbar control. Styled with the shared design-system Tailwind
|
||||
* tokens so it matches the host app in light and dark mode. Kept dependency-free
|
||||
* (plain <button>) so the package stays portable across apps.
|
||||
*/
|
||||
export const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
|
||||
({ active = false, disabled = false, title, onClick, children }, ref) => {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
type="button"
|
||||
title={title}
|
||||
aria-label={title}
|
||||
aria-pressed={active}
|
||||
data-active={active}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
// Prevent the editor from losing its selection when the control is pressed.
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
className={cn(
|
||||
'text-muted-foreground inline-flex h-8 min-w-8 shrink-0 items-center justify-center rounded-md px-2 text-sm transition-colors',
|
||||
'hover:bg-muted hover:text-foreground focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1',
|
||||
'disabled:pointer-events-none disabled:opacity-40',
|
||||
'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
|
||||
'[&_svg]:size-4 [&_svg]:shrink-0',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ToolbarButton.displayName = 'ToolbarButton';
|
||||
|
||||
export const ToolbarSeparator: React.FC = () => (
|
||||
<span aria-hidden className="bg-border mx-1 h-5 w-px shrink-0" />
|
||||
);
|
||||
@@ -0,0 +1,9 @@
|
||||
export { RichTextEditor, type RichTextEditorProps } from './RichTextEditor';
|
||||
export {
|
||||
type EditorPreset,
|
||||
type ToolbarItem,
|
||||
type BlockType,
|
||||
toolbarLayouts,
|
||||
buildExtensions,
|
||||
} from './presets';
|
||||
export { type Editor } from '@tiptap/react';
|
||||
@@ -0,0 +1,84 @@
|
||||
import { type AnyExtension } from '@tiptap/core';
|
||||
import { TextAlign } from '@tiptap/extension-text-align';
|
||||
import { Placeholder } from '@tiptap/extensions';
|
||||
import { StarterKit } from '@tiptap/starter-kit';
|
||||
|
||||
export type EditorPreset = 'light';
|
||||
|
||||
export type ToolbarItem =
|
||||
| '|'
|
||||
| 'undo'
|
||||
| 'redo'
|
||||
| 'blockType'
|
||||
| 'bold'
|
||||
| 'italic'
|
||||
| 'underline'
|
||||
| 'strike'
|
||||
| 'bulletList'
|
||||
| 'orderedList'
|
||||
| 'blockquote'
|
||||
| 'alignLeft'
|
||||
| 'alignCenter'
|
||||
| 'alignRight'
|
||||
| 'alignJustify'
|
||||
| 'link'
|
||||
| 'unlink'
|
||||
| 'clear';
|
||||
|
||||
export type BlockType = 'paragraph' | 'h1' | 'h2' | 'h3';
|
||||
|
||||
export const HEADING_LEVELS = [1, 2, 3] as const;
|
||||
|
||||
export function buildExtensions(preset: EditorPreset, placeholder?: string): AnyExtension[] {
|
||||
switch (preset) {
|
||||
case 'light':
|
||||
default:
|
||||
return [
|
||||
StarterKit.configure({
|
||||
heading: { levels: [...HEADING_LEVELS] },
|
||||
link: {
|
||||
openOnClick: false,
|
||||
autolink: true,
|
||||
defaultProtocol: 'https',
|
||||
HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
|
||||
},
|
||||
codeBlock: false,
|
||||
code: false,
|
||||
horizontalRule: false,
|
||||
}),
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
Placeholder.configure({
|
||||
placeholder: placeholder ?? '',
|
||||
showOnlyWhenEditable: true,
|
||||
}),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export const toolbarLayouts: Record<EditorPreset, ToolbarItem[]> = {
|
||||
light: [
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'blockType',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strike',
|
||||
'|',
|
||||
'bulletList',
|
||||
'orderedList',
|
||||
'blockquote',
|
||||
'|',
|
||||
'alignLeft',
|
||||
'alignCenter',
|
||||
'alignRight',
|
||||
'alignJustify',
|
||||
'|',
|
||||
'link',
|
||||
'unlink',
|
||||
'|',
|
||||
'clear',
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* Content styles for @crux-kit/editor-tiptap.
|
||||
* Plain CSS on purpose: this file is imported directly by consumers and must not
|
||||
* depend on the host app's Tailwind pipeline. Colors reference the shared
|
||||
* design-system CSS variables (--foreground, --border, …) so the editor themes
|
||||
* automatically in light/dark mode.
|
||||
*/
|
||||
|
||||
.crux-editor__content {
|
||||
min-height: 12rem;
|
||||
padding: 0.75rem 0.875rem;
|
||||
outline: none;
|
||||
color: var(--foreground);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.crux-editor__content :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.crux-editor__content :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.crux-editor__content p {
|
||||
margin: 0 0 0.75em;
|
||||
}
|
||||
|
||||
.crux-editor__content h1,
|
||||
.crux-editor__content h2,
|
||||
.crux-editor__content h3 {
|
||||
margin: 1.25em 0 0.5em;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.crux-editor__content h1 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
.crux-editor__content h2 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.crux-editor__content h3 {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.crux-editor__content ul,
|
||||
.crux-editor__content ol {
|
||||
margin: 0 0 0.75em;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.crux-editor__content ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.crux-editor__content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.crux-editor__content li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
.crux-editor__content li p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.crux-editor__content blockquote {
|
||||
margin: 0 0 0.75em;
|
||||
padding-left: 1rem;
|
||||
border-left: 3px solid var(--border);
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.crux-editor__content a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.crux-editor__content strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Placeholder (from @tiptap/extensions Placeholder) */
|
||||
.crux-editor__content p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* ProseMirror selection niceties */
|
||||
.crux-editor__content .ProseMirror-selectednode {
|
||||
outline: 2px solid var(--ring);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"jsx": "react-jsx",
|
||||
"skipLibCheck": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"composite": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Reference in New Issue
Block a user