YogaEditor

// 바깥 -> 안쪽 고정 순서: 링크(a) -> 색상(span style) -> 위/아래첨자 ->
// bold/italic/strikethrough/underline. 겹치는 스타일이 몇 개든 항상 이 순서로만
// 중첩되므로 "어느 태그를 바깥에 둘지"가 애매해지지 않는다.
//
// link가 색상보다 안쪽이면(=색상 span이 <a> 밖) 브라우저 기본 링크
// color를 이겨버려 사용자가 지정한 글자색이 무시된다. link를 가장 바깥에 둬야
// 안쪽 span의 인라인 color가 항상 이긴다(자식의 직접 지정값은 조상의 상속값을
// 항상 이기므로).
function renderRun(run, key) {
  let node = run.text.length === 0 ? ' ' : run.text;

  for (let i = BOOLEAN_STYLE_ORDER.length - 1; i >= 0; i -= 1) {
    const styleKey = BOOLEAN_STYLE_ORDER[i];
    if (run.styles[styleKey]) {
      const Tag = STYLE_TAGS[styleKey];
      node = <Tag>{node}</Tag>;
    }
  }

  if (run.styles.superscript) node = <sup>{node}</sup>;
  else if (run.styles.subscript) node = <sub>{node}</sub>;

  // ...
}