@nocobase/flow-engine 2.0.0-alpha.10

package/src/runjs-context/snippets/global/notification-open.snippet.ts

@@ -0,0 +1,31 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-notify',
+  label: 'Open notification',
+  description: 'Open an AntD notification with custom content',
+  locales: {
+    'zh-CN': {
+      label: '打开通知',
+      description: '展示一条自定义内容的通知',
+    },
+  },
+  content: `
+ctx.notification.open({
+  message: ctx.t('Notification title'),
+  description: ctx.t('This is a notification description'),
+});
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/global/open-view-dialog.snippet.ts

@@ -0,0 +1,33 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  versions: ['*'],
+  prefix: 'sn-open-dialog',
+  label: 'Open view (dialog)',
+  description: 'Open a view in dialog via ctx.openView',
+  locales: {
+    'zh-CN': {
+      label: '打开视图（对话框）',
+      description: '通过 ctx.openView 以对话框方式打开视图',
+    },
+  },
+  content: `
+// Open a view as dialog and pass arguments at top-level
+const popupUid = ctx.model.uid + '-1'; // popupUid should be stable and better bound to ctx.model.uid
+await ctx.openView(popupUid, {
+  mode: 'dialog',
+  title: ctx.t('Sample dialog'),
+  size: 'medium',
+});
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/open-view-drawer.snippet.ts

@@ -0,0 +1,33 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  versions: ['*'],
+  prefix: 'sn-open-drawer',
+  label: 'Open view (drawer)',
+  description: 'Open a view in drawer via ctx.openView',
+  locales: {
+    'zh-CN': {
+      label: '打开视图（抽屉）',
+      description: '通过 ctx.openView 以抽屉方式打开视图',
+    },
+  },
+  content: `
+// Open a view as drawer and pass arguments at top-level
+const popupUid = ctx.model.uid + '-1'; // popupUid should be stable and better bound to ctx.model.uid
+await ctx.openView(popupUid, {
+  mode: 'drawer',
+  title: ctx.t('Sample drawer'),
+  size: 'large',
+});
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/query-selector.snippet.ts

@@ -0,0 +1,34 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+import { JSBlockRunJSContext } from '../../contexts/JSBlockRunJSContext';
+import { JSFieldRunJSContext } from '../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext, JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-query-selector',
+  label: 'Query selector',
+  description: 'Find a child element inside ctx.element using querySelector',
+  locales: {
+    'zh-CN': {
+      label: '查询子元素',
+      description: '使用 querySelector 在 ctx.element 内查找子元素',
+    },
+  },
+  content: `
+const child = ctx.element.querySelector('.child-class');
+if (child) {
+  child.textContent = ctx.t('Hello from querySelector');
+}
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/global/require-amd.snippet.ts

@@ -0,0 +1,30 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-require',
+  label: 'Load AMD module',
+  description: 'Dynamically load an AMD/RequireJS module by URL',
+  locales: {
+    'zh-CN': {
+      label: '加载 AMD 模块',
+      description: '通过 RequireJS 按 URL 动态加载 AMD 模块',
+    },
+  },
+  content: `
+// Load an external library (AMD/RequireJS)
+const dayjs = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js');
+console.log('dayjs loaded:', dayjs?.default || dayjs);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/global/window-open.snippet.ts

@@ -0,0 +1,29 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-window-open',
+  label: 'Open new window',
+  description: 'Safely open a new browser window/tab',
+  locales: {
+    'zh-CN': {
+      label: '打开新窗口',
+      description: '安全地打开一个新的浏览器窗口或标签页',
+    },
+  },
+  content: `
+// Open a new window/tab
+window.open('https://example.com', '_blank');
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/index.ts

