@dxos/plugin-script 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/blueprints/functions/update.ts

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { next as A, type Doc } from '@automerge/automerge';
+import * as Effect from 'effect/Effect';
+
+import { type Script, Operation } from '@dxos/compute';
+import { Database, Obj } from '@dxos/echo';
+import { DocAccessor, createDocAccessor } from '@dxos/echo-db';
+
+import { Update } from './definitions';
+
+export default Update.pipe(
+  Operation.withHandler(
+    Effect.fn(function* ({ function: fn, name, description, edits }) {
+      const loaded = yield* Database.load(fn);
+      if (!loaded.source) {
+        return yield* Effect.fail(new Error('Function has no source script.'));
+      }
+      const script = (yield* Database.load(loaded.source)) as Script.Script;
+
+      if (name !== undefined || description !== undefined) {
+        Obj.update(script, (script) => {
+          if (name !== undefined) {
+            script.name = name;
+          }
+          if (description !== undefined) {
+            script.description = description;
+          }
+        });
+      }
+
+      if (edits && edits.length > 0) {
+        const text = yield* Database.load(script.source);
+        const accessor = createDocAccessor(text, ['content']);
+
+        for (const edit of edits) {
+          accessor.handle.change((doc: Doc<typeof text>) => {
+            const source = DocAccessor.getValue<string>(accessor);
+            if (edit.replaceAll) {
+              let idx = source.indexOf(edit.oldString);
+              while (idx !== -1) {
+                A.splice(doc, accessor.path as A.Prop[], idx, edit.oldString.length, edit.newString);
+                const updated = DocAccessor.getValue<string>(accessor);
+                idx = updated.indexOf(edit.oldString, idx + edit.newString.length);
+              }
+            } else {
+              const idx = source.indexOf(edit.oldString);
+              if (idx === -1) {
+                throw new Error(`Edit not found: ${JSON.stringify(edit.oldString)}`);
+              }
+              A.splice(doc, accessor.path as A.Prop[], idx, edit.oldString.length, edit.newString);
+            }
+          });
+        }
+
+        Obj.update(script, (script) => {
+          script.changed = true;
+        });
+      }
+
+      return {
+        function: Obj.getURI(loaded),
+      };
+    }),
+  ),
+);

package/src/blueprints/script-blueprint.ts

