### Basic Usage

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Video/index.md

Example of how to integrate the Video extension into your Tiptap editor setup, including necessary imports and extension configuration.

```APIDOC
## Usage

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { Video, RichTextVideo } from 'reactjs-tiptap-editor/video';
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  Video
];

const RichTextToolbar = () => {
  return (
    <RichTextVideo />
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};
```
```

--------------------------------

### Start Demo Server

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/CONTRIBUTING.md

Commands to build the library in development mode and start the playground server for testing.

```bash
npm run build:lib:dev
npm run playground
```

--------------------------------

### Install CodeBlock Dependencies

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/CodeBlock/index.md

Install highlight.js and lowlight for syntax highlighting in code blocks.

```bash
npm install highlight.js lowlight
```

--------------------------------

### Basic Highlight Extension Setup

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Highlight/index.md

A minimal setup for the Highlight extension, including only the necessary import.

```tsx
import { Highlight } from 'reactjs-tiptap-editor/highlight';

const extensions = [Highlight];
```

--------------------------------

### Install reactjs-tiptap-editor

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/skills/reactjs-tiptap-editor/SKILL.md

Install the editor package using npm or pnpm. For CodeBlock syntax highlighting, also install the 'lowlight' package.

```bash
npm install reactjs-tiptap-editor@latest
# or
pnpm install reactjs-tiptap-editor@latest
```

```bash
npm install lowlight
```

--------------------------------

### Import Word Extension Setup

Source: https://context7.com/hunghg255/reactjs-tiptap-editor/llms.txt

Allows importing content from .docx files into the editor using the 'mammoth' library. Ensure 'mammoth' is installed separately. A toolbar button is provided to trigger the import.

```bash
npm install mammoth
```

```tsx
import { ImportWord, RichTextImportWord } from 'reactjs-tiptap-editor/importword';

const extensions = [
  /* ...BaseKit... */
  ImportWord, // default keyboard shortcut: Alt+Ctrl+S
];

// Toolbar button – opens file picker for .docx files
function Toolbar() {
  return <RichTextImportWord />;
}
```

--------------------------------

### Basic Toolbar Setup with Undo/Redo

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/guide/toolbar.md

Demonstrates how to set up a basic toolbar with undo and redo functionality. Ensure all necessary extensions and CSS are imported.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { History, RichTextUndo, RichTextRedo } from 'reactjs-tiptap-editor/history';
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  History
];

const RichTextToolbar = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
      <RichTextUndo />
      <RichTextRedo />
    </div>
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Install react-image-crop Package

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Image/index.md

Install the 'react-image-crop' package using npm, yarn, or pnpm.

```bash
npm install react-image-crop
# or
yarn add react-image-crop
or
pnpm install react-image-crop
```

--------------------------------

### Install reactjs-tiptap-editor

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/guide/getting-started.md

Install the latest version of the reactjs-tiptap-editor package using npm, pnpm, or yarn.

```sh
npm install reactjs-tiptap-editor@latest
```

```sh
pnpm install reactjs-tiptap-editor@latest
```

```sh
yarn add reactjs-tiptap-editor@latest
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/CONTRIBUTING.md

Use this command to install project dependencies managed by pnpm. Ensure pnpm is installed globally.

```bash
pnpm install
```

--------------------------------

### Full-Featured Editor Setup

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/skills/reactjs-tiptap-editor/references/patterns.md

Demonstrates a comprehensive setup for a rich text editor including various extensions like bold, italic, headings, lists, links, images, tables, code blocks, and history. Includes toolbar and bubble menu configurations.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
import { EditorContent, useEditor } from "@tiptap/react"
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style'
import { ListItem } from '@tiptap/extension-list'

import { Bold, RichTextBold } from 'reactjs-tiptap-editor/bold'
import { Italic, RichTextItalic } from 'reactjs-tiptap-editor/italic'
import { Heading, RichTextHeading } from 'reactjs-tiptap-editor/heading'
import { BulletList, RichTextBulletList } from 'reactjs-tiptap-editor/bulletlist'
import { OrderedList, RichTextOrderedList } from 'reactjs-tiptap-editor/orderedlist'
import { Link, RichTextLink } from 'reactjs-tiptap-editor/link'
import { Image } from 'reactjs-tiptap-editor/image'
import { Table, RichTextTable } from 'reactjs-tiptap-editor/table'
import { CodeBlock, RichTextCodeBlock } from 'reactjs-tiptap-editor/codeblock'
import { History, RichTextUndo, RichTextRedo } from 'reactjs-tiptap-editor/history'
import { SlashCommand, SlashCommandList } from 'reactjs-tiptap-editor/slashcommand'
import { RichTextBubbleText, RichTextBubbleTable, RichTextBubbleLink, RichTextBubbleImage } from 'reactjs-tiptap-editor/bubble'

