V2 (#7)

* update readme * update package version * fix: remove should re render tx from example * feat(ext): reset marks * fix(style): blockquote color * chore(types): add FormatAction * fix(type): use /react instead of /core * feat(comp): new toolbar section * feat(section): customizeable toolbar * chore: minimal tiptap tsx
Aslam97 · Aug 18, 2024 · ce4a4a1 · ce4a4a1
1 parent 65252c0
commit ce4a4a1
Show file tree

Hide file tree

Showing 22 changed files with 923 additions and 661 deletions.
diff --git a/README.md b/README.md
@@ -1,22 +1,31 @@
-<a href="https://shadcn-minimal-tiptap.vercel.app" target="_blank">
-  <img src="https://i.postimg.cc/7P03FZkh/Screenshot-2024-08-11-at-22-15-02.png" border="0" alt="Minimal Tiptap Editor" />
-</a>
+![Minimal Tiptap Editor](https://i.postimg.cc/fbq7dbPj/Screenshot-2024-08-18-at-19-56-56.png)
 
-# Minimal Tiptap Editor
+## Overview
 
-This is a Minimal Tiptap Editor Component built for [Shadcn](https://ui.shadcn.com). It provides a simple and clean editor for users to write and format text.
+The Minimal Tiptap Editor is a lightweight, customizable rich text editor component built for [Shadcn](https://ui.shadcn.com). It provides an intuitive interface for text formatting and editing.
 
-<!-- > **Note:** If you are worry about future updates. You dont have to. This project will not be receiving any more updates after the last release, v1.0.1. Over the past week, the component got several updates and bug fixes as I've been using it in production. As of now, there are no remaining bugs or features to address, so I've decided to release it. If you encounter any issues or have feature requests, feel free to open an issue. -->
+## Table of Contents
+
+1. [Installation](#installation)
+2. [Dependencies](#dependencies)
+3. [Usage](#usage)
+4. [Props](#props)
+5. [Toolbar Customization](#toolbar-customization)
+6. [Key Behaviors](#key-behaviors)
+7. [Other Projects](#other-projects)
+8. [License](#license)
 
 ## Installation
 
-Before you can use the Minimal Tiptap Editor Component, you need to install the following packages:
+Install the required packages:
 
 ```bash
 npm install @tiptap/core @tiptap/extension-heading @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-link @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-typography @tiptap/extension-code-block-lowlight @tiptap/extension-color @tiptap/extension-text-style lowlight
 ```
 
-The Minimal Tiptap Editor Component depends on the following components from Shadcn:
+## Dependencies
+
+This component relies on the following Shadcn components:
 
 - [Button](https://ui.shadcn.com/docs/components/button)
 - [Dropdown Menu](https://ui.shadcn.com/docs/components/dropdown-menu)
@@ -30,22 +39,13 @@ The Minimal Tiptap Editor Component depends on the following components from Sha
 - [Dialog](https://ui.shadcn.com/docs/components/dialog)
 - [Toggle Group](https://ui.shadcn.com/docs/components/toggle-group)
 
-Next, copy the `minimal-tiptap` directory and paste into your project. The code is yours to use and modify.
-
-## Props
-
-The Minimal Tiptap Editor Component accepts all the props from the Tiptap Editor Component. The following are additional props:
-
-- `value` is the initial value of the editor.
-- `onChange` is a function that receives the value of the editor.
-- `editorContentClassName` is a string to add a class to the `EditorContent` component.
-- `output` is the format of the output value. It can be `'html'`, `'json'`, or `'text'`. Default is `'html'`.
-- `placeholder` is a string to display as a placeholder in the editor.
-- `editorClassName` is a string to add a class to the `useEditor` hooks. which is the editor itself.
-- `throttleDelay` is a number to delay the throttle of the editor. Default is `1000`.
+Ensure these components are installed in your Shadcn project.
 
 ## Usage
 
+1. Copy the `minimal-tiptap` directory into your project.
+2. Import and use the component in your React application:
+
 ```tsx
 import { useState } from 'react'
 import { MinimalTiptapEditor } from './minimal-tiptap'
@@ -66,18 +66,107 @@ export const App = () => {
       immediatelyRender={true}
       editable={true}
       injectCSS={true}
-      shouldRerenderOnTransaction={false}
       editorClassName="focus:outline-none"
     />
   )
 }
 ```
 
+## Props
+
+| Prop                     | Type                       | Default | Description                                 |
+| ------------------------ | -------------------------- | ------- | ------------------------------------------- |
+| `value`                  | string                     | -       | Initial editor content                      |
+| `onChange`               | function                   | -       | Callback function for content changes       |
+| `editorContentClassName` | string                     | -       | CSS class for the EditorContent component   |
+| `output`                 | 'html' \| 'json' \| 'text' | 'html'  | Output format of the editor content         |
+| `placeholder`            | string                     | -       | Placeholder text for the editor             |
+| `editorClassName`        | string                     | -       | CSS class for the editor instance           |
+| `throttleDelay`          | number                     | 1000    | Delay for throttling editor updates (in ms) |
+
+Plus all props from the Tiptap Editor Component.
+
+## Toolbar Customization
+
+The Toolbar component offers extensive customization options, allowing you to control which editing options are available, their order, and how they are displayed. This customization is primarily achieved through the `activeActions` and `mainActionCount` props in various sections.
+
+### Ordering and Display of Actions
+
+- **Order of Actions**: The order of items in the `activeActions` array directly determines the order in which they appear in the toolbar.
+- **Inclusion of Actions**: Only the items specified in `activeActions` will be shown.
+- **Main Actions vs Dropdown**: The `mainActionCount` prop determines how many actions are displayed as primary buttons versus being placed in a dropdown menu.
+
+### Customizable Sections
+
+#### SectionOne: Heading Levels
+
+```typescript
+<SectionOne editor={editor} activeLevels={[1, 2, 3, 4, 5, 6]} />
+```
+
+Customization Options:
+
+- `activeLevels`: Array of numbers representing heading levels to include (1-6).
+- Example: `[3, 1, 2]` shows options for H3, H1, and H2 in that order.
+
+#### SectionTwo: Text Formatting
+
+```typescript
+<SectionTwo
+  editor={editor}
+  activeActions={['bold', 'italic', 'strikethrough', 'code', 'clearFormatting']}
+  mainActionCount={2}
+/>
+```
+
+Customization Options:
+
+- `activeActions`: Array of text formatting options to include.
+- `mainActionCount`: Number of actions to display as primary buttons.
+
+#### SectionFour: List Formatting
+
+```typescript
+<SectionFour editor={editor} activeActions={['orderedList', 'bulletList']} mainActionCount={0} />
+```
+
+Customization Options:
+
+- `activeActions`: Array of list formatting options to include.
+- `mainActionCount`: Number of actions to display as primary buttons.
+
+#### SectionFive: Block Formatting
+
+```typescript
+<SectionFive editor={editor} activeActions={['codeBlock', 'blockquote', 'horizontalRule']} mainActionCount={0} />
+```
+
+Customization Options:
+
+- `activeActions`: Array of block formatting options to include.
+- `mainActionCount`: Number of actions to display as primary buttons.
+
+### General Behavior
+
+- The order in `activeActions` determines the display order in the toolbar.
+- Only items in `activeActions` are shown, allowing for both inclusion/exclusion and ordering.
+- `mainActionCount` determines button vs dropdown display:
+  - If 0, all actions are in the dropdown.
+  - If 1, the first action is a button, the rest are in the dropdown.
+  - If >= number of `activeActions`, all actions are buttons.
+
+By adjusting these props, you can create a toolbar tailored to your specific editing needs, showing only the tools you want, in the order you prefer, and with the display style that suits your interface best.
+
+## Key Behaviors
+
+- Pressing `Enter` removes active states for 'bold', 'italic', 'strike', 'underline', and 'code'.
+- Set `shouldRerenderOnTransaction` to `true` (default) to maintain active states.
+
 ## Other Projects
 
 - [React Fancy Switch](https://github.com/Aslam97/react-fancy-switch)
 - [React Confirm Dialog](https://github.com/Aslam97/react-confirm-dialog)
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "shadcn-tiptap",
+  "name": "shadcn-minimal-tiptap",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -22,33 +22,33 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tiptap/core": "^2.5.9",
-    "@tiptap/extension-code-block-lowlight": "^2.5.9",
-    "@tiptap/extension-color": "^2.5.9",
-    "@tiptap/extension-heading": "^2.5.9",
-    "@tiptap/extension-horizontal-rule": "^2.5.9",
-    "@tiptap/extension-image": "^2.5.9",
-    "@tiptap/extension-link": "^2.5.9",
-    "@tiptap/extension-placeholder": "^2.5.9",
-    "@tiptap/extension-text-style": "^2.5.9",
-    "@tiptap/extension-typography": "^2.5.9",
-    "@tiptap/pm": "^2.5.9",
-    "@tiptap/react": "^2.5.9",
-    "@tiptap/starter-kit": "^2.5.9",
+    "@tiptap/core": "^2.6.4",
+    "@tiptap/extension-code-block-lowlight": "^2.6.4",
+    "@tiptap/extension-color": "^2.6.4",
+    "@tiptap/extension-heading": "^2.6.4",
+    "@tiptap/extension-horizontal-rule": "^2.6.4",
+    "@tiptap/extension-image": "^2.6.4",
+    "@tiptap/extension-link": "^2.6.4",
+    "@tiptap/extension-placeholder": "^2.6.4",
+    "@tiptap/extension-text-style": "^2.6.4",
+    "@tiptap/extension-typography": "^2.6.4",
+    "@tiptap/pm": "^2.6.4",
+    "@tiptap/react": "^2.6.4",
+    "@tiptap/starter-kit": "^2.6.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lowlight": "^3.1.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
-    "tailwind-merge": "^2.5.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.14",
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.16.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -61,8 +61,8 @@
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "vite": "^5.4.1"
   }
 }