feat(summernote): Summernote 어댑터 추가 (1.1.0) - #37
Merged
Conversation
Summernote pulls ~118k npm downloads a week and has no ruler; it is also
jQuery-based direct-DOM, which makes it the cheapest remaining adapter
because the Froala implementation transfers almost whole.
Researched the host APIs from Summernote's source rather than guessing,
because the undo guarantee depended on it: editor.afterCommand() is the
method that calls history.recordUndo(), so routing commits through it
gives us one undo step per drag gesture, the same contract every other
adapter honors. Blocks come from editor.getLastRange().nodes(dom.isPara)
with a native-selection fallback for before Summernote has a range.
Because it is direct-DOM, whole-table indent and column-width markers
come along — Summernote is the first adapter besides Froala to have
them, so that capability is no longer Froala-only.
Options sit under the "ruler" key (enabled/visible/unit/vertical/
verticalGutter/guides/guideSnap/language), matching the namespaced style
of the Tiptap and CKEditor 5 adapters rather than Froala's flat prefixes.
Docs updated everywhere the adapter set is stated: both root READMEs
(packages table, quick start, StackBlitz list), package READMEs en/ko,
ARCHITECTURE (file map, plus §6 now points at this adapter as the worked
example of the 'adding an editor' walkthrough), the landing page (demo
tab with lazy CDN loading, integration section, FAQ), and CHANGELOG.
Sentences that counted adapters ('all three', 'the four packages') were
either de-counted or corrected.
Verified in a real browser against real Summernote, not just jsdom:
ruler mounts into its toolbar, dragging moves a paragraph 60px -> 70px
and exports plain inline CSS, undo restores in exactly one step, column
markers appear with the caret in a table cell, and the vertical-ruler
gutter holds the content still (0px shift) across a toggle. 110 unit
tests green; one of the new tests caught a real bug — the gutter-only
path skipped refresh(), so the horizontal ruler kept a stale offset.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summernote는 주간 npm 다운로드 약 118,000인데 줄자가 없습니다. 그리고 jQuery 기반 직접-DOM 에디터라 Froala 구현이 거의 그대로 옮겨가서, 남은 후보 중 가장 저렴합니다.
호스트 API는 소스에서 확인했습니다
undo 보장이 여기 달려 있어서 추측하지 않았습니다.
editor.afterCommand()가history.recordUndo()를 호출하는 메서드라, 커밋을 이 경로로 보내면 드래그 제스처당 undo 1스텝이라는 다른 어댑터와 동일한 계약이 성립합니다. 블록은editor.getLastRange().nodes(dom.isPara)로 얻고, Summernote에 아직 range가 없을 때를 위해 네이티브 선택 폴백을 둡니다.테이블 지원이 따라옵니다
직접-DOM이라 테이블 통째 밀기와 컬럼 폭 마커가 그대로 동작합니다. Froala 외에 이 기능을 가진 첫 어댑터라, "테이블은 Froala 전용"이 더 이상 아닙니다.
옵션은
ruler키 아래에 둡니다(enabled/visible/unit/vertical/verticalGutter/guides/guideSnap/language) — Froala의 평면 접두사가 아니라 Tiptap·CKEditor 5의 네임스페이스 방식을 따랐습니다.문서 — 어댑터 집합을 언급하는 모든 곳
루트 README 양어(패키지 표·빠른 시작·StackBlitz 목록), 패키지 README en/ko, ARCHITECTURE(파일 맵 + §6 "새 어댑터 추가" 설명이 이제 이 어댑터를 실제 예시로 지목), 랜딩(데모 탭·연동 섹션·FAQ), CHANGELOG,
examples/summernote.어댑터 개수를 세던 문장들("all three", "네 패키지")도 개수 없는 표현으로 바꾸거나 바로잡았습니다.
검증 — jsdom이 아니라 실제 Summernote로
<p style="margin-left: 70px;">)신규 테스트가 실제 버그를 잡았습니다 — 거터만 켠 경로에서
refresh()를 빠뜨려 가로 줄자가 낡은 오프셋을 유지하고 있었습니다.