import 'reactjs-tiptap-editor/style.css'

const extensions = [
  Document, Text, Dropcursor, Gapcursor, HardBreak,
  Paragraph, TrailingNode, ListItem, TextStyle,
  Placeholder.configure({ placeholder: "Press '/' for commands" }),
  Bold, Italic, Heading, BulletList, OrderedList, Link,
  Image.configure({ upload: async (file) => uploadToServer(file) }),
  Table, CodeBlock, History, SlashCommand,
]

const Toolbar = () => (
  <div className="flex gap-2 border-b p-2">
    <RichTextUndo /> <RichTextRedo />
    <RichTextBold /> <RichTextItalic />
    <RichTextHeading />
    <RichTextBulletList /> <RichTextOrderedList />
    <RichTextLink /> <RichTextTable />
    <RichTextCodeBlock />
  </div>
)

const BubbleMenus = () => (
  <div>
    <RichTextBubbleText />
    <RichTextBubbleLink />
    <RichTextBubbleImage />
    <RichTextBubbleTable />
    <SlashCommandList />
  </div>
)

export default function App() {
  const editor = useEditor({ textDirection: 'auto', extensions })
  return (
    <RichTextProvider editor={editor}>
      <Toolbar />
      <BubbleMenus />
      <EditorContent editor={editor} />
    </RichTextProvider>
  )
}
```

--------------------------------

### Basic Editor Setup in React

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/skills/reactjs-tiptap-editor/SKILL.md

Set up the Tiptap editor with essential extensions and the RichTextProvider. Ensure the editor CSS is imported.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor';
import { EditorContent, useEditor } from '@tiptap/react';

// Base Kit (always required)
import { Document } from '@tiptap/extension-document';
import { Text } from '@tiptap/extension-text';
import { Paragraph } from '@tiptap/extension-paragraph';
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions';
import { HardBreak } from '@tiptap/extension-hard-break';
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Always import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({ placeholder: "Press '/' for commands" }),
  // add more extensions here
];

const App = () => {
  const editor = useEditor({
    textDirection: 'auto',
    extensions,
  });

  return (
    <RichTextProvider editor={editor}>
      <EditorContent editor={editor} />
    </RichTextProvider>
  );
};

```

--------------------------------

### Basic Editor Setup

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/guide/getting-started.md

Set up the RichTextProvider and useEditor hook with necessary extensions and CSS for basic editor functionality. Ensure all required extensions and styles are imported.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
import { EditorContent, useEditor } from "@tiptap/react";

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
];

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Full Bubble Menu Setup

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/skills/reactjs-tiptap-editor/references/bubble-menu.md

Renders a complete set of bubble menu components for rich text editing. Ensure only components for installed extensions are included to avoid silent failures. All components must be rendered within a RichTextProvider.

```tsx
const RichTextBubbleMenu = () => (
  <div>
    <RichTextBubbleText />       {/* Bold, italic, underline, etc on selected text */}
    <RichTextBubbleLink />       {/* Add/edit/delete links */}
    <RichTextBubbleImage />      {/* Resize, align images */}
    <RichTextBubbleVideo />      {/* Video controls */}
    <RichTextBubbleTable />      {/* Add/delete rows, cols, merge cells */}
    <RichTextBubbleIframe />     {/* Iframe size/link */}
    <RichTextBubbleColumns />    {/* Column count/widths */}
    <RichTextBubbleImageGif />   {/* GIF operations */}
    <RichTextBubbleDrawer />     {/* Drawer options */}
    <RichTextBubbleExcalidraw /> {/* Excalidraw options */}
    <RichTextBubbleMermaid />    {/* Mermaid options */}
    <RichTextBubbleTwitter />    {/* Twitter embed */}
    <RichTextBubbleCallout />    {/* Callout style/content */}
    <RichTextBubbleKatex />      {/* Math formula */}
    <RichTextBubbleMenuDragHandle /> {/* Drag to reorder blocks */}
    <SlashCommandList />         {/* Optional: slash commands in bubble */}
  </div>
)
```

--------------------------------

### Basic Color Extension Setup

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Color/index.md

