@madebywild/sanity-richtext-field 0.1.9 → 0.1.10

package/dist/index.cjs

@@ -16,152 +16,7 @@ function _interopNamespaceCompat(e) {
     }
   }), n.default = e, Object.freeze(n);
 }
-var o__namespace = /* @__PURE__ */ _interopNamespaceCompat(o);
-const presets = {
-  basic: {
-    size: "sm",
-    initiallyActive: !0,
-    whitelist: ["em", "strong", "link"]
-  },
-  full: {
-    size: "lg",
-    initiallyActive: !1,
-    // Empty blacklist means "enable all".
-    blacklist: []
-  }
-};
-function handleListKind(entry, findNeedle) {
-  const list = entry.type?.options?.list;
-  if (!list) return entry;
-  const filteredList = list.filter((s) => findNeedle(s.value));
-  return {
-    ...entry,
-    type: {
-      ...entry.type,
-      options: {
-        ...entry.type.options,
-        list: filteredList
-      }
-    }
-  };
-}
-function handleOfKind(entry, findNeedle) {
-  const list = entry.type?.of;
-  if (!list) return entry;
-  const filteredOf = list.filter((a) => findNeedle(a.name));
-  return {
-    ...entry,
-    type: {
-      ...entry.type,
-      of: filteredOf
-    }
-  };
-}
-const sizeToHeightMap = {
-  sm: "10rem",
-  lg: "50vh"
-};
-function RichtextInput({
-  richtextConfig,
-  ...props
-}) {
-  const schemaOptions = props.schemaType.options, presetOptions = schemaOptions?.preset ? presets[schemaOptions.preset] : {}, options = o__namespace.useMemo(() => {
-    const {
-      preset: _2,
-      ...mainOptions
-    } = schemaOptions ?? {};
-    return tsDeepmerge.merge(presetOptions, mainOptions);
-  }, [schemaOptions, presetOptions]), initiallyActive = options?.initiallyActive ?? !1, height = options?.size ? sizeToHeightMap[options.size] : sizeToHeightMap.sm, whitelist = options?.whitelist, blacklist = options?.blacklist;
-  whitelist && blacklist && console.warn("Wild Sanity Rich Text Field: Both whitelist and blacklist are set. Whitelist will take precedence.");
-  const filterPartsBy = o__namespace.useCallback((parts2, findNeedle) => parts2?.filter((b) => {
-    const needle = findNeedle(b);
-    return needle ? whitelist ? whitelist.includes(needle) : blacklist ? !blacklist.includes(needle) : !1 : !0;
-  }), [whitelist, blacklist]), enabledParts = o__namespace.useMemo(() => {
-    const blocks2 = filterPartsBy(richtextConfig.blocks, (s) => s.name), spans2 = filterPartsBy(richtextConfig.spans, (s_0) => s_0.name), lists2 = filterPartsBy(richtextConfig.lists, (s_1) => s_1.value), annotations2 = filterPartsBy(richtextConfig.annotations, (s_2) => s_2.name), decorators2 = filterPartsBy(richtextConfig.decorators, (s_3) => s_3.value), styles2 = filterPartsBy(richtextConfig.styles, (s_4) => s_4.value), normalizedStyles = styles2.length === 0 ? [...styles2, {
-      title: "Normal",
-      value: "normal"
-    }] : styles2;
-    return {
-      blocks: blocks2,
-      spans: spans2,
-      lists: lists2,
-      annotations: annotations2,
-      decorators: decorators2,
-      styles: normalizedStyles
-    };
-  }, [filterPartsBy]), reshapeSchemaTypes = o__namespace.useCallback((schema) => schema.name !== "block" ? schema : {
-    ...schema,
-    fields: schema.fields?.map((f2) => {
-      const field = f2;
-      switch (field.name) {
-        // Headings, Normal, Quote, etc.
-        case "style":
-          return handleListKind(field, (__3) => enabledParts.styles.some((b_5) => b_5.value === __3));
-        // Ul, Ol, etc.
-        case "listItem":
-          return handleListKind(field, (__2) => enabledParts.lists.some((b_4) => b_4.value === __2));
-        // Links, Colors, etc.
-        case "markDefs":
-          return handleOfKind(field, (__1) => enabledParts.annotations.some((b_3) => b_3.name === __1));
-        // Text content.
-        case "children": {
-          const spans_0 = [...enabledParts.spans, {
-            name: "span"
-          }], filtered_0 = handleOfKind(field, (__0) => spans_0.some((b_0) => b_0.name === __0));
-          return {
-            ...filtered_0,
-            type: {
-              ...filtered_0.type,
-              // Inline markers within the text content.
-              of: filtered_0.type.of?.map((t) => {
-                if (t.name !== "span") return t;
-                const span = t, annotations_0 = span.annotations?.filter((a) => enabledParts.annotations.some((b_1) => b_1.name === a.name)), decorators_0 = span.decorators?.filter((d) => enabledParts.decorators.some((b_2) => b_2.value === d.value));
-                return {
-                  ...t,
-                  annotations: annotations_0,
-                  decorators: decorators_0
-                };
-              })
-            }
-          };
-        }
-        default:
-          return field;
-      }
-    })
-  }, [enabledParts]), patchedSchemaType = o__namespace.useMemo(() => {
-    const of = props.schemaType?.of;
-    if (!Array.isArray(of)) return props.schemaType;
-    try {
-      const filtered_1 = of.filter((s_5) => s_5.name === "block" || enabledParts.blocks.some((b_6) => b_6.name === s_5.name));
-      return {
-        ...props.schemaType,
-        of: filtered_1.map((s_6) => reshapeSchemaTypes(s_6))
-      };
-    } catch (e) {
-      return console.error("Wild Sanity Rich Text Field: Error while reshaping schema types.", e), props.schemaType;
-    }
-  }, [props.schemaType, enabledParts.blocks, reshapeSchemaTypes]), enabledPartsCount = o__namespace.useMemo(() => Object.values(enabledParts).reduce((acc, curr) => acc + curr.length, 0), [enabledParts]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        [data-wild-richtext-field] [data-testid="pt-editor"][data-fullscreen="false"] {
-          height: var(--pt-editor-height, initial);
-        }
-      ` }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-wild-richtext-field": !0, style: {
-      "--pt-editor-height": height
-    }, children: props.renderDefault({
-      ...props,
-      initialActive: initiallyActive,
-      displayInlineChanges: !1,
-      // If the only enabled part is a style part, its the default "Normal" style. No need to show the toolbar.
-      hideToolbar: enabledPartsCount === 0 || enabledPartsCount === 1 && enabledParts.styles.length === 1,
-      // @ts-expect-error: schemaType.of is too narrow. The runtime type is valid.
-      schemaType: patchedSchemaType
-    }) })
-  ] });
-}
-var __assign = function() {
+var o__namespace = /* @__PURE__ */ _interopNamespaceCompat(o), __assign = function() {
   return __assign = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
@@ -1498,20 +1353,34 @@ const typeName = "wild.richtext", ColorText = dt.span`
   media: media$1
 }, strong = {
   title: "Strong",
-  value: "strong"
+  value: `${typeName}.decorator.strong`,
+  icon: icons.BoldIcon,
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { children })
 }, em = {
   title: "Emphasis",
-  value: "em"
+  value: `${typeName}.decorator.em`,
+  icon: icons.ItalicIcon,
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("em", { children })
 }, code = {
   title: "Code",
-  value: "code"
+  value: `${typeName}.decorator.code`,
+  icon: icons.CodeIcon,
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("code", { children })
 }, sup = {
   title: "Sup",
-  value: "sup",
+  value: `${typeName}.decorator.sup`,
   icon: () => /* @__PURE__ */ jsxRuntime.jsx("sup", { children: "[1]" }),
-  component: (props) => /* @__PURE__ */ jsxRuntime.jsx("sup", { style: {
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("sup", { style: {
     verticalAlign: "super"
-  }, children: props.children })
+  }, children })
 }, decorators = {
   strong,
   em,
@@ -1519,10 +1388,12 @@ const typeName = "wild.richtext", ColorText = dt.span`
   sup
 }, bullet = {
   title: "Bullet",
-  value: "bullet"
+  value: `${typeName}.list.bullet`,
+  icon: icons.UlistIcon
 }, number = {
   title: "Number",
-  value: "number"
+  value: `${typeName}.list.number`,
+  icon: icons.OlistIcon
 }, lists = {
   bullet,
   number
@@ -1582,16 +1453,37 @@ const typeName = "wild.richtext", ColorText = dt.span`
   media
 }, normal = {
   title: "Normal",
-  value: "normal"
+  value: `${typeName}.style.normal`
 }, h2 = {
   title: "Heading 2",
-  value: "h2"
+  value: `${typeName}.style.h2`,
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+    fontSize: "2.0625rem",
+    fontWeight: "700",
+    lineHeight: "calc(41 / 33)"
+  }, children })
 }, h3 = {
   title: "Heading 3",
-  value: "h3"
+  value: `${typeName}.style.h3`,
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
+    fontSize: "1.6875rem",
+    fontWeight: "700",
+    lineHeight: "calc(35 / 27)"
+  }, children })
 }, h4 = {
   title: "Heading 4",
-  value: "h4"
+  value: `${typeName}.style.h4`,
+  component: ({
+    children
+  }) => /* @__PURE__ */ jsxRuntime.jsx("h4", { style: {
+    fontSize: "1.3125rem",
+    fontWeight: "700",
+    lineHeight: "calc(29 / 21)"
+  }, children })
 }, styles = {
   normal,
   h2,
@@ -1604,7 +1496,164 @@ const typeName = "wild.richtext", ColorText = dt.span`
   lists,
   spans,
   styles
-}, wildSanityRichtextFieldPlugin = sanity.definePlugin((config) => {
+}, presets = {
+  basic: {
+    size: "sm",
+    initiallyActive: !0,
+    whitelist: ["em", "strong", "link"]
+  },
+  full: {
+    size: "lg",
+    initiallyActive: !1,
+    // Empty blacklist means "enable all".
+    blacklist: []
+  }
+};
+function handleListKind(entry, findNeedle) {
+  const list = entry.type?.options?.list;
+  if (!list) return entry;
+  const filteredList = list.filter((s) => findNeedle(s.value));
+  return {
+    ...entry,
+    type: {
+      ...entry.type,
+      options: {
+        ...entry.type.options,
+        list: filteredList
+      }
+    }
+  };
+}
+function handleOfKind(entry, findNeedle) {
+  const list = entry.type?.of;
+  if (!list) return entry;
+  const filteredOf = list.filter((a) => findNeedle(a.name));
+  return {
+    ...entry,
+    type: {
+      ...entry.type,
+      of: filteredOf
+    }
+  };
+}
+const sizeToHeightMap = {
+  sm: "10rem",
+  lg: "50vh"
+};
+function RichtextInput({
+  richtextConfig,
+  ...props
+}) {
+  const schemaOptions = props.schemaType.options, presetOptions = schemaOptions?.preset ? presets[schemaOptions.preset] : {}, options = o__namespace.useMemo(() => {
+    const {
+      preset: _2,
+      ...mainOptions
+    } = schemaOptions ?? {};
+    return tsDeepmerge.merge(presetOptions, mainOptions);
+  }, [schemaOptions, presetOptions]), initiallyActive = options?.initiallyActive ?? !1, height = options?.size ? sizeToHeightMap[options.size] : sizeToHeightMap.sm, whitelist = options?.whitelist, blacklist = options?.blacklist;
+  whitelist && blacklist && console.warn("Wild Sanity Rich Text Field: Both whitelist and blacklist are set. Whitelist will take precedence.");
+  const filterPartsBy = o__namespace.useCallback((parts2, findNeedle) => parts2?.filter((b) => {
+    const needle = findNeedle(b);
+    return needle ? whitelist ? whitelist.includes(needle) : blacklist ? !blacklist.includes(needle) : !1 : !0;
+  }), [whitelist, blacklist]), enabledParts = o__namespace.useMemo(() => {
+    const blocks2 = filterPartsBy(richtextConfig.blocks, (s) => s.name), spans2 = filterPartsBy(richtextConfig.spans, (s_0) => s_0.name), lists2 = filterPartsBy(richtextConfig.lists, (s_1) => s_1.value), annotations2 = filterPartsBy(richtextConfig.annotations, (s_2) => s_2.name), decorators2 = filterPartsBy(richtextConfig.decorators, (s_3) => s_3.value), styles2 = filterPartsBy(richtextConfig.styles, (s_4) => s_4.value), normalizedStyles = styles2.length === 0 ? [...styles2, parts.styles.normal] : styles2;
+    return {
+      blocks: blocks2,
+      spans: spans2,
+      lists: lists2,
+      annotations: annotations2,
+      decorators: decorators2,
+      styles: normalizedStyles
+    };
+  }, [filterPartsBy]), reshapeSchemaTypes = o__namespace.useCallback((schema) => schema.name !== "block" ? schema : {
+    ...schema,
+    fields: schema.fields?.map((f2) => {
+      const field = f2;
+      switch (field.name) {
+        // Headings, Normal, Quote, etc.
+        case "style":
+          return handleListKind(field, (__3) => enabledParts.styles.some((b_5) => b_5.value === __3));
+        // Ul, Ol, etc.
+        case "listItem":
+          return handleListKind(field, (__2) => enabledParts.lists.some((b_4) => b_4.value === __2));
+        // Links, Colors, etc.
+        case "markDefs":
+          return handleOfKind(field, (__1) => enabledParts.annotations.some((b_3) => b_3.name === __1));
+        // Text content.
+        case "children": {
+          const spans_0 = [...enabledParts.spans, {
+            name: "span"
+          }], filtered_0 = handleOfKind(field, (__0) => spans_0.some((b_0) => b_0.name === __0));
+          return {
+            ...filtered_0,
+            type: {
+              ...filtered_0.type,
+              // Inline markers within the text content.
+              of: filtered_0.type.of?.map((t) => {
+                if (t.name !== "span") return t;
+                const span = t, annotations_0 = span.annotations?.filter((a) => enabledParts.annotations.some((b_1) => b_1.name === a.name)), decorators_0 = span.decorators?.filter((d) => enabledParts.decorators.some((b_2) => b_2.value === d.value));
+                return {
+                  ...t,
+                  annotations: annotations_0,
+                  decorators: decorators_0
+                };
+              })
+            }
+          };
+        }
+        default:
+          return field;
+      }
+    })
+  }, [enabledParts]), patchedSchemaType = o__namespace.useMemo(() => {
+    const of = props.schemaType?.of;
+    if (!Array.isArray(of)) return props.schemaType;
+    try {
+      const filtered_1 = of.filter((s_5) => s_5.name === "block" || enabledParts.blocks.some((b_6) => b_6.name === s_5.name));
+      return {
+        ...props.schemaType,
+        of: filtered_1.map((s_6) => reshapeSchemaTypes(s_6))
+      };
+    } catch (e) {
+      return console.error("Wild Sanity Rich Text Field: Error while reshaping schema types.", e), props.schemaType;
+    }
+  }, [props.schemaType, enabledParts.blocks, reshapeSchemaTypes]), enabledPartsCount = o__namespace.useMemo(() => Object.values(enabledParts).reduce((acc, curr) => acc + curr.length, 0), [enabledParts]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        [data-wild-richtext-field] [data-testid="pt-editor"][data-fullscreen="false"] {
+          height: var(--pt-editor-height, initial);
+        }
+
+        [data-wild-richtext-field] .pt-list-item [data-list-item="wild.richtext.list.bullet"] [data-list-prefix] > span::before,
+        [data-wild-richtext-field] .pt-list-item [data-list-item="wild.richtext.list.number"] [data-list-prefix] > span::before {
+          font-size: 1.0em;
+          display: inline-block;
+          padding-top: 2px;
+          color: inherit;
+        }
+
+        [data-wild-richtext-field] .pt-list-item [data-list-item="wild.richtext.list.bullet"] [data-list-prefix] > span::before {
+          content: "\u2022";
+        }
+
+        [data-wild-richtext-field] .pt-list-item [data-list-item="wild.richtext.list.number"] [data-list-prefix] > span::before {
+          content: counter(list-level-1) ". ";
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-wild-richtext-field": !0, style: {
+      "--pt-editor-height": height
+    }, children: props.renderDefault({
+      ...props,
+      initialActive: initiallyActive,
+      displayInlineChanges: !1,
+      // If the only enabled part is a style part, its the default "Normal" style. No need to show the toolbar.
+      hideToolbar: enabledPartsCount === 0 || enabledPartsCount === 1 && enabledParts.styles.length === 1,
+      // @ts-expect-error: schemaType.of is too narrow. The runtime type is valid.
+      schemaType: patchedSchemaType
+    }) })
+  ] });
+}
+const wildSanityRichtextFieldPlugin = sanity.definePlugin((config) => {
   const userSpans = config?.spans ?? [], userLists = config?.lists ?? [], userBlocks = config?.blocks ?? [], userStyles = config?.styles ?? [], userDecorators = config?.decorators ?? [], userAnnotations = config?.annotations ?? [], richtextConfig = {
     blocks: [...userBlocks, ...Object.values(parts.blocks)],
     spans: [...userSpans, ...Object.values(parts.spans)],