@madebywild/sanity-richtext-field 1.1.0 → 3.0.0

package/README.md

@@ -58,17 +58,21 @@ wildSanityRichtextFieldPlugin({
   annotations: [
     ...createAnnotations({
       textColor: {
-        renderAnnotation: (props, color) => <span style={{ color }}>{props.renderDefault(props)}</span>,
+        renderValue: (value, props) => (
+          <span style={{ color: getColor(value)?.cssVar }}>{props.renderDefault(props)}</span>
+        ),
       },
       highlightColor: {
-        renderAnnotation: (props, color) => <mark style={{ backgroundColor: color }}>{props.renderDefault(props)}</mark>,
+        renderValue: (value, props) => (
+          <mark style={{ backgroundColor: getColor(value)?.cssVar }}>{props.renderDefault(props)}</mark>
+        ),
       },
     }),
   ],
   spans: [
     ...createSpans({
       icon: {
-        renderPreview: (value) => <span>{value}</span>,
+        renderValue: (value) => <Icon name={value as IconName} />,
       },
     }),
   ],

package/dist/blocks/media-grid-block.d.cts

@@ -1,4 +1,4 @@
-import * as sanity68 from "sanity";
+import * as sanity65 from "sanity";
 import { ObjectDefinition } from "sanity";
 import { FieldOptions } from "@madebywild/sanity-media-field";
 type Options = Omit<Partial<ObjectDefinition>, "type"> & {
@@ -16,9 +16,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity68.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity68.PreviewConfig<{
+} & Omit<sanity65.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity65.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity68.WidenValidation & sanity68.WidenInitialValue;
+} & sanity65.WidenValidation & sanity65.WidenInitialValue;
 export { createBlock };

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

@@ -1,4 +1,4 @@
-import * as sanity69 from "sanity";
+import * as sanity72 from "sanity";
 import { ObjectDefinition } from "sanity";
 import { FieldOptions } from "@madebywild/sanity-media-field";
 type Options = Omit<Partial<ObjectDefinition>, "type"> & {
@@ -16,9 +16,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity69.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity69.PreviewConfig<{
+} & Omit<sanity72.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity72.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity69.WidenValidation & sanity69.WidenInitialValue;
+} & sanity72.WidenValidation & sanity72.WidenInitialValue;
 export { createBlock };

package/dist/blocks/media-only-block.d.cts

@@ -1,4 +1,4 @@
-import * as sanity60 from "sanity";
+import * as sanity73 from "sanity";
 import { ObjectDefinition } from "sanity";
 import { FieldOptions } from "@madebywild/sanity-media-field";
 type Options = Omit<Partial<ObjectDefinition>, "type"> & {
@@ -16,9 +16,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity60.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity60.PreviewConfig<{
+} & Omit<sanity73.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity73.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity60.WidenValidation & sanity60.WidenInitialValue;
+} & sanity73.WidenValidation & sanity73.WidenInitialValue;
 export { createBlock };

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

@@ -1,4 +1,4 @@
-import * as sanity65 from "sanity";
+import * as sanity60 from "sanity";
 import { ObjectDefinition } from "sanity";
 import { FieldOptions } from "@madebywild/sanity-media-field";
 type Options = Omit<Partial<ObjectDefinition>, "type"> & {
@@ -16,9 +16,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity65.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity65.PreviewConfig<{
+} & Omit<sanity60.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity60.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity65.WidenValidation & sanity65.WidenInitialValue;
+} & sanity60.WidenValidation & sanity60.WidenInitialValue;
 export { createBlock };

package/dist/blocks/media-slider-block.d.cts

@@ -1,4 +1,4 @@
-import * as sanity64 from "sanity";
+import * as sanity61 from "sanity";
 import { ObjectDefinition } from "sanity";
 import { FieldOptions } from "@madebywild/sanity-media-field";
 type Options = Omit<Partial<ObjectDefinition>, "type"> & {
@@ -16,9 +16,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity64.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity64.PreviewConfig<{
+} & Omit<sanity61.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity61.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity64.WidenValidation & sanity64.WidenInitialValue;
+} & sanity61.WidenValidation & sanity61.WidenInitialValue;
 export { createBlock };

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

@@ -1,4 +1,4 @@
-import * as sanity73 from "sanity";
+import * as sanity64 from "sanity";
 import { ObjectDefinition } from "sanity";
 import { FieldOptions } from "@madebywild/sanity-media-field";
 type Options = Omit<Partial<ObjectDefinition>, "type"> & {
@@ -16,9 +16,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity73.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity73.PreviewConfig<{
+} & Omit<sanity64.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity64.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity73.WidenValidation & sanity73.WidenInitialValue;
+} & sanity64.WidenValidation & sanity64.WidenInitialValue;
 export { createBlock };

package/dist/blocks/quote-block.d.cts

@@ -1,4 +1,4 @@
-import * as sanity73 from "sanity";
+import * as sanity69 from "sanity";
 import { ObjectDefinition } from "sanity";
 type Options = Omit<Partial<ObjectDefinition>, "type">;
 /** @public */
@@ -9,9 +9,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity73.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity73.PreviewConfig<{
+} & Omit<sanity69.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity69.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity73.WidenValidation & sanity73.WidenInitialValue;
+} & sanity69.WidenValidation & sanity69.WidenInitialValue;
 export { createBlock };

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

@@ -1,4 +1,4 @@
-import * as sanity61 from "sanity";
+import * as sanity68 from "sanity";
 import { ObjectDefinition } from "sanity";
 type Options = Omit<Partial<ObjectDefinition>, "type">;
 /** @public */
@@ -9,9 +9,9 @@ declare function createBlock({
 }?: Options): {
   type: "object";
   name?: string | undefined;
-} & Omit<sanity61.ArrayOfEntry<ObjectDefinition>, "preview"> & {
-  preview?: sanity61.PreviewConfig<{
+} & Omit<sanity68.ArrayOfEntry<ObjectDefinition>, "preview"> & {
+  preview?: sanity68.PreviewConfig<{
     [x: string]: string;
   }, Record<string, string>> | undefined;
-} & sanity61.WidenValidation & sanity61.WidenInitialValue;
+} & sanity68.WidenValidation & sanity68.WidenInitialValue;
 export { createBlock };

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as sanity72 from "sanity";
+import * as sanity60 from "sanity";
 import { ArrayDefinition, ArrayOfType, ArrayOptions, BlockDecoratorDefinition, BlockListDefinition, BlockStyleDefinition } from "sanity";
 /** @public */
 declare const typeName: "wild.richtext";
@@ -86,5 +86,5 @@ declare module "sanity" {
   }
 }
 /** @public */
-declare const wildSanityRichtextFieldPlugin: sanity72.Plugin<PluginConfig>;
+declare const wildSanityRichtextFieldPlugin: sanity60.Plugin<PluginConfig>;
 export { type FieldOptions, type PluginConfig, typeName, wildSanityRichtextFieldPlugin };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as sanity60 from "sanity";
+import * as sanity76 from "sanity";
 import { ArrayDefinition, ArrayOfType, ArrayOptions, BlockDecoratorDefinition, BlockListDefinition, BlockStyleDefinition } from "sanity";
 /** @public */
 declare const typeName: "wild.richtext";
@@ -86,5 +86,5 @@ declare module "sanity" {
   }
 }
 /** @public */
-declare const wildSanityRichtextFieldPlugin: sanity60.Plugin<PluginConfig>;
+declare const wildSanityRichtextFieldPlugin: sanity76.Plugin<PluginConfig>;
 export { type FieldOptions, type PluginConfig, typeName, wildSanityRichtextFieldPlugin };

package/dist/parts.cjs

@@ -22,17 +22,12 @@ const ColorText = styledComponents.styled.span`
     background-color: inherit;
     border-bottom: unset;
     color: ${({
-  color = "inherit"
-}) => color};
+  $color = "inherit"
+}) => $color};
   }
 `;
