@arkyn/components 1.3.109 → 1.3.111

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. package/dist/bundle.js +12344 -4299
  2. package/dist/bundle.umd.cjs +43 -23
  3. package/dist/components/RichText/components/BlockButton/intex.d.ts +10 -0
  4. package/dist/components/RichText/components/BlockButton/intex.d.ts.map +1 -0
  5. package/dist/components/RichText/components/BlockButton/intex.js +18 -0
  6. package/dist/components/RichText/components/Element/index.d.ts +5 -0
  7. package/dist/components/RichText/components/Element/index.d.ts.map +1 -0
  8. package/dist/components/RichText/components/Element/index.js +22 -0
  9. package/dist/components/RichText/components/Leaf/index.d.ts +3 -0
  10. package/dist/components/RichText/components/Leaf/index.d.ts.map +1 -0
  11. package/dist/components/RichText/components/Leaf/index.js +14 -0
  12. package/dist/components/RichText/components/MarkButton/index.d.ts +10 -0
  13. package/dist/components/RichText/components/MarkButton/index.d.ts.map +1 -0
  14. package/dist/components/RichText/components/MarkButton/index.js +16 -0
  15. package/dist/components/RichText/components/Toolbar/index.d.ts +8 -0
  16. package/dist/components/RichText/components/Toolbar/index.d.ts.map +1 -0
  17. package/dist/components/RichText/components/Toolbar/index.js +6 -0
  18. package/dist/components/RichText/functions/serialize.d.ts +3 -0
  19. package/dist/components/RichText/functions/serialize.d.ts.map +1 -0
  20. package/dist/components/RichText/functions/serialize.js +48 -0
  21. package/dist/components/RichText/functions/toggleBlock.d.ts +5 -0
  22. package/dist/components/RichText/functions/toggleBlock.d.ts.map +1 -0
  23. package/dist/components/RichText/functions/toggleBlock.js +33 -0
  24. package/dist/components/RichText/functions/toggleMark.d.ts +5 -0
  25. package/dist/components/RichText/functions/toggleMark.d.ts.map +1 -0
  26. package/dist/components/RichText/functions/toggleMark.js +10 -0
  27. package/dist/components/RichText/helpers/isBlockActive.d.ts +5 -0
  28. package/dist/components/RichText/helpers/isBlockActive.d.ts.map +1 -0
  29. package/dist/components/RichText/helpers/isBlockActive.js +15 -0
  30. package/dist/components/RichText/helpers/isMarkActive.d.ts +5 -0
  31. package/dist/components/RichText/helpers/isMarkActive.d.ts.map +1 -0
  32. package/dist/components/RichText/helpers/isMarkActive.js +6 -0
  33. package/dist/components/RichText/index.d.ts +12 -0
  34. package/dist/components/RichText/index.d.ts.map +1 -0
  35. package/dist/components/RichText/index.js +46 -0
  36. package/dist/components/RichText/template/HOTKEYS.d.ts +7 -0
  37. package/dist/components/RichText/template/HOTKEYS.d.ts.map +1 -0
  38. package/dist/components/RichText/template/HOTKEYS.js +7 -0
  39. package/dist/components/RichText/template/INITIAL_VALUE.d.ts +4 -0
  40. package/dist/components/RichText/template/INITIAL_VALUE.d.ts.map +1 -0
  41. package/dist/components/RichText/template/INITIAL_VALUE.js +7 -0
  42. package/dist/components/RichText/template/LIST_TYPES.d.ts +3 -0
  43. package/dist/components/RichText/template/LIST_TYPES.d.ts.map +1 -0
  44. package/dist/components/RichText/template/LIST_TYPES.js +2 -0
  45. package/dist/components/RichText/template/TEXT_ALIGN_TYPES.d.ts +3 -0
  46. package/dist/components/RichText/template/TEXT_ALIGN_TYPES.d.ts.map +1 -0
  47. package/dist/components/RichText/template/TEXT_ALIGN_TYPES.js +2 -0
  48. package/dist/index.d.ts +3 -2
  49. package/dist/index.d.ts.map +1 -1
  50. package/dist/index.js +3 -2
  51. package/dist/style.css +1 -1
  52. package/package.json +5 -1
  53. package/src/components/Checkbox/styles.css +18 -6
  54. package/src/components/RichText/components/BlockButton/intex.tsx +41 -0
  55. package/src/components/RichText/components/BlockButton/styles.css +29 -0
  56. package/src/components/RichText/components/Element/index.tsx +57 -0
  57. package/src/components/RichText/components/Element/styles.css +23 -0
  58. package/src/components/RichText/components/Leaf/index.tsx +12 -0
  59. package/src/components/RichText/components/MarkButton/index.tsx +38 -0
  60. package/src/components/RichText/components/MarkButton/styles.css +41 -0
  61. package/src/components/RichText/components/Toolbar/index.tsx +12 -0
  62. package/src/components/RichText/components/Toolbar/styles.css +14 -0
  63. package/src/components/RichText/defineType.d.ts +38 -0
  64. package/src/components/RichText/functions/serialize.ts +54 -0
  65. package/src/components/RichText/functions/toggleBlock.ts +46 -0
  66. package/src/components/RichText/functions/toggleMark.ts +13 -0
  67. package/src/components/RichText/helpers/isBlockActive.ts +27 -0
  68. package/src/components/RichText/helpers/isMarkActive.ts +9 -0
  69. package/src/components/RichText/index.tsx +130 -0
  70. package/src/components/RichText/styles.css +25 -0
  71. package/src/components/RichText/template/HOTKEYS.ts +14 -0
  72. package/src/components/RichText/template/INITIAL_VALUE.ts +10 -0
  73. package/src/components/RichText/template/LIST_TYPES.ts +3 -0
  74. package/src/components/RichText/template/TEXT_ALIGN_TYPES.ts +3 -0
  75. package/src/index.ts +3 -2
  76. 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,5 @@
