markdown-wysiwyg-editor 0.2.3 → 0.2.5

package/README.md

@@ -2,6 +2,8 @@
 
 Lightweight Markdown WYSIWYG editor for React, powered by TipTap.
 
+[Live Demo](https://wysiwyg-doc.com/markdown-wysiwyg/index.html)
+
 ![Screenshot](https://raw.githubusercontent.com/ugnoguchigxp/markdownWysiwyg/main/assets/example.png)
 
 ---
@@ -13,6 +15,7 @@ Lightweight Markdown WYSIWYG editor for React, powered by TipTap.
 - Table editing with context menu and resize controls
 - Optional Mermaid diagram support
 - Optional image insertion
+- Emoji picker for inserting emojis
 - Bidirectional Markdown conversion
 - Link context menu
 - TypeScript support
@@ -21,6 +24,8 @@ Lightweight Markdown WYSIWYG editor for React, powered by TipTap.
 
 This editor is a React component targeting **React 18+ / ReactDOM 18+**.
 
+This package is **Tailwind CSS v4 + shadcn/ui token compatible**. It uses Tailwind utility classes (e.g. `bg-background`, `text-foreground`, `bg-popover`) that are compiled by your host app's Tailwind.
+
 ```bash
 pnpm add markdown-wysiwyg-editor
 # or
@@ -31,12 +36,14 @@ yarn add markdown-wysiwyg-editor
 
 ## Quick Start
 
-**⚠️ IMPORTANT**: You **MUST** import the CSS file for the editor to work properly.
+**⚠️ IMPORTANT**
+
+- **Your app MUST use Tailwind CSS v4** for the editor's utility classes to work.
+- **You MUST configure Tailwind to scan this package** (see setup below).
 
 ```tsx
 import { useState } from 'react';
 import { MarkdownEditor } from 'markdown-wysiwyg-editor';
-import 'markdown-wysiwyg-editor/style.css'; // ← REQUIRED
 
 function App() {
   const [content, setContent] = useState('');
@@ -47,82 +54,120 @@ function App() {
 
 ## Essential Setup Steps
 
-### 1. CSS Import (Required)
+### 1. Tailwind v4 Configuration (Required)
 
-**Without the CSS import, the editor will not display properly**. Make sure to import the stylesheet:
+Add the following to your project's main CSS file (e.g., `index.css`):
 
-```tsx
-import 'markdown-wysiwyg-editor/style.css';
+```css
+@import "tailwindcss";
+
+/* Scan package source for Tailwind classes */
+@source "./node_modules/markdown-wysiwyg-editor/dist/*.js";
+
+/* Import package theme (optional - provides default light/dark mode) */
+@import "markdown-wysiwyg-editor/theme.css";
+
+/* Import editor content styles */
+@import "markdown-wysiwyg-editor/style.css";
+
+/* Map CSS variables to Tailwind v4 theme */
+@theme {
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+
+    --variant-dark: .dark &;
+}
 ```
 
-You can import this in your main app file (e.g., `App.tsx` or `index.tsx`) to make it available globally.
+### 2. Theming Options
 
-### 2. Theming (shadcn CSS Variables)
+#### Option A: Use Package Default Theme
 
-This library uses **shadcn-style CSS variables** for theming. Define these variables in your host project's global CSS:
+Import `theme.css` to get shadcn-compatible light/dark mode defaults:
 
 ```css
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 221.2 83.2% 53.3%;
-  --radius: 0.5rem;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-}
+@import "markdown-wysiwyg-editor/theme.css";
+```
 
-/* Dark mode - use .dark class or @media (prefers-color-scheme: dark) */
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 224.3 76.3% 48%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
+#### Option B: Use Your Own Theme
+
+If you already use shadcn/ui or have your own CSS variables defined, skip importing `theme.css`:
+
+```css
+@import "tailwindcss";
+@source "./node_modules/markdown-wysiwyg-editor/dist/*.js";
+@import "markdown-wysiwyg-editor/style.css";
+
+/* Your own theme variables */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    /* ... other variables */
+  }
+  
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    /* ... other variables */
+  }
 }
 ```
 
-> **Note**: If you already use shadcn/ui in your project, these variables are likely already defined. The editor will automatically use your existing theme.
-
-#### Tailwind CSS Configuration
+#### Required CSS Variables
+
+The editor expects these shadcn-style CSS variables (HSL triplets without `hsl()`):
+
+| Variable | Light Mode Example | Description |
+|----------|-------------------|-------------|
+| `--background` | `0 0% 100%` | Page background |
+| `--foreground` | `222.2 84% 4.9%` | Primary text color |
+| `--popover` | `0 0% 100%` | Dropdown/menu background |
+| `--popover-foreground` | `222.2 84% 4.9%` | Dropdown/menu text |
+| `--primary` | `222.2 47.4% 11.2%` | Primary action color |
+| `--primary-foreground` | `210 40% 98%` | Primary action text |
+| `--secondary` | `210 40% 96.1%` | Secondary elements |
+| `--secondary-foreground` | `222.2 47.4% 11.2%` | Secondary text |
+| `--muted` | `210 40% 96.1%` | Muted backgrounds |
+| `--muted-foreground` | `215.4 16.3% 46.9%` | Muted text |
+| `--accent` | `210 40% 96.1%` | Hover states |
+| `--accent-foreground` | `222.2 47.4% 11.2%` | Hover text |
+| `--border` | `214.3 31.8% 91.4%` | Border color |
+| `--input` | `214.3 31.8% 91.4%` | Input border |
+| `--ring` | `222.2 84% 4.9%` | Focus ring |
+| `--radius` | `0.5rem` | Border radius |
+
+### 3. Dark Mode
+
+Dark mode works automatically when you add the `.dark` class to `<html>` or `<body>`:
 
-Make sure Tailwind scans this package's output:
+```tsx
+// Toggle dark mode
+document.documentElement.classList.toggle('dark');
+```
 
-```js
-// tailwind.config.js
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/markdown-wysiwyg-editor/dist/**/*.{js,cjs,mjs}',
-  ],
-}
+If you imported `theme.css`, dark mode colors are already defined. Otherwise, define them under `.dark` selector in your CSS.
 ```
 
 ### 3. Height and Scroll Configuration
@@ -179,17 +224,37 @@ The editor needs proper height configuration to enable scrolling. Choose one app
 
 #### Issue: Styles not applying
 
-- Verify the CSS import path: `'markdown-wysiwyg-editor/style.css'`
+- Check that you've added `@source` directive pointing to this package
+- Verify the `@theme` block maps CSS variables correctly
 - Check browser console for CSS loading errors
-- Make sure you're not using CSS modules that might interfere with global styles
+
+#### Issue: Toolbar / menus look unstyled or transparent
+
+- Ensure Tailwind CSS v4 is installed and configured
+- Verify `@source "./node_modules/markdown-wysiwyg-editor/dist/*.js"` is in your CSS
+- Check that CSS variables (`--popover`, `--background`, etc.) are defined
+- Make sure `.dark` class toggle updates the CSS variables correctly
+
+#### Issue: Dark mode not working
+
+- Ensure `.dark` class is applied to `<html>` or `<body>`
+- Import `theme.css` or define dark mode variables under `.dark` selector
+- Check that `--variant-dark: .dark &;` is in your `@theme` block
 
 ### With Mermaid
 
+`mermaid` is an optional peer dependency. Install it only if you enable Mermaid:
+
+```bash
+pnpm add mermaid
+# or
+npm install mermaid
+```
+
 ```tsx
 import { useState } from 'react';
 import mermaid from 'mermaid';
 import { MarkdownEditor } from 'markdown-wysiwyg-editor';
