@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.1

package/src/widget-tree/WidgetTreeModeControls.tsx

@@ -0,0 +1,44 @@
+import { IconButton } from '../primitives/IconButton';
+import { cx } from '../utils/cx';
+import { resolveWidgetTreeLabMode, type WidgetTreeViewMode } from './widget-tree-mode.js';
+
+export interface WidgetTreeModeControlsProps {
+  readonly className?: string | undefined;
+  readonly mode: WidgetTreeViewMode;
+  readonly onModeChange: (mode: WidgetTreeViewMode) => void;
+}
+
+export function WidgetTreeModeControls({
+  className,
+  mode,
+  onModeChange,
+}: WidgetTreeModeControlsProps) {
+  const resolvedMode = resolveWidgetTreeLabMode(mode);
+
+  return (
+    <div
+      className={cx('ui-workbench-artifact-shell__modes', 'widget-tree-mode-controls', className)}
+    >
+      <IconButton
+        aria-pressed={resolvedMode === 'design'}
+        className={cx(
+          'ui-workbench-artifact-shell__mode',
+          resolvedMode === 'design' && 'ui-workbench-artifact-shell__mode--active',
+        )}
+        icon="codicon-layout-sidebar-right"
+        label="Design"
+        onClick={() => onModeChange('design')}
+      />
+      <IconButton
+        aria-pressed={resolvedMode === 'code'}
+        className={cx(
+          'ui-workbench-artifact-shell__mode',
+          resolvedMode === 'code' && 'ui-workbench-artifact-shell__mode--active',
+        )}
+        icon="codicon-code"
+        label="Code"
+        onClick={() => onModeChange('code')}
+      />
+    </div>
+  );
+}

package/src/widget-tree/WidgetTreeSidePanel.tsx

@@ -0,0 +1,49 @@
+import { useState, type ReactNode } from 'react';
+
+import { SegmentedControl } from '../primitives/WorkbenchEditor.js';
+import { cx } from '../utils/cx.js';
+
+export type WidgetTreeSidePanelTab = 'outline' | 'assets' | 'properties';
+
+export interface WidgetTreeSidePanelProps {
+  readonly outline: ReactNode;
+  readonly assets: ReactNode;
+  readonly properties: ReactNode;
+  readonly defaultTab?: WidgetTreeSidePanelTab | undefined;
+}
+
+export function WidgetTreeSidePanel({
+  outline,
+  assets,
+  properties,
+  defaultTab = 'outline',
+}: WidgetTreeSidePanelProps) {
+  const [tab, setTab] = useState<WidgetTreeSidePanelTab>(defaultTab);
+
+  return (
+    <section className="widget-tree-side-panel" data-testid="widget-tree-side-panel">
+      <header className="widget-tree-side-panel__header">
+        <SegmentedControl
+          ariaLabel="Widget side panel"
+          options={[
+            { label: 'Outline', value: 'outline' },
+            { label: 'Assets', value: 'assets' },
+            { label: 'Props', value: 'properties' },
+          ]}
+          value={tab}
+          onChange={setTab}
+        />
+      </header>
+      <div
+        className={cx(
+          'widget-tree-side-panel__body',
+          tab === 'outline' && 'widget-tree-side-panel__body--outline',
+          tab === 'assets' && 'widget-tree-side-panel__body--assets',
+          tab === 'properties' && 'widget-tree-side-panel__body--properties',
+        )}
+      >
+        {tab === 'outline' ? outline : tab === 'assets' ? assets : properties}
+      </div>
+    </section>
+  );
+}

package/src/widget-tree/WidgetTreeView.tsx

