@jotx-labs/react-renderer 2.2.0

package/dist/GenericTiptapAdapter 2.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericTiptapAdapter = void 0;
+const registry_1 = require("@jotx/registry");
+const core_1 = require("@tiptap/core");
+const react_1 = require("@tiptap/react");
+/**
+ * Generic Tiptap Adapter
+ * Automatically generates Tiptap node extensions from the Block Registry.
+ */
+class GenericTiptapAdapter {
+    /**
+     * Generates a list of Tiptap Extensions based on the Registry
+     */
+    getExtensions() {
+        const extensions = [];
+        // 1. Core Blocks (Document, Text, Paragraph are standard Tiptap)
+        // We assume StarterKit handles these, or we explicitly define them if overridden.
+        // 2. Registry Blocks
+        const blocks = registry_1.registry.getAll();
+        // Skip standard Tiptap extensions that we handle manually or via StarterKit
+        // 'code' is a mark in Tiptap but might be a block in our registry or just a name collision.
+        // We must avoid defining a Node with the same name as an existing Mark.
+        const SKIP_LIST = [
+            'doc', 'text', 'paragraph',
+            'code', 'codeBlock', 'link', 'bold', 'italic', 'strike', 'underline',
+            'taskItem', 'taskList', 'listItem', 'orderedList', 'bulletList',
+            'heading', 'blockquote', 'hardBreak', 'horizontalRule',
+            'image', 'video'
+        ];
+        blocks.forEach(def => {
+            if (SKIP_LIST.includes(def.type))
+                return;
+            const Ext = core_1.Node.create({
+                name: def.type,
+                group: 'block', // TODO: Handle inline vs block based on definition
+                content: def.syntax.hasChildren ? 'block+' : (def.syntax.hasText ? 'text*' : ''),
+                // Define attributes based on schema
+                addAttributes() {
+                    const attrs = {};
+                    if (def.schema && def.schema.properties) {
+                        Object.entries(def.schema.properties).forEach(([key, prop]) => {
+                            attrs[key] = {
+                                default: prop.default,
+                                // Keep the attribute in the HTML for serialization reference
+                                keepOnSplit: false
+                            };
+                        });
+                    }
+                    return attrs;
+                },
+                parseHTML() {
+                    return [
+                        {
+                            tag: `div[data-type="${def.type}"]`,
+                        },
+                    ];
+                },
+                renderHTML({ HTMLAttributes }) {
+                    return ['div', (0, core_1.mergeAttributes)(HTMLAttributes, { 'data-type': def.type, 'class': `jotx-block ${def.type}` }), 0];
+                },
+                // React Node View
+                addNodeView() {
+                    if (def.ui && def.ui.component) {
+                        // We need a wrapper to handle the lazy load result or standard component
+                        // This part is tricky because addNodeView expects a React component class/function directly usually
+                        // But we can use ReactNodeViewRenderer to wrap it.
+                        // Simplification: We assume the UI kit provides the component directly or via a specific loader
+                        // For now, let's return a placeholder if not ready, or delegate to a DynamicNodeView
+                        return (0, react_1.ReactNodeViewRenderer)(GenericNodeViewWrapper);
+                    }
+                    return null;
+                },
+            });
+            extensions.push(Ext);
+        });
+        return extensions;
+    }
+}
+exports.GenericTiptapAdapter = GenericTiptapAdapter;
+// Temporary Wrapper until we implement the full React Component Loader
+const react_2 = __importDefault(require("react"));
+const react_3 = require("@tiptap/react");
+const GenericNodeViewWrapper = (props) => {
+    const def = registry_1.registry.get(props.node.type.name);
+    const [Component, setComponent] = react_2.default.useState(null);
+    react_2.default.useEffect(() => {
+        if (def?.ui?.component) {
+            def.ui.component().then((mod) => {
+                // Handle default export vs named
+                setComponent(() => mod.default || mod);
+            }).catch((err) => {
+                console.error(`Failed to load component for ${def.type}`, err);
+            });
+        }
+    }, [def]);
+    if (!def)
+        return react_2.default.createElement("div", null,
+            "Unknown Block: ",
+            props.node.type.name,
+            " ");
+    return (react_2.default.createElement(react_3.NodeViewWrapper, { className: `jotx-node-view ${def.type}` },
+        Component ? (react_2.default.createElement(Component, { ...props.node.attrs })) : (react_2.default.createElement("div", { className: "loading-placeholder" },
+            "Loading ",
+            def.ui?.label || def.type,
+            "...")),
+        def.syntax.hasChildren && react_2.default.createElement(react_3.NodeViewContent, { className: "content" })));
+};

