@pixpilot/shadcn-ui 0.34.0 → 0.36.0

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 (15) hide show
  1. package/dist/file-upload/FileUpload.d.cts +2 -2
  2. package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
  3. package/dist/input/Input.d.cts +2 -2
  4. package/dist/input/Input.d.ts +2 -2
  5. package/dist/rich-text-editor/RichTextEditor.cjs +36 -52
  6. package/dist/rich-text-editor/RichTextEditor.js +34 -52
  7. package/dist/rich-text-editor/RichTextEditorToolbar.cjs +56 -0
  8. package/dist/rich-text-editor/RichTextEditorToolbar.js +52 -0
  9. package/dist/rich-text-editor/predefined-toolbar-items.cjs +24 -0
  10. package/dist/rich-text-editor/predefined-toolbar-items.js +25 -1
  11. package/dist/theme-toggle/ThemeModeDropdown.d.ts +2 -2
  12. package/dist/theme-toggle/ThemeModeSwitchInside.d.ts +2 -2
  13. package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts +2 -2
  14. package/dist/theme-toggle/ThemeModeToggleButton.d.ts +2 -2
  15. package/package.json +7 -5
package/dist/file-upload/FileUpload.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { FileUploadProps } from "./types/index.cjs";
2
- import * as react_jsx_runtime7 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime6 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/file-upload/FileUpload.d.ts
5
- declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
5
+ declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
6
6
  //#endregion
7
7
  export { FileUpload };
package/dist/file-upload-inline/FileUploadInline.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { FileUploadInlineProps } from "./types.js";
2
- import * as react_jsx_runtime7 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime8 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/file-upload-inline/FileUploadInline.d.ts
5
5
  /**
6
6
  * FileUploadInline - An inline file upload component using FileUpload primitives
7
7
  */
8
- declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
8
+ declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
9
9
  //#endregion
10
10
  export { FileUploadInline };
package/dist/input/Input.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime6 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime7 from "react/jsx-runtime";
2
2
  import { InputProps } from "@pixpilot/shadcn";
3
3
  import * as React$1 from "react";
4
4
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
10
10
  prefixClassName?: string;
11
11
  suffixClassName?: string;
12
12
  };
13
- declare function Input(props: InputProps$1): react_jsx_runtime6.JSX.Element;
13
+ declare function Input(props: InputProps$1): react_jsx_runtime7.JSX.Element;
14
14
  //#endregion
15
15
  export { Input, InputProps$1 as InputProps };
package/dist/input/Input.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { InputProps } from "@pixpilot/shadcn";
2
2
  import * as React$1 from "react";
3
- import * as react_jsx_runtime8 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime7 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/input/Input.d.ts
6
6
  type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
10
10
  prefixClassName?: string;
11
11
  suffixClassName?: string;
12
12
  };
13
- declare function Input$1(props: InputProps$1): react_jsx_runtime8.JSX.Element;
13
+ declare function Input$1(props: InputProps$1): react_jsx_runtime7.JSX.Element;
14
14
  //#endregion
15
15
  export { Input$1 as Input, InputProps$1 as InputProps };
package/dist/rich-text-editor/RichTextEditor.cjs CHANGED
@@ -1,12 +1,15 @@
1
1
  const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
2
- const require_predefined_toolbar_items = require('./predefined-toolbar-items.cjs');
3
- const require_ToolbarButton = require('./ToolbarButton.cjs');
2
+ const require_RichTextEditorToolbar = require('./RichTextEditorToolbar.cjs');
4
3
  let __pixpilot_shadcn = require("@pixpilot/shadcn");
5
4
  __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
6
5
  let react = require("react");
7
6
  react = require_rolldown_runtime.__toESM(react);
8
7
  let react_jsx_runtime = require("react/jsx-runtime");
9
8
  react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
9
+ let __tiptap_extension_link = require("@tiptap/extension-link");
10
+ __tiptap_extension_link = require_rolldown_runtime.__toESM(__tiptap_extension_link);
11
+ let __tiptap_extension_text_align = require("@tiptap/extension-text-align");
12
+ __tiptap_extension_text_align = require_rolldown_runtime.__toESM(__tiptap_extension_text_align);
10
13
  let __tiptap_react = require("@tiptap/react");
11
14
  __tiptap_react = require_rolldown_runtime.__toESM(__tiptap_react);
12
15
  let __tiptap_starter_kit = require("@tiptap/starter-kit");
