sanity-plugin-stl-table 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yashraj Yadav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,194 @@
+# Sanity Plugin: Structured Table (STL)
+
+A Sanity Studio plugin for creating advanced, structured tables using the **Structured Table Language (STL)**.
+
+![STL Banner](./asset/integration.webp "STL Banner")
+
+This plugin empowers your content creators to build complex tables with features like row/column spanning, headers, and rich styling, effectively overcoming the limitations of standard portable text tables.
+
+## ✨ Features
+
+- **STL Editor**: A dedicated input component for writing and managing Structured Table Language (STL).
+- **Live Preview**: Real-time preview of your table within the Sanity Studio.
+- **Advanced Layouts**: Support for colspans, rowspans, and complex header structures.
+- **SSR Friendly**: Designed to work seamlessly with Server-Side Rendering (especially Next.js) via the core `structured-table` package.
+
+## 📦 Installation
+
+### 1. Install the Plugin
+
+```bash
+npm install sanity-plugin-stl-table
+# or
+yarn add sanity-plugin-stl-table
+# or
+pnpm add sanity-plugin-stl-table
+```
+
+> **Note**: This plugin requires `react` >= 18 and `sanity` >= 3.0.0.
+
+### 2. Setup Table Render Components (Required for Studio)
+
+To enable the interactive table preview within Sanity Studio, you need to install the CLI and generate the React components.
+
+First, install the CLI tool:
+
+```bash
+npm install structured-table-cli
+```
+
+Then, run the following command to download the pre-built React table components:
+
+```bash
+npx stl-cli add react
+```
+
+**Optional:** You can specify a custom path for the components:
+```bash
+npx stl-cli add react --path ./schemaTypes/components
+```
+
+### 3. Register Components in Sanity Config
+
+After generating the components, you must register them in your `sanity.config.ts`. Import the register file (usually found in the folder where components were installed) at the top of your config.
+
+For example, if installed in `schemaTypes/components`:
+
+```typescript
+// sanity.config.ts
+import './schemaTypes/components/register' // Base path depends on where you installed it
+import { defineConfig } from 'sanity'
+import { stlTableBlock } from 'sanity-plugin-stl-table'
+
+export default defineConfig({
+  // ... configuration
+})
+```
+
+## 🚀 How to Use
+
+### 1. Register the Schema
+
+Import the `stlTableBlock` schema definition and add it to your Sanity Studio configuration `types` array.
+
+```typescript
+// sanity.config.ts
+import { defineConfig } from 'sanity'
+import { stlTableBlock } from 'sanity-plugin-stl-table'
+
+export default defineConfig({
+  // ...
+  schema: {
+    types: [
+      // ... other types
+      stlTableBlock,
+    ],
+  },
+})
+```
+
+### 2. Use in Portable Text or as a Field
+
+You can now use the `stlTableBlock` type in your portable text editors or as a standalone field in your documents.
+
+**In Portable Text:**
+
+```typescript
+// schemas/blockContent.ts (or similar)
+export default {
+  title: 'Block Content',
+  name: 'blockContent',
+  type: 'array',
+  of: [
+    { type: 'block' },
+    // Add the table block
+    { type: 'stlTableBlock' }, 
+  ],
+}
+```
+
+**As a Field:**
+
+```typescript
+export default {
+  name: 'productSpecification',
+  title: 'Product Specification',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      type: 'string',
+    },
+    {
+      name: 'specsTable',
+      title: 'Specifications Table',
+      type: 'stlTableBlock',
+    },
+  ],
+}
+```
+
+## 💻 Frontend Implementation
+
+To render the structured tables on your frontend (e.g., Next.js, Remix), follow these steps:
+
+### 1. Install Dependencies
+
+Install the core package and the CLI (if you haven't already on the frontend repo), then generate the React components.
+
+```bash
+npm install structured-table structured-table-cli && npx stl-cli add react
+```
+
+### 2. Render in Portable Text
+
+Use the generated components within your Portable Text configuration. Here is an example of how to implement the `stlTableBlock`.
+
+```tsx
+import * as STLReact from './components/react' // Path to your generated components
+import { STL } from 'structured-table'
+
+const myPortableTextComponents = {
+  types: {
+    stlTableBlock: ({ value }: {
+      value: {
+        _key: string;
+        _type: string;
+        stlString: string;
+      }
+    }) => {
+      // Parse the STL string
+      const parsedSTL = STL.parse(value.stlString);
+      
+      // Render the table
+      return <STLReact.Table data={parsedSTL} className='border' />
+    }
+  }
+}
+
+// Usage in your PortableText component
+// <PortableText value={data.body} components={myPortableTextComponents} />
+```
+
+## 🛠 How it Works
+
+1.  **Data Storage**: The table data is stored as a string in the **Structured Table Language (STL)** format. This is a concise, human-readable format designed for table representation.
+2.  **Input Component**: When editing, the plugin provides a custom `TableInput` interface that allows you to input and edit the STL code directly, with immediate visual feedback.
+    *   It uses `TableInput` component to handle user interaction.
+    *   It saves the raw STL string + an optional caption.
+3.  **Preview**: Inside the Studio, a `TablePreview` component renders the STL string so editors can see exactly what the table looks like without leaving the CMS.
+4.  **Frontend Rendering**: On your frontend application (e.g., Next.js), you use the `structured-table` package to parse and render this STL string.
+
+## 💡 What is it used for?
+
+Standard Sanity tables are great for simple key-value pairs or basic grids. However, they often struggle with:
+
+- **Merged Cells**: Row spans and column spans.
+- **Complex Headers**: Multi-level headers, headers in columns, or non-standard grid layouts.
+- **Rich Styling**: Needing specific alignment, button cells, or complex formatting that a simple grid doesn't support.
+
+**Sanity Plugin Structured Table** solves this by leveraging STL, allowing you to define table structures as flexibly as you would in HTML, but with a syntax designed for data entry and maintainability.
+
+## 📄 License
+
+MIT © [Yashraj Yadav](https://github.com/ameghcoder)

package/dist/components/TableInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TableInputProps } from './type';
+declare const TableInput: React.ForwardRefExoticComponent<TableInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TableInput;
+//# sourceMappingURL=TableInput.d.ts.map

package/dist/components/TableInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableInput.d.ts","sourceRoot":"","sources":["../../src/components/TableInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,OAAO,EAAiB,eAAe,EAAE,MAAM,QAAQ,CAAC;AAExD,QAAA,MAAM,UAAU,6FA8Ed,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/components/TableInput.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { PatchEvent, set, unset } from 'sanity';
+import { FormField } from 'sanity';
+import { Card, Text, TextArea, Stack } from '@sanity/ui';
+import { STL, getRenderer } from 'structured-table';
+const TableInput = React.forwardRef((props, ref) => {
+    const { schemaType, value, onChange, onFocus, onBlur, readOnly } = props;
+    // 1. Convert the STL string (value) to JSON (SanityTable) for the preview
+    const tableData = useMemo(() => {
+        try {
+            if (!value)
+                return null;
+            return STL.parse(value);
+        }
+        catch (error) {
+            console.error("STL Parsing Error:", error);
+            return null;
+        }
+    }, [value]);
+    // 2. Handle changes from the textarea
+    const handleTextChange = useCallback((event) => {
+        const nextValue = event.currentTarget.value;
+        // Using PatchEvent to update the Sanity document
+        if (nextValue) {
+            onChange(PatchEvent.from(set(nextValue)));
+        }
+        else {
+            onChange(PatchEvent.from(unset())); // Remove the field if empty
+        }
+    }, [onChange]);
+    const hasContent = useMemo(() => {
+        if (!tableData)
+            return false;
+        const hasHeader = (tableData.header?.cells?.length ?? 0) > 0;
+        const hasBody = tableData.body?.length > 0;
+        const hasFooter = (tableData.footer?.cells?.length ?? 0) > 0;
+        return hasHeader || hasBody || hasFooter;
+    }, [tableData]);
+    const { Table } = getRenderer("react");
+    return (_jsx(Stack, { space: 3, children: _jsx(FormField
+        // description={schemaType?.description}
+        // title={schemaType?.title}
+        , { 
+            // description={schemaType?.description}
+            // title={schemaType?.title}
+            __unstable_presence: props['__unstable_presence'], inputId: props['inputId'] || '', children: _jsxs(Stack, { space: 4, children: [_jsx(Card, { padding: 0, border: true, children: _jsx(TextArea, { ref: ref, value: value || '', onChange: handleTextChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, rows: 10, placeholder: "[header]... | ... [body]... | ...", style: { fontFamily: 'monospace', fontSize: '0.9em' } }) }), _jsx(Card, { padding: 3, border: true, tone: "transparent", radius: 2, children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 1, weight: "bold", muted: true, children: "Live Preview" }), hasContent && tableData ? (
+                                // 3. Render the preview using your custom React component
+                                _jsx(Table, { className: "border", data: tableData })) : (_jsxs(Text, { size: 1, muted: true, children: ["Start by defining a section (e.g. ", _jsx("code", { children: "[header]" }), " or ", _jsx("code", { children: "[body]" }), ") to see the preview."] }))] }) })] }) }) }));
+});
+export default TableInput;

