PostMessage RPC API Documentation - v0.2.2
    Preparing search index...

    Function initInlinePlugin

    • Initializes an inline plugin embedded within a specified DOM container.

      Use this function when you want to embed a plugin directly into your page layout (e.g., as a widget, card, or component). The plugin iframe will be sized to fit the container and remain visible at all times.

      • Multiple plugins on the same page (e.g., widget dashboard)
      • Plugins that are part of the normal page flow
      • Plugins that need to be resized based on container
      • Persistent plugins that shouldn't be hidden/shown
      import { initInlinePlugin } from '@micskeil/postmessage-rpc';

      // Create a container for the plugin
      const container = document.getElementById('my-plugin-container');

      // Initialize the inline plugin
      const plugin = await initInlinePlugin(
        {
          data: {
            noteId: '123',
            title: 'My Note'
          },
          settings: {
            theme: 'light',
            editable: true
          },
          hooks: {
            onUpdate: async (note) => {
              console.log('Note updated:', note);
              await saveToBackend(note);
            },
            onDelete: async () => {
              console.log('Note deleted');
              await deleteFromBackend(noteId);
            }
          }
        },
        {
          src: 'https://plugin.example.com/note-widget.html',
          container: container,
          timeout: 5000
        }
      );

      // Call plugin methods
      await plugin.methods.setReadOnly(true);

      // Get plugin data
      const data = await plugin.methods.getData();

      // Cleanup when plugin is no longer needed
      plugin.destroy();
      Feature Inline Fullscreen
      Display Embedded in container Fullscreen overlay
      Animation None (always visible) Show/hide animations
      Layout Respects container size Fills viewport
      Use Case Widgets, cards Modals, editors
      Multiple Can have many Usually one active

      Parameters

      • config: PluginConfig

        Plugin configuration object

        Configuration for initializing a plugin from the parent side

        • data: unknown

          Initial data to pass to the plugin

        • settings: unknown

          Plugin settings and configuration

        • hooks: Record<string, Method>

          Map of hook names to callback functions that the parent provides to the plugin

      • options: InlinePluginOptions

        Inline-specific initialization options

        Options for inline plugin initialization

        • src: string

          URL of the plugin to load

        • container: HTMLElement

          Container element where the plugin iframe will be appended

        • OptionalbeforeInit?: (context: { container: HTMLElement; iframe: HTMLIFrameElement }) => void

          Optional callback invoked before initializing the plugin iframe

        • Optionaltimeout?: number

          Optional timeout in milliseconds for plugin initialization

      Returns Promise<InlinePlugin>

      Promise resolving to inline plugin interface with methods and destroy function

      If plugin fails to initialize within the timeout period

      // Multiple inline plugins example
      const noteIds = ['1', '2', '3'];

      for (const noteId of noteIds) {
        const container = document.getElementById(`note-${noteId}`);
        const plugin = await initInlinePlugin(
          {
            data: { noteId },
            hooks: {
              onSave: (data) => saveNote(data)
            }
          },
          {
            src: 'https://example.com/note-plugin.html',
            container
          }
        );
      }

    Settings

    Member Visibility

    On This Page

    When to Use Inline PluginsBasic UsageDifferences from Fullscreen Plugins