@@ -18,9 +21,14 @@ const defaultToolbarItems = [
18
21
  "bold",
19
22
  "italic",
20
23
  "underline",
24
+ "link",
21
25
  "strike",
22
26
  "code",
23
27
  "|",
28
+ "alignLeft",
29
+ "alignCenter",
30
+ "alignRight",
31
+ "|",
24
32
  "heading1",
25
33
  "heading2",
26
34
  "heading3",
@@ -31,10 +39,9 @@ const defaultToolbarItems = [
31
39
  "blockquote",
32
40
  "codeBlock"
33
41
  ];
34
- const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
35
- const [, forceRender] = react.default.useReducer((x) => x + 1, 0);
36
- const defaultEditorProps = { attributes: { class: (0, __pixpilot_shadcn.cn)("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_*:last-child]:mb-0", slots?.content?.className) } };
37
- const mergedEditorProps = {
42
+ function useEditorProps(slots, customEditorProps) {
43
+ const defaultEditorProps = react.default.useMemo(() => ({ attributes: { class: (0, __pixpilot_shadcn.cn)("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_a]:text-blue-500 [&_a]:hover:text-blue-600 [&_a]:cursor-pointer [&_a]:underline [&_a]:underline-offset-2 ", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
44
+ return react.default.useMemo(() => ({
38
45
  ...defaultEditorProps,
39
46
  ...customEditorProps,
40
47
  attributes: {
@@ -42,14 +49,25 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
42
49
  ...customEditorProps?.attributes,
43
50
  class: (0, __pixpilot_shadcn.cn)(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
44
51
  }
45
- };
52
+ }), [defaultEditorProps, customEditorProps]);
53
+ }
54
+ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
55
+ const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
56
+ const mergedEditorProps = useEditorProps(slots, customEditorProps);
57
+ const onChangeRef = react.default.useRef(onChange);
58
+ onChangeRef.current = onChange;
59
+ const handleChange = react.default.useCallback((props) => {
60
+ onChangeRef.current?.(props.editor.getHTML());
61
+ }, []);
46
62
  const editorInstance = (0, __tiptap_react.useEditor)({
47
- extensions: [__tiptap_starter_kit.default].concat(extensions),
63
+ extensions: react.default.useMemo(() => [
64
+ __tiptap_starter_kit.default,
65
+ __tiptap_extension_link.default,
66
+ __tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
67
+ ].concat(extensions), [extensions]),
48
68
  content: value,
49
69
  editable,
50
- onUpdate: ({ editor: updatedEditor }) => {
51
- onChange?.(updatedEditor.getHTML());
52
- },
70
+ onUpdate: handleChange,
53
71
  immediatelyRender,
54
72
  editorProps: mergedEditorProps
55
73
  });
@@ -76,49 +94,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
76
94
  children: "Loading editor..."
77
95
  })]
78
96
  });
79
- const handleCommand = (commandFn) => {
80
- try {
81
- commandFn();
82
- } catch {}
83
- };
84
- const renderToolbar = () => {
85
- if (!showToolbar) return null;
86
- const isEditorFocused = editorInstance.isFocused;
87
- let separatorCount = 0;
88
- let customCount = 0;
89
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
90
- className: (0, __pixpilot_shadcn.cn)("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
91
- children: toolbarItems.map((option) => {
92
- if (option === "|") {
93
- separatorCount += 1;
94
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __pixpilot_shadcn.cn)("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
95
- }
96
- if (typeof option === "string") {
97
- const predefinedOption = require_predefined_toolbar_items.predefinedToolbarItems[option];
98
- if (!predefinedOption) return null;
99
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
100
- onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
101
- isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
102
- tooltip: predefinedOption.tooltip,
103
- className: slots?.toolbar?.button?.className,
104
- children: predefinedOption.icon
105
- }, option);
106
- }
107
- const customOption = option;
108
- customCount += 1;
109
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
110
- onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
111
- isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
112
- tooltip: customOption.tooltip,
113
- className: slots?.toolbar?.button?.className,
114
- children: customOption.icon
115
- }, `custom-${customCount}-${customOption.tooltip}`);
116
- })
117
- });
118
- };
119
97
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
120
98
  className: (0, __pixpilot_shadcn.cn)("border rounded-md bg-background", slots?.root?.className),
121
- children: [renderToolbar(), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, { editor: editorInstance })]
99
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RichTextEditorToolbar.RichTextEditorToolbar, {
100
+ editor: editorInstance,
101
+ toolbarItems,
102
+ slots,
103
+ showToolbar,
104
+ renderTick
105
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, { editor: editorInstance })]
122
106
  });
