@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/chat-box/zalo-personal-editor.js

@@ -0,0 +1,590 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useEditor, EditorContent, useEditorState } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Mention from "@tiptap/extension-mention";
+import { Mark } from "@tiptap/core";
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  List,
+  ListOrdered
+} from "lucide-react";
+import { Button } from "../../custom/button.js";
+import { cn } from "../../../lib/utils.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  serializeTiptapToRtf,
+  serializeTiptapForGroup,
+  parseRtfToTiptap,
+  ZALO_COLORS
+} from "./zalo-rtf-utils.js";
+import { ZaloEmojiDecoration } from "./zalo-emoji-decoration.js";
+import { TextSelection } from "@tiptap/pm/state";
+import { useTranslation } from "react-i18next";
+const ZALO_DEFAULT_TEXT_COLOR = "#000000";
+function withWordSelect(editor, fn) {
+  const { state } = editor;
+  if (state.selection.empty) {
+    const { $from } = state.selection;
+    const text = $from.parent.textContent;
+    const offset = $from.parentOffset;
+    let start = offset;
+    while (start > 0 && /\S/.test(text[start - 1])) start--;
+    let end = offset;
+    while (end < text.length && /\S/.test(text[end])) end++;
+    if (start !== end) {
+      editor.view.dispatch(
+        state.tr.setSelection(
+          TextSelection.create(
+            state.doc,
+            $from.start() + start,
+            $from.start() + end
+          )
+        )
+      );
+    }
+  }
+  fn();
+}
+const ZaloColor = Mark.create({
+  name: "zaloColor",
+  addAttributes() {
+    return { color: { default: null } };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-zc]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const hex = ZALO_COLORS.find((c) => c.st === HTMLAttributes.color)?.hex;
+    return [
+      "span",
+      { "data-zc": HTMLAttributes.color, style: hex ? `color:${hex}` : "" },
+      0
+    ];
+  }
+});
+function ToolbarButton({ onClick, isActive, tooltip, children }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: cn(
+          "h-7 w-7 rounded",
+          isActive && "bg-accent text-accent-foreground"
+        ),
+        onMouseDown: (e) => {
+          e.preventDefault();
+          onClick();
+        },
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: tooltip })
+  ] });
+}
+function ColorButton({ editor, activeColor, onBeforeApply }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+  const activeHex = ZALO_COLORS.find((c) => c.st === activeColor)?.hex;
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Tooltip, { open: open ? false : void 0, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: cn("h-7 w-7 rounded", activeColor && "bg-accent"),
+          onMouseDown: (e) => {
+            e.preventDefault();
+            setOpen((o) => !o);
+          },
+          children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center gap-[2px]", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-xs font-bold leading-none",
+                style: { color: activeHex ?? "inherit" },
+                children: "A"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-[3px] w-3.5 rounded-sm",
+                style: { backgroundColor: activeHex ?? ZALO_DEFAULT_TEXT_COLOR }
+              }
+            )
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-0 z-50 mb-1 flex gap-1 rounded-md border bg-card p-1.5 shadow-md", children: ZALO_COLORS.map(({ st, hex }) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "h-5 w-5 rounded transition-transform hover:scale-110",
+            activeColor === st && "ring-2 ring-border ring-offset-1"
+          ),
+          style: { backgroundColor: hex },
+          onMouseDown: (e) => {
+            e.preventDefault();
+            onBeforeApply?.();
+            if (activeColor === st) {
+              editor.chain().focus().unsetMark("zaloColor").run();
+            } else {
+              editor.chain().focus().setMark("zaloColor", { color: st }).run();
+            }
+            setOpen(false);
+          }
+        },
+        st
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: t("chat:action.changeColor", { defaultValue: "\u0110\u1ED5i m\xE0u" }) })
+  ] });
+}
+function MentionSuggestionDropdown({
+  items,
+  selectedIndex,
+  command,
+  clientRect
+}) {
+  const { t } = useTranslation();
+  if (!items?.length || !clientRect) return null;
+  const rect = clientRect();
+  if (!rect) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: rect.left,
+          bottom: window.innerHeight - rect.top + 4,
+          zIndex: 9999999,
+          minWidth: "180px",
+          maxWidth: "300px"
+        },
+        className: "max-h-[350px] overflow-auto rounded-[10px] border bg-card shadow-[0_0_10px_rgba(0,0,0,0.1)]",
+        children: items.map((item, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap border-b border-black/15 px-3 py-2 text-sm last:border-0",
+              i === selectedIndex && "bg-secondary"
+            ),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              command(item);
+            },
+            children: item.value === "All" ? /* @__PURE__ */ jsxs("span", { children: [
+              t("chat:field.notifyWholeGroup", {
+                defaultValue: "B\xE1o cho c\u1EA3 nh\xF3m"
+              }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-primary", children: "@All" })
+            ] }) : /* @__PURE__ */ jsx("span", { children: item.label })
+          },
+          item.id
+        ))
+      }
+    ),
+    document.body
+  );
+}
+const ZaloPersonalEditor = forwardRef(function ZaloPersonalEditor2({
+  onSend,
+  onPaste,
+  onUpdate,
+  placeholder = "Nh\u1EADp tin nh\u1EAFn",
+  mentionList = null,
+  onMentionTrigger = void 0,
+  showToolbar = false
+}, ref) {
+  const onSendRef = useRef(onSend);
+  useEffect(() => {
+    onSendRef.current = onSend;
+  }, [onSend]);
+  const onUpdateRef = useRef(onUpdate);
+  useEffect(() => {
+    onUpdateRef.current = onUpdate;
+  }, [onUpdate]);
+  const mentionListRef = useRef(mentionList);
+  const currentQueryRef = useRef("");
+  useEffect(() => {
+    mentionListRef.current = mentionList;
+    const state = suggestionRef.current.state;
+    if (!mentionList?.length || !state) return;
+    const filtered = mentionList.filter(
+      (item) => item.label.toLowerCase().includes(currentQueryRef.current.toLowerCase())
+    );
+    const newState = { ...state, items: filtered, selectedIndex: 0 };
+    suggestionRef.current.state = newState;
+    setSuggestionRef.current?.(newState);
+  }, [mentionList]);
+  const onMentionTriggerRef = useRef(onMentionTrigger);
+  useEffect(() => {
+    onMentionTriggerRef.current = onMentionTrigger;
+  }, [onMentionTrigger]);
+  const setSuggestionRef = useRef(null);
+  const suggestionRef = useRef({ state: null });
+  const [suggestionState, setSuggestionState] = useState(null);
+  setSuggestionRef.current = setSuggestionState;
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: false,
+        code: false,
+        blockquote: false,
+        horizontalRule: false
+      }),
+      Underline,
+      ZaloColor,
+      ZaloEmojiDecoration,
+      Mention.configure({
+        HTMLAttributes: {
+          class: "mention rounded px-0.5 bg-secondary text-primary"
+        },
+        suggestion: {
+          items: ({ query }) => {
+            if (!mentionListRef.current) return [];
+            return mentionListRef.current.filter(
+              (item) => item.label.toLowerCase().includes(query.toLowerCase())
+            );
+          },
+          command: ({ editor: editor2, range, props }) => {
+            editor2.chain().focus().insertContentAt(range, [
+              {
+                type: "mention",
+                attrs: { id: props.value, label: props.label }
+              },
+              { type: "text", text: " " }
+            ]).run();
+          },
+          render: () => ({
+            onStart: (props) => {
+              onMentionTriggerRef.current?.();
+              currentQueryRef.current = props.query;
+              const newState = {
+                items: props.items,
+                command: props.command,
+                clientRect: props.clientRect,
+                selectedIndex: 0
+              };
+              suggestionRef.current.state = newState;
+              setSuggestionRef.current?.(newState);
+            },
+            onUpdate: (props) => {
+              currentQueryRef.current = props.query;
+              const newState = {
+                ...suggestionRef.current.state,
+                items: props.items,
+                command: props.command,
+                clientRect: props.clientRect
+              };
+              suggestionRef.current.state = newState;
+              setSuggestionRef.current?.(newState);
+            },
+            onKeyDown: ({ event }) => {
+              const s = suggestionRef.current.state;
+              if (!s) return false;
+              if (event.key === "ArrowUp") {
+                const next = {
+                  ...s,
+                  selectedIndex: (s.selectedIndex - 1 + s.items.length) % s.items.length
+                };
+                suggestionRef.current.state = next;
+                setSuggestionRef.current?.(next);
+                return true;
+              }
+              if (event.key === "ArrowDown") {
+                const next = {
+                  ...s,
+                  selectedIndex: (s.selectedIndex + 1) % s.items.length
+                };
+                suggestionRef.current.state = next;
+                setSuggestionRef.current?.(next);
+                return true;
+              }
+              if (event.key === "Enter") {
+                if (s.items[s.selectedIndex]) {
+                  s.command(s.items[s.selectedIndex]);
+                  return true;
+                }
+                return false;
+              }
+              if (event.key === "Escape") {
+                suggestionRef.current.state = null;
+                setSuggestionRef.current?.(null);
+                return true;
+              }
+              return false;
+            },
+            onExit: () => {
+              suggestionRef.current.state = null;
+              setSuggestionRef.current?.(null);
+            }
+          })
+        }
+      })
+    ],
+    onUpdate: ({ editor: editor2 }) => {
+      onUpdateRef.current?.(editor2.getText());
+    },
+    editorProps: {
+      attributes: {
+        class: "outline-none h-full overflow-y-auto p-3 text-sm [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5"
+      },
+      handleKeyDown: (view, event) => {
+        if ((event.ctrlKey || event.metaKey) && ["b", "i", "u", "s"].includes(event.key.toLowerCase())) {
+          event.stopPropagation();
+        }
+        if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+          if (suggestionRef.current.state?.items?.length > 0) return false;
+          const { $from } = view.state.selection;
+          for (let d = 1; d <= $from.depth; d++) {
+            if ($from.node(d).type.name === "listItem") return false;
+          }
+          event.preventDefault();
+          serializeAndSend(view.state, () => {
+            setTimeout(() => {
+              view.dispatch(
+                view.state.tr.delete(0, view.state.doc.content.size)
+              );
+            }, 0);
+          });
+          return true;
+        }
+        return false;
+      }
+    }
+  });
+  const serializeAndSend = (editorState, onClear) => {
+    const isMentionMode = mentionListRef.current !== null;
+    let text, styles, mentionData;
+    if (isMentionMode) {
+      const result = serializeTiptapForGroup(editorState);
+      text = result.text;
+      styles = result.styles;
+      mentionData = {
+        textOriginal: result.textOriginal,
+        mentions: result.mentions,
+        mentionsDisplay: result.mentionsDisplay
+      };
+    } else {
+      const result = serializeTiptapToRtf(editorState);
+      text = result.text;
+      styles = result.styles;
+      mentionData = null;
+    }
+    const trimmed = text.trim();
+    if (trimmed) {
+      onSendRef.current(trimmed, styles, mentionData);
+      onClear?.();
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    focus: () => editor?.commands.focus(),
+    clear: () => editor?.commands.clearContent(),
+    isEmpty: () => editor?.isEmpty ?? true,
+    getRtf: () => {
+      if (!editor) return { text: "", styles: [] };
+      return serializeTiptapToRtf(editor.state);
+    },
+    getData: () => {
+      if (!editor) {
+        return {
+          text: "",
+          styles: [],
+          mentionData: null
+        };
+      }
+      if (mentionListRef.current !== null) {
+        const { text: text2, textOriginal, styles: styles2, mentions, mentionsDisplay } = serializeTiptapForGroup(editor.state);
+        return {
+          text: text2,
+          styles: styles2,
+          mentionData: { textOriginal, mentions, mentionsDisplay }
+        };
+      }
+      const { text, styles } = serializeTiptapToRtf(editor.state);
+      return { text, styles, mentionData: null };
+    },
+    setContent: (text, styles) => {
+      if (!editor) return;
+      editor.commands.setContent(parseRtfToTiptap(text, styles));
+    },
+    insertText: (text) => {
+      if (!editor) return;
+      editor.chain().focus().insertContent(text).run();
+    },
+    setMention: (id, label) => {
+      if (!editor) return;
+      editor.chain().focus().insertContentAt(1, [
+        { type: "mention", attrs: { id, label } },
+        { type: "text", text: " " }
+      ]).run();
+    }
+  }));
+  const activeMarks = useEditorState({
+    editor,
+    selector: (ctx) => ({
+      bold: ctx.editor.isActive("bold"),
+      italic: ctx.editor.isActive("italic"),
+      underline: ctx.editor.isActive("underline"),
+      strike: ctx.editor.isActive("strike"),
+      bulletList: ctx.editor.isActive("bulletList"),
+      orderedList: ctx.editor.isActive("orderedList"),
+      isEmpty: ctx.editor.isEmpty,
+      activeColor: ctx.editor.getAttributes("zaloColor").color ?? null
+    })
+  });
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 400, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative h-full w-full flex-1 overflow-auto",
+        onPaste,
+        children: [
+          /* @__PURE__ */ jsx(EditorContent, { editor, className: "w-full" }),
+          activeMarks.isEmpty && !activeMarks.bulletList && !activeMarks.orderedList && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-3 text-sm text-muted-foreground", children: placeholder })
+        ]
+      }
+    ),
+    showToolbar && /* @__PURE__ */ jsx("div", { className: "flex flex-shrink-0 items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 px-2 py-1", children: [
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => withWordSelect(
+            editor,
+            () => editor.chain().focus().toggleBold().run()
+          ),
+          isActive: activeMarks.bold,
+          tooltip: i18n.t("chat:label.bold", {
+            defaultValue: "In \u0111\u1EADm"
+          }),
+          children: /* @__PURE__ */ jsx(Bold, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => withWordSelect(
+            editor,
+            () => editor.chain().focus().toggleItalic().run()
+          ),
+          isActive: activeMarks.italic,
+          tooltip: i18n.t("chat:label.italic", {
+            defaultValue: "In nghi\xEAng"
+          }),
+          children: /* @__PURE__ */ jsx(Italic, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => withWordSelect(
+            editor,
+            () => editor.chain().focus().toggleUnderline().run()
+          ),
+          isActive: activeMarks.underline,
+          tooltip: i18n.t("chat:label.underline", {
+            defaultValue: "G\u1EA1ch ch\xE2n"
+          }),
+          children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => withWordSelect(
+            editor,
+            () => editor.chain().focus().toggleStrike().run()
+          ),
+          isActive: activeMarks.strike,
+          tooltip: i18n.t("chat:label.strikethrough", {
+            defaultValue: "G\u1EA1ch ngang ch\u1EEF"
+          }),
+          children: /* @__PURE__ */ jsx(Strikethrough, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          isActive: activeMarks.bulletList,
+          tooltip: i18n.t("chat:label.list", {
+            defaultValue: "Danh s\xE1ch"
+          }),
+          children: /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+          isActive: activeMarks.orderedList,
+          tooltip: i18n.t("chat:label.numberedList", {
+            defaultValue: "Danh s\xE1ch c\xF3 s\u1ED1"
+          }),
+          children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorButton,
+        {
+          editor,
+          activeColor: activeMarks.activeColor,
+          onBeforeApply: () => withWordSelect(editor, () => {
+          })
+        }
+      )
+    ] }) }),
+    suggestionState && suggestionState.items.length > 0 && /* @__PURE__ */ jsx(
+      MentionSuggestionDropdown,
+      {
+        items: suggestionState.items,
+        selectedIndex: suggestionState.selectedIndex,
+        command: suggestionState.command,
+        clientRect: suggestionState.clientRect
+      }
+    )
+  ] }) });
+});
+export {
+  ZaloPersonalEditor
+};