A minimal setup to include the Color extension in your editor's extensions list.

```tsx
import { Color } from 'reactjs-tiptap-editor/color';

const extensions = [Color];
```

--------------------------------

### Install Import Word Dependency

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/ImportWord/index.md

Install the mammoth library, which is required for the Import Word extension to function. Use npm, pnpm, or yarn.

```sh
npm install mammoth
```

```sh
pnpm install mammoth
```

```sh
yarn add mammoth
```

--------------------------------

### Configure Heading Extension and Toolbar

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Heading/index.md

Demonstrates how to import and configure the Heading extension along with its associated toolbar component within a Reactjs Tiptap Editor setup. Ensure to include necessary base extensions and CSS.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { Heading, RichTextHeading } from 'reactjs-tiptap-editor/heading'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  Heading// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextHeading /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Full Featured Rich Text Editor Setup

Source: https://context7.com/hunghg255/reactjs-tiptap-editor/llms.txt

This component sets up a complete rich text editor with a toolbar, bubble menus, and slash commands. It requires importing various extensions and provider components. Ensure CSS is imported for proper styling.

```tsx
import { useEffect } from 'react';
import { RichTextProvider } from 'reactjs-tiptap-editor';
import { EditorContent, useEditor } from '@tiptap/react';
import { Document } from '@tiptap/extension-document';
import { Text } from '@tiptap/extension-text';
import { Paragraph } from '@tiptap/extension-paragraph';
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions';
import { HardBreak } from '@tiptap/extension-hard-break';
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

import { History, RichTextUndo, RichTextRedo } from 'reactjs-tiptap-editor/history';
import { Bold, RichTextBold } from 'reactjs-tiptap-editor/bold';
import { Italic, RichTextItalic } from 'reactjs-tiptap-editor/italic';
import { TextUnderline, RichTextUnderline } from 'reactjs-tiptap-editor/textunderline';
import { Heading, RichTextHeading } from 'reactjs-tiptap-editor/heading';
import { BulletList, RichTextBulletList } from 'reactjs-tiptap-editor/bulletlist';
import { OrderedList, RichTextOrderedList } from 'reactjs-tiptap-editor/orderedlist';
import { Link, RichTextLink } from 'reactjs-tiptap-editor/link';
import { Image, RichTextImage } from 'reactjs-tiptap-editor/image';
import { Table, RichTextTable } from 'reactjs-tiptap-editor/table';
import { CodeBlock, RichTextCodeBlock } from 'reactjs-tiptap-editor/codeblock';
import { ExportPdf, RichTextExportPdf } from 'reactjs-tiptap-editor/exportpdf';
import { SlashCommand, SlashCommandList } from 'reactjs-tiptap-editor/slashcommand';
import {
  RichTextBubbleText, RichTextBubbleLink, RichTextBubbleImage,
  RichTextBubbleTable, RichTextBubbleCodeBlock, RichTextBubbleMenuDragHandle,
} from 'reactjs-tiptap-editor/bubble';
import { localeActions } from 'reactjs-tiptap-editor/locale-bundle';
import { themeActions } from 'reactjs-tiptap-editor/theme';
import 'reactjs-tiptap-editor/style.css';
import 'react-image-crop/dist/ReactCrop.css';

const extensions = [
  Document, Text, Paragraph, Dropcursor, Gapcursor, HardBreak, TrailingNode, ListItem, TextStyle,
  Placeholder.configure({ placeholder: "Press '/' for commands" }),
  History, Bold, Italic, TextUnderline, Heading, BulletList, OrderedList, Link, CodeBlock,
  Image.configure({
    upload: async (file: File) => URL.createObjectURL(file),
    resourceImage: 'both',
  }),
  Table,
  ExportPdf.configure({ paperSize: 'A4' }),
  SlashCommand,
];

export function RichEditor() {
  useEffect(() => {
    localeActions.setLang('en');
    themeActions.setTheme('light');
    themeActions.setColor('default');
  }, []);

  const editor = useEditor({
    extensions,
    content: '<h2>Welcome</h2><p>Start typing or press <strong>/</strong> for commands.</p>',
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      const json = editor.getJSON();
      console.log({ html, json });
    },
  });

  return (
    <RichTextProvider editor={editor}>
      <div style={{ border: '1px solid #ddd', borderRadius: 8, overflow: 'hidden' }}>
        {/* Toolbar */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 2, padding: 4, borderBottom: '1px solid #eee' }}>
          <RichTextUndo /><RichTextRedo />
          <RichTextBold /><RichTextItalic /><RichTextUnderline />
          <RichTextHeading />
          <RichTextBulletList /><RichTextOrderedList />
          <RichTextLink /><RichTextImage />
          <RichTextTable /><RichTextCodeBlock />
          <RichTextExportPdf />
        </div>

        {/* Editor */}
        <div style={{ minHeight: 300, padding: 12 }}>
          <EditorContent editor={editor} />
        </div>

        {/* Bubble menus */}
        <RichTextBubbleText />
        <RichTextBubbleLink />
        <RichTextBubbleImage />
        <RichTextBubbleTable />
        <RichTextBubbleCodeBlock />
        <RichTextBubbleMenuDragHandle />

        {/* Slash command list */}
        <SlashCommandList />
      </div>
    </RichTextProvider>
  );
}

```

