@madebywild/sanity-richtext-field 1.0.0 → 2.0.0

package/src/parts/annotations/color.tsx

@@ -3,48 +3,64 @@ import { defineField } from "sanity";
 import { styled } from "styled-components";
 import { typeName } from "../../types";
 
-const ColorText = styled.span<{ color?: string }>`
+type ColorAnnotationOptions = {
+  renderValue?: (value: string | undefined) => string | undefined;
+};
+
+const ColorText = styled.span<{ $color?: string }>`
   & > span {
     background-color: inherit;
     border-bottom: unset;
-    color: ${({ color = "inherit" }) => color};
+    color: ${({ $color = "inherit" }) => $color};
   }
 `;
 
-export const textColor = defineField({
-  type: "object",
-  name: `${typeName}.annotation.textColor`,
-  title: "Text Color",
-  icon: ColorWheelIcon,
-  fields: [defineField({ name: "color", type: "wild.color" })],
-  components: {
-    annotation: (props) => {
-      // @ts-expect-error: Sanity types are not aware of the color field structure.
-      const color = props.value?.color?.value as string;
-      return <ColorText color={color}>{props.renderDefault(props)}</ColorText>;
+function defaultResolveColor(value: string | undefined) {
+  return value;
+}
+
+function createTextColorAnnotation(options?: ColorAnnotationOptions) {
+  const renderValue = options?.renderValue ?? defaultResolveColor;
+
+  return defineField({
+    type: "object",
+    name: `${typeName}.annotation.textColor`,
+    title: "Text Color",
+    icon: ColorWheelIcon,
+    fields: [defineField({ name: "color", type: "wild.color" })],
+    components: {
+      annotation: (props) => {
+        const value = renderValue(props.value?.color);
+        return <ColorText $color={value}>{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;
   }
 `;
 
-export const highlightColor = defineField({
-  type: "object",
-  name: `${typeName}.annotation.highlightColor`,
-  title: "Highlight Color",
-  icon: HighlightIcon,
-  fields: [defineField({ name: "color", type: "wild.color" })],
-  components: {
-    annotation: (props) => {
-      // @ts-expect-error: Sanity types are not aware of the color field structure.
-      const color = props.value?.color?.value as string;
-      return <ColorBg color={color}>{props.renderDefault(props)}</ColorBg>;
+function createHighlightColorAnnotation(options?: ColorAnnotationOptions) {
+  const renderValue = options?.renderValue ?? defaultResolveColor;
+
+  return defineField({
+    type: "object",
+    name: `${typeName}.annotation.highlightColor`,
+    title: "Highlight Color",
+    icon: HighlightIcon,
+    fields: [defineField({ name: "color", type: "wild.color" })],
+    components: {
+      annotation: (props) => {
+        const value = renderValue(props.value?.color);
+        return <ColorBg $color={value}>{props.renderDefault(props)}</ColorBg>;
+      },
     },
-  },
-});
+  });
+}
+
+export { createTextColorAnnotation, createHighlightColorAnnotation, type ColorAnnotationOptions };

package/src/parts/annotations/index.tsx

@@ -1,9 +1,9 @@
-import { highlightColor, textColor } from "./color";
+import { type ColorAnnotationOptions, createHighlightColorAnnotation, createTextColorAnnotation } from "./color";
 import { link } from "./link";
 
 /** @public */
-function createAnnotations() {
-  return [link, textColor, highlightColor] as const;
+function createAnnotations(options?: { textColor?: ColorAnnotationOptions; highlightColor?: ColorAnnotationOptions }) {
+  return [link, createTextColorAnnotation(options?.textColor), createHighlightColorAnnotation(options?.highlightColor)] as const;
 }
 
 export { createAnnotations };

package/src/parts/index.tsx

@@ -2,6 +2,7 @@ import { createAnnotations } from "./annotations";
 import { createDecorators } from "./decorators";
 import { createLists } from "./lists";
 import { createSpans } from "./spans";
+import { createIconSpan } from "./spans/icon";
 import { createStyles } from "./styles";
 
-export { createAnnotations, createDecorators, createLists, createSpans, createStyles };
+export { createAnnotations, createDecorators, createLists, createSpans, createStyles, createIconSpan };

package/src/parts/spans/icon.tsx

@@ -2,32 +2,47 @@ import * as React from "react";
 import { defineArrayMember, defineField } from "sanity";
 import { typeName } from "../../types";
 
-export const icon = defineArrayMember({
-  name: `${typeName}.span.icon`,
-  type: "object",
-  title: "Icon",
-  description: "Insert an icon.",
-  icon: () => <>🧿</>,
-  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",
+type IconSpanOptions = {
+  renderValuePreview?: (value?: string) => React.ReactNode;
+};
+
+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={typeof value === "string" ? value : "Icon"}>
+      🧿
+    </span>
+  );
+}
+
+function createIconSpan(options?: IconSpanOptions) {
+  const renderValuePreview = options?.renderValuePreview;
+
+  return defineArrayMember({
+    name: `${typeName}.span.icon`,
+    type: "object",
+    title: "Icon",
+    description: "Insert an icon.",
+    icon: () => <>🧿</>,
+    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;
+      },
     },
-    prepare({ icon }) {
-      return {
-        media: (
-          <span role="img" className="inline-block size-[1em] shrink-0 text-current" title={icon ?? "Icon"}>
-            🧿
-          </span>
-        ),
-      };
+    preview: {
+      select: {
+        icon: "icon",
+      },
+      prepare({ icon }) {
+        return {
+          media: renderValuePreview?.(icon) ?? defaultRenderIconPreview(icon),
+        };
+      },
     },
-  },
-});
+  });
+}
+
+export { createIconSpan, type IconSpanOptions };

package/src/parts/spans/index.tsx

@@ -1,9 +1,9 @@
-import { icon } from "./icon";
+import { createIconSpan, type IconSpanOptions } from "./icon";
 import { media } from "./media";
 
 /** @public */
-function createSpans() {
-  return [icon, media] as const;
+function createSpans(options?: { icon?: IconSpanOptions }) {
+  return [createIconSpan(options?.icon), media] as const;
 }
 
 export { createSpans };