## API Report File for "@eigenpal/docx-editor-react"

> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).

```ts

import { createRenderedDomContext } from '@eigenpal/docx-editor-core/plugin-api/RenderedDomContext';
import { createTemplatePlugin as createTemplateProseMirrorPlugin } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { EditorPluginCore } from '@eigenpal/docx-editor-core/plugin-api';
import { EditorView } from 'prosemirror-view';
import { getTemplateTags as getTemplatePluginTags } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { PanelConfig } from '@eigenpal/docx-editor-core/plugin-api';
import { PluginPanelProps } from '@eigenpal/docx-editor-core/plugin-api';
import { PositionCoordinates } from '@eigenpal/docx-editor-core/plugin-api';
import * as React_2 from 'react';
import { ReactNode } from 'react';
import { RenderedDomContext } from '@eigenpal/docx-editor-core/plugin-api';
import { RenderedDomContextImpl } from '@eigenpal/docx-editor-core/plugin-api/RenderedDomContext';
import { setHoveredElement } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { setSelectedElement } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { SidebarItem } from '@eigenpal/docx-editor-core/plugin-api';
import { SidebarItemContext } from '@eigenpal/docx-editor-core/plugin-api';
import { TagType } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { TEMPLATE_DECORATION_STYLES } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { templatePluginKey } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';
import { TemplateTag } from '@eigenpal/docx-editor-core/prosemirror/template/prosemirror-plugin';

export { createRenderedDomContext }

// @public
export function createTemplatePlugin(_options?: {
    defaultCollapsed?: boolean;
    panelPosition?: 'left' | 'right';
    panelWidth?: number;
}): ReactEditorPlugin<TemplatePluginState>;

export { createTemplateProseMirrorPlugin }

// @public
export type EditorPlugin<TState = any> = ReactEditorPlugin<TState>;

export { getTemplatePluginTags }

export { PanelConfig }

// @public (undocumented)
export const PLUGIN_HOST_STYLES = "\n.plugin-host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  position: relative;\n}\n\n.plugin-host-editor {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: visible;\n}\n\n\n.plugin-panels-left,\n.plugin-panels-right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  background: #f8f9fa;\n  border-color: #e9ecef;\n}\n\n.plugin-panels-left {\n  border-right: 1px solid #e9ecef;\n}\n\n.plugin-panels-right {\n  border-left: 1px solid #e9ecef;\n}\n\n.plugin-panels-bottom {\n  border-top: 1px solid #e9ecef;\n  background: #f8f9fa;\n}\n\n.plugin-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  transition: width 0.2s ease, height 0.2s ease;\n}\n\n.plugin-panel.collapsed {\n  overflow: visible;\n}\n\n.plugin-panel-toggle {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  font-size: 12px;\n  color: #6c757d;\n  white-space: nowrap;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle {\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  flex-direction: column;\n  height: 100%;\n  padding: 8px 6px;\n}\n\n.plugin-panel-toggle:hover {\n  background: #e9ecef;\n  color: #495057;\n}\n\n.plugin-panel-toggle-icon {\n  font-weight: bold;\n  font-size: 14px;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle-icon {\n  transform: rotate(90deg);\n}\n\n.plugin-panel-toggle-label {\n  font-weight: 500;\n}\n\n.plugin-panel-content {\n  flex: 1;\n  overflow: auto;\n}\n\n/* Right panel rendered inside viewport - scrolls with content */\n.plugin-panel-in-viewport {\n  position: absolute;\n  top: 0;\n  /* Position is set dynamically via inline styles based on page edge */\n  width: 220px;\n  pointer-events: auto;\n  z-index: 10;\n  overflow: visible;\n}\n\n.plugin-panel-in-viewport.collapsed {\n  width: 32px;\n}\n\n.plugin-panel-in-viewport .plugin-panel-toggle {\n  position: sticky;\n  top: 0;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 4px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.plugin-panel-in-viewport-content {\n  overflow: visible;\n  position: relative;\n}\n\n/* Plugin overlay container for rendering highlights/decorations */\n.plugin-overlays-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  z-index: 5;\n}\n\n.plugin-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n/* Individual overlay children manage their own pointer-events.\n   Do NOT set pointer-events: auto here \u2014 it overrides overlay containers\n   that need pointer-events: none to let clicks pass through to the editor. */\n";

// @public
export interface PluginContext {
    editorView: EditorView | null;
    getPluginState: <T>(pluginId: string) => T | undefined;
    plugins: EditorPlugin[];
    scrollToPosition: (pos: number) => void;
    selectRange: (from: number, to: number) => void;
    setEditorView: (view: EditorView | null) => void;
    setPluginState: <T>(pluginId: string, state: T) => void;
}

// @public
export const PluginHost: React_2.ForwardRefExoticComponent<PluginHostProps & React_2.RefAttributes<PluginHostRef>>;

// @public
export interface PluginHostProps {
    children: React.ReactElement;
    className?: string;
    plugins: EditorPlugin[];
}

// @public
export interface PluginHostRef {
    getEditorView: () => EditorView | null;
    getPluginState: <T>(pluginId: string) => T | undefined;
    refreshPluginStates: () => void;
    setPluginState: <T>(pluginId: string, state: T) => void;
}

export { PluginPanelProps }

export { PositionCoordinates }

// @public (undocumented)
export interface ReactEditorPlugin<TState = any> extends EditorPluginCore<TState> {
    getSidebarItems?: (state: TState, context: SidebarItemContext) => ReactSidebarItem[];
    Panel?: React.ComponentType<PluginPanelProps<TState>>;
    renderOverlay?: (context: RenderedDomContext, state: TState, editorView: EditorView | null) => ReactNode;
}

// @public
export interface ReactSidebarItem extends SidebarItem {
    estimatedHeight?: number;
    render: (props: SidebarItemRenderProps) => ReactNode;
}

export { RenderedDomContext }

export { RenderedDomContextImpl }

export { setHoveredElement }

export { setSelectedElement }

export { SidebarItem }

export { SidebarItemContext }

// @public
export interface SidebarItemRenderProps {
    isExpanded: boolean;
    measureRef: (el: HTMLDivElement | null) => void;
    onToggleExpand: () => void;
}

export { TagType }

export { TEMPLATE_DECORATION_STYLES }

// @public
export const templatePlugin: ReactEditorPlugin<TemplatePluginState>;

export { templatePluginKey }

export { TemplateTag }

```