-function defaultResolveColor(value) {
-  if (typeof value == "string") return value;
-  if (value && typeof value == "object" && "value" in value && typeof value.value == "string")
-    return value.value;
-}
 function createTextColorAnnotation(options) {
-  const resolveColor = options?.resolveColor ?? defaultResolveColor, renderAnnotation = options?.renderAnnotation;
+  const renderValue = options?.renderValue;
   return sanity.defineField({
     type: "object",
     name: `${types.typeName}.annotation.textColor`,
@@ -44,8 +39,10 @@ function createTextColorAnnotation(options) {
     })],
     components: {
       annotation: (props) => {
-        const color = resolveColor(props.value?.color);
-        return renderAnnotation ? renderAnnotation(props, color) : /* @__PURE__ */ jsxRuntime.jsx(ColorText, { color, children: props.renderDefault(props) });
+        const value = props.value?.color;
+        if (renderValue) return renderValue(value, props);
+        const resolvedValue = value;
+        return /* @__PURE__ */ jsxRuntime.jsx(ColorText, { $color: resolvedValue, children: props.renderDefault(props) });
       }
     }
   });
@@ -53,14 +50,14 @@ function createTextColorAnnotation(options) {
 const ColorBg = styledComponents.styled.span`
   & > span {
     background-color: ${({
-  color = "inherit"
-}) => color};
+  $color = "inherit"
+}) => $color};
     border-bottom: unset;
     color: inherit;
   }
 `;
 function createHighlightColorAnnotation(options) {
-  const resolveColor = options?.resolveColor ?? defaultResolveColor, renderAnnotation = options?.renderAnnotation;
+  const renderValue = options?.renderValue;
   return sanity.defineField({
     type: "object",
     name: `${types.typeName}.annotation.highlightColor`,
@@ -72,8 +69,10 @@ function createHighlightColorAnnotation(options) {
     })],
     components: {
       annotation: (props) => {
-        const color = resolveColor(props.value?.color);
-        return renderAnnotation ? renderAnnotation(props, color) : /* @__PURE__ */ jsxRuntime.jsx(ColorBg, { color, children: props.renderDefault(props) });
+        const value = props.value?.color;
+        if (renderValue) return renderValue(value, props);
+        const resolvedValue = value;
+        return /* @__PURE__ */ jsxRuntime.jsx(ColorBg, { $color: resolvedValue, children: props.renderDefault(props) });
       }
     }
   });
@@ -138,10 +137,10 @@ function createLists() {
   return [bullet, number];
 }
 function defaultRenderIconPreview(value) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { role: "img", className: "inline-block size-[1em] shrink-0 text-current", title: value ?? "Icon", children: "\u{1F9FF}" });
