Add editor enhancements with undo/redo, media menu, and checklist support (#12)

* feat: add undo/redo buttons and media menu to the editor; enhance sample document with checklist and embed examples

* feat: enhance SlashMenu with custom items, item order, and hiding options

* feat: add customization options for BubbleMenu, SlashMenu, and ColorPicker components

* feat: add new plugins for keyboard shortcuts, checklist, media menu, and history management

* feat: add support for check list items and image blocks in blockToNode conversion

* feat: add support for check list items in nodeToBlock conversion

* feat: add undo and redo functionality to OpenBlockEditor

* feat: enhance bubble menu visibility logic for media nodes

* feat: implement checklist plugin for handling checkbox interactions and keyboard behavior

* feat: add keyboard shortcuts, checklist, and media menu plugins to createPlugins

* feat: enhance drag/drop plugin to support positioning for blocks nested in lists

* feat: re-export history functions and add media menu plugin to core plugins

* feat: add keyboard shortcuts plugin for customizable formatting and block operations

* feat: add media menu plugin for handling image and embed node selections

* feat: implement MediaMenu component for floating media editing toolbar

* feat: update exports in index.ts to include additional properties for menus and color picker

* feat: enhance ColorPicker component with customizable color palettes and labels

* feat: enhance BubbleMenu component with support for custom items, reordering, and hiding default items

* feat: add default slash menu items for image, checklist, and embed options

* feat: add hard break, image, checklist, checklist item, and embed nodes to default schema

* feat: update index.ts to re-export additional types for image and embed nodes

* feat: add check list and check list item node specifications for task tracking

* feat: add embed node specification for external content integration

* feat: add hard break node specification for line breaks within text blocks

* feat: add image node specification for handling images in blocks

* feat: add hard break, image, embed, and check list node specifications to index

* feat: add media menu, image, embed, and checklist styles to editor

* feat: add checklist, image, and embed block styles to editor

* feat: add MediaMenu and ColorPicker components, and their associated types to index

* feat: enhance README with new components and usage examples for SlashMenu, BubbleMenu, and ColorPicker

---------

Co-authored-by: Jeremy Mouton <jeremy.mouton@spendesk.com>

Author: moutonjeremy

docs/react-integration.md

@@ -398,6 +398,116 @@ export default function EditorInner({ initialContent }) {
 }
 ```
 
+## Component Customization
+
+### BubbleMenu Customization
+
+The BubbleMenu supports extensive customization for adding, reordering, or hiding items.
+
+```tsx
+import { BubbleMenu, BubbleMenuItem, BUBBLE_MENU_ITEMS } from '@labbs/openblock-react';
+
+// Create a custom button
+const translateButton: BubbleMenuItem = {
+  id: 'translate',
+  label: 'Translate',
+  icon: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+      <path d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10" />
+    </svg>
+  ),
+  action: async (editor, state) => {
+    const text = editor.pm.state.doc.textBetween(state.from, state.to);
+    // Handle translation...
+  },
+};
+
+// Use with customization props
+<BubbleMenu
+  editor={editor}
+  customItems={[translateButton]}
+  itemOrder={[
+    'bold', 'italic', 'underline',
+    '---',  // Divider
+    'translate',
+    '---',
+    'link', 'color',
+  ]}
+  hideItems={['strikethrough', 'code']}
+/>
+```
+
+**Available default item IDs:**
+- Block type: `blockType`
+- Alignment: `alignLeft`, `alignCenter`, `alignRight`
+- Formatting: `bold`, `italic`, `underline`, `strikethrough`
+- Style: `code`, `link`, `color`
+
+### SlashMenu Customization
+
+The SlashMenu supports similar customization patterns.
+
+```tsx
+import { SlashMenu, SlashMenuItem } from '@labbs/openblock-react';
+
+const customItems: SlashMenuItem[] = [
+  {
+    id: 'emoji',
+    title: 'Emoji',
+    description: 'Insert an emoji',
+    icon: '😀',
+    action: (editor) => {
+      // Show emoji picker...
+    },
+  },
+];
+
+<SlashMenu
+  editor={editor}
+  customItems={customItems}
+  hideItems={['table', 'video']}
+  itemOrder={['paragraph', 'heading', 'bulletList', 'emoji']}
+/>
+```
+
+**Available default item IDs:**
+- Text: `paragraph`, `heading`
+- Lists: `bulletList`, `numberedList`, `checkList`
+- Blocks: `blockquote`, `codeBlock`, `callout`, `divider`
+- Tables: `table`
+- Media: `image`, `video`, `audio`, `file`
+
+### ColorPicker Customization
+
+Customize the color palettes for text and background colors.
+
+```tsx
+import { ColorPicker, ColorOption, DEFAULT_TEXT_COLORS } from '@labbs/openblock-react';
+
+const brandTextColors: ColorOption[] = [
+  { value: '', label: 'Default' },
+  { value: '#0066cc', label: 'Brand Blue' },
+  { value: '#00994d', label: 'Brand Green' },
+  { value: '#cc3300', label: 'Brand Red' },
+];
+
+const brandBackgroundColors: ColorOption[] = [
+  { value: '', label: 'None' },
+  { value: '#e6f2ff', label: 'Blue Highlight' },
+  { value: '#e6ffe6', label: 'Green Highlight' },
+];
+
+<ColorPicker
+  editor={editor}
+  currentTextColor={textColor}
+  currentBackgroundColor={bgColor}
+  textColors={brandTextColors}
+  backgroundColors={brandBackgroundColors}
+  textColorLabel="Text Color"
+  backgroundColorLabel="Highlight"
+/>
+```
+
 ## TypeScript
 
 All components and hooks are fully typed:

examples/basic/src/App.tsx

@@ -1,4 +1,4 @@
-import { useOpenBlock, OpenBlockView, useEditorContent, SlashMenu, BubbleMenu, TableHandles } from '@labbs/openblock-react';
+import { useOpenBlock, OpenBlockView, useEditorContent, SlashMenu, BubbleMenu, TableHandles, MediaMenu } from '@labbs/openblock-react';
 import { sampleDocument } from './data';
 // CSS is now auto-injected by OpenBlockEditor (injectStyles: true by default)
 import './styles.css';
@@ -36,6 +36,13 @@ export default function App() {
               {'</>'}
             </button>
             <span className="separator" />
+            <button onClick={() => editor?.undo()} title="Undo (Cmd+Z)" disabled={!editor}>
+              ↩
+            </button>
+            <button onClick={() => editor?.redo()} title="Redo (Cmd+Shift+Z)" disabled={!editor}>
+              ↪
+            </button>
+            <span className="separator" />
             <button onClick={() => editor && console.log(editor.getDocument())} title="Log document to console" disabled={!editor}>
               Log JSON
             </button>
@@ -49,6 +56,7 @@ export default function App() {
             <SlashMenu editor={editor} />
             <BubbleMenu editor={editor} />
             <TableHandles editor={editor} />
+            <MediaMenu editor={editor} />
           </div>
         </div>