@madebywild/sanity-richtext-field 0.0.1

package/README.md

@@ -0,0 +1 @@
+# @madebywild/sanity-richtext-field

package/dist/blocks/index.d.ts

@@ -0,0 +1,11 @@
+export declare const blocks: ({
+    type: "object";
+    name?: "wild.richtext.blocks.mediaBlock" | undefined;
+} & Omit<import("sanity").ArrayOfEntry<import("sanity").ObjectDefinition>, "preview"> & {
+    preview?: import("sanity").PreviewConfig<{
+        type: string;
+        image: string;
+        playbackId: string;
+        thumbTime: string;
+    }, Record<"image" | "type" | "playbackId" | "thumbTime", any>> | undefined;
+} & import("sanity").WidenValidation & import("sanity").WidenInitialValue)[];

package/dist/blocks/index.js

@@ -0,0 +1,5 @@
+import { mediaBlock } from "./media-block";
+export const blocks = [
+    mediaBlock,
+    // Add block
+];

package/dist/blocks/media-block.d.ts

@@ -0,0 +1,11 @@
+export declare const mediaBlock: {
+    type: "object";
+    name?: "wild.richtext.blocks.mediaBlock" | undefined;
+} & Omit<import("sanity").ArrayOfEntry<import("sanity").ObjectDefinition>, "preview"> & {
+    preview?: import("sanity").PreviewConfig<{
+        type: string;
+        image: string;
+        playbackId: string;
+        thumbTime: string;
+    }, Record<"image" | "type" | "playbackId" | "thumbTime", any>> | undefined;
+} & import("sanity").WidenValidation & import("sanity").WidenInitialValue;

package/dist/blocks/media-block.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { buildMediaPreview } from "@madebywild/sanity-media-field";
+import { defineArrayMember, defineField } from "sanity";
+export const mediaBlock = defineArrayMember({
+    name: "wild.richtext.blocks.mediaBlock",
+    type: "object",
+    title: "Media Block",
+    description: "Embed block video or image content.",
+    icon: () => _jsx(_Fragment, { children: "\uD83D\uDDBC\uFE0F" }),
+    fields: [
+        defineField({
+            title: "Wrap",
+            name: "wrapping",
+            type: "wild.wrapping",
+        }),
+        defineField({
+            name: "appMedia",
+            type: "wild.media",
+            options: {
+                withCustomRatio: true,
+                withCustomOptions: true,
+            },
+        }),
+        defineField({
+            name: "caption",
+            type: "text",
+            rows: 2,
+            description: "Add a caption for the media.",
+        }),
+    ],
+    preview: {
+        select: {
+            type: "appMedia.type",
+            image: "appMedia.image",
+            playbackId: "appMedia.video.asset.playbackId",
+            thumbTime: "appMedia.video.asset.thumbTime",
+        },
+        prepare: (props) => {
+            return buildMediaPreview(props);
+        },
+    },
+});

package/dist/fields.d.ts

@@ -0,0 +1,34 @@
+export declare const linkField: {
+    type: "wild.link";
+    name: "linkField";
+} & import("sanity").TypeAliasDefinition<"wild.link", "string" | "number" | "boolean" | "object" | "wild.media" | "wild.richtext.basic" | "wild.richtext.extended" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "globalDocumentReference" | "slug" | "text" | "url" | "email" | undefined> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+} & import("sanity").FieldDefinitionBase & import("sanity").WidenValidation & import("sanity").WidenInitialValue;
+export declare const textColorField: {
+    type: "object";
+    name: "textColorField";
+} & Omit<import("sanity").ObjectDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+} & import("sanity").FieldDefinitionBase & import("sanity").WidenValidation & import("sanity").WidenInitialValue;
+export declare const highlightColorField: {
+    type: "object";
+    name: "highlightColorField";
+} & Omit<import("sanity").ObjectDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+} & import("sanity").FieldDefinitionBase & import("sanity").WidenValidation & import("sanity").WidenInitialValue;
+export declare const appIconField: {
+    type: "object";
+    name?: "appIconField" | undefined;
+} & Omit<import("sanity").ArrayOfEntry<import("sanity").ObjectDefinition>, "preview"> & {
+    preview?: import("sanity").PreviewConfig<{
+        icon: string;
+    }, Record<"icon", any>> | undefined;
+} & import("sanity").WidenValidation & import("sanity").WidenInitialValue;
+export declare const inlineMediaField: {
+    type: "object";
+    name?: "inlineMediaField" | undefined;
+} & Omit<import("sanity").ArrayOfEntry<import("sanity").ObjectDefinition>, "preview"> & {
+    preview?: import("sanity").PreviewConfig<{
+        type: string;
+    }, Record<"type", any>> | undefined;
+} & import("sanity").WidenValidation & import("sanity").WidenInitialValue;