123
107
  };
124
108
  RichTextEditor.displayName = "RichTextEditor";
package/dist/rich-text-editor/RichTextEditor.js CHANGED
@@ -1,8 +1,9 @@
1
- import { predefinedToolbarItems } from "./predefined-toolbar-items.js";
2
- import { ToolbarButton } from "./ToolbarButton.js";
1
+ import { RichTextEditorToolbar } from "./RichTextEditorToolbar.js";
3
2
  import { cn } from "@pixpilot/shadcn";
4
3
  import React from "react";
5
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
+ import Link from "@tiptap/extension-link";
6
+ import TextAlign from "@tiptap/extension-text-align";
6
7
  import { EditorContent, useEditor } from "@tiptap/react";
7
8
  import StarterKit from "@tiptap/starter-kit";
8
9
 
@@ -12,9 +13,14 @@ const defaultToolbarItems = [
12
13
  "bold",
13
14
  "italic",
14
15
  "underline",
16
+ "link",
15
17
  "strike",
16
18
  "code",
17
19
  "|",
20
+ "alignLeft",
21
+ "alignCenter",
22
+ "alignRight",
23
+ "|",
18
24
  "heading1",
19
25
  "heading2",
20
26
  "heading3",
@@ -25,10 +31,9 @@ const defaultToolbarItems = [
25
31
  "blockquote",
26
32
  "codeBlock"
27
33
  ];
28
- const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
29
- const [, forceRender] = React.useReducer((x) => x + 1, 0);
30
- const defaultEditorProps = { attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_*:last-child]:mb-0", slots?.content?.className) } };
31
- const mergedEditorProps = {
34
+ function useEditorProps(slots, customEditorProps) {
35
+ const defaultEditorProps = React.useMemo(() => ({ attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono [&_pre]:mb-4", "[&_a]:text-blue-500 [&_a]:hover:text-blue-600 [&_a]:cursor-pointer [&_a]:underline [&_a]:underline-offset-2 ", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
36
+ return React.useMemo(() => ({
32
37
  ...defaultEditorProps,
33
38
  ...customEditorProps,
34
39
  attributes: {
@@ -36,14 +41,25 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
36
41
  ...customEditorProps?.attributes,
37
42
  class: cn(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
38
43
  }
39
- };
44
+ }), [defaultEditorProps, customEditorProps]);
45
+ }
46
+ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
47
+ const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
48
+ const mergedEditorProps = useEditorProps(slots, customEditorProps);
49
+ const onChangeRef = React.useRef(onChange);
50
+ onChangeRef.current = onChange;
51
+ const handleChange = React.useCallback((props) => {
52
+ onChangeRef.current?.(props.editor.getHTML());
53
+ }, []);
40
54
  const editorInstance = useEditor({
41
- extensions: [StarterKit].concat(extensions),
55
+ extensions: React.useMemo(() => [
56
+ StarterKit,
57
+ Link,
58
+ TextAlign.configure({ types: ["heading", "paragraph"] })
59
+ ].concat(extensions), [extensions]),
42
60
  content: value,
43
61
  editable,
44
- onUpdate: ({ editor: updatedEditor }) => {
45
- onChange?.(updatedEditor.getHTML());
46
- },
62
+ onUpdate: handleChange,
47
63
  immediatelyRender,
48
64
  editorProps: mergedEditorProps
49
65
  });
@@ -70,49 +86,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
70
86
  children: "Loading editor..."
71
87
  })]
72
88
  });