+  return React__namespace.isValidElement(value) ? value : /* @__PURE__ */ jsxRuntime.jsx("span", { role: "img", className: "inline-block size-[1em] shrink-0 text-current", title: typeof value == "string" ? value : "Icon", children: "\u{1F9FF}" });
 }
 function createIconSpan(options) {
-  const renderPreview = options?.renderPreview ?? defaultRenderIconPreview;
+  const renderValue = options?.renderValue;
   return sanity.defineArrayMember({
     name: `${types.typeName}.span.icon`,
     type: "object",
@@ -165,7 +164,7 @@ function createIconSpan(options) {
         icon
       }) {
         return {
-          media: renderPreview(icon)
+          media: renderValue?.(icon) ?? defaultRenderIconPreview(icon)
         };
       }
     }

package/dist/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"parts.cjs","sources":["../src/parts/annotations/color.tsx","../src/parts/annotations/link.tsx","../src/parts/annotations/index.tsx","../src/parts/decorators/index.tsx","../src/parts/lists/index.tsx","../src/parts/spans/icon.tsx","../src/parts/spans/media.tsx","../src/parts/spans/index.tsx","../src/parts/styles/index.tsx"],"sourcesContent":["import { ColorWheelIcon, HighlightIcon } from \"@sanity/icons\";\nimport { type BlockAnnotationProps, defineField } from \"sanity\";\nimport { styled } from \"styled-components\";\nimport { typeName } from \"../../types\";\n\ntype ColorAnnotationOptions = {\n  resolveColor?: (value: unknown) => string | undefined;\n  renderAnnotation?: (props: BlockAnnotationProps, color?: string) => React.JSX.Element;\n};\n\nconst ColorText = styled.span<{ color?: string }>`\n  & > span {\n    background-color: inherit;\n    border-bottom: unset;\n    color: ${({ color = \"inherit\" }) => color};\n  }\n`;\n\nfunction defaultResolveColor(value: unknown) {\n  if (typeof value === \"string\") return value;\n  if (value && typeof value === \"object\" && \"value\" in value && typeof value.value === \"string\") {\n    return value.value;\n  }\n  return undefined;\n}\n\nfunction createTextColorAnnotation(options?: ColorAnnotationOptions) {\n  const resolveColor = options?.resolveColor ?? defaultResolveColor;\n  const renderAnnotation = options?.renderAnnotation;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.textColor`,\n    title: \"Text Color\",\n    icon: ColorWheelIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const color = resolveColor(props.value?.color);\n        if (renderAnnotation) return renderAnnotation(props, color);\n        return <ColorText color={color}>{props.renderDefault(props)}</ColorText>;\n      },\n    },\n  });\n}\n\nconst ColorBg = styled.span<{ color?: string }>`\n  & > span {\n    background-color: ${({ color = \"inherit\" }) => color};\n    border-bottom: unset;\n    color: inherit;\n  }\n`;\n\nfunction createHighlightColorAnnotation(options?: ColorAnnotationOptions) {\n  const resolveColor = options?.resolveColor ?? defaultResolveColor;\n  const renderAnnotation = options?.renderAnnotation;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.highlightColor`,\n    title: \"Highlight Color\",\n    icon: HighlightIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const color = resolveColor(props.value?.color);\n        if (renderAnnotation) return renderAnnotation(props, color);\n        return <ColorBg color={color}>{props.renderDefault(props)}</ColorBg>;\n      },\n    },\n  });\n}\n\nexport { createTextColorAnnotation, createHighlightColorAnnotation, type ColorAnnotationOptions };\n","import { LinkIcon } from \"@sanity/icons\";\nimport { defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const link = defineField({\n  type: \"wild.link\",\n  name: `${typeName}.annotation.link`,\n  title: \"Link\",\n  icon: LinkIcon,\n  options: {\n    collapsed: false,\n    collapsible: false,\n  },\n});\n","import { type ColorAnnotationOptions, createHighlightColorAnnotation, createTextColorAnnotation } from \"./color\";\nimport { link } from \"./link\";\n\n/** @public */\nfunction createAnnotations(options?: { textColor?: ColorAnnotationOptions; highlightColor?: ColorAnnotationOptions }) {\n  return [link, createTextColorAnnotation(options?.textColor), createHighlightColorAnnotation(options?.highlightColor)] as const;\n}\n\nexport { createAnnotations };\n","import { BoldIcon, CodeIcon, ItalicIcon } from \"@sanity/icons\";\nimport type { BlockDecoratorDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst strong = {\n  title: \"Strong\",\n  value: `${typeName}.decorator.strong`,\n  icon: BoldIcon,\n  component: ({ children }) => <strong>{children}</strong>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst em = {\n  title: \"Emphasis\",\n  value: `${typeName}.decorator.em`,\n  icon: ItalicIcon,\n  component: ({ children }) => <em>{children}</em>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst code = {\n  title: \"Code\",\n  value: `${typeName}.decorator.code`,\n  icon: CodeIcon,\n  component: ({ children }) => <code>{children}</code>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst sup = {\n  title: \"Sup\",\n  value: `${typeName}.decorator.sup`,\n  icon: () => <sup>[1]</sup>,\n  component: ({ children }) => <sup style={{ verticalAlign: \"super\" }}>{children}</sup>,\n} as const satisfies BlockDecoratorDefinition;\n\n/** @public */\nfunction createDecorators() {\n  return [strong, em, code, sup] as const;\n}\n\nexport { createDecorators };\n","import { OlistIcon, UlistIcon } from \"@sanity/icons\";\nimport type { BlockListDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst bullet = {\n  title: \"Bullet\",\n  value: `${typeName}.list.bullet`,\n  icon: UlistIcon,\n} as const satisfies BlockListDefinition;\n\nconst number = {\n  title: \"Number\",\n  value: `${typeName}.list.number`,\n  icon: OlistIcon,\n} as const satisfies BlockListDefinition;\n\n/** @public */\nfunction createLists() {\n  return [bullet, number] as const;\n}\n\nexport { createLists };\n","import * as React from \"react\";\nimport { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\ntype IconSpanOptions = {\n  renderPreview?: (value?: string) => React.ReactNode;\n};\n\nfunction defaultRenderIconPreview(value?: string) {\n  return (\n    <span role=\"img\" className=\"inline-block size-[1em] shrink-0 text-current\" title={value ?? \"Icon\"}>\n      🧿\n    </span>\n  );\n}\n\nfunction createIconSpan(options?: IconSpanOptions) {\n  const renderPreview = options?.renderPreview ?? defaultRenderIconPreview;\n\n  return defineArrayMember({\n    name: `${typeName}.span.icon`,\n    type: \"object\",\n    title: \"Icon\",\n    description: \"Insert an icon.\",\n    icon: () => <>🧿</>,\n    fields: [defineField({ name: \"icon\", type: \"wild.icon\" })],\n    components: {\n      // This is the inline-preview in the PortableText editor.\n      // It gets its props from the prepare function below.\n      preview: (props) => {\n        return React.isValidElement(props.media) ? props.media : props.fallbackTitle;\n      },\n    },\n    preview: {\n      select: {\n        icon: \"icon\",\n      },\n      prepare({ icon }) {\n        return {\n          media: renderPreview(icon),\n        };\n      },\n    },\n  });\n}\n\nexport { createIconSpan, type IconSpanOptions };\n","import { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const media = defineArrayMember({\n  name: `${typeName}.span.media`,\n  type: \"object\",\n  title: \"Inline Media\",\n  description: \"Embed inline video or image content.\",\n  icon: () => <>🫧</>,\n  fields: [\n    defineField({\n      name: \"media\",\n      type: \"wild.media\",\n      options: {\n        inline: true,\n      },\n    }),\n  ],\n  components: {\n    // This is the inline-preview in the PortableText editor.\n    preview: (props) => {\n      const icons = {\n        video: <>🎥</>,\n        image: <>🖼️</>,\n        motion: <>🌀</>,\n      };\n\n      // @ts-expect-error: It gets its props from the prepare function below.\n      return icons[props.kind as keyof typeof icons] || <>🖼️</>;\n    },\n  },\n  preview: {\n    select: {\n      kind: \"media.kind\",\n    },\n  },\n});\n","import { createIconSpan, type IconSpanOptions } from \"./icon\";\nimport { media } from \"./media\";\n\n/** @public */\nfunction createSpans(options?: { icon?: IconSpanOptions }) {\n  return [createIconSpan(options?.icon), media] as const;\n}\n\nexport { createSpans };\n","import type { BlockStyleDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst h2 = {\n  title: \"Heading 2\",\n  value: `${typeName}.style.h2`,\n  component: ({ children }) => (\n    <h2\n      style={{\n        fontSize: \"2.0625rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(41 / 33)\",\n      }}\n    >\n      {children}\n    </h2>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h3 = {\n  title: \"Heading 3\",\n  value: `${typeName}.style.h3`,\n  component: ({ children }) => (\n    <h3\n      style={{\n        fontSize: \"1.6875rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(35 / 27)\",\n      }}\n    >\n      {children}\n    </h3>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h4 = {\n  title: \"Heading 4\",\n  value: `${typeName}.style.h4`,\n  component: ({ children }) => (\n    <h4\n      style={{\n        fontSize: \"1.3125rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(29 / 21)\",\n      }}\n    >\n      {children}\n    </h4>\n  ),\n} as const satisfies BlockStyleDefinition;\n\n/** @public */\nfunction createStyles() {\n  return [h2, h3, h4] as const;\n}\n\nexport { createStyles };\n"],"names":["ColorText","styled","span","color","defaultResolveColor","value","createTextColorAnnotation","options","resolveColor","renderAnnotation","defineField","type","name","typeName","title","icon","ColorWheelIcon","fields","components","annotation","props","jsx","renderDefault","ColorBg","createHighlightColorAnnotation","HighlightIcon","link","LinkIcon","collapsed","collapsible","createAnnotations","textColor","highlightColor","strong","BoldIcon","component","children","em","ItalicIcon","code","CodeIcon","sup","verticalAlign","createDecorators","bullet","UlistIcon","number","OlistIcon","createLists","defaultRenderIconPreview","createIconSpan","renderPreview","defineArrayMember","description","Fragment","preview","React","isValidElement","media","fallbackTitle","select","prepare","inline","video","image","motion","kind","createSpans","h2","fontSize","fontWeight","lineHeight","h3","h4","createStyles"],"mappings":"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"}
+{"version":3,"file":"parts.cjs","sources":["../src/parts/annotations/color.tsx","../src/parts/annotations/link.tsx","../src/parts/annotations/index.tsx","../src/parts/decorators/index.tsx","../src/parts/lists/index.tsx","../src/parts/spans/icon.tsx","../src/parts/spans/media.tsx","../src/parts/spans/index.tsx","../src/parts/styles/index.tsx"],"sourcesContent":["import { ColorWheelIcon, HighlightIcon } from \"@sanity/icons\";\nimport { defineField } from \"sanity\";\nimport { styled } from \"styled-components\";\nimport { typeName } from \"../../types\";\n\ntype ColorAnnotationOptions = {\n  renderValue?: (value: string | undefined, props: BlockAnnotationProps) => React.ReactNode;\n};\n\nconst ColorText = styled.span<{ $color?: string }>`\n  & > span {\n    background-color: inherit;\n    border-bottom: unset;\n    color: ${({ $color = \"inherit\" }) => $color};\n  }\n`;\n\nfunction defaultResolveColor(value: string | undefined) {\n  return value;\n}\n\nfunction createTextColorAnnotation(options?: ColorAnnotationOptions) {\n  const renderValue = options?.renderValue;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.textColor`,\n    title: \"Text Color\",\n    icon: ColorWheelIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const value = props.value?.color;\n        if (renderValue) return renderValue(value, props);\n        const resolvedValue = defaultResolveColor(value);\n        return <ColorText $color={resolvedValue}>{props.renderDefault(props)}</ColorText>;\n      },\n    },\n  });\n}\n\nconst ColorBg = styled.span<{ $color?: string }>`\n  & > span {\n    background-color: ${({ $color = \"inherit\" }) => $color};\n    border-bottom: unset;\n    color: inherit;\n  }\n`;\n\nfunction createHighlightColorAnnotation(options?: ColorAnnotationOptions) {\n  const renderValue = options?.renderValue;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.highlightColor`,\n    title: \"Highlight Color\",\n    icon: HighlightIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const value = props.value?.color;\n        if (renderValue) return renderValue(value, props);\n        const resolvedValue = defaultResolveColor(value);\n        return <ColorBg $color={resolvedValue}>{props.renderDefault(props)}</ColorBg>;\n      },\n    },\n  });\n}\n\nexport { createTextColorAnnotation, createHighlightColorAnnotation, type ColorAnnotationOptions };\n","import { LinkIcon } from \"@sanity/icons\";\nimport { defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const link = defineField({\n  type: \"wild.link\",\n  name: `${typeName}.annotation.link`,\n  title: \"Link\",\n  icon: LinkIcon,\n  options: {\n    collapsed: false,\n    collapsible: false,\n  },\n});\n","import { type ColorAnnotationOptions, createHighlightColorAnnotation, createTextColorAnnotation } from \"./color\";\nimport { link } from \"./link\";\n\n/** @public */\nfunction createAnnotations(options?: { textColor?: ColorAnnotationOptions; highlightColor?: ColorAnnotationOptions }) {\n  return [link, createTextColorAnnotation(options?.textColor), createHighlightColorAnnotation(options?.highlightColor)] as const;\n}\n\nexport { createAnnotations };\n","import { BoldIcon, CodeIcon, ItalicIcon } from \"@sanity/icons\";\nimport type { BlockDecoratorDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst strong = {\n  title: \"Strong\",\n  value: `${typeName}.decorator.strong`,\n  icon: BoldIcon,\n  component: ({ children }) => <strong>{children}</strong>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst em = {\n  title: \"Emphasis\",\n  value: `${typeName}.decorator.em`,\n  icon: ItalicIcon,\n  component: ({ children }) => <em>{children}</em>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst code = {\n  title: \"Code\",\n  value: `${typeName}.decorator.code`,\n  icon: CodeIcon,\n  component: ({ children }) => <code>{children}</code>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst sup = {\n  title: \"Sup\",\n  value: `${typeName}.decorator.sup`,\n  icon: () => <sup>[1]</sup>,\n  component: ({ children }) => <sup style={{ verticalAlign: \"super\" }}>{children}</sup>,\n} as const satisfies BlockDecoratorDefinition;\n\n/** @public */\nfunction createDecorators() {\n  return [strong, em, code, sup] as const;\n}\n\nexport { createDecorators };\n","import { OlistIcon, UlistIcon } from \"@sanity/icons\";\nimport type { BlockListDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst bullet = {\n  title: \"Bullet\",\n  value: `${typeName}.list.bullet`,\n  icon: UlistIcon,\n} as const satisfies BlockListDefinition;\n\nconst number = {\n  title: \"Number\",\n  value: `${typeName}.list.number`,\n  icon: OlistIcon,\n} as const satisfies BlockListDefinition;\n\n/** @public */\nfunction createLists() {\n  return [bullet, number] as const;\n}\n\nexport { createLists };\n","import * as React from \"react\";\nimport { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\ntype IconSpanOptions = {\n  renderValue?: (value?: string) => React.ReactNode;\n};\n\nfunction defaultRenderIconPreview(value?: React.ReactNode) {\n  if (React.isValidElement(value)) return value;\n  return (\n    <span role=\"img\" className=\"inline-block size-[1em] shrink-0 text-current\" title={typeof value === \"string\" ? value : \"Icon\"}>\n      🧿\n    </span>\n  );\n}\n\nfunction createIconSpan(options?: IconSpanOptions) {\n  const renderValue = options?.renderValue;\n\n  return defineArrayMember({\n    name: `${typeName}.span.icon`,\n    type: \"object\",\n    title: \"Icon\",\n    description: \"Insert an icon.\",\n    icon: () => <>🧿</>,\n    fields: [defineField({ name: \"icon\", type: \"wild.icon\" })],\n    components: {\n      // This is the inline-preview in the PortableText editor.\n      // It gets its props from the prepare function below.\n      preview: (props) => {\n        return React.isValidElement(props.media) ? props.media : props.fallbackTitle;\n      },\n    },\n    preview: {\n      select: {\n        icon: \"icon\",\n      },\n      prepare({ icon }) {\n        return {\n          media: renderValue?.(icon) ?? defaultRenderIconPreview(icon),\n        };\n      },\n    },\n  });\n}\n\nexport { createIconSpan, type IconSpanOptions };\n","import { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const media = defineArrayMember({\n  name: `${typeName}.span.media`,\n  type: \"object\",\n  title: \"Inline Media\",\n  description: \"Embed inline video or image content.\",\n  icon: () => <>🫧</>,\n  fields: [\n    defineField({\n      name: \"media\",\n      type: \"wild.media\",\n      options: {\n        inline: true,\n      },\n    }),\n  ],\n  components: {\n    // This is the inline-preview in the PortableText editor.\n    preview: (props) => {\n      const icons = {\n        video: <>🎥</>,\n        image: <>🖼️</>,\n        motion: <>🌀</>,\n      };\n\n      // @ts-expect-error: It gets its props from the prepare function below.\n      return icons[props.kind as keyof typeof icons] || <>🖼️</>;\n    },\n  },\n  preview: {\n    select: {\n      kind: \"media.kind\",\n    },\n  },\n});\n","import { createIconSpan, type IconSpanOptions } from \"./icon\";\nimport { media } from \"./media\";\n\n/** @public */\nfunction createSpans(options?: { icon?: IconSpanOptions }) {\n  return [createIconSpan(options?.icon), media] as const;\n}\n\nexport { createSpans };\n","import type { BlockStyleDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst h2 = {\n  title: \"Heading 2\",\n  value: `${typeName}.style.h2`,\n  component: ({ children }) => (\n    <h2\n      style={{\n        fontSize: \"2.0625rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(41 / 33)\",\n      }}\n    >\n      {children}\n    </h2>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h3 = {\n  title: \"Heading 3\",\n  value: `${typeName}.style.h3`,\n  component: ({ children }) => (\n    <h3\n      style={{\n        fontSize: \"1.6875rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(35 / 27)\",\n      }}\n    >\n      {children}\n    </h3>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h4 = {\n  title: \"Heading 4\",\n  value: `${typeName}.style.h4`,\n  component: ({ children }) => (\n    <h4\n      style={{\n        fontSize: \"1.3125rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(29 / 21)\",\n      }}\n    >\n      {children}\n    </h4>\n  ),\n} as const satisfies BlockStyleDefinition;\n\n/** @public */\nfunction createStyles() {\n  return [h2, h3, h4] as const;\n}\n\nexport { createStyles };\n"],"names":["ColorText","styled","span","$color","createTextColorAnnotation","options","renderValue","defineField","type","name","typeName","title","icon","ColorWheelIcon","fields","components","annotation","props","value","color","resolvedValue","renderDefault","ColorBg","createHighlightColorAnnotation","HighlightIcon","link","LinkIcon","collapsed","collapsible","createAnnotations","textColor","highlightColor","strong","BoldIcon","component","children","jsx","em","ItalicIcon","code","CodeIcon","sup","verticalAlign","createDecorators","bullet","UlistIcon","number","OlistIcon","createLists","defaultRenderIconPreview","React","isValidElement","createIconSpan","defineArrayMember","description","Fragment","preview","media","fallbackTitle","select","prepare","inline","video","image","motion","kind","createSpans","h2","fontSize","fontWeight","lineHeight","h3","h4","createStyles"],"mappings":"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"}

