@sanity/runtime-cli 13.0.3 → 13.2.0

package/dist/cores/blueprints/init.js

@@ -8,6 +8,7 @@ import { createEmptyStack } from '../../actions/blueprints/stacks.js';
 import { writeGitignoreFile } from '../../actions/git.js';
 import { writeOrUpdateNodeDependency } from '../../actions/node.js';
 import { verifyExampleExists, writeExample } from '../../actions/sanity/examples.js';
+import { getProject } from '../../actions/sanity/projects.js';
 import { BLUEPRINT_CONFIG_DIR, BLUEPRINT_CONFIG_FILE } from '../../config.js';
 import { check, filePathRelativeToCwd, labeledId, warn } from '../../utils/display/presenters.js';
 import { promptForBlueprintType, promptForProject, promptForStack, } from '../../utils/display/prompt.js';
@@ -15,7 +16,7 @@ import { blueprintConfigCore } from './config.js';
 const SCOPE_PROJECT = 'project';
 const SCOPE_ORGANIZATION = 'organization';
 export async function blueprintInitCore(options) {
-    const { bin = 'sanity', log, token, args, flags } = options;
+    const { bin = 'sanity', log, token, knownProjectId, args, flags, validateResources } = options;
     const { dir: flagDir, example: flagExample, 'blueprint-type': flagBlueprintType, 'project-id': flagProjectId, 'organization-id': flagOrganizationId, 'stack-id': flagStackId, 'stack-name': flagStackName, verbose: v = false, } = flags;
     const { dir: argDir } = args;
     const userProvidedDirName = argDir || flagDir;
@@ -54,12 +55,13 @@ export async function blueprintInitCore(options) {
                 if (!overwrite)
                     return { success: false, error: 'Initialization cancelled.' };
             }
-            const existingBlueprint = await readLocalBlueprint(log, existingBlueprintFile.blueprintFilePath);
+            const existingBlueprint = await readLocalBlueprint(log, { resources: validateResources || false }, existingBlueprintFile.blueprintFilePath);
             return blueprintConfigCore({
                 blueprint: existingBlueprint,
                 bin,
                 log,
                 token,
+                validateResources,
                 flags: {
                     edit: true,
                     'project-id': flagProjectId,
@@ -84,6 +86,7 @@ export async function blueprintInitCore(options) {
             organizationId: flagOrganizationId,
             stackId: flagStackId,
             stackName: flagStackName,
+            knownProjectId,
             log,
             token,
         });
@@ -169,7 +172,7 @@ async function handleExampleInitialization(options) {
     return { success: true };
 }
 export async function resolveScopeAndStack(params) {
-    const { projectId, organizationId, stackId, stackName, log, token } = params;
+    const { projectId, organizationId, stackId, stackName, knownProjectId, log, token } = params;
     let scopeType = SCOPE_PROJECT;
     let scopeId;
     if (projectId) {
@@ -195,10 +198,33 @@ export async function resolveScopeAndStack(params) {
         resolvedStackId = stack.id;
     }
     if (!scopeId) {
-        log('\nBlueprints are associated with a Sanity Project. Please select one:');
-        const pickedProject = await promptForProject({ token, logger: log });
-        scopeType = SCOPE_PROJECT;
-        scopeId = pickedProject.projectId;
+        log('\nBlueprints are associated with a Sanity project.');
+        // If we have a CLI project ID, offer it as a suggestion
+        if (knownProjectId) {
+            const { ok, project } = await getProject({
+                token,
+                scopeId: knownProjectId,
+                scopeType: 'project',
+                logger: log,
+            });
+            if (ok && project) {
+                const useCliProject = await confirm({
+                    message: `The CLI is configured to use "${project.displayName}" (${knownProjectId}). Use this for the blueprint?`,
+                    default: true,
+                });
+                if (useCliProject) {
+                    scopeType = SCOPE_PROJECT;
+                    scopeId = knownProjectId;
+                }
+            }
+        }
+        // If still no scope (no knownProjectId, lookup failed, or user declined), prompt for selection
+        if (!scopeId) {
+            log('Select a project:');
+            const pickedProject = await promptForProject({ token, logger: log });
+            scopeType = SCOPE_PROJECT;
+            scopeId = pickedProject.projectId;
+        }
     }
     if (!resolvedStackId) {
         log('\nBlueprints are deployed to a "Stack".');
@@ -254,8 +280,13 @@ export async function createBlueprintFiles(params) {
         ...(scopeType === SCOPE_ORGANIZATION ? { organizationId: scopeId } : { projectId: scopeId }),
     });
     log(check(`${chalk.bold('Added configuration:')} ${displayPath}/${BLUEPRINT_CONFIG_DIR}/${BLUEPRINT_CONFIG_FILE}`));
-    writeGitignoreFile(blueprintFilePath);
-    log(check(`${chalk.bold('Added .gitignore:')}    ${displayPath}/.gitignore`));
+    const gitignoreResult = writeGitignoreFile(blueprintFilePath);
+    if (gitignoreResult.action === 'created') {
+        log(check(`${chalk.bold('Added .gitignore:')}    ${displayPath}/.gitignore`));
+    }
+    else if (gitignoreResult.action === 'updated') {
+        log(check(`${chalk.bold('Updated .gitignore:')}  ${displayPath}/.gitignore`));
+    }
     if (blueprintExtension !== 'json') {
         const blueprintsPackage = '@sanity/blueprints';
         try {

package/dist/cores/functions/add.js

@@ -6,6 +6,7 @@ import { highlight } from 'cardinal';
 import chalk from 'chalk';
 import { createFunctionResource } from '../../actions/blueprints/resources.js';
 import { verifyExampleExists, writeExample } from '../../actions/sanity/examples.js';
+import { SANITY_FUNCTION_MEDIA_LIBRARY_ASSET, SANITY_FUNCTION_SCHEDULE } from '../../constants.js';
 import { check, indent, warn } from '../../utils/display/presenters.js';
 import { validateFunctionName } from '../../utils/validate/resource.js';
 const generateFunctionBlueprintResourceTemplate = (fnName, eventNames) => {
@@ -71,7 +72,17 @@ export async function functionAddCore(options) {
             }
             else {
                 const objectLiteral = configString.replace(/^(\s*)"([a-zA-Z_$][a-zA-Z0-9_$]*)":/gm, '$1$2:');
-                log(indent(highlight(`defineDocumentFunction(${objectLiteral})`)));
+                let type = 'Document';
+                switch (functionConfig.type) {
+                    case SANITY_FUNCTION_MEDIA_LIBRARY_ASSET:
+                        type = 'MediaLibraryAsset';
+                        break;
+                    case SANITY_FUNCTION_SCHEDULE:
+                        type = 'Schedule';
+                        break;
+                    default:
+                }
+                log(indent(highlight(`define${type}Function(${objectLiteral})`)));
             }
         }
         else {

package/dist/cores/functions/dev.js

@@ -7,7 +7,7 @@ export async function functionDevCore(options) {
         ? { timeout }
         : undefined;
     try {
-        await dev(host, Number(port), log, executionOptions);
+        await dev(host, Number(port), log, options.validateResources || false, executionOptions);
         log(`Server is running on http://${host}:${port}\n`);
         return {
             success: true,

package/dist/cores/functions/logs.js

@@ -105,7 +105,12 @@ function formatLog(time, level, message, utc) {
     const [dateString, timeString] = utc
         ? date.toISOString().slice(0, 19).split('T')
         : [date.toLocaleDateString(), date.toLocaleTimeString()];
-    return [chalk.bold(dateString), chalk.bold.blue(timeString), logLevel(level), message].join(' ');
+    return [
+        chalk.bold(dateString),
+        chalk.bold.blue(timeString),
+        logLevel(level.toUpperCase()),
+        message,
+    ].join(' ');
 }
 function logLevel(level) {
     if (level === 'ERROR')

package/dist/cores/index.d.ts

@@ -8,6 +8,8 @@ export interface CoreConfig {
     bin: string;
     /** The log output function. */
     log: ReturnType<typeof Logger>;
+    /** Enable resource validation during parsing */
+    validateResources?: boolean;
 }
 export interface BlueprintConfig extends CoreConfig {
     token: string;
@@ -43,7 +45,7 @@ type InitBlueprintConfigParams = CoreConfig & ({
     validateToken?: false;
     token?: string;
 });
-export declare function initBlueprintConfig({ bin, log, token, validateToken, }: InitBlueprintConfigParams): Promise<Result<BlueprintConfig>>;
-export declare function initDeployedBlueprintConfig(config: Partial<BlueprintConfig> & Pick<BlueprintConfig, 'bin' | 'log' | 'token'> & {
+export declare function initBlueprintConfig({ bin, log, token, validateResources, validateToken, }: InitBlueprintConfigParams): Promise<Result<BlueprintConfig>>;
+export declare function initDeployedBlueprintConfig(config: Partial<BlueprintConfig> & Pick<BlueprintConfig, 'bin' | 'log' | 'token' | 'validateResources'> & {
     validateToken?: boolean;
 }): Promise<Result<DeployedBlueprintConfig>>;

package/dist/cores/index.js

@@ -5,7 +5,7 @@ import { niceId } from '../utils/display/presenters.js';
 import { validTokenOrErrorMessage } from '../utils/validated-token.js';
 export * as blueprintsCores from './blueprints/index.js';
 export * as functionsCores from './functions/index.js';
-export async function initBlueprintConfig({ bin, log, token, validateToken = true, }) {
+export async function initBlueprintConfig({ bin, log, token, validateResources = false, validateToken = true, }) {
     let checkedToken = token;
     if (!token || (token && validateToken)) {
         const tokenCheck = await validTokenOrErrorMessage(log, token);
@@ -17,7 +17,7 @@ export async function initBlueprintConfig({ bin, log, token, validateToken = tru
     if (!checkedToken) {
         return { ok: false, error: 'A valid token is required but was not provided.' };
     }
-    const blueprint = await readLocalBlueprint(log);
+    const blueprint = await readLocalBlueprint(log, { resources: validateResources });
     if (blueprint.errors.length > 0) {
         log(presentBlueprintParserErrors(blueprint.errors));
         return { ok: false, error: 'Blueprint file contains errors.' };
@@ -29,6 +29,7 @@ export async function initBlueprintConfig({ bin, log, token, validateToken = tru
             blueprint,
             log,
             token: checkedToken,
+            validateResources,
         },
     };
 }
@@ -67,6 +68,7 @@ export async function initDeployedBlueprintConfig(config) {
             stackId,
             auth,
             deployedStack: stackResponse.stack,
+            validateResources: config.validateResources,
         },
     };
 }

package/dist/server/app.d.ts

@@ -1,6 +1,6 @@
 import type { Logger } from '../utils/logger.js';
 import { type InvokeExecutionOptions } from '../utils/types.js';
-declare const app: (host: string, port: number, logger: ReturnType<typeof Logger>, executionOptions?: Partial<InvokeExecutionOptions>) => void;
+declare const app: (host: string, port: number, logger: ReturnType<typeof Logger>, validateResources: boolean, executionOptions?: Partial<InvokeExecutionOptions>) => void;
 declare function parseDocumentUrl(url: string): {
     projectId: string;
     dataset: string;

package/dist/server/app.js

@@ -7,13 +7,15 @@ import config from '../config.js';
 import { isRecord } from '../utils/is-record.js';
 import { isEventType, isGroqContextOptions, } from '../utils/types.js';
 import { handleInvokeRequest } from './handlers/invoke.js';
-const app = (host, port, logger, executionOptions) => {
+const app = (host, port, logger, validateResources, executionOptions) => {
     const requestListener = async (req, res) => {
         res.setHeader('Content-Type', 'application/json');
         switch (true) {
             case req.url === '/blueprint': {
                 try {
-                    const { parsedBlueprint, projectId, organizationId } = await readLocalBlueprint(logger);
+                    const { parsedBlueprint, projectId, organizationId } = await readLocalBlueprint(logger, {
+                        resources: validateResources,
+                    });
                     res.setHeader('Content-Type', 'application/json');
                     res.writeHead(200);
                     res.end(JSON.stringify({ parsedBlueprint, projectId, organizationId })); // Use blueprint directly
@@ -42,7 +44,7 @@ const app = (host, port, logger, executionOptions) => {
                                     delete context.clientOptions.token;
                                 }
                             }
-                            const result = await handleInvokeRequest(functionName, event, metadata, context, logger, executionOptions);
+                            const result = await handleInvokeRequest(functionName, event, metadata, context, logger, validateResources, executionOptions);
                             // Add Server-Timing header
                             const timingHeaders = [];
                             for (const [key, value] of Object.entries(result.timings)) {
@@ -230,7 +232,7 @@ const app = (host, port, logger, executionOptions) => {
     const wss = new WebSocketServer({ port: 8974 });
     wss.on('connection', async function connection(ws) {
         ws.on('error', console.error);
-        const { fileInfo } = await readLocalBlueprint(logger);
+        const { fileInfo } = await readLocalBlueprint(logger, { resources: validateResources });
         watchFile(fileInfo.blueprintFilePath, { interval: 2007 }, async () => {
             ws.send('reload-blueprint');
         });

package/dist/server/handlers/invoke.d.ts

@@ -1,5 +1,5 @@
 import type { Logger } from '../../utils/logger.js';
 import type { InvocationResponse, InvokeContextOptions, InvokeExecutionOptions, InvokePayloadMetadata } from '../../utils/types.js';
-export declare function handleInvokeRequest(functionName: string, event: Record<string, unknown>, metadata: InvokePayloadMetadata, context: InvokeContextOptions, logger: ReturnType<typeof Logger>, executionOptions?: Partial<InvokeExecutionOptions>): Promise<InvocationResponse & {
+export declare function handleInvokeRequest(functionName: string, event: Record<string, unknown>, metadata: InvokePayloadMetadata, context: InvokeContextOptions, logger: ReturnType<typeof Logger>, validateResources: boolean, executionOptions?: Partial<InvokeExecutionOptions>): Promise<InvocationResponse & {
     timings: Record<string, number>;
 }>;

package/dist/server/handlers/invoke.js

@@ -1,9 +1,9 @@
 import { readLocalBlueprint } from '../../actions/blueprints/blueprint.js';
 import { findFunctionInBlueprint } from '../../utils/find-function.js';
 import invoke from '../../utils/invoke-local.js';
-export async function handleInvokeRequest(functionName, event, metadata, context, logger, executionOptions) {
+export async function handleInvokeRequest(functionName, event, metadata, context, logger, validateResources, executionOptions) {
     const start = performance.now();
-    const { parsedBlueprint } = await readLocalBlueprint(logger);
+    const { parsedBlueprint } = await readLocalBlueprint(logger, { resources: validateResources });
     const resource = findFunctionInBlueprint(parsedBlueprint, functionName);
     const readBlueprintTime = performance.now() - start;
     const payload = {

package/dist/server/static/api.d.ts

@@ -0,0 +1,41 @@
+export type SubscribeFunc = (fn: () => void) => void
+
+export interface ServerAPI {
+  blueprint(): Promise<void>
+  document({
+    projectId,
+    dataset,
+    docId,
+  }: {
+    projectId: string
+    dataset: string
+    docId: string
+  }): Promise<void>
+  invoke({
+    context,
+    event,
+    metadata,
+  }: {
+    context: unknown
+    event: unknown
+    metadata: unknown
+  }): Promise<void>
+  projects(): Promise<void>
+  datasets(selectedProject: string): Promise<void>
+  organizations(): Promise<void>
+  mediaLibraries(selectedOrganization: string): Promise<void>
+  asset({
+    organizationId,
+    mediaLibraryId,
+    docId,
+  }: {
+    organizationId: string
+    mediaLibraryId: string
+    docId: string
+  }): Promise<void>
+  store: Record<string, unknown> & {subscribe: SubscribeFunc; unsubscribe: SubscribeFunc}
+  subscribe: SubscribeFunc
+  unsubscribe: SubscribeFunc
+}
+
+export default function API(): ServerAPI

package/dist/server/static/api.js

@@ -4,6 +4,7 @@ import {Store} from './vendor/vendor.bundle.js'
 // list of events to simulate
 const events = ['create', 'update', 'delete'].map((e) => ({name: e}))
 
+/** @type {Record<string, unknown>} */
 // eslint-disable-next-line new-cap
 const store = Store({events, selectedEvent: events[0].name})
 
@@ -23,6 +24,12 @@ export default function API() {
   }
 }
 
+/**
+ * @param {object} params
+ * @param {unknown} params.context
+ * @param {unknown} params.event
+ * @param {unknown} params.metadata
+ */
 function invoke({context, event, metadata}) {
   store.inprogress = true
   const start = Date.now()
@@ -31,7 +38,7 @@ function invoke({context, event, metadata}) {
     func: store.selectedIndex,
     metadata,
   }
-  fetch('/invoke', {
+  return fetch('/invoke', {
     body: JSON.stringify(payload),
     headers: {
       'Content-Type': 'application/json',
@@ -52,7 +59,7 @@ function invoke({context, event, metadata}) {
 }
 
 function blueprint() {
-  fetch('/blueprint')
+  return fetch('/blueprint')
     .then((response) => response.json())
     .then((blueprint) => {
       const {parsedBlueprint, projectId, organizationId} = blueprint
@@ -72,7 +79,7 @@ function blueprint() {
 }
 
 function projects() {
-  fetch('/projects')
+  return fetch('/projects')
     .then((response) => response.json())
     .then(async (projects) => {
       store.projects = projects
@@ -84,8 +91,11 @@ function projects() {
     })
 }
 
+/**
+ * @param {string} selectedProject
+ */
 function datasets(selectedProject) {
-  fetch(`/datasets?project=${selectedProject}`)
+  return fetch(`/datasets?project=${selectedProject}`)
     .then((response) => response.json())
     .then((datasets) => {
       store.datasets = datasets
@@ -96,6 +106,12 @@ function datasets(selectedProject) {
     })
 }
 
+/**
+ * @param {object} params
+ * @param {string} params.projectId
+ * @param {string} params.dataset
+ * @param {string} params.docId
+ */
 function document({projectId, dataset, docId}) {
   return fetch(`/document?project=${projectId}&dataset=${dataset}&doc=${docId}`)
     .then((response) => response.json())
@@ -108,7 +124,7 @@ function document({projectId, dataset, docId}) {
 }
 
 function organizations() {
-  fetch('/organizations')
+  return fetch('/organizations')
     .then((response) => response.json())
     .then(async (organizations) => {
       store.organizations = organizations
@@ -123,7 +139,7 @@ function organizations() {
 }
 
 function mediaLibraries(selectedOrganization) {
-  fetch(`/media-libraries?organization=${selectedOrganization}`)
+  return fetch(`/media-libraries?organization=${selectedOrganization}`)
     .then((response) => response.json())
     .then((mediaLibraries) => {
       store.mediaLibraries = mediaLibraries
@@ -136,6 +152,13 @@ function mediaLibraries(selectedOrganization) {
     })
 }
 
+/**
+ *
+ * @param {object} params
+ * @param {string} params.organizationId
+ * @param {string} params.mediaLibraryId
+ * @param {string} params.docId
+ */
 function asset({organizationId, mediaLibraryId, docId}) {
   return fetch(`/asset?organization=${organizationId}&medialibrary=${mediaLibraryId}&doc=${docId}`)
     .then((response) => response.json())

package/dist/server/static/components/filters.js

@@ -56,18 +56,6 @@ form input {
 </style>
 <form class="gap-2 pad-l-3 pad-b-3 border-bottom">
   <fieldset class="flex gap-2">
-    <legend class="config-label">Client Options</legend>
-    <div id="dynamic-dropdowns" class="flex gap-2"></div>
-    <select-dropdown
-      label="Event"
-      store-key="events"
-      selected-key="selectedEvent"
-      value-prop="name"
-      label-prop="name"
-    ></select-dropdown>
-    <api-version></api-version>
-    <with-token></with-token>
-    <document-id></document-id>
   </fieldset>
 </form>
 `
@@ -87,54 +75,72 @@ class FiltersComponent extends ApiBaseElement {
   }
 
   renderFilters = () => {
-    const docFunction = this.api.store.selectedFunctionType === 'sanity.function.document'
+    const docFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT
     const mediaFunction = this.api.store.selectedFunctionType?.startsWith(
-      'sanity.function.media-library',
+      this.SANITY_FUNCTION_MEDIA_LIBRARY_ASSET,
     )
+    const scheduleFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_SCHEDULE
+
+    const container = this.shadowRoot.querySelector('fieldset')
+    container.innerHTML = this.buildFilters(docFunction, mediaFunction, scheduleFunction)
+  }
 
-    const container = this.shadowRoot.querySelector('#dynamic-dropdowns')
-
-    if (docFunction) {
-      container.innerHTML = `
-        <select-dropdown
-          label="Project"
-          store-key="projects"
-          selected-key="selectedProject"
-          value-prop="id"
-          label-prop="displayName"
-          trigger-fetch
-        ></select-dropdown>
-        <select-dropdown
-          label="Dataset"
-          store-key="datasets"
-          selected-key="selectedDataset"
-          value-prop="name"
-          label-prop="name"
-          subscribe-to="selectedProject"
-        ></select-dropdown>
-      `
-    } else if (mediaFunction) {
-      container.innerHTML = `
-        <select-dropdown
-          label="Organization"
-          store-key="organizations"
-          selected-key="selectedOrganization"
-          value-prop="id"
-          label-prop="name"
-          trigger-fetch
-        ></select-dropdown>
-        <select-dropdown
-          label="Media Library"
-          store-key="mediaLibraries"
-          selected-key="selectedMediaLibrary"
-          value-prop="id"
-          label-prop="id"
-          subscribe-to="selectedOrganization"
-        ></select-dropdown>
-      `
-    } else {
-      container.innerHTML = ''
+  buildFilters = (docFunction, mediaFunction, scheduleFunction) => {
+    return `
+    <legend class="config-label">Client Options</legend>
+    <div id="dynamic-dropdowns" class="flex gap-2">
+      ${
+        docFunction || scheduleFunction
+          ? `<select-dropdown
+        label="Project"
+        store-key="projects"
+        selected-key="selectedProject"
+        value-prop="id"
+        label-prop="displayName"
+        trigger-fetch
+      ></select-dropdown>
+      <select-dropdown
+        label="Dataset"
+        store-key="datasets"
+        selected-key="selectedDataset"
+        value-prop="name"
+        label-prop="name"
+        subscribe-to="selectedProject"
+      ></select-dropdown>`
+          : `
+      <select-dropdown
+        label="Organization"
+        store-key="organizations"
+        selected-key="selectedOrganization"
+        value-prop="id"
+        label-prop="name"
+        trigger-fetch
+      ></select-dropdown>
+      <select-dropdown
+        label="Media Library"
+        store-key="mediaLibraries"
+        selected-key="selectedMediaLibrary"
+        value-prop="id"
+        label-prop="id"
+        subscribe-to="selectedOrganization"
+      ></select-dropdown>`
+      }
+    </div>
+    ${
+      docFunction || mediaFunction
+        ? `<select-dropdown
+      label="Event"
+      store-key="events"
+      selected-key="selectedEvent"
+      value-prop="name"
+      label-prop="name"
+    ></select-dropdown>`
+        : ''
     }
+    <api-version></api-version>
+    <with-token></with-token>
+    ${docFunction || mediaFunction ? `<document-id></document-id>` : ''}
+    `
   }
 
   disconnectedCallback() {

package/dist/server/static/components/function-list.js

@@ -78,7 +78,7 @@ class FunctionList extends ApiBaseElement {
         })
         .join('')
     } else {
-      this.list.innerHTML = '<option class="pad-2">No Blueprint found</li>'
+      this.list.innerHTML = '<option class="pad-2">No Functions found</li>'
       this.select.innerHTML = '<option>No blueprint.json file found</option>'
     }
   }

package/dist/server/static/components/payload-panel.js

@@ -1,10 +1,12 @@
 /* globals customElements document */
 
-import {basicSetup, EditorView, json} from '../vendor/vendor.bundle.js'
+import {basicSetup, Compartment, EditorView, json} from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
 import {getSharedStyleSheets} from './shared-styles.js'
 
+const editableCompartment = new Compartment()
+
 const template = document.createElement('template')
 template.innerHTML = `
 <style>
@@ -73,8 +75,32 @@ class PayloadPanel extends ApiBaseElement {
 
     this.api.subscribe(this.updatePayload, ['document'])
     this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
+    this.api.subscribe(this.updateCodeMirror, ['selectedFunctionType'])
   }
 
+  updateCodeMirror = ({selectedFunctionType}) => {
+    if (selectedFunctionType === this.SANITY_FUNCTION_SCHEDULE) {
+      this.api.store.beforePayload.dispatch({
+        effects: editableCompartment.reconfigure(EditorView.editable.of(false)),
+      })
+      this.api.store.afterPayload.dispatch({
+        effects: editableCompartment.reconfigure(EditorView.editable.of(false)),
+      })
+      this.api.store.payload.dispatch({
+        effects: editableCompartment.reconfigure(EditorView.editable.of(false)),
+      })
+    } else {
+      this.api.store.beforePayload.dispatch({
+        effects: editableCompartment.reconfigure(EditorView.editable.of(true)),
+      })
+      this.api.store.afterPayload.dispatch({
+        effects: editableCompartment.reconfigure(EditorView.editable.of(true)),
+      })
+      this.api.store.payload.dispatch({
+        effects: editableCompartment.reconfigure(EditorView.editable.of(true)),
+      })
+    }
+  }
   updatePayload = ({document}) => {
     if (!document) return
 
@@ -93,8 +119,6 @@ class PayloadPanel extends ApiBaseElement {
     view.dispatch(transaction)
   }
   updateSelectedEvent = ({selectedEvent}) => {
-    console.log('updateSelectedEvent', selectedEvent)
-
     const payloadContainer = this.shadowRoot.querySelector('#payloadContainer')
     const deltaPayloadContainer = this.shadowRoot.querySelector('#deltaPayloadContainer')
 
@@ -113,7 +137,12 @@ class PayloadPanel extends ApiBaseElement {
 function attachEditorView(parent) {
   return new EditorView({
     doc: '\n\n\n\n',
-    extensions: [basicSetup, json(), sanityCodeMirrorTheme],
+    extensions: [
+      basicSetup,
+      json(),
+      sanityCodeMirrorTheme,
+      editableCompartment.of(EditorView.editable.of(false)),
+    ],
     parent,
   })
 }