1
+ import { RenderElementProps } from "slate-react";
2
+ import "./styles.css";
3
+ declare function Element({ attributes, children, element }: RenderElementProps): import("react/jsx-runtime").JSX.Element;
4
+ export { Element };
5
+ //# sourceMappingURL=index.d.ts.map
@@ -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,3 @@
1
+ declare function Leaf({ attributes, children, leaf }: any): import("react/jsx-runtime").JSX.Element;
2
+ export { Leaf };
3
+ //# sourceMappingURL=index.d.ts.map
@@ -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,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import "./styles.css";
3
+ function Toolbar({ children }) {
4
+ return _jsx("div", { className: "arkynRichTextToolbar", children: children });
5
+ }
6
+ export { Toolbar };
@@ -0,0 +1,3 @@
1
+ declare const serialize: (node: any) => string;
2
+ export { serialize };
3
+ //# sourceMappingURL=serialize.d.ts.map
@@ -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,5 @@
1
+ import { Editor } from "slate";
2
+ import { AlignFormatType, ElementFormatType } from "../defineType";
3
+ declare function toggleBlock(editor: Editor, format: ElementFormatType | AlignFormatType): void;
4
+ export { toggleBlock };
5
+ //# sourceMappingURL=toggleBlock.d.ts.map
@@ -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,5 @@
1
+ import { Editor } from "slate";
2
+ import { MarkFormatType } from "../defineType";
3
+ declare function toggleMark(editor: Editor, format: MarkFormatType): void;
4
+ export { toggleMark };
5
+ //# sourceMappingURL=toggleMark.d.ts.map
@@ -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,5 @@
1
+ import { Editor } from "slate";
2
+ import { MarkFormatType } from "../defineType";
3
+ declare function isMarkActive(editor: Editor, format: MarkFormatType): boolean;
4
+ export { isMarkActive };
5
+ //# sourceMappingURL=isMarkActive.d.ts.map
@@ -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,6 @@
1
+ import { Editor } from "slate";
2
+ function isMarkActive(editor, format) {
3
+ const marks = Editor.marks(editor);
4
+ return marks ? marks[format] === true : false;
5
+ }
6
+ export { isMarkActive };
@@ -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,2CAkFf;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, 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,7 @@
1
+ import { MarkFormatType } from "../defineType";
2
+ type HotKeys = {
3
+ [key: string]: MarkFormatType;
4
+ };
5
+ declare const HOTKEYS: HotKeys;
6
+ export { HOTKEYS };
7
+ //# sourceMappingURL=HOTKEYS.d.ts.map
@@ -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,7 @@
1
+ const HOTKEYS = {
2
+ "mod+b": "bold",
3
+ "mod+i": "italic",
4
+ "mod+u": "underline",
5
+ "mod+`": "code",
6
+ };
7
+ export { HOTKEYS };
@@ -0,0 +1,4 @@
1
+ import { Descendant } from "slate";
2
+ declare const INITIAL_VALUE: Descendant[];
3
+ export { INITIAL_VALUE };
4
+ //# sourceMappingURL=INITIAL_VALUE.d.ts.map
@@ -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,7 @@
1
+ const INITIAL_VALUE = [
2
+ {
3
+ type: "paragraph",
4
+ children: [{ text: "" }],
5
+ },
6
+ ];
7
+ export { INITIAL_VALUE };
@@ -0,0 +1,3 @@
1
+ declare const LIST_TYPES: string[];
2
+ export { LIST_TYPES };
3
+ //# sourceMappingURL=LIST_TYPES.d.ts.map
@@ -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,2 @@
1
+ const LIST_TYPES = ["listItem", "numberedList"];
2
+ export { LIST_TYPES };
@@ -0,0 +1,3 @@
1
+ declare const TEXT_ALIGN_TYPES: string[];
2
+ export { TEXT_ALIGN_TYPES };
3
+ //# sourceMappingURL=TEXT_ALIGN_TYPES.d.ts.map
@@ -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"}
@@ -0,0 +1,2 @@
1
+ const TEXT_ALIGN_TYPES = ["left", "center", "right", "justify"];
2
+ export { TEXT_ALIGN_TYPES };
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
@@ -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,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,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"}
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";