@@ -0,0 +1,195 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { RunJSContextRegistry } from '../registry';
+
+// Simple manual exports - no build-time magic needed
+const snippets: Record<string, () => Promise<any>> = {
+  // global
+  'global/message-success': () => import('./global/message-success.snippet'),
+  'global/message-error': () => import('./global/message-error.snippet'),
+  'global/api-request': () => import('./global/api-request.snippet'),
+  'global/require-amd': () => import('./global/require-amd.snippet'),
+  'global/import-esm': () => import('./global/import-esm.snippet'),
+  'global/notification-open': () => import('./global/notification-open.snippet'),
+  'global/window-open': () => import('./global/window-open.snippet'),
+  'global/open-view-drawer': () => import('./global/open-view-drawer.snippet'),
+  'global/open-view-dialog': () => import('./global/open-view-dialog.snippet'),
+  'global/query-selector': () => import('./global/query-selector.snippet'),
+  // libs
+  'scene/block/echarts-init': () => import('./scene/block/echarts-init.snippet'),
+  // scene/block
+  'scene/block/render-react': () => import('./scene/block/render-react.snippet'),
+  'scene/block/render-button-handler': () => import('./scene/block/render-button-handler.snippet'),
+  'scene/block/add-event-listener': () => import('./scene/block/add-event-listener.snippet'),
+  'scene/block/chartjs-bar': () => import('./scene/block/chartjs-bar.snippet'),
+  'scene/block/vue-component': () => import('./scene/block/vue-component.snippet'),
+  'scene/block/resource-example': () => import('./scene/block/resource-example.snippet'),
+  'scene/block/api-fetch-render-list': () => import('./scene/block/api-fetch-render-list.snippet'),
+  'scene/block/render-info-card': () => import('./scene/block/render-info-card.snippet'),
+  'scene/block/render-statistics': () => import('./scene/block/render-statistics.snippet'),
+  'scene/block/render-timeline': () => import('./scene/block/render-timeline.snippet'),
+  'scene/block/render-iframe': () => import('./scene/block/render-iframe.snippet'),
+  // scene/detail
+  'scene/detail/innerHTML-value': () => import('./scene/detail/innerHTML-value.snippet'),
+  'scene/detail/format-number': () => import('./scene/detail/format-number.snippet'),
+  'scene/detail/color-by-value': () => import('./scene/detail/color-by-value.snippet'),
+  'scene/detail/copy-to-clipboard': () => import('./scene/detail/copy-to-clipboard.snippet'),
+  'scene/detail/status-tag': () => import('./scene/detail/status-tag.snippet'),
+  'scene/detail/relative-time': () => import('./scene/detail/relative-time.snippet'),
+  'scene/detail/percentage-bar': () => import('./scene/detail/percentage-bar.snippet'),
+  // scene/form
+  'scene/form/render-basic': () => import('./scene/form/render-basic.snippet'),
+  'scene/form/set-field-value': () => import('./scene/form/set-field-value.snippet'),
+  'scene/form/toggle-visible': () => import('./scene/form/toggle-visible.snippet'),
+  'scene/form/set-disabled': () => import('./scene/form/set-disabled.snippet'),
+  'scene/form/set-required': () => import('./scene/form/set-required.snippet'),
+  'scene/form/calculate-total': () => import('./scene/form/calculate-total.snippet'),
+  'scene/form/conditional-required': () => import('./scene/form/conditional-required.snippet'),
+  'scene/form/cascade-select': () => import('./scene/form/cascade-select.snippet'),
+  'scene/form/toggle-multiple-fields': () => import('./scene/form/toggle-multiple-fields.snippet'),
+  'scene/form/copy-field-values': () => import('./scene/form/copy-field-values.snippet'),
+  // scene/table
+  'scene/table/cell-open-dialog': () => import('./scene/table/cell-open-dialog.snippet'),
+  'scene/table/concat-fields': () => import('./scene/table/concat-fields.snippet'),
+  'scene/table/collection-selected-count': () => import('./scene/table/collection-selected-count.snippet'),
+  'scene/table/iterate-selected-rows': () => import('./scene/table/iterate-selected-rows.snippet'),
+  'scene/table/destroy-selected': () => import('./scene/table/destroy-selected.snippet'),
+  'scene/table/export-selected-json': () => import('./scene/table/export-selected-json.snippet'),
+};
+
+export default snippets;
+
+// Cohesive snippet helpers for clients (editor, etc.)
+type EngineSnippetEntry = {
+  name: string;
+  prefix?: string;
+  description?: string;
+  body: string;
+  ref: string;
+  group?: string;
+  groups?: string[];
+  scenes?: string[];
+};
+
+function deriveNameFromKey(key: string): string {
+  const parts = key.split('/');
+  return parts[parts.length - 1] || key;
+}
+
+function normalizeScenes(def: any, key: string): string[] {
+  if (Array.isArray(def?.scenes) && def.scenes.length) {
+    return def.scenes.map((scene: any) => String(scene).trim()).filter((scene: string) => scene.length > 0);
+  }
+  const parts = key.split('/');
+  if (parts[0] === 'scene' && parts[1]) {
+    return [parts[1]];
+  }
+  return [];
+}
+
+function computeGroups(def: any, key: string): string[] {
+  const scenes = normalizeScenes(def, key);
+  if (scenes.length) {
+    return scenes.map((scene) => `scene/${scene}`);
+  }
+  const parts = key.split('/');
+  if (!parts.length) return [];
+  const first = parts[0];
+  if (first === 'global' || first === 'libs') return [first];
+  if (first === 'scene' && parts.length >= 2) return [`${first}/${parts[1]}`];
+  if (parts.length >= 2) return [`${parts[0]}/${parts[1]}`];
+  return [parts[0]];
+}
+
+function resolveLocaleMeta(def: any, locale?: string) {
+  if (!locale || !def?.locales) return {};
+  const exact = def.locales[locale];
+  if (exact) return exact;
+  const normalized = locale.toLowerCase();
+  if (normalized !== locale && def.locales[normalized]) return def.locales[normalized];
+  const base = locale.split('-')[0];
+  if (base && def.locales[base]) return def.locales[base];
+  if (base) {
+    const lowerBase = base.toLowerCase();
+    if (def.locales[lowerBase]) return def.locales[lowerBase];
+  }
+  return {};
+}
+
+export async function getSnippetBody(ref: string): Promise<string> {
+  const loader = (snippets as any)[ref];
+  if (!loader) throw new Error(`[flow-engine] snippet not found: ${ref}`);
+  const mod = await loader();
+  const def = mod?.default;
+  // engine snippet modules export a SnippetModule as default
+  const content = def?.content ?? mod?.content ?? mod?.body ?? '';
+  return typeof content === 'string' ? content : String(content ?? '');
+}
+
+export async function listSnippetsForContext(
+  ctxClassName: string,
+  version = 'v1',
+  locale?: string,
+): Promise<EngineSnippetEntry[]> {
+  const entries: EngineSnippetEntry[] = [];
+  const allowedContextNames = new Set<string>();
+  if (typeof ctxClassName === 'string' && ctxClassName) allowedContextNames.add(ctxClassName);
+  try {
+    const resolvedCtor = RunJSContextRegistry['resolve'](version as any, ctxClassName);
+    if (resolvedCtor?.name) allowedContextNames.add(resolvedCtor.name);
+  } catch (_) {
+    // ignore resolution failure
+  }
+  await Promise.all(
+    Object.entries(snippets).map(async ([key, loader]) => {
+      const mod = await (loader as any)();
+      const def = mod?.default || {};
+      const body: any = def?.content ?? mod?.content;
+      if (typeof body !== 'string') return;
+      let ok = true;
+      if (Array.isArray(def?.contexts) && def.contexts.length) {
+        const ctxNames = def.contexts.map((item: any) => {
+          if (item === '*') return '*';
+          if (typeof item === 'string') return item;
+          if (typeof item === 'function') return item.name || '*';
+          if (item && typeof item === 'object' && typeof item.name === 'string') return item.name;
+          return String(item ?? '');
+        });
+        if (ctxClassName === '*') {
+          // '*' means return all snippets without filtering by context
+          ok = true;
+        } else {
+          ok = ctxNames.includes('*') || ctxNames.some((name: string) => allowedContextNames.has(name));
+        }
+      }
+      if (ok && Array.isArray(def?.versions) && def.versions.length) {
+        ok = def.versions.includes('*') || def.versions.includes(version);
+      }
+      if (!ok) return;
+      const localeMeta = resolveLocaleMeta(def, locale);
+      const name = localeMeta.label || def?.label || deriveNameFromKey(key);
+      const description = localeMeta.description ?? def?.description;
+      const prefix = def?.prefix || name;
+      const groups = computeGroups(def, key);
+      const scenes = normalizeScenes(def, key);
+      entries.push({
+        name,
+        prefix,
+        description,
+        body,
+        ref: key,
+        group: groups[0],
+        groups,
+        scenes,
+      });
+    }),
+  );
+  return entries;
+}

