@oppulence/design-system 1.0.4 → 1.0.5

package/src/components/organisms/editor/extentions/bubble-menu/link-item.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { useRef, useState } from "react";
+import {
+  MdOutlineAddLink,
+  MdOutlineCheck,
+  MdOutlineDelete,
+  MdOutlineLinkOff,
+} from "react-icons/md";
+import { cn } from "../../../../../../lib/utils";
+import { buttonVariants } from "../../../../atoms/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../molecules/popover";
+import { formatUrlWithProtocol } from "../../utils";
+import { BubbleMenuButton } from "./bubble-menu-button";
+
+interface LinkItemProps {
+  editor: Editor;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function LinkItem({ editor, open, setOpen }: LinkItemProps) {
+  const [value, setValue] = useState("");
+  const isActive = editor.isActive("link");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const linkValue = editor.getAttributes("link").href;
+
+  const handleSubmit = () => {
+    const url = formatUrlWithProtocol(value);
+
+    if (url) {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .setLink({ href: url })
+        .run();
+
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Popover modal={false} open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={<BubbleMenuButton isActive={isActive} action={() => setOpen(true)} />}
+      >
+        {linkValue ? (
+          <MdOutlineLinkOff className="size-4" />
+        ) : (
+          <MdOutlineAddLink className="size-4" />
+        )}
+      </PopoverTrigger>
+      <PopoverContent align="end" sideOffset={10}>
+        <div className="flex p-1 w-60">
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Paste a link"
+            className="flex-1 bg-background p-0.5 h-7 text-xs outline-none placeholder:text-[#878787]"
+            defaultValue={linkValue || ""}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleSubmit();
+              }
+            }}
+          />
+
+          {linkValue ? (
+            <button
+              className={cn(
+                buttonVariants({ variant: "outline", size: "icon-xs" }),
+                "flex size-7 items-center p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800 hover:border-none",
+              )}
+              type="button"
+              onClick={() => {
+                editor.chain().focus().unsetLink().run();
+                if (inputRef.current) {
+                  inputRef.current.value = "";
+                }
+                setOpen(false);
+              }}
+            >
+              <MdOutlineDelete className="size-4" />
+            </button>
+          ) : (
+            <button
+              className={cn(
+                buttonVariants({ variant: "default", size: "icon-xs" }),
+                "size-7",
+              )}
+              type="button"
+              onClick={handleSubmit}
+            >
+              <MdOutlineCheck className="size-4" />
+            </button>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/organisms/editor/extentions/register.ts

@@ -0,0 +1,22 @@
+// You can find the list of extensions here: https://tiptap.dev/docs/editor/extensions/functionality
+
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import Underline from "@tiptap/extension-underline";
+import StarterKit from "@tiptap/starter-kit";
+
+// Add your extensions here
+const extensions = [
+  StarterKit,
+  Underline,
+  Link.configure({
+    openOnClick: false,
+    autolink: true,
+    defaultProtocol: "https",
+  }),
+];
+
+export function registerExtensions(options?: { placeholder?: string }) {
+  const { placeholder } = options ?? {};
+  return [...extensions, Placeholder.configure({ placeholder })];
+}

package/src/components/organisms/editor/index.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import "./styles.css";
+
+import {
+  EditorContent,
+  type Editor as EditorInstance,
+  type JSONContent,
+  useEditor,
+} from "@tiptap/react";
+import { BubbleMenu } from "./extentions/bubble-menu";
+import { registerExtensions } from "./extentions/register";
+
+type EditorProps = {
+  initialContent?: JSONContent | string;
+  placeholder?: string;
+  onUpdate?: (editor: EditorInstance) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  tabIndex?: number;
+};
+
+export function Editor({
+  initialContent,
+  placeholder,
+  onUpdate,
+  onBlur,
+  onFocus,
+  tabIndex,
+}: EditorProps) {
+  const editor = useEditor({
+    extensions: registerExtensions({ placeholder }),
+    content: initialContent,
+    immediatelyRender: false,
+    onBlur,
+    onFocus,
+    onUpdate: ({ editor }) => {
+      onUpdate?.(editor);
+    },
+  });
+
+  if (!editor) return null;
+
+  return (
+    <>
+      <EditorContent editor={editor} tabIndex={tabIndex} />
+      <BubbleMenu editor={editor} />
+    </>
+  );
+}

package/src/components/organisms/editor/styles.css

@@ -0,0 +1,31 @@
+@reference "../../../styles/globals.css";
+
+.ProseMirror-focused {
+  @apply outline-none;
+}
+
+.tiptap {
+  @apply text-xs leading-loose;
+}
+
+.tiptap h2 {
+  @apply text-2xl;
+  @apply font-sans;
+  margin-bottom: 1.5rem;
+}
+
+.tiptap a {
+  @apply underline;
+}
+
+.tiptap .bubble-menu {
+  @apply flex gap-2;
+}
+
+.tiptap p.is-empty::before {
+  color: #404040;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}

package/src/components/organisms/editor/utils.ts

@@ -0,0 +1,19 @@
+export function isValidUrlFormat(urlString: string) {
+  try {
+    new URL(urlString);
+    return true;
+  } catch (_error) {
+    return false;
+  }
+}
+
+export function formatUrlWithProtocol(rawUrlString: string) {
+  if (isValidUrlFormat(rawUrlString)) return rawUrlString;
+  try {
+    if (rawUrlString.includes(".") && !rawUrlString.includes(" ")) {
+      return new URL(`https://${rawUrlString}`).toString();
+    }
+  } catch (_error) {
+    return null;
+  }
+}

package/src/components/organisms/index.ts

@@ -4,14 +4,25 @@ export * from "./calendar";
 export * from "./carousel";
 export * from "./chart";
 export * from "./combobox";
+export * from "./combobox-dropdown";
 export * from "./command";
+export * from "./conversation";
 export * from "./context-menu";
+export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./drawer";
 export * from "./dropdown-menu";
+export * from "./editor";
 export * from "./menubar";
+export * from "./multiple-selector";
 export * from "./navigation-menu";
 export * from "./page-layout";
+export * from "./prompt-input";
+export * from "./reasoning";
+export * from "./response";
 export * from "./sheet";
 export * from "./sidebar";
 export * from "./sonner";
+export * from "./toast";
+export * from "./toast-toaster";
+export * from "./use-toast";