Skip to main content
EditorProvider is the context provider for editor components. It manages editor-specific state and must wrap all editor panels, sections and other controls. It should be placed inside a GraphProvider.

​
Basic usage

import { GraphProvider } from '@graphysdk/core';
import { EditorProvider } from '@graphysdk/editor';

<GraphProvider config={config}>
  <EditorProvider>
    {/* Editor panels / sections / controls go here */}
  </EditorProvider>
</GraphProvider>

​
Props

​
children
React.ReactNode
required
Editor components to render within the provider.
​
customColorInputs
CustomColorInputConfig[]
Custom color configuration for series styling in the editor.By default, the editor automatically generates color inputs based on the data series. Use this prop to override that behavior with custom configurations.Type: Array<{ seriesConfigKey: string, label: string }>
const customColorInputs = [
  { seriesConfigKey: 'revenue', label: 'Revenue' },
  { seriesConfigKey: 'profit', label: 'Profit' }
];

<EditorProvider customColorInputs={customColorInputs}>
  {/* Editor panels */}
</EditorProvider>
​
themeOptions
GraphThemeOption[]
Available theme options to display in the editor theme selector.By default, includes light and dark variants of the Graphy theme. Use this to provide custom themes or limit available options.Type: Array<{ label: string, value: GraphTheme }>
import { graphyThemeLight, graphyThemeDark } from '@graphysdk/core';

const themeOptions = [
  { label: 'Light', value: graphyThemeLight },
  { label: 'Dark', value: graphyThemeDark },
  { label: 'Custom', value: myCustomTheme }
];

<EditorProvider themeOptions={themeOptions}>
  {/* Editor panels */}
</EditorProvider>
​
onThemeChange
function
Callback invoked when the user changes the theme in the editor.Signature: (theme: GraphTheme) => void
<EditorProvider 
  onThemeChange={(theme) => {
    console.log('Theme changed to:', theme.id);
  }}
>
  {/* Editor panels */}
</EditorProvider>
​
theme
GraphTheme
Override the theme from GraphProvider. Use this when you want the editor to use a different theme than the chart.
import { graphyThemeDark } from '@graphysdk/core';

<GraphProvider config={config}>
  <EditorProvider theme={graphyThemeDark}>
    {/* Editor panels will use dark theme */}
  </EditorProvider>
</GraphProvider>

​
Complete example

import { useState } from 'react';
import { GraphProvider, Graph, graphyThemeLight, graphyThemeDark } from '@graphysdk/core';
import { EditorProvider, GraphPanel } from '@graphysdk/editor';
import type { GraphConfig, GraphTheme } from '@graphysdk/core';

const themeOptions = [
  { label: 'Light', value: graphyThemeLight },
  { label: 'Dark', value: graphyThemeDark }
];

function MyEditor() {
  const [config, setConfig] = useState<GraphConfig>({
    data: {
      columns: [
        { key: 'category', label: 'Category' },
        { key: 'value', label: 'Value' }
      ],
      rows: [
        { category: 'A', value: 100 },
        { category: 'B', value: 200 }
      ]
    },
    type: 'column'
  });

  return (
    <GraphProvider 
      config={config} 
      onChange={(update) => setConfig({ ...config, ...update })}
    >
      <EditorProvider
        themeOptions={themeOptions}
        onThemeChange={(theme) => {
          console.log('User selected theme:', theme.id);
        }}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <Graph />
          <GraphPanel />
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}

​
Type definitions

interface EditorProviderProps {
  children: React.ReactNode;
  customColorInputs?: CustomColorInputConfig[];
  themeOptions?: GraphThemeOption[];
  onThemeChange?: GraphThemeChangeHandler;
  theme?: GraphTheme;
}

interface CustomColorInputConfig {
  seriesConfigKey: string;
  label: string;
}

interface GraphThemeOption {
  label: string;
  value: GraphTheme;
}

type GraphThemeChangeHandler = (theme: GraphTheme) => void;