@drawnagency/primitives 0.1.56 → 0.1.57

package/src/components/sections/SplitContent/SplitContent.tsx

@@ -1,84 +0,0 @@
-import { cn } from "../../../lib/cn";
-import { sanitizeHtml } from "../../../lib/sanitize";
-import { ResolvedMedia } from "../../primitives/ResolvedMedia";
-import { EditableRichText } from "../../primitives/EditableRichText";
-import { IconButton } from "../../shared/IconButton";
-import { ImageDropZone } from "../../primitives/ImageDropZone";
-import type { SectionContent } from "../../../schemas/sections";
-import { useMediaLibrary } from "../../shell/MediaLibraryContext";
-import { ImageIcon } from "lucide-react";
-
-interface Props {
-  imageId: string | undefined;
-  src?: string;
-  srcset?: string;
-  alt?: string;
-  body: string;
-  border?: boolean;
-  imagePosition?: "left" | "right";
-  onChange?: (content: SectionContent) => void;
-}
-
-export default function SplitContent({ imageId, src, srcset, alt, body, border, imagePosition = "left", onChange }: Props) {
-  const mediaLibrary = useMediaLibrary();
-
-  const handleImageChange = (newImageId: string) => {
-    onChange?.({
-      type: "split_content",
-      content: { imageId: newImageId, body },
-      options: { border, imagePosition },
-    });
-  };
-
-  const handleBodyChange = (html: string) => {
-    onChange?.({
-      type: "split_content",
-      content: { imageId, body: html, src, srcset, alt },
-      options: { border, imagePosition },
-    });
-  };
-
-  const handleImageClick = () => {
-    mediaLibrary?.openSelectModal(handleImageChange);
-  };
-
-  return (
-    <div className={cn(
-      "flex flex-col gap-6 lg:flex-row lg:items-start",
-      imagePosition === "right" && "lg:flex-row-reverse",
-    )}>
-      <div className={cn("group/img relative flex-shrink-0 lg:w-1/2", border && "overflow-hidden rounded-md border border-base-200")}>
-        {onChange && mediaLibrary ? (
-          <ImageDropZone onImageSelected={handleImageChange}>
-            <ResolvedMedia imageId={imageId} src={src} srcset={srcset} alt={alt} className="w-full" />
-          </ImageDropZone>
-        ) : (
-          <ResolvedMedia imageId={imageId} src={src} srcset={srcset} alt={alt} className="w-full" />
-        )}
-        {onChange && mediaLibrary && (
-          <div className="absolute top-1.5 right-1.5 z-10 opacity-0 transition-opacity group-hover/img:opacity-100">
-            <IconButton
-              icon={<ImageIcon size={16} />}
-              label="Change image"
-              onClick={handleImageClick}
-              className="bg-base/80 shadow-sm"
-            />
-          </div>
-        )}
-      </div>
-      <div className="prose-content lg:w-1/2">
-        {onChange ? (
-          <EditableRichText
-            value={body}
-            onChange={handleBodyChange}
-            isEditMode={true}
-            preset="rich"
-          />
-        ) : (
-          // eslint-disable-next-line react/no-danger
-          <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }} />
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/sections/SplitContent/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAiBA,wBAkBG"}

package/src/components/sections/SplitContent/index.tsx

@@ -1,55 +0,0 @@
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { Columns2 } from "lucide-react";
-import SplitContent from "./SplitContent";
-import { stripHtmlToPlainText, truncate } from "../../../lib/text";
-
-const schema = z.object({
-  type: z.literal("split_content"),
-  content: z.object({
-    imageId: z.string().optional(),
-    body: z.string(),
-  }),
-  options: z.object({
-    border: z.boolean().optional(),
-    imagePosition: z.enum(["left", "right"]).optional(),
-  }).optional(),
-});
-
-export default defineSection({
-  type: "split_content",
-  label: "Split Content",
-  icon: <Columns2 size={18} />,
-  schema,
-  component: ({ content, options, onChange }) => (
-    <SplitContent
-      imageId={content.content.imageId as string | undefined}
-      src={(content.content as Record<string, unknown>).src as string | undefined}
-      srcset={(content.content as Record<string, unknown>).srcset as string | undefined}
-      alt={(content.content as Record<string, unknown>).alt as string | undefined}
-      body={content.content.body as string}
-      border={options?.border as boolean}
-      imagePosition={options?.imagePosition as "left" | "right"}
-      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
-    />
-  ),
-  defaults: () => ({
-    type: "split_content" as const,
-    content: { imageId: undefined, body: "<p></p>" },
-  }),
-  settings: {
-    imagePosition: {
-      type: "select",
-      label: "Image Position",
-      default: "left",
-      options: [
-        { label: "Left", value: "left" },
-        { label: "Right", value: "right" },
-      ],
-    },
-    border: { type: "checkbox", label: "Show border", default: false },
-  },
-  getLabel: (content) => truncate(stripHtmlToPlainText(content.content.body), 60),
-  getThumbnails: (content) =>
-    content.content.imageId ? [{ type: "image" as const, src: content.content.imageId }] : [],
-});