package/dist/components/TablePreview.d.ts

@@ -0,0 +1,8 @@
+import { PreviewProps } from 'sanity';
+interface TablePreviewProps extends PreviewProps {
+    title?: string;
+    subtitle?: string;
+}
+export declare function TablePreview(props: TablePreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TablePreview.d.ts.map

package/dist/components/TablePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePreview.d.ts","sourceRoot":"","sources":["../../src/components/TablePreview.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAKtC,UAAU,iBAAkB,SAAQ,YAAY;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAmCpD"}

package/dist/components/TablePreview.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Card, Text, Stack } from '@sanity/ui';
+import { STL, getRenderer } from 'structured-table';
+export function TablePreview(props) {
+    const { title, subtitle: stlString } = props;
+    const tableData = useMemo(() => {
+        if (!stlString)
+            return null;
+        try {
+            return STL.parse(stlString);
+        }
+        catch (e) {
+            return null;
+        }
+    }, [stlString]);
+    const hasContent = useMemo(() => {
+        if (!tableData)
+            return false;
+        const hasHeader = (tableData.header?.cells?.length ?? 0) > 0;
+        const hasBody = tableData.body?.length > 0;
+        const hasFooter = (tableData.footer?.cells?.length ?? 0) > 0;
+        return hasHeader || hasBody || hasFooter;
+    }, [tableData]);
+    const { Table } = getRenderer("react");
+    return (_jsx(Card, { children: _jsx(Stack, { space: 3, children: hasContent && tableData ? (_jsx(Table, { className: "border", data: tableData })) : (_jsx(Text, { size: 1, muted: true, children: "Empty Table" })) }) }));
+}

