@arkyn/components 1.3.109 → 1.3.111

package/src/components/RichText/functions/toggleBlock.ts

@@ -0,0 +1,46 @@
+import { Editor, Transforms, Element as SlateElement } from "slate";
+
+import { AlignFormatType, ElementFormatType } from "../defineType";
+import { isBlockActive } from "../helpers/isBlockActive";
+import { LIST_TYPES } from "../template/LIST_TYPES";
+import { TEXT_ALIGN_TYPES } from "../template/TEXT_ALIGN_TYPES";
+
+function toggleBlock(
+  editor: Editor,
+  format: ElementFormatType | AlignFormatType
+) {
+  const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
+  const isActive = isBlockActive(editor, format, blockType);
+
+  const isList = LIST_TYPES.includes(format);
+
+  Transforms.unwrapNodes(editor, {
+    match: (n) =>
+      !Editor.isEditor(n) &&
+      SlateElement.isElement(n) &&
+      LIST_TYPES.includes(n.type) &&
+      !TEXT_ALIGN_TYPES.includes(format),
+    split: true,
+  });
+
+  let newProperties: Partial<SlateElement>;
+
+  if (TEXT_ALIGN_TYPES.includes(format)) {
+    const formatType = format as AlignFormatType;
+    newProperties = { align: isActive ? undefined : formatType };
+  } else {
+    const formatType = format as ElementFormatType;
+    newProperties = {
+      type: isActive ? "paragraph" : isList ? "listItem" : formatType,
+    };
+  }
+
+  Transforms.setNodes<SlateElement>(editor, newProperties);
+
+  if (!isActive && isList) {
+    const block = { type: format as ElementFormatType, children: [] };
+    Transforms.wrapNodes(editor, block);
+  }
+}
+
+export { toggleBlock };

package/src/components/RichText/functions/toggleMark.ts

@@ -0,0 +1,13 @@
+import { Editor } from "slate";
+
+import { MarkFormatType } from "../defineType";
+import { isMarkActive } from "../helpers/isMarkActive";
+
+function toggleMark(editor: Editor, format: MarkFormatType) {
+  const isActive = isMarkActive(editor, format);
+
+  if (isActive) Editor.removeMark(editor, format);
+  else Editor.addMark(editor, format, true);
+}
+
+export { toggleMark };

package/src/components/RichText/helpers/isBlockActive.ts

@@ -0,0 +1,27 @@
+import { Editor } from "slate";
+import { Element as SlateElement } from "slate";
+
+import { AlignFormatType, ElementFormatType } from "../defineType";
+
+function isBlockActive(
+  editor: Editor,
+  format: ElementFormatType | AlignFormatType,
+  blockType: "type" | "align" = "type"
+) {
+  const { selection } = editor;
+  if (!selection) return false;
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: (n) =>
+        !Editor.isEditor(n) &&
+        SlateElement.isElement(n) &&
+        n[blockType] === format,
+    })
+  );
+
+  return !!match;
+}
+
+export { isBlockActive };

package/src/components/RichText/helpers/isMarkActive.ts

@@ -0,0 +1,9 @@
+import { Editor } from "slate";
+import { MarkFormatType } from "../defineType";
+
+function isMarkActive(editor: Editor, format: MarkFormatType) {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+}
+
+export { isMarkActive };

package/src/components/RichText/index.tsx

@@ -0,0 +1,130 @@
+import isHotkey from "is-hotkey";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Italic,
+  Quote,
+  Underline,
+} from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { createEditor, Descendant } from "slate";
+import { withHistory } from "slate-history";
+import { Editable, Slate, withReact } from "slate-react";
+
+import { BlockButton } from "./components/BlockButton/intex";
+import { Element } from "./components/Element";
+import { Leaf } from "./components/Leaf";
+import { MarkButton } from "./components/MarkButton";
+import { Toolbar } from "./components/Toolbar";
+import { toggleMark } from "./functions/toggleMark";
+import { HOTKEYS } from "./template/HOTKEYS";
+import { INITIAL_VALUE } from "./template/INITIAL_VALUE";
+
+import "./styles.css";
+import { useFormController } from "../Form/FormController";
+
+type RichTextProps = {
+  name: string;
+  defaultValue?: string;
+  isError?: boolean;
+  onChange?: (value: Descendant[]) => void;
+  onValueChange?: (value: string) => void;
+};
+
+function RichText({
+  name,
+  defaultValue,
+  onValueChange,
+  onChange,
+  isError: baseIsError,
+}: RichTextProps) {
+  const [editorValue, setEditorValue] = useState<Descendant[]>([]);
+  const [onFocus, setOnFocus] = useState(false);
+
+  const { id, inputRef, error } = useFormController();
+
+  const baseRef = useRef<HTMLInputElement>(null);
+
+  const ref = inputRef || baseRef;
+  const isError = baseIsError || !!error;
+
+  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
+
+  const renderLeaf = useCallback(Leaf, []);
+  const renderElement = useCallback(Element, []);
+
+  function handleChange(e: Descendant[]) {
+    setEditorValue(e);
+    onChange && onChange(e);
+    onValueChange && onValueChange(JSON.stringify(e));
+  }
+
+  const errorClass = isError ? "errorTrue" : "errorFalse";
+  const focusClass = onFocus ? "focusTrue" : "focusFalse";
+
+  const className = `arkynRichText ${errorClass} ${focusClass}`;
+
+  return (
+    <Slate
+      editor={editor}
+      initialValue={defaultValue ? JSON.parse(defaultValue) : INITIAL_VALUE}
+      onChange={handleChange}
+      onValueChange={handleChange}
+    >
+      <div className={className}>
+        <Toolbar>
+          <BlockButton format="headingOne" icon={Heading1} />
+          <BlockButton format="headingTwo" icon={Heading2} />
+          <BlockButton format="blockQuote" icon={Quote} />
+          {/* <BlockButton format="bulletedList" icon={ListVideo} /> */}
+          {/* <BlockButton format="listItem" icon={List} /> */}
+          {/* <BlockButton format="numberedList" icon={ListOrdered} /> */}
+
+          <MarkButton format="bold" icon={Bold} />
+          <MarkButton format="italic" icon={Italic} />
+          <MarkButton format="underline" icon={Underline} />
+          <MarkButton format="code" icon={Code} />
+
+          <BlockButton format="left" icon={AlignLeft} />
+          <BlockButton format="right" icon={AlignRight} />
+          <BlockButton format="center" icon={AlignCenter} />
+          <BlockButton format="justify" icon={AlignJustify} />
+        </Toolbar>
+
+        <Editable
+          className="editorContainer"
+          renderElement={renderElement}
+          renderLeaf={renderLeaf}
+          spellCheck
+          id={id}
+          onFocus={() => setOnFocus(true)}
+          onBlur={() => setOnFocus(false)}
+          onKeyDown={(event) => {
+            for (const hotkey in HOTKEYS) {
+              if (isHotkey(hotkey, event as any)) {
+                event.preventDefault();
+                const mark = HOTKEYS[hotkey as keyof typeof HOTKEYS];
+                toggleMark(editor, mark);
+              }
+            }
+          }}
+        />
+      </div>
+
+      <input
+        ref={ref}
+        type="hidden"
+        name={name}
+        value={JSON.stringify(editorValue)}
+      />
+    </Slate>
+  );
+}
+
+export { RichText };

