tinacms 3.7.0 → 3.7.1

package/dist/index.js

@@ -23,6 +23,7 @@ import { Command as Command$2 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { PopoverAnchor } from "@radix-ui/react-popover";
+import posthog from "posthog-js";
 import { createSlatePlugin as createSlatePlugin$1, someHtmlElement, findHtmlParentElement, createTSlatePlugin as createTSlatePlugin$1, RangeApi as RangeApi$1, TextApi as TextApi$1, HtmlPlugin as HtmlPlugin$1, NodeApi as NodeApi$1, ElementApi as ElementApi$1, Hotkeys, isHotkey as isHotkey$1, isUrl as isUrl$1, getEditorPlugin as getEditorPlugin$1, bindFirst as bindFirst$1, sanitizeUrl, PathApi as PathApi$1, isDefined as isDefined$1, PointApi as PointApi$1, BaseParagraphPlugin as BaseParagraphPlugin$1, match as match$2, deleteMerge, getPluginTypes, queryNode as queryNode$1, isType, getInjectMatch as getInjectMatch$1, traverseHtmlElements, isHtmlBlockElement as isHtmlBlockElement$1, postCleanHtml, mergeProps } from "@udecode/plate";
 import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { withTriggerCombobox, filterWords } from "@udecode/plate-combobox";
@@ -46,7 +47,6 @@ import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalList
 import { CSS } from "@dnd-kit/utilities";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
-import posthog from "posthog-js";
 import { HexColorPicker } from "react-colorful";
 import * as dropzone from "react-dropzone";
 import { Command as Command$3 } from "@udecode/cmdk";
@@ -34754,6 +34754,101 @@ function ItalicIcon(props) {
     ))
   );
 }
