Skip to content

Releases: HancomAC/rich-editor

v0.6.0

20 Apr 23:51

Choose a tag to compare

v0.4.1

05 Apr 02:18

Choose a tag to compare

Full Changelog: v0.4.0...v0.4.1

v0.4.0 — 하이브리드 파일 저장, 컬럼 확장, 레거시 호환

04 Apr 08:35

Choose a tag to compare

주요 변경사항

하이브리드 파일 저장 (FileAttachment, PdfBlock)

파일/PDF를 ID 기반 또는 URL 직접 방식으로 저장할 수 있습니다.

  • data-file-id / data-pdf-id — ID 기반 (권한 제어, URL 변경 대응)
  • data-file-src / data-pdf-src — URL 직접 (단순, 공개 파일용)
  • 둘 다 동시 저장 가능 (하이브리드)

컬럼 레이아웃 (Columns)

2단/3단 컬럼 레이아웃을 지원합니다. 툴바와 / 슬래시 메뉴에서 삽입 가능.

레거시 HTML 호환 (transformLegacyHtml)

TipTap v2 커스텀 태그를 현재 형식으로 자동 변환합니다.

레거시 태그 변환 결과
<tiptap-file id="X"> <div data-file-id="X">
<tiptap-midibus id="X"> iframe (play.mbus.tv)
<tiptap-collapsable title="X"> <details><summary>
<lite-youtube videoid="X"> YouTube iframe
<embed type="application/pdf"> <div data-pdf-src>
<div class="tiptap-columns"> <div data-type="columns">
<tiptap-upload-skeleton> 제거

Indent px 파싱

margin-left: 40px 같은 px 단위 들여쓰기를 파싱합니다. 출력은 em 유지.


호스트 앱 사용법

기본 (URL 직접 방식)

<script>
  import { TipTapEditor } from '@teriusu/hancomac-editor';
  import '@teriusu/hancomac-editor/styles';
</script>

<TipTapEditor
  content={html}
  onChange={(h) => html = h}
  onUploadFile={async (file) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: form });
    const { url } = await res.json();
    return url;
  }}
/>

ID 기반 파일 저장 (하이브리드)

<TipTapEditor
  content={html}
  onChange={(h) => html = h}
  onUploadFile={async (file) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: form });
    return await res.json(); // { id, url, name, size }
  }}
  onResolveFile={async (fileId) => {
    const res = await fetch(`/api/files/${fileId}`);
    return await res.json(); // { src, name, size }
  }}
/>

레거시 HTML 변환 (읽기 전용 페이지)

import { transformLegacyHtml } from '@teriusu/hancomac-editor';

// 게시물 렌더링 전 변환
const html = transformLegacyHtml(post.content);

커스텀 확장 주입

<TipTapEditor
  content={html}
  onChange={handleChange}
  extensions={[MyCustomExtension]}
  editable={false}
/>

주요 Export

// 컴포넌트
import { TipTapEditor } from '@teriusu/hancomac-editor';

// 확장
import { PdfBlock, FileAttachment, VideoBlock, Columns, Column, Indent, FixedDetails } from '@teriusu/hancomac-editor';

// 유틸
import { transformLegacyHtml, sanitizeHtml, stripHtmlToExcerpt } from '@teriusu/hancomac-editor';

// 타입
import type { FileResolver, FileResolveResult, UploadHandler } from '@teriusu/hancomac-editor';

v0.2.4

02 Apr 22:16

Choose a tag to compare