| 1 |
# Editor App |
| 2 |
|
| 3 |
The Editor App is a React 18 application that provides the visual flow canvas and step configuration interface. It is compiled to `admin-core/assets/build/editor-app.js`. |
| 4 |
|
| 5 |
## Entry Point |
| 6 |
|
| 7 |
**File:** `admin-core/assets/src/EditorApp.js` |
| 8 |
|
| 9 |
```jsx |
| 10 |
import { createRoot } from 'react-dom/client'; |
| 11 |
import { SettingsProvider } from '@Utils/SettingsProvider'; |
| 12 |
import MainEditor from '@Editor/MainEditor'; |
| 13 |
import { ConfirmDialogProvider } from '@Alert/ConfirmDialog'; |
| 14 |
import LoaderPopup from './common/processing-popup/LoaderPopup'; |
| 15 |
|
| 16 |
const WcfEditorAppRoot = createRoot( |
| 17 |
document.getElementById( 'wcf-editor-app' ) |
| 18 |
); |
| 19 |
WcfEditorAppRoot.render( |
| 20 |
<SettingsProvider> |
| 21 |
<ConfirmDialogProvider> |
| 22 |
<MainEditor /> |
| 23 |
<LoaderPopup /> |
| 24 |
</ConfirmDialogProvider> |
| 25 |
</SettingsProvider> |
| 26 |
); |
| 27 |
``` |
| 28 |
|
| 29 |
## Component Hierarchy |
| 30 |
|
| 31 |
``` |
| 32 |
EditorApp.js |
| 33 |
└── SettingsProvider (Context) |
| 34 |
└── ConfirmDialogProvider |
| 35 |
├── MainEditor |
| 36 |
│ ├── Flow Editor (canvas view) |
| 37 |
│ │ ├── StepsPage |
| 38 |
│ │ ├── StepsNavigation |
| 39 |
│ │ ├── AnalyticsPage |
| 40 |
│ │ ├── FlowSettings |
| 41 |
│ │ └── Canvas |
| 42 |
│ │ ├── Node Types |
| 43 |
│ │ │ ├── CheckoutNode |
| 44 |
│ │ │ ├── LandingNode |
| 45 |
│ │ │ ├── OptinNode |
| 46 |
│ │ │ ├── ThankyouNode |
| 47 |
│ │ │ ├── ConditionalNode |
| 48 |
│ │ │ └── OfferNode |
| 49 |
│ │ └── Custom Edges |
| 50 |
│ └── Step Editor (step settings view) |
| 51 |
│ ├── Page settings panel |
| 52 |
│ ├── Field panel |
| 53 |
│ ├── CheckoutFormFields |
| 54 |
│ ├── OptinFormFields |
| 55 |
│ └── Order bump components |
| 56 |
└── LoaderPopup |
| 57 |
``` |
| 58 |
|
| 59 |
## Flow Editor |
| 60 |
|
| 61 |
**Directory:** `admin-core/assets/src/flow-editor/` |
| 62 |
|
| 63 |
The flow editor renders a visual canvas using **react-flow-renderer** (v10.3.17). Each step in a funnel is represented as a node on the canvas. |
| 64 |
|
| 65 |
### Node Types |
| 66 |
|
| 67 |
| Node Type | Step Type | Description | |
| 68 |
|-----------|-----------|-------------| |
| 69 |
| `CheckoutNode` | Checkout | WooCommerce checkout step | |
| 70 |
| `LandingNode` | Landing | Landing/sales page step | |
| 71 |
| `OptinNode` | Optin | Lead capture / opt-in step | |
| 72 |
| `ThankyouNode` | Thank You | Post-purchase thank you page | |
| 73 |
| `ConditionalNode` | Conditional | Branching logic node | |
| 74 |
| `OfferNode` | Offer | Upsell/downsell offer step | |
| 75 |
|
| 76 |
### Canvas Components |
| 77 |
|
| 78 |
| Component | Purpose | |
| 79 |
|-----------|---------| |
| 80 |
| `StepsPage` | Main canvas page with react-flow-renderer | |
| 81 |
| `StepsNavigation` | Step list / navigation sidebar | |
| 82 |
| `AnalyticsPage` | Per-flow analytics view | |
| 83 |
| `FlowSettings.js` | Flow-level settings panel | |
| 84 |
| Custom edges | Animated connection lines between nodes | |
| 85 |
| Canvas helpers | Utilities for node positioning and layout | |
| 86 |
|
| 87 |
## Step Editor |
| 88 |
|
| 89 |
**Directory:** `admin-core/assets/src/step-editor/` |
| 90 |
|
| 91 |
When a user clicks a step node, the step editor opens with configuration panels specific to that step type. |
| 92 |
|
| 93 |
### Panels |
| 94 |
|
| 95 |
| Panel | Purpose | |
| 96 |
|-------|---------| |
| 97 |
| `CheckoutFormFields` | Checkout field configuration (billing, shipping, custom) | |
| 98 |
| `OptinFormFields` | Opt-in form field configuration | |
| 99 |
| Page settings | Page layout, style, and template settings | |
| 100 |
| Field panel | Individual field settings (label, placeholder, required) | |
| 101 |
| Custom editor | Block/page builder integration | |
| 102 |
| Field settings | Advanced field options | |
| 103 |
|
| 104 |
### Order Bump Components |
| 105 |
|
| 106 |
The step editor includes order bump (pre-purchase offer) components: |
| 107 |
|
| 108 |
| Component | Purpose | |
| 109 |
|-----------|---------| |
| 110 |
| `ObInputEvents` | Order bump field event handlers | |
| 111 |
| `OrderBumpPreview` | Live preview of the order bump | |
| 112 |
|
| 113 |
## Template Importer |
| 114 |
|
| 115 |
**Directory:** `admin-core/assets/src/importer/` |
| 116 |
|
| 117 |
The importer UI allows users to browse and import pre-built funnel templates: |
| 118 |
|
| 119 |
| Component | Purpose | |
| 120 |
|-----------|---------| |
| 121 |
| Library templates | Browse the CartFlows template library | |
| 122 |
| Import buttons | Trigger template import | |
| 123 |
| Creator buttons | Create steps from scratch | |
| 124 |
| Popup templates | Template preview popups | |
| 125 |
|
| 126 |
## Reusable Utilities |
| 127 |
|
| 128 |
| Utility | Location | Purpose | |
| 129 |
|---------|----------|---------| |
| 130 |
| `InputEvents` | `editor-app/InputEvents.js` | Common field input event handlers | |
| 131 |
| `SettingsProvider` | `utils/SettingsProvider/` | Context providing global settings state | |
| 132 |
| `ConfirmDialog` | `common/confirm-popup/` | Async confirmation dialog hook | |
| 133 |
|
| 134 |
## Events System |
| 135 |
|
| 136 |
The editor app uses `settingsEvents` (a custom event emitter imported from the settings module) to communicate between decoupled components without prop drilling. |
| 137 |
|
| 138 |
## Related Pages |
| 139 |
|
| 140 |
- [](Frontend-ArchitectureFrontend-Architecture](Frontend-Architecture](Frontend-Architecture) |
| 141 |
- [](Settings-AppSettings-App](Settings-App](Settings-App) |
| 142 |
- [](State-ManagementState-Management](State-Management](State-Management) |
| 143 |
- [](Feature-ModulesFeature-Modules](Feature-Modules](Feature-Modules) |
| 144 |
- [](Build-SystemBuild-System](Build-System](Build-System) |
| 145 |
|
