@arkyn/components 1.3.109 → 1.3.110
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/bundle.js +12318 -4286
- package/dist/bundle.umd.cjs +38 -23
- package/dist/components/RichText/components/BlockButton/intex.d.ts +10 -0
- package/dist/components/RichText/components/BlockButton/intex.d.ts.map +1 -0
- package/dist/components/RichText/components/BlockButton/intex.js +18 -0
- package/dist/components/RichText/components/Element/index.d.ts +5 -0
- package/dist/components/RichText/components/Element/index.d.ts.map +1 -0
- package/dist/components/RichText/components/Element/index.js +22 -0
- package/dist/components/RichText/components/Leaf/index.d.ts +3 -0
- package/dist/components/RichText/components/Leaf/index.d.ts.map +1 -0
- package/dist/components/RichText/components/Leaf/index.js +14 -0
- package/dist/components/RichText/components/MarkButton/index.d.ts +10 -0
- package/dist/components/RichText/components/MarkButton/index.d.ts.map +1 -0
- package/dist/components/RichText/components/MarkButton/index.js +16 -0
- package/dist/components/RichText/components/Toolbar/index.d.ts +8 -0
- package/dist/components/RichText/components/Toolbar/index.d.ts.map +1 -0
- package/dist/components/RichText/components/Toolbar/index.js +6 -0
- package/dist/components/RichText/functions/serialize.d.ts +3 -0
- package/dist/components/RichText/functions/serialize.d.ts.map +1 -0
- package/dist/components/RichText/functions/serialize.js +48 -0
- package/dist/components/RichText/functions/toggleBlock.d.ts +5 -0
- package/dist/components/RichText/functions/toggleBlock.d.ts.map +1 -0
- package/dist/components/RichText/functions/toggleBlock.js +33 -0
- package/dist/components/RichText/functions/toggleMark.d.ts +5 -0
- package/dist/components/RichText/functions/toggleMark.d.ts.map +1 -0
- package/dist/components/RichText/functions/toggleMark.js +10 -0
- package/dist/components/RichText/helpers/isBlockActive.d.ts +5 -0
- package/dist/components/RichText/helpers/isBlockActive.d.ts.map +1 -0
- package/dist/components/RichText/helpers/isBlockActive.js +15 -0
- package/dist/components/RichText/helpers/isMarkActive.d.ts +5 -0
- package/dist/components/RichText/helpers/isMarkActive.d.ts.map +1 -0
- package/dist/components/RichText/helpers/isMarkActive.js +6 -0
- package/dist/components/RichText/index.d.ts +12 -0
- package/dist/components/RichText/index.d.ts.map +1 -0
- package/dist/components/RichText/index.js +46 -0
- package/dist/components/RichText/template/HOTKEYS.d.ts +7 -0
- package/dist/components/RichText/template/HOTKEYS.d.ts.map +1 -0
- package/dist/components/RichText/template/HOTKEYS.js +7 -0
- package/dist/components/RichText/template/INITIAL_VALUE.d.ts +4 -0
- package/dist/components/RichText/template/INITIAL_VALUE.d.ts.map +1 -0
- package/dist/components/RichText/template/INITIAL_VALUE.js +7 -0
- package/dist/components/RichText/template/LIST_TYPES.d.ts +3 -0
- package/dist/components/RichText/template/LIST_TYPES.d.ts.map +1 -0
- package/dist/components/RichText/template/LIST_TYPES.js +2 -0
- package/dist/components/RichText/template/TEXT_ALIGN_TYPES.d.ts +3 -0
- package/dist/components/RichText/template/TEXT_ALIGN_TYPES.d.ts.map +1 -0
- package/dist/components/RichText/template/TEXT_ALIGN_TYPES.js +2 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -2
- package/dist/style.css +1 -1
- package/package.json +5 -1
- package/src/components/RichText/components/BlockButton/intex.tsx +41 -0
- package/src/components/RichText/components/BlockButton/styles.css +29 -0
- package/src/components/RichText/components/Element/index.tsx +57 -0
- package/src/components/RichText/components/Element/styles.css +23 -0
- package/src/components/RichText/components/Leaf/index.tsx +12 -0
- package/src/components/RichText/components/MarkButton/index.tsx +38 -0
- package/src/components/RichText/components/MarkButton/styles.css +41 -0
- package/src/components/RichText/components/Toolbar/index.tsx +12 -0
- package/src/components/RichText/components/Toolbar/styles.css +14 -0
- package/src/components/RichText/defineType.d.ts +38 -0
- package/src/components/RichText/functions/serialize.ts +54 -0
- package/src/components/RichText/functions/toggleBlock.ts +46 -0
- package/src/components/RichText/functions/toggleMark.ts +13 -0
- package/src/components/RichText/helpers/isBlockActive.ts +27 -0
- package/src/components/RichText/helpers/isMarkActive.ts +9 -0
- package/src/components/RichText/index.tsx +131 -0
- package/src/components/RichText/styles.css +25 -0
- package/src/components/RichText/template/HOTKEYS.ts +14 -0
- package/src/components/RichText/template/INITIAL_VALUE.ts +10 -0
- package/src/components/RichText/template/LIST_TYPES.ts +3 -0
- package/src/components/RichText/template/TEXT_ALIGN_TYPES.ts +3 -0
- package/src/index.ts +3 -2
- package/tsconfig.json +8 -0
@@ -0,0 +1,10 @@
|
|
1
|
+
import { LucideIcon } from "lucide-react";
|
2
|
+
import { AlignFormatType, ElementFormatType } from "../../defineType";
|
3
|
+
import "./styles.css";
|
4
|
+
type BlockButtonProps = {
|
5
|
+
format: ElementFormatType | AlignFormatType;
|
6
|
+
icon: LucideIcon;
|
7
|
+
};
|
8
|
+
declare function BlockButton({ format, icon: Icon }: BlockButtonProps): import("react/jsx-runtime").JSX.Element;
|
9
|
+
export { BlockButton };
|
10
|
+
//# sourceMappingURL=intex.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"intex.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/BlockButton/intex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKtE,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC5C,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 { toggleBlock } from "../../functions/toggleBlock";
|
4
|
+
import { isBlockActive } from "../../helpers/isBlockActive";
|
5
|
+
import { TEXT_ALIGN_TYPES } from "../../template/TEXT_ALIGN_TYPES";
|
6
|
+
import "./styles.css";
|
7
|
+
function BlockButton({ format, icon: Icon }) {
|
8
|
+
const editor = useSlate();
|
9
|
+
const blockType = TEXT_ALIGN_TYPES.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/components/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,2CAmDrE;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { jsx as _jsx } 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
|
+
default:
|
19
|
+
return (_jsx("p", { className: "arkynElementParagraph", style: style, ...attributes, children: children }));
|
20
|
+
}
|
21
|
+
}
|
22
|
+
export { Element };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/Leaf/index.tsx"],"names":[],"mappings":"AAEA,iBAAS,IAAI,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,2CAOhD;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
// import { RenderLeafProps } from "slate-react";
|
3
|
+
function Leaf({ attributes, children, leaf }) {
|
4
|
+
if (leaf.bold)
|
5
|
+
children = _jsx("strong", { children: children });
|
6
|
+
if (leaf.code)
|
7
|
+
children = _jsx("code", { children: children });
|
8
|
+
if (leaf.italic)
|
9
|
+
children = _jsx("em", { children: children });
|
10
|
+
if (leaf.underline)
|
11
|
+
children = _jsx("u", { children: children });
|
12
|
+
return _jsx("span", { ...attributes, children: children });
|
13
|
+
}
|
14
|
+
export { Leaf };
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { LucideIcon } from "lucide-react";
|
2
|
+
import { MarkFormatType } from "../../defineType";
|
3
|
+
import "./styles.css";
|
4
|
+
type MarkButtonProps = {
|
5
|
+
format: MarkFormatType;
|
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/components/MarkButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,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 { toggleMark } from "../../functions/toggleMark";
|
4
|
+
import { isMarkActive } from "../../helpers/isMarkActive";
|
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/components/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"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/serialize.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,SAAS,SAAU,GAAG,KAAG,MAgD9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
// import { Node, Element as SlateElement } from "slate";
|
2
|
+
import { Element as SlateElement } from "slate";
|
3
|
+
const serialize = (node) => {
|
4
|
+
// function exportHtml() {
|
5
|
+
// const content = editor.children;
|
6
|
+
// const html = content.map((node) => serialize(node)).join("");
|
7
|
+
// setHtml(html);
|
8
|
+
// }
|
9
|
+
if (SlateElement.isElement(node)) {
|
10
|
+
const children = node.children.map((n) => serialize(n)).join("");
|
11
|
+
switch (node.type) {
|
12
|
+
case "paragraph":
|
13
|
+
return `<p>${children}</p>`;
|
14
|
+
case "blockQuote":
|
15
|
+
return `<blockquote>${children}</blockquote>`;
|
16
|
+
case "bulletedList":
|
17
|
+
return `<ul>${children}</ul>`;
|
18
|
+
case "headingOne":
|
19
|
+
return `<h1>${children}</h1>`;
|
20
|
+
case "headingTwo":
|
21
|
+
return `<h2>${children}</h2>`;
|
22
|
+
case "listItem":
|
23
|
+
return `<li>${children}</li>`;
|
24
|
+
case "numberedList":
|
25
|
+
return `<ol>${children}</ol>`;
|
26
|
+
default:
|
27
|
+
return children;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
if (node.text) {
|
31
|
+
let text = node.text;
|
32
|
+
if (node.bold) {
|
33
|
+
text = `<strong>${text}</strong>`;
|
34
|
+
}
|
35
|
+
if (node.code) {
|
36
|
+
text = `<code>${text}</code>`;
|
37
|
+
}
|
38
|
+
if (node.italic) {
|
39
|
+
text = `<em>${text}</em>`;
|
40
|
+
}
|
41
|
+
if (node.underline) {
|
42
|
+
text = `<u>${text}</u>`;
|
43
|
+
}
|
44
|
+
return text;
|
45
|
+
}
|
46
|
+
return "";
|
47
|
+
};
|
48
|
+
export { serialize };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"toggleBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/toggleBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAuC,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKnE,iBAAS,WAAW,CAClB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,iBAAiB,GAAG,eAAe,QAkC5C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { Editor, Transforms, Element as SlateElement } from "slate";
|
2
|
+
import { isBlockActive } from "../helpers/isBlockActive";
|
3
|
+
import { LIST_TYPES } from "../template/LIST_TYPES";
|
4
|
+
import { TEXT_ALIGN_TYPES } from "../template/TEXT_ALIGN_TYPES";
|
5
|
+
function toggleBlock(editor, format) {
|
6
|
+
const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
|
7
|
+
const isActive = isBlockActive(editor, format, blockType);
|
8
|
+
const isList = LIST_TYPES.includes(format);
|
9
|
+
Transforms.unwrapNodes(editor, {
|
10
|
+
match: (n) => !Editor.isEditor(n) &&
|
11
|
+
SlateElement.isElement(n) &&
|
12
|
+
LIST_TYPES.includes(n.type) &&
|
13
|
+
!TEXT_ALIGN_TYPES.includes(format),
|
14
|
+
split: true,
|
15
|
+
});
|
16
|
+
let newProperties;
|
17
|
+
if (TEXT_ALIGN_TYPES.includes(format)) {
|
18
|
+
const formatType = format;
|
19
|
+
newProperties = { align: isActive ? undefined : formatType };
|
20
|
+
}
|
21
|
+
else {
|
22
|
+
const formatType = format;
|
23
|
+
newProperties = {
|
24
|
+
type: isActive ? "paragraph" : isList ? "listItem" : formatType,
|
25
|
+
};
|
26
|
+
}
|
27
|
+
Transforms.setNodes(editor, newProperties);
|
28
|
+
if (!isActive && isList) {
|
29
|
+
const block = { type: format, children: [] };
|
30
|
+
Transforms.wrapNodes(editor, block);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
export { toggleBlock };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"toggleMark.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/toggleMark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,iBAAS,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,QAKzD;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { Editor } from "slate";
|
2
|
+
import { isMarkActive } from "../helpers/isMarkActive";
|
3
|
+
function toggleMark(editor, format) {
|
4
|
+
const isActive = isMarkActive(editor, format);
|
5
|
+
if (isActive)
|
6
|
+
Editor.removeMark(editor, format);
|
7
|
+
else
|
8
|
+
Editor.addMark(editor, format, true);
|
9
|
+
}
|
10
|
+
export { toggleMark };
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { Editor } from "slate";
|
2
|
+
import { AlignFormatType, ElementFormatType } from "../defineType";
|
3
|
+
declare function isBlockActive(editor: Editor, format: ElementFormatType | AlignFormatType, 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/components/RichText/helpers/isBlockActive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEnE,iBAAS,aAAa,CACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAC3C,SAAS,GAAE,MAAM,GAAG,OAAgB,WAgBrC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { Editor } from "slate";
|
2
|
+
import { Element as SlateElement } from "slate";
|
3
|
+
function isBlockActive(editor, format, blockType = "type") {
|
4
|
+
const { selection } = editor;
|
5
|
+
if (!selection)
|
6
|
+
return false;
|
7
|
+
const [match] = Array.from(Editor.nodes(editor, {
|
8
|
+
at: Editor.unhangRange(editor, selection),
|
9
|
+
match: (n) => !Editor.isEditor(n) &&
|
10
|
+
SlateElement.isElement(n) &&
|
11
|
+
n[blockType] === format,
|
12
|
+
}));
|
13
|
+
return !!match;
|
14
|
+
}
|
15
|
+
export { isBlockActive };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"isMarkActive.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/helpers/isMarkActive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,iBAAS,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,WAG3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { Descendant } from "slate";
|
2
|
+
import "./styles.css";
|
3
|
+
type RichTextProps = {
|
4
|
+
name: string;
|
5
|
+
defaultValue?: string;
|
6
|
+
isError?: boolean;
|
7
|
+
onChange?: (value: Descendant[]) => void;
|
8
|
+
onValueChange?: (value: string) => void;
|
9
|
+
};
|
10
|
+
declare function RichText({ name, defaultValue, onValueChange, onChange, isError: baseIsError, }: RichTextProps): import("react/jsx-runtime").JSX.Element;
|
11
|
+
export { RichText };
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAajD,OAAO,cAAc,CAAC;AAGtB,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,OAAO,EAAE,WAAW,GACrB,EAAE,aAAa,2CAmFf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
@@ -0,0 +1,46 @@
|
|
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, useMemo, useRef, useState } from "react";
|
5
|
+
import { createEditor } from "slate";
|
6
|
+
import { withHistory } from "slate-history";
|
7
|
+
import { Editable, Slate, withReact } from "slate-react";
|
8
|
+
import { BlockButton } from "./components/BlockButton/intex";
|
9
|
+
import { Element } from "./components/Element";
|
10
|
+
import { Leaf } from "./components/Leaf";
|
11
|
+
import { MarkButton } from "./components/MarkButton";
|
12
|
+
import { Toolbar } from "./components/Toolbar";
|
13
|
+
import { toggleMark } from "./functions/toggleMark";
|
14
|
+
import { HOTKEYS } from "./template/HOTKEYS";
|
15
|
+
import { INITIAL_VALUE } from "./template/INITIAL_VALUE";
|
16
|
+
import "./styles.css";
|
17
|
+
import { useFormController } from "../Form/FormController";
|
18
|
+
function RichText({ name, defaultValue, onValueChange, onChange, isError: baseIsError, }) {
|
19
|
+
const [editorValue, setEditorValue] = useState([]);
|
20
|
+
const [onFocus, setOnFocus] = useState(false);
|
21
|
+
const { id, inputRef, error } = useFormController();
|
22
|
+
const baseRef = useRef(null);
|
23
|
+
const ref = inputRef || baseRef;
|
24
|
+
const isError = baseIsError || !!error;
|
25
|
+
const editor = useMemo(() => withHistory(withReact(createEditor())), []);
|
26
|
+
const renderLeaf = useCallback(Leaf, []);
|
27
|
+
const renderElement = useCallback(Element, []);
|
28
|
+
function handleChange(e) {
|
29
|
+
setEditorValue(e);
|
30
|
+
onChange && onChange(e);
|
31
|
+
onValueChange && onValueChange(JSON.stringify(e));
|
32
|
+
}
|
33
|
+
const errorClass = isError ? "errorTrue" : "errorFalse";
|
34
|
+
const focusClass = onFocus ? "focusTrue" : "focusFalse";
|
35
|
+
const className = `arkynRichText ${errorClass} ${focusClass}`;
|
36
|
+
return (_jsxs(Slate, { editor: editor, initialValue: defaultValue ? JSON.parse(defaultValue) : INITIAL_VALUE, onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [_jsx(BlockButton, { format: "headingOne", icon: Heading1 }), _jsx(BlockButton, { format: "headingTwo", icon: Heading2 }), _jsx(BlockButton, { format: "blockQuote", icon: Quote }), _jsx(MarkButton, { format: "bold", icon: Bold }), _jsx(MarkButton, { format: "italic", icon: Italic }), _jsx(MarkButton, { format: "underline", icon: Underline }), _jsx(MarkButton, { format: "code", icon: Code }), _jsx(BlockButton, { format: "left", icon: AlignLeft }), _jsx(BlockButton, { format: "right", icon: AlignRight }), _jsx(BlockButton, { format: "center", icon: AlignCenter }), _jsx(BlockButton, { format: "justify", icon: AlignJustify })] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, autoFocus: true, id: id, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
|
37
|
+
for (const hotkey in HOTKEYS) {
|
38
|
+
if (isHotkey(hotkey, event)) {
|
39
|
+
event.preventDefault();
|
40
|
+
const mark = HOTKEYS[hotkey];
|
41
|
+
toggleMark(editor, mark);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
} })] }), _jsx("input", { ref: ref, type: "hidden", name: name, value: JSON.stringify(editorValue) })] }));
|
45
|
+
}
|
46
|
+
export { RichText };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"HOTKEYS.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/template/HOTKEYS.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,KAAK,OAAO,GAAG;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,OAKd,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"INITIAL_VALUE.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/template/INITIAL_VALUE.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,QAAA,MAAM,aAAa,EAAE,UAAU,EAK9B,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"LIST_TYPES.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/template/LIST_TYPES.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,UAAU,UAA+B,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"TEXT_ALIGN_TYPES.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/template/TEXT_ALIGN_TYPES.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,UAAyC,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
package/dist/index.d.ts
CHANGED
@@ -8,13 +8,14 @@ export { TableBody, TableCaption, TableContainer, TableFooter, TableHeader, } fr
|
|
8
8
|
export { Button } from "./components/Button";
|
9
9
|
export { Checkbox } from "./components/Checkbox";
|
10
10
|
export { FormController, FormError, FormLabel } from "./components/Form";
|
11
|
+
export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
|
11
12
|
export { IconButton } from "./components/IconButton";
|
12
13
|
export { Input } from "./components/Input";
|
13
14
|
export { RadioBox, RadioGroup } from "./components/Radio";
|
15
|
+
export { RichText } from "./components/RichText";
|
14
16
|
export { Select } from "./components/Select";
|
15
17
|
export { Switch } from "./components/Switch";
|
16
18
|
export { Textarea } from "./components/Textarea";
|
17
|
-
export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
|
18
19
|
export { BreadcrumbContainer, BreadcrumbLink } from "./components/Breadcrumb";
|
19
20
|
export { Pagination } from "./components/Pagination";
|
20
21
|
export { TabButton, TabContainer } from "./components/Tabs";
|
@@ -28,8 +29,8 @@ export { useDrawer } from "./hooks/useDrawer";
|
|
28
29
|
export { useModal } from "./hooks/useModal";
|
29
30
|
export { useScopedParams } from "./hooks/useScopedParams";
|
30
31
|
export { useToast } from "./hooks/useToast";
|
31
|
-
export { GoogleProvider } from "./provider/GoogleProvider";
|
32
32
|
export { DrawerProvider } from "./provider/DrawerProvider";
|
33
|
+
export { GoogleProvider } from "./provider/GoogleProvider";
|
33
34
|
export { ModalProvider } from "./provider/ModalProvider";
|
34
35
|
export { ToastProvider } from "./provider/ToastProvider";
|
35
36
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}
|
package/dist/index.js
CHANGED
@@ -10,13 +10,14 @@ export { TableBody, TableCaption, TableContainer, TableFooter, TableHeader, } fr
|
|
10
10
|
export { Button } from "./components/Button";
|
11
11
|
export { Checkbox } from "./components/Checkbox";
|
12
12
|
export { FormController, FormError, FormLabel } from "./components/Form";
|
13
|
+
export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
|
13
14
|
export { IconButton } from "./components/IconButton";
|
14
15
|
export { Input } from "./components/Input";
|
15
16
|
export { RadioBox, RadioGroup } from "./components/Radio";
|
17
|
+
export { RichText } from "./components/RichText";
|
16
18
|
export { Select } from "./components/Select";
|
17
19
|
export { Switch } from "./components/Switch";
|
18
20
|
export { Textarea } from "./components/Textarea";
|
19
|
-
export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
|
20
21
|
// Navigation
|
21
22
|
export { BreadcrumbContainer, BreadcrumbLink } from "./components/Breadcrumb";
|
22
23
|
export { Pagination } from "./components/Pagination";
|
@@ -34,7 +35,7 @@ export { useModal } from "./hooks/useModal";
|
|
34
35
|
export { useScopedParams } from "./hooks/useScopedParams";
|
35
36
|
export { useToast } from "./hooks/useToast";
|
36
37
|
// Providers
|
37
|
-
export { GoogleProvider } from "./provider/GoogleProvider";
|
38
38
|
export { DrawerProvider } from "./provider/DrawerProvider";
|
39
|
+
export { GoogleProvider } from "./provider/GoogleProvider";
|
39
40
|
export { ModalProvider } from "./provider/ModalProvider";
|
40
41
|
export { ToastProvider } from "./provider/ToastProvider";
|