package/dist/fields.js

@@ -0,0 +1,112 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { LinkIcon } from "@sanity/icons";
+import * as React from "react";
+import { defineArrayMember, defineField } from "sanity";
+import styled from "styled-components";
+export const linkField = defineField({
+    type: "wild.link",
+    name: "linkField",
+    title: "Link",
+    icon: LinkIcon,
+    options: {
+        noCustomText: true,
+        collapsed: false,
+        collapsible: false,
+    },
+});
+const ColorText = styled.span `
+  & > span {
+    background-color: inherit;
+    border-bottom: unset;
+    color: ${({ color = "inherit" }) => color};
+  }
+`;
+export const textColorField = defineField({
+    type: "object",
+    name: "textColorField",
+    title: "Text Color",
+    icon: () => _jsx(_Fragment, { children: "\uD83D\uDD8B" }),
+    fields: [defineField({ name: "color", type: "wild.color" })],
+    components: {
+        annotation: (props) => {
+            const color = props.value?.color;
+            return _jsx(ColorText, { color: color, children: props.renderDefault(props) });
+        },
+    },
+});
+const ColorBg = styled.span `
+  & > span {
+    background-color: ${({ color = "inherit" }) => color};
+    border-bottom: unset;
+    color: inherit;
+  }
+`;
+export const highlightColorField = defineField({
+    type: "object",
+    name: "highlightColorField",
+    title: "Highlight Color",
+    icon: () => _jsx(_Fragment, { children: "\uD83D\uDD8D" }),
+    fields: [defineField({ name: "color", type: "wild.color" })],
+    components: {
+        annotation: (props) => {
+            const color = props.value?.color;
+            return _jsx(ColorBg, { color: color, children: props.renderDefault(props) });
+        },
+    },
+});
+export const appIconField = defineArrayMember({
+    name: "appIconField",
+    type: "object",
+    title: "Icon",
+    description: "Insert an icon.",
+    icon: () => _jsx(_Fragment, { children: "\uD83E\uDDFF" }),
+    fields: [defineField({ name: "icon", type: "wild.icon" })],
+    components: {
+        // This is the inline-preview in the PortableText editor.
+        // It gets its props from the prepare function below.
+        preview: (props) => {
+            return React.isValidElement(props.media) ? props.media : props.fallbackTitle;
+        },
+    },
+    preview: {
+        select: {
+            icon: "icon",
+        },
+        prepare({ icon }) {
+            return {
+                media: (_jsx("span", { role: "img", className: "inline-block size-[1em] shrink-0 text-current", title: icon ?? "Icon", children: "\uD83E\uDDFF" })),
+            };
+        },
+    },
+});
+export const inlineMediaField = defineArrayMember({
+    name: "inlineMediaField",
+    type: "object",
+    title: "Inline Media",
+    description: "Embed inline video or image content.",
+    icon: () => _jsx(_Fragment, { children: "\uD83E\uDEE7" }),
+    fields: [
+        defineField({
+            name: "media",
+            type: "wild.media",
+        }),
+    ],
+    components: {
+        // This is the inline-preview in the PortableText editor.
+        preview: (props) => {
+            const icons = {
+                video: _jsx(_Fragment, { children: "\uD83C\uDFA5" }),
+                image: _jsx(_Fragment, { children: "\uD83D\uDDBC\uFE0F" }),
+                lottie: _jsx(_Fragment, { children: "\uD83C\uDF00" }),
+                rive: _jsx(_Fragment, { children: "\uD83C\uDF6D" }),
+            };
+            // @ts-expect-error: It gets its props from the prepare function below.
+            return icons[props.type] || _jsx(_Fragment, { children: "\uD83D\uDDBC\uFE0F" });
+        },
+    },
+    preview: {
+        select: {
+            type: "media.type",
+        },
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { type PluginConfig, typeNameBasic, typeNameExtended } from "./types";
+declare const wildSanityRichtextFieldPlugin: import("sanity").Plugin<void | PluginConfig>;
+export { wildSanityRichtextFieldPlugin, type PluginConfig, typeNameBasic, typeNameExtended };

package/dist/index.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineArrayMember, definePlugin, defineType } from "sanity";
+import { blocks } from "./blocks";
+import { appIconField, highlightColorField, inlineMediaField, linkField, textColorField } from "./fields";
+import { typeNameBasic, typeNameExtended } from "./types";
+function StudioLayout(props) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { 
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: we control the source.
+                dangerouslySetInnerHTML: {
+                    __html: `
+          fieldset [data-testid="pt-editor"][data-fullscreen="false"] {
+            height: var(--pt-editor-height, initial);
+          }
+        `,
+                } }), props.renderDefault(props)] }));
+}
+// biome-ignore lint/suspicious/noConfusingVoidType: it can be void.
+const wildSanityRichtextFieldPlugin = definePlugin((config) => {
+    const userBlocks = config?.blocks ?? [];
+    const userSpans = config?.spans ?? [];
+    const userDecorators = config?.decorators ?? [];
+    const userAnnotations = config?.annotations ?? [];
+    const userLists = config?.lists ?? [];
+    const userStyles = config?.styles ?? [];
+    return {
+        name: "@madebywild/sanity-richtext-field",
+        studio: {
+            components: {
+                layout: StudioLayout,
+            },
+        },
+        schema: {
+            types: [
+                defineType({
+                    name: typeNameBasic,
+                    type: "array",
+                    title: "Rich Text",
+                    description: "Rich text content with formatting options.",
+                    icon: () => _jsx(_Fragment, { children: "\u2328\uFE0F" }),
+                    components: {
+                        // biome-ignore lint/suspicious/noExplicitAny: Sanity doesn't provide these types.
+                        field: (props) => {
+                            return (
+                            // The CSS variable is used the set the min-height of the Portable Text editor.
+                            _jsx("div", { style: { "--pt-editor-height": "10rem" }, children: props.renderDefault({ ...props, initialActive: true }) }));
+                        },
+                    },
+                    of: [
+                        defineArrayMember({
+                            type: "block",
+                            options: {
+                                spellCheck: false,
+                                unstable_whitespaceOnPasteMode: "normalize",
+                            },
+                            of: [appIconField, inlineMediaField],
+                            styles: [],
+                            lists: [],
+                            marks: {
+                                annotations: [linkField],
+                                decorators: [
+                                    { title: "Strong", value: "strong" },
+                                    { title: "Emphasis", value: "em" },
+                                ],
+                            },
+                        }),
+                    ],
+                }),
+                defineType({
+                    name: typeNameExtended,
+                    type: "array",
+                    title: "Rich Text",
+                    description: "Rich text content with formatting options.",
+                    icon: () => _jsx(_Fragment, { children: "\u2328\uFE0F" }),
+                    components: {
+                        // biome-ignore lint/suspicious/noExplicitAny: Sanity doesn't provide these types.
+                        field: (props) => {
+                            return (
+                            // The CSS variable is used the set the min-height of the Portable Text editor.
+                            _jsx("div", { style: { "--pt-editor-height": "50vh" }, children: props.renderDefault({ ...props, initialActive: true }) }));
+                        },
+                    },
+                    of: [
+                        ...userBlocks,
+                        ...blocks,
+                        defineArrayMember({
+                            type: "block",
+                            options: {
+                                spellCheck: config?.spellCheck ?? true,
+                                unstable_whitespaceOnPasteMode: "normalize",
+                            },
+                            of: [...userSpans, appIconField, inlineMediaField],
+                            styles: [
+                                ...userStyles,
+                                { title: "Normal", value: "normal" },
+                                { title: "Heading 2", value: "h2" },
+                                { title: "Heading 3", value: "h3" },
+                                { title: "Heading 4", value: "h4" },
+                            ],
+                            lists: [...userLists, { title: "Bullet", value: "bullet" }, { title: "Number", value: "number" }],
+                            marks: {
+                                annotations: [...userAnnotations, linkField, textColorField, highlightColorField],
+                                decorators: [
+                                    ...userDecorators,
+                                    { title: "Strong", value: "strong" },
+                                    { title: "Emphasis", value: "em" },
+                                    { title: "Code", value: "code" },
+                                    {
+                                        title: "Sup",
+                                        value: "sup",
+                                        icon: () => _jsx("sup", { children: "[1]" }),
+                                        component: (props) => _jsx("sup", { style: { verticalAlign: "super" }, children: props.children }),
+                                    },
+                                ],
+                            },
+                        }),
+                    ],
+                }),
+            ],
+        },
+    };
+});
+export { wildSanityRichtextFieldPlugin, typeNameBasic, typeNameExtended };

