@pulse-editor/react-api 0.0.1

package/README.md

@@ -0,0 +1 @@
+This directory contains source code for the NPM package "pulse-editor/api". Third party developers can use context and wrapper utilities to make their Pulse Editor using React.

package/babel.config.json

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}

package/eslint.config.js

@@ -0,0 +1,29 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+  },
+  {
+    ignores: ["node_modules/**", "dist/**"],
+  },
+  {
+    languageOptions: { globals: globals.browser },
+    settings: {
+      react: { version: "detect" },
+    },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+];

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@pulse-editor/react-api",
+  "version": "0.0.1",
+  "main": "src/main.ts",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@eslint/js": "^9.18.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/react": "^19.0.7",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react": "^7.37.4",
+    "globals": "^15.14.0",
+    "install": "^0.13.0",
+    "npm": "^11.0.0",
+    "postcss": "^8.5.1",
+    "postcss-loader": "^8.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup": "^4.31.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@pulse-editor/types": "*",
+    "@pulse-editor/shared-utils": "*"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/rollup.config.mjs

@@ -0,0 +1,40 @@
+import resolve from "@rollup/plugin-node-resolve";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import babel from "@rollup/plugin-babel";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import terser from "@rollup/plugin-terser";
+
+// rollup.config.mjs
+export default {
+  input: "src/main.ts",
+  output: [
+    {
+      file: "dist/bundle.js",
+      format: "cjs",
+    },
+    {
+      file: "dist/bundle.es.js",
+      format: "es",
+      exports: "named",
+    },
+  ],
+  plugins: [
+    postcss({
+      plugins: [],
+      minimize: true,
+    }),
+    resolve({
+      extensions: [".js", ".ts", ".tsx", ".jsx"],
+    }),
+    peerDepsExternal(),
+    babel({
+      babelHelpers: "bundled",
+      exclude: ["node_modules/**"],
+    }),
+    typescript({
+      exclude: ["node_modules/**", "src/stories/**"],
+    }),
+    terser(),
+  ],
+};

package/src/hooks/use-agent-tools.ts

@@ -0,0 +1,48 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import { AgentTool, IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useAgentTools(moduleName: string) {
+  const [imc, setImc] = useState<InterModuleCommunication | undefined>(
+    undefined
+  );
+  const [isReady, setIsReady] = useState(false);
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const targetWindow = window.parent;
+
+  useEffect(() => {
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+    setIsReady(true);
+
+    imc.sendMessage(IMCMessageTypeEnum.Ready);
+
+    return () => {
+      imc.close();
+    };
+  }, []);
+
+  async function installAgentTool(tool: AgentTool) {
+    if (!imc) {
+      throw new Error("IMC not initialized.");
+    }
+
+    await imc
+      .sendMessage(IMCMessageTypeEnum.InstallAgentTool, tool)
+      .then((response) => {
+        if (response.type === IMCMessageTypeEnum.Error) {
+          throw new Error(response.payload);
+        }
+      });
+  }
+
+  return { installAgentTool };
+}

package/src/hooks/use-agents.ts

@@ -0,0 +1,80 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import { Agent, IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useAgents(moduleName: string) {
+  const [imc, setImc] = useState<InterModuleCommunication | undefined>(
+    undefined
+  );
+  const [isReady, setIsReady] = useState(false);
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const targetWindow = window.parent;
+
+  useEffect(() => {
+    // Init IMC
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+    setIsReady(true);
+
+    imc.sendMessage(IMCMessageTypeEnum.Ready);
+
+    return () => {
+      imc.close();
+    };
+  }, []);
+
+  async function installAgent(config: Agent) {
+    if (!imc) {
+      throw new Error("IMC not initialized.");
+    }
+
+    await imc
+      .sendMessage(IMCMessageTypeEnum.InstallAgent, config)
+      .then((response) => {
+        if (response.type === IMCMessageTypeEnum.Error) {
+          throw new Error(response.payload);
+        }
+      });
+  }
+
+  async function runAgentMethod(
+    agentName: string,
+    methodName: string,
+    parameters: Record<string, any>,
+    abortSignal?: AbortSignal
+  ): Promise<Record<string, any>> {
+    if (!imc) {
+      throw new Error("IMC not initialized.");
+    }
+
+    const result = await imc
+      .sendMessage(
+        IMCMessageTypeEnum.RunAgentMethod,
+        {
+          agentName,
+          methodName,
+          parameters,
+        },
+        abortSignal
+      )
+      .then((response) => {
+        return response as Record<string, any>;
+      });
+
+    return result;
+  }
+
+  return {
+    installAgent,
+    runAgentMethod,
+    isReady,
+  };
+}

package/src/hooks/use-fetch.ts

@@ -0,0 +1,45 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useFetch(moduleName: string) {
+  const [imc, setImc] = useState<InterModuleCommunication | undefined>(
+    undefined
+  );
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const targetWindow = window.parent;
+
+  useEffect(() => {
+    // Init IMC
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+
+    console.log("Sent ready message");
+    imc.sendMessage(IMCMessageTypeEnum.Ready);
+
+    return () => {
+      imc.close();
+    };
+  }, []);
+
+  function fetch(uri: string, options?: RequestInit): Promise<Response> {
+    if (!imc) {
+      throw new Error("IMC is not initialized.");
+    }
+
+    return imc.sendMessage(
+      IMCMessageTypeEnum.Fetch,
+      JSON.stringify({ uri, options })
+    );
+  }
+
+  return { fetch };
+}

package/src/hooks/use-file-view.ts

@@ -0,0 +1,62 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import {
+  IMCMessage,
+  IMCMessageTypeEnum,
+  FileViewModel,
+} from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useFileView(moduleName: string) {
+  const [viewFile, setViewFile] = useState<FileViewModel | undefined>(
+    undefined
+  );
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const targetWindow = window.parent;
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const [imc, setImc] = useState<InterModuleCommunication | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    // Init IMC
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+
+    imc.sendMessage(IMCMessageTypeEnum.Ready).then(() => {
+      imc.sendMessage(IMCMessageTypeEnum.RequestViewFile).then((model) => {
+        setViewFile(model);
+      });
+    });
+
+    return () => {
+      console.log("Closing IMC for extension: ", moduleName);
+      imc.close();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isLoaded) {
+      imc?.sendMessage(IMCMessageTypeEnum.Loaded);
+    }
+  }, [isLoaded, imc]);
+
+  function updateViewFile(file: FileViewModel) {
+    // sender.sendMessage(ViewBoxMessageTypeEnum.ViewFile, JSON.stringify(file));
+    imc?.sendMessage(IMCMessageTypeEnum.WriteViewFile, file);
+  }
+
+  return {
+    viewFile,
+    updateViewFile,
+    setIsLoaded,
+  };
+}

