@junbyeol/tiptap-editor 0.1.0

package/dist/types/components/tiptap-ui-primitive/tooltip/tooltip.d.ts

@@ -0,0 +1,28 @@
+import { FloatingPortal, Placement } from '@floating-ui/react';
+interface TooltipProviderProps {
+    children: React.ReactNode;
+    initialOpen?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    delay?: number;
+    closeDelay?: number;
+    timeout?: number;
+    useDelayGroup?: boolean;
+}
+interface TooltipTriggerProps extends Omit<React.HTMLProps<HTMLElement>, "ref"> {
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+interface TooltipContentProps extends Omit<React.HTMLProps<HTMLDivElement>, "ref"> {
+    children?: React.ReactNode;
+    portal?: boolean;
+    portalProps?: Omit<React.ComponentProps<typeof FloatingPortal>, "children">;
+}
+export declare function Tooltip({ children, ...props }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+export declare const TooltipTrigger: import('react').ForwardRefExoticComponent<TooltipTriggerProps & import('react').RefAttributes<HTMLElement>>;
+export declare const TooltipContent: import('react').ForwardRefExoticComponent<TooltipContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/hooks/use-composed-ref.d.ts

@@ -0,0 +1,3 @@
+type UserRef<T> = ((instance: T | null) => void) | React.RefObject<T | null> | null | undefined;
+export declare const useComposedRef: <T extends HTMLElement>(libRef: React.RefObject<T | null>, userRef: UserRef<T>) => (instance: T | null) => void;
+export default useComposedRef;

package/dist/types/hooks/use-is-breakpoint.d.ts

@@ -0,0 +1,9 @@
+type BreakpointMode = "min" | "max";
+/**
+ * Hook to detect whether the current viewport matches a given breakpoint rule.
+ * Example:
+ *   useIsBreakpoint("max", 768)   // true when width < 768
+ *   useIsBreakpoint("min", 1024)  // true when width >= 1024
+ */
+export declare function useIsBreakpoint(mode?: BreakpointMode, breakpoint?: number): boolean;
+export {};

package/dist/types/hooks/use-menu-navigation.d.ts

@@ -0,0 +1,52 @@
+import { Editor } from '@tiptap/react';
+type Orientation = "horizontal" | "vertical" | "both";
+interface MenuNavigationOptions<T> {
+    /**
+     * The Tiptap editor instance, if using with a Tiptap editor.
+     */
+    editor?: Editor | null;
+    /**
+     * Reference to the container element for handling keyboard events.
+     */
+    containerRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Search query that affects the selected item.
+     */
+    query?: string;
+    /**
+     * Array of items to navigate through.
+     */
+    items: T[];
+    /**
+     * Callback fired when an item is selected.
+     */
+    onSelect?: (item: T) => void;
+    /**
+     * Callback fired when the menu should close.
+     */
+    onClose?: () => void;
+    /**
+     * The navigation orientation of the menu.
+     * @default "vertical"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether to automatically select the first item when the menu opens.
+     * @default true
+     */
+    autoSelectFirstItem?: boolean;
+}
+/**
+ * Hook that implements keyboard navigation for dropdown menus and command palettes.
+ *
+ * Handles arrow keys, tab, home/end, enter for selection, and escape to close.
+ * Works with both Tiptap editors and regular DOM elements.
+ *
+ * @param options - Configuration options for the menu navigation
+ * @returns Object containing the selected index and a setter function
+ */
+export declare function useMenuNavigation<T>({ editor, containerRef, query, items, onSelect, onClose, orientation, autoSelectFirstItem, }: MenuNavigationOptions<T>): {
+    selectedIndex: number | undefined;
+    setSelectedIndex: import('react').Dispatch<import('react').SetStateAction<number>>;
+};
+export {};

package/dist/types/hooks/use-tiptap-editor.d.ts

@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Hook that provides access to a Tiptap editor instance.
+ *
+ * Accepts an optional editor instance directly, or falls back to retrieving
+ * the editor from the Tiptap context if available. This allows components
+ * to work both when given an editor directly and when used within a Tiptap
+ * editor context.
+ *
+ * @param providedEditor - Optional editor instance to use instead of the context editor
+ * @returns The provided editor or the editor from context, whichever is available
+ */
+export declare function useTiptapEditor(providedEditor?: Editor | null): {
+    editor: Editor | null;
+    editorState?: Editor["state"];
+    canCommand?: Editor["can"];
+};

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/index'
+export {}

package/dist/types/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { default as TiptapEditor } from '../tiptap/index';
+export type { TiptapProps } from '../tiptap/index';
+export type { FileAttachmentAttributes } from '../tiptap/extensions/file-attachment';
+export { createFileAttachmentExtension } from '../tiptap/extensions/file-attachment';
+export { DefaultFileAttachmentComponent } from '../tiptap/extensions/default-file-attachment';

package/dist/types/lib/tiptap-utils.d.ts

@@ -0,0 +1,168 @@
+import { Node as PMNode } from '@tiptap/pm/model';
+import { Transaction, Selection } from '@tiptap/pm/state';
+import { Editor, NodeWithPos } from '@tiptap/react';
+export declare const MAX_FILE_SIZE: number;
+export declare const MAC_SYMBOLS: Record<string, string>;
+export declare const SR_ONLY: {
+    readonly position: "absolute";
+    readonly width: "1px";
+    readonly height: "1px";
+    readonly padding: 0;
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly clip: "rect(0, 0, 0, 0)";
+    readonly whiteSpace: "nowrap";
+    readonly borderWidth: 0;
+};
+export declare function cn(...classes: (string | boolean | undefined | null)[]): string;
+/**
+ * Determines if the current platform is macOS
+ * @returns boolean indicating if the current platform is Mac
+ */
+export declare function isMac(): boolean;
+/**
+ * Formats a shortcut key based on the platform (Mac or non-Mac)
+ * @param key - The key to format (e.g., "ctrl", "alt", "shift")
+ * @param isMac - Boolean indicating if the platform is Mac
+ * @param capitalize - Whether to capitalize the key (default: true)
+ * @returns Formatted shortcut key symbol
+ */
+export declare const formatShortcutKey: (key: string, isMac: boolean, capitalize?: boolean) => string;
+/**
+ * Parses a shortcut key string into an array of formatted key symbols
+ * @param shortcutKeys - The string of shortcut keys (e.g., "ctrl-alt-shift")
+ * @param delimiter - The delimiter used to split the keys (default: "-")
+ * @param capitalize - Whether to capitalize the keys (default: true)
+ * @returns Array of formatted shortcut key symbols
+ */
+export declare const parseShortcutKeys: (props: {
+    shortcutKeys: string | undefined;
+    delimiter?: string;
+    capitalize?: boolean;
+}) => string[];
+/**
+ * Checks if a mark exists in the editor schema
+ * @param markName - The name of the mark to check
+ * @param editor - The editor instance
+ * @returns boolean indicating if the mark exists in the schema
+ */
+export declare const isMarkInSchema: (markName: string, editor: Editor | null) => boolean;
+/**
+ * Checks if a node exists in the editor schema
+ * @param nodeName - The name of the node to check
+ * @param editor - The editor instance
+ * @returns boolean indicating if the node exists in the schema
+ */
+export declare const isNodeInSchema: (nodeName: string, editor: Editor | null) => boolean;
+/**
+ * Moves the focus to the next node in the editor
+ * @param editor - The editor instance
+ * @returns boolean indicating if the focus was moved
+ */
+export declare function focusNextNode(editor: Editor): boolean;
+/**
+ * Checks if a value is a valid number (not null, undefined, or NaN)
+ * @param value - The value to check
+ * @returns boolean indicating if the value is a valid number
+ */
+export declare function isValidPosition(pos: number | null | undefined): pos is number;
+/**
+ * Checks if one or more extensions are registered in the Tiptap editor.
+ * @param editor - The Tiptap editor instance
+ * @param extensionNames - A single extension name or an array of names to check
+ * @returns True if at least one of the extensions is available, false otherwise
+ */
+export declare function isExtensionAvailable(editor: Editor | null, extensionNames: string | string[]): boolean;
+/**
+ * Finds a node at the specified position with error handling
+ * @param editor The Tiptap editor instance
+ * @param position The position in the document to find the node
+ * @returns The node at the specified position, or null if not found
+ */
+export declare function findNodeAtPosition(editor: Editor, position: number): PMNode | null;
+/**
+ * Finds the position and instance of a node in the document
+ * @param props Object containing editor, node (optional), and nodePos (optional)
+ * @param props.editor The Tiptap editor instance
+ * @param props.node The node to find (optional if nodePos is provided)
+ * @param props.nodePos The position of the node to find (optional if node is provided)
+ * @returns An object with the position and node, or null if not found
+ */
+export declare function findNodePosition(props: {
+    editor: Editor | null;
+    node?: PMNode | null;
+    nodePos?: number | null;
+}): {
+    pos: number;
+    node: PMNode;
+} | null;
+/**
+ * Determines whether the current selection contains a node whose type matches
+ * any of the provided node type names.
+ * @param editor Tiptap editor instance
+ * @param nodeTypeNames List of node type names to match against
+ * @param checkAncestorNodes Whether to check ancestor node types up the depth chain
+ */
+export declare function isNodeTypeSelected(editor: Editor | null, nodeTypeNames?: string[], checkAncestorNodes?: boolean): boolean;
+/**
+ * Check whether the current selection is fully within nodes
+ * whose type names are in the provided `types` list.
+ *
+ * - NodeSelection → checks the selected node.
+ * - Text/AllSelection → ensures all textblocks within [from, to) are allowed.
+ */
+export declare function selectionWithinConvertibleTypes(editor: Editor, types?: string[]): boolean;
+/**
+ * Handles image upload with progress tracking and abort capability
+ * @param file The file to upload
+ * @param onProgress Optional callback for tracking upload progress
+ * @param abortSignal Optional AbortSignal for cancelling the upload
+ * @returns Promise resolving to the URL of the uploaded image
+ */
+export declare const handleImageUpload: (file: File, onProgress?: (event: {
+    progress: number;
+}) => void, abortSignal?: AbortSignal) => Promise<string>;
+type ProtocolOptions = {
+    /**
+     * The protocol scheme to be registered.
+     * @default '''
+     * @example 'ftp'
+     * @example 'git'
+     */
+    scheme: string;
+    /**
+     * If enabled, it allows optional slashes after the protocol.
+     * @default false
+     * @example true
+     */
+    optionalSlashes?: boolean;
+};
+type ProtocolConfig = Array<ProtocolOptions | string>;
+export declare function isAllowedUri(uri: string | undefined, protocols?: ProtocolConfig): true | RegExpMatchArray | null;
+export declare function sanitizeUrl(inputUrl: string, baseUrl: string, protocols?: ProtocolConfig): string;
+/**
+ * Update a single attribute on multiple nodes.
+ *
+ * @param tr - The transaction to mutate
+ * @param targets - Array of { node, pos }
+ * @param attrName - Attribute key to update
+ * @param next - New value OR updater function receiving previous value
+ *               Pass `undefined` to remove the attribute.
+ * @returns true if at least one node was updated, false otherwise
+ */
+export declare function updateNodesAttr<A extends string = string, V = unknown>(tr: Transaction, targets: readonly NodeWithPos[], attrName: A, next: V | ((prev: V | undefined) => V | undefined)): boolean;
+/**
+ * Selects the entire content of the current block node if the selection is empty.
+ * If the selection is not empty, it does nothing.
+ * @param editor The Tiptap editor instance
+ */
+export declare function selectCurrentBlockContent(editor: Editor): void;
+/**
+ * Retrieves all nodes of specified types from the current selection.
+ * @param selection The current editor selection
+ * @param allowedNodeTypes An array of node type names to look for (e.g., ["image", "table"])
+ * @returns An array of objects containing the node and its position
+ */
+export declare function getSelectedNodesOfType(selection: Selection, allowedNodeTypes: string[]): NodeWithPos[];
+export declare function getSelectedBlockNodes(editor: Editor): PMNode[];
+export {};

package/dist/types/tiptap/extensions/default-file-attachment.d.ts

@@ -0,0 +1,2 @@
+import { FileAttachmentAttributes } from './file-attachment';
+export declare const DefaultFileAttachmentComponent: ({ name, url, }: FileAttachmentAttributes) => import("react/jsx-runtime").JSX.Element;

package/dist/types/tiptap/extensions/file-attachment.d.ts

@@ -0,0 +1,13 @@
+import { Node } from '@tiptap/core';
+import { ComponentType, RefObject } from 'react';
+export interface FileAttachmentAttributes {
+    name: string;
+    mimeType: string;
+    url: string;
+    size: number;
+}
+/**
+ * componentRef를 인자로 받아 FileAttachment Node 확장을 생성하는 팩토리 함수.
+ * ref 패턴을 사용하므로 컴포넌트가 동적으로 교체되어도 stale 클로저가 발생하지 않는다.
+ */
+export declare const createFileAttachmentExtension: (componentRef: RefObject<ComponentType<FileAttachmentAttributes> | undefined>) => Node<any, any>;

package/dist/types/tiptap/index.d.ts

@@ -0,0 +1,29 @@
+import { ComponentType } from 'react';
+import { FileAttachmentAttributes } from './extensions/file-attachment';
+export interface TiptapProps {
+    /**
+     * 제공 시: 파일을 CDN에 업로드하고 URL을 반환.
+     * 미제공 시: FileReader로 base64 변환 후 브라우저 메모리에 임시 저장.
+     */
+    uploadFile?: (file: File) => Promise<string>;
+    /**
+     * 파일이 에디터에 삽입될 때 호출되는 콜백.
+     */
+    onFileInsert?: (file: File) => void;
+    /**
+     * 파일 업로드 오류 시 호출되는 콜백.
+     */
+    onFileError?: (error: Error) => void;
+    /**
+     * true 시 이미지 외 파일(PDF, Word 등)도 허용.
+     * FileAttachmentComponent가 함께 제공되어야 에디터에 렌더링됨.
+     */
+    allowNonImageFile?: boolean;
+    /**
+     * 비이미지 파일을 에디터에 렌더링할 React 컴포넌트.
+     * allowNonImageFile이 true일 때 유효하며, name/mimeType/url/size를 props로 받는다.
+     */
+    FileAttachmentComponent?: ComponentType<FileAttachmentAttributes>;
+}
+declare const TiptapEditor: ({ uploadFile, onFileInsert, onFileError, allowNonImageFile, FileAttachmentComponent, }: TiptapProps) => import("react/jsx-runtime").JSX.Element;
+export default TiptapEditor;

package/dist/types/tiptap/menubar.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '@tiptap/react';
+export default function menubar({ editor }: {
+    editor: Editor;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@junbyeol/tiptap-editor",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md,scss}\"",
+    "lint-staged": "lint-staged",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@remixicon/react": "^4.9.0",
+    "@tiptap/extension-file-handler": "^3.22.2",
+    "@tiptap/extension-image": "^3.22.2",
+    "@tiptap/extension-list": "^3.20.1",
+    "@tiptap/extension-subscript": "^3.20.1",
+    "@tiptap/extension-superscript": "^3.20.1",
+    "@tiptap/extension-table": "^3.20.1",
+    "@tiptap/extension-text-align": "^3.20.1",
+    "@tiptap/extension-text-style": "^3.20.1",
+    "@tiptap/extension-underline": "^3.20.1",
+    "@tiptap/pm": "^3.20.1",
+    "@tiptap/react": "^3.20.1",
+    "@tiptap/starter-kit": "^3.20.1",
+    "react-hotkeys-hook": "^5.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^25.3.5",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.3.3",
+    "prettier": "^3.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-toastify": "^11.0.5",
+    "sass-embedded": "^1.97.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --no-warn-ignored --max-warnings=0"
+    ]
+  }
+}