@pixpilot/shadcn-ui 0.33.0 → 0.34.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.
- package/dist/file-upload/FileUpload.d.cts +2 -2
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/input/Input.d.cts +2 -2
- package/dist/rich-text-editor/RichTextEditor.cjs +5 -5
- package/dist/rich-text-editor/RichTextEditor.d.cts +4 -4
- package/dist/rich-text-editor/RichTextEditor.d.ts +4 -4
- package/dist/rich-text-editor/RichTextEditor.js +5 -5
- package/dist/rich-text-editor/index.d.cts +1 -1
- package/dist/rich-text-editor/index.d.ts +1 -1
- package/dist/rich-text-editor/{predefined-toolbar-options.cjs → predefined-toolbar-items.cjs} +3 -3
- package/dist/rich-text-editor/{predefined-toolbar-options.js → predefined-toolbar-items.js} +3 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FileUploadProps } from "./types/index.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime7 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload/FileUpload.d.ts
|
|
5
|
-
declare function FileUpload(props: FileUploadProps):
|
|
5
|
+
declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FileUpload };
|
package/dist/index.d.cts
CHANGED
|
@@ -40,7 +40,7 @@ import "./layout/index.cjs";
|
|
|
40
40
|
import { LoaderProps, LoadingOverlay } from "./LoadingOverlay.cjs";
|
|
41
41
|
import { Pagination, PaginationProps } from "./pagination/Pagination.cjs";
|
|
42
42
|
import "./pagination/index.cjs";
|
|
43
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
43
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./rich-text-editor/RichTextEditor.cjs";
|
|
44
44
|
import "./rich-text-editor/index.cjs";
|
|
45
45
|
import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.cjs";
|
|
46
46
|
import { Select, SelectOption } from "./Select.cjs";
|
|
@@ -67,4 +67,4 @@ import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toa
|
|
|
67
67
|
import { Toaster } from "./toast/ToastProvider.cjs";
|
|
68
68
|
import "./toast/index.cjs";
|
|
69
69
|
import { cn } from "@pixpilot/shadcn";
|
|
70
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster,
|
|
70
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ import "./layout/index.js";
|
|
|
42
42
|
import { LoaderProps, LoadingOverlay } from "./LoadingOverlay.js";
|
|
43
43
|
import { Pagination, PaginationProps } from "./pagination/Pagination.js";
|
|
44
44
|
import "./pagination/index.js";
|
|
45
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
45
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./rich-text-editor/RichTextEditor.js";
|
|
46
46
|
import "./rich-text-editor/index.js";
|
|
47
47
|
import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.js";
|
|
48
48
|
import { Select, SelectOption } from "./Select.js";
|
|
@@ -69,4 +69,4 @@ import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toa
|
|
|
69
69
|
import { Toaster } from "./toast/ToastProvider.js";
|
|
70
70
|
import "./toast/index.js";
|
|
71
71
|
import { cn } from "@pixpilot/shadcn";
|
|
72
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster,
|
|
72
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/input/Input.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime6 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):
|
|
13
|
+
declare function Input(props: InputProps$1): react_jsx_runtime6.JSX.Element;
|
|
14
14
|
//#endregion
|
|
15
15
|
export { Input, InputProps$1 as InputProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
-
const
|
|
2
|
+
const require_predefined_toolbar_items = require('./predefined-toolbar-items.cjs');
|
|
3
3
|
const require_ToolbarButton = require('./ToolbarButton.cjs');
|
|
4
4
|
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
5
5
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
@@ -14,7 +14,7 @@ __tiptap_starter_kit = require_rolldown_runtime.__toESM(__tiptap_starter_kit);
|
|
|
14
14
|
|
|
15
15
|
//#region src/rich-text-editor/RichTextEditor.tsx
|
|
16
16
|
const defaultExtensions = [];
|
|
17
|
-
const
|
|
17
|
+
const defaultToolbarItems = [
|
|
18
18
|
"bold",
|
|
19
19
|
"italic",
|
|
20
20
|
"underline",
|
|
@@ -31,7 +31,7 @@ const defaultToolbarOptions = [
|
|
|
31
31
|
"blockquote",
|
|
32
32
|
"codeBlock"
|
|
33
33
|
];
|
|
34
|
-
const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true,
|
|
34
|
+
const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
|
|
35
35
|
const [, forceRender] = react.default.useReducer((x) => x + 1, 0);
|
|
36
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
37
|
const mergedEditorProps = {
|
|
@@ -88,13 +88,13 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
|
|
|
88
88
|
let customCount = 0;
|
|
89
89
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
90
90
|
className: (0, __pixpilot_shadcn.cn)("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
|
|
91
|
-
children:
|
|
91
|
+
children: toolbarItems.map((option) => {
|
|
92
92
|
if (option === "|") {
|
|
93
93
|
separatorCount += 1;
|
|
94
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
95
|
}
|
|
96
96
|
if (typeof option === "string") {
|
|
97
|
-
const predefinedOption =
|
|
97
|
+
const predefinedOption = require_predefined_toolbar_items.predefinedToolbarItems[option];
|
|
98
98
|
if (!predefinedOption) return null;
|
|
99
99
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {
|
|
100
100
|
onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
|
|
@@ -4,7 +4,7 @@ import { UseEditorOptions } from "@tiptap/react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/rich-text-editor/RichTextEditor.d.ts
|
|
6
6
|
type EditorProps = Editor['options']['editorProps'];
|
|
7
|
-
type
|
|
7
|
+
type ToolbarItems = string | '|' | {
|
|
8
8
|
icon: React.ReactNode;
|
|
9
9
|
tooltip: string;
|
|
10
10
|
onClick: (editor: any) => void;
|
|
@@ -62,10 +62,10 @@ interface RichTextEditorProps {
|
|
|
62
62
|
*/
|
|
63
63
|
showToolbar?: boolean;
|
|
64
64
|
/**
|
|
65
|
-
* Array of toolbar
|
|
65
|
+
* Array of toolbar items to display. If provided, only these items will be shown.
|
|
66
66
|
* Can be strings for predefined commands or objects for custom buttons.
|
|
67
67
|
*/
|
|
68
|
-
|
|
68
|
+
toolbarItems?: ToolbarItems[];
|
|
69
69
|
/**
|
|
70
70
|
* Custom editor props to pass to the editor
|
|
71
71
|
*/
|
|
@@ -79,4 +79,4 @@ interface RichTextEditorProps {
|
|
|
79
79
|
}
|
|
80
80
|
declare const RichTextEditor: React.FC<RichTextEditorProps>;
|
|
81
81
|
//#endregion
|
|
82
|
-
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
82
|
+
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems };
|
|
@@ -4,7 +4,7 @@ import { Editor, Extension } from "@tiptap/core";
|
|
|
4
4
|
|
|
5
5
|
//#region src/rich-text-editor/RichTextEditor.d.ts
|
|
6
6
|
type EditorProps = Editor['options']['editorProps'];
|
|
7
|
-
type
|
|
7
|
+
type ToolbarItems = string | '|' | {
|
|
8
8
|
icon: React.ReactNode;
|
|
9
9
|
tooltip: string;
|
|
10
10
|
onClick: (editor: any) => void;
|
|
@@ -62,10 +62,10 @@ interface RichTextEditorProps {
|
|
|
62
62
|
*/
|
|
63
63
|
showToolbar?: boolean;
|
|
64
64
|
/**
|
|
65
|
-
* Array of toolbar
|
|
65
|
+
* Array of toolbar items to display. If provided, only these items will be shown.
|
|
66
66
|
* Can be strings for predefined commands or objects for custom buttons.
|
|
67
67
|
*/
|
|
68
|
-
|
|
68
|
+
toolbarItems?: ToolbarItems[];
|
|
69
69
|
/**
|
|
70
70
|
* Custom editor props to pass to the editor
|
|
71
71
|
*/
|
|
@@ -79,4 +79,4 @@ interface RichTextEditorProps {
|
|
|
79
79
|
}
|
|
80
80
|
declare const RichTextEditor: React.FC<RichTextEditorProps>;
|
|
81
81
|
//#endregion
|
|
82
|
-
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
82
|
+
export { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { predefinedToolbarItems } from "./predefined-toolbar-items.js";
|
|
2
2
|
import { ToolbarButton } from "./ToolbarButton.js";
|
|
3
3
|
import { cn } from "@pixpilot/shadcn";
|
|
4
4
|
import React from "react";
|
|
@@ -8,7 +8,7 @@ import StarterKit from "@tiptap/starter-kit";
|
|
|
8
8
|
|
|
9
9
|
//#region src/rich-text-editor/RichTextEditor.tsx
|
|
10
10
|
const defaultExtensions = [];
|
|
11
|
-
const
|
|
11
|
+
const defaultToolbarItems = [
|
|
12
12
|
"bold",
|
|
13
13
|
"italic",
|
|
14
14
|
"underline",
|
|
@@ -25,7 +25,7 @@ const defaultToolbarOptions = [
|
|
|
25
25
|
"blockquote",
|
|
26
26
|
"codeBlock"
|
|
27
27
|
];
|
|
28
|
-
const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true,
|
|
28
|
+
const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
|
|
29
29
|
const [, forceRender] = React.useReducer((x) => x + 1, 0);
|
|
30
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
31
|
const mergedEditorProps = {
|
|
@@ -82,13 +82,13 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
|
|
|
82
82
|
let customCount = 0;
|
|
83
83
|
return /* @__PURE__ */ jsx("div", {
|
|
84
84
|
className: cn("flex flex-wrap items-center gap-1 border-b p-2", slots?.toolbar?.className),
|
|
85
|
-
children:
|
|
85
|
+
children: toolbarItems.map((option) => {
|
|
86
86
|
if (option === "|") {
|
|
87
87
|
separatorCount += 1;
|
|
88
88
|
return /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
|
|
89
89
|
}
|
|
90
90
|
if (typeof option === "string") {
|
|
91
|
-
const predefinedOption =
|
|
91
|
+
const predefinedOption = predefinedToolbarItems[option];
|
|
92
92
|
if (!predefinedOption) return null;
|
|
93
93
|
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
94
94
|
onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
1
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./RichTextEditor.cjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots,
|
|
1
|
+
import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./RichTextEditor.js";
|
package/dist/rich-text-editor/{predefined-toolbar-options.cjs → predefined-toolbar-items.cjs}
RENAMED
|
@@ -4,8 +4,8 @@ lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
6
6
|
|
|
7
|
-
//#region src/rich-text-editor/predefined-toolbar-
|
|
8
|
-
const
|
|
7
|
+
//#region src/rich-text-editor/predefined-toolbar-items.tsx
|
|
8
|
+
const predefinedToolbarItems = {
|
|
9
9
|
bold: {
|
|
10
10
|
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Bold, { className: "h-4 w-4" }),
|
|
11
11
|
tooltip: "Bold",
|
|
@@ -81,4 +81,4 @@ const predefinedToolbarOptions = {
|
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
//#endregion
|
|
84
|
-
exports.
|
|
84
|
+
exports.predefinedToolbarItems = predefinedToolbarItems;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
|
|
4
|
-
//#region src/rich-text-editor/predefined-toolbar-
|
|
5
|
-
const
|
|
4
|
+
//#region src/rich-text-editor/predefined-toolbar-items.tsx
|
|
5
|
+
const predefinedToolbarItems = {
|
|
6
6
|
bold: {
|
|
7
7
|
icon: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }),
|
|
8
8
|
tooltip: "Bold",
|
|
@@ -78,4 +78,4 @@ const predefinedToolbarOptions = {
|
|
|
78
78
|
};
|
|
79
79
|
|
|
80
80
|
//#endregion
|
|
81
|
-
export {
|
|
81
|
+
export { predefinedToolbarItems };
|
package/package.json
CHANGED