Jodit is a pure TypeScript WYSIWYG HTML editor designed for embedding in web applications. It provides a rich editing experience with a toolbar, file browser, image editor, and support for complex formatting, tables, media embedding, and source code editing. The editor is built on a modular plugin architecture with over 60 built-in plugins, a custom event system, a UI component framework, and extensive internationalization (30+ languages). It includes security-focused HTML sanitization, undo/redo with snapshot history, and async storage providers (IndexedDB, localStorage, memory). The project is MIT-licensed with a commercial PRO version offering additional plugins like AI assistant and PDF export. The architecture is layered: core modules (event emitter, DOM helpers, selection/style engine, async utilities, decorators) provide the foundation; a plugin system manages lifecycle and dependencies; UI components (buttons, forms, popups, dialogs) are built with a BEM-like naming scheme and state-driven rendering; and modules (file browser, uploader, toolbar, history) implement higher-level features. The editor can operate in inline or iframe mode, supports dark themes, and is responsive with mobile-adaptive toolbars. Key entry points are the Jodit class constructor and the static Jodit.make() factory method. The primary data flow is user input (keyboard, mouse, clipboard) processed through the selection engine and plugins, producing sanitized HTML output. External runtime dependencies are minimal (no required JavaScript libraries), but the build system relies on Webpack, TypeScript, and various development tools.
Ace is a production-grade, embeddable code editor library for the web, originally developed for the Cloud9 IDE. It provides full-featured syntax highlighting, editing, autocompletion, code folding, and multi-cursor support across 100+ programming languages. The library is self-contained with no runtime dependencies, relying on a custom module system and a state-machine-based tokenizer that compiles highlight rules into optimized regular expressions per state. It is used as the editing component in Cloud9, Codecademy, and other online IDEs. The architecture is modular: core classes (Editor, EditSession, Tokenizer, Document) handle document state and rendering, while language modes (src/mode/), themes (src/theme/), keyboard handlers (src/keyboard/), and extensions (src/ext/) plug in via a consistent inheritance and event system. Key entry points include src/ace.js (main export), src/editor.js, and src/edit_session.js. Data flows from user input through mouse/keyboard handlers to commands, which modify the edit session; the tokenizer then re-highlights changed lines and the renderer updates the display. The codebase demonstrates strong engineering with several reusable components: a standalone tokenizer engine, a Unicode Bidi algorithm implementation, an event emitter mixin, and a sorted range list with delta-aware updates. Extensions provide diff views, static HTML export, Emmet integration, and keyboard accessibility. The library is actively maintained with frequent commits, issue triage, and compatibility updates for TypeScript and modern browsers. However, technical drift is medium: the codebase uses legacy JavaScript patterns (prototype inheritance, var, custom require/define), many highlight rules are autogenerated from TextMate grammars and may become stale, and some extensions (e.g., beautify) are explicitly marked as outdated. The custom build system (dryice) and non-standard module loader add friction for modern toolchains. Despite this, the core editor remains robust and widely adopted.
GraphvizOnline is a client-side Single Page Application (SPA) designed for editing and rendering Graphviz DOT language diagrams directly within the browser. The architecture is purely frontend, utilizing the Ace Editor library for syntax highlighting and `viz.js` (Graphviz compiled to JavaScript/WebAssembly) for rendering. The application manages state via URL parameters and hash fragments, enabling shareable links and presentation modes without backend dependencies. It functions as a self-contained static web tool, relying on bundled dependencies for core functionality.