fix: wysiwyg lool

.eslintrc.json

@@ -18,7 +18,8 @@
   "rules": {
     "simple-import-sort/imports": "off",
     "simple-import-sort/exports": "off",
-    "@typescript-eslint/no-magic-numbers": "off"
+    "@typescript-eslint/no-magic-numbers": "off",
+    "no-extra-boolean-cast": "off"
   },
   "overrides": [
     {

@types/nextjs-routes.d.ts

@@ -12,9 +12,9 @@ declare module "nextjs-routes" {
 
   export type Route =
     | StaticRoute<"/">
+    | StaticRoute<"/editor">
     | DynamicRoute<"/event/[slug]/preview", { "slug": string }>
     | DynamicRoute<"/event/[slug]/settings", { "slug": string }>
-    | StaticRoute<"/object">
     | DynamicRoute<"/rejestracja/[participationSlug]", { "participationSlug": string }>
     | DynamicRoute<"/rejestracja/[participationSlug]/[blockId]/[reservationId]", { "participationSlug": string; "blockId": string; "reservationId": string }>
     | DynamicRoute<"/rejestracja/[participationSlug]/[blockId]/formularz", { "participationSlug": string; "blockId": string }>;

package.json

@@ -28,23 +28,41 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@supabase/ssr": "^0.5.1",
     "@supabase/supabase-js": "^2.43.4",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tabler/icons-react": "^3.5.0",
     "@tanstack/react-query": "^5.40.1",
     "@tanstack/react-table": "^8.19.2",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-code-block-lowlight": "^2.8.0",
+    "@tiptap/extension-color": "^2.8.0",
+    "@tiptap/extension-heading": "^2.8.0",
+    "@tiptap/extension-horizontal-rule": "^2.8.0",
+    "@tiptap/extension-image": "^2.8.0",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-placeholder": "^2.8.0",
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/extension-typography": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.9",
     "i18next": "^23.11.5",
     "jotai": "^2.10.0",
+    "lowlight": "^3.1.0",
     "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
@@ -59,6 +77,7 @@
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "tiptap-extension-resize-image": "^1.1.9",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
     "zod-i18n-map": "^2.27.0"

src/components/landing/MobileMenu.tsx

@@ -18,8 +18,8 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ onClose, isOpen }) => {
       />
       <div className="fixed inset-y-0 right-0 z-20 flex w-2/3 flex-col items-center justify-center bg-primary text-xl text-primary-foreground">
         <Toggle
-          isOpen={isOpen}
-          toggle={onClose}
+          pressed={isOpen}
+          onPressedChange={onClose}
           className="absolute right-6 top-8"
         />
 

src/components/landing/Navbar.tsx

@@ -69,7 +69,10 @@ export const Navbar = () => {
       </div>
       {!isMobileMenuOpen && (
         <div className="mr-6 lg:hidden ">
-          <Toggle isOpen={isMobileMenuOpen} toggle={toggleMobileMenu} />
+          <Toggle
+            pressed={isMobileMenuOpen}
+            onPressedChange={toggleMobileMenu}
+          />
         </div>
       )}
       {isMobileMenuOpen ? (

src/components/minimal-tiptap/components/bubble-menu/image-bubble-menu.tsx

@@ -0,0 +1,41 @@
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react";
+
+// eslint-disable-next-line no-restricted-imports
+import type { ShouldShowProps } from "../../types";
+import { ImagePopoverBlock } from "../image/image-popover-block";
+
+const ImageBubbleMenu = ({ editor }: { editor: Editor }) => {
+  const shouldShow = ({ editor: e, from, to }: ShouldShowProps) => {
+    if (from === to) {
+      return false;
+    }
+
+    const img = e.getAttributes("image");
+
+    if (Boolean(img.src)) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const unSetImage = () => {
+    editor.commands.deleteSelection();
+  };
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={shouldShow}
+      tippyOptions={{
+        placement: "bottom",
+        offset: [0, 8],
+      }}
+    >
+      <ImagePopoverBlock onRemove={unSetImage} />
+    </BubbleMenu>
+  );
+};
+
+export { ImageBubbleMenu };

src/components/minimal-tiptap/components/bubble-menu/link-bubble-menu.tsx

@@ -0,0 +1,118 @@
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react";
+import * as React from "react";
+
+// eslint-disable-next-line no-restricted-imports
+import type { ShouldShowProps } from "../../types";
+import { LinkEditBlock } from "../link/link-edit-block";
+import { LinkPopoverBlock } from "../link/link-popover-block";
+
+interface LinkBubbleMenuProps {
+  editor: Editor;
+}
+
+interface LinkAttributes {
+  href: string;
+  target: string;
+}
+
+export const LinkBubbleMenu: React.FC<LinkBubbleMenuProps> = ({ editor }) => {
+  const [showEdit, setShowEdit] = React.useState(false);
+  const [linkAttrs, setLinkAttrs] = React.useState<LinkAttributes>({
+    href: "",
+    target: "",
+  });
+  const [selectedText, setSelectedText] = React.useState("");
+
+  const updateLinkState = React.useCallback(() => {
+    const { from, to } = editor.state.selection;
+    const { href, target } = editor.getAttributes("link");
+    const text = editor.state.doc.textBetween(from, to, " ");
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    setLinkAttrs({ href, target });
+    setSelectedText(text);
+  }, [editor]);
+
+  const shouldShow = React.useCallback(
+    ({ editor: e, from, to }: ShouldShowProps) => {
+      if (from === to) {
+        return false;
+      }
+      const { href } = e.getAttributes("link");
+
+      if (Boolean(href)) {
+        updateLinkState();
+        return true;
+      }
+      return false;
+    },
+    [updateLinkState],
+  );
+
+  const handleEdit = React.useCallback(() => {
+    setShowEdit(true);
+  }, []);
+
+  const onSetLink = React.useCallback(
+    (url: string, text?: string, openInNewTab?: boolean) => {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .insertContent({
+          type: "text",
+          text: text ?? url,
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: url,
+                target: openInNewTab === true ? "_blank" : "",
+              },
+            },
+          ],
+        })
+        .setLink({ href: url, target: openInNewTab === true ? "_blank" : "" })
+        .run();
+      setShowEdit(false);
+      updateLinkState();
+    },
+    [editor, updateLinkState],
+  );
+
+  const onUnsetLink = React.useCallback(() => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setShowEdit(false);
+    updateLinkState();
+  }, [editor, updateLinkState]);
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={shouldShow}
+      tippyOptions={{
+        placement: "bottom-start",
+        onHidden: () => {
+          setShowEdit(false);
+        },
+      }}
+    >
+      {showEdit ? (
+        <LinkEditBlock
+          defaultUrl={linkAttrs.href}
+          defaultText={selectedText}
+          defaultIsNewTab={linkAttrs.target === "_blank"}
+          onSave={onSetLink}
+          className="w-full min-w-80 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none"
+        />
+      ) : (
+        <LinkPopoverBlock
+          onClear={onUnsetLink}
+          url={linkAttrs.href}
+          onEdit={handleEdit}
+        />
+      )}
+    </BubbleMenu>
+  );
+};