--------------------------------

### Configure and Use ImageGif Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/ImageGif/index.md

Import and configure the ImageGif extension, including setting the API key and provider. Also, render the RichTextImageGif component in your toolbar. You can get API keys from Giphy Developers or Tenor Developers.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { ImageGif, RichTextImageGif } from 'reactjs-tiptap-editor/imagegif'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  ImageGif.configure({
    API_KEY: '', // [!code ++]
    provider: 'tenor' // [!code ++] (tenor or giphy)
  }),// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextImageGif /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Toolbar Setup with Common Components

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/skills/reactjs-tiptap-editor/SKILL.md

Configure the editor's toolbar by including various RichText components for common editing actions like undo, redo, bold, italic, and headings.

```tsx
const RichTextToolbar = () => (
  <div className='flex items-center gap-2 flex-wrap border-b border-solid'>
    <RichTextUndo />
    <RichTextRedo />
    <RichTextBold />
    <RichTextItalic />
    <RichTextHeading />
    {/* Add more toolbar items */}
  </div>
);

```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/README.md

Change into the cloned project directory.

```bash
cd reactjs-tiptap-editor
```

--------------------------------

### Initialize RichTextProvider with Tiptap Editor

Source: https://context7.com/hunghg255/reactjs-tiptap-editor/llms.txt

Set up the RichTextProvider by initializing a Tiptap Editor instance with necessary extensions and rendering child toolbar and editor components within its context. Ensure the required CSS is imported.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor';
import { EditorContent, useEditor } from '@tiptap/react';
import { Document } from '@tiptap/extension-document';
import { Text } from '@tiptap/extension-text';
import { Paragraph } from '@tiptap/extension-paragraph';
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions';
import { HardBreak } from '@tiptap/extension-hard-break';
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
import { Bold, RichTextBold } from 'reactjs-tiptap-editor/bold';
import { Italic, RichTextItalic } from 'reactjs-tiptap-editor/italic';
import 'reactjs-tiptap-editor/style.css';

// Props interface
// export interface IProviderRichTextProps {
//   editor: Editor | null;
//   dark?: boolean;
// }

const extensions = [
  Document,
  Text,
  Dropcursor.configure({ class: 'reactjs-tiptap-editor-theme', color: 'hsl(var(--primary))', width: 2 }),
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({ placeholder: "Press '/' for commands" }),
  Bold,
  Italic,
];

function App() {
  const editor = useEditor({
    extensions,
    content: '<p>Hello <strong>world</strong>!</p>',
    onUpdate: ({ editor }) => {
      console.log(editor.getHTML()); // "<p>Hello <strong>world</strong>!</p>"
    },
  });

  return (
    <RichTextProvider editor={editor} dark={false}> 
      {/* Toolbar */}
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid #eee', padding: 4 }}>
        <RichTextBold />
        <RichTextItalic />
      </div>
      {/* Editor canvas */}
      <EditorContent editor={editor} />
    </RichTextProvider>
  );
}
```

--------------------------------

### Manage Locale Settings

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/guide/how-to-migrate.md

Illustrates how to manage locale settings for the editor, including getting the current locale and changing it.

```tsx
import { locale } from 'reactjs-tiptap-editor/locale-bundle'

// Change language
locale.setLang('vi');
```

```tsx
import { localeActions, useLocale } from 'reactjs-tiptap-editor/locale-bundle';

// In component
const currentLocale = useLocale();
console.log(currentLocale.lang);

// Change language
localeActions.setLang('vi');
```

--------------------------------

### Basic Usage

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Color/index.md

Demonstrates the basic integration of the Color extension into the editor.

```APIDOC
## Basic Usage

