diff --git a/README.md b/README.md index ffb95c0..24f929d 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ import panel as pn from panel_reactflow import ReactFlow -pn.extension() +pn.extension("jsoneditor") nodes = [ { diff --git a/docs/index.md b/docs/index.md index a199a9a..7d6c6b3 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,11 +22,15 @@ generate forms, and plug in editors where you need full control. ## Quickstart +!!! tip "JSONEditor Extension Required" + ReactFlow requires the `jsoneditor` Panel extension for editing node and edge data. + Always call `pn.extension("jsoneditor")` at the start of your application. + ```python import panel as pn from panel_reactflow import NodeType, ReactFlow -pn.extension() +pn.extension("jsoneditor") task_schema = { "type": "object", diff --git a/docs/quickstart.md b/docs/quickstart.md index 3422b2f..cf1198e 100644 --- a/docs/quickstart.md +++ b/docs/quickstart.md @@ -14,6 +14,12 @@ pip install panel-reactflow ## Minimal app +!!! note "Required Extension" + ReactFlow uses Panel's JSONEditor widget for editing node and edge data. + You must call `pn.extension("jsoneditor")` before creating ReactFlow instances + to ensure the extension loads correctly. This should be done early in your + application, typically right after your imports. + ```python import panel as pn diff --git a/src/panel_reactflow/schema.py b/src/panel_reactflow/schema.py index ae0c2aa..1bbb6a2 100644 --- a/src/panel_reactflow/schema.py +++ b/src/panel_reactflow/schema.py @@ -1,7 +1,7 @@ import pandas as pd import panel as pn import param # type: ignore -from panel.layout.base import Panel +from panel.layout.base import ListLike, Panel from panel.pane.base import PaneBase from panel.widgets.base import WidgetBase from panel_material_ui import ( @@ -27,7 +27,10 @@ class JSONSchema(PaneBase): default_layout = param.ClassSelector( default=Paper, - class_=(Panel,), + class_=( + Panel, + ListLike, + ), is_instance=False, doc=""" Defines the layout the model(s) returned by the pane will diff --git a/tests/ui/test_ui.py b/tests/ui/test_ui.py index 8e9414e..4f8a636 100644 --- a/tests/ui/test_ui.py +++ b/tests/ui/test_ui.py @@ -1,6 +1,7 @@ """UI tests for ReactFlow using Playwright.""" import panel as pn +import panel.models.jsoneditor # noqa import pytest from panel.tests.util import serve_component, wait_until @@ -10,8 +11,6 @@ from playwright.sync_api import expect -pn.extension() - pytestmark = pytest.mark.ui