src/components/minimal-tiptap/components/image/image-edit-block.tsx

@@ -0,0 +1,94 @@
+import type { Editor } from "@tiptap/react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface ImageEditBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  editor: Editor;
+  close: () => void;
+}
+
+const ImageEditBlock = ({
+  editor,
+  className,
+  close,
+  ...props
+}: ImageEditBlockProps) => {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const [link, setLink] = React.useState<string>("");
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  };
+
+  const handleLink = () => {
+    editor.chain().focus().setImage({ src: link }).run();
+    close();
+  };
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) {
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e2) => {
+      const src = e2.target?.result as string;
+      editor.chain().focus().setImage({ src }).run();
+    };
+
+    reader.readAsDataURL(files[0]);
+
+    close();
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleLink();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={cn("space-y-6", className)} {...props}>
+        <div className="space-y-1">
+          <Label>Dodaj link do zdjęcia</Label>
+          <div className="flex">
+            <Input
+              type="url"
+              required={true}
+              placeholder="https://example.com"
+              value={link}
+              className="grow"
+              onChange={(e) => {
+                setLink(e.target.value);
+              }}
+            />
+            <Button type="submit" className="ml-2 inline-block">
+              Dodaj
+            </Button>
+          </div>
+        </div>
+        <Button className="w-full" onClick={handleClick}>
+          Wrzuć z dysku
+        </Button>
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInputRef}
+          multiple={true}
+          className="hidden"
+          onChange={handleFile}
+        />
+      </div>
+    </form>
+  );
+};
+
+export { ImageEditBlock };