73
- const handleCommand = (commandFn) => {
74
- try {
75
- commandFn();
76
- } catch {}
77
- };
78
- const renderToolbar = () => {
79
- if (!showToolbar) return null;
80
- const isEditorFocused = editorInstance.isFocused;
81
- let separatorCount = 0;
82
- let customCount = 0;
83
- return /* @__PURE__ */ jsx("div", {
84
- className: cn("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
85
- children: toolbarItems.map((option) => {
86
- if (option === "|") {
87
- separatorCount += 1;
88
- return /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
89
- }
90
- if (typeof option === "string") {
91
- const predefinedOption = predefinedToolbarItems[option];
92
- if (!predefinedOption) return null;
93
- return /* @__PURE__ */ jsx(ToolbarButton, {
94
- onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
95
- isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
96
- tooltip: predefinedOption.tooltip,
97
- className: slots?.toolbar?.button?.className,
98
- children: predefinedOption.icon
99
- }, option);
100
- }
101
- const customOption = option;
102
- customCount += 1;
103
- return /* @__PURE__ */ jsx(ToolbarButton, {
104
- onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
105
- isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
106
- tooltip: customOption.tooltip,
107
- className: slots?.toolbar?.button?.className,
108
- children: customOption.icon
109
- }, `custom-${customCount}-${customOption.tooltip}`);
110
- })
111
- });
112
- };
113
89
  return /* @__PURE__ */ jsxs("div", {
114
90
  className: cn("border rounded-md bg-background", slots?.root?.className),
115
- children: [renderToolbar(), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
91
+ children: [/* @__PURE__ */ jsx(RichTextEditorToolbar, {
92
+ editor: editorInstance,
93
+ toolbarItems,
94
+ slots,
95
+ showToolbar,
96
+ renderTick
97
+ }), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
116
98
  });
117
99
  };
118
100
  RichTextEditor.displayName = "RichTextEditor";
package/dist/rich-text-editor/RichTextEditorToolbar.cjs ADDED
@@ -0,0 +1,56 @@
1
+ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
2
+ const require_predefined_toolbar_items = require('./predefined-toolbar-items.cjs');
3
+ const require_ToolbarButton = require('./ToolbarButton.cjs');
4
+ let __pixpilot_shadcn = require("@pixpilot/shadcn");
5
+ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
6
+ let react = require("react");
7
+ react = require_rolldown_runtime.__toESM(react);
8
+ let react_jsx_runtime = require("react/jsx-runtime");
9
+ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
10
+
11
+ //#region src/rich-text-editor/RichTextEditorToolbar.tsx
12
+ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick }) => {
13
+ if (!showToolbar) return null;
14
+ const handleCommand = (commandFn) => {
15
+ try {
16
+ commandFn();
17
+ } catch {}
18
+ };
19
+ const isEditorFocused = editor.isFocused;
20
+ let separatorCount = 0;
21
+ let customCount = 0;
22
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
23
+ "data-render-tick": renderTick,
24
+ className: (0, __pixpilot_shadcn.cn)("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
25
+ children: toolbarItems.map((option) => {
26
+ if (option === "|") {
27
+ separatorCount += 1;
28
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __pixpilot_shadcn.cn)("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
29
+ }
30
+ if (typeof option === "string") {
31
+ const predefinedOption = require_predefined_toolbar_items.predefinedToolbarItems[option];
32
+ if (!predefinedOption) return null;
33
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
34
+ onClick: () => handleCommand(() => predefinedOption.onClick(editor)),
35
+ isActive: isEditorFocused && (predefinedOption.isActive?.(editor) ?? false),
36
+ tooltip: predefinedOption.tooltip,
37
+ className: slots?.toolbar?.button?.className,
38
+ children: predefinedOption.icon
39
+ }, option);
40
+ }
41
+ const customOption = option;
42
+ customCount += 1;
43
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
44
+ onClick: () => handleCommand(() => customOption.onClick(editor)),
45
+ isActive: isEditorFocused && (customOption.isActive?.(editor) ?? false),
46
+ tooltip: customOption.tooltip,
47
+ className: slots?.toolbar?.button?.className,
48
+ children: customOption.icon
49
+ }, `custom-${customCount}-${customOption.tooltip}`);
50
+ })
51
+ });
52
+ };
53
+ const RichTextEditorToolbar = react.default.memo(RichTextEditorToolbarComponent);
54
+
55
+ //#endregion
56
+ exports.RichTextEditorToolbar = RichTextEditorToolbar;
package/dist/rich-text-editor/RichTextEditorToolbar.js ADDED
@@ -0,0 +1,52 @@
1
+ import { predefinedToolbarItems } from "./predefined-toolbar-items.js";
2
+ import { ToolbarButton } from "./ToolbarButton.js";
3
+ import { cn } from "@pixpilot/shadcn";
4
+ import React from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+
7
+ //#region src/rich-text-editor/RichTextEditorToolbar.tsx
8
+ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick }) => {
9
+ if (!showToolbar) return null;
10
+ const handleCommand = (commandFn) => {
11
+ try {
12
+ commandFn();
13
+ } catch {}
14
+ };
15
+ const isEditorFocused = editor.isFocused;
16
+ let separatorCount = 0;
17
+ let customCount = 0;
18
+ return /* @__PURE__ */ jsx("div", {
19
+ "data-render-tick": renderTick,
20
+ className: cn("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
21
+ children: toolbarItems.map((option) => {
22
+ if (option === "|") {
23
+ separatorCount += 1;
24
+ return /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
25
+ }
26
+ if (typeof option === "string") {
27
+ const predefinedOption = predefinedToolbarItems[option];
28
+ if (!predefinedOption) return null;
29
+ return /* @__PURE__ */ jsx(ToolbarButton, {
30
+ onClick: () => handleCommand(() => predefinedOption.onClick(editor)),
31
+ isActive: isEditorFocused && (predefinedOption.isActive?.(editor) ?? false),
32
+ tooltip: predefinedOption.tooltip,
33
+ className: slots?.toolbar?.button?.className,
34
+ children: predefinedOption.icon
35
+ }, option);
36
+ }
37
+ const customOption = option;
38
+ customCount += 1;
39
+ return /* @__PURE__ */ jsx(ToolbarButton, {
40
+ onClick: () => handleCommand(() => customOption.onClick(editor)),
41
+ isActive: isEditorFocused && (customOption.isActive?.(editor) ?? false),
42
+ tooltip: customOption.tooltip,
43
+ className: slots?.toolbar?.button?.className,
44
+ children: customOption.icon
45
+ }, `custom-${customCount}-${customOption.tooltip}`);
46
+ })
47
+ });
48
+ };
49
+ const RichTextEditorToolbar = React.memo(RichTextEditorToolbarComponent);
50
+
51
+ //#endregion
52
+ export { RichTextEditorToolbar };
package/dist/rich-text-editor/predefined-toolbar-items.cjs CHANGED
@@ -24,6 +24,12 @@ const predefinedToolbarItems = {
24
24
  onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
25
25
  isActive: (editor) => editor.isActive("underline")
26
26
  },
27
+ link: {
28
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "h-4 w-4" }),
29
+ tooltip: "Link",
30
+ onClick: (editor) => editor.chain().focus().toggleLink().run(),
31
+ isActive: (editor) => editor.isActive("link")
32
+ },
27
33
  strike: {
28
34
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Strikethrough, { className: "h-4 w-4" }),
29
35
  tooltip: "Strikethrough",