package/dist/parts.d.cts

@@ -1,9 +1,7 @@
 import * as sanity77 from "sanity";
-import { BlockAnnotationProps } from "sanity";
-import * as react31 from "react";
+import * as react28 from "react";
 type ColorAnnotationOptions = {
-  resolveColor?: (value: unknown) => string | undefined;
-  renderAnnotation?: (props: BlockAnnotationProps, color?: string) => React.JSX.Element;
+  renderValue?: (value: string | undefined, props: BlockAnnotationProps) => React.ReactNode;
 };
 /** @public */
 declare function createAnnotations(options?: {
@@ -12,7 +10,7 @@ declare function createAnnotations(options?: {
 }): readonly [{
   type: "wild.link";
   name: "wild.richtext.annotation.link";
-} & sanity77.TypeAliasDefinition<"wild.link", "string" | "number" | "boolean" | "object" | "wild.media" | "wild.richtext" | "wild.quote" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "globalDocumentReference" | "slug" | "text" | "url" | "email" | undefined> & {
+} & sanity77.TypeAliasDefinition<"wild.link", "string" | "number" | "boolean" | "object" | "wild.richtext" | "wild.quote" | "wild.media" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "globalDocumentReference" | "slug" | "text" | "url" | "email" | undefined> & {
   preview?: sanity77.PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
 } & sanity77.FieldDefinitionBase & sanity77.WidenValidation & sanity77.WidenInitialValue, {
   type: "object";
@@ -29,44 +27,44 @@ declare function createAnnotations(options?: {
 declare function createDecorators(): readonly [{
   readonly title: "Strong";
   readonly value: "wild.richtext.decorator.strong";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }, {
   readonly title: "Emphasis";
   readonly value: "wild.richtext.decorator.em";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }, {
   readonly title: "Code";
   readonly value: "wild.richtext.decorator.code";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }, {
   readonly title: "Sup";
   readonly value: "wild.richtext.decorator.sup";
-  readonly icon: () => react31.JSX.Element;
+  readonly icon: () => react28.JSX.Element;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }];
 /** @public */
 declare function createLists(): readonly [{
   readonly title: "Bullet";
   readonly value: "wild.richtext.list.bullet";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
 }, {
   readonly title: "Number";
   readonly value: "wild.richtext.list.number";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
 }];
 type IconSpanOptions = {
-  renderPreview?: (value?: string) => react31.ReactNode;
+  renderValue?: (value?: string) => react28.ReactNode;
 };
 declare function createIconSpan(options?: IconSpanOptions): {
   type: "object";
@@ -100,18 +98,18 @@ declare function createStyles(): readonly [{
   readonly value: "wild.richtext.style.h2";
   readonly component: ({
     children
-  }: BlockStyleProps) => react31.JSX.Element;
+  }: BlockStyleProps) => react28.JSX.Element;
 }, {
   readonly title: "Heading 3";
   readonly value: "wild.richtext.style.h3";
   readonly component: ({
     children
-  }: BlockStyleProps) => react31.JSX.Element;
+  }: BlockStyleProps) => react28.JSX.Element;
 }, {
   readonly title: "Heading 4";
   readonly value: "wild.richtext.style.h4";
   readonly component: ({
     children
-  }: BlockStyleProps) => react31.JSX.Element;
+  }: BlockStyleProps) => react28.JSX.Element;
 }];
 export { createAnnotations, createDecorators, createIconSpan, createLists, createSpans, createStyles };

package/dist/parts.d.ts

@@ -1,9 +1,7 @@
 import * as sanity81 from "sanity";
-import { BlockAnnotationProps } from "sanity";
-import * as react31 from "react";
+import * as react28 from "react";
 type ColorAnnotationOptions = {
-  resolveColor?: (value: unknown) => string | undefined;
-  renderAnnotation?: (props: BlockAnnotationProps, color?: string) => React.JSX.Element;
+  renderValue?: (value: string | undefined, props: BlockAnnotationProps) => React.ReactNode;
 };
 /** @public */
 declare function createAnnotations(options?: {
@@ -12,7 +10,7 @@ declare function createAnnotations(options?: {
 }): readonly [{
   type: "wild.link";
   name: "wild.richtext.annotation.link";
-} & sanity81.TypeAliasDefinition<"wild.link", "string" | "number" | "boolean" | "object" | "wild.richtext" | "wild.media" | "wild.quote" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "globalDocumentReference" | "slug" | "text" | "url" | "email" | undefined> & {
+} & sanity81.TypeAliasDefinition<"wild.link", "string" | "number" | "boolean" | "object" | "wild.media" | "wild.richtext" | "wild.quote" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "globalDocumentReference" | "slug" | "text" | "url" | "email" | undefined> & {
   preview?: sanity81.PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
 } & sanity81.FieldDefinitionBase & sanity81.WidenValidation & sanity81.WidenInitialValue, {
   type: "object";
@@ -29,44 +27,44 @@ declare function createAnnotations(options?: {
 declare function createDecorators(): readonly [{
   readonly title: "Strong";
   readonly value: "wild.richtext.decorator.strong";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }, {
   readonly title: "Emphasis";
   readonly value: "wild.richtext.decorator.em";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }, {
   readonly title: "Code";
   readonly value: "wild.richtext.decorator.code";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }, {
   readonly title: "Sup";
   readonly value: "wild.richtext.decorator.sup";
-  readonly icon: () => react31.JSX.Element;
+  readonly icon: () => react28.JSX.Element;
   readonly component: ({
     children
-  }: BlockDecoratorProps) => react31.JSX.Element;
+  }: BlockDecoratorProps) => react28.JSX.Element;
 }];
 /** @public */
 declare function createLists(): readonly [{
   readonly title: "Bullet";
   readonly value: "wild.richtext.list.bullet";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
 }, {
   readonly title: "Number";
   readonly value: "wild.richtext.list.number";
-  readonly icon: react31.ForwardRefExoticComponent<Omit<react31.SVGProps<SVGSVGElement>, "ref"> & react31.RefAttributes<SVGSVGElement>>;
+  readonly icon: react28.ForwardRefExoticComponent<Omit<react28.SVGProps<SVGSVGElement>, "ref"> & react28.RefAttributes<SVGSVGElement>>;
 }];
 type IconSpanOptions = {
-  renderPreview?: (value?: string) => react31.ReactNode;
+  renderValue?: (value?: string) => react28.ReactNode;
 };
 declare function createIconSpan(options?: IconSpanOptions): {
   type: "object";
@@ -100,18 +98,18 @@ declare function createStyles(): readonly [{
   readonly value: "wild.richtext.style.h2";
   readonly component: ({
     children
-  }: BlockStyleProps) => react31.JSX.Element;
+  }: BlockStyleProps) => react28.JSX.Element;
 }, {
   readonly title: "Heading 3";
   readonly value: "wild.richtext.style.h3";
   readonly component: ({
     children
-  }: BlockStyleProps) => react31.JSX.Element;
+  }: BlockStyleProps) => react28.JSX.Element;
 }, {
   readonly title: "Heading 4";
   readonly value: "wild.richtext.style.h4";
   readonly component: ({
     children
-  }: BlockStyleProps) => react31.JSX.Element;
+  }: BlockStyleProps) => react28.JSX.Element;
 }];
 export { createAnnotations, createDecorators, createIconSpan, createLists, createSpans, createStyles };