package/src/components/RichText/styles.css

@@ -0,0 +1,25 @@
+.arkynRichText {
+  display: flex;
+  flex-direction: column;
+
+  background-color: rgba(var(--input-background), 1);
+  border: 1px solid var(--border);
+  border-radius: var(--rounded-inputs);
+  outline: 1px solid transparent;
+}
+
+.arkynRichText.errorTrue {
+  outline-color: rgba(var(--spotlight-danger), 1);
+  border-color: rgba(var(--spotlight-danger), 1);
+}
+
+.arkynRichText.focusTrue {
+  outline-color: rgba(var(--spotlight-primary), 1);
+  border-color: rgba(var(--spotlight-primary), 1);
+}
+
+.arkynRichText .editorContainer {
+  padding: 16px;
+  outline: none;
+  min-height: 300px;
+}

package/src/components/RichText/template/HOTKEYS.ts

@@ -0,0 +1,14 @@
+import { MarkFormatType } from "../defineType";
+
+type HotKeys = {
+  [key: string]: MarkFormatType;
+};
+
+const HOTKEYS: HotKeys = {
+  "mod+b": "bold",
+  "mod+i": "italic",
+  "mod+u": "underline",
+  "mod+`": "code",
+};
+
+export { HOTKEYS };

package/src/components/RichText/template/INITIAL_VALUE.ts

@@ -0,0 +1,10 @@
+import { Descendant } from "slate";
+
+const INITIAL_VALUE: Descendant[] = [
+  {
+    type: "paragraph",
+    children: [{ text: "" }],
+  },
+];
+
+export { INITIAL_VALUE };

package/src/components/RichText/template/LIST_TYPES.ts

@@ -0,0 +1,3 @@
+const LIST_TYPES = ["listItem", "numberedList"];
+
+export { LIST_TYPES };

package/src/components/RichText/template/TEXT_ALIGN_TYPES.ts

@@ -0,0 +1,3 @@
+const TEXT_ALIGN_TYPES = ["left", "center", "right", "justify"];
+
+export { TEXT_ALIGN_TYPES };

package/src/index.ts

@@ -23,13 +23,14 @@ export {
 export { Button } from "./components/Button";
 export { Checkbox } from "./components/Checkbox";
 export { FormController, FormError, FormLabel } from "./components/Form";
+export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
 export { IconButton } from "./components/IconButton";
 export { Input } from "./components/Input";
 export { RadioBox, RadioGroup } from "./components/Radio";
+export { RichText } from "./components/RichText";
 export { Select } from "./components/Select";
 export { Switch } from "./components/Switch";
 export { Textarea } from "./components/Textarea";
-export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
 
 // Navigation
 export { BreadcrumbContainer, BreadcrumbLink } from "./components/Breadcrumb";
@@ -51,7 +52,7 @@ export { useScopedParams } from "./hooks/useScopedParams";
 export { useToast } from "./hooks/useToast";
 
 // Providers
-export { GoogleProvider } from "./provider/GoogleProvider";
 export { DrawerProvider } from "./provider/DrawerProvider";
+export { GoogleProvider } from "./provider/GoogleProvider";
 export { ModalProvider } from "./provider/ModalProvider";
 export { ToastProvider } from "./provider/ToastProvider";

package/tsconfig.json

@@ -1,4 +1,12 @@
 {
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
   "exclude": ["node_modules", "dist"],
   "compilerOptions": {
     "outDir": "./dist",