-import 'markdown-wysiwyg-editor/style.css';
 
 mermaid.initialize({ startOnLoad: false });
 
@@ -208,6 +273,12 @@ function App() {
 <MarkdownEditor value={content} onChange={setContent} enableImage={false} enableTable={false} />
 ```
 
+Emoji insertion is available via the built-in toolbar. To hide it, hide the toolbar:
+
+```tsx
+<MarkdownEditor value={content} onChange={setContent} showToolbar={false} />
+```
+
 ### Image whitelist (local images)
 
 For security reasons, **local image paths are not rendered by default**.
@@ -393,6 +464,8 @@ import 'markdown-wysiwyg-editor/style.css';
 
 Ensure the CSS is imported in your app entry.
 
+If the editor content is styled but the toolbar/buttons are not, Tailwind is not generating the required utility classes. Re-check the Tailwind `content` paths and shadcn-compatible theme tokens.
+
 ### "ReferenceError: global is not defined"
 
 With some Vite setups you may need:

package/dist/components/EditorChrome.d.ts

@@ -0,0 +1,25 @@
+import type { Editor } from '@tiptap/react';
+import type React from 'react';
+import type { ISelectionInfo } from '../utils/selectionUtils';
+interface EditorChromeProps {
+    editor: Editor;
+    selectionInfo: ISelectionInfo | null;
+    editable: boolean;
+    effectiveShowToolbar: boolean;
+    effectiveShowSyntaxStatus: boolean;
+    effectiveShowPasteDebug: boolean;
+    showDownloadButton: boolean;
+    onDownloadAsMarkdown: () => void;
+    onInsertMarkdown: (markdown: string, cursorOffset?: number) => void;
+    pasteEvents: Array<{
+        timestamp: number;
+        type: string;
+        content: string;
+        result: string;
+    }>;
+    onClearPasteEvents: () => void;
+    children: React.ReactNode;
+}
+export declare const EditorChrome: React.FC<EditorChromeProps>;
+export {};
+//# sourceMappingURL=EditorChrome.d.ts.map

package/dist/components/EditorChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorChrome.d.ts","sourceRoot":"","sources":["../../src/components/EditorChrome.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAK9D,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,cAAc,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,yBAAyB,EAAE,OAAO,CAAC;IACnC,uBAAuB,EAAE,OAAO,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,WAAW,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6EpD,CAAC"}

package/dist/components/EmojiPicker.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+interface EmojiPickerProps {
+    /** Called when an emoji is selected */
+    onSelect: (emoji: string) => void;
+    /** Called when the picker should close */
+    onClose: () => void;
+    /** Disable the picker */
+    disabled?: boolean;
+    /** Translator function from host app */
+    t: (key: string, fallback?: string) => string;
+}
+export declare const EmojiPicker: React.FC<EmojiPickerProps>;
+export {};
+//# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/components/EmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,UAAU,gBAAgB;IACxB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,0CAA0C;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwKlD,CAAC"}

package/dist/components/ImagePicker.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+interface ImagePickerProps {
+    onInsertMarkdown: (markdown: string) => void;
+    onClose: () => void;
+    disabled?: boolean;
+    t: (key: string, fallback?: string) => string;
+}
+export declare const ImagePicker: React.FC<ImagePickerProps>;
+export {};
+//# sourceMappingURL=ImagePicker.d.ts.map

package/dist/components/ImagePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePicker.d.ts","sourceRoot":"","sources":["../../src/components/ImagePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkGlD,CAAC"}

package/dist/components/LinkContextMenu.d.ts

@@ -1,4 +1,9 @@
-import { default as React } from 'react';
+/**
+ * LinkContextMenu - Context menu displayed when clicking on links
+ *
+ * Options menu shown when right-clicking or Ctrl+clicking on a link
+ */
+import type React from 'react';
 interface LinkContextMenuProps {
     visible: boolean;
     position: {

package/dist/components/MarkdownEditor.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { IMarkdownEditorProps } from '../types/index';
+import React from 'react';
+import { type IMarkdownEditorProps } from '../types/index';
 export declare const MarkdownEditor: React.FC<IMarkdownEditorProps>;
 //# sourceMappingURL=MarkdownEditor.d.ts.map

package/dist/components/MarkdownEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AA0BhE,OAAO,EAAa,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAetE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAy2BzD,CAAC"}
+{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AA0BhE,OAAO,EAAa,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAetE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkczD,CAAC"}

package/dist/components/MarkdownSyntaxStatus.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { ISelectionInfo } from '../utils/selectionUtils';
+import type React from 'react';
+import type { ISelectionInfo } from '../utils/selectionUtils';
 interface IMarkdownSyntaxStatusProps {
     selectionInfo: ISelectionInfo | null;
     className?: string;

package/dist/components/MarkdownToolbar.d.ts

@@ -1,5 +1,10 @@
-import { default as React } from 'react';
-import { Editor } from '@tiptap/react';
+/**
+ * MarkdownToolbar - Markdown formatting toolbar
+ *
+ * Toolbar component for applying various Markdown formatting
+ */
+import React from 'react';
+import type { Editor } from '@tiptap/react';
 interface MarkdownToolbarProps {
     onInsertMarkdown: (markdown: string, cursorOffset?: number) => void;
     onImageUploadComplete?: (markdownImageUrl: string) => void;

package/dist/components/MarkdownToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownToolbar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAsB5C,UAAU,oBAAoB;IAC5B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,qBAAqB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwrB1D,CAAC"}
+{"version":3,"file":"MarkdownToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownToolbar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AA4B5C,UAAU,oBAAoB;IAC5B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,qBAAqB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyV1D,CAAC"}

package/dist/components/TableContextMenu.d.ts

@@ -1,4 +1,7 @@
-import { default as React } from 'react';
+/**
+ * TableContextMenu - Table operation context menu
+ */
+import type React from 'react';
 export interface ITableContextMenuProps {
     isVisible: boolean;
     position: {

package/dist/components/TableEdgeControls.d.ts

@@ -1,5 +1,6 @@
-import { default as React } from 'react';
-import { Editor } from '@tiptap/react';
+import type React from 'react';
+import type { Editor } from '@tiptap/react';
+import '@tiptap/extension-table';
 export interface ITableEdgeControlsProps {
     editor: Editor | null;
 }

package/dist/components/TableToolbar.d.ts

@@ -1,5 +1,6 @@
-import { default as React } from 'react';
-import { Editor } from '@tiptap/react';
+import type React from 'react';
+import type { Editor } from '@tiptap/react';
+import '@tiptap/extension-table';
 interface ITableToolbarProps {
     editor: Editor;
     visible: boolean;

package/dist/components/toolbar/DownloadMenu.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { Translator } from '../../i18n/I18nContext';
+interface DownloadMenuProps {
+    isOpen: boolean;
+    disabled?: boolean;
+    onToggle: () => void;
+    onClose: () => void;
+    onDownloadAsMarkdown: () => void;
+    t: Translator;
+}
+export declare const DownloadMenu: React.FC<DownloadMenuProps>;
+export {};
+//# sourceMappingURL=DownloadMenu.d.ts.map

package/dist/components/toolbar/DownloadMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadMenu.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/DownloadMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIzD,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,CAAC,EAAE,UAAU,CAAC;CACf;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwFpD,CAAC"}

package/dist/components/toolbar/HeadingMenu.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { Translator } from '../../i18n/I18nContext';
+interface HeadingMenuProps {
+    isOpen: boolean;
+    disabled?: boolean;
+    onToggle: () => void;
+    onClose: () => void;
+    onInsertMarkdown: (markdown: string) => void;
+    t: Translator;
+}
+export declare const HeadingMenu: React.FC<HeadingMenuProps>;
+export {};
+//# sourceMappingURL=HeadingMenu.d.ts.map

package/dist/components/toolbar/HeadingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingMenu.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/HeadingMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIzD,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,CAAC,EAAE,UAAU,CAAC;CACf;AAwCD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyGlD,CAAC"}

package/dist/components/toolbar/LinkModal.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { Translator } from '../../i18n/I18nContext';
+interface LinkModalProps {
+    isOpen: boolean;
+    selectedText: string;
+    onInsertMarkdown: (markdown: string) => void;
+    onClose: () => void;
+    t: Translator;
+}
+export declare const LinkModal: React.FC<LinkModalProps>;
+export {};
+//# sourceMappingURL=LinkModal.d.ts.map

package/dist/components/toolbar/LinkModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkModal.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/LinkModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGzD,UAAU,cAAc;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,CAAC,EAAE,UAAU,CAAC;CACf;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgH9C,CAAC"}

package/dist/components/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { LucideIcon } from '../ui/icons';
+interface ToolbarButtonProps {
+    icon: LucideIcon;
+    title: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare const ToolbarButton: React.FC<ToolbarButtonProps>;
+export {};
+//# sourceMappingURL=ToolbarButton.d.ts.map

package/dist/components/toolbar/ToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmBtD,CAAC"}

package/dist/components/ui/icons.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+export type IconProps = ComponentProps<'svg'> & {
+    size?: number | string;
+};
+export declare const Trash2: FunctionComponent<IconProps>;
+export declare const Download: FunctionComponent<IconProps>;
+export declare const Heading1: FunctionComponent<IconProps>;
+export declare const ArrowLeft: FunctionComponent<IconProps>;
+export declare const Columns3: FunctionComponent<IconProps>;
+export declare const LayoutGrid: FunctionComponent<IconProps>;
+export declare const Minus: FunctionComponent<IconProps>;
+export declare const Plus: FunctionComponent<IconProps>;
+export declare const Rows3: FunctionComponent<IconProps>;
+export declare const Edit3: FunctionComponent<IconProps>;
+export declare const ExternalLink: FunctionComponent<IconProps>;
+export declare const X: FunctionComponent<IconProps>;
+export declare const Bold: FunctionComponent<IconProps>;
+export declare const Italic: FunctionComponent<IconProps>;
+export declare const Strikethrough: FunctionComponent<IconProps>;
+export declare const Code: FunctionComponent<IconProps>;
+export declare const Quote: FunctionComponent<IconProps>;
+export declare const FileCode: FunctionComponent<IconProps>;
+export declare const List: FunctionComponent<IconProps>;
+export declare const ListOrdered: FunctionComponent<IconProps>;
+export declare const Link2: FunctionComponent<IconProps>;
+export declare const Image: FunctionComponent<IconProps>;
+export declare const Table: FunctionComponent<IconProps>;
+export declare const Smile: FunctionComponent<IconProps>;
+export type LucideIcon = FunctionComponent<IconProps>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/ui/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/D,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAyBF,eAAO,MAAM,MAAM,8BASlB,CAAC;AAEF,eAAO,MAAM,QAAQ,8BAOpB,CAAC;AAEF,eAAO,MAAM,QAAQ,8BAQpB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAMrB,CAAC;AAEF,eAAO,MAAM,QAAQ,8BAOpB,CAAC;AAEF,eAAO,MAAM,UAAU,8BAQtB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAA6C,CAAC;AAEhE,eAAO,MAAM,IAAI,8BAMhB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAMjB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAOxB,CAAC;AAEF,eAAO,MAAM,CAAC,8BAMb,CAAC;AAEF,eAAO,MAAM,IAAI,8BAMhB,CAAC;AAEF,eAAO,MAAM,MAAM,8BAOlB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAOzB,CAAC;AAEF,eAAO,MAAM,IAAI,8BAMhB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAMjB,CAAC;AAEF,eAAO,MAAM,QAAQ,8BAQpB,CAAC;AAEF,eAAO,MAAM,IAAI,8BAUhB,CAAC;AAEF,eAAO,MAAM,WAAW,8BAUvB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAQjB,CAAC;AAEF,eAAO,MAAM,KAAK,8BAQjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC"}

package/dist/constants/emojiData.d.ts

@@ -0,0 +1,14 @@
+import type { EmojiCategory, IEmoji, IEmojiCategoryMeta } from '../types';
+/**
+ * Emoji categories with display metadata
+ */
+export declare const EMOJI_CATEGORIES: IEmojiCategoryMeta[];
+/**
+ * Comprehensive emoji data with search keywords
+ */
+export declare const EMOJI_DATA: IEmoji[];
+/**
+ * Map of emojis grouped by category for efficient lookup
+ */
+export declare const EMOJI_BY_CATEGORY: Map<EmojiCategory, IEmoji[]>;
+//# sourceMappingURL=emojiData.d.ts.map

package/dist/constants/emojiData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emojiData.d.ts","sourceRoot":"","sources":["../../src/constants/emojiData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,EAUhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,EAue9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,CAE1D,CAAC"}

package/dist/converters/JsonToMarkdownConverter.d.ts

@@ -1,6 +1,9 @@
-import { JSONContent } from '@tiptap/react';
+/**
+ * JsonToMarkdownConverter - JSON構造からMarkdown形式への変換
+ * TipTapエディターのJSON形式をMarkdownテキストに変換
+ */
+import type { JSONContent } from '@tiptap/react';
 export declare class JsonToMarkdownConverter {
-    private readonly _instanceMarker;
     private constructor();
     /**
      * TipTap JSON構造をMarkdownテキストに変換

package/dist/converters/JsonToMarkdownConverter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonToMarkdownConverter.d.ts","sourceRoot":"","sources":["../../src/converters/JsonToMarkdownConverter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAKjD,qBAAa,uBAAuB;IAElC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAK;IAErC,OAAO;IAIP;;OAEG;IACH,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAQnD;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAI3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAuD1B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAK/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAO7B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAQhC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IAK9B,OAAO,CAAC,MAAM,CAAC,yBAAyB;IA+CxC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAShC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAM/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IA0B3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IAe9B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAI/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IA+B1B;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,SAAgB,GAAG,IAAI;CA4B7E;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"JsonToMarkdownConverter.d.ts","sourceRoot":"","sources":["../../src/converters/JsonToMarkdownConverter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAKjD,qBAAa,uBAAuB;IAGlC,OAAO;IAIP;;OAEG;IACH,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAQnD;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAI3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAuD1B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAK/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAO7B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAQhC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IAUjC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IAK9B,OAAO,CAAC,MAAM,CAAC,yBAAyB;IA+CxC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,iBAAiB;IAShC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAM/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IA0B3B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IAe9B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAI/B;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IA+B1B;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,SAAgB,GAAG,IAAI;CA4B7E;AAED,eAAe,uBAAuB,CAAC"}

package/dist/converters/MarkdownTipTapConverter.d.ts

@@ -1,13 +1,20 @@
-import { JSONContent } from '@tiptap/core';
-import { Editor } from '@tiptap/react';
-interface MarkdownToTipTapOptions {
-    publicImagePathPrefix?: string;
-}
+/**
+ * Markdown ↔ TipTap JSON Converter
+ * 明確な優先順位と処理順序を持つMarkdownパーサー
+ *
+ * 処理順序:
+ * 1. コードブロック抽出（最優先、内部は一切処理しない）
+ * 2. テーブル抽出（セル内はインライン要素のみ処理）
+ * 3. ブロック要素パース（見出し、リスト、引用など）
+ * 4. インライン要素パース（bold, italic, code, linkなど）
+ */
+import type { JSONContent } from '@tiptap/core';
+import type { Editor } from '@tiptap/react';
+import { type MarkdownToTipTapOptions } from './markdown/InlineParser';
 /**
  * メイン変換クラス
  */
 export declare class MarkdownTipTapConverter {
-    private readonly _instanceMarker;
     private constructor();
     /**
      * MarkdownがMarkdown構文を含むかチェック
@@ -30,5 +37,4 @@ export declare class MarkdownTipTapConverter {
      */
     static processMarkdownInSmallChunksWithRender(markdown: string, editor: Editor, onChunkProcessed?: (processed: number, total: number) => void, options?: MarkdownToTipTapOptions): Promise<void>;
 }
-export {};
 //# sourceMappingURL=MarkdownTipTapConverter.d.ts.map

package/dist/converters/MarkdownTipTapConverter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownTipTapConverter.d.ts","sourceRoot":"","sources":["../../src/converters/MarkdownTipTapConverter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAY5C,UAAU,uBAAuB;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAymBD;;GAEG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAK;IAErC,OAAO;IAGP;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAM5C;;OAEG;WACU,oBAAoB,CAC/B,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,WAAW,CAAC;IAoDvB,OAAO,CAAC,MAAM,CAAC,cAAc;IAmC7B;;OAEG;IACH,MAAM,CAAC,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAMtD,OAAO,CAAC,MAAM,CAAC,cAAc;IAkD7B,OAAO,CAAC,MAAM,CAAC,aAAa;IA8C5B,OAAO,CAAC,MAAM,CAAC,eAAe;IA0B9B;;OAEG;WACU,sCAAsC,CACjD,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EAC7D,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,IAAI,CAAC;CAWjB"}
+{"version":3,"file":"MarkdownTipTapConverter.d.ts","sourceRoot":"","sources":["../../src/converters/MarkdownTipTapConverter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,EAAgB,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAIrF;;GAEG;AACH,qBAAa,uBAAuB;IAClC,OAAO;IAGP;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAM5C;;OAEG;WACU,oBAAoB,CAC/B,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,WAAW,CAAC;IAoDvB,OAAO,CAAC,MAAM,CAAC,cAAc;IAmC7B;;OAEG;IACH,MAAM,CAAC,oBAAoB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM;IAMtD,OAAO,CAAC,MAAM,CAAC,cAAc;IAkD7B,OAAO,CAAC,MAAM,CAAC,aAAa;IA8C5B,OAAO,CAAC,MAAM,CAAC,eAAe;IA0B9B;;OAEG;WACU,sCAAsC,CACjD,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EAC7D,OAAO,CAAC,EAAE,uBAAuB,GAChC,OAAO,CAAC,IAAI,CAAC;CAWjB"}