package/src/runjs-context/snippets/scene/block/add-event-listener.snippet.ts

@@ -0,0 +1,41 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-click',
+  label: 'Add click listener',
+  description: 'Render a button and bind a click event handler',
+  locales: {
+    'zh-CN': {
+      label: '添加点击监听',
+      description: '渲染按钮并绑定点击事件处理',
+    },
+  },
+  content:
+    `
+// Render a button and bind a click handler
+ctx.element.innerHTML = ` +
+    '`' +
+    `
+  <button id="nb-jsb-btn" style="padding:6px 12px">\${ctx.t('Click me')}</button>
+` +
+    '`' +
+    `;
+const btn = document.getElementById('nb-jsb-btn');
+if (btn) {
+  btn.addEventListener('click', () => ctx.message.success(ctx.t('Clicked!')));
+}
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/api-fetch-render-list.snippet.ts

@@ -0,0 +1,45 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-fetch-list',
+  label: 'Fetch & render list',
+  description: 'Fetch a small list via ctx.api and render basic HTML',
+  locales: {
+    'zh-CN': {
+      label: '拉取并渲染列表',
+      description: '使用 ctx.api 拉取少量数据，并渲染基础 HTML 列表',
+    },
+  },
+  content: `
+// Fetch users
+const { data } = await ctx.api.request({
+  url: 'users:list',
+  method: 'get',
+  params: { pageSize: 5 },
+});
+const rows = Array.isArray(data?.data) ? data.data : (Array.isArray(data) ? data : []);
+
+// Render as a simple HTML list
+ctx.element.innerHTML = [
+  '<div style="padding:12px">',
+  '<h4 style="margin:0 0 8px">' + ctx.t('Users') + '</h4>',
+  '<ul style="margin:0; padding-left:20px">',
+  ...rows.map((r, i) => '<li>#' + (i + 1) + ': ' + String((r && (r.nickname ?? r.username ?? r.id)) ?? '') + '</li>'),
+  '</ul>',
+  '</div>'
+].join('');
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/chartjs-bar.snippet.ts