package/dist/GenericTiptapAdapter.d 2.ts

@@ -0,0 +1,10 @@
+/**
+ * Generic Tiptap Adapter
+ * Automatically generates Tiptap node extensions from the Block Registry.
+ */
+export declare class GenericTiptapAdapter {
+    /**
+     * Generates a list of Tiptap Extensions based on the Registry
+     */
+    getExtensions(): any[];
+}

package/dist/GenericTiptapAdapter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generic Tiptap Adapter
+ * Automatically generates Tiptap node extensions from the Block Registry.
+ */
+export declare class GenericTiptapAdapter {
+    /**
+     * Generates a list of Tiptap Extensions based on the Registry
+     */
+    getExtensions(): any[];
+}

package/dist/GenericTiptapAdapter.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericTiptapAdapter = void 0;
+const registry_1 = require("@jotx/registry");
+const core_1 = require("@tiptap/core");
+const react_1 = require("@tiptap/react");
+/**
+ * Generic Tiptap Adapter
+ * Automatically generates Tiptap node extensions from the Block Registry.
+ */
+class GenericTiptapAdapter {
+    /**
+     * Generates a list of Tiptap Extensions based on the Registry
+     */
+    getExtensions() {
+        const extensions = [];
+        // 1. Core Blocks (Document, Text, Paragraph are standard Tiptap)
+        // We assume StarterKit handles these, or we explicitly define them if overridden.
+        // 2. Registry Blocks
+        const blocks = registry_1.registry.getAll();
+        // Skip standard Tiptap extensions that we handle manually or via StarterKit
+        // 'code' is a mark in Tiptap but might be a block in our registry or just a name collision.
+        // We must avoid defining a Node with the same name as an existing Mark.
+        const SKIP_LIST = [
+            'doc', 'text', 'paragraph',
+            'code', 'codeBlock', 'link', 'bold', 'italic', 'strike', 'underline',
+            'taskItem', 'taskList', 'listItem', 'orderedList', 'bulletList',
+            'heading', 'blockquote', 'hardBreak', 'horizontalRule',
+            'image', 'video'
+        ];
+        blocks.forEach(def => {
+            if (SKIP_LIST.includes(def.type))
+                return;
+            const Ext = core_1.Node.create({
+                name: def.type,
+                group: 'block', // TODO: Handle inline vs block based on definition
+                content: def.syntax.hasChildren ? 'block+' : (def.syntax.hasText ? 'text*' : ''),
+                // Define attributes based on schema
+                addAttributes() {
+                    const attrs = {};
+                    if (def.schema && def.schema.properties) {
+                        Object.entries(def.schema.properties).forEach(([key, prop]) => {
+                            attrs[key] = {
+                                default: prop.default,
+                                // Keep the attribute in the HTML for serialization reference
+                                keepOnSplit: false
+                            };
+                        });
+                    }
+                    return attrs;
+                },
+                parseHTML() {
+                    return [
+                        {
+                            tag: `div[data-type="${def.type}"]`,
+                        },
+                    ];
+                },
+                renderHTML({ HTMLAttributes }) {
+                    return ['div', (0, core_1.mergeAttributes)(HTMLAttributes, { 'data-type': def.type, 'class': `jotx-block ${def.type}` }), 0];
+                },
+                // React Node View
+                addNodeView() {
+                    if (def.ui && def.ui.component) {
+                        // We need a wrapper to handle the lazy load result or standard component
+                        // This part is tricky because addNodeView expects a React component class/function directly usually
+                        // But we can use ReactNodeViewRenderer to wrap it.
+                        // Simplification: We assume the UI kit provides the component directly or via a specific loader
+                        // For now, let's return a placeholder if not ready, or delegate to a DynamicNodeView
+                        return (0, react_1.ReactNodeViewRenderer)(GenericNodeViewWrapper);
+                    }
+                    return null;
+                },
+            });
+            extensions.push(Ext);
+        });
+        return extensions;
+    }
+}
+exports.GenericTiptapAdapter = GenericTiptapAdapter;
+// Temporary Wrapper until we implement the full React Component Loader
+const react_2 = __importDefault(require("react"));
+const react_3 = require("@tiptap/react");
+const GenericNodeViewWrapper = (props) => {
+    const def = registry_1.registry.get(props.node.type.name);
+    const [Component, setComponent] = react_2.default.useState(null);
+    react_2.default.useEffect(() => {
+        if (def?.ui?.component) {
+            def.ui.component().then((mod) => {
+                // Handle default export vs named
+                setComponent(() => mod.default || mod);
+            }).catch((err) => {
+                console.error(`Failed to load component for ${def.type}`, err);
+            });
+        }
+    }, [def]);
+    if (!def)
+        return react_2.default.createElement("div", null,
+            "Unknown Block: ",
+            props.node.type.name,
+            " ");
+    return (react_2.default.createElement(react_3.NodeViewWrapper, { className: `jotx-node-view ${def.type}` },
+        Component ? (react_2.default.createElement(Component, { ...props.node.attrs })) : (react_2.default.createElement("div", { className: "loading-placeholder" },
+            "Loading ",
+            def.ui?.label || def.type,
+            "...")),
+        def.syntax.hasChildren && react_2.default.createElement(react_3.NodeViewContent, { className: "content" })));
+};