@@ -77,6 +83,24 @@ const predefinedToolbarItems = {
77
83
  tooltip: "Code Block",
78
84
  onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
79
85
  isActive: (editor) => editor.isActive("codeBlock")
86
+ },
87
+ alignLeft: {
88
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignLeft, { className: "h-4 w-4" }),
89
+ tooltip: "Align Left",
90
+ onClick: (editor) => editor.chain().focus().setTextAlign("left").run(),
91
+ isActive: (editor) => editor.isActive({ textAlign: "left" })
92
+ },
93
+ alignCenter: {
94
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignCenter, { className: "h-4 w-4" }),
95
+ tooltip: "Align Center",
96
+ onClick: (editor) => editor.chain().focus().setTextAlign("center").run(),
97
+ isActive: (editor) => editor.isActive({ textAlign: "center" })
98
+ },
99
+ alignRight: {
100
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignRight, { className: "h-4 w-4" }),
101
+ tooltip: "Align Right",
102
+ onClick: (editor) => editor.chain().focus().setTextAlign("right").run(),
103
+ isActive: (editor) => editor.isActive({ textAlign: "right" })
80
104
  }
81
105
  };
82
106
 
package/dist/rich-text-editor/predefined-toolbar-items.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
1
+ import { AlignCenter, AlignLeft, AlignRight, Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
 
4
4
  //#region src/rich-text-editor/predefined-toolbar-items.tsx
@@ -21,6 +21,12 @@ const predefinedToolbarItems = {
21
21
  onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
22
22
  isActive: (editor) => editor.isActive("underline")
23
23
  },
24
+ link: {
25
+ icon: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }),
26
+ tooltip: "Link",
27
+ onClick: (editor) => editor.chain().focus().toggleLink().run(),
28
+ isActive: (editor) => editor.isActive("link")
29
+ },
24
30
  strike: {
25
31
  icon: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
26
32
  tooltip: "Strikethrough",
@@ -74,6 +80,24 @@ const predefinedToolbarItems = {
74
80
  tooltip: "Code Block",
75
81
  onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
76
82
  isActive: (editor) => editor.isActive("codeBlock")
83
+ },
84
+ alignLeft: {
85
+ icon: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" }),
86
+ tooltip: "Align Left",
87
+ onClick: (editor) => editor.chain().focus().setTextAlign("left").run(),
88
+ isActive: (editor) => editor.isActive({ textAlign: "left" })
89
+ },
90
+ alignCenter: {
91
+ icon: /* @__PURE__ */ jsx(AlignCenter, { className: "h-4 w-4" }),
92
+ tooltip: "Align Center",
93
+ onClick: (editor) => editor.chain().focus().setTextAlign("center").run(),
94
+ isActive: (editor) => editor.isActive({ textAlign: "center" })
95
+ },
96
+ alignRight: {
97
+ icon: /* @__PURE__ */ jsx(AlignRight, { className: "h-4 w-4" }),
98
+ tooltip: "Align Right",
99
+ onClick: (editor) => editor.chain().focus().setTextAlign("right").run(),
100
+ isActive: (editor) => editor.isActive({ textAlign: "right" })
77
101
  }
78
102
  };
