1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
# Baba Yaga Inline AST Editor
A web-based structural editor for the Baba Yaga programming language, featuring real-time AST visualization and **inline tree editing** capabilities.
## **Core Concept**
This editor allows you to edit code structure directly through the Abstract Syntax Tree (AST) view. Instead of traditional forms, you can **double-click any element** in the tree to edit it inline, making structural editing intuitive and powerful.
## **Key Features**
### **Inline AST Editing**
- **Double-click to Edit**: Any node type, name, value, or parameter
- **Real-time Updates**: Changes sync immediately between AST and code editor
- **Action Buttons**: + (add child) and × (delete) for each node
- **Smart Scaffolding**: Add Function, When, or With expressions with one click
### **Layout & UX**
- **Side-by-side Layout**: Code editor (50%) + AST tree editor (50%)
- **Output Panel**: Below both panels for execution results
- **Mobile Responsive**: Stacks vertically on smaller screens
- **Auto-parsing**: Code updates in real-time as you edit
### **Bidirectional Synchronization**
- **AST ↔ Code Editor**: Always in sync
- **Real-time Parsing**: 500ms debounced parsing as you type
- **Visual Feedback**: Parse status indicators and error highlighting
## **Architecture**
The editor consists of several key components:
- **Code Editor**: Text-based input for Baba Yaga code
- **AST Tree Editor**: Interactive tree view with inline editing
- **AST Synchronizer**: Manages bidirectional synchronization
- **Baba Yaga Parser**: Real language parser integration
- **Code Generator**: Converts modified AST back to code
## **How to Use**
### **Basic Workflow**
1. **Type Code** → See AST tree automatically generated
2. **Double-click** any node element to edit inline
3. **Click +** to add child nodes
4. **Click ×** to delete nodes
5. **Use + Function/When/With** buttons for quick scaffolding
### **Inline Editing**
- **Node Types**: Double-click the type (e.g., "FunctionDeclaration")
- **Names & Values**: Double-click any name or value field
- **Parameters**: Double-click parameter names or types
- **Keyboard**: Enter to save, Escape to cancel
### **Quick Add Elements**
- **+ Function**: Creates `newFunction : -> expression`
- **+ When**: Creates empty when expression structure
- **+ With**: Creates empty with header structure
## **Development**
### **Setup**
1. Ensure you have a web server running (e.g., `python3 -m http.server 8000`)
2. Open `index.html` in your browser
3. The editor will automatically load and parse any existing code
### **Key Components**
- `editor.js`: Main editor class with inline editing logic
- `ast-synchronizer.js`: AST synchronization and code generation
- `main.js`: Application initialization and global utilities
### **Adding New Features**
To extend the inline editing capabilities:
1. **New Node Types**: Add to `createDefaultChildNode()` method
2. **Custom Editors**: Extend the inline editing methods
3. **Validation**: Add input validation in `finishEdit*` methods
4. **Code Generation**: Update the code generation logic
## **Future Enhancements**
- **Syntax Highlighting**: ✅ Baba Yaga language support (implemented!)
- **Advanced Pattern Matching**: Enhanced when expression editing
- **Type System Integration**: Better type inference and validation
- **Code Suggestions**: Intelligent autocomplete and suggestions
- **Refactoring Tools**: Automated code restructuring
- **Export/Import**: Save and load AST structures
- **Undo/Redo**: Track editing history
- **Drag & Drop**: Visual AST manipulation
## **Technical Details**
### **Inline Editing Implementation**
- **Event Delegation**: Handles all editing through centralized methods
- **Dynamic Input Fields**: Replace text with input boxes on interaction
- **AST Manipulation**: Direct tree structure modification
- **Real-time Sync**: Immediate updates between views
### **Performance Optimizations**
- **Debounced Parsing**: 500ms delay to avoid excessive parsing
- **Selective Updates**: Only re-render changed sections
- **Memory Management**: Efficient AST node tracking
### **Syntax Highlighting Features**
- **Custom Language Mode**: Full Baba Yaga syntax support
- **Token Recognition**: Keywords, types, functions, operators, numbers, strings
- **Smart Indentation**: Auto-indent for function bodies, when expressions, with headers
- **Theme Integration**: Monokai dark theme with custom Baba Yaga colors
- **Code Folding**: Collapsible code blocks for better organization
## 🌟 **Why Inline Editing?**
Traditional structural editors require switching between different forms and panels, which can be cumbersome. This inline approach:
- **Reduces Context Switching**: Edit directly where you see the structure
- **Improves Workflow**: Faster iteration and experimentation
- **Enhances Understanding**: Visual connection between structure and code
- **Increases Productivity**: More intuitive editing experience
## 📁 **File Structure**
```
web/editor/
├── index.html # Main HTML with inline editor layout
├── styles.css # CSS with inline editing styles
├── js/
│ ├── editor.js # Main editor with inline editing logic
│ ├── ast-synchronizer.js # AST sync and code generation
│ ├── baba-yaga-mode.js # Custom CodeMirror language mode
│ ├── main.js # Application initialization
│ └── tree-sitter-baba-yaga.js # Future grammar integration
└── README.md # This documentation
```
## 🎨 **Syntax Highlighting Colors**
The editor provides rich syntax highlighting with a carefully chosen color scheme:
- **Keywords** (`when`, `with`, `rec`, `in`): Purple (#c586c0)
- **Types** (`Int`, `String`, `Result`): Teal (#4ec9b0)
- **Functions** (function names): Yellow (#dcdcaa)
- **Builtins** (`map`, `filter`, `reduce`): Orange (#d7ba7d)
- **Operators** (`->`, `:`, `+`, `*`): White (#d4d4d4)
- **Numbers**: Green (#b5cea8)
- **Strings**: Red (#ce9178)
- **Comments**: Green (#6a9955)
- **Variables**: Blue (#9cdcfe)
## **Development Commands**
The editor provides several console commands for development:
```javascript
// Get current AST
window.babaYagaEditorCommands.getAST()
// Get current code
window.babaYagaEditorCommands.getCode()
// Parse current code
window.babaYagaEditorCommands.parse()
// Format current code
window.babaYagaEditorCommands.format()
// Show AST in console
window.babaYagaEditorCommands.showAST()
// Show code in console
window.babaYagaEditorCommands.showCode()
```
## 🔧 **Baba Yaga Language Support**
### **Supported Constructs**
- **Function Declarations**: `name : params -> body`
- **Variable Declarations**: `name : value`
- **Basic Expressions**: Arithmetic, comparison, logical operators
- **Pattern Matching**: `when` expressions (basic support)
- **Local Bindings**: `with` headers (basic support)
### **Language Features**
- **Currying**: Multiple arrow functions
- **Type Annotations**: Optional type declarations
- **Pattern Matching**: `when` expressions with multiple cases
- **Recursion**: `with rec` for mutually recursive functions
- **Immutability**: All data structures are immutable
## 🚀 **Getting Started**
1. **Clone the repository** and navigate to `web/editor/`
2. **Start a web server**: `python3 -m http.server 8000`
3. **Open in browser**: Navigate to `http://localhost:8000/web/editor/`
4. **Start editing**: Type Baba Yaga code or use the inline AST editor
## 🤝 **Contributing**
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request
## 📄 **License**
This project is part of the Baba Yaga language implementation. See the main project license for details.
## 🙏 **Acknowledgments**
- Inspired by functional programming language editors
- Built on modern web technologies
- Designed for educational and development use
|