package/dist/components/type.d.ts

@@ -0,0 +1,14 @@
+import { PatchEvent } from "sanity";
+export interface TableInputProps {
+    schemaType?: any;
+    value?: string;
+    onChange: (patch: PatchEvent) => void;
+    elementProps?: any;
+    readOnly?: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+}
+export type ReactRenderer = {
+    Table: React.ComponentType<any>;
+};
+//# sourceMappingURL=type.d.ts.map

package/dist/components/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/components/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CACjC,CAAC"}

package/dist/components/type.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TableInput } from './components/TableInput';
+export { default as schema } from './schema/schema';
+export { default as stlTableBlock } from './schema/schema';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as TableInput } from './components/TableInput';
+export { default as schema } from './schema/schema';
+export { default as stlTableBlock } from './schema/schema';

package/dist/schema/schema.d.ts

@@ -0,0 +1,33 @@
+import { TablePreview } from "../components/TablePreview";
+declare const _default: {
+    name: string;
+    title: string;
+    type: string;
+    icon: () => string;
+    fields: ({
+        title: string;
+        name: string;
+        type: string;
+        description: string;
+        components: {
+            input: import("react").ForwardRefExoticComponent<import("../components/type").TableInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+        };
+    } | {
+        name: string;
+        title: string;
+        type: string;
+        description?: undefined;
+        components?: undefined;
+    })[];
+    components: {
+        preview: typeof TablePreview;
+    };
+    preview: {
+        select: {
+            title: string;
+            subtitle: string;
+        };
+    };
+};
+export default _default;
+//# sourceMappingURL=schema.d.ts.map

package/dist/schema/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/schema/schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE1D,wBAiCE"}

package/dist/schema/schema.js

