.windsurfrules

에디터 기능 요구사항
	1.	이 에디터는 누구나 쉽게 소스 코드에 추가(Add-on)하여 사용할 수 있는 오픈소스 웹 에디터입니다.
	2.	에디터 영역을 초기화한 후 contenteditable="true" 로 설정한 editor-div에서, 에디터의 기능을 클릭하면 표준 HTML 코드가 생성되어 해당 div 영역에 적용됩니다.
	3.	모든 개발 코드는 .rules 파일의 내용을 기반으로 작성됩니다.
	4.	마우스로 드래그하여 선택한 영역 또는 더블 클릭으로 지정한 영역에 대해 에디터 기능을 클릭했을 때 서식이 적용됩니다.
	5.	각 에디터 기능에는 자체적인 단축키를 지정해야 합니다.
예를 들어, “Heading” 기능에서 h1 태그를 선택하면 macOS에서는 Command + 1, Windows에서는 Ctrl + 1 단축키가 적용됩니다.
단축키가 지정되지 않은 경우, 해당 단축키를 null 또는 공백으로 설정하여 추후 추가할 수 있도록 해야 합니다.
	6.	모든 에디터 기능 아이콘은 언제든지 추가하거나 삭제할 수 있는 구조를 가져야 합니다.
	7.	이 에디터는 사용자가 에디터 라이브러리를 다운로드 한 후 소스에서 간단히 추가한 뒤 설치할 수 있어야 합니다.
	8.	프롬프트를 실행할 때, 별도로 언급하지 않는 한 기존 UI 요소를 해치거나, 레이어, 버튼, 기능 등을 임의로 삭제 또는 변경해서는 안 됩니다.
	9.	“되돌리기” 또는 “롤백” 명령을 실행하면, 현재 수행 중인 작업이 즉시 직전 상태로 복원되어야 합니다.
	10.	아이콘을 클릭하여 태그가 적용된 상태에서도, 선택된 영역이 그대로 유지되어야 합니다.
	11.	선택한 영역에 HTML 태그를 적용한 후, 동일한 선택 영역에서 같은 아이콘을 다시 클릭하면 이미 적용된 HTML 태그가 제거되어야 합니다.
(예: bold 아이콘을 클릭하면 <b>텍스트</b>가 적용되지만, 동일한 영역에서 다시 bold 아이콘을 클릭하면 <b><b>텍스트</b></b>가 되는 것이 아니라 <b> 태그가 제거되어야 합니다.)
	12.	실행 취소 및 재실행(Undo/Redo) 기능은 OS에서 기본 제공하는 Command + Z, Command + Shift + Z와 동일하게 동작해야 합니다.
	13.	폰트, 제목(Heading), 색상(Color), 정렬(Align)과 같이 별도의 설정 레이어를 가진 아이콘은, editor-div에서 선택한 텍스트 블록에 최종적으로 설정 레이어에서 선택된 HTML 코드가 적용되어야 합니다.
    14. 서식 제거 아이콘은 선택된 블록에 적용된 html 코드를 제거합니다. 
	15. 새로운 기능을 추가하거나 수정할 때, 기존에 작성된 코드를 먼저 분석해서 영향도를 파악합니다. 
	16. 기능단위로 css, javascript, html 파일을 작성합니다.
	- 예를들어 파일별 역할 분리에 따라 core.css (기본 구조 정의), 기본 레이아웃 구조 (lite-editor, toolbar, content 등) 기본 컨테이너 스타일, 에디터 영역 기본 서식 (h1-h6, p, blockquote 등)을 합니다.
	- plugins.css (확장 기능 정의)는 플러그인별 특화 스타일 (드롭다운, 색상 선택기 등), 확장 기능 UI 컴포넌트, 상호작용 요소 (hover, active 상태 등)를 합니다.
	17. 각 아이콘은 아이콘의 역할에 따라 .js 파일들을 분리하고 중복되는 소스들은 공통 컴포넌트로 작성한 뒤 제거합니다. 
	18. 각 기능들은 서로 영향을 받지 않도록 작성합니다. 특정 기능을 추가할 경우 다른 소스에 영향을 주면 안됩니다.