Lexxy: Action Text를 위한 차세대 리치 텍스트 에디터

Lexxy – The next generation rich text editor for Rails

작성자
HackerNews
발행일
2025년 10월 14일

핵심 요약

  • 1 Lexxy는 Basecamp가 Trix의 한계를 극복하고자 개발한 Action Text용 리치 텍스트 에디터로, Meta의 Lexical 프레임워크를 기반으로 합니다.
  • 2 이 에디터는 진정한 <p> 태그 사용, 마크다운 지원, 실시간 코드 하이라이팅, 스마트 링크, 풍부한 첨부 파일 미리보기 등 현대적인 편집 기능을 제공합니다.
  • 3 현재 베타 버전으로 출시되었으며, 향후 Action Text 내 에디터 교체 가능성 및 테이블 지원 등 다양한 기능 확장을 계획하고 있어 Rails 개발자에게 큰 기대를 모으고 있습니다.

도입

Lexxy는 Basecamp에서 개발한 새로운 리치 텍스트 에디터로, Ruby on Rails의 Action Text 기능을 위해 특별히 설계되었습니다. 이 에디터는 Meta에서 개발되어 WhatsApp 및 Facebook 앱에서 사용되는 빠르고 견고하며 유연한 텍스트 에디터 프레임워크인 Lexical 위에 구축되었습니다. Lexxy는 사용자가 풍부한 텍스트 콘텐츠를 손쉽게 작성하고 서식을 지정할 수 있도록 돕습니다. 특히 Action Text 및 Active Storage와 원활하게 연동되도록 설계되어, 사용자는 에디터 내에서 이미지, 비디오 및 기타 파일을 직접 추가할 수 있습니다. 이는 기존 Trix 에디터가 Basecamp의 기대치와 요구 기능을 충족하지 못했기 때문에 개발되었으며, 팀에게 강력한 기반을 제공합니다.

Lexxy는 기존 Trix 에디터의 한계를 극복하고 현대적인 웹 환경에 맞는 강력한 기능을 제공하기 위해 탄생했습니다. Trix와 Lexxy의 주요 기능 비교는 다음과 같습니다.

Trix vs Lexxy 주요 기능 비교

  • 단락 마크업: Trix는 <div><br> 태그를 사용하는 반면, Lexxy는 실제 <p> 태그를 사용하여 더 깔끔하고 스타일링하기 쉬운 HTML을 생성합니다.

  • 마크다운 지원: Trix는 마크다운을 지원하지 않지만, Lexxy는 단축키 및 자동 서식 지정을 포함한 완전한 마크다운 지원을 제공합니다.

  • 코드 구문 강조: Trix의 제한적인 기능과 달리, Lexxy는 언어 선택과 함께 실시간 코드 하이라이팅을 지원합니다.

  • 선택된 텍스트에 링크 붙여넣기: Trix는 이 기능을 제공하지 않지만, Lexxy는 선택된 텍스트에 링크를 붙여넣으면 자동으로 링크를 생성합니다.

  • 멘션/명령어 프롬프트 메뉴: Trix에는 없는 기능으로, Lexxy는 @ 또는 / 입력 시 서버에서 로드하거나 인라인으로 필터링 가능한 완전히 사용자 정의 가능한 프롬프트 메뉴를 제공합니다.

  • 첨부 파일 미리보기 (PDF, 비디오): Trix의 기본적인 미리보기와 달리, Lexxy는 에디터 내에서 첨부 파일의 풍부한 미리보기를 지원합니다.

Lexxy의 주요 기능

  • 깔끔한 HTML 출력: 단락이 적절한 <p> 태그로 구성되어 텍스트 스타일링이 용이합니다.

  • 마크다운 단축키: 마크다운을 입력하거나 붙여넣으면 자동으로 서식 있는 텍스트로 변환됩니다.

  • 실시간 코드 하이라이팅: 코드를 작성할 때 즉시 하이라이팅되며, 언어를 선택할 수 있습니다.

  • 스마트 링크: 링크를 붙여넣으면 즉시 링크로 변환되며, 텍스트를 선택한 후 링크를 붙여넣으면 해당 텍스트가 링크가 됩니다.

  • 풍부한 첨부 파일 미리보기: PDF 및 비디오를 편집 중에 직접 미리 볼 수 있습니다.

  • 멘션 및 명령어 프롬프트: @ 또는 /를 입력하면 멘션, 해시태그 또는 명령어 메뉴가 나타나며, 서버에서 항목을 로드하거나 브라우저에서 필터링하거나 사용자 정의 항목을 추가할 수 있습니다.

설치 방법

Lexxy는 Gemfile에 gem 'lexxy', '~> 0.1.4.beta'를 추가하고 bundle install을 실행한 후, importmap.rbpin "lexxy", to: "lexxy.js"pin "@rails/activestorage", to: "activestorage.esm.js"를 추가하여 사용할 수 있습니다. JavaScript 진입점에는 import "lexxy"를 추가해야 합니다. NPM 패키지를 사용하는 경우 yarn add @37signals/lexxy@rails/activestorage를 설치하고 JavaScript 진입점에서 @37signals/lexxy를 임포트하면 됩니다.

Lexxy의 향후 계획

Lexxy는 현재 초기 베타 단계에 있지만 빠르게 발전하고 있습니다. 로드맵에는 Action Text 내에서 Lexxy, Trix 또는 tiptap과 같은 타사 에디터를 선택할 수 있는 설정 가능한 에디터, 테이블 지원, 텍스트 색상 하이라이팅, Trix의 HTML과 완전한 호환성을 위한 이미지 갤러리 등의 더 많은 기능, 그리고 비 Rails 환경을 위한 독립형 JS 패키지 등이 포함됩니다. 또한, 더 쉬운 설치와 간소화된 설정을 통해 향상된 구성 및 배포를 목표로 하며, Basecamp에서 이미 사용 중이므로 검증된 안정성을 기대할 수 있습니다.

결론

Lexxy는 Rails의 리치 텍스트 편집 기능에 있어 큰 도약을 의미합니다. 현대적인 편집 기능, 개선된 HTML 출력, 마크다운 지원, 그리고 Action Text와의 스마트한 통합을 제공합니다. 뛰어난 WYSIWYG 편집 기능이 필요한 Rails 앱을 구축하는 개발자라면 Lexxy를 시도해 볼 가치가 충분합니다. 현재 베타 버전이므로 지속적인 업데이트에 주의를 기울여야 하지만, Basecamp의 강력한 지원과 Lexical의 견고한 기반을 바탕으로 Rails 생태계에서 중요한 역할을 할 것으로 기대됩니다. 이는 개발자들에게 더욱 유연하고 강력한 콘텐츠 작성 환경을 제공할 것입니다.

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!