블록 에디터, 직접 만들어보니

노션처럼 블록을 조립해 글을 쓰는 에디터를 Blazor로 구현했습니다.

• • •

모델 설계

핵심은 단순함입니다. 위젯도 자식 리스트가 있는 블록일 뿐이라 렌더러는 재귀 하나로 끝납니다.

public class ContentBlock
{
    public BlockType Type { get; set; }
    public string Content { get; set; } = string.Empty;
    public int MdCols { get; set; } = 12;
    public List<ContentBlock> Children { get; set; } = new();
}

Children이 비어있으면 단순 블록, 값이 있으면 위젯으로 동작합니다.

인라인 스타일은 인덱스로

텍스트 중간의 부분 색상은 HTML 대신 TextSpan의 인덱스로 표현합니다.

한글도 한 글자가 인덱스 1입니다. 공백을 빼먹으면 한 칸씩 밀립니다.

왼쪽 블록

오른쪽은 Note 블록