### Description
Integrates the Color extension into the editor.

### Code
```tsx
import { Color } from 'reactjs-tiptap-editor/color';

const extensions = [
  Color
];
```
```

--------------------------------

### Internationalization (i18n) Setup

Source: https://context7.com/hunghg255/reactjs-tiptap-editor/llms.txt

Manages editor language and custom translations. Supports built-in locales and allows adding/overriding messages.

```tsx
import { localeActions, useLocale, en } from 'reactjs-tiptap-editor/locale-bundle';

// Set language at app startup
localeActions.setLang('zh_CN');

// Add a custom language
localeActions.setMessage('fr', {
  'editor.remove': 'Supprimer',
  'editor.bold.tooltip': 'Gras',
  // ...all keys from src/locales/en.ts
});

// Override specific keys in an existing language
localeActions.setMessage('en', {
  ...en,
  'editor.remove': 'Delete',
});

// Consume current locale in a React component
function LanguageSwitcher() {
  const { lang } = useLocale();
  return (
    <select value={lang} onChange={e => localeActions.setLang(e.target.value)}>
      <option value="en">English</option>
      <option value="zh_CN">中文</option>
      <option value="vi">Tiếng Việt</option>
      <option value="pt_BR">Português</option>
    </select>
  );
}
```

--------------------------------

### Configure CodeBlock Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/CodeBlock/index.md

Set up the CodeBlock extension with necessary base extensions, custom lowlight instance, and integrate toolbar/bubble menu components.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Bubble Menu
import { RichTextBubbleCodeBlock } from 'reactjs-tiptap-editor/bubble';

// Extension
import { CodeBlock, RichTextCodeBlock } from 'reactjs-tiptap-editor/codeblock'; // [!code ++]
// ... other extensions

// Lowlight, Highlight.js
import { createLowlight } from 'lowlight';
import css from 'highlight.js/lib/languages/css';
import js from 'highlight.js/lib/languages/javascript';
import ts from 'highlight.js/lib/languages/typescript';
import html from 'highlight.js/lib/languages/xml';

// Import CSS
import 'reactjs-tiptap-editor/style.css';

// Optional: Import lowlight languages
// create a lowlight instance with all languages loaded

//This is only an example, all supported languages are already loaded above
// but you can also register only specific languages to reduce bundle-size
const lowlight = createLowlight();
lowlight.register('html', html);
lowlight.register('css', css);
lowlight.register('js', js);
lowlight.register('ts', ts);

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  CodeBlock// [!code ++]

  // Config Lowlight
  // CodeBlock.configure({
  //   lowlight: lowlight, // [!code ++]
  // }),
];

const RichTextToolbar = () => {
  return (
    <RichTextCodeBlock /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <RichTextBubbleCodeBlock /> {/* [!code ++] */}

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Programmatic Color Manipulation

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Color/index.md

Demonstrates how to programmatically apply, remove, check for, and get the current text color using the editor instance.

```js
// Apply color
editor.chain().focus().setColor('#FF0000').run();

// Remove color
editor.chain().focus().unsetColor().run();

// Check if color is active
const isColorActive = editor.isActive('textStyle', { color: '#FF0000' });

// Get current color
const { color } = editor.getAttributes('textStyle');

```

--------------------------------

### Minimal Blog Editor Configuration

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/skills/reactjs-tiptap-editor/references/patterns.md

Sets up a minimal editor with only Bold, Italic, Heading, and Link functionalities. Assumes base kit imports and CSS are handled elsewhere.

```tsx
import { Bold, RichTextBold } from 'reactjs-tiptap-editor/bold'
import { Italic, RichTextItalic } from 'reactjs-tiptap-editor/italic'
import { Heading, RichTextHeading } from 'reactjs-tiptap-editor/heading'
import { Link, RichTextLink } from 'reactjs-tiptap-editor/link'
// + base kit imports + 'reactjs-tiptap-editor/style.css'

