@buildingbite/blocks 0.1.0

package/README.md

@@ -0,0 +1,110 @@
+# @buildingbite/blocks
+
+블로그용 블록 기반 리치 텍스트 에디터
+
+## 설치
+
+```bash
+npm install @buildingbite/blocks
+```
+
+## 사용법
+
+### 1. EditorServices 구현
+
+`EditorServices` 인터페이스를 구현하여 이미지 업로드, OG 데이터 조회 등을 처리합니다.
+
+```tsx
+import { EditorServices } from '@buildingbite/blocks';
+
+export const editorServices: EditorServices = {
+  // 이미지 업로드
+  uploadImage: async (file: File, category: string): Promise<string> => {
+    // Firebase Storage 등에 업로드 후 URL 반환
+    const url = await uploadToStorage(file, category);
+    return url;
+  },
+
+  // OG 데이터 조회
+  fetchOGData: async (url: string) => {
+    const response = await fetch(`/api/og?url=${encodeURIComponent(url)}`);
+    return response.json();
+  },
+
+  // 캐릭터 라이브러리 (선택적)
+  getCharacters: async () => {
+    return await fetchCharactersFromDB();
+  },
+
+  // 이미지 컴포넌트 (선택적, Next.js의 경우)
+  ImageComponent: NextImage,
+};
+```
+
+### 2. EditorProvider로 감싸기
+
+```tsx
+import { EditorProvider, BlockEditor } from '@buildingbite/blocks';
+import { editorServices } from '@/lib/editorServices';
+
+function MyEditor() {
+  const [blocks, setBlocks] = useState([]);
+
+  return (
+    <EditorProvider services={editorServices}>
+      <BlockEditor
+        initialBlocks={blocks}
+        onChange={setBlocks}
+        onCharCountChange={(count) => console.log(`글자 수: ${count}`)}
+      />
+    </EditorProvider>
+  );
+}
+```
+
+## 블록 타입
+
+- `paragraph` - 일반 텍스트
+- `heading` - 제목 (H1, H2, H3)
+- `image` - 단일 이미지
+- `image-gallery` - 이미지 갤러리
+- `link-card` - OG 미리보기 카드
+- `link-embed` - YouTube/Twitter 임베드
+- `dialogue` - 대사 (채팅/희극 스타일)
+- `divider` - 구분선
+- `quote` - 인용문
+- `list` - 목록
+
+## 헬퍼 함수
+
+```tsx
+import {
+  createEmptyParagraphBlock,
+  generateBlockId,
+  textNodesToPlainText,
+  generatePreviewFromBlocks,
+  countBlocksCharacters,
+} from '@buildingbite/blocks';
+
+// 빈 문단 블록 생성
+const newBlock = createEmptyParagraphBlock();
+
+// 블록 ID 생성
+const id = generateBlockId();
+
+// 블록에서 미리보기 텍스트 생성
+const preview = generatePreviewFromBlocks(blocks, 150);
+
+// 총 글자 수 계산
+const charCount = countBlocksCharacters(blocks);
+```
+
+## 의존성
+
+- React 18+
+- @dnd-kit/core (드래그 앤 드롭)
+- lucide-react (아이콘)
+
+## 라이선스
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,191 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+
+type BlockType = 'paragraph' | 'heading' | 'image' | 'image-gallery' | 'link-card' | 'link-embed' | 'dialogue' | 'divider' | 'quote' | 'list';
+interface TextNode {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    link?: string;
+}
+interface BaseBlock {
+    id: string;
+    type: BlockType;
+}
+interface ParagraphBlock extends BaseBlock {
+    type: 'paragraph';
+    content: TextNode[];
+}
+interface HeadingBlock extends BaseBlock {
+    type: 'heading';
+    level: 1 | 2 | 3;
+    content: TextNode[];
+}
+interface ImageData {
+    url: string;
+    alt?: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+}
+interface ImageBlock extends BaseBlock {
+    type: 'image';
+    image: ImageData;
+    alignment: 'left' | 'center' | 'right' | 'full-width';
+}
+interface ImageGalleryBlock extends BaseBlock {
+    type: 'image-gallery';
+    images: ImageData[];
+    layout: 'grid' | 'horizontal-scroll' | 'masonry';
+    columns?: 2 | 3 | 4;
+}
+interface OGData {
+    title?: string;
+    description?: string;
+    image?: string;
+    siteName?: string;
+}
+interface LinkCardBlock extends BaseBlock {
+    type: 'link-card';
+    url: string;
+    ogData?: OGData;
+}
+interface LinkEmbedBlock extends BaseBlock {
+    type: 'link-embed';
+    url: string;
+    embedType: 'youtube' | 'twitter' | 'generic';
+    videoId?: string;
+}
+interface DialogueLine {
+    speaker: string;
+    content: TextNode[];
+    speakerColor?: string;
+    profileImage?: string;
+    alignment?: 'left' | 'right';
+}
+interface DialogueBlock extends BaseBlock {
+    type: 'dialogue';
+    lines: DialogueLine[];
+    style?: 'chat' | 'play';
+}
+interface DividerBlock extends BaseBlock {
+    type: 'divider';
+    variant: 'line' | 'short-line' | 'dots' | 'custom-image';
+    customImage?: string;
+    alignment?: 'left' | 'center' | 'right';
+}
+interface QuoteBlock extends BaseBlock {
+    type: 'quote';
+    content: TextNode[];
+    citation?: string;
+}
+interface ListBlock extends BaseBlock {
+    type: 'list';
+    listType: 'ordered' | 'unordered';
+    content: TextNode[];
+}
+type Block = ParagraphBlock | HeadingBlock | ImageBlock | ImageGalleryBlock | LinkCardBlock | LinkEmbedBlock | DialogueBlock | DividerBlock | QuoteBlock | ListBlock;
+interface BlockContent {
+    version: 2;
+    blocks: Block[];
+}
+interface Character {
+    id: string;
+    name: string;
+    profileImage: string | null;
+    defaultColor: string;
+    description?: string | null;
+}
+declare function createEmptyParagraphBlock(): ParagraphBlock;
+declare function generateBlockId(): string;
+declare function textNodesToPlainText(nodes: TextNode[]): string;
+declare function generatePreviewFromBlocks(blocks: Block[], maxLength?: number): string;
+declare function countBlocksCharacters(blocks: Block[]): number;
+
+interface BlockEditorProps {
+    initialBlocks?: Block[];
+    onChange: (blocks: Block[]) => void;
+    onCharCountChange?: (count: number) => void;
+}
+declare function BlockEditor({ initialBlocks, onChange, onCharCountChange, }: BlockEditorProps): react_jsx_runtime.JSX.Element;
+
+interface BlockMenuProps {
+    position: {
+        x: number;
+        y: number;
+    };
+    onClose: () => void;
+    onSelect: (type: Block['type']) => void;
+}
+declare function BlockMenu({ position, onClose, onSelect }: BlockMenuProps): react_jsx_runtime.JSX.Element;
+
+interface TextBlockEditorProps {
+    block: ParagraphBlock | HeadingBlock | QuoteBlock | ListBlock | ImageBlock;
+    onUpdate: (updates: Partial<Block>) => void;
+    onMergeWithPrevious?: () => void;
+    onSplitBlock?: (beforeText: TextNode[], afterText: TextNode[]) => void;
+    onPasteBlocks?: (beforeText: TextNode[], pastedLines: string[], afterText: TextNode[]) => void;
+    onDeleteEmptyBlock?: () => void;
+    onFocusPrevious?: () => void;
+    onFocusNext?: () => void;
+    isOnlyBlock?: boolean;
+}
+declare function TextBlockEditor({ block, onUpdate, onMergeWithPrevious, onSplitBlock, onPasteBlocks, onDeleteEmptyBlock, onFocusPrevious, onFocusNext, isOnlyBlock }: TextBlockEditorProps): react_jsx_runtime.JSX.Element;
+
+interface ImageGalleryEditorProps {
+    block: ImageGalleryBlock;
+    onUpdate: (updates: Partial<ImageGalleryBlock>) => void;
+}
+declare function ImageGalleryEditor({ block, onUpdate }: ImageGalleryEditorProps): react_jsx_runtime.JSX.Element;
+
+interface LinkCardEditorProps {
+    block: LinkCardBlock;
+    onUpdate: (updates: Partial<LinkCardBlock>) => void;
+}
+declare function LinkCardEditor({ block, onUpdate }: LinkCardEditorProps): react_jsx_runtime.JSX.Element;
+
+interface LinkEmbedEditorProps {
+    block: LinkEmbedBlock;
+    onUpdate: (updates: Partial<LinkEmbedBlock>) => void;
+}
+declare function LinkEmbedEditor({ block, onUpdate }: LinkEmbedEditorProps): react_jsx_runtime.JSX.Element;
+
+interface DialogueEditorProps {
+    block: DialogueBlock;
+    onUpdate: (updates: Partial<DialogueBlock>) => void;
+}
+declare function DialogueEditor({ block, onUpdate }: DialogueEditorProps): react_jsx_runtime.JSX.Element;
+
+interface DividerEditorProps {
+    block: DividerBlock;
+    onUpdate: (updates: Partial<DividerBlock>) => void;
+}
+declare function DividerEditor({ block, onUpdate }: DividerEditorProps): react_jsx_runtime.JSX.Element;
+
+interface ImageComponentProps {
+    src: string;
+    alt: string;
+    fill?: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface EditorServices {
+    uploadImage: (file: File, category: string) => Promise<string>;
+    fetchOGData: (url: string) => Promise<OGData>;
+    getCharacters?: () => Promise<Character[]>;
+    ImageComponent?: React.ComponentType<ImageComponentProps>;
+}
+interface EditorProviderProps {
+    services: EditorServices;
+    children: ReactNode;
+}
+declare function EditorProvider({ services, children }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function useEditorServices(): EditorServices;
+declare function useOptionalEditorServices(): EditorServices | null;
+declare function DefaultImage({ src, alt, fill, width, height, className, style, }: ImageComponentProps): react_jsx_runtime.JSX.Element;
+
+export { type Block, type BlockContent, BlockEditor, BlockMenu, type BlockType, type Character, DefaultImage, type DialogueBlock, DialogueEditor, type DialogueLine, type DividerBlock, DividerEditor, EditorProvider, type EditorServices, type HeadingBlock, type ImageBlock, type ImageComponentProps, type ImageData, type ImageGalleryBlock, ImageGalleryEditor, type LinkCardBlock, LinkCardEditor, type LinkEmbedBlock, LinkEmbedEditor, type ListBlock, type OGData, type ParagraphBlock, type QuoteBlock, TextBlockEditor, type TextNode, countBlocksCharacters, createEmptyParagraphBlock, generateBlockId, generatePreviewFromBlocks, textNodesToPlainText, useEditorServices, useOptionalEditorServices };

package/dist/index.d.ts

@@ -0,0 +1,191 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+
+type BlockType = 'paragraph' | 'heading' | 'image' | 'image-gallery' | 'link-card' | 'link-embed' | 'dialogue' | 'divider' | 'quote' | 'list';
+interface TextNode {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    link?: string;
+}
+interface BaseBlock {
+    id: string;
+    type: BlockType;
+}
+interface ParagraphBlock extends BaseBlock {
+    type: 'paragraph';
+    content: TextNode[];
+}
+interface HeadingBlock extends BaseBlock {
+    type: 'heading';
+    level: 1 | 2 | 3;
+    content: TextNode[];
+}
+interface ImageData {
+    url: string;
+    alt?: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+}
+interface ImageBlock extends BaseBlock {
+    type: 'image';
+    image: ImageData;
+    alignment: 'left' | 'center' | 'right' | 'full-width';
+}
+interface ImageGalleryBlock extends BaseBlock {
+    type: 'image-gallery';
+    images: ImageData[];
+    layout: 'grid' | 'horizontal-scroll' | 'masonry';
+    columns?: 2 | 3 | 4;
+}
+interface OGData {
+    title?: string;
+    description?: string;
+    image?: string;
+    siteName?: string;
+}
+interface LinkCardBlock extends BaseBlock {
+    type: 'link-card';
+    url: string;
+    ogData?: OGData;
+}
+interface LinkEmbedBlock extends BaseBlock {
+    type: 'link-embed';
+    url: string;
+    embedType: 'youtube' | 'twitter' | 'generic';
+    videoId?: string;
+}
+interface DialogueLine {
+    speaker: string;
+    content: TextNode[];
+    speakerColor?: string;
+    profileImage?: string;
+    alignment?: 'left' | 'right';
+}
+interface DialogueBlock extends BaseBlock {
+    type: 'dialogue';
+    lines: DialogueLine[];
+    style?: 'chat' | 'play';
+}
+interface DividerBlock extends BaseBlock {
+    type: 'divider';
+    variant: 'line' | 'short-line' | 'dots' | 'custom-image';
+    customImage?: string;
+    alignment?: 'left' | 'center' | 'right';
+}
+interface QuoteBlock extends BaseBlock {
+    type: 'quote';
+    content: TextNode[];
+    citation?: string;
+}
+interface ListBlock extends BaseBlock {
+    type: 'list';
+    listType: 'ordered' | 'unordered';
+    content: TextNode[];
+}
+type Block = ParagraphBlock | HeadingBlock | ImageBlock | ImageGalleryBlock | LinkCardBlock | LinkEmbedBlock | DialogueBlock | DividerBlock | QuoteBlock | ListBlock;
+interface BlockContent {
+    version: 2;
+    blocks: Block[];
+}
+interface Character {
+    id: string;
+    name: string;
+    profileImage: string | null;
+    defaultColor: string;
+    description?: string | null;
+}
+declare function createEmptyParagraphBlock(): ParagraphBlock;
+declare function generateBlockId(): string;
+declare function textNodesToPlainText(nodes: TextNode[]): string;
+declare function generatePreviewFromBlocks(blocks: Block[], maxLength?: number): string;
+declare function countBlocksCharacters(blocks: Block[]): number;
+
+interface BlockEditorProps {
+    initialBlocks?: Block[];
+    onChange: (blocks: Block[]) => void;
+    onCharCountChange?: (count: number) => void;
+}
+declare function BlockEditor({ initialBlocks, onChange, onCharCountChange, }: BlockEditorProps): react_jsx_runtime.JSX.Element;
+
+interface BlockMenuProps {
+    position: {
+        x: number;
+        y: number;
+    };
+    onClose: () => void;
+    onSelect: (type: Block['type']) => void;
+}
+declare function BlockMenu({ position, onClose, onSelect }: BlockMenuProps): react_jsx_runtime.JSX.Element;
+
+interface TextBlockEditorProps {
+    block: ParagraphBlock | HeadingBlock | QuoteBlock | ListBlock | ImageBlock;
+    onUpdate: (updates: Partial<Block>) => void;
+    onMergeWithPrevious?: () => void;
+    onSplitBlock?: (beforeText: TextNode[], afterText: TextNode[]) => void;
+    onPasteBlocks?: (beforeText: TextNode[], pastedLines: string[], afterText: TextNode[]) => void;
+    onDeleteEmptyBlock?: () => void;
+    onFocusPrevious?: () => void;
+    onFocusNext?: () => void;
+    isOnlyBlock?: boolean;
+}
+declare function TextBlockEditor({ block, onUpdate, onMergeWithPrevious, onSplitBlock, onPasteBlocks, onDeleteEmptyBlock, onFocusPrevious, onFocusNext, isOnlyBlock }: TextBlockEditorProps): react_jsx_runtime.JSX.Element;
+
+interface ImageGalleryEditorProps {
+    block: ImageGalleryBlock;
+    onUpdate: (updates: Partial<ImageGalleryBlock>) => void;
+}
+declare function ImageGalleryEditor({ block, onUpdate }: ImageGalleryEditorProps): react_jsx_runtime.JSX.Element;
+
+interface LinkCardEditorProps {
+    block: LinkCardBlock;
+    onUpdate: (updates: Partial<LinkCardBlock>) => void;
+}
+declare function LinkCardEditor({ block, onUpdate }: LinkCardEditorProps): react_jsx_runtime.JSX.Element;
+
+interface LinkEmbedEditorProps {
+    block: LinkEmbedBlock;
+    onUpdate: (updates: Partial<LinkEmbedBlock>) => void;
+}
+declare function LinkEmbedEditor({ block, onUpdate }: LinkEmbedEditorProps): react_jsx_runtime.JSX.Element;
+
+interface DialogueEditorProps {
+    block: DialogueBlock;
+    onUpdate: (updates: Partial<DialogueBlock>) => void;
+}
+declare function DialogueEditor({ block, onUpdate }: DialogueEditorProps): react_jsx_runtime.JSX.Element;
+
+interface DividerEditorProps {
+    block: DividerBlock;
+    onUpdate: (updates: Partial<DividerBlock>) => void;
+}
+declare function DividerEditor({ block, onUpdate }: DividerEditorProps): react_jsx_runtime.JSX.Element;
+
+interface ImageComponentProps {
+    src: string;
+    alt: string;
+    fill?: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface EditorServices {
+    uploadImage: (file: File, category: string) => Promise<string>;
+    fetchOGData: (url: string) => Promise<OGData>;
+    getCharacters?: () => Promise<Character[]>;
+    ImageComponent?: React.ComponentType<ImageComponentProps>;
+}
+interface EditorProviderProps {
+    services: EditorServices;
+    children: ReactNode;
+}
+declare function EditorProvider({ services, children }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function useEditorServices(): EditorServices;
+declare function useOptionalEditorServices(): EditorServices | null;
+declare function DefaultImage({ src, alt, fill, width, height, className, style, }: ImageComponentProps): react_jsx_runtime.JSX.Element;
+
+export { type Block, type BlockContent, BlockEditor, BlockMenu, type BlockType, type Character, DefaultImage, type DialogueBlock, DialogueEditor, type DialogueLine, type DividerBlock, DividerEditor, EditorProvider, type EditorServices, type HeadingBlock, type ImageBlock, type ImageComponentProps, type ImageData, type ImageGalleryBlock, ImageGalleryEditor, type LinkCardBlock, LinkCardEditor, type LinkEmbedBlock, LinkEmbedEditor, type ListBlock, type OGData, type ParagraphBlock, type QuoteBlock, TextBlockEditor, type TextNode, countBlocksCharacters, createEmptyParagraphBlock, generateBlockId, generatePreviewFromBlocks, textNodesToPlainText, useEditorServices, useOptionalEditorServices };