79
103
 
package/dist/theme-toggle/ThemeModeDropdown.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime9 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime10 from "react/jsx-runtime";
2
2
 
3
3
  //#region src/theme-toggle/ThemeModeDropdown.d.ts
4
4
  interface ThemeModeDropdownProps {
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
17
17
  * Provides Light / Dark / System options.
18
18
  * Pure component - requires themeValue and onChange props.
19
19
  */
20
- declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime9.JSX.Element;
20
+ declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime10.JSX.Element;
21
21
  declare namespace ThemeModeDropdown {
22
22
  var displayName: string;
23
23
  }
package/dist/theme-toggle/ThemeModeSwitchInside.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime10 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime11 from "react/jsx-runtime";
2
2
 
3
3
  //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
4
4
  type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
25
25
  * Icons are embedded within the switch control.
26
26
  * Pure component - requires value and onChange props.
27
27
  */
28
- declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime10.JSX.Element;
28
+ declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime11.JSX.Element;
29
29
  declare namespace ThemeModeSwitchInside {
30
30
  var displayName: string;
31
31
  }
package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime11 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime12 from "react/jsx-runtime";
2
2
 
3
3
  //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
4
4
  interface ThemeModeSwitchOutsideProps {
@@ -22,7 +22,7 @@ interface ThemeModeSwitchOutsideProps {
22
22
  * Icons flank the switch control on either side.
23
23
  * Pure component - requires value and onChange props.
24
24
  */
25
- declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime11.JSX.Element;
25
+ declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
26
26
  declare namespace ThemeModeSwitchOutside {
27
27
  var displayName: string;
28
28
  }
package/dist/theme-toggle/ThemeModeToggleButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime12 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime9 from "react/jsx-runtime";
2
2
 
3
3
  //#region src/theme-toggle/ThemeModeToggleButton.d.ts
4
4
  interface ThemeModeToggleButtonProps {
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
13
13
  * Light/Dark toggle button.
14
14
  * Pure component - toggles between light and dark.
15
15
  */
16
- declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
16
+ declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime9.JSX.Element;
17
17
  declare namespace ThemeModeToggleButton {
18
18
  var displayName: string;
19
19
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pixpilot/shadcn-ui",
3
3
  "type": "module",
4
- "version": "0.34.0",
4
+ "version": "0.36.0",
5
5
  "description": "Custom UI components and utilities built with shadcn/ui.",
6
6
  "author": "m.doaie <m.doaie@hotmail.com>",
7
7
  "license": "MIT",
@@ -34,10 +34,12 @@
34
34
  "@iconify/react": "^6.0.2",
35
35
  "@pixpilot/hash": "^0.0.0",
36
36
  "@tailwindcss/typography": "^0.5.19",
37
- "@tanstack/react-virtual": "^3.13.13",
38
- "@tiptap/core": "^3.13.0",
39
- "@tiptap/react": "^3.13.0",
40
- "@tiptap/starter-kit": "^3.13.0",
37
+ "@tanstack/react-virtual": "^3.13.18",
38
+ "@tiptap/core": "^3.16.0",
39
+ "@tiptap/extension-link": "^3.16.0",
40
+ "@tiptap/extension-text-align": "^3.16.0",
41
+ "@tiptap/react": "^3.16.0",
42
+ "@tiptap/starter-kit": "^3.16.0",
41
43
  "class-variance-authority": "^0.7.1",
42
44
  "lucide-react": "0.553.0",
43
45
  "next-themes": "0.4.6",