package/dist/PluginLoader 2.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginLoader = exports.PluginLoader = void 0;
+const registry_1 = require("@jotx/registry");
+/**
+ * PluginLoader
+ * Handles validation and registration of external plugins.
+ */
+class PluginLoader {
+    /**
+     * Load a plugin manifest into the registry
+     */
+    load(manifest) {
+        console.log(`🔌 Loading plugin: ${manifest.name} v${manifest.version}`);
+        manifest.contributes.forEach(def => {
+            this.validateDefinition(def);
+            registry_1.registry.register(def);
+            console.log(`   ✅ Registered block: ${def.type}`);
+        });
+    }
+    /**
+     * Basic validation of block definition
+     */
+    validateDefinition(def) {
+        if (!def.type) {
+            throw new Error(`Block definition missing 'type'`);
+        }
+        if (!def.syntax) {
+            throw new Error(`Block ${def.type} missing 'syntax' definition`);
+        }
+        if (!def.schema) {
+            throw new Error(`Block ${def.type} missing 'schema' definition`);
+        }
+        // TODO: More rigorous schema validation (Zod?)
+    }
+}
+exports.PluginLoader = PluginLoader;
+exports.pluginLoader = new PluginLoader();

package/dist/PluginLoader.d 2.ts

@@ -0,0 +1,21 @@
+import { BlockDefinition } from '@jotx/registry';
+export interface PluginManifest {
+    name: string;
+    version: string;
+    contributes: BlockDefinition[];
+}
+/**
+ * PluginLoader
+ * Handles validation and registration of external plugins.
+ */
+export declare class PluginLoader {
+    /**
+     * Load a plugin manifest into the registry
+     */
+    load(manifest: PluginManifest): void;
+    /**
+     * Basic validation of block definition
+     */
+    private validateDefinition;
+}
+export declare const pluginLoader: PluginLoader;

package/dist/PluginLoader.d.ts

@@ -0,0 +1,21 @@
+import { BlockDefinition } from '@jotx/registry';
+export interface PluginManifest {
+    name: string;
+    version: string;
+    contributes: BlockDefinition[];
+}
+/**
+ * PluginLoader
+ * Handles validation and registration of external plugins.
+ */
+export declare class PluginLoader {
+    /**
+     * Load a plugin manifest into the registry
+     */
+    load(manifest: PluginManifest): void;
+    /**
+     * Basic validation of block definition
+     */
+    private validateDefinition;
+}
+export declare const pluginLoader: PluginLoader;

package/dist/PluginLoader.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginLoader = exports.PluginLoader = void 0;
+const registry_1 = require("@jotx/registry");
+/**
+ * PluginLoader
+ * Handles validation and registration of external plugins.
+ */
+class PluginLoader {
+    /**
+     * Load a plugin manifest into the registry
+     */
+    load(manifest) {
+        console.log(`🔌 Loading plugin: ${manifest.name} v${manifest.version}`);
+        manifest.contributes.forEach(def => {
+            this.validateDefinition(def);
+            registry_1.registry.register(def);
+            console.log(`   ✅ Registered block: ${def.type}`);
+        });
+    }
+    /**
+     * Basic validation of block definition
+     */
+    validateDefinition(def) {
+        if (!def.type) {
+            throw new Error(`Block definition missing 'type'`);
+        }
+        if (!def.syntax) {
+            throw new Error(`Block ${def.type} missing 'syntax' definition`);
+        }
+        if (!def.schema) {
+            throw new Error(`Block ${def.type} missing 'schema' definition`);
+        }
+        // TODO: More rigorous schema validation (Zod?)
+    }
+}
+exports.PluginLoader = PluginLoader;
+exports.pluginLoader = new PluginLoader();

package/dist/__tests__/plugin-loader.test.d.ts

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

