@madebywild/sanity-richtext-field 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -1,9 +1,297 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-require("react/jsx-runtime");
-require("sanity");
-var index = require("./_chunks-cjs/index.cjs");
-exports.typeNameBasic = index.typeNameBasic;
-exports.typeNameExtended = index.typeNameExtended;
-exports.wildSanityRichtextFieldPlugin = index.wildSanityRichtextFieldPlugin;
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), sanityMediaField = require("@madebywild/sanity-media-field"), React = require("react"), styled = require("styled-components");
+function _interopDefaultCompat(e) {
+  return e && typeof e == "object" && "default" in e ? e : { default: e };
+}
+function _interopNamespaceCompat(e) {
+  if (e && typeof e == "object" && "default" in e) return e;
+  var n = /* @__PURE__ */ Object.create(null);
+  return e && Object.keys(e).forEach(function(k) {
+    if (k !== "default") {
+      var d = Object.getOwnPropertyDescriptor(e, k);
+      Object.defineProperty(n, k, d.get ? d : {
+        enumerable: !0,
+        get: function() {
+          return e[k];
+        }
+      });
+    }
+  }), n.default = e, Object.freeze(n);
+}
+var React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React), styled__default = /* @__PURE__ */ _interopDefaultCompat(styled);
+const mediaBlock = sanity.defineArrayMember({
+  name: "wild.richtext.blocks.mediaBlock",
+  type: "object",
+  title: "Media Block",
+  description: "Embed block video or image content.",
+  icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F5BC}\uFE0F" }),
+  fields: [
+    sanity.defineField({
+      title: "Wrap",
+      name: "wrapping",
+      type: "wild.wrapping"
+    }),
+    sanity.defineField({
+      name: "appMedia",
+      type: "wild.media",
+      options: {
+        withCustomRatio: !0,
+        withCustomOptions: !0
+      }
+    }),
+    sanity.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) => sanityMediaField.buildMediaPreview(props)
+  }
+}), blocks = [
+  mediaBlock
+  // Add block
+], LinkIcon = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "data-sanity-icon": "link",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M11 12.5L12.5 14C13.281 14.781 14.719 14.781 15.5 14L18.5 11C19.281 10.219 19.281 8.78105 18.5 8L18 7.5C17.2189 6.71895 15.781 6.71895 15 7.5L13 9.5M12 15.5L10 17.5C9.21895 18.281 7.78105 18.281 7 17.5L6.5 17C5.71895 16.219 5.71896 14.781 6.5 14L9.50001 11C10.2811 10.219 11.719 10.2189 12.5 11L14 12.5",
+          stroke: "currentColor",
+          strokeWidth: 1.2,
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}), linkField = sanity.defineField({
+  type: "wild.link",
+  name: "linkField",
+  title: "Link",
+  icon: LinkIcon,
+  options: {
+    noCustomText: !0,
+    collapsed: !1,
+    collapsible: !1
+  }
+}), ColorText = styled__default.default.span`
+  & > span {
+    background-color: inherit;
+    border-bottom: unset;
+    color: ${({ color = "inherit" }) => color};
+  }
+`, textColorField = sanity.defineField({
+  type: "object",
+  name: "textColorField",
+  title: "Text Color",
+  icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F58B}" }),
+  fields: [sanity.defineField({ name: "color", type: "wild.color" })],
+  components: {
+    annotation: (props) => {
+      const color = props.value?.color;
+      return /* @__PURE__ */ jsxRuntime.jsx(ColorText, { color, children: props.renderDefault(props) });
+    }
+  }
+}), ColorBg = styled__default.default.span`
+  & > span {
+    background-color: ${({ color = "inherit" }) => color};
+    border-bottom: unset;
+    color: inherit;
+  }
+`, highlightColorField = sanity.defineField({
+  type: "object",
+  name: "highlightColorField",
+  title: "Highlight Color",
+  icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F58D}" }),
+  fields: [sanity.defineField({ name: "color", type: "wild.color" })],
+  components: {
+    annotation: (props) => {
+      const color = props.value?.color;
+      return /* @__PURE__ */ jsxRuntime.jsx(ColorBg, { color, children: props.renderDefault(props) });
+    }
+  }
+}), appIconField = sanity.defineArrayMember({
+  name: "appIconField",
+  type: "object",
+  title: "Icon",
+  description: "Insert an icon.",
+  icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F9FF}" }),
+  fields: [sanity.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) => React__namespace.isValidElement(props.media) ? props.media : props.fallbackTitle
+  },
+  preview: {
+    select: {
+      icon: "icon"
+    },
+    prepare({ icon }) {
+      return {
+        media: /* @__PURE__ */ jsxRuntime.jsx("span", { role: "img", className: "inline-block size-[1em] shrink-0 text-current", title: icon ?? "Icon", children: "\u{1F9FF}" })
+      };
+    }
+  }
+}), inlineMediaField = sanity.defineArrayMember({
+  name: "inlineMediaField",
+  type: "object",
+  title: "Inline Media",
+  description: "Embed inline video or image content.",
+  icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1FAE7}" }),
+  fields: [
+    sanity.defineField({
+      name: "media",
+      type: "wild.media"
+    })
+  ],
+  components: {
+    // This is the inline-preview in the PortableText editor.
+    preview: (props) => ({
+      video: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F3A5}" }),
+      image: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F5BC}\uFE0F" }),
+      lottie: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F300}" }),
+      rive: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F36D}" })
+    })[props.type] || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F5BC}\uFE0F" })
+  },
+  preview: {
+    select: {
+      type: "media.type"
+    }
+  }
+}), typeNameBasic = "wild.richtext.basic", typeNameExtended = "wild.richtext.extended";
+function StudioLayout(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+          fieldset [data-testid="pt-editor"][data-fullscreen="false"] {
+            height: var(--pt-editor-height, initial);
+          }
+        `
+        }
+      }
+    ),
+    props.renderDefault(props)
+  ] });
+}
+const wildSanityRichtextFieldPlugin = sanity.definePlugin((config) => {
+  const userBlocks = config?.blocks ?? [], userSpans = config?.spans ?? [], userDecorators = config?.decorators ?? [], userAnnotations = config?.annotations ?? [], userLists = config?.lists ?? [], userStyles = config?.styles ?? [];
+  return {
+    name: "@madebywild/sanity-richtext-field",
+    studio: {
+      components: {
+        layout: StudioLayout
+      }
+    },
+    schema: {
+      types: [
+        sanity.defineType({
+          name: typeNameBasic,
+          type: "array",
+          title: "Rich Text",
+          description: "Rich text content with formatting options.",
+          icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2328\uFE0F" }),
+          components: {
+            // biome-ignore lint/suspicious/noExplicitAny: Sanity doesn't provide these types.
+            field: (props) => (
+              // The CSS variable is used the set the min-height of the Portable Text editor.
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { "--pt-editor-height": "10rem" }, children: props.renderDefault({ ...props, initialActive: !0 }) })
+            )
+          },
+          of: [
+            sanity.defineArrayMember({
+              type: "block",
+              options: {
+                spellCheck: !1,
+                unstable_whitespaceOnPasteMode: "normalize"
+              },
+              of: [appIconField, inlineMediaField],
+              styles: [],
+              lists: [],
+              marks: {
+                annotations: [linkField],
+                decorators: [
+                  { title: "Strong", value: "strong" },
+                  { title: "Emphasis", value: "em" }
+                ]
+              }
+            })
+          ]
+        }),
+        sanity.defineType({
+          name: typeNameExtended,
+          type: "array",
+          title: "Rich Text",
+          description: "Rich text content with formatting options.",
+          icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2328\uFE0F" }),
+          components: {
+            // biome-ignore lint/suspicious/noExplicitAny: Sanity doesn't provide these types.
+            field: (props) => (
+              // The CSS variable is used the set the min-height of the Portable Text editor.
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { "--pt-editor-height": "50vh" }, children: props.renderDefault({ ...props, initialActive: !0 }) })
+            )
+          },
+          of: [
+            ...userBlocks,
+            ...blocks,
+            sanity.defineArrayMember({
+              type: "block",
+              options: {
+                spellCheck: config?.spellCheck ?? !0,
+                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: () => /* @__PURE__ */ jsxRuntime.jsx("sup", { children: "[1]" }),
+                    component: (props) => /* @__PURE__ */ jsxRuntime.jsx("sup", { style: { verticalAlign: "super" }, children: props.children })
+                  }
+                ]
+              }
+            })
+          ]
+        })
+      ]
+    }
+  };
+});
+exports.typeNameBasic = typeNameBasic;
+exports.typeNameExtended = typeNameExtended;
+exports.wildSanityRichtextFieldPlugin = wildSanityRichtextFieldPlugin;
 //# sourceMappingURL=index.cjs.map