package/dist/input.d.ts

@@ -0,0 +1,6 @@
+import type { ObjectInputProps } from "sanity";
+import type { PluginConfig } from "./types";
+declare function LinkInput(props: ObjectInputProps & {
+    config: PluginConfig;
+}): import("react/jsx-runtime").JSX.Element;
+export { LinkInput };

package/dist/input.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Flex, Stack, Text } from "@sanity/ui";
+import { AsyncAutocomplete } from "@wild-sanity-kit/utils";
+import * as changeCase from "change-case";
+import * as React from "react";
+import { MemberField, set, unset, useClient } from "sanity";
+function useFieldMember(members, fieldName) {
+    return React.useMemo(() => members.find((member) => member.kind === "field" && member.name === fieldName), [members, fieldName]);
+}
+function InternalLinkInput({ config, value, onChange, }) {
+    const linkQuery = config.internalLinkQuery;
+    const queryTransformer = config.internalLinkTransformer;
+    const client = useClient({ apiVersion: "2025-10-21" });
+    const [items, setItems] = React.useState([]);
+    const selectedItem = items.find((_) => _.value === value?.link?._ref);
+    React.useEffect(() => {
+        client
+            .fetch(linkQuery)
+            .then(queryTransformer)
+            .then((items) => items.sort((a, b) => a.label.localeCompare(b.label)))
+            .then(setItems);
+    }, [client, linkQuery, queryTransformer]);
+    return (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(AsyncAutocomplete, { placeholder: "Select page", defaultValue: value?.link?._ref, listItems: items, onChange: (value) => {
+                    const next = value ? set({ _ref: value, _type: "reference" }, ["link"]) : unset(["link"]);
+                    return onChange(next);
+                }, renderValue: (value, opt) => {
+                    return opt?.label ? changeCase.capitalCase(opt.label) : value;
+                }, renderOption: ({ label, uri }) => {
+                    return (_jsx(Card, { as: "button", children: _jsxs(Flex, { flex: 1, padding: 3, gap: 2, direction: "column", children: [_jsx(Text, { size: 2, children: changeCase.capitalCase(label) }), _jsx(Text, { size: 0, muted: true, children: uri })] }) }));
+                } }), selectedItem?.sections?.length ? (_jsx(AsyncAutocomplete, { placeholder: "Select section", defaultValue: value?.sectionTarget, listItems: selectedItem?.sections, onChange: (value) => {
+                    const next = value ? set(value, ["sectionTarget"]) : unset(["sectionTarget"]);
+                    return onChange(next);
+                }, renderValue: (value, opt) => {
+                    return opt?.label ? changeCase.capitalCase(opt.label) : value;
+                }, renderOption: ({ label }) => {
+                    return (_jsx(Card, { as: "button", children: _jsx(Box, { flex: 1, padding: 3, children: _jsx(Text, { size: 2, children: changeCase.capitalCase(label) }) }) }));
+                } })) : null] }));
+}
+function LinkInput(props) {
+    const options = props.schemaType.options;
+    const typeFieldMember = useFieldMember(props.members, "type");
+    const externalFieldMember = useFieldMember(props.members, "external");
+    const emailFieldMember = useFieldMember(props.members, "email");
+    const phoneFieldMember = useFieldMember(props.members, "phone");
+    const fileFieldMember = useFieldMember(props.members, "file");
+    const canDownloadFieldMember = useFieldMember(props.members, "canDownload");
+    const internalFieldMember = useFieldMember(props.members, "internal");
+    const customTextFieldMember = useFieldMember(props.members, "customText");
+    const openInNewTabFieldMember = useFieldMember(props.members, "openInNewTab");
+    return (_jsxs(Stack, { space: 4, children: [typeFieldMember && _jsx(MemberField, { member: typeFieldMember, ...props }), externalFieldMember && _jsx(MemberField, { member: externalFieldMember, ...props }), emailFieldMember && _jsx(MemberField, { member: emailFieldMember, ...props }), phoneFieldMember && _jsx(MemberField, { member: phoneFieldMember, ...props }), fileFieldMember && _jsx(MemberField, { member: fileFieldMember, ...props }), canDownloadFieldMember && _jsx(MemberField, { member: canDownloadFieldMember, ...props }), internalFieldMember && _jsx(InternalLinkInput, { ...props }), !options?.noCustomText && customTextFieldMember && _jsx(MemberField, { member: customTextFieldMember, ...props }), openInNewTabFieldMember && _jsx(MemberField, { member: openInNewTabFieldMember, ...props })] }));
+}
+export { LinkInput };

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+import type { ArrayDefinition, ArrayOfType, BlockDecoratorDefinition, BlockListDefinition, BlockStyleDefinition } from "sanity";
+export declare const typeNameBasic: "wild.richtext.basic";
+export declare const typeNameExtended: "wild.richtext.extended";
+export type PluginConfig = {
+    spellCheck?: boolean;
+    blocks?: ArrayOfType<"object">[];
+    spans?: ArrayOfType<"object">[];
+    styles?: BlockStyleDefinition[];
+    lists?: BlockListDefinition[];
+    annotations?: ArrayOfType<"object">[];
+    decorators?: BlockDecoratorDefinition[];
+};
+declare module "sanity" {
+    interface IntrinsicDefinitions {
+        [typeNameBasic]: Omit<ArrayDefinition, "type" | "of"> & {
+            type: typeof typeNameBasic;
+        };
+        [typeNameExtended]: Omit<ArrayDefinition, "type" | "of"> & {
+            type: typeof typeNameExtended;
+        };
+    }
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+export const typeNameBasic = "wild.richtext.basic";
+export const typeNameExtended = "wild.richtext.extended";

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@madebywild/sanity-richtext-field",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clear": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@madebywild/sanity-media-field": "*",
+    "@madebywild/sanity-utils": "*"
+  },
+  "peerDependencies": {
+    "sanity": "^4.17",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "sanity": "^4.17",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5.9",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  }
+}