인용구 강조

커스터마이징 테마 컴포넌트
50

컴포넌트를 현대화하고 리치 텍스트 에디터 지원을 추가한 업데이트입니다! :rocket:
다듬어야 할 부분이나 예상치 못한 엣지 케이스가 있을 수 있지만, 괜찮은 시작이라고 생각합니다. :folded_hands:

요약

리치 텍스트 에디터

리치 텍스트 에디터와 기대할 수 있는 기능에 대해 이야기해 보겠습니다!

콜아웃 생성:

콜아웃을 삽입하는 네 가지 방법이 있습니다:

  • 키보드 단축키
  • 도구 모음
  • 입력 규칙
    • /callout<:type>
    • !!<type>
  • 붙여넣기 지원
    비디오

콜아웃 편집

콜아웃을 편집하는 컨트롤은 콜아웃을 먼저 선택한 후에만 나타납니다.

  • 유형 선택기
    아이콘을 클릭하면 플로팅 메뉴가 나타납니다.
  • 사용자 정의 제목
    인라인 포맷팅 및 이모지 지원
  • 접기(Folding)
    콜아웃을 접을 수 있도록 설정합니다. 옵션 메뉴에서 접근할 수 있습니다.
    비디오

콜아웃 정리

  • 이동 컨트롤

    • 데스크톱
      콜아웃을 드래그 앤 드롭으로 이동할 수 있는 핸들이 있습니다.
    • 터치 디바이스
      콜아웃을 위/아래로 이동하거나 인접한 콜아웃 안에 중첩시킬 수 있습니다. 빈도수가 낮으므로 뷰가 부풀어 오르는 것을 방지하기 위해 기본적으로 비활성화되어 있습니다. 옵션에서 토글할 수 있습니다.
    비디오

  • 키보드 내비게이션
    중첩된 콜아웃 안팎으로 이동하기 쉽게 도와줍니다.
    이 버전에서 동작의 일관성을 위해 향후 조정이 필요할 수 있습니다.

    • ← 제목의 시작 부분에 있을 때, 콜아웃 선택기가 자동으로 열립니다.
    • ↑ ↓ 콜아웃 본문 내에서 단락이 없으면 단락을 생성합니다. 빈 내용으로 나가면 단락이 제거됩니다.
    • Enter 제목 안에서 Enter를 누르면 커서가 본문으로 이동합니다 (필요하면 단락을 생성).
    비디오

  • 클릭하여 삽입

    • 단락이 없는 영역에서는 클릭하여 단락을 열 수 있습니다.
    • 원하시면 콜아웃 안쪽이나 바깥쪽에서 단락을 열기 위해 버튼을 사용할 수도 있습니다.
      비디오

나중에 다음과 같은 사항들을 살펴볼 계획입니다:

  • 입력 규칙 자동완성
  • 특히 다크 모드에서 일관성과 가시성을 보장하기 위해 현대적인 CSS를 사용하여 색상 개선.

  • 모든 설정을 제거하고 단순성에 초점을 맞추되, 고급 커스터마이징은 CSS로만 가능하도록 하기를 원합니다. 하지만 이제 그 시기는 늦었습니다 :rofl:

피드백을 주신 Moin에게 특별한 감사의 말씀을 드립니다.

이것으로 끝입니다. 여러분의 생각을 알려주세요. 피드백을 환영합니다!

9개의 좋아요