@@ -2,29 +2,53 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AppCapabilities } from '@dxos/app-toolkit';
-import { Blueprint, Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/compute';
 import { trim } from '@dxos/util';
 
-const BLUEPRINT_KEY = 'dxos.org/blueprint/script';
+import {
+  Create,
+  Read,
+  Update,
+  Delete,
+  Deploy,
+  Invoke,
+  InspectInvocations,
+  QueryDeployedFunctions,
+  InstallFunction,
+} from './functions';
 
-const functions: AppCapabilities.BlueprintDefinition['functions'] = [];
+const BLUEPRINT_KEY = 'org.dxos.blueprint.script';
 
 const make = () =>
   Blueprint.make({
     key: BLUEPRINT_KEY,
     name: 'Script',
-    tools: Blueprint.toolDefinitions({ functions, tools: [] }),
+    agentCanEnable: true,
+    tools: Blueprint.toolDefinitions({
+      operations: [
+        Create,
+        Read,
+        Update,
+        Delete,
+        Deploy,
+        Invoke,
+        InspectInvocations,
+        QueryDeployedFunctions,
+        InstallFunction,
+      ],
+    }),
     instructions: Template.make({
       source: trim`
-        You can create and update scripts which contain Typescript code.
+        You can create, read, update, and delete scripts which contain TypeScript code.
+        You can deploy scripts to the Edge runtime and invoke deployed scripts.
+        You can inspect the invocation history of a deployed script.
+        You can query all functions deployed to the EDGE runtime and install them into the current space.
       `,
     }),
   });
 
-const blueprint: AppCapabilities.BlueprintDefinition = {
+const blueprint: Blueprint.Definition = {
   key: BLUEPRINT_KEY,
-  functions,
   make,
 };
 

package/src/capabilities/app-graph-builder.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, AppNode } from '@dxos/app-toolkit';
+import { Script } from '@dxos/compute';
+import { GraphBuilder } from '@dxos/plugin-graph';
+
+import { meta } from '#meta';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const extensions = yield* Effect.all([
+      GraphBuilder.createTypeExtension({
+        id: 'execute',
+        type: Script.Script,
+        connector: () =>
+          Effect.succeed([
+            AppNode.makeCompanion({
+              id: 'execute',
+              label: ['script-test.label', { ns: meta.id }],
+              icon: 'ph--terminal--regular',
+              data: 'execute',
+            }),
+          ]),
+      }),
+      GraphBuilder.createTypeExtension({
+        id: 'logs',
+        type: Script.Script,
+        connector: () =>
+          Effect.succeed([
+            AppNode.makeCompanion({
+              id: 'logs',
+              label: ['script-logs.label', { ns: meta.id }],
+              icon: 'ph--clock-countdown--regular',
+              data: 'logs',
+            }),
+          ]),
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

package/src/capabilities/{blueprint-definition/blueprint-definition.ts → blueprint-definition.ts}

@@ -6,8 +6,10 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint } from '@dxos/compute';
 
-import { ScriptBlueprint } from '../../blueprints';
+import { ScriptBlueprint } from '#blueprints';
 
 const blueprintDefinition = Capability.makeModule<
   [],

package/src/capabilities/{compiler/compiler.ts → compiler.ts}

@@ -15,8 +15,9 @@ import { initializeBundler } from '@dxos/functions-runtime/bundler';
 import { log } from '@dxos/log';
 import { trim } from '@dxos/util';
 
-import { Compiler } from '../../compiler';
-import { ScriptCapabilities } from '../../types';
+import { ScriptCapabilities } from '#types';
+
+import { Compiler } from '../compiler';
 
 // TODO(burdon): Document.
 const SCRIPT_PACKAGES_BUCKET = 'https://pub-5745ae82e450484aa28f75fc6a175935.r2.dev/dev/';
@@ -25,11 +26,16 @@ const NO_TYPES = true; // Types temopararly disabled due to compiler erorrs.
 
 export default Capability.makeModule(() =>
   Effect.gen(function* () {
-    yield* Effect.tryPromise(() => initializeBundler({ wasmUrl }));
+    yield* Effect.tryPromise({
+      try: () => initializeBundler({ wasmUrl }),
+      catch: (error) => new Error(`Failed to initialize bundler: ${error}`),
+    });
 
     const runtimeModules = yield* fetchRuntimeModules().pipe(Effect.provide(FetchHttpClient.layer));
 
     const compiler = new Compiler({
+      target: ts.ScriptTarget.ES2022,
+      lib: ['lib.es2022.d.ts', 'lib.dom.d.ts'],
       skipLibCheck: true,
       moduleResolution: ts.ModuleResolutionKind.Bundler,
       allowImportingTsExtensions: true,
@@ -39,12 +45,14 @@ export default Capability.makeModule(() =>
       paths: Object.fromEntries(runtimeModules.map((mod: any) => [mod.moduleName, [`./src/${mod.filename}`]])),
     });
 
-    yield* Effect.tryPromise(() =>
-      compiler.initialize(trim`
-      declare module 'https://*';
-      ${NO_TYPES ? '' : 'declare module "*";'}
-    `),
-    );
+    yield* Effect.tryPromise({
+      try: () =>
+        compiler.initialize(trim`
+        declare module 'https://*';
+        ${NO_TYPES ? '' : 'declare module "*";'}
+      `),
+      catch: (error) => new Error(`Failed to initialize compiler: ${error}`),
+    });
     if (!NO_TYPES) {
       for (const mod of runtimeModules) {
         compiler.setFile(`/src/${mod.filename}`, mod.content);

package/src/capabilities/create-object.ts

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation, Script } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+
+import { ScriptOperation } from '#types';
+import { Notebook } from '#types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return [
+      Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+        id: Type.getTypename(Script.Script),
+        inputSchema: ScriptOperation.ScriptProps,
+        createObject: (props, options) =>
+          Effect.gen(function* () {
+            const { object } = yield* Operation.invoke(ScriptOperation.CreateScript, props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          }),
+      }),
+      Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+        id: Type.getTypename(Notebook.Notebook),
+        inputSchema: ScriptOperation.NotebookProps,
+        createObject: (props, options) =>
+          Effect.gen(function* () {
+            const object = Notebook.make(props);
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          }),
+      }),
+    ];
+  }),
+);

package/src/capabilities/index.ts

@@ -2,9 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './blueprint-definition';
-export * from './compiler';
-export * from './operation-resolver';
-export * from './react-surface';
-export * from './settings';
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Compiler = Capability.lazy('Compiler', () => import('./compiler'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const ScriptSettings = Capability.lazy('ScriptSettings', () => import('./settings'));

package/src/capabilities/node.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Compiler = Capability.lazy('Compiler', () => import('./compiler'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/compute';
+
+import { ScriptOperationHandlerSet } from '#operations';
+
+import { ScriptHandlers } from '../blueprints/functions';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(
+      Capabilities.OperationHandler,
+      OperationHandlerSet.merge(ScriptOperationHandlerSet, ScriptHandlers),
+    );
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { type ComponentProps } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useAtomCapability, useSettingsState } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Script } from '@dxos/compute';
+import { InvocationTraceContainer } from '@dxos/devtools';
+import { Feed } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { getSpace } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+
+import { ScriptPluginSettings } from '#components';
+import { DeploymentDialog, NotebookArticle, ScriptArticle, ScriptProperties, TestContainer } from '#containers';
+import { useCompiler } from '#hooks';
+import { meta } from '#meta';
+import { Notebook, ScriptCapabilities, type Settings } from '#types';
+
+import { DEPLOYMENT_DIALOG } from '../constants';
+import { getAccessCredential } from '../util';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'pluginSettings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          const client = useClient();
+          // TODO(burdon): Check token.
+          const handleAuthenticate = async () => {
+            const { identityKey } = client.halo.identity.get()!;
+            await client.halo.writeCredentials([getAccessCredential(identityKey)]);
+          };
+          return (
+            <ScriptPluginSettings
+              settings={settings}
+              onSettingsChange={updateSettings}
+              onAuthenticate={handleAuthenticate}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'script.article',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Script.Script),
+          AppSurface.object(AppSurface.Section, Script.Script),
+        ),
+        component: ({ data, role }) => {
+          const compiler = useCompiler();
+          const settings = useAtomCapability(ScriptCapabilities.Settings);
+          return (
+            <ScriptArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              settings={settings}
+              env={compiler?.environment}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'notebook.article',
+        filter: AppSurface.object(AppSurface.Article, Notebook.Notebook),
+        component: ({ data, role }) => {
+          const compiler = useCompiler();
+          return (
+            <NotebookArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              env={compiler?.environment}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'properties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Script.Script),
+        component: ({ data, role }) => <ScriptProperties role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: 'companion.execute',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'execute'),
+          AppSurface.companion(AppSurface.Article, Script.Script),
+        ),
+        component: ({ data, role }) => <TestContainer script={data.companionTo} role={role} />,
+      }),
+      Surface.create({
+        id: 'companion.logs',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'logs'),
+          AppSurface.companion(AppSurface.Article, Script.Script),
+        ),
+        component: ({ data, role }) => {
+          const space = getSpace(data.companionTo);
+          const feed = space?.properties.invocationTraceFeed?.target;
+          const feedDXN = feed ? Feed.getQueueUri(feed) : undefined;
+          return (
+            <Panel.Root role={role}>
+              <Panel.Content>
+                <InvocationTraceContainer
+                  db={space?.db}
+                  feedDXN={feedDXN}
+                  target={data.companionTo}
+                  detailAxis='block'
+                />
+              </Panel.Content>
+            </Panel.Root>
+          );
+        },
+      }),
+      Surface.create({
+        id: DEPLOYMENT_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof DeploymentDialog>>(AppSurface.Dialog, DEPLOYMENT_DIALOG),
+        component: ({ data }) => <DeploymentDialog {...data.props} />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/{settings/settings.ts → settings.ts}

@@ -8,14 +8,14 @@ import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { createKvsStore } from '@dxos/effect';
 
-import { meta } from '../../meta';
-import { ScriptCapabilities, ScriptSettings } from '../../types';
+import { meta } from '#meta';
+import { ScriptCapabilities, Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
       key: meta.id,
-      schema: ScriptSettings,
+      schema: Settings.Settings,
       defaultValue: () => ({
         editorInputMode: 'vscode' as const,
       }),
@@ -25,7 +25,7 @@ export default Capability.makeModule(() =>
       Capability.contributes(ScriptCapabilities.Settings, settingsAtom),
       Capability.contributes(AppCapabilities.Settings, {
         prefix: meta.id,
-        schema: ScriptSettings,
+        schema: Settings.Settings,
         atom: settingsAtom,
       }),
     ];

package/src/compiler/compiler.ts

@@ -14,9 +14,20 @@ import { invariant } from '@dxos/invariant';
 
 const GLOBALS = 'globals.d.ts';
 
+/** TS version hosted on playgroundcdn.typescriptlang.org used to fetch lib .d.ts files.
+ * Pinned to 5.6.3 because 5.7+ removed lib.es2022.sharedmemory.d.ts from the CDN.
+ * The remaining 404s (lib.core.d.ts, lib.core.es6/7.d.ts, lib.es7.d.ts) are phantom
+ * entries in @typescript/vfs's hardcoded file list and are harmlessly caught.
+ */
+const CDN_TS_VERSION = '5.6.3';
+
 const defaultOptions: ts.CompilerOptions = {
   lib: ['DOM', 'es2022'],
   target: ts.ScriptTarget.ES2022,
+  // Override `@typescript/vfs`'s default of `NodeJs` (== deprecated `node10`).
+  // TypeScript 6 throws on that as a `getCompilerOptionsDiagnostics()` error,
+  // which surfaces as an unhandled rejection inside the storybook task.
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
 };
 
 export class Compiler {
@@ -32,7 +43,7 @@ export class Compiler {
 
     // TODO(wittjosiah): Figure out how to get workers working in plugin packages.
     //   https://github.com/val-town/codemirror-ts?tab=readme-ov-file#setup-worker
-    this._fsMap = await createDefaultMapFromCDN(this._options, '5.7.2', true, ts);
+    this._fsMap = await createDefaultMapFromCDN(this._options, CDN_TS_VERSION, true, ts);
     if (globals) {
       this._fsMap.set(GLOBALS, globals);
     }

package/src/components/NotebookStack/NotebookCell.tsx

@@ -5,13 +5,14 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type Database, Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { TemplateEditor } from '@dxos/plugin-assistant';
+import { TemplateEditor } from '@dxos/plugin-assistant/components';
 import { useThemeContext, useTranslation } from '@dxos/react-ui';
 import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
-import { EditorContent, type EditorContentProps } from '@dxos/react-ui-editor';
+import { Editor, type EditorViewProps } from '@dxos/react-ui-editor';
 import {
   type BasicExtensionsOptions,
   createBasicExtensions,
@@ -23,11 +24,11 @@ import {
 import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+import { type Notebook } from '#types';
+
 import { type ComputeGraph } from '../../notebook';
-import { type Notebook } from '../../types';
 import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor';
-
 import { type NotebookMenuProps } from './NotebookMenu';
 
 const editorStyles = 'p-2 ps-3';
@@ -61,8 +62,8 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
   const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
     (value: string) => {
       invariant(cell.source?.target);
-      Obj.change(cell.source.target, (s) => {
-        s.content = value;
+      Obj.update(cell.source.target, (obj) => {
+        obj.content = value;
       });
     },
     [cell],
@@ -98,7 +99,7 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
             extensions={extensions}
             env={env}
             options={{
-              placeholder: t('notebook cell placeholder'),
+              placeholder: t('notebook-cell.placeholder'),
               highlightActiveLine: false,
               lineNumbers: false,
             }}
@@ -122,7 +123,13 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
             value={cell.source.target.content}
             onChange={handleQueryChange}
           />
-          {explorerGraph && !dragging && <Surface.Surface role='section' limit={1} data={{ subject: explorerGraph }} />}
+          {explorerGraph && !dragging && (
+            <Surface.Surface
+              type={AppSurface.Section}
+              limit={1}
+              data={{ subject: explorerGraph, attendableId: cell.id }}
+            />
+          )}
         </div>
       );
 
@@ -136,7 +143,7 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
         <>
           <TemplateEditor
             id={cell.id}
-            template={cell.prompt.target.instructions}
+            source={cell.prompt.target.instructions}
             lineNumbers={false}
             classNames={editorStyles}
           />
@@ -179,7 +186,7 @@ const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
     return null;
   }
 
-  const value = promptResults?.[cell.prompt.dxn.toString()];
+  const value = promptResults?.[cell.prompt.uri];
   if (value == null) {
     return null;
   }
@@ -195,13 +202,13 @@ const NotebookTextEditor = ({
   extensions: extensionsProp,
   readOnly,
   ...props
-}: EditorContentProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
+}: EditorViewProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
   const { t } = useTranslation(meta.id);
   const { themeMode } = useThemeContext();
   const extensions = useMemo(() => {
     return [
       createBasicExtensions({
-        placeholder: t('notebook markdown placeholder'),
+        placeholder: t('notebook-markdown.placeholder'),
         readOnly,
       }),
       createThemeExtensions({ themeMode, syntaxHighlighting: true }),
@@ -211,5 +218,9 @@ const NotebookTextEditor = ({
     ].filter(isNonNullable);
   }, [extensionsProp]);
 
-  return <EditorContent {...props} extensions={extensions} selectionEnd />;
+  return (
+    <Editor.Root>
+      <Editor.View {...props} extensions={extensions} selectionEnd />
+    </Editor.Root>
+  );
 };