Releases: HancomAC/rich-editor
Releases · HancomAC/rich-editor
v0.6.0
Full Changelog: https://github.com/HancomAC/rich-editor/commits/v0.6.0
v0.4.1
Full Changelog: v0.4.0...v0.4.1
v0.4.0 — 하이브리드 파일 저장, 컬럼 확장, 레거시 호환
주요 변경사항
하이브리드 파일 저장 (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
Full Changelog: https://github.com/teriusu-ko/hancomac-editor/commits/v0.2.4