package/dist/__tests__/plugin-loader.test.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PluginLoader_1 = require("../PluginLoader");
+const registry_1 = require("@jotx/registry");
+describe('PluginLoader', () => {
+    beforeEach(() => {
+        registry_1.registry.clear();
+    });
+    it('should load blocks into the registry', () => {
+        // 1. Define a Mock Plugin
+        const mockPlugin = {
+            name: 'jotx-dummy-plugin',
+            version: '1.0.0',
+            contributes: [
+                {
+                    type: 'youtube',
+                    syntax: { keyword: 'youtube', hasChildren: false },
+                    schema: {
+                        properties: {
+                            url: { type: 'string', required: true }
+                        }
+                    },
+                    ui: {
+                        label: 'YouTube Video'
+                    }
+                }
+            ]
+        };
+        // 2. Load it
+        PluginLoader_1.pluginLoader.load(mockPlugin);
+        // 3. Verify Registry
+        const def = registry_1.registry.get('youtube');
+        expect(def).toBeDefined();
+        expect(def?.syntax.keyword).toBe('youtube');
+    });
+});

package/dist/__tests__/simple.test.js

@@ -0,0 +1,6 @@
+"use strict";
+describe('Simple Test', () => {
+    it('should pass', () => {
+        expect(true).toBe(true);
+    });
+});

package/dist/index 2.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GenericTiptapAdapter"), exports);

package/dist/index.d 2.ts

@@ -0,0 +1 @@
+export * from './GenericTiptapAdapter';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './GenericTiptapAdapter';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GenericTiptapAdapter"), exports);

package/dist/verify-loader 2.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PluginLoader_1 = require("./PluginLoader");
+const registry_1 = require("@jotx/registry");
+async function verify() {
+    console.log('🚀 Starting PluginLoader verification...');
+    registry_1.registry.clear();
+    // 1. Define a Mock Plugin
+    const mockPlugin = {
+        name: 'jotx-dummy-plugin',
+        version: '1.0.0',
+        contributes: [
+            {
+                type: 'youtube',
+                syntax: { keyword: 'youtube', hasChildren: false },
+                schema: {
+                    properties: {
+                        url: { type: 'string', required: true }
+                    }
+                },
+                ui: {
+                    label: 'YouTube Video'
+                }
+            }
+        ]
+    };
+    // 2. Load it
+    PluginLoader_1.pluginLoader.load(mockPlugin);
+    // 3. Verify Registry
+    const def = registry_1.registry.get('youtube');
+    if (def && def.syntax.keyword === 'youtube') {
+        console.log('✅ PluginLoader registered block successfully!');
+    }
+    else {
+        console.error('❌ PluginLoader failed to register block.');
+        process.exit(1);
+    }
+}
+verify().catch(console.error);

package/dist/verify-loader.d 2.ts

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

package/dist/verify-loader.d.ts

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

package/dist/verify-loader.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PluginLoader_1 = require("./PluginLoader");
+const registry_1 = require("@jotx/registry");
+async function verify() {
+    console.log('🚀 Starting PluginLoader verification...');
+    registry_1.registry.clear();
+    // 1. Define a Mock Plugin
+    const mockPlugin = {
+        name: 'jotx-dummy-plugin',
+        version: '1.0.0',
+        contributes: [
+            {
+                type: 'youtube',
+                syntax: { keyword: 'youtube', hasChildren: false },
+                schema: {
+                    properties: {
+                        url: { type: 'string', required: true }
+                    }
+                },
+                ui: {
+                    label: 'YouTube Video'
+                }
+            }
+        ]
+    };
+    // 2. Load it
+    PluginLoader_1.pluginLoader.load(mockPlugin);
+    // 3. Verify Registry
+    const def = registry_1.registry.get('youtube');
+    if (def && def.syntax.keyword === 'youtube') {
+        console.log('✅ PluginLoader registered block successfully!');
+    }
+    else {
+        console.error('❌ PluginLoader failed to register block.');
+        process.exit(1);
+    }
+}
+verify().catch(console.error);

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@jotx-labs/react-renderer",
+  "version": "2.2.0",
+  "files": [
+    "dist"
+  ],
+  "description": "Generic React renderer for jotx documents",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w"
+  },
+  "keywords": [
+    "jotx",
+    "react",
+    "renderer"
+  ],
+  "author": "balajiboominathan",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@jotx/core": "file:../core",
+    "@jotx/registry": "file:../registry",
+    "@tiptap/core": "^2.1.0",
+    "@tiptap/react": "^2.1.0",
+    "@tiptap/starter-kit": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "ts-jest": "^29.4.6",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.0.0"
+  }
+}