@@ -0,0 +1,97 @@
+import { useMemo } from 'react';
+import {
+  collectWidgetNodes,
+  getWidgetDisplayLabel,
+  isWidgetPathSelected,
+  widgetPathKey,
+  type GenericWidget,
+  type WidgetPath,
+  type WidgetSelectionState,
+} from '@workbench-kit/jdw';
+
+import { Panel, PanelBody } from '../layout/Panel';
+import { EmptyState } from '../primitives/EmptyState';
+import { cx } from '../utils/cx';
+import { formatWidgetPlacementMeta } from './widget-tree-layout.js';
+
+export interface WidgetTreeViewProps {
+  readonly root: GenericWidget | null;
+  readonly parseError: string | null;
+  readonly selection?: WidgetSelectionState | undefined;
+  readonly onSelectPath?: ((path: WidgetPath) => void) | undefined;
+}
+
+function parentTypeForNode(
+  nodes: ReturnType<typeof collectWidgetNodes>,
+  path: WidgetPath,
+): string | undefined {
+  if (path.length === 0) return undefined;
+  const parentPath = path.slice(0, -1);
+  const parentKey = widgetPathKey(parentPath);
+  return nodes.find((node) => widgetPathKey(node.path) === parentKey)?.widget.type;
+}
+
+export function WidgetTreeView({ root, parseError, selection, onSelectPath }: WidgetTreeViewProps) {
+  const nodes = useMemo(() => (root ? collectWidgetNodes(root) : []), [root]);
+
+  return (
+    <Panel className="widget-tree-outline" data-testid="widget-tree-outline-panel">
+      <PanelBody className="widget-tree-outline__body">
+        {parseError !== null ? (
+          <EmptyState compact icon="codicon-error">
+            {parseError}
+          </EmptyState>
+        ) : root === null ? (
+          <EmptyState compact icon="codicon-list-tree">
+            No widget root.
+          </EmptyState>
+        ) : (
+          <ul aria-label="Widget outline" className="widget-tree-outline__list" role="tree">
+            {nodes.map((node) => {
+              const pathKey = widgetPathKey(node.path);
+              const depth = node.path.length;
+              const isSelected = selection ? isWidgetPathSelected(selection, node.path) : false;
+              const parentType = parentTypeForNode(nodes, node.path);
+              const placementMeta = formatWidgetPlacementMeta(node.widget, parentType);
+              const textPreview =
+                node.widget.type === 'text' && typeof node.widget.text === 'string'
+                  ? node.widget.text
+                  : null;
+
+              return (
+                <li
+                  key={pathKey}
+                  aria-level={depth + 1}
+                  aria-selected={isSelected}
+                  className={cx(
+                    'widget-tree-outline__item',
+                    isSelected && 'widget-tree-outline__item--selected',
+                  )}
+                  data-testid={`widget-tree-node-${pathKey}`}
+                  role="treeitem"
+                  style={{ paddingLeft: `${depth * 14 + 6}px` }}
+                >
+                  <button
+                    className="widget-tree-outline__button"
+                    type="button"
+                    onClick={() => onSelectPath?.(node.path)}
+                  >
+                    <span className="widget-tree-outline__type">
+                      {getWidgetDisplayLabel(node.widget)}
+                    </span>
+                    {placementMeta ? (
+                      <span className="widget-tree-outline__placement">{placementMeta}</span>
+                    ) : null}
+                    {textPreview ? (
+                      <span className="widget-tree-outline__meta">{textPreview}</span>
+                    ) : null}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </PanelBody>
+    </Panel>
+  );
+}

package/src/widget-tree/WidgetTreeWorkbench.tsx

@@ -0,0 +1,111 @@
+import { useState, type ReactNode } from 'react';
+import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
+
+import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
+import { Button } from '../primitives/Button';
+import { Toolbar } from '../primitives/Toolbar';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import { fileNameOfPath } from '../workbench/workspace/path';
+import { WidgetTreeLab } from './WidgetTreeLab.js';
+import { WidgetTreeModeControls } from './WidgetTreeModeControls.js';
+import { DEFAULT_WIDGET_TREE_VIEW_MODE, type WidgetTreeViewMode } from './widget-tree-mode.js';
+
+export interface WidgetTreeWorkbenchProps {
+  readonly path?: string | undefined;
+  readonly title?: ReactNode | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly onDiscard?: (() => void) | undefined;
+  readonly dirty?: boolean | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly assetCatalog?: WidgetAssetCatalogContract | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly defaultViewMode?: WidgetTreeViewMode | undefined;
+  readonly viewMode?: WidgetTreeViewMode | undefined;
+  readonly onViewModeChange?: ((mode: WidgetTreeViewMode) => void) | undefined;
+}
+
+export function WidgetTreeWorkbench({
+  path,
+  title,
+  value,
+  onChange,
+  onSave,
+  onDiscard,
+  dirty = false,
+  readOnly = false,
+  registry,
+  assetCatalog,
+  theme = 'dark',
+  defaultViewMode = DEFAULT_WIDGET_TREE_VIEW_MODE,
+  viewMode,
+  onViewModeChange,
+}: WidgetTreeWorkbenchProps) {
+  const [uncontrolledViewMode, setUncontrolledViewMode] =
+    useState<WidgetTreeViewMode>(defaultViewMode);
+  const resolvedViewMode = viewMode ?? uncontrolledViewMode;
+
+  const setViewMode = (nextMode: WidgetTreeViewMode) => {
+    if (viewMode === undefined) {
+      setUncontrolledViewMode(nextMode);
+    }
+    onViewModeChange?.(nextMode);
+  };
+
+  const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget document');
+
+  return (
+    <Panel
+      className="widget-tree-workbench"
+      data-mode={resolvedViewMode}
+      data-testid="widget-tree-workbench"
+    >
+      <PanelHeader
+        actions={
+          <Toolbar>
+            {dirty && !readOnly ? (
+              <>
+                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
+                {onSave ? (
+                  <Button variant="primary" onClick={onSave}>
+                    Save
+                  </Button>
+                ) : null}
+              </>
+            ) : null}
+            <WidgetTreeModeControls mode={resolvedViewMode} onModeChange={setViewMode} />
+          </Toolbar>
+        }
+      >
+        <span className="widget-tree-workbench__title">
+          {resolvedTitle}
+          {path ? (
+            <span className="widget-tree-workbench__path" title={path}>
+              {path}
+            </span>
+          ) : null}
+          {dirty ? (
+            <span className="widget-tree-workbench__dirty-indicator" title="Unsaved changes">
+              ●
+            </span>
+          ) : null}
+        </span>
+      </PanelHeader>
+      <PanelBody className="widget-tree-workbench__body">
+        <WidgetTreeLab
+          assetCatalog={assetCatalog}
+          path={path}
+          readOnly={readOnly}
+          registry={registry}
+          theme={theme}
+          value={value}
+          viewMode={resolvedViewMode}
+          onChange={onChange}
+          onSave={onSave}
+        />
+      </PanelBody>
+    </Panel>
+  );
+}

package/src/widget-tree/WidgetTreeWorkspaceShell.tsx

@@ -0,0 +1,154 @@
+import { useMemo, useState } from 'react';
+import {
+  integratedShellWorkspaceFiles,
+  integratedShellWorkspaceFolders,
+} from '@workbench-kit/adapters';
+
+import { SideBarViewFrame } from '../layout/SideBarViewFrame.js';
+import { WorkbenchShell } from '../workbench/WorkbenchShell.js';
+import type { StatusBarSectionModel } from '../workbench/StatusBar.js';
+import {
+  useVirtualWorkspace,
+  WorkspaceDraftsProvider,
+  WorkspaceEditorPanel,
+  WorkspaceExplorer,
+  type WorkspaceEditorTheme,
+  type WorkspaceFile,
+} from '../workbench/workspace/index.js';
+import { createWidgetStudioWorkspaceEditorRenderer } from '../widget-studio/create-widget-studio-workspace-editor.js';
+import { WIDGET_TREE_DEMO_REGISTRY, WIDGET_TREE_WELCOME_DOCUMENT } from './demo-registry.js';
+
+const JDW_WORKSPACE_DEFAULT_WIDGET_PATH = 'src/widgets/home.widget.json';
+
+function withJdwWelcomeDocument(files: readonly WorkspaceFile[]): WorkspaceFile[] {
+  return files.map((file) =>
+    file.path === JDW_WORKSPACE_DEFAULT_WIDGET_PATH
+      ? { ...file, content: WIDGET_TREE_WELCOME_DOCUMENT }
+      : file,
+  );
+}
+
+const statusSections: StatusBarSectionModel[] = [
+  {
+    id: 'main',
+    items: [{ id: 'label', label: 'JDW Workspace' }],
+  },
+];
+
+export interface WidgetTreeWorkspaceShellProps {
+  readonly initialSelectedPath?: string | undefined;
+  readonly initialTheme?: WorkspaceEditorTheme | undefined;
+}
+
+export function WidgetTreeWorkspaceShell({
+  initialSelectedPath = JDW_WORKSPACE_DEFAULT_WIDGET_PATH,
+  initialTheme = 'dark',
+}: WidgetTreeWorkspaceShellProps = {}) {
+  const [sidebarVisible, setSidebarVisible] = useState(true);
+  const [sidebarSizePercent, setSidebarSizePercent] = useState(20);
+
+  const workspaceFiles = useMemo(() => withJdwWelcomeDocument(integratedShellWorkspaceFiles), []);
+
+  const workspace = useVirtualWorkspace({
+    expandedPaths: ['src', 'src/widgets', 'src/widgets/assets'],
+    files: workspaceFiles,
+    folders: [...integratedShellWorkspaceFolders],
+    openPaths: [initialSelectedPath],
+    selectedPath: initialSelectedPath,
+  });
+
+  const {
+    closeAll,
+    closeOthers,
+    closePath,
+    deleteFile,
+    expandedPaths,
+    files,
+    openFile,
+    openPaths,
+    saveFile,
+    selectedPath,
+    toggleFolder,
+    workspaceTree,
+  } = workspace;
+
+  const widgetStudioEditorRenderer = useMemo(
+    () =>
+      createWidgetStudioWorkspaceEditorRenderer({
+        registry: WIDGET_TREE_DEMO_REGISTRY,
+      }),
+    [],
+  );
+
+  return (
+    <div className="jdw-workspace-shell-host" data-testid="jdw-workspace-shell">
+      <WorkspaceDraftsProvider>
+        <WorkbenchShell
+          activityBar={{
+            items: [
+              {
+                active: sidebarVisible,
+                icon: <i className="codicon codicon-files" aria-hidden />,
+                id: 'explorer',
+                label: 'Explorer',
+              },
+            ],
+            onItemActivate: () => setSidebarVisible((visible) => !visible),
+          }}
+          compactStatus
+          primarySidebar={{
+            className: 'ui-workbench-story-shell-split',
+            isVisible: sidebarVisible,
+            maxPrimarySizePercent: 36,
+            minPrimarySizePercent: 16,
+            node: (
+              <aside aria-label="Explorer sidebar" className="workbench-primary-side-bar">
+                <SideBarViewFrame title="Explorer">
+                  <WorkspaceExplorer
+                    activePath={selectedPath}
+                    expandedPaths={expandedPaths}
+                    nodes={workspaceTree}
+                    onActivateFile={openFile}
+                    onToggleFolder={toggleFolder}
+                  />
+                </SideBarViewFrame>
+              </aside>
+            ),
+            onSizePercentChange: setSidebarSizePercent,
+            primarySizePercent: sidebarSizePercent,
+          }}
+          rootClassName="ide-root jdw-workspace-shell"
+          rootStyle={{ height: '100%', minHeight: 0 }}
+          secondaryArea={
+            <main className="workbench-editor-area jdw-workspace-shell__editor">
+              <WorkspaceEditorPanel
+                files={files}
+                openPaths={openPaths}
+                renderEditor={(context) =>
+                  widgetStudioEditorRenderer({ ...context, workspaceFiles: files })
+                }
+                selectedPath={selectedPath}
+                theme={initialTheme}
+                onCloseAll={closeAll}
+                onCloseOthers={closeOthers}
+                onClosePath={closePath}
+                onDeletePath={deleteFile}
+                onSaveFile={(path, content) => {
+                  saveFile(path, { content, source: 'user' });
+                  return {
+                    file: files.find((file) => file.path === path) ?? { content, path },
+                    kind: 'save:success' as const,
+                    outcome: 'unchanged' as const,
+                  };
+                }}
+                onSelectedPathChange={openFile}
+              />
+            </main>
+          }
+          statusSections={statusSections}
+          theme={initialTheme}
+        />
+      </WorkspaceDraftsProvider>
+    </div>
+  );
+}

package/src/widget-tree/demo-registry.ts

@@ -0,0 +1,32 @@
+import { formatWidgetDocumentJson } from '@workbench-kit/jdw';
+
+import { BUILTIN_JDW_REGISTRY } from '../jdw/createBuiltinJdwRegistry.js';
+
+export const WIDGET_TREE_DEMO_REGISTRY = BUILTIN_JDW_REGISTRY;
+
+export const WIDGET_TREE_WELCOME_DOCUMENT = formatWidgetDocumentJson({
+  type: 'column',
+  gap: 12,
+  padding: 16,
+  children: [
+    { type: 'text', text: 'Widget Tree' },
+    {
+      type: 'grid',
+      columns: 2,
+      gap: 8,
+      children: [
+        { type: 'text', text: 'A', col: 0, row: 0 },
+        { type: 'text', text: 'B', col: 1, row: 0 },
+        { type: 'text', text: 'Wide', col: 0, row: 1, colSpan: 2 },
+      ],
+    },
+    {
+      type: 'row',
+      gap: 8,
+      children: [
+        { type: 'text', text: 'Left', flex: 1 },
+        { type: 'text', text: 'Right', flex: 1 },
+      ],
+    },
+  ],
+});

package/src/widget-tree/demo-widget-assets.ts

@@ -0,0 +1,4 @@
+import { createBuiltinWidgetAssetCatalog } from '../widget-studio/builtin-widget-asset-catalog.js';
+
+/** Built-in demo catalog for stories/tests without a full workspace fixture. */
+export const WIDGET_TREE_DEMO_ASSET_CATALOG = createBuiltinWidgetAssetCatalog();

package/src/widget-tree/index.ts

@@ -0,0 +1,27 @@
+export { WidgetTreeLab } from './WidgetTreeLab.js';
+export type { WidgetTreeLabProps } from './WidgetTreeLab.js';
+export { WidgetTreeWorkbench } from './WidgetTreeWorkbench.js';
+export type { WidgetTreeWorkbenchProps } from './WidgetTreeWorkbench.js';
+export { WidgetTreeWorkspaceShell } from './WidgetTreeWorkspaceShell.js';
+export type { WidgetTreeWorkspaceShellProps } from './WidgetTreeWorkspaceShell.js';
+export { WidgetTreeView } from './WidgetTreeView.js';
+export type { WidgetTreeViewProps } from './WidgetTreeView.js';
+export { WidgetInspectorPanel } from './WidgetInspectorPanel.js';
+export type { WidgetInspectorPanelProps } from './WidgetInspectorPanel.js';
+export { WidgetTreeSidePanel } from './WidgetTreeSidePanel.js';
+export type { WidgetTreeSidePanelProps, WidgetTreeSidePanelTab } from './WidgetTreeSidePanel.js';
+export { WidgetAssetPalette } from './WidgetAssetPalette.js';
+export type { WidgetAssetPaletteProps } from './WidgetAssetPalette.js';
+export {
+  DEFAULT_WIDGET_TREE_VIEW_MODE,
+  resolveWidgetTreeLabMode,
+  type WidgetTreeViewMode,
+} from './widget-tree-mode.js';
+export { WidgetSourceEditor } from './WidgetSourceEditor.js';
+export type { WidgetSourceEditorProps } from './WidgetSourceEditor.js';
+export { WidgetTreeModeControls } from './WidgetTreeModeControls.js';
+export type { WidgetTreeModeControlsProps } from './WidgetTreeModeControls.js';
+export { isWidgetTreeDocument, WIDGET_TREE_DOCUMENT_MIME } from './widget-tree-document.js';
+export type { WidgetTreeDocumentRef } from './widget-tree-document.js';
+export { WIDGET_TREE_DEMO_REGISTRY, WIDGET_TREE_WELCOME_DOCUMENT } from './demo-registry.js';
+export { WIDGET_TREE_DEMO_ASSET_CATALOG } from './demo-widget-assets.js';

package/src/widget-tree/widget-tree-document.ts

@@ -0,0 +1,20 @@
+import { JDW_DOCUMENT_MIME, isJdwDocumentPath } from '../jdw/document';
+
+export const WIDGET_TREE_DOCUMENT_MIME = 'application/vnd.workbench-kit.widget+json';
+export const WIDGET_TREE_DOCUMENT_FILE_EXTENSION = '.widget.json';
+
+export interface WidgetTreeDocumentRef {
+  readonly path: string;
+  readonly mimeType?: string | undefined;
+}
+
+export function isWidgetTreeDocument(file: WidgetTreeDocumentRef): boolean {
+  if (file.mimeType === WIDGET_TREE_DOCUMENT_MIME || file.mimeType === JDW_DOCUMENT_MIME) {
+    return true;
+  }
+
+  const normalizedPath = file.path.toLowerCase();
+  return (
+    normalizedPath.endsWith(WIDGET_TREE_DOCUMENT_FILE_EXTENSION) || isJdwDocumentPath(file.path)
+  );
+}

package/src/widget-tree/widget-tree-layout.ts

@@ -0,0 +1,31 @@
+import { isContainerWidget, type GenericWidget } from '@workbench-kit/jdw';
+
+export function canAddChildren(widget: GenericWidget | null): widget is GenericWidget {
+  return widget !== null && isContainerWidget(widget) && widget.type !== 'box';
+}
+
+export function formatWidgetPlacementMeta(
+  widget: GenericWidget,
+  parentType?: string,
+): string | null {
+  if (parentType === 'grid') {
+    const col = typeof widget.col === 'number' ? widget.col : null;
+    const row = typeof widget.row === 'number' ? widget.row : null;
+    if (col === null && row === null) return null;
+
+    const span =
+      typeof widget.colSpan === 'number' || typeof widget.rowSpan === 'number'
+        ? ` span ${widget.colSpan ?? 1}x${widget.rowSpan ?? 1}`
+        : '';
+
+    return `c${col ?? '?'} r${row ?? '?'}${span}`;
+  }
+
+  if (parentType === 'row' || parentType === 'column') {
+    const flex = typeof widget.flex === 'number' ? `flex ${widget.flex}` : null;
+    const align = typeof widget.align === 'string' ? widget.align : null;
+    return [flex, align].filter(Boolean).join(' · ') || null;
+  }
+
+  return null;
+}

package/src/widget-tree/widget-tree-mode.ts

@@ -0,0 +1,7 @@
+export type WidgetTreeViewMode = 'code' | 'editor' | 'split' | 'design';
+
+export const DEFAULT_WIDGET_TREE_VIEW_MODE: WidgetTreeViewMode = 'design';
+
+export function resolveWidgetTreeLabMode(mode: WidgetTreeViewMode): 'code' | 'design' {
+  return mode === 'code' ? 'code' : 'design';
+}

package/src/widget-tree/widget-tree-play-helpers.ts

@@ -0,0 +1,74 @@
+import { expect, userEvent, waitFor } from 'storybook/test';
+
+interface MonacoEditorHandle {
+  getDomNode: () => HTMLElement | null;
+  getValue: () => string;
+}
+
+interface MonacoGlobal {
+  editor: {
+    getEditors: () => MonacoEditorHandle[];
+  };
+}
+
+export async function waitForWidgetTreeSourcePane(canvasElement: HTMLElement): Promise<void> {
+  await waitFor(
+    () => {
+      const pane =
+        canvasElement.querySelector('.widget-tree-source .ui-json-code-editor-pane') ??
+        canvasElement.querySelector('[data-testid="widget-tree-source"]');
+      expect(pane).toBeTruthy();
+    },
+    { timeout: 15000 },
+  );
+}
+
+export async function waitForWidgetTreeMonaco(canvasElement: HTMLElement): Promise<void> {
+  await waitForWidgetTreeSourcePane(canvasElement);
+
+  await waitFor(
+    () => {
+      const editorRoot = canvasElement.querySelector('.widget-tree-source .monaco-editor');
+      expect(editorRoot).toBeTruthy();
+      expect(editorRoot?.textContent ?? '').not.toContain('Loading editor');
+    },
+    { timeout: 15000 },
+  );
+}
+
+export async function setWidgetTreeSourceJson(
+  canvasElement: HTMLElement,
+  value: string,
+): Promise<void> {
+  await waitForWidgetTreeMonaco(canvasElement);
+
+  const editorRoot = canvasElement.querySelector('.widget-tree-source .monaco-editor');
+  if (!editorRoot) {
+    throw new Error('Monaco editor root was not found.');
+  }
+
+  const textarea = editorRoot.querySelector('textarea');
+  if (textarea) {
+    await userEvent.click(textarea);
+    await userEvent.clear(textarea);
+    await userEvent.paste(value);
+  } else {
+    await userEvent.click(editorRoot);
+    await userEvent.keyboard('{Control>}a{/Control}');
+    await userEvent.keyboard('{Delete}');
+    await userEvent.paste(value);
+  }
+
+  await waitFor(
+    () => {
+      const monacoGlobal = (window as Window & { monaco?: MonacoGlobal }).monaco;
+      const editor = monacoGlobal?.editor.getEditors().find((candidate) => {
+        const domNode = candidate.getDomNode();
+        return domNode ? editorRoot.contains(domNode) : false;
+      });
+
+      expect(editor?.getValue()).toBe(value);
+    },
+    { timeout: 5000 },
+  );
+}