@@ -0,0 +1,80 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-chartjs',
+  label: 'Render Chart.js bar chart',
+  description: 'Load Chart.js from CDN and render a basic bar chart inside the block',
+  locales: {
+    'zh-CN': {
+      label: '渲染 Chart.js 柱状图',
+      description: '通过 CDN 引入 Chart.js 并在区块中渲染基础柱状图',
+    },
+  },
+  content: `
+const wrapper = document.createElement('div');
+wrapper.style.padding = '16px';
+wrapper.style.background = '#fff';
+wrapper.style.borderRadius = '8px';
+wrapper.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';
+
+const canvas = document.createElement('canvas');
+canvas.width = 480;
+canvas.height = 320;
+wrapper.appendChild(canvas);
+ctx.element.replaceChildren(wrapper);
+
+async function renderChart() {
+  const loaded = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js');
+  const Chart = loaded?.Chart || loaded?.default?.Chart || loaded?.default;
+  if (!Chart) {
+    throw new Error('Chart.js is not available');
+  }
+
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+  const data = [12, 18, 9, 15, 22];
+
+  new Chart(canvas.getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: ctx.t('Daily visits'),
+          data,
+          backgroundColor: 'rgba(24, 144, 255, 0.6)',
+          borderColor: '#1890ff',
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: { display: true },
+        title: {
+          display: true,
+          text: ctx.t('Weekly overview'),
+        },
+      },
+    },
+  });
+}
+
+renderChart().catch((error) => {
+  console.error('[RunJS] failed to render chart', error);
+  wrapper.innerHTML = '<div style="color:#c00;">' + (error?.message || ctx.t('Chart initialization failed')) + '</div>';
+});
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/echarts-init.snippet.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+import { SnippetModule } from '../../types';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-echarts',
+  label: 'Init ECharts',
+  description: 'Load ECharts and render a simple chart inside the block',
+  locales: {
+    'zh-CN': {
+      label: '初始化 ECharts',
+      description: '加载 ECharts 并在区块内渲染示例图表',
+    },
+  },
+  content: `
+const container = document.createElement('div');
+container.style.height = '400px';
+container.style.width = '100%';
+ctx.element.replaceChildren(container);
+const echarts = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js');
+if (!echarts) {
+  throw new Error('ECharts library not loaded');
+}
+
+const chart = echarts.init(container);
+chart.setOption({
+  title: { text: ctx.t('ECharts') },
+  series: [{ type: 'pie', data: [{ value: 1, name: ctx.t('A') }] }],
+});
+
+chart.resize();
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-button-handler.snippet.ts

@@ -0,0 +1,33 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-button',
+  label: 'Render button handler',
+  description: 'Render a button and handle click events inside the block',
+  locales: {
+    'zh-CN': {
+      label: '按钮事件处理',
+      description: '在区块中渲染按钮并绑定点击处理逻辑',
+    },
+  },
+  content: `
+const { React, ReactDOM, antd } = ctx;
+const { Button } = antd;
+
+const node = React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Button'));
+ReactDOM.createRoot(ctx.element).render(node);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-iframe.snippet.ts

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-iframe',
+  label: 'Render iframe',
+  description: 'Embed example.com as a sandboxed iframe inside the block element',
+  locales: {
+    'zh-CN': {
+      label: '渲染 iframe',
+      description: '在区块中以 sandbox 限制嵌入 example.com 页面',
+    },
+  },
+  content: `
+// Create an iframe that fills the current block container
+const iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.setAttribute('sandbox', 'allow-scripts');
+iframe.style.width = '100%';
+iframe.style.height = '100%';
+iframe.style.border = 'none';
+
+// Replace existing children so the iframe is the only content
+ctx.element.replaceChildren(iframe);
+`,
+};
+
+export default snippet;