Ideas, plans and roadmaps for the Playground. Up for Discussion and Brainstorming

Summary

Replace the current plain-textarea playground with a CodeMirror 6-based editor inside a Vite + React + TypeScript + Tailwind frontend, while keeping the existing Salam WebAssembly pipeline unchanged.

Current Constraints

• Playground is currently static in:
  • editor/index.html
  • editor/style.css
  • editor/app.js
• editor/README.md notes the editor uses a plain <textarea> to preserve true RTL Persian editing.
• compiler/tools/bash/update-playground.sh and .github/workflows/web-assembly.yml already generate and publish static assets.

Recommended Editor Foundation

Use CodeMirror 6 as the new editor core because it supports:

• configurable standard / Vim / Emacs keybinding modes
• modular extension architecture
• lighter integration compared to Monaco
• easier long-term evolution toward collaborative features

Recommended Frontend Stack

• Vite
• React
• TypeScript
• Tailwind CSS

Keep Salam wasm/runtime integration as a thin service layer.

Issue #1275 Scope (Keybindings Toggle)

Add an in-sandbox Editor Settings control with:

• Standard
• Vim
• Emacs

Persist preference in local storage (same style as existing theme/lang/mode persistence).

Vim-First Delivery Strategy

Implement an internal editor adapter layer for:

• value/state access
• selection/cursor operations
• commands (run, format, copy, indent)
• keybinding mode registration

Ship Vim first, then add Emacs via the same adapter.

Why This Also Helps #1251

A component-based stack makes future upgrades easier:

• settings UX
• command palette
• multi-buffer/tabs
• diagnostics panes
• keyboard help overlays
• share/export features

Collaboration-Ready Direction

Design state flow to remain compatible with future Yjs collaboration, without requiring multiplayer in phase one.

Migration Plan

1. Keep existing wasm entry points and output views.
2. Replace editor shell/UI first.
3. Preserve current behavior:
   • bilingual UI
   • RTL/LTR switching
   • examples dropdown
   • run/autorun
   • split pane
   • output tabs
4. After parity:
   • add Vim mode
   • add keybinding settings
   • harden adapter abstraction
   • add collaboration hooks

Main Risk

Primary risk is RTL regression, not Vim itself.

Validate thoroughly for:

• Persian RTL typing
• mixed Persian/English code
• cursor movement
• selections
• indentation
• Vim modal behavior in RTL/LTR contexts

Final Recommendation

Adopt:

• CodeMirror 6
• Vite
• React
• TypeScript
• Tailwind

Implement configurable Standard / Vim / Emacs keybindings via an adapter-based architecture, with Vim-first rollout and forward compatibility for collaboration.