This document explains how to design and implement Extensions in BaroCSS Editor step by step.

1. What is an Extension?
2. What to Define in Extensions
3. What is a Command?
4. Model Transaction and Operation in Commands

This document explains how @barocss/model transactions integrate with DataStore's lock system and transactional overlay.

When a model transaction is executed via transaction(editor, ops).commit(), it orchestrates DataStore's lock and overlay systems to ensure atomic, concurrent-safe operations.

이 문서는 Editor의 Model과 DOM 간 Selection 동기화를 위한 알고리즘과 데이터 구조를 설명합니다. 특히 텍스트 노드 분할, offset 매핑, selection 변환 알고리즘을 다룹니다.

RangeOperations.replaceText() 메서드는 텍스트 범위를 교체할 때 해당 노드의 모든 marks를 자동으로 조정합니다. 이 문서는 텍스트 교체 작업이 marks에 미치는 영향을 상세히 설명합니다.

사용자 입력 중:
1. 브라우저가 DOM에 텍스트 변경 적용 (contentEditable)
 ↓

본 문서는 @barocss/editor-view-dom 패키지의 기술 스펙이다. 구현과 테스트는 본 문서를 기준으로 한다.

1. 아키텍처 개요
2. 레이어 시스템
3. renderer-dom 통합
4. 이벤트 핸들러 시스템

본 문서는 @barocss/renderer-dom 패키지의 기술 스펙이다. 구현과 테스트는 본 문서를 기준으로 한다.

1. 아키텍처 개요
2. DSL 규칙
3. VNode 구조

본 논문은 ContentEditable 기반 에디터에서 View 모드와 Edit 모드를 분리하여 관리하는 이중 모드 렌더링 전략을 제안합니다. 모드 결정은 Model Range를 기반으로 수행되며, 이는 렌더링된 DOM 상태와 무관하게 현재 inline-text가 View 모드인지 Edit 모드인지를 결정할 수 있게 합니다. 또한 렌더링 이후 DOM에서 자유롭게 커서를 옮겨도 Model Range가 동일하면 모델은 동일하게 유지됩니다. Edit 모드에서는 커서가 위치한 inline-text를 문자 단위로 분리하여 렌더링함으로써, mark와 decorator가 실시간으로 추가되어도 텍스트 입력이 깨지지 않도록 보장합니다. View 모드에서는 기존의 run 단위 렌더링을 유지하여 성능을 최적화합니다. MutationObserver 기반 부분 업데이트와 렌더링 제어 전략을 통해 브라우저/모바일 환경 차이에 독립적으로 동작하며, IME 입력과 완벽하게 호환됩니다. 또한 MutationObserver가 사용자 입력(selection 대상)에만 반응하고 외부 모델 업데이트로 인한 DOM 변경은 무시하여 무한 루프를 방지합니다.

핵심 비전: 본 논문에서 제안하는 전략은 완전한 AI 기반 에디터의 기반을 제공합니다. 사용자가 텍스트를 입력하는 동안 AI가 실시간으로 mark와 decorator를 적용하거나, 자동 완성, 문법 교정, 스타일 제안 등의 기능을 수행해도 어떤 편집 작업 중에서도 렌더링이 깨지지 않고, 글자 입력도 중단되지 않는 완전한 에디터 경험을 구현할 수 있습니다.

Keywords: ContentEditable, Text Editor, Rendering Strategy, Selection Preservation, IME Compatibility, AI-Powered E

ContentEditable 기반 리치 텍스트 에디터에서 사용자 입력 중 발생하는 DOM 업데이트는 브라우저의 Selection 객체를 불안정하게 만든다. 본 논문에서는 sid(System ID) 기반 Text Node Pool 개념을 도입하여 Selection이 참조하는 Text Node를 보존함으로써 편집 중 Selection이 깨지는 문제를 근본적으로 해결하는 기법을 제안한다.

이 기법은 DOM 변환/복원(Model Position ↔ DOM Position)과는 별개로, 편집 중 Reconciler가 DOM을 업데이트할 때 sid 기준으로 Text Node Pool을 관리하여 Selection이 있는 Text Node를 정확하고 빠르게 재사용한다. sid는 모델의 고유 식별자이므로, 같은 sid를 가진 Text Node는 같은 모델 노드를 나타내며, 이를 통해 O(n * m)에서 O(n)으로 시간 복잡도를 개선한다. Mark/Decorator 구조 변경 시에도 실제 Text Node는 보존하여 브라우저 Selection의 안정성을 보장한다.

Keywords: ContentEditable, Selection Preservation, Text Node Pool, sid-based Pool, Virtual DOM Reconciliation, Rich Text Editor, Real-time Editing