datocms-plugin-sdk 1.0.0-alpha.0 → 1.0.0

package/src/connect.ts

@@ -1,17 +1,14 @@
 import connectToParent from 'penpal/lib/connectToParent';
-import {
-  Field,
-  Item,
-  ItemCreateSchema,
-  ItemType,
-  ItemUpdateSchema,
-} from './SiteApiSchema';
+import { SchemaTypes } from '@datocms/cma-client';
 import {
   AssetSource,
   ContentAreaSidebarItem,
   FieldExtensionOverride,
+  InitialLocationQueryForItemSelector,
   InitPropertiesAndMethods,
+  ItemFormSidebar,
   ItemFormSidebarPanel,
+  ItemPresentationInfo,
   MainNavigationTab,
   ManualFieldExtension,
   OnBootMethods,
@@ -30,6 +27,8 @@ import {
   RenderPagePropertiesAndMethods,
   RenderSidebarPanelMethods,
   RenderSidebarPanelPropertiesAndMethods,
+  RenderSidebarPropertiesAndMethods,
+  RenderSidebarMethods,
   SettingsAreaSidebarItemGroup,
 } from './types';
 import {
@@ -42,6 +41,7 @@ import {
   isRenderModalParent,
   isRenderPageParent,
   isRenderSidebarPanelParent,
+  isRenderSidebarParent,
   Parent,
 } from './guards';
 import {
@@ -52,6 +52,12 @@ import {
   StructuredTextCustomMark,
 } from '.';
 
+type Field = SchemaTypes.Field;
+type Item = SchemaTypes.Item;
+type ItemCreateSchema = SchemaTypes.ItemCreateSchema;
+type ItemType = SchemaTypes.ItemType;
+type ItemUpdateSchema = SchemaTypes.ItemUpdateSchema;
+
 export type SizingUtilities = {
   /**
    * Listens for DOM changes and automatically calls `setHeight` when it detects
@@ -82,6 +88,8 @@ export type RenderAssetSourceCtx = RenderAssetSourcePropertiesAndMethods &
   SizingUtilities;
 export type RenderItemFormSidebarPanelCtx =
   RenderSidebarPanelPropertiesAndMethods & SizingUtilities;
+export type RenderItemFormSidebarCtx = RenderSidebarPropertiesAndMethods &
+  SizingUtilities;
 export type RenderItemFormOutletCtx = RenderItemFormOutletPropertiesAndMethods &
   SizingUtilities;
 export type RenderFieldExtensionCtx = RenderFieldExtensionPropertiesAndMethods &
@@ -147,6 +155,29 @@ export type FullConnectParameters = {
     ctx: OnBootCtx,
   ) => MaybePromise<boolean>;
 
+  /**
+   * Use this function to customize the presentation of a record in records
+   * collections and "Single link" or "Multiple links" field
+   *
+   * @tag presentation
+   */
+  buildItemPresentationInfo: (
+    item: Item,
+    ctx: OnBootCtx,
+  ) => MaybePromise<ItemPresentationInfo | undefined>;
+
+  /**
+   * Use this function to customize the initial filters when opening an record
+   * selector via a "Single link" or "Multiple links" field
+   *
+   * @tag locationQuery
+   */
+  initialLocationQueryForItemSelector: (
+    openerfield: Item,
+    itemType: ItemType,
+    ctx: OnBootCtx,
+  ) => MaybePromise<InitialLocationQueryForItemSelector | undefined>;
+
   /**
    * Use this function to declare new tabs you want to add in the top-bar of the
    * UI
@@ -195,6 +226,14 @@ export type FullConnectParameters = {
     ctx: IntentCtx,
   ) => ItemFormSidebarPanel[];
 
+  /**
+   * Use this function to declare new sidebar to be shown when the user edits
+   * records of a particular model
+   *
+   * @tag sidebarPanels
+   */
+  itemFormSidebars: (itemType: ItemType, ctx: IntentCtx) => ItemFormSidebar[];
+
   /**
    * Use this function to declare custom outlets to be shown at the top of the
    * record's editing page
@@ -268,6 +307,16 @@ export type FullConnectParameters = {
     sidebarPaneId: string,
     ctx: RenderItemFormSidebarPanelCtx,
   ) => void;
+  /**
+   * This function will be called when the plugin needs to render a sidebar (see
+   * the `itemFormSidebars` function)
+   *
+   * @tag sidebarPanels
+   */
+  renderItemFormSidebar: (
+    sidebarId: string,
+    ctx: RenderItemFormSidebarCtx,
+  ) => void;
   /**
    * This function will be called when the plugin needs to render an outlet (see
    * the `itemFormOutlets` function)
@@ -357,9 +406,7 @@ const buildRenderUtils = (parent: { setHeight: (number: number) => void }) => {
         ? Math.max(
             document.body.scrollHeight,
             document.body.offsetHeight,
-            document.documentElement.clientHeight,
-            document.documentElement.scrollHeight,
-            document.documentElement.offsetHeight,
+            document.documentElement.getBoundingClientRect().height,
           )
         : height;
 
@@ -370,29 +417,39 @@ const buildRenderUtils = (parent: { setHeight: (number: number) => void }) => {
   };
 
   let resizeObserver: ResizeObserver | null = null;
+  let mutationObserver: MutationObserver | null = null;
+  const onMutation = () => updateHeight();
 
   const startAutoResizer = () => {
     updateHeight();
 
-    if (resizeObserver) {
-      return;
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(onMutation);
+      resizeObserver.observe(document.documentElement);
     }
 
-    resizeObserver = new ResizeObserver(() => {
-      // entries[entries.length - 1].borderBoxSize[0].blockSize;
-      updateHeight();
-    });
+    if (!mutationObserver) {
+      mutationObserver = new MutationObserver(onMutation);
 
-    resizeObserver.observe(document.documentElement);
+      mutationObserver.observe(window.document.body, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    }
   };
 
   const stopAutoResizer = () => {
-    if (!resizeObserver) {
-      return;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
     }
 
-    resizeObserver.disconnect();
-    resizeObserver = null;
+    if (mutationObserver) {
+      mutationObserver.disconnect();
+      mutationObserver = null;
+    }
   };
 
   return { updateHeight, startAutoResizer, stopAutoResizer };
@@ -408,6 +465,7 @@ export async function connect(
     contentAreaSidebarItems,
     manualFieldExtensions,
     itemFormSidebarPanels,
+    itemFormSidebars,
     itemFormOutlets,
   } = configuration;
   // rome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -439,6 +497,7 @@ export async function connect(
       contentAreaSidebarItems,
       manualFieldExtensions,
       itemFormSidebarPanels,
+      itemFormSidebars,
       itemFormOutlets,
       overrideFieldExtensions: toMultifield(
         configuration.overrideFieldExtensions,
@@ -609,6 +668,27 @@ export async function connect(
     render(initialSettings as Settings);
   }
 
+  if (isRenderSidebarParent(parent, initialSettings)) {
+    type Settings = AwaitedReturnType<RenderSidebarMethods['getSettings']>;
+
+    const renderUtils = buildRenderUtils(parent);
+
+    const render = (settings: Settings) => {
+      if (!configuration.renderItemFormSidebar) {
+        return;
+      }
+
+      configuration.renderItemFormSidebar(settings.sidebarId, {
+        ...parent,
+        ...settings,
+        ...renderUtils,
+      });
+    };
+
+    listener = render;
+    render(initialSettings as Settings);
+  }
+
   if (isRenderItemFormOutletParent(parent, initialSettings)) {
     type Settings = AwaitedReturnType<
       RenderItemFormOutletMethods['getSettings']

package/src/guards.ts

@@ -8,6 +8,7 @@ import {
   RenderSidebarPanelMethods,
   RenderModalMethods,
   RenderAssetSourceMethods,
+  RenderSidebarMethods,
 } from './types';
 
 export type Parent = { getSettings: () => Promise<{ mode: string }> };
@@ -31,6 +32,10 @@ export const isRenderSidebarPanelParent = buildGuard<RenderSidebarPanelMethods>(
   'renderItemFormSidebarPanel',
 );
 
+export const isRenderSidebarParent = buildGuard<RenderSidebarMethods>(
+  'renderItemFormSidebar',
+);
+
 export const isRenderItemFormOutletParent =
   buildGuard<RenderItemFormOutletMethods>('renderItemFormOutlet');
 

package/src/index.ts

@@ -1,15 +1,15 @@
-import {
-  Account,
-  Field,
-  Item,
-  ItemType,
-  Plugin,
-  Site,
-  SsoUser,
-  Upload,
-  User,
-  Role,
-} from './SiteApiSchema';
+import { SchemaTypes } from '@datocms/cma-client';
+
+type Account = SchemaTypes.Account;
+type Field = SchemaTypes.Field;
+type Item = SchemaTypes.Item;
+type ItemType = SchemaTypes.ItemType;
+type Plugin = SchemaTypes.Plugin;
+type Site = SchemaTypes.Site;
+type SsoUser = SchemaTypes.SsoUser;
+type Upload = SchemaTypes.Upload;
+type User = SchemaTypes.User;
+type Role = SchemaTypes.Role;
 
 export type {
   Account,