@pixpilot/shadcn-ui 0.43.0 → 0.44.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 (8) hide show
  1. package/dist/dialog/Dialog.d.cts +4 -4
  2. package/dist/file-upload/FileUpload.d.cts +2 -2
  3. package/dist/input/Input.d.cts +2 -2
  4. package/dist/rich-text-editor/RichTextEditor.cjs +13 -7
  5. package/dist/rich-text-editor/RichTextEditor.d.cts +4 -0
  6. package/dist/rich-text-editor/RichTextEditor.d.ts +4 -0
  7. package/dist/rich-text-editor/RichTextEditor.js +12 -7
  8. package/package.json +2 -1
package/dist/dialog/Dialog.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime7 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime6 from "react/jsx-runtime";
2
2
  import * as React$1 from "react";
3
3
  import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
4
4
 
@@ -9,14 +9,14 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<_radix_ui_re
9
9
  declare function DialogHeader({
10
10
  className,
11
11
  ...props
12
- }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
12
+ }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime6.JSX.Element;
13
13
  declare function DialogBody({
14
14
  className,
15
15
  ...props
16
- }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
16
+ }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime6.JSX.Element;
17
17
  declare function DialogFooter({
18
18
  className,
19
19
  ...props
20
- }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
20
+ }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime6.JSX.Element;
21
21
  //#endregion
22
22
  export { DialogBody, DialogContent, DialogFooter, DialogHeader };
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_runtime6 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime11 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/file-upload/FileUpload.d.ts
5
- declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
5
+ declare function FileUpload(props: FileUploadProps): react_jsx_runtime11.JSX.Element;
6
6
  //#endregion
7
7
  export { FileUpload };
package/dist/input/Input.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime11 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime9 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_runtime11.JSX.Element;
13
+ declare function Input(props: InputProps$1): react_jsx_runtime9.JSX.Element;
14
14
  //#endregion
15
15
  export { Input, InputProps$1 as InputProps };
package/dist/rich-text-editor/RichTextEditor.cjs CHANGED
@@ -8,6 +8,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
8
8
  react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
9
9
  let __tiptap_extension_link = require("@tiptap/extension-link");
10
10
  __tiptap_extension_link = require_rolldown_runtime.__toESM(__tiptap_extension_link);
11
+ let __tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
12
+ __tiptap_extension_placeholder = require_rolldown_runtime.__toESM(__tiptap_extension_placeholder);
11
13
  let __tiptap_extension_text_align = require("@tiptap/extension-text-align");
12
14
  __tiptap_extension_text_align = require_rolldown_runtime.__toESM(__tiptap_extension_text_align);
13
15
  let __tiptap_react = require("@tiptap/react");
@@ -40,7 +42,7 @@ const defaultToolbarItems = [
40
42
  "codeBlock"
41
43
  ];
42
44
  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]);
45
+ 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", "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:text-muted-foreground [&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:h-0", slots?.content?.className) } }), [slots]);
44
46
  return react.default.useMemo(() => ({
45
47
  ...defaultEditorProps,
46
48
  ...customEditorProps,
@@ -51,7 +53,7 @@ function useEditorProps(slots, customEditorProps) {
51
53
  }
52
54
  }), [defaultEditorProps, customEditorProps]);
53
55
  }
54
- const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native" }) => {
56
+ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder }) => {
55
57
  const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
56
58
  const mergedEditorProps = useEditorProps(slots, customEditorProps);
57
59
  const onChangeRef = react.default.useRef(onChange);
@@ -60,11 +62,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
60
62
  onChangeRef.current?.(props.editor.getHTML());
61
63
  }, []);
62
64
  const editorInstance = (0, __tiptap_react.useEditor)({
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]),
65
+ extensions: react.default.useMemo(() => {
66
+ const baseExtensions = [
67
+ __tiptap_starter_kit.default,
68
+ __tiptap_extension_link.default,
69
+ __tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
70
+ ];
71
+ if (placeholder != null) baseExtensions.push(__tiptap_extension_placeholder.default.configure({ placeholder }));
72
+ return baseExtensions.concat(extensions);
73
+ }, [extensions, placeholder]),
68
74
  content: value,
