@lets-events/react 12.10.3 → 12.10.5

package/src/components/RichEditor/RichEditor.tsx

@@ -1,50 +1,54 @@
-import { useEffect, useState } from "react";
-import { ToastProvider } from "../Toast";
-import QuillComponent from "./QuillComponent";
-
-export interface UploadConfig {
-  apiUrl: string;
-  s3Bucket: string;
-  s3Region: string;
-  s3Url: string;
-  timeout?: number;
-  maxFileSize?: number;
-  endpoints?: {
-    presignedUrl: string;
-    upload: string;
-  };
-}
-
-export interface RichEditorProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  label?: string;
-  disabled?: boolean;
-  className?: string;
-  uploadConfig?: UploadConfig;
-  simpleVersion?: boolean;
-  onCharacterCountChange?: (count: number) => void;
-  maxLength?: number;
-  disableVideo?: boolean
-}
-
-const RichEditor = (props: RichEditorProps) => {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(typeof window !== "undefined");
-  }, []);
-
-  if (!isClient) return null;
-
-  return (
-    <div>
-      <ToastProvider>
-        <QuillComponent {...props} />
-      </ToastProvider>
-    </div>
-  );
-};
-
+import { useEffect, useState } from "react";
+import { ToastProvider } from "../Toast";
+import QuillComponent from "./QuillComponent";
+import { RichEditorElement } from "./types";
+
+export type { RichEditorElement };
+
+export interface UploadConfig {
+  apiUrl: string;
+  s3Bucket: string;
+  s3Region: string;
+  s3Url: string;
+  timeout?: number;
+  maxFileSize?: number;
+  endpoints?: {
+    presignedUrl: string;
+    upload: string;
+  };
+}
+
+export interface RichEditorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+  uploadConfig?: UploadConfig;
+  simpleVersion?: boolean;
+  richEditorElements?: RichEditorElement[];
+  onCharacterCountChange?: (count: number) => void;
+  maxLength?: number;
+  disableVideo?: boolean;
+}
+
+const RichEditor = (props: RichEditorProps) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(typeof window !== "undefined");
+  }, []);
+
+  if (!isClient) return null;
+
+  return (
+    <div>
+      <ToastProvider>
+        <QuillComponent {...props} />
+      </ToastProvider>
+    </div>
+  );
+};
+
 export default RichEditor;

package/src/components/RichEditor/RichTextPresenter.tsx

@@ -1,18 +1,18 @@
-import { QuillEditor } from "./styledComponents";
-
-type Props = {
-  richText: string;
-};
-
-const RichTextPresenter = ({ richText }: Props) => {
-  return (
-    <QuillEditor>
-      <div
-        className="ql-editor"
-        dangerouslySetInnerHTML={{ __html: richText }}
-      />
-    </QuillEditor>
-  );
-};
-
-export default RichTextPresenter;
+import { QuillEditor } from "./styledComponents";
+
+type Props = {
+  richText: string;
+};
+
+const RichTextPresenter = ({ richText }: Props) => {
+  return (
+    <QuillEditor>
+      <div
+        className="ql-editor"
+        dangerouslySetInnerHTML={{ __html: richText }}
+      />
+    </QuillEditor>
+  );
+};
+
+export default RichTextPresenter;

package/src/components/RichEditor/editorConfig.ts

@@ -0,0 +1,149 @@
+import { RichEditorElement } from "./types";
+
+const TEXT_FORMATS: RichEditorElement[] = ["bold", "italic", "underline"];
+const MEDIA_FORMATS: RichEditorElement[] = ["link", "image", "video"];
+
+export const buildToolbarFromElements = (
+  elements: RichEditorElement[],
+): unknown[] => {
+  const toolbar: unknown[] = [];
+
+  if (elements.includes("header")) {
+    toolbar.push([{ header: [1, 2, false] }]);
+  }
+
+  const textGroup = elements.filter((element) =>
+    TEXT_FORMATS.includes(element),
+  );
+  if (textGroup.length > 0) {
+    toolbar.push(textGroup);
+  }
+
+  const colorGroup: unknown[] = [];
+  if (elements.includes("color")) colorGroup.push({ color: [] });
+  if (elements.includes("background")) colorGroup.push({ background: [] });
+  if (colorGroup.length > 0) {
+    toolbar.push(colorGroup);
+  }
+
+  if (elements.includes("align")) {
+    toolbar.push([{ align: [] }]);
+  }
+
+  if (elements.includes("list")) {
+    toolbar.push([{ list: "ordered" }, { list: "bullet" }]);
+  }
+
+  const mediaGroup = elements.filter((element) =>
+    MEDIA_FORMATS.includes(element),
+  );
+  if (mediaGroup.length > 0) {
+    toolbar.push(mediaGroup);
+  }
+
+  return toolbar;
+};
+
+export const buildFormatsFromElements = (
+  elements: RichEditorElement[],
+): string[] => elements;
+
+export const getEditorModulesAndFormats = (
+  richEditorElements?: RichEditorElement[],
+  simpleVersion = false,
+  disableVideo = false,
+): { modules: Record<string, unknown>; formats: string[] } => {
+  const clipboard = { matchVisual: false };
+
+  if (richEditorElements && richEditorElements.length > 0) {
+    return {
+      modules: {
+        toolbar: buildToolbarFromElements(richEditorElements),
+        clipboard,
+      },
+      formats: buildFormatsFromElements(richEditorElements),
+    };
+  }
+
+  if (simpleVersion) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+        ],
+        clipboard,
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "color",
+        "background",
+        "align",
+        "list",
+      ],
+    };
+  }
+
+  if (disableVideo) {
+    return {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ["bold", "italic", "underline", "strike"],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link", "image"],
+        ],
+        clipboard,
+      },
+      formats: [
+        "header",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "color",
+        "background",
+        "align",
+        "list",
+        "link",
+        "image",
+      ],
+    };
+  }
+
+  return {
+    modules: {
+      toolbar: [
+        [{ header: [1, 2, false] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "image", "video"],
+      ],
+      clipboard,
+    },
+    formats: [
+      "header",
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "color",
+      "background",
+      "align",
+      "list",
+      "link",
+      "image",
+      "video",
+    ],
+  };
+};

package/src/components/RichEditor/index.ts

@@ -1,3 +1,3 @@
-export { default as RichEditor } from "./RichEditor";
-export type { RichEditorProps } from "./RichEditor";
-export { default as RichTextPresenter } from "./RichTextPresenter";
+export { default as RichEditor } from "./RichEditor";
+export type { RichEditorProps, RichEditorElement } from "./RichEditor";
+export { default as RichTextPresenter } from "./RichTextPresenter";