@@ -0,0 +1,36 @@
+import TableInput from "../components/TableInput";
+import { TablePreview } from "../components/TablePreview";
+export default {
+    // Use a unique name for this block type
+    name: "stlTableBlock",
+    title: "Structured Table Block",
+    type: "object",
+    icon: () => "📊", // A simple icon for the editor's insert menu
+    fields: [
+        {
+            title: "Table Data (STL Format)",
+            name: "stlString",
+            type: "string",
+            description: "Enter your Structured Table Language (STL) here.",
+            // This is the field that will use custom input component
+            components: {
+                input: TableInput,
+            },
+        },
+        {
+            name: "caption",
+            title: "Table Caption",
+            type: "string",
+        },
+    ],
+    components: {
+        preview: TablePreview,
+    },
+    // A preview for how it looks *inside* the text editor.
+    preview: {
+        select: {
+            title: "caption",
+            subtitle: "stlString",
+        },
+    },
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "sanity-plugin-stl-table",
+    "version": "0.1.0",
+    "description": "Sanity Studio plugin for creating Advance table with Structured Table Language (STL).",
+    "licenses": [
+        {
+            "type": "MIT",
+            "url": "https://github.com/ameghcoder/sanity-plugin-stl-table/blob/main/LICENSE"
+        }
+    ],
+    "author": {
+        "name": "Yashraj Yadav",
+        "url": "https://github.com/ameghcoder"
+    },
+    "keywords": [
+        "sanity studio",
+        "sanity table plugin",
+        "sanity tables",
+        "advance tables in sanity",
+        "stl table plugin"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ameghcoder/sanity-plugin-stl-table"
+    },
+    "bugs": {
+        "url": "https://github.com/ameghcoder/sanity-plugin-stl-table/issues"
+    },
+    "homepage": "https://github.com/ameghcoder/sanity-plugin-stl-table",
+    "type": "module",
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs",
+            "types": "./dist/index.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.build.json",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "@sanity/ui": "^2.0.0 || ^3.0.0",
+        "react": ">=18",
+        "sanity": "^3.0.0 || ^4.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.0",
+        "sanity": "^4.21.1",
+        "typescript": "^5.4.0"
+    },
+    "dependencies": {
+        "structured-table": "^0.1.1"
+    }
+}

package/src/components/TableInput.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useMemo } from 'react';
+import { PatchEvent, set, unset } from 'sanity';
+import { FormField } from 'sanity';
+import { Card, Text, TextArea, Stack } from '@sanity/ui';
+import { STL, getRenderer, SanityTable } from 'structured-table';
+import { ReactRenderer, TableInputProps } from './type';
+
+const TableInput = React.forwardRef<HTMLTextAreaElement, TableInputProps>((props, ref) => {
+    const { schemaType, value, onChange, onFocus, onBlur, readOnly } = props;
+
+    // 1. Convert the STL string (value) to JSON (SanityTable) for the preview
+    const tableData: SanityTable | null = useMemo(() => {
+        try {
+            if (!value) return null;
+            return STL.parse(value);
+        } catch (error) {
+            console.error("STL Parsing Error:", error);
+            return null;
+        }
+    }, [value]);
+
+    // 2. Handle changes from the textarea
+    const handleTextChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const nextValue = event.currentTarget.value;
+
+        // Using PatchEvent to update the Sanity document
+        if (nextValue) {
+            onChange(PatchEvent.from(set(nextValue)));
+        } else {
+            onChange(PatchEvent.from(unset())); // Remove the field if empty
+        }
+    }, [onChange]);
+
+    const hasContent = useMemo(() => {
+        if (!tableData) return false;
+        const hasHeader = (tableData.header?.cells?.length ?? 0) > 0;
+        const hasBody = tableData.body?.length > 0;
+        const hasFooter = (tableData.footer?.cells?.length ?? 0) > 0;
+        return hasHeader || hasBody || hasFooter;
+    }, [tableData]);
+
+    const { Table } = getRenderer<ReactRenderer>("react");
+
+    return (
+        <Stack space={3}>
+            <FormField
+                // description={schemaType?.description}
+                // title={schemaType?.title}
+                __unstable_presence={props['__unstable_presence' as keyof TableInputProps]} // Handle internal props safely
+                inputId={props['inputId' as keyof TableInputProps] || ''}
+            >
+                <Stack space={4}>
+                    {/* === A. Input Area for STL Text === */}
+                    <Card padding={0} border>
+                        <TextArea
+                            ref={ref}
+                            value={value || ''}
+                            onChange={handleTextChange}
+                            onFocus={onFocus}
+                            onBlur={onBlur}
+                            readOnly={readOnly}
+                            rows={10}
+                            placeholder="[header]... | ... [body]... | ..."
+                            style={{ fontFamily: 'monospace', fontSize: '0.9em' }}
+                        />
+                    </Card>
+
+                    {/* === B. Live Preview Area === */}
+                    <Card padding={3} border tone="transparent" radius={2}>
+                        <Stack space={3}>
+                            <Text size={1} weight="bold" muted>Live Preview</Text>
+                            {hasContent && tableData ? (
+                                // 3. Render the preview using your custom React component
+                                <Table className="border" data={tableData} />
+                            ) : (
+                                <Text size={1} muted>
+                                    Start by defining a section (e.g. <code>[header]</code> or <code>[body]</code>) to see the preview.
+                                </Text>
+                            )}
+                        </Stack>
+                    </Card>
+                </Stack>
+            </FormField>
+        </Stack>
+    );
+});
+
+export default TableInput;

