atomic-ide-plugin

Atomic Web Ide Plugin for Child Pages

Installation

To install the plugin, use the following command:

npm install atomic-ide-plugin

Usage

To use the plugin in your project, follow these steps:

1. Import the plugin into your project:

import IDE from 'atomic-ide-plugin';

Examples

Here are some examples of how to use the plugin:

Using IDEChildPlugin Methods

The IDEChildPlugin provides methods to interact with the parent IDE. Below are some examples:

Opening and Closing Tabs

import Button from "@/components/ui/Button"
import IDE from 'atomic-ide-plugin/child';

const Page = () => {
  const params = useParams();
  const { id } = params;

  return (
    <div>

      <Button onClick={() => {
        IDE.closeTab(id as string)
      }}>Close Current Tab</Button>

      <Button onClick={() => {
        IDE.openTab("tab2", "tab 2", "/ide/plugin/canvas/tab2")
      }}>Open 2nd Tab</Button>

    </div>
  );
};

Managing Sidebars

import Button from "@/components/ui/Button"
import IDE from 'atomic-ide-plugin/child';

const Page = () => {
  return (
    <div>
      <Button onClick={() => {
        IDE.openSidebar("sidebar1", "Sidebar Example", "/ide/plugin/sidebars/example")
      }}>Open Sidebar Canvas</Button>

      <Button onClick={() => {
        IDE.toggleSidebar("sidebar")
      }}>Toggle Sidebar</Button>
    </div>
  );
};

Using IDEParentPlugin

The IDEParentPlugin is used to manage tabs and sidebars from the parent context. Below is an example:

import IDE from 'atomic-ide-plugin/parent';
import useTabs from "@/hooks/use-plugin-tabs";
import useSidebars from "@/hooks/use-plugin-sidebar";

const tabManager = useTabs();
const sidebarManager = useSidebars();

useEffect(() => {
  // Start intercepting messages
  IDE.setTabManager(tabManager).setSidebarManager(sidebarManager);
  const removeInterceptor = IDE.messagesInterceptor();
  // Cleanup the interceptor when the component is unmounted
  return () => {
      removeInterceptor();
  };
}, [tabManager, sidebarManager]);