package/src/hooks/use-notification.ts

@@ -0,0 +1,48 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import {
+  NotificationTypeEnum,
+  IMCMessage,
+  IMCMessageTypeEnum,
+} from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useNotification(moduleName: string) {
+  const [imc, setImc] = useState<InterModuleCommunication | undefined>(
+    undefined
+  );
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const targetWindow = window.parent;
+
+  useEffect(() => {
+    // Init IMC
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+
+    console.log("Sent ready message");
+    imc.sendMessage(IMCMessageTypeEnum.Ready);
+
+    return () => {
+      imc.close();
+    };
+  }, []);
+
+  function openNotification(text: string, type: NotificationTypeEnum) {
+    if (!imc) {
+      throw new Error("IMC is not initialized.");
+    }
+    imc.sendMessage(IMCMessageTypeEnum.Notification, {
+      text,
+      type,
+    });
+  }
+
+  return { openNotification };
+}

package/src/hooks/use-orc.ts

@@ -0,0 +1,50 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useOCR(moduleName: string) {
+  const [imc, setImc] = useState<InterModuleCommunication | undefined>(
+    undefined
+  );
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  const targetWindow = window.parent;
+
+  useEffect(() => {
+    // Init IMC
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+
+    console.log("Sent ready message");
+    imc.sendMessage(IMCMessageTypeEnum.Ready);
+
+    return () => {
+      imc.close();
+    };
+  }, []);
+
+  async function recognizeText(uri: string): Promise<string> {
+    if (!imc) {
+      throw new Error("IMC is not initialized.");
+    }
+
+    // Send the message to the extension
+    const result = await imc.sendMessage(
+      IMCMessageTypeEnum.OCR,
+      { uri }
+    );
+
+    return result.payload.text;
+  }
+
+  return {
+    recognizeText,
+  };
+}

package/src/hooks/use-theme.ts

@@ -0,0 +1,43 @@
+import { InterModuleCommunication } from "@pulse-editor/shared-utils";
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/types";
+import { useEffect, useState } from "react";
+
+export default function useTheme(moduleName: string) {
+  const [theme, setTheme] = useState<string>("light");
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >();
+
+  receiverHandlerMap.set(
+    IMCMessageTypeEnum.ThemeChange,
+    async (senderWindow: Window, message: IMCMessage) => {
+      const theme = message.payload;
+      setTheme((prev) => theme);
+    }
+  );
+
+  const [, setImc] = useState<InterModuleCommunication | undefined>(undefined);
+
+  const targetWindow = window.parent;
+
+  useEffect(() => {
+    // Init IMC
+    const imc = new InterModuleCommunication(moduleName);
+    imc.initThisWindow(window);
+    imc.updateReceiverHandlerMap(receiverHandlerMap);
+    imc.initOtherWindow(targetWindow);
+    setImc(imc);
+
+    console.log("Sent ready message");
+    imc.sendMessage(IMCMessageTypeEnum.Ready);
+
+    return () => {
+      imc.close();
+    };
+  }, []);
+
+  return {
+    theme,
+  };
+}

package/src/main.ts

@@ -0,0 +1,7 @@
+import useFileView from "./hooks/use-file-view";
+import useTheme from "./hooks/use-theme";
+import useNotification from "./hooks/use-notification";
+import useAgents from "./hooks/use-agents";
+import useOCR from "./hooks/use-orc";
+
+export { useFileView, useTheme, useNotification, useAgents as useAgent, useOCR };

package/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  // Toggle dark-mode based on .dark class or data-mode="dark"
+  darkMode: ["class", '[data-mode="dark"]'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "jsx": "react",
+        "outDir": "./dist",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "declaration": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+}