@airoom/nextmin-react 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/editor/TiptapEditor.js +3 -1
  2. package/dist/components/editor/Toolbar.js +10 -2
  3. package/dist/nextmin.css +1 -1
  4. package/package.json +2 -1
package/dist/components/editor/TiptapEditor.js CHANGED
@@ -4,6 +4,7 @@ import { Color } from '@tiptap/extension-color';
4
4
  import { TextStyle } from '@tiptap/extension-text-style';
5
5
  import Highlight from '@tiptap/extension-highlight';
6
6
  import { useEditor, EditorContent } from '@tiptap/react';
7
+ import { FontFamily } from '@tiptap/extension-font-family';
7
8
  import StarterKit from '@tiptap/starter-kit';
8
9
  import Link from '@tiptap/extension-link';
9
10
  import { api } from '../../lib/api';
@@ -44,13 +45,14 @@ export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start
44
45
  const extensions = React.useMemo(() => [
45
46
  StarterKit.configure({
46
47
  heading: {
47
- levels: [1, 2, 3]
48
+ levels: [1, 2, 3, 4, 5, 6]
48
49
  }
49
50
  }),
50
51
  Highlight.configure({
51
52
  multicolor: true,
52
53
  }),
53
54
  TextStyle,
55
+ FontFamily,
54
56
  Color,
55
57
  Link.configure({
56
58
  openOnClick: false,
package/dist/components/editor/Toolbar.js CHANGED
@@ -32,7 +32,15 @@ export const Toolbar = ({ editor, onDistrictGridClick }) => {
32
32
  fileInputRef.current?.click();
33
33
  };
34
34
  const ToolbarButton = ({ onClick, isActive = false, children, disabled = false }) => (_jsx("button", { onClick: onClick, disabled: disabled, className: cn("p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", isActive && "bg-gray-200 dark:bg-gray-700 text-blue-500", disabled && "opacity-50 cursor-not-allowed"), type: "button", children: children }));
35
- return (_jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 p-2 flex flex-wrap gap-1 sticky top-0 bg-white dark:bg-zinc-950 z-10 items-center", children: [_jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive('bold'), children: _jsx(Bold, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive('italic'), children: _jsx(Italic, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive('underline'), children: _jsx(UnderlineIcon, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => {
35
+ return (_jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 p-2 flex flex-wrap gap-1 sticky top-0 bg-white dark:bg-zinc-950 z-10 items-center", children: [_jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive('bold'), children: _jsx(Bold, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive('italic'), children: _jsx(Italic, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive('underline'), children: _jsx(UnderlineIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx("div", { className: "flex items-center px-2 py-1 bg-gray-50 dark:bg-zinc-900 rounded-md border border-gray-200 dark:border-gray-800", children: _jsxs("select", { className: "bg-transparent text-xs outline-none cursor-pointer pr-1", onChange: (e) => {
36
+ const font = e.target.value;
37
+ if (font === 'default') {
38
+ editor.chain().focus().unsetFontFamily().run();
39
+ }
40
+ else {
41
+ editor.chain().focus().setFontFamily(font).run();
42
+ }
43
+ }, value: editor.getAttributes('textStyle').fontFamily || 'default', children: [_jsx("option", { value: "default", children: "Default Font" }), _jsxs("optgroup", { label: "Bangla Fonts", children: [_jsx("option", { value: "'Hind Siliguri', sans-serif", children: "Hind Siliguri" }), _jsx("option", { value: "'Kalpurush', sans-serif", children: "Kalpurush" }), _jsx("option", { value: "'Siyam Rupali', sans-serif", children: "Siyam Rupali" }), _jsx("option", { value: "'SolaimanLipi', sans-serif", children: "SolaimanLipi" }), _jsx("option", { value: "'Akaash', sans-serif", children: "Akaash" }), _jsx("option", { value: "'Mukti Narrow', sans-serif", children: "Mukti Narrow" })] }), _jsxs("optgroup", { label: "Standard", children: [_jsx("option", { value: "Inter, sans-serif", children: "Inter" }), _jsx("option", { value: "Roboto, sans-serif", children: "Roboto" }), _jsx("option", { value: "serif", children: "Serif" }), _jsx("option", { value: "monospace", children: "Monospace" })] })] }) }), _jsx(ToolbarButton, { onClick: () => {
36
44
  const previousUrl = editor.getAttributes('link').href;
37
45
  const url = window.prompt('URL', previousUrl);
38
46
  if (url === null) {
@@ -43,7 +51,7 @@ export const Toolbar = ({ editor, onDistrictGridClick }) => {
43
51
  return;
44
52
  }
45
53
  editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
46
- }, isActive: editor.isActive('link'), children: _jsx(LinkIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: editor.isActive({ textAlign: 'left' }), children: _jsx(AlignLeft, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: editor.isActive({ textAlign: 'center' }), children: _jsx(AlignCenter, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: editor.isActive({ textAlign: 'right' }), children: _jsx(AlignRight, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('justify').run(), isActive: editor.isActive({ textAlign: 'justify' }), children: _jsx(AlignJustify, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: editor.isActive('heading', { level: 1 }), children: _jsx("span", { className: "font-bold text-sm", children: "H1" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: editor.isActive('heading', { level: 2 }), children: _jsx("span", { className: "font-bold text-sm", children: "H2" }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive('bulletList'), children: _jsx(List, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive('orderedList'), children: _jsx(ListOrdered, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: editor.isActive('blockquote'), children: _jsx(Quote, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive('codeBlock'), children: _jsx(Code, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => {
54
+ }, isActive: editor.isActive('link'), children: _jsx(LinkIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: editor.isActive({ textAlign: 'left' }), children: _jsx(AlignLeft, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: editor.isActive({ textAlign: 'center' }), children: _jsx(AlignCenter, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: editor.isActive({ textAlign: 'right' }), children: _jsx(AlignRight, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('justify').run(), isActive: editor.isActive({ textAlign: 'justify' }), children: _jsx(AlignJustify, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: editor.isActive('heading', { level: 1 }), children: _jsx("span", { className: "font-bold text-sm", children: "H1" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: editor.isActive('heading', { level: 2 }), children: _jsx("span", { className: "font-bold text-sm", children: "H2" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isActive: editor.isActive('heading', { level: 3 }), children: _jsx("span", { className: "font-bold text-sm", children: "H3" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 4 }).run(), isActive: editor.isActive('heading', { level: 4 }), children: _jsx("span", { className: "font-bold text-sm", children: "H4" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 5 }).run(), isActive: editor.isActive('heading', { level: 5 }), children: _jsx("span", { className: "font-bold text-sm", children: "H5" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 6 }).run(), isActive: editor.isActive('heading', { level: 6 }), children: _jsx("span", { className: "font-bold text-sm", children: "H6" }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive('bulletList'), children: _jsx(List, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive('orderedList'), children: _jsx(ListOrdered, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: editor.isActive('blockquote'), children: _jsx(Quote, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive('codeBlock'), children: _jsx(Code, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => {
47
55
  editor
48
56
  .chain()
49
57
  .focus()