const extensions = [
  ...baseKit,
  Bold, Italic, Heading, Link,
]
```

--------------------------------

### Updated Extension Imports

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/guide/how-to-migrate.md

Extensions now export both the TipTap extension and its corresponding toolbar component. For example, `Bold` extension now also exports `RichTextBold`.

```tsx
| Old Import                                                |
| --------------------------------------------------------- |
| `import { Bold } from 'reactjs-tiptap-editor/bold'`       |
| `import { Italic } from 'reactjs-tiptap-editor/italic'`   |
| `import { History } from 'reactjs-tiptap-editor/history'` |
```

```tsx
| New Import                                                                            |
| ------------------------------------------------------------------------------------- |
| `import { Bold, RichTextBold } from 'reactjs-tiptap-editor/bold'`                     |
| `import { Italic, RichTextItalic } from 'reactjs-tiptap-editor/italic'`               |
| `import { History, RichTextUndo, RichTextRedo } from 'reactjs-tiptap-editor/history'` |
```

--------------------------------

### Initialize Editor with Font Size Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/FontSize/index.md

Import and configure the FontSize extension and its associated toolbar component when setting up the Tiptap editor. Ensure necessary base extensions and CSS are also imported.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { FontSize, RichTextFontSize } from 'reactjs-tiptap-editor/fontsize'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  FontSize// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextFontSize /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Configure Import Word Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/ImportWord/index.md

Integrate the ImportWord extension and its associated RichTextImportWord component into your Tiptap editor setup. Ensure all necessary base extensions are included.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { ImportWord, RichTextImportWord } from 'reactjs-tiptap-editor/importword'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  ImportWord// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextImportWord /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Configure Editor with Column Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Column/index.md

Set up the Tiptap editor with the Column extension and a custom document type to support multi-column content. Ensure necessary imports for column functionality.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { Column, ColumnNode, MultipleColumnNode, RichTextColumn } from 'reactjs-tiptap-editor/column'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

// custom document to support columns
const DocumentColumn = /* @__PURE__ */ Document.extend({
  content: '(block|columns)+', // [!code ++]
}); // [!code ++]

const extensions = [
  // Base Extensions
  Document, // [!code --]
  DocumentColumn, // [!code ++]
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  Column// [!code ++]
  ColumnNode// [!code ++]
  MultipleColumnNode// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextColumn /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Clone Project Repository

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/README.md

Use this command to clone the project from GitHub.

```bash
git clone https://github.com/hunghg255/reactjs-tiptap-editor.git
```

--------------------------------

### Integrate Callout Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Callout/index.md

Import and configure the Callout extension along with its toolbar component for use in your editor setup. Ensure necessary base extensions are included.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { Callout, RichTextCallout } from 'reactjs-tiptap-editor/callout'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  Callout// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextCallout /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Add Ordered List Extension and Toolbar

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/OrderedList/index.md

Import and configure the OrderedList extension and its corresponding RichTextOrderedList component for use in your editor setup. Ensure all necessary base extensions are included.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { OrderedList, RichTextOrderedList } from 'reactjs-tiptap-editor/orderedlist'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  OrderedList// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextOrderedList /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};
```

--------------------------------

### Integrate Export PDF Extension

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/ExportPdf/index.md

Import and configure the ExportPdf extension and its associated RichTextExportPdf component within your Tiptap editor setup. Ensure all necessary base extensions are included.

```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { ExportPdf, RichTextExportPdf } from 'reactjs-tiptap-editor/exportpdf'; // [!code ++]
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/' for commands',
  })

  ...
  // Import Extensions Here
  ExportPdf// [!code ++]
];

const RichTextToolbar = () => {
  return (
    <RichTextExportPdf /> {/* [!code ++] */}
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

```

--------------------------------

### Color Extension Configuration

Source: https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/Color/index.md

Explains how to configure the Color extension with custom options like colors, default color, and shortcut keys.

```APIDOC
## Options

### colors

Type: `string[]`
Default: `undefined`

An array of color options to display in the color picker. If not provided, a default set of colors will be used.

```js
import { COLORS_LIST } from 'reactjs-tiptap-editor';

Color.configure({
  colors: COLORS_LIST,
  // or custom colors
  colors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
});
```

### defaultColor

Type: `string`
Default: `undefined`

The default color to use when the extension is initialized. This color will be used when applying color via keyboard shortcut for the first time.

```js
import { DEFAULT_COLOR } from 'reactjs-tiptap-editor';

Color.configure({
  defaultColor: DEFAULT_COLOR,
  // or
  defaultColor: '#000000',
});
```

### shortcutKeys

Type: `string[]`
Default: `['⇧', 'mod', 'C']`

Keyboard shortcuts for applying the color. Default is `Mod-Shift-C` (Ctrl-Shift-C on Windows/Linux, Cmd-Shift-C on Mac).

```js
Color.configure({
  shortcutKeys: ['⇧', 'mod', 'C'],
});
```
```