@arkyn/components 3.0.1-beta.70 → 3.0.1-beta.72
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/bundle.js +10710 -4409
- package/dist/bundle.umd.cjs +42 -32
- package/dist/components/richText/blockButton/index.d.ts +10 -0
- package/dist/components/richText/blockButton/index.d.ts.map +1 -0
- package/dist/components/richText/blockButton/index.js +18 -0
- package/dist/components/richText/element/index.d.ts +5 -0
- package/dist/components/richText/element/index.d.ts.map +1 -0
- package/dist/components/richText/element/index.js +24 -0
- package/dist/components/richText/index.d.ts +65 -40
- package/dist/components/richText/index.d.ts.map +1 -1
- package/dist/components/richText/index.js +149 -1
- package/dist/components/richText/insertImage/index.d.ts +5 -0
- package/dist/components/richText/insertImage/index.d.ts.map +1 -0
- package/dist/components/richText/insertImage/index.js +33 -0
- package/dist/components/richText/leaf/index.d.ts +4 -0
- package/dist/components/richText/leaf/index.d.ts.map +1 -0
- package/dist/components/richText/leaf/index.js +13 -0
- package/dist/components/richText/markButton/index.d.ts +10 -0
- package/dist/components/richText/markButton/index.d.ts.map +1 -0
- package/dist/components/richText/markButton/index.js +16 -0
- package/dist/components/richText/toolbar/index.d.ts +8 -0
- package/dist/components/richText/toolbar/index.d.ts.map +1 -0
- package/dist/components/richText/toolbar/index.js +6 -0
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/select/index.js +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/services/extractTextFromNode.d.ts +4 -0
- package/dist/services/extractTextFromNode.d.ts.map +1 -0
- package/dist/services/extractTextFromNode.js +5 -0
- package/dist/services/isBlockActive.d.ts +5 -0
- package/dist/services/isBlockActive.d.ts.map +1 -0
- package/dist/services/isBlockActive.js +14 -0
- package/dist/services/isMarkActive.d.ts +5 -0
- package/dist/services/isMarkActive.d.ts.map +1 -0
- package/dist/services/isMarkActive.js +6 -0
- package/dist/services/toHtml.d.ts.map +1 -1
- package/dist/services/toggleBlock.d.ts +5 -0
- package/dist/services/toggleBlock.d.ts.map +1 -0
- package/dist/services/toggleBlock.js +32 -0
- package/dist/services/toggleMark.d.ts +5 -0
- package/dist/services/toggleMark.d.ts.map +1 -0
- package/dist/services/toggleMark.js +10 -0
- package/dist/style.css +1 -1
- package/dist/templates/richTextTemplates.d.ts +10 -0
- package/dist/templates/richTextTemplates.d.ts.map +1 -0
- package/dist/templates/richTextTemplates.js +12 -0
- package/dist/types/richTextTypes.d.ts +4 -0
- package/dist/types/richTextTypes.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { LucideIcon } from "lucide-react";
|
|
2
|
+
import { RichTextAlignFormatType, RichTextElementFormatType } from "../../../types/richTextTypes";
|
|
3
|
+
import "./styles.css";
|
|
4
|
+
type BlockButtonProps = {
|
|
5
|
+
format: RichTextElementFormatType | RichTextAlignFormatType;
|
|
6
|
+
icon: LucideIcon;
|
|
7
|
+
};
|
|
8
|
+
declare function BlockButton({ format, icon: Icon }: BlockButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { BlockButton };
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/blockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;IAC5D,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAsB5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useSlate } from "slate-react";
|
|
3
|
+
import { isBlockActive } from "../../../services/isBlockActive";
|
|
4
|
+
import { toggleBlock } from "../../../services/toggleBlock";
|
|
5
|
+
import { textAlignTypes } from "../../../templates/richTextTemplates";
|
|
6
|
+
import "./styles.css";
|
|
7
|
+
function BlockButton({ format, icon: Icon }) {
|
|
8
|
+
const editor = useSlate();
|
|
9
|
+
const blockType = textAlignTypes.includes(format) ? "align" : "type";
|
|
10
|
+
const isActive = isBlockActive(editor, format, blockType);
|
|
11
|
+
const activeClass = isActive ? "activeTrue" : "activeFalse";
|
|
12
|
+
function handleMouseDown(event) {
|
|
13
|
+
event.preventDefault();
|
|
14
|
+
toggleBlock(editor, format);
|
|
15
|
+
}
|
|
16
|
+
return (_jsx("button", { type: "button", className: "arkynRichTextBlockButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
|
|
17
|
+
}
|
|
18
|
+
export { BlockButton };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/element/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAgErE;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "./styles.css";
|
|
3
|
+
function Element({ attributes, children, element }) {
|
|
4
|
+
const style = { textAlign: element.align };
|
|
5
|
+
switch (element.type) {
|
|
6
|
+
case "blockQuote":
|
|
7
|
+
return (_jsx("blockquote", { className: "arkynElementBlockquote", style: style, ...attributes, children: children }));
|
|
8
|
+
case "bulletedList":
|
|
9
|
+
return (_jsx("ul", { className: "arkynElementBulletList", style: style, ...attributes, children: children }));
|
|
10
|
+
case "headingOne":
|
|
11
|
+
return (_jsx("h1", { className: "arkynElementHeadingOne", style: style, ...attributes, children: children }));
|
|
12
|
+
case "headingTwo":
|
|
13
|
+
return (_jsx("h2", { className: "arkynElementHeadingTwo", style: style, ...attributes, children: children }));
|
|
14
|
+
case "listItem":
|
|
15
|
+
return (_jsx("li", { className: "arkynElementListItem", style: style, ...attributes, children: children }));
|
|
16
|
+
case "numberedList":
|
|
17
|
+
return (_jsx("ol", { className: "arkynElementNumberedList", style: style, ...attributes, children: children }));
|
|
18
|
+
case "image":
|
|
19
|
+
return (_jsxs("div", { style: style, ...attributes, children: [_jsx("img", { className: "arkynElementImage", alt: "arkynElementImage", src: element?.src || "" }), children] }));
|
|
20
|
+
default:
|
|
21
|
+
return (_jsx("p", { className: "arkynElementParagraph", style: style, ...attributes, children: children }));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
export { Element };
|
|
@@ -1,41 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
1
|
+
import { RichTextProps } from "../../types/richTextTypes";
|
|
2
|
+
import "./styles.css";
|
|
3
|
+
/**
|
|
4
|
+
* RichText component provides a feature-rich text editor with formatting capabilities
|
|
5
|
+
* including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
|
|
6
|
+
*
|
|
7
|
+
* Built on top of Slate.js, this component offers a customizable toolbar and supports
|
|
8
|
+
* character limits, form integration, and error handling.
|
|
9
|
+
*
|
|
10
|
+
* @param props - Configuration object for the RichText component
|
|
11
|
+
* @param props.name - The name attribute for the form field (required)
|
|
12
|
+
* @param props.hiddenButtons - Array of button keys to hide from the toolbar
|
|
13
|
+
* @param props.imageConfig - Configuration object for image insertion functionality
|
|
14
|
+
* @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
|
|
15
|
+
* @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
|
|
16
|
+
* @param props.onChangeCharactersCount - Callback function triggered when character count changes
|
|
17
|
+
* @param props.baseErrorMessage - Custom error message to display
|
|
18
|
+
* @param props.maxLimit - Maximum number of characters allowed (default: 2000)
|
|
19
|
+
* @param props.onChange - Callback function triggered when editor content changes
|
|
20
|
+
* @param props.isError - Whether the component should display in error state
|
|
21
|
+
* @param props.id - Custom ID for the editor element
|
|
22
|
+
*
|
|
23
|
+
* @returns JSX element representing the rich text editor
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* // Basic usage
|
|
28
|
+
* <RichText name="content" />
|
|
29
|
+
*
|
|
30
|
+
* // With character limit and custom buttons
|
|
31
|
+
* <RichText
|
|
32
|
+
* name="description"
|
|
33
|
+
* maxLimit={500}
|
|
34
|
+
* enforceCharacterLimit={true}
|
|
35
|
+
* hiddenButtons={["image", "code"]}
|
|
36
|
+
* onChangeCharactersCount={(count) => console.log(count)}
|
|
37
|
+
* />
|
|
38
|
+
*
|
|
39
|
+
* // With image upload configuration
|
|
40
|
+
* <RichText
|
|
41
|
+
* name="article"
|
|
42
|
+
* imageConfig={{
|
|
43
|
+
* action: "/api/upload",
|
|
44
|
+
* modalTitle: "Insert Image",
|
|
45
|
+
* modalInputUrlLabel: "Image URL",
|
|
46
|
+
* modalInputImageLabel: "Upload Image"
|
|
47
|
+
* }}
|
|
48
|
+
* />
|
|
49
|
+
* ```
|
|
50
|
+
*
|
|
51
|
+
* @description
|
|
52
|
+
* The component includes:
|
|
53
|
+
* - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
|
|
54
|
+
* - **Alignment**: Left, center, right, justify
|
|
55
|
+
* - **Image Support**: Upload and URL insertion (when imageConfig is provided)
|
|
56
|
+
* - **Character Limits**: Configurable limits with visual feedback
|
|
57
|
+
* - **Form Integration**: Works with form providers and validation
|
|
58
|
+
* - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
|
|
59
|
+
* - **Error Handling**: Visual error states and validation messages
|
|
60
|
+
*
|
|
61
|
+
* The editor outputs JSON data representing the document structure, which can be
|
|
62
|
+
* converted to HTML using the provided utility functions.
|
|
63
|
+
*/
|
|
64
|
+
declare function RichText(props: RichTextProps): import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
export { RichText };
|
|
41
66
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAMnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkMrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1 +1,149 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import isHotkey from "is-hotkey";
|
|
3
|
+
import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Heading1, Heading2, Italic, Quote, Underline, } from "lucide-react";
|
|
4
|
+
import { useCallback, useId, useMemo, useRef, useState } from "react";
|
|
5
|
+
import { createEditor, Transforms } from "slate";
|
|
6
|
+
import { withHistory } from "slate-history";
|
|
7
|
+
import { Editable, Slate, withReact } from "slate-react";
|
|
8
|
+
import { BlockButton } from "./blockButton";
|
|
9
|
+
import { Element } from "./element";
|
|
10
|
+
import { InsertImage } from "./insertImage";
|
|
11
|
+
import { Leaf } from "./leaf";
|
|
12
|
+
import { MarkButton } from "./markButton";
|
|
13
|
+
import { Toolbar } from "./toolbar";
|
|
14
|
+
import { useForm } from "../../hooks/useForm";
|
|
15
|
+
import { extractTextFromNode } from "../../services/extractTextFromNode";
|
|
16
|
+
import { toggleMark } from "../../services/toggleMark";
|
|
17
|
+
import { hotKeys, initialValue } from "../../templates/richTextTemplates";
|
|
18
|
+
import { FieldError } from "../fieldError";
|
|
19
|
+
import { FieldLabel } from "../fieldLabel";
|
|
20
|
+
import { FieldWrapper } from "../fieldWrapper";
|
|
21
|
+
import "./styles.css";
|
|
22
|
+
/**
|
|
23
|
+
* RichText component provides a feature-rich text editor with formatting capabilities
|
|
24
|
+
* including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
|
|
25
|
+
*
|
|
26
|
+
* Built on top of Slate.js, this component offers a customizable toolbar and supports
|
|
27
|
+
* character limits, form integration, and error handling.
|
|
28
|
+
*
|
|
29
|
+
* @param props - Configuration object for the RichText component
|
|
30
|
+
* @param props.name - The name attribute for the form field (required)
|
|
31
|
+
* @param props.hiddenButtons - Array of button keys to hide from the toolbar
|
|
32
|
+
* @param props.imageConfig - Configuration object for image insertion functionality
|
|
33
|
+
* @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
|
|
34
|
+
* @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
|
|
35
|
+
* @param props.onChangeCharactersCount - Callback function triggered when character count changes
|
|
36
|
+
* @param props.baseErrorMessage - Custom error message to display
|
|
37
|
+
* @param props.maxLimit - Maximum number of characters allowed (default: 2000)
|
|
38
|
+
* @param props.onChange - Callback function triggered when editor content changes
|
|
39
|
+
* @param props.isError - Whether the component should display in error state
|
|
40
|
+
* @param props.id - Custom ID for the editor element
|
|
41
|
+
*
|
|
42
|
+
* @returns JSX element representing the rich text editor
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* // Basic usage
|
|
47
|
+
* <RichText name="content" />
|
|
48
|
+
*
|
|
49
|
+
* // With character limit and custom buttons
|
|
50
|
+
* <RichText
|
|
51
|
+
* name="description"
|
|
52
|
+
* maxLimit={500}
|
|
53
|
+
* enforceCharacterLimit={true}
|
|
54
|
+
* hiddenButtons={["image", "code"]}
|
|
55
|
+
* onChangeCharactersCount={(count) => console.log(count)}
|
|
56
|
+
* />
|
|
57
|
+
*
|
|
58
|
+
* // With image upload configuration
|
|
59
|
+
* <RichText
|
|
60
|
+
* name="article"
|
|
61
|
+
* imageConfig={{
|
|
62
|
+
* action: "/api/upload",
|
|
63
|
+
* modalTitle: "Insert Image",
|
|
64
|
+
* modalInputUrlLabel: "Image URL",
|
|
65
|
+
* modalInputImageLabel: "Upload Image"
|
|
66
|
+
* }}
|
|
67
|
+
* />
|
|
68
|
+
* ```
|
|
69
|
+
*
|
|
70
|
+
* @description
|
|
71
|
+
* The component includes:
|
|
72
|
+
* - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
|
|
73
|
+
* - **Alignment**: Left, center, right, justify
|
|
74
|
+
* - **Image Support**: Upload and URL insertion (when imageConfig is provided)
|
|
75
|
+
* - **Character Limits**: Configurable limits with visual feedback
|
|
76
|
+
* - **Form Integration**: Works with form providers and validation
|
|
77
|
+
* - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
|
|
78
|
+
* - **Error Handling**: Visual error states and validation messages
|
|
79
|
+
*
|
|
80
|
+
* The editor outputs JSON data representing the document structure, which can be
|
|
81
|
+
* converted to HTML using the provided utility functions.
|
|
82
|
+
*/
|
|
83
|
+
function RichText(props) {
|
|
84
|
+
const { name, hiddenButtons, imageConfig, defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10, onChange, isError: baseIsError, label, showAsterisk, id, } = props;
|
|
85
|
+
const editor = useMemo(() => withHistory(withReact(createEditor())), []);
|
|
86
|
+
const { fieldErrors } = useForm();
|
|
87
|
+
function getDefaultNodes() {
|
|
88
|
+
try {
|
|
89
|
+
const parsedNodes = JSON.parse(defaultValue);
|
|
90
|
+
if (!Array.isArray(parsedNodes))
|
|
91
|
+
return initialValue;
|
|
92
|
+
if (parsedNodes.length <= 0)
|
|
93
|
+
return initialValue;
|
|
94
|
+
const isValidNodes = parsedNodes.every((node) => typeof node === "object" &&
|
|
95
|
+
node !== null &&
|
|
96
|
+
"type" in node &&
|
|
97
|
+
"children" in node);
|
|
98
|
+
return isValidNodes ? parsedNodes : initialValue;
|
|
99
|
+
}
|
|
100
|
+
catch (error) {
|
|
101
|
+
return initialValue;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
const textFromNodes = extractTextFromNode(getDefaultNodes());
|
|
105
|
+
const [charactersCount, setCharactersCount] = useState(textFromNodes.length);
|
|
106
|
+
const [inputValue, setInputValue] = useState(JSON.stringify(getDefaultNodes()) || "[]");
|
|
107
|
+
const [onFocus, setOnFocus] = useState(false);
|
|
108
|
+
const ref = useRef(null);
|
|
109
|
+
const inputId = id || useId();
|
|
110
|
+
const errorMessage = baseErrorMessage || fieldErrors?.[name];
|
|
111
|
+
const isError = baseIsError || !!errorMessage;
|
|
112
|
+
const renderLeaf = useCallback(Leaf, []);
|
|
113
|
+
const renderElement = useCallback(Element, []);
|
|
114
|
+
function handleChange(value) {
|
|
115
|
+
const text = extractTextFromNode(value);
|
|
116
|
+
setCharactersCount(text.length);
|
|
117
|
+
onChangeCharactersCount && onChangeCharactersCount(text.length);
|
|
118
|
+
if (enforceCharacterLimit && text.length >= maxLimit) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
setInputValue(JSON.stringify(value));
|
|
123
|
+
onChange && onChange(value);
|
|
124
|
+
editor.children = value;
|
|
125
|
+
Transforms.setNodes(editor, { children: value });
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
const focusClass = onFocus ? "focusTrue" : "focusFalse";
|
|
129
|
+
const errorClass = isError
|
|
130
|
+
? "errorTrue"
|
|
131
|
+
: maxLimit < charactersCount
|
|
132
|
+
? "errorTrue"
|
|
133
|
+
: "errorFalse";
|
|
134
|
+
const className = `arkynRichText ${errorClass} ${focusClass}`;
|
|
135
|
+
const restatesCharacters = maxLimit - charactersCount;
|
|
136
|
+
function buttonIsNotHidden(format) {
|
|
137
|
+
return !hiddenButtons?.includes(format);
|
|
138
|
+
}
|
|
139
|
+
return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, children: label })), _jsxs(Slate, { editor: editor, initialValue: getDefaultNodes(), onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [buttonIsNotHidden("headingOne") && (_jsx(BlockButton, { format: "headingOne", icon: Heading1 })), buttonIsNotHidden("headingTwo") && (_jsx(BlockButton, { format: "headingTwo", icon: Heading2 })), buttonIsNotHidden("blockQuote") && (_jsx(BlockButton, { format: "blockQuote", icon: Quote })), buttonIsNotHidden("bold") && (_jsx(MarkButton, { format: "bold", icon: Bold })), buttonIsNotHidden("italic") && (_jsx(MarkButton, { format: "italic", icon: Italic })), buttonIsNotHidden("underline") && (_jsx(MarkButton, { format: "underline", icon: Underline })), buttonIsNotHidden("code") && (_jsx(MarkButton, { format: "code", icon: Code })), buttonIsNotHidden("left") && (_jsx(BlockButton, { format: "left", icon: AlignLeft })), buttonIsNotHidden("right") && (_jsx(BlockButton, { format: "right", icon: AlignRight })), buttonIsNotHidden("center") && (_jsx(BlockButton, { format: "center", icon: AlignCenter })), buttonIsNotHidden("justify") && (_jsx(BlockButton, { format: "justify", icon: AlignJustify })), imageConfig && buttonIsNotHidden("image") && (_jsx(InsertImage, { ...imageConfig }))] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, ref: ref, id: inputId, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
|
|
140
|
+
for (const hotkey in hotKeys) {
|
|
141
|
+
if (isHotkey(hotkey, event)) {
|
|
142
|
+
event.preventDefault();
|
|
143
|
+
const mark = hotKeys[hotkey];
|
|
144
|
+
toggleMark(editor, mark);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
} }), restatesCharacters < 0 && (_jsx("div", { className: "restatesCharacters", children: restatesCharacters }))] }), _jsx("input", { type: "hidden", name: name, value: inputValue.slice(0, maxLimit) }), _jsx("input", { type: "hidden", name: `${name}Count`, value: charactersCount })] }), _jsx(FieldError, { children: errorMessage })] }));
|
|
148
|
+
}
|
|
149
|
+
export { RichText };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/insertImage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAWxE,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,2CAsGnD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Image } from "lucide-react";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { useSlate } from "slate-react";
|
|
5
|
+
import { Button } from "../../button";
|
|
6
|
+
import { ImageUpload } from "../../imageUpload";
|
|
7
|
+
import { Input } from "../../input";
|
|
8
|
+
import { ModalContainer } from "../../modal/modalContainer";
|
|
9
|
+
import { ModalFooter } from "../../modal/modalFooter";
|
|
10
|
+
import { ModalHeader } from "../../modal/modalHeader";
|
|
11
|
+
import { TabButton } from "../../tab/tabButton";
|
|
12
|
+
import { TabContainer } from "../../tab/tabContainer";
|
|
13
|
+
import "./styles.css";
|
|
14
|
+
function InsertImage(props) {
|
|
15
|
+
const { action, tabLabels = ["Adicionar URL", "Upload de arquivo"], modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputImageLabel = "Imagem:", modalInputUrlLabel = "URL da imagem:", modalTitle = "Inserir imagem", } = props;
|
|
16
|
+
const editor = useSlate();
|
|
17
|
+
const [modalIsVisible, setModalIsVisible] = useState(false);
|
|
18
|
+
const [imageURL, setImageURL] = useState("");
|
|
19
|
+
const [uploadType, setUploadType] = useState("url");
|
|
20
|
+
function handleMouseDown(event) {
|
|
21
|
+
event.preventDefault();
|
|
22
|
+
if (!imageURL || imageURL === "")
|
|
23
|
+
return;
|
|
24
|
+
editor.insertNodes([
|
|
25
|
+
{ type: "paragraph", children: [{ text: "" }] },
|
|
26
|
+
{ type: "image", src: imageURL, children: [{ text: "" }] },
|
|
27
|
+
{ type: "paragraph", children: [{ text: "" }] },
|
|
28
|
+
]);
|
|
29
|
+
setModalIsVisible(false);
|
|
30
|
+
}
|
|
31
|
+
return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertImage", onMouseDown: () => setModalIsVisible(true), children: _jsx(Image, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertImageModalContent", children: [_jsxs(TabContainer, { defaultValue: uploadType, onChange: setUploadType, children: [_jsx(TabButton, { value: "url", children: tabLabels[0] }), _jsx(TabButton, { value: "file", children: tabLabels[1] })] }), uploadType === "url" && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "text", name: "richTextImageURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: imageURL, onChange: (e) => setImageURL(e.target.value) }), imageURL && (_jsx("img", { className: "arkynRichTextInsertImageModalPreviewImage", src: imageURL, alt: "preview" }))] })), uploadType === "file" && (_jsx(ImageUpload, { name: "richTextImageURL", action: action, label: modalInputImageLabel, showAsterisk: true, defaultValue: imageURL, onChange: (url) => setImageURL(url) }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
|
|
32
|
+
}
|
|
33
|
+
export { InsertImage };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/leaf/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,iBAAS,IAAI,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,eAAe,2CAO5D;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
function Leaf({ attributes, children, leaf }) {
|
|
3
|
+
if (leaf.bold)
|
|
4
|
+
children = _jsx("strong", { children: children });
|
|
5
|
+
if (leaf.code)
|
|
6
|
+
children = _jsx("code", { children: children });
|
|
7
|
+
if (leaf.italic)
|
|
8
|
+
children = _jsx("em", { children: children });
|
|
9
|
+
if (leaf.underline)
|
|
10
|
+
children = _jsx("u", { children: children });
|
|
11
|
+
return _jsx("span", { ...attributes, children: children });
|
|
12
|
+
}
|
|
13
|
+
export { Leaf };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { LucideIcon } from "lucide-react";
|
|
2
|
+
import { RichTextMarkFormatType } from "../../../types/richTextTypes";
|
|
3
|
+
import "./styles.css";
|
|
4
|
+
type MarkButtonProps = {
|
|
5
|
+
format: RichTextMarkFormatType;
|
|
6
|
+
icon: LucideIcon;
|
|
7
|
+
};
|
|
8
|
+
declare function MarkButton({ format, icon: Icon }: MarkButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { MarkButton };
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/markButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,eAAe,2CAoB1D;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useSlate } from "slate-react";
|
|
3
|
+
import { isMarkActive } from "../../../services/isMarkActive";
|
|
4
|
+
import { toggleMark } from "../../../services/toggleMark";
|
|
5
|
+
import "./styles.css";
|
|
6
|
+
function MarkButton({ format, icon: Icon }) {
|
|
7
|
+
const editor = useSlate();
|
|
8
|
+
const isActive = isMarkActive(editor, format);
|
|
9
|
+
const activeClass = isActive ? "activeTrue" : "activeFalse";
|
|
10
|
+
function handleMouseDown(event) {
|
|
11
|
+
event.preventDefault();
|
|
12
|
+
toggleMark(editor, format);
|
|
13
|
+
}
|
|
14
|
+
return (_jsx("button", { type: "button", className: "arkynRichTextMarkButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
|
|
15
|
+
}
|
|
16
|
+
export { MarkButton };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import "./styles.css";
|
|
3
|
+
type ToolbarProps = {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
declare function Toolbar({ children }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { Toolbar };
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAE1C;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -49,7 +49,7 @@ type SelectProps = {
|
|
|
49
49
|
* @param props.readOnly - Whether the select is read-only. Default: false
|
|
50
50
|
* @param props.isLoading - Controls loading state with spinner. Default: false
|
|
51
51
|
* @param props.isSearchable - Whether the select supports search functionality. Default: false
|
|
52
|
-
* @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default:
|
|
52
|
+
* @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: true
|
|
53
53
|
* @param props.onSearch - Callback function called when search value changes
|
|
54
54
|
* @param props.onChange - Callback function called when selected value changes
|
|
55
55
|
* @param props.onFocus - Callback function called when select gains focus
|
|
@@ -31,7 +31,7 @@ import { SelectSpinner } from "./selectSpinner";
|
|
|
31
31
|
* @param props.readOnly - Whether the select is read-only. Default: false
|
|
32
32
|
* @param props.isLoading - Controls loading state with spinner. Default: false
|
|
33
33
|
* @param props.isSearchable - Whether the select supports search functionality. Default: false
|
|
34
|
-
* @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default:
|
|
34
|
+
* @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: true
|
|
35
35
|
* @param props.onSearch - Callback function called when search value changes
|
|
36
36
|
* @param props.onChange - Callback function called when selected value changes
|
|
37
37
|
* @param props.onFocus - Callback function called when select gains focus
|
|
@@ -103,7 +103,7 @@ import { SelectSpinner } from "./selectSpinner";
|
|
|
103
103
|
* ```
|
|
104
104
|
*/
|
|
105
105
|
function Select(props) {
|
|
106
|
-
const { name, options, className = "", placeholder = "Selecione...", closeOnSelect =
|
|
106
|
+
const { name, options, className = "", placeholder = "Selecione...", closeOnSelect = true, defaultValue = "", errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", } = props;
|
|
107
107
|
const { fieldErrors } = useForm();
|
|
108
108
|
const selectRef = useRef(null);
|
|
109
109
|
const selectId = id || useId();
|
package/dist/index.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export { PhoneInput } from "./components/phoneInput";
|
|
|
31
31
|
export { Popover } from "./components/popover";
|
|
32
32
|
export { RadioBox } from "./components/radio/radioBox";
|
|
33
33
|
export { RadioGroup } from "./components/radio/radioGroup";
|
|
34
|
+
export { RichText } from "./components/richText";
|
|
34
35
|
export { Select } from "./components/select";
|
|
35
36
|
export { Slider } from "./components/slider";
|
|
36
37
|
export { Switch } from "./components/switch";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ export { PhoneInput } from "./components/phoneInput";
|
|
|
32
32
|
export { Popover } from "./components/popover";
|
|
33
33
|
export { RadioBox } from "./components/radio/radioBox";
|
|
34
34
|
export { RadioGroup } from "./components/radio/radioGroup";
|
|
35
|
+
export { RichText } from "./components/richText";
|
|
35
36
|
export { Select } from "./components/select";
|
|
36
37
|
export { Slider } from "./components/slider";
|
|
37
38
|
export { Switch } from "./components/switch";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"extractTextFromNode.d.ts","sourceRoot":"","sources":["../../src/services/extractTextFromNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,OAAO,CAAC;AAEzC,iBAAS,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,UAE/C;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Editor } from "slate";
|
|
2
|
+
import { RichTextAlignFormatType, RichTextElementFormatType } from "../types/richTextTypes";
|
|
3
|
+
declare function isBlockActive(editor: Editor, format: RichTextElementFormatType | RichTextAlignFormatType, blockType?: "type" | "align"): boolean;
|
|
4
|
+
export { isBlockActive };
|
|
5
|
+
//# sourceMappingURL=isBlockActive.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isBlockActive.d.ts","sourceRoot":"","sources":["../../src/services/isBlockActive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2B,MAAM,OAAO,CAAC;AAExD,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,iBAAS,aAAa,CACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,EAC3D,SAAS,GAAE,MAAM,GAAG,OAAgB,WAgBrC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Editor, Element as SlateElement } from "slate";
|
|
2
|
+
function isBlockActive(editor, format, blockType = "type") {
|
|
3
|
+
const { selection } = editor;
|
|
4
|
+
if (!selection)
|
|
5
|
+
return false;
|
|
6
|
+
const [match] = Array.from(Editor.nodes(editor, {
|
|
7
|
+
at: Editor.unhangRange(editor, selection),
|
|
8
|
+
match: (n) => !Editor.isEditor(n) &&
|
|
9
|
+
SlateElement.isElement(n) &&
|
|
10
|
+
n[blockType] === format,
|
|
11
|
+
}));
|
|
12
|
+
return !!match;
|
|
13
|
+
}
|
|
14
|
+
export { isBlockActive };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isMarkActive.d.ts","sourceRoot":"","sources":["../../src/services/isMarkActive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,iBAAS,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB,WAGnE;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toHtml.d.ts","sourceRoot":"","sources":["../../src/services/toHtml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD;;;;;;;;;;;;;;;GAeG;AAEH,iBAAS,MAAM,CAAC,aAAa,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"toHtml.d.ts","sourceRoot":"","sources":["../../src/services/toHtml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD;;;;;;;;;;;;;;;GAeG;AAEH,iBAAS,MAAM,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,CAEpD;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Editor } from "slate";
|
|
2
|
+
import { RichTextAlignFormatType, RichTextElementFormatType } from "../types/richTextTypes";
|
|
3
|
+
declare function toggleBlock(editor: Editor, format: RichTextElementFormatType | RichTextAlignFormatType): void;
|
|
4
|
+
export { toggleBlock };
|
|
5
|
+
//# sourceMappingURL=toggleBlock.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggleBlock.d.ts","sourceRoot":"","sources":["../../src/services/toggleBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAuC,MAAM,OAAO,CAAC;AAGpE,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAGhC,iBAAS,WAAW,CAClB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,QAkC5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|