package/src/components/TablePreview.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { PreviewProps } from 'sanity';
+import { Card, Text, Stack } from '@sanity/ui';
+import { STL, getRenderer } from 'structured-table';
+import { ReactRenderer } from './type';
+
+interface TablePreviewProps extends PreviewProps {
+    title?: string;
+    subtitle?: string; // This will contain the stlString
+}
+
+
+
+export function TablePreview(props: TablePreviewProps) {
+    const { title, subtitle: stlString } = props;
+
+    const tableData = useMemo(() => {
+        if (!stlString) return null;
+        try {
+            return STL.parse(stlString);
+        } catch (e) {
+            return null;
+        }
+    }, [stlString]);
+
+    const hasContent = useMemo(() => {
+        if (!tableData) return false;
+        const hasHeader = (tableData.header?.cells?.length ?? 0) > 0;
+        const hasBody = tableData.body?.length > 0;
+        const hasFooter = (tableData.footer?.cells?.length ?? 0) > 0;
+        return hasHeader || hasBody || hasFooter;
+    }, [tableData]);
+
+    const { Table } = getRenderer<ReactRenderer>("react");
+
+    return (
+        <Card>
+            <Stack space={3}>
+                {hasContent && tableData ? (
+                    <Table className="border" data={tableData} />
+                ) : (
+                    <Text size={1} muted>
+                        Empty Table
+                    </Text>
+                )}
+            </Stack>
+        </Card>
+    );
+}

package/src/components/type.ts

@@ -0,0 +1,16 @@
+import { PatchEvent } from "sanity";
+
+export interface TableInputProps {
+  schemaType?: any; // Schema type definition
+  value?: string; // The raw STL string value stored in Sanity
+  onChange: (patch: PatchEvent) => void;
+  // Sanity v3 injects these
+  elementProps?: any;
+  readOnly?: boolean;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+export type ReactRenderer = {
+  Table: React.ComponentType<any>;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as TableInput } from './components/TableInput';
+export { default as schema } from './schema/schema';
+export { default as stlTableBlock } from './schema/schema';

package/src/schema/schema.ts

@@ -0,0 +1,37 @@
+import TableInput from "../components/TableInput";
+import { TablePreview } from "../components/TablePreview";
+
+export default {
+  // Use a unique name for this block type
+  name: "stlTableBlock",
+  title: "Structured Table Block",
+  type: "object",
+  icon: () => "📊", // A simple icon for the editor's insert menu
+  fields: [
+    {
+      title: "Table Data (STL Format)",
+      name: "stlString",
+      type: "string",
+      description: "Enter your Structured Table Language (STL) here.",
+      // This is the field that will use custom input component
+      components: {
+        input: TableInput,
+      },
+    },
+    {
+      name: "caption",
+      title: "Table Caption",
+      type: "string",
+    },
+  ],
+  components: {
+    preview: TablePreview,
+  },
+  // A preview for how it looks *inside* the text editor.
+  preview: {
+    select: {
+      title: "caption",
+      subtitle: "stlString",
+    },
+  },
+};