69
75
  editable,
70
76
  onUpdate: handleChange,
package/dist/rich-text-editor/RichTextEditor.d.cts CHANGED
@@ -82,6 +82,10 @@ interface RichTextEditorProps {
82
82
  * @default 'native'
83
83
  */
84
84
  tooltipMode?: ToolbarButtonTooltipMode;
85
+ /**
86
+ * Placeholder text to show when the editor is empty
87
+ */
88
+ placeholder?: string;
85
89
  }
86
90
  declare const RichTextEditor: React.FC<RichTextEditorProps>;
87
91
  //#endregion
package/dist/rich-text-editor/RichTextEditor.d.ts CHANGED
@@ -82,6 +82,10 @@ interface RichTextEditorProps {
82
82
  * @default 'native'
83
83
  */
84
84
  tooltipMode?: ToolbarButtonTooltipMode;
85
+ /**
86
+ * Placeholder text to show when the editor is empty
87
+ */
88
+ placeholder?: string;
85
89
  }
86
90
  declare const RichTextEditor: React.FC<RichTextEditorProps>;
87
91
  //#endregion
package/dist/rich-text-editor/RichTextEditor.js CHANGED
@@ -3,6 +3,7 @@ import { cn } from "@pixpilot/shadcn";
3
3
  import React from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import Link from "@tiptap/extension-link";
6
+ import Placeholder from "@tiptap/extension-placeholder";
6
7
  import TextAlign from "@tiptap/extension-text-align";
7
8
  import { EditorContent, useEditor } from "@tiptap/react";
8
9
  import StarterKit from "@tiptap/starter-kit";
@@ -32,7 +33,7 @@ const defaultToolbarItems = [
32
33
  "codeBlock"
33
34
  ];
34
35
  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
+ 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", "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:text-muted-foreground [&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:h-0", slots?.content?.className) } }), [slots]);
36
37
  return React.useMemo(() => ({
37
38
  ...defaultEditorProps,
38
39
  ...customEditorProps,
@@ -43,7 +44,7 @@ function useEditorProps(slots, customEditorProps) {
43
44
  }
44
45
  }), [defaultEditorProps, customEditorProps]);
45
46
  }
46
- const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native" }) => {
47
+ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder }) => {
47
48
  const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
48
49
  const mergedEditorProps = useEditorProps(slots, customEditorProps);
49
50
  const onChangeRef = React.useRef(onChange);
@@ -52,11 +53,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
52
53
  onChangeRef.current?.(props.editor.getHTML());
53
54
  }, []);
54
55
  const editorInstance = useEditor({
55
- extensions: React.useMemo(() => [
56
- StarterKit,
57
- Link,
58
- TextAlign.configure({ types: ["heading", "paragraph"] })
59
- ].concat(extensions), [extensions]),
56
+ extensions: React.useMemo(() => {
57
+ const baseExtensions = [
58
+ StarterKit,
59
+ Link,
60
+ TextAlign.configure({ types: ["heading", "paragraph"] })
61
+ ];
62
+ if (placeholder != null) baseExtensions.push(Placeholder.configure({ placeholder }));
63
+ return baseExtensions.concat(extensions);
64
+ }, [extensions, placeholder]),
60
65
  content: value,
61
66
  editable,
62
67
  onUpdate: handleChange,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pixpilot/shadcn-ui",
3
3
  "type": "module",
4
- "version": "0.43.0",
4
+ "version": "0.44.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",
@@ -37,6 +37,7 @@
37
37
  "@tanstack/react-virtual": "^3.13.18",
38
38
  "@tiptap/core": "^3.16.0",
39
39
  "@tiptap/extension-link": "^3.16.0",
40
+ "@tiptap/extension-placeholder": "^3.17.1",
40
41
  "@tiptap/extension-text-align": "^3.16.0",
41
42
  "@tiptap/react": "^3.16.0",
42
43
  "@tiptap/starter-kit": "^3.16.0",