@overlap/rte 0.1.4 → 0.1.5

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@overlap/rte",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A lightweight, extensible Rich Text Editor for React",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "type": "module",
   "scripts": {
@@ -49,11 +50,5 @@
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^5.3.3"
   },
-  "directories": {
-    "example": "example"
-  },
-  "bugs": {
-    "url": "https://github.com/overlap-dev/rte/issues"
-  },
   "homepage": "https://github.com/overlap-dev/rte#readme"
 }

package/src/components/Dropdown.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Icon } from './Icons';
+
+interface DropdownProps {
+    icon: string;
+    label: string;
+    options: Array<{ value: string; label: string; icon?: string; color?: string; preview?: string; headingPreview?: string }>;
+    onSelect: (value: string) => void;
+    currentValue?: string;
+    disabled?: boolean;
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({
+    icon,
+    label,
+    options,
+    onSelect,
+    currentValue,
+    disabled,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    const handleSelect = (value: string) => {
+        onSelect(value);
+        setIsOpen(false);
+    };
+
+    const currentOption = options.find(opt => opt.value === currentValue);
+
+    return (
+        <div className="rte-dropdown" ref={dropdownRef}>
+            <button
+                type="button"
+                onClick={() => !disabled && setIsOpen(!isOpen)}
+                disabled={disabled}
+                className={`rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`}
+                title={label}
+                aria-label={label}
+            >
+                <Icon icon={icon} width={18} height={18} />
+                {currentOption && (
+                    <span className="rte-dropdown-value">{currentOption.label}</span>
+                )}
+            </button>
+            {isOpen && (
+                <div className="rte-dropdown-menu">
+                    {options.map((option) => (
+                        <button
+                            key={option.value}
+                            type="button"
+                            className={`rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`}
+                            onClick={() => handleSelect(option.value)}
+                        >
+                            {option.color && (
+                                <span 
+                                    className={`rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`}
+                                    style={{ backgroundColor: option.color }}
+                                />
+                            )}
+                            {option.preview && !option.headingPreview && (
+                                <span 
+                                    className="rte-dropdown-fontsize-preview"
+                                    style={{ fontSize: `${option.preview}px` }}
+                                >
+                                    Aa
+                                </span>
+                            )}
+                            {option.headingPreview && (
+                                <span 
+                                    className={`rte-dropdown-heading-preview ${option.headingPreview}`}
+                                >
+                                    {option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase()}
+                                </span>
+                            )}
+                            {option.icon && <Icon icon={option.icon} width={16} height={16} />}
+                            <span style={{ flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }}>
+                                {option.label}
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+

package/src/components/Editor.css

@@ -0,0 +1,2 @@
+@import '../styles.css';
+