+const BranchSwitchedEvent = "branch-switched";
+const BranchSwitcherOpenedEvent = "branch-switcher-opened";
+const BranchSwitcherSearchEvent = "branch-switcher-search";
+const BranchSwitcherDropDownEvent = "branch-switcher-dropdown";
+const BranchSwitcherPRClickedEvent = "branch-switcher-pr-clicked";
+const SavedContentEvent = "saved-content";
+const SaveContentErrorEvent = "save-content-error";
+const FormResetEvent = "form-reset";
+const MediaManagerContentUploadedEvent = "media-manager-content-uploaded";
+const MediaManagerContentDeletedEvent = "media-manager-content-deleted";
+const RichTextEditorSwitchedEvent = "rich-text-editor-switched";
+const EventLogPageViewedEvent = "event-log-page-viewed";
+const TinaCMSStartedEvent = "tina-cms-started";
+const CollectionListPageItemClickedEvent = "collection-list-page-item-clicked";
+const CollectionListPageSortEvent = "collection-list-page-sort";
+const CollectionListPageSearchEvent = "collection-list-page-search";
+const CloudConfigNavComponentClickedEvent = "cloud-config-nav-component-clicked";
+const SlashCommandOpenedEvent = "slash-command-opened";
+const SlashCommandUsedEvent = "slash-command-used";
+let posthogClient = null;
+let isInitialized = false;
+let initializationPromise = null;
+const POSTHOG_CONFIG_ENDPOINT = "https://identity-v2.tinajs.io/v2/posthog-token";
+async function fetchPostHogConfig() {
+  try {
+    const response = await fetch(POSTHOG_CONFIG_ENDPOINT, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      console.warn(`Failed to fetch PostHog config: ${response.statusText}`);
+      return {};
+    }
+    return await response.json();
+  } catch (error2) {
+    console.warn(
+      "Failed to fetch PostHog config:",
+      error2 instanceof Error ? error2.message : "Unknown error"
+    );
+    return {};
+  }
+}
+async function initializePostHog(mode = "anonymous") {
+  if (isInitialized) {
+    return posthogClient;
+  }
+  if (initializationPromise) {
+    return initializationPromise;
+  }
+  if (mode === "disabled") {
+    isInitialized = true;
+    return null;
+  }
+  if (process.env.TINA_DEV === "true") {
+    isInitialized = true;
+    return null;
+  }
+  initializationPromise = (async () => {
+    const config = await fetchPostHogConfig();
+    if (!config.api_key) {
+      console.warn(
+        "PostHog API key not found. PostHog tracking will be disabled."
+      );
+      isInitialized = true;
+      return null;
+    }
+    posthog.init(config.api_key, {
+      api_host: config.host || "https://us.i.posthog.com",
+      persistence: "localStorage",
+      autocapture: false,
+      capture_pageview: false,
+      disable_session_recording: true,
+      disable_compression: true
+    });
+    posthogClient = posthog;
+    isInitialized = true;
+    return posthogClient;
+  })();
+  return initializationPromise;
+}
+function captureEvent(event, properties2) {
+  if (!posthogClient) {
+    return;
+  }
+  try {
+    posthogClient.capture(event, {
+      ...properties2,
+      system: "tinacms/tinacms"
+    });
+  } catch (error2) {
+    console.error("Error capturing PostHog event:", error2);
+  }
+}
 var useComboboxInput = ({
   autoFocus = true,
   cancelInputOnArrowLeftRight = true,
@@ -34903,7 +34998,7 @@ const InlineCombobox = ({
     },
     [setValueProp, hasValueProp]
   );
-  const [insertPoint, setInsertPoint] = useState(null);
+  const insertPoint = React__default.useRef(null);
   useEffect(() => {
     const path3 = editor.api.findPath(element);
     if (!path3)
@@ -34912,7 +35007,7 @@ const InlineCombobox = ({
     if (!point3)
       return;
     const pointRef3 = editor.api.pointRef(point3);
-    setInsertPoint(pointRef3);
+    insertPoint.current = pointRef3.current;
     return () => {
       pointRef3.unref();
     };
@@ -34926,12 +35021,6 @@ const InlineCombobox = ({
           at: (insertPoint == null ? void 0 : insertPoint.current) ?? void 0
         });
       }
-      if (cause === "arrowLeft" || cause === "arrowRight") {
-        editor.tf.move({
-          distance: 1,
-          reverse: cause === "arrowLeft"
-        });
-      }
     },
     ref: inputRef
   });
@@ -35129,6 +35218,9 @@ const rules = [
 const SlashInputElement = withRef$1(
   ({ className, ...props }, ref) => {
     const { children, editor, element } = props;
+    useEffect(() => {
+      captureEvent(SlashCommandOpenedEvent);
+    }, []);
     return /* @__PURE__ */ React__default.createElement(
       PlateElement,
       {
@@ -35142,7 +35234,12 @@ const SlashInputElement = withRef$1(
         {
           key: value,
           keywords: keywords2,
-          onClick: () => onSelect(editor),
+          onClick: () => {
+            onSelect(editor);
+            captureEvent(SlashCommandUsedEvent, {
+              command: value
+            });
+          },
           value
         },
         /* @__PURE__ */ React__default.createElement(Icon, { "aria-hidden": true, className: "mr-2 size-4" }),
@@ -41516,7 +41613,15 @@ const Blocks = ({
   meta,
   index
 }) => {
-  const addItem = React.useCallback(
+  const [newObjects, setNewObjects] = useState(/* @__PURE__ */ new Set());
+  const prevPristine = useRef(meta.pristine);
+  useEffect(() => {
+    if (!prevPristine.current && meta.pristine) {
+      setNewObjects(/* @__PURE__ */ new Set());
+    }
+    prevPristine.current = meta.pristine;
+  }, [meta.pristine]);
+  const addItem = useCallback(
     (name2, template) => {
       let obj = {};
       if (typeof template.defaultItem === "function") {
@@ -41525,6 +41630,7 @@ const Blocks = ({
         obj = template.defaultItem || {};
       }
       obj._template = name2;
+      setNewObjects((prev) => new Set(prev).add(obj));
       form.mutators.push(field.name, obj);
     },
     [field.name, form.mutators]
@@ -41587,6 +41693,7 @@ const Blocks = ({
             tinaForm,
             isMin,
             fixedLength,
+            isNew: newObjects.has(block2),
             ...itemProps(block2)
           }
         );
@@ -41601,7 +41708,8 @@ const BlockListItem = ({
   index,
   template,
   isMin,
-  fixedLength
+  fixedLength,
+  isNew
 }) => {
   const cms = useCMS$1();
   const removeItem = React.useCallback(() => {
@@ -41645,6 +41753,7 @@ const BlockListItem = ({
       onMouseOut: () => setHoveredField({ id: null, fieldName: null })
     },
     /* @__PURE__ */ React.createElement(GroupLabel, null, label || template.label),
+    isNew && /* @__PURE__ */ React.createElement("span", { className: "mr-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] border-[0.5px] border-tina-orange/50 font-semibold bg-tina-orange/10 text-tina-orange leading-none" }, "NEW"),
     /* @__PURE__ */ React.createElement(BiPencil, { className: "h-5 w-auto fill-current text-gray-200 group-hover:text-inherit transition-colors duration-150 ease-out" })
   ), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem }))));
 };
@@ -44016,99 +44125,6 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableCaption.displayName = "TableCaption";
-let posthogClient = null;
-let isInitialized = false;
-let initializationPromise = null;
-const POSTHOG_CONFIG_ENDPOINT = "https://identity-v2.tinajs.io/v2/posthog-token";
-async function fetchPostHogConfig() {
-  try {
-    const response = await fetch(POSTHOG_CONFIG_ENDPOINT, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-    if (!response.ok) {
-      console.warn(`Failed to fetch PostHog config: ${response.statusText}`);
-      return {};
-    }
-    return await response.json();
-  } catch (error2) {
-    console.warn(
-      "Failed to fetch PostHog config:",
-      error2 instanceof Error ? error2.message : "Unknown error"
-    );
-    return {};
-  }
-}
-async function initializePostHog(mode = "anonymous") {
-  if (isInitialized) {
-    return posthogClient;
-  }
-  if (initializationPromise) {
-    return initializationPromise;
-  }
-  if (mode === "disabled") {
-    isInitialized = true;
-    return null;
-  }
-  if (process.env.TINA_DEV === "true") {
-    isInitialized = true;
-    return null;
-  }
-  initializationPromise = (async () => {
-    const config = await fetchPostHogConfig();
-    if (!config.api_key) {
-      console.warn(
-        "PostHog API key not found. PostHog tracking will be disabled."
-      );
-      isInitialized = true;
-      return null;
-    }
-    posthog.init(config.api_key, {
-      api_host: config.host || "https://us.i.posthog.com",
-      persistence: "localStorage",
-      autocapture: false,
-      capture_pageview: false,
-      disable_session_recording: true,
-      disable_compression: true
-    });
-    posthogClient = posthog;
-    isInitialized = true;
-    return posthogClient;
-  })();
-  return initializationPromise;
-}
-function captureEvent(event, properties2) {
-  if (!posthogClient) {
-    return;
-  }
-  try {
-    posthogClient.capture(event, {
-      ...properties2,
-      system: "tinacms/tinacms"
-    });
-  } catch (error2) {
-    console.error("Error capturing PostHog event:", error2);
-  }
-}
-const BranchSwitchedEvent = "branch-switched";
-const BranchSwitcherOpenedEvent = "branch-switcher-opened";
-const BranchSwitcherSearchEvent = "branch-switcher-search";
-const BranchSwitcherDropDownEvent = "branch-switcher-dropdown";
-const BranchSwitcherPRClickedEvent = "branch-switcher-pr-clicked";
-const SavedContentEvent = "saved-content";
-const SaveContentErrorEvent = "save-content-error";
-const FormResetEvent = "form-reset";
-const MediaManagerContentUploadedEvent = "media-manager-content-uploaded";
-const MediaManagerContentDeletedEvent = "media-manager-content-deleted";
-const RichTextEditorSwitchedEvent = "rich-text-editor-switched";
-const EventLogPageViewedEvent = "event-log-page-viewed";
-const TinaCMSStartedEvent = "tina-cms-started";
-const CollectionListPageItemClickedEvent = "collection-list-page-item-clicked";
-const CollectionListPageSortEvent = "collection-list-page-sort";
-const CollectionListPageSearchEvent = "collection-list-page-search";
-const CloudConfigNavComponentClickedEvent = "cloud-config-nav-component-clicked";
 const IndexStatus$1 = ({ indexingStatus }) => {
   const styles = {
     complete: {
@@ -46908,7 +46924,7 @@ const getDocumentEditUrl = async (cms, document2) => {
   return editUrl;
 };
 const scanDocumentForMedia = (documentContent, mediaUsages) => {
-  const matchedIds = /* @__PURE__ */ new Set();
+  const matchedSrcs = /* @__PURE__ */ new Set();
   for (const mediaUsage of mediaUsages) {
     const src = JSON.stringify(mediaUsage.media.src).slice(1, -1);
     let index = documentContent.indexOf(src);
@@ -46918,18 +46934,18 @@ const scanDocumentForMedia = (documentContent, mediaUsages) => {
       const isPrevValid = !prevChar || !/[a-zA-Z0-9_.%~+-]/.test(prevChar);
       const isNextValid = !nextChar || !/[a-zA-Z0-9_.%~+-]/.test(nextChar);
       if (isPrevValid && isNextValid) {
-        matchedIds.add(mediaUsage.media.id);
+        matchedSrcs.add(mediaUsage.media.src);
         break;
       }
       index = documentContent.indexOf(src, index + 1);
     }
   }
-  return matchedIds;
+  return matchedSrcs;
 };
 const THUMBNAIL_SIZES = [MEDIA_USAGE_THUMBNAIL_SIZE];
 const BATCH_SIZE = 100;
 const UI_YIELD_INTERVAL = 50;
-const collectAllMedia = async (cms, mediaIdToUsageMap, currentDirectory) => {
+const collectAllMedia = async (cms, mediaSrcToUsageMap, currentDirectory) => {
   const subDirectories = [];
   let currentOffset = void 0;
   let moreOffsetsAvailable = true;
@@ -46945,7 +46961,7 @@ const collectAllMedia = async (cms, mediaIdToUsageMap, currentDirectory) => {
           const isImg = isImage(item.filename);
           const isVid = isVideo(item.filename);
           const type2 = isImg ? "image" : isVid ? "video" : "other";
-          mediaIdToUsageMap[item.id] = {
+          mediaSrcToUsageMap[item.src] = {
             media: item,
             type: type2,
             usedIn: []
@@ -46965,15 +46981,15 @@ const collectAllMedia = async (cms, mediaIdToUsageMap, currentDirectory) => {
   }
   if (subDirectories.length > 0) {
     await Promise.all(
-      subDirectories.map((dir) => collectAllMedia(cms, mediaIdToUsageMap, dir))
+      subDirectories.map((dir) => collectAllMedia(cms, mediaSrcToUsageMap, dir))
     );
   }
 };
-const scanCollectionForMediaUsage = async (cms, collectionMeta, mediaIdToUsageMap) => {
+const scanCollectionForMediaUsage = async (cms, collectionMeta, mediaSrcToUsageMap) => {
   var _a2, _b;
   let hasNextPage = true;
   let after3 = void 0;
-  const mediaUsages = Object.values(mediaIdToUsageMap);
+  const mediaUsages = Object.values(mediaSrcToUsageMap);
   const listQuery = `
     query($after: String, $first: Float) {
       collectionConnection: ${collectionMeta.name}Connection(first: $first, after: $after) {
@@ -47019,15 +47035,15 @@ const scanCollectionForMediaUsage = async (cms, collectionMeta, mediaIdToUsageMa
           await new Promise((resolve) => setTimeout(resolve, 0));
         }
         const edge = edges2[i2];
-        const matchedIds = scanDocumentForMedia(
+        const matchedSrcs = scanDocumentForMedia(
           JSON.stringify(edge.node._values),
           mediaUsages
         );
-        if (matchedIds.size === 0)
+        if (matchedSrcs.size === 0)
           continue;
         const editUrl = await getDocumentEditUrl(cms, edge.node);
-        matchedIds.forEach((mediaId) => {
-          const usage = mediaIdToUsageMap[mediaId];
+        matchedSrcs.forEach((mediaSrc) => {
+          const usage = mediaSrcToUsageMap[mediaSrc];
           if (usage) {
             usage.usedIn.push({
               collectionName: collectionMeta.name,
@@ -47046,18 +47062,18 @@ const scanCollectionForMediaUsage = async (cms, collectionMeta, mediaIdToUsageMa
   }
 };
 const scanAllMedia = async (cms, onProgress) => {
-  const mediaIdToUsageMap = {};
-  await collectAllMedia(cms, mediaIdToUsageMap, "");
+  const mediaSrcToUsageMap = {};
+  await collectAllMedia(cms, mediaSrcToUsageMap, "");
   const collectionMetas = cms.api.tina.schema.getCollections();
   for (let i2 = 0; i2 < collectionMetas.length; i2++) {
     await scanCollectionForMediaUsage(
       cms,
       collectionMetas[i2],
-      mediaIdToUsageMap
+      mediaSrcToUsageMap
     );
     onProgress == null ? void 0 : onProgress((i2 + 1) / collectionMetas.length * 100);
   }
-  return Object.values(mediaIdToUsageMap);
+  return Object.values(mediaSrcToUsageMap);
 };
 const useMediaUsageScanner = () => {
   const cms = useCMS$1();
@@ -47432,7 +47448,7 @@ const MediaUsageTable = ({
   const table = useReactTable({
     data: mediaItems,
     columns,
-    getRowId: (row) => row.media.id,
+    getRowId: (row) => row.media.src,
     initialState: { columnVisibility: { type: false } },
     state: { sorting, columnFilters, expanded },
     onColumnFiltersChange: setColumnFilters,
@@ -47933,7 +47949,7 @@ const NavProvider = ({
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version$1 = "3.7.0";
+const version$1 = "3.7.1";
 const main = "dist/index.js";
 const module = "./dist/index.js";
 const exports = {
@@ -48043,6 +48059,8 @@ const dependencies = {
   "react-colorful": "catalog:",
   "react-datetime": "catalog:",
   "react-day-picker": "^9.13.0",
+  "react-dnd": "catalog:",
+  "react-dnd-html5-backend": "catalog:",
   "react-dropzone": "catalog:",
   "react-final-form": "catalog:",
   "react-icons": "^5.4.0",
@@ -48980,11 +48998,11 @@ const FormLists = (props) => {
     "input",
     {
       type: "checkbox",
-      checked: !showReferences,
-      onChange: (e3) => setShowReferences(!e3.target.checked),
+      checked: showReferences,
+      onChange: (e3) => setShowReferences(e3.target.checked),
       className: "w-4 h-4 text-orange-500 border-gray-300 rounded focus:ring-orange-500"
     }
-  ), /* @__PURE__ */ React.createElement("span", null, "Direct references only"))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-x-auto overflow-y-auto min-h-0" }, cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}` }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("span", null, "Show all references"))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-x-auto overflow-y-auto min-h-0" }, cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}` }, /* @__PURE__ */ React.createElement(
     FormList,
     {
       setActiveFormId: (id2) => {

package/dist/lib/posthog/posthog.d.ts

@@ -66,3 +66,9 @@ export declare const CloudConfigNavComponentClickedEvent: string;
 export type CloudConfigNavComponentClickedPayload = {
     itemType: 'Project Config' | 'User Management' | 'Support';
 };
+export declare const SlashCommandOpenedEvent: string;
+export type SlashInputElementOpenedPayload = Record<string, never>;
+export declare const SlashCommandUsedEvent: string;
+export type SlashCommandUsedPayload = {
+    command: string;
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -103,6 +103,8 @@
     "react-colorful": "^5.6.1",
     "react-datetime": "^3.3.1",
     "react-day-picker": "^9.13.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dropzone": "14.2.3",
     "react-final-form": "^6.5.9",
     "react-icons": "^5.4.0",
@@ -114,7 +116,7 @@
     "zod": "^3.24.2",
     "@tinacms/mdx": "2.1.0",
     "@tinacms/schema-tools": "2.7.0",
-    "@tinacms/search": "1.2.7"
+    "@tinacms/search": "1.2.8"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",