package/dist/parts.js

@@ -9,17 +9,12 @@ const ColorText = styled.span`
     background-color: inherit;
     border-bottom: unset;
     color: ${({
-  color = "inherit"
-}) => color};
+  $color = "inherit"
+}) => $color};
   }
 `;
-function defaultResolveColor(value) {
-  if (typeof value == "string") return value;
-  if (value && typeof value == "object" && "value" in value && typeof value.value == "string")
-    return value.value;
-}
 function createTextColorAnnotation(options) {
-  const resolveColor = options?.resolveColor ?? defaultResolveColor, renderAnnotation = options?.renderAnnotation;
+  const renderValue = options?.renderValue;
   return defineField({
     type: "object",
     name: `${typeName}.annotation.textColor`,
@@ -31,8 +26,8 @@ function createTextColorAnnotation(options) {
     })],
     components: {
       annotation: (props) => {
-        const color = resolveColor(props.value?.color);
-        return renderAnnotation ? renderAnnotation(props, color) : /* @__PURE__ */ jsx(ColorText, { color, children: props.renderDefault(props) });
+        const value = props.value?.color;
+        return renderValue ? renderValue(value, props) : /* @__PURE__ */ jsx(ColorText, { $color: value, children: props.renderDefault(props) });
       }
     }
   });
@@ -40,14 +35,14 @@ function createTextColorAnnotation(options) {
 const ColorBg = styled.span`
   & > span {
     background-color: ${({
-  color = "inherit"
-}) => color};
+  $color = "inherit"
+}) => $color};
     border-bottom: unset;
     color: inherit;
   }
 `;
 function createHighlightColorAnnotation(options) {
-  const resolveColor = options?.resolveColor ?? defaultResolveColor, renderAnnotation = options?.renderAnnotation;
+  const renderValue = options?.renderValue;
   return defineField({
     type: "object",
     name: `${typeName}.annotation.highlightColor`,
@@ -59,8 +54,8 @@ function createHighlightColorAnnotation(options) {
     })],
     components: {
       annotation: (props) => {
-        const color = resolveColor(props.value?.color);
-        return renderAnnotation ? renderAnnotation(props, color) : /* @__PURE__ */ jsx(ColorBg, { color, children: props.renderDefault(props) });
+        const value = props.value?.color;
+        return renderValue ? renderValue(value, props) : /* @__PURE__ */ jsx(ColorBg, { $color: value, children: props.renderDefault(props) });
       }
     }
   });
@@ -125,10 +120,10 @@ function createLists() {
   return [bullet, number];
 }
 function defaultRenderIconPreview(value) {
-  return /* @__PURE__ */ jsx("span", { role: "img", className: "inline-block size-[1em] shrink-0 text-current", title: value ?? "Icon", children: "\u{1F9FF}" });
+  return React.isValidElement(value) ? value : /* @__PURE__ */ jsx("span", { role: "img", className: "inline-block size-[1em] shrink-0 text-current", title: typeof value == "string" ? value : "Icon", children: "\u{1F9FF}" });
 }
 function createIconSpan(options) {
-  const renderPreview = options?.renderPreview ?? defaultRenderIconPreview;
+  const renderValue = options?.renderValue;
   return defineArrayMember({
     name: `${typeName}.span.icon`,
     type: "object",
@@ -152,7 +147,7 @@ function createIconSpan(options) {
         icon
       }) {
         return {
-          media: renderPreview(icon)
+          media: renderValue?.(icon) ?? defaultRenderIconPreview(icon)
         };
       }
     }

package/dist/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","sources":["../src/parts/annotations/color.tsx","../src/parts/annotations/link.tsx","../src/parts/annotations/index.tsx","../src/parts/decorators/index.tsx","../src/parts/lists/index.tsx","../src/parts/spans/icon.tsx","../src/parts/spans/media.tsx","../src/parts/spans/index.tsx","../src/parts/styles/index.tsx"],"sourcesContent":["import { ColorWheelIcon, HighlightIcon } from \"@sanity/icons\";\nimport { type BlockAnnotationProps, defineField } from \"sanity\";\nimport { styled } from \"styled-components\";\nimport { typeName } from \"../../types\";\n\ntype ColorAnnotationOptions = {\n  resolveColor?: (value: unknown) => string | undefined;\n  renderAnnotation?: (props: BlockAnnotationProps, color?: string) => React.JSX.Element;\n};\n\nconst ColorText = styled.span<{ color?: string }>`\n  & > span {\n    background-color: inherit;\n    border-bottom: unset;\n    color: ${({ color = \"inherit\" }) => color};\n  }\n`;\n\nfunction defaultResolveColor(value: unknown) {\n  if (typeof value === \"string\") return value;\n  if (value && typeof value === \"object\" && \"value\" in value && typeof value.value === \"string\") {\n    return value.value;\n  }\n  return undefined;\n}\n\nfunction createTextColorAnnotation(options?: ColorAnnotationOptions) {\n  const resolveColor = options?.resolveColor ?? defaultResolveColor;\n  const renderAnnotation = options?.renderAnnotation;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.textColor`,\n    title: \"Text Color\",\n    icon: ColorWheelIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const color = resolveColor(props.value?.color);\n        if (renderAnnotation) return renderAnnotation(props, color);\n        return <ColorText color={color}>{props.renderDefault(props)}</ColorText>;\n      },\n    },\n  });\n}\n\nconst ColorBg = styled.span<{ color?: string }>`\n  & > span {\n    background-color: ${({ color = \"inherit\" }) => color};\n    border-bottom: unset;\n    color: inherit;\n  }\n`;\n\nfunction createHighlightColorAnnotation(options?: ColorAnnotationOptions) {\n  const resolveColor = options?.resolveColor ?? defaultResolveColor;\n  const renderAnnotation = options?.renderAnnotation;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.highlightColor`,\n    title: \"Highlight Color\",\n    icon: HighlightIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const color = resolveColor(props.value?.color);\n        if (renderAnnotation) return renderAnnotation(props, color);\n        return <ColorBg color={color}>{props.renderDefault(props)}</ColorBg>;\n      },\n    },\n  });\n}\n\nexport { createTextColorAnnotation, createHighlightColorAnnotation, type ColorAnnotationOptions };\n","import { LinkIcon } from \"@sanity/icons\";\nimport { defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const link = defineField({\n  type: \"wild.link\",\n  name: `${typeName}.annotation.link`,\n  title: \"Link\",\n  icon: LinkIcon,\n  options: {\n    collapsed: false,\n    collapsible: false,\n  },\n});\n","import { type ColorAnnotationOptions, createHighlightColorAnnotation, createTextColorAnnotation } from \"./color\";\nimport { link } from \"./link\";\n\n/** @public */\nfunction createAnnotations(options?: { textColor?: ColorAnnotationOptions; highlightColor?: ColorAnnotationOptions }) {\n  return [link, createTextColorAnnotation(options?.textColor), createHighlightColorAnnotation(options?.highlightColor)] as const;\n}\n\nexport { createAnnotations };\n","import { BoldIcon, CodeIcon, ItalicIcon } from \"@sanity/icons\";\nimport type { BlockDecoratorDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst strong = {\n  title: \"Strong\",\n  value: `${typeName}.decorator.strong`,\n  icon: BoldIcon,\n  component: ({ children }) => <strong>{children}</strong>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst em = {\n  title: \"Emphasis\",\n  value: `${typeName}.decorator.em`,\n  icon: ItalicIcon,\n  component: ({ children }) => <em>{children}</em>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst code = {\n  title: \"Code\",\n  value: `${typeName}.decorator.code`,\n  icon: CodeIcon,\n  component: ({ children }) => <code>{children}</code>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst sup = {\n  title: \"Sup\",\n  value: `${typeName}.decorator.sup`,\n  icon: () => <sup>[1]</sup>,\n  component: ({ children }) => <sup style={{ verticalAlign: \"super\" }}>{children}</sup>,\n} as const satisfies BlockDecoratorDefinition;\n\n/** @public */\nfunction createDecorators() {\n  return [strong, em, code, sup] as const;\n}\n\nexport { createDecorators };\n","import { OlistIcon, UlistIcon } from \"@sanity/icons\";\nimport type { BlockListDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst bullet = {\n  title: \"Bullet\",\n  value: `${typeName}.list.bullet`,\n  icon: UlistIcon,\n} as const satisfies BlockListDefinition;\n\nconst number = {\n  title: \"Number\",\n  value: `${typeName}.list.number`,\n  icon: OlistIcon,\n} as const satisfies BlockListDefinition;\n\n/** @public */\nfunction createLists() {\n  return [bullet, number] as const;\n}\n\nexport { createLists };\n","import * as React from \"react\";\nimport { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\ntype IconSpanOptions = {\n  renderPreview?: (value?: string) => React.ReactNode;\n};\n\nfunction defaultRenderIconPreview(value?: string) {\n  return (\n    <span role=\"img\" className=\"inline-block size-[1em] shrink-0 text-current\" title={value ?? \"Icon\"}>\n      🧿\n    </span>\n  );\n}\n\nfunction createIconSpan(options?: IconSpanOptions) {\n  const renderPreview = options?.renderPreview ?? defaultRenderIconPreview;\n\n  return defineArrayMember({\n    name: `${typeName}.span.icon`,\n    type: \"object\",\n    title: \"Icon\",\n    description: \"Insert an icon.\",\n    icon: () => <>🧿</>,\n    fields: [defineField({ name: \"icon\", type: \"wild.icon\" })],\n    components: {\n      // This is the inline-preview in the PortableText editor.\n      // It gets its props from the prepare function below.\n      preview: (props) => {\n        return React.isValidElement(props.media) ? props.media : props.fallbackTitle;\n      },\n    },\n    preview: {\n      select: {\n        icon: \"icon\",\n      },\n      prepare({ icon }) {\n        return {\n          media: renderPreview(icon),\n        };\n      },\n    },\n  });\n}\n\nexport { createIconSpan, type IconSpanOptions };\n","import { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const media = defineArrayMember({\n  name: `${typeName}.span.media`,\n  type: \"object\",\n  title: \"Inline Media\",\n  description: \"Embed inline video or image content.\",\n  icon: () => <>🫧</>,\n  fields: [\n    defineField({\n      name: \"media\",\n      type: \"wild.media\",\n      options: {\n        inline: true,\n      },\n    }),\n  ],\n  components: {\n    // This is the inline-preview in the PortableText editor.\n    preview: (props) => {\n      const icons = {\n        video: <>🎥</>,\n        image: <>🖼️</>,\n        motion: <>🌀</>,\n      };\n\n      // @ts-expect-error: It gets its props from the prepare function below.\n      return icons[props.kind as keyof typeof icons] || <>🖼️</>;\n    },\n  },\n  preview: {\n    select: {\n      kind: \"media.kind\",\n    },\n  },\n});\n","import { createIconSpan, type IconSpanOptions } from \"./icon\";\nimport { media } from \"./media\";\n\n/** @public */\nfunction createSpans(options?: { icon?: IconSpanOptions }) {\n  return [createIconSpan(options?.icon), media] as const;\n}\n\nexport { createSpans };\n","import type { BlockStyleDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst h2 = {\n  title: \"Heading 2\",\n  value: `${typeName}.style.h2`,\n  component: ({ children }) => (\n    <h2\n      style={{\n        fontSize: \"2.0625rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(41 / 33)\",\n      }}\n    >\n      {children}\n    </h2>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h3 = {\n  title: \"Heading 3\",\n  value: `${typeName}.style.h3`,\n  component: ({ children }) => (\n    <h3\n      style={{\n        fontSize: \"1.6875rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(35 / 27)\",\n      }}\n    >\n      {children}\n    </h3>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h4 = {\n  title: \"Heading 4\",\n  value: `${typeName}.style.h4`,\n  component: ({ children }) => (\n    <h4\n      style={{\n        fontSize: \"1.3125rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(29 / 21)\",\n      }}\n    >\n      {children}\n    </h4>\n  ),\n} as const satisfies BlockStyleDefinition;\n\n/** @public */\nfunction createStyles() {\n  return [h2, h3, h4] as const;\n}\n\nexport { createStyles };\n"],"names":["ColorText","styled","span","color","defaultResolveColor","value","createTextColorAnnotation","options","resolveColor","renderAnnotation","defineField","type","name","typeName","title","icon","ColorWheelIcon","fields","components","annotation","props","renderDefault","ColorBg","createHighlightColorAnnotation","HighlightIcon","link","LinkIcon","collapsed","collapsible","createAnnotations","textColor","highlightColor","strong","BoldIcon","component","children","em","ItalicIcon","code","CodeIcon","sup","verticalAlign","createDecorators","bullet","UlistIcon","number","OlistIcon","createLists","defaultRenderIconPreview","createIconSpan","renderPreview","defineArrayMember","description","preview","React","isValidElement","media","fallbackTitle","select","prepare","inline","video","image","motion","kind","createSpans","h2","fontSize","fontWeight","lineHeight","h3","h4","createStyles"],"mappings":"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"}
+{"version":3,"file":"parts.js","sources":["../src/parts/annotations/color.tsx","../src/parts/annotations/link.tsx","../src/parts/annotations/index.tsx","../src/parts/decorators/index.tsx","../src/parts/lists/index.tsx","../src/parts/spans/icon.tsx","../src/parts/spans/media.tsx","../src/parts/spans/index.tsx","../src/parts/styles/index.tsx"],"sourcesContent":["import { ColorWheelIcon, HighlightIcon } from \"@sanity/icons\";\nimport { defineField } from \"sanity\";\nimport { styled } from \"styled-components\";\nimport { typeName } from \"../../types\";\n\ntype ColorAnnotationOptions = {\n  renderValue?: (value: string | undefined, props: BlockAnnotationProps) => React.ReactNode;\n};\n\nconst ColorText = styled.span<{ $color?: string }>`\n  & > span {\n    background-color: inherit;\n    border-bottom: unset;\n    color: ${({ $color = \"inherit\" }) => $color};\n  }\n`;\n\nfunction defaultResolveColor(value: string | undefined) {\n  return value;\n}\n\nfunction createTextColorAnnotation(options?: ColorAnnotationOptions) {\n  const renderValue = options?.renderValue;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.textColor`,\n    title: \"Text Color\",\n    icon: ColorWheelIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const value = props.value?.color;\n        if (renderValue) return renderValue(value, props);\n        const resolvedValue = defaultResolveColor(value);\n        return <ColorText $color={resolvedValue}>{props.renderDefault(props)}</ColorText>;\n      },\n    },\n  });\n}\n\nconst ColorBg = styled.span<{ $color?: string }>`\n  & > span {\n    background-color: ${({ $color = \"inherit\" }) => $color};\n    border-bottom: unset;\n    color: inherit;\n  }\n`;\n\nfunction createHighlightColorAnnotation(options?: ColorAnnotationOptions) {\n  const renderValue = options?.renderValue;\n\n  return defineField({\n    type: \"object\",\n    name: `${typeName}.annotation.highlightColor`,\n    title: \"Highlight Color\",\n    icon: HighlightIcon,\n    fields: [defineField({ name: \"color\", type: \"wild.color\" })],\n    components: {\n      annotation: (props) => {\n        const value = props.value?.color;\n        if (renderValue) return renderValue(value, props);\n        const resolvedValue = defaultResolveColor(value);\n        return <ColorBg $color={resolvedValue}>{props.renderDefault(props)}</ColorBg>;\n      },\n    },\n  });\n}\n\nexport { createTextColorAnnotation, createHighlightColorAnnotation, type ColorAnnotationOptions };\n","import { LinkIcon } from \"@sanity/icons\";\nimport { defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const link = defineField({\n  type: \"wild.link\",\n  name: `${typeName}.annotation.link`,\n  title: \"Link\",\n  icon: LinkIcon,\n  options: {\n    collapsed: false,\n    collapsible: false,\n  },\n});\n","import { type ColorAnnotationOptions, createHighlightColorAnnotation, createTextColorAnnotation } from \"./color\";\nimport { link } from \"./link\";\n\n/** @public */\nfunction createAnnotations(options?: { textColor?: ColorAnnotationOptions; highlightColor?: ColorAnnotationOptions }) {\n  return [link, createTextColorAnnotation(options?.textColor), createHighlightColorAnnotation(options?.highlightColor)] as const;\n}\n\nexport { createAnnotations };\n","import { BoldIcon, CodeIcon, ItalicIcon } from \"@sanity/icons\";\nimport type { BlockDecoratorDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst strong = {\n  title: \"Strong\",\n  value: `${typeName}.decorator.strong`,\n  icon: BoldIcon,\n  component: ({ children }) => <strong>{children}</strong>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst em = {\n  title: \"Emphasis\",\n  value: `${typeName}.decorator.em`,\n  icon: ItalicIcon,\n  component: ({ children }) => <em>{children}</em>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst code = {\n  title: \"Code\",\n  value: `${typeName}.decorator.code`,\n  icon: CodeIcon,\n  component: ({ children }) => <code>{children}</code>,\n} as const satisfies BlockDecoratorDefinition;\n\nconst sup = {\n  title: \"Sup\",\n  value: `${typeName}.decorator.sup`,\n  icon: () => <sup>[1]</sup>,\n  component: ({ children }) => <sup style={{ verticalAlign: \"super\" }}>{children}</sup>,\n} as const satisfies BlockDecoratorDefinition;\n\n/** @public */\nfunction createDecorators() {\n  return [strong, em, code, sup] as const;\n}\n\nexport { createDecorators };\n","import { OlistIcon, UlistIcon } from \"@sanity/icons\";\nimport type { BlockListDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst bullet = {\n  title: \"Bullet\",\n  value: `${typeName}.list.bullet`,\n  icon: UlistIcon,\n} as const satisfies BlockListDefinition;\n\nconst number = {\n  title: \"Number\",\n  value: `${typeName}.list.number`,\n  icon: OlistIcon,\n} as const satisfies BlockListDefinition;\n\n/** @public */\nfunction createLists() {\n  return [bullet, number] as const;\n}\n\nexport { createLists };\n","import * as React from \"react\";\nimport { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\ntype IconSpanOptions = {\n  renderValue?: (value?: string) => React.ReactNode;\n};\n\nfunction defaultRenderIconPreview(value?: React.ReactNode) {\n  if (React.isValidElement(value)) return value;\n  return (\n    <span role=\"img\" className=\"inline-block size-[1em] shrink-0 text-current\" title={typeof value === \"string\" ? value : \"Icon\"}>\n      🧿\n    </span>\n  );\n}\n\nfunction createIconSpan(options?: IconSpanOptions) {\n  const renderValue = options?.renderValue;\n\n  return defineArrayMember({\n    name: `${typeName}.span.icon`,\n    type: \"object\",\n    title: \"Icon\",\n    description: \"Insert an icon.\",\n    icon: () => <>🧿</>,\n    fields: [defineField({ name: \"icon\", type: \"wild.icon\" })],\n    components: {\n      // This is the inline-preview in the PortableText editor.\n      // It gets its props from the prepare function below.\n      preview: (props) => {\n        return React.isValidElement(props.media) ? props.media : props.fallbackTitle;\n      },\n    },\n    preview: {\n      select: {\n        icon: \"icon\",\n      },\n      prepare({ icon }) {\n        return {\n          media: renderValue?.(icon) ?? defaultRenderIconPreview(icon),\n        };\n      },\n    },\n  });\n}\n\nexport { createIconSpan, type IconSpanOptions };\n","import { defineArrayMember, defineField } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nexport const media = defineArrayMember({\n  name: `${typeName}.span.media`,\n  type: \"object\",\n  title: \"Inline Media\",\n  description: \"Embed inline video or image content.\",\n  icon: () => <>🫧</>,\n  fields: [\n    defineField({\n      name: \"media\",\n      type: \"wild.media\",\n      options: {\n        inline: true,\n      },\n    }),\n  ],\n  components: {\n    // This is the inline-preview in the PortableText editor.\n    preview: (props) => {\n      const icons = {\n        video: <>🎥</>,\n        image: <>🖼️</>,\n        motion: <>🌀</>,\n      };\n\n      // @ts-expect-error: It gets its props from the prepare function below.\n      return icons[props.kind as keyof typeof icons] || <>🖼️</>;\n    },\n  },\n  preview: {\n    select: {\n      kind: \"media.kind\",\n    },\n  },\n});\n","import { createIconSpan, type IconSpanOptions } from \"./icon\";\nimport { media } from \"./media\";\n\n/** @public */\nfunction createSpans(options?: { icon?: IconSpanOptions }) {\n  return [createIconSpan(options?.icon), media] as const;\n}\n\nexport { createSpans };\n","import type { BlockStyleDefinition } from \"sanity\";\nimport { typeName } from \"../../types\";\n\nconst h2 = {\n  title: \"Heading 2\",\n  value: `${typeName}.style.h2`,\n  component: ({ children }) => (\n    <h2\n      style={{\n        fontSize: \"2.0625rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(41 / 33)\",\n      }}\n    >\n      {children}\n    </h2>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h3 = {\n  title: \"Heading 3\",\n  value: `${typeName}.style.h3`,\n  component: ({ children }) => (\n    <h3\n      style={{\n        fontSize: \"1.6875rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(35 / 27)\",\n      }}\n    >\n      {children}\n    </h3>\n  ),\n} as const satisfies BlockStyleDefinition;\n\nconst h4 = {\n  title: \"Heading 4\",\n  value: `${typeName}.style.h4`,\n  component: ({ children }) => (\n    <h4\n      style={{\n        fontSize: \"1.3125rem\",\n        fontWeight: \"700\",\n        lineHeight: \"calc(29 / 21)\",\n      }}\n    >\n      {children}\n    </h4>\n  ),\n} as const satisfies BlockStyleDefinition;\n\n/** @public */\nfunction createStyles() {\n  return [h2, h3, h4] as const;\n}\n\nexport { createStyles };\n"],"names":["ColorText","styled","span","$color","createTextColorAnnotation","options","renderValue","defineField","type","name","typeName","title","icon","ColorWheelIcon","fields","components","annotation","props","value","color","renderDefault","ColorBg","createHighlightColorAnnotation","HighlightIcon","link","LinkIcon","collapsed","collapsible","createAnnotations","textColor","highlightColor","strong","BoldIcon","component","children","em","ItalicIcon","code","CodeIcon","sup","verticalAlign","createDecorators","bullet","UlistIcon","number","OlistIcon","createLists","defaultRenderIconPreview","React","isValidElement","createIconSpan","defineArrayMember","description","preview","media","fallbackTitle","select","prepare","inline","video","image","motion","kind","createSpans","h2","fontSize","fontWeight","lineHeight","h3","h4","createStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madebywild/sanity-richtext-field",
-  "version": "1.1.0",
+  "version": "3.0.0",
   "type": "module",
   "sideEffects": false,
   "license": "UNLICENSED",
@@ -53,8 +53,8 @@
   "dependencies": {
     "ts-deepmerge": "^7.0.3",
     "@madebywild/sanity-media-field": "1.0.0",
-    "@madebywild/sanity-utils": "1.0.0",
-    "@madebywild/sanity-quote-field": "1.0.1"
+    "@madebywild/sanity-quote-field": "1.0.3",
+    "@madebywild/sanity-utils": "1.0.0"
   },
   "peerDependencies": {
     "@sanity/icons": "^3.7.4",

package/src/parts/annotations/color.tsx

@@ -1,32 +1,26 @@
 import { ColorWheelIcon, HighlightIcon } from "@sanity/icons";
-import { type BlockAnnotationProps, defineField } from "sanity";
+import { defineField } from "sanity";
 import { styled } from "styled-components";
 import { typeName } from "../../types";
 
 type ColorAnnotationOptions = {
-  resolveColor?: (value: unknown) => string | undefined;
-  renderAnnotation?: (props: BlockAnnotationProps, color?: string) => React.JSX.Element;
+  renderValue?: (value: string | undefined, props: BlockAnnotationProps) => React.ReactNode;
 };
 
-const ColorText = styled.span<{ color?: string }>`
+const ColorText = styled.span<{ $color?: string }>`
   & > span {
     background-color: inherit;
     border-bottom: unset;
-    color: ${({ color = "inherit" }) => color};
+    color: ${({ $color = "inherit" }) => $color};
   }
 `;
 
-function defaultResolveColor(value: unknown) {
-  if (typeof value === "string") return value;
-  if (value && typeof value === "object" && "value" in value && typeof value.value === "string") {
-    return value.value;
-  }
-  return undefined;
+function defaultResolveColor(value: string | undefined) {
+  return value;
 }
 
 function createTextColorAnnotation(options?: ColorAnnotationOptions) {
-  const resolveColor = options?.resolveColor ?? defaultResolveColor;
-  const renderAnnotation = options?.renderAnnotation;
+  const renderValue = options?.renderValue;
 
   return defineField({
     type: "object",
@@ -36,25 +30,25 @@ function createTextColorAnnotation(options?: ColorAnnotationOptions) {
     fields: [defineField({ name: "color", type: "wild.color" })],
     components: {
       annotation: (props) => {
-        const color = resolveColor(props.value?.color);
-        if (renderAnnotation) return renderAnnotation(props, color);
-        return <ColorText color={color}>{props.renderDefault(props)}</ColorText>;
+        const value = props.value?.color;
+        if (renderValue) return renderValue(value, props);
+        const resolvedValue = defaultResolveColor(value);
+        return <ColorText $color={resolvedValue}>{props.renderDefault(props)}</ColorText>;
       },
     },
   });
 }
 
-const ColorBg = styled.span<{ color?: string }>`
+const ColorBg = styled.span<{ $color?: string }>`
   & > span {
-    background-color: ${({ color = "inherit" }) => color};
+    background-color: ${({ $color = "inherit" }) => $color};
     border-bottom: unset;
     color: inherit;
   }
 `;
 
 function createHighlightColorAnnotation(options?: ColorAnnotationOptions) {
-  const resolveColor = options?.resolveColor ?? defaultResolveColor;
-  const renderAnnotation = options?.renderAnnotation;
+  const renderValue = options?.renderValue;
 
   return defineField({
     type: "object",
@@ -64,9 +58,10 @@ function createHighlightColorAnnotation(options?: ColorAnnotationOptions) {
     fields: [defineField({ name: "color", type: "wild.color" })],
     components: {
       annotation: (props) => {
-        const color = resolveColor(props.value?.color);
-        if (renderAnnotation) return renderAnnotation(props, color);
-        return <ColorBg color={color}>{props.renderDefault(props)}</ColorBg>;
+        const value = props.value?.color;
+        if (renderValue) return renderValue(value, props);
+        const resolvedValue = defaultResolveColor(value);
+        return <ColorBg $color={resolvedValue}>{props.renderDefault(props)}</ColorBg>;
       },
     },
   });

package/src/parts/spans/icon.tsx

@@ -3,19 +3,20 @@ import { defineArrayMember, defineField } from "sanity";
 import { typeName } from "../../types";
 
 type IconSpanOptions = {
-  renderPreview?: (value?: string) => React.ReactNode;
+  renderValue?: (value?: string) => React.ReactNode;
 };
 
-function defaultRenderIconPreview(value?: string) {
+function defaultRenderIconPreview(value?: React.ReactNode) {
+  if (React.isValidElement(value)) return value;
   return (
-    <span role="img" className="inline-block size-[1em] shrink-0 text-current" title={value ?? "Icon"}>
+    <span role="img" className="inline-block size-[1em] shrink-0 text-current" title={typeof value === "string" ? value : "Icon"}>
       🧿
     </span>
   );
 }
 
 function createIconSpan(options?: IconSpanOptions) {
-  const renderPreview = options?.renderPreview ?? defaultRenderIconPreview;
+  const renderValue = options?.renderValue;
 
   return defineArrayMember({
     name: `${typeName}.span.icon`,
@@ -37,7 +38,7 @@ function createIconSpan(options?: IconSpanOptions) {
       },
       prepare({ icon }) {
         return {
-          media: renderPreview(icon),
+          media: renderValue?.(icon) ?? defaultRenderIconPreview(icon),
         };
       },
     },