@teriusu/rich-editor 0.4.1 → 0.5.0

package/README.md

@@ -1,25 +1,25 @@
-# @teriusu/rich-editor
+# @hancomac/rich-editor
 
 TipTap v3 기반 리치 텍스트 에디터. Svelte 5 컴포넌트 라이브러리.
 
 ## 설치
 
 ```bash
-npm install @teriusu/rich-editor
+npm install @hancomac/rich-editor
 ```
 
 Tailwind CSS v4 사용 시 `@source` 추가:
 ```css
-@import "@teriusu/rich-editor/styles";
-@source "../node_modules/@teriusu/rich-editor/dist";
+@import "@hancomac/rich-editor/styles";
+@source "../node_modules/@hancomac/rich-editor/dist";
 ```
 
 ## 기본 사용법
 
 ```svelte
 <script>
-  import { TipTapEditor } from '@teriusu/rich-editor';
-  import '@teriusu/rich-editor/styles';
+  import { TipTapEditor } from '@hancomac/rich-editor';
+  import '@hancomac/rich-editor/styles';
 
   let html = $state('');
 </script>
@@ -121,7 +121,7 @@ TipTap v2 커스텀 태그를 자동 변환합니다. 에디터 로드 시 `tran
 게시물 조회 페이지(읽기 전용)에서도 적용:
 
 ```js
-import { transformLegacyHtml } from '@teriusu/rich-editor';
+import { transformLegacyHtml } from '@hancomac/rich-editor';
 
 const html = transformLegacyHtml(post.content);
 ```
@@ -132,7 +132,7 @@ const html = transformLegacyHtml(post.content);
 
 ```svelte
 <script>
-  import { TipTapEditor } from '@teriusu/rich-editor';
+  import { TipTapEditor } from '@hancomac/rich-editor';
   import { Node } from '@tiptap/core';
 
   const MyExtension = Node.create({ /* ... */ });

package/dist/components/BubbleToolbar.svelte

@@ -22,8 +22,11 @@
     Code,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
+  import type { ToolbarFeature } from "../types";
 
-  let { editor, minimal = false }: { editor: Editor; minimal?: boolean } = $props();
+  let { editor, features }: { editor: Editor; features: Set<ToolbarFeature> } = $props();
+
+  const has = (f: ToolbarFeature) => features.has(f);
 
   let showHeadings = $state(false);
   let menuEl: HTMLDivElement | undefined = $state();
@@ -81,7 +84,7 @@
 
 <div bind:this={menuEl} class="bubble-toolbar-container" style="visibility: hidden">
   <div class="flex items-center gap-0.5 px-1.5 py-1 bg-foreground rounded-lg shadow-xl">
-    {#if !minimal}
+    {#if has('h1') || has('h2') || has('h3')}
       <!-- Block type selector -->
       <div class="relative">
         <button
@@ -113,6 +116,7 @@
               <Type size={12} /> 본문
             </button>
             {#each [1, 2, 3] as level}
+              {#if has(level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3')}
               {@const Icon = level === 1 ? Heading1 : level === 2 ? Heading2 : Heading3}
               <button
                 type="button"
@@ -133,6 +137,7 @@
               >
                 <Icon size={12} /> 제목 {level}
               </button>
+              {/if}
             {/each}
           </div>
         {/if}
@@ -142,6 +147,7 @@
     {/if}
 
     <!-- Format buttons -->
+    {#if has('bold')}
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleBold().run()}
@@ -156,6 +162,8 @@
     >
       <Bold size={iconSize} />
     </button>
+    {/if}
+    {#if has('italic')}
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleItalic().run()}
@@ -170,7 +178,8 @@
     >
       <Italic size={iconSize} />
     </button>
-    {#if !minimal}
+    {/if}
+    {#if has('underline')}
       <button
         type="button"
         onclick={() => editor.chain().focus().toggleUnderline().run()}
@@ -186,6 +195,7 @@
         <UnderlineIcon size={iconSize} />
       </button>
     {/if}
+    {#if has('strike')}
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleStrike().run()}
@@ -200,7 +210,8 @@
     >
       <Strikethrough size={iconSize} />
     </button>
-    {#if !minimal}
+    {/if}
+    {#if has('highlight')}
       <button
         type="button"
         onclick={() => editor.chain().focus().toggleHighlight().run()}
@@ -216,6 +227,7 @@
         <Highlighter size={iconSize} />
       </button>
     {/if}
+    {#if has('code')}
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleCode().run()}
@@ -230,7 +242,9 @@
     >
       <Code size={iconSize} />
     </button>
+    {/if}
 
+    {#if has('link')}
     <div class="w-px h-5 bg-white/20 mx-0.5"></div>
 
     <button
@@ -247,11 +261,13 @@
     >
       <LinkIcon size={iconSize} />
     </button>
+    {/if}
 
-    {#if !minimal}
+    {#if has('align-left') || has('align-center') || has('align-right')}
       <div class="w-px h-5 bg-white/20 mx-0.5"></div>
 
       <!-- Alignment -->
+      {#if has('align-left')}
       <button
         type="button"
         onclick={() => editor.chain().focus().setTextAlign("left").run()}
@@ -266,6 +282,8 @@
       >
         <AlignLeft size={iconSize} />
       </button>
+      {/if}
+      {#if has('align-center')}
       <button
         type="button"
         onclick={() => editor.chain().focus().setTextAlign("center").run()}
@@ -280,6 +298,8 @@
       >
         <AlignCenter size={iconSize} />
       </button>
+      {/if}
+      {#if has('align-right')}
       <button
         type="button"
         onclick={() => editor.chain().focus().setTextAlign("right").run()}
@@ -294,6 +314,7 @@
       >
         <AlignRight size={iconSize} />
       </button>
+      {/if}
     {/if}
   </div>
 </div>

package/dist/components/BubbleToolbar.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Editor } from "@tiptap/core";
+import type { ToolbarFeature } from "../types";
 type $$ComponentProps = {
     editor: Editor;
-    minimal?: boolean;
+    features: Set<ToolbarFeature>;
 };
 declare const BubbleToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type BubbleToolbar = ReturnType<typeof BubbleToolbar>;

package/dist/components/BubbleToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAsB1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAqNhE,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAqB3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AA0O5E,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/FixedToolbar.svelte

@@ -43,19 +43,24 @@
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import InputModal from "./InputModal.svelte";
+  import type { ToolbarFeature } from "../types";
 
   let {
     editor,
+    features,
     onPdfClick,
     onFileClick,
     onVideoClick,
   }: {
     editor: Editor;
+    features: Set<ToolbarFeature>;
     onPdfClick: () => void;
     onFileClick?: () => void;
     onVideoClick?: () => void;
   } = $props();
 
+  const has = (f: ToolbarFeature) => features.has(f);
+
   const iconSize = 16;
 
   let codeMenuOpen = $state(false);
@@ -119,6 +124,7 @@
   style="top: var(--header-height, 74px)"
 >
   <!-- Format -->
+  {#if has('bold')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleBold().run()}
@@ -133,6 +139,8 @@
   >
     <Bold size={iconSize} />
   </button>
+  {/if}
+  {#if has('italic')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleItalic().run()}
@@ -147,6 +155,8 @@
   >
     <Italic size={iconSize} />
   </button>
+  {/if}
+  {#if has('underline')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleUnderline().run()}
@@ -161,6 +171,8 @@
   >
     <UnderlineIcon size={iconSize} />
   </button>
+  {/if}
+  {#if has('strike')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleStrike().run()}
@@ -175,6 +187,8 @@
   >
     <Strikethrough size={iconSize} />
   </button>
+  {/if}
+  {#if has('highlight')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleHighlight().run()}
@@ -189,6 +203,8 @@
   >
     <Highlighter size={iconSize} />
   </button>
+  {/if}
+  {#if has('superscript')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleSuperscript().run()}
@@ -203,6 +219,8 @@
   >
     <Superscript size={iconSize} />
   </button>
+  {/if}
+  {#if has('subscript')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleSubscript().run()}
@@ -217,10 +235,14 @@
   >
     <Subscript size={iconSize} />
   </button>
+  {/if}
 
+  {#if has('align-left') || has('align-center') || has('align-right')}
   <div class="w-px h-6 bg-border mx-0.5"></div>
+  {/if}
 
   <!-- Alignment -->
+  {#if has('align-left')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setTextAlign("left").run()}
@@ -235,6 +257,8 @@
   >
     <AlignLeft size={iconSize} />
   </button>
+  {/if}
+  {#if has('align-center')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setTextAlign("center").run()}
@@ -249,6 +273,8 @@
   >
     <AlignCenter size={iconSize} />
   </button>
+  {/if}
+  {#if has('align-right')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setTextAlign("right").run()}
@@ -263,10 +289,14 @@
   >
     <AlignRight size={iconSize} />
   </button>
+  {/if}
 
+  {#if has('h1') || has('h2') || has('h3')}
   <div class="w-px h-6 bg-border mx-0.5"></div>
+  {/if}
 
   <!-- Headings -->
+  {#if has('h1')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
@@ -281,6 +311,8 @@
   >
     <Heading1 size={iconSize} />
   </button>
+  {/if}
+  {#if has('h2')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
@@ -295,6 +327,8 @@
   >
     <Heading2 size={iconSize} />
   </button>
+  {/if}
+  {#if has('h3')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
@@ -309,10 +343,14 @@
   >
     <Heading3 size={iconSize} />
   </button>
+  {/if}
 
+  {#if has('bullet-list') || has('ordered-list') || has('checklist') || has('blockquote') || has('horizontal-rule') || has('toggle')}
   <div class="w-px h-6 bg-border mx-0.5"></div>
+  {/if}
 
-  <!-- Lists -->
+  <!-- Lists & Blocks -->
+  {#if has('bullet-list')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleBulletList().run()}
@@ -327,6 +365,8 @@
   >
     <List size={iconSize} />
   </button>
+  {/if}
+  {#if has('ordered-list')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleOrderedList().run()}
@@ -341,6 +381,8 @@
   >
     <ListOrdered size={iconSize} />
   </button>
+  {/if}
+  {#if has('checklist')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleTaskList().run()}
@@ -355,6 +397,8 @@
   >
     <CheckSquare size={iconSize} />
   </button>
+  {/if}
+  {#if has('blockquote')}
   <button
     type="button"
     onclick={() => editor.chain().focus().toggleBlockquote().run()}
@@ -369,6 +413,8 @@
   >
     <Quote size={iconSize} />
   </button>
+  {/if}
+  {#if has('horizontal-rule')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setHorizontalRule().run()}
@@ -378,6 +424,8 @@
   >
     <Minus size={iconSize} />
   </button>
+  {/if}
+  {#if has('toggle')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setDetails().run()}
@@ -392,10 +440,14 @@
   >
     <ChevronRight size={iconSize} />
   </button>
+  {/if}
 
+  {#if has('link') || has('image') || has('pdf') || has('youtube') || has('video') || has('file')}
   <div class="w-px h-6 bg-border mx-0.5"></div>
+  {/if}
 
   <!-- Media -->
+  {#if has('link')}
   <button
     type="button"
     onclick={addLink}
@@ -410,6 +462,8 @@
   >
     <LinkIcon size={iconSize} />
   </button>
+  {/if}
+  {#if has('image')}
   <button
     type="button"
     onclick={addImage}
@@ -419,6 +473,8 @@
   >
     <ImageIcon size={iconSize} />
   </button>
+  {/if}
+  {#if has('pdf')}
   <button
     type="button"
     onclick={onPdfClick}
@@ -428,6 +484,8 @@
   >
     <FileText size={iconSize} />
   </button>
+  {/if}
+  {#if has('youtube')}
   <button
     type="button"
     onclick={() => {
@@ -440,7 +498,8 @@
   >
     <Video size={iconSize} />
   </button>
-  {#if onVideoClick}
+  {/if}
+  {#if has('video') && onVideoClick}
     <button
       type="button"
       onclick={onVideoClick}
@@ -451,7 +510,7 @@
       <Film size={iconSize} />
     </button>
   {/if}
-  {#if onFileClick}
+  {#if has('file') && onFileClick}
     <button
       type="button"
       onclick={onFileClick}
@@ -464,6 +523,7 @@
   {/if}
 
   <!-- Columns -->
+  {#if has('columns-2')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setColumns(2).run()}
@@ -478,6 +538,8 @@
   >
     <Columns2 size={iconSize} />
   </button>
+  {/if}
+  {#if has('columns-3')}
   <button
     type="button"
     onclick={() => editor.chain().focus().setColumns(3).run()}
@@ -487,8 +549,10 @@
   >
     <Columns3 size={iconSize} />
   </button>
+  {/if}
 
   <!-- Table menu -->
+  {#if has('table')}
   <div bind:this={tableMenuEl} class="relative">
     <button
       type="button"
@@ -731,8 +795,10 @@
       </div>
     {/if}
   </div>
+  {/if}
 
   <!-- Code block menu -->
+  {#if has('code-block')}
   <div bind:this={codeMenuEl} class="relative">
     <button
       type="button"
@@ -788,10 +854,14 @@
       </div>
     {/if}
   </div>
+  {/if}
 
+  {#if has('undo') || has('redo')}
   <div class="w-px h-6 bg-border mx-0.5"></div>
+  {/if}
 
   <!-- Undo / Redo -->
+  {#if has('undo')}
   <button
     type="button"
     onclick={() => editor.chain().focus().undo().run()}
@@ -805,6 +875,8 @@
   >
     <Undo size={iconSize} />
   </button>
+  {/if}
+  {#if has('redo')}
   <button
     type="button"
     onclick={() => editor.chain().focus().redo().run()}
@@ -818,6 +890,7 @@
   >
     <Redo size={iconSize} />
   </button>
+  {/if}
 
   <!-- Modals -->
   {#if modalState?.type === "link"}

package/dist/components/FixedToolbar.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Editor } from "@tiptap/core";
+import type { ToolbarFeature } from "../types";
 type $$ComponentProps = {
     editor: Editor;
+    features: Set<ToolbarFeature>;
     onPdfClick: () => void;
     onFileClick?: () => void;
     onVideoClick?: () => void;

package/dist/components/FixedToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA6C1C,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiiBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA4C3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAymBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}