@overlap/rte 0.1.1 → 0.1.2

package/dist/index.js

@@ -5,50 +5,78 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
-const BoldIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }));
-const ItalicIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }));
-const UnderlineIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }));
-const UndoIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }));
-const RedoIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }));
-const ClearFormattingIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M6 5v.18L8.82 8h2.4L7.73 4.36C7.26 3.85 6.61 3.5 6 3.5c-1.11 0-2 .89-2 2 0 .61.35 1.26.86 1.73L6 5zm14.27 2.5L18.73 9H21v1h-4.27L15 8.27l1.23-1.23c.5-.5 1.15-.73 1.77-.73 1.11 0 2 .89 2 2 0 .62-.23 1.27-.73 1.77L18.27 13H21v1h-5.27l-2-2H9.73l-2 2H3v-1h4.27l2-2H7v-1h2.73l2-2H12v-1h-2.27l2-2h4.54zM5 15h14v2H5v-2z" }) }));
-const LinkIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }));
-const QuoteIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }));
-const BulletListIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }));
-const NumberedListIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 11.9V11H2zm6-5v2h14V6H8zm0 14h14v-2H8v2zm0-6h14v-2H8v2z" }) }));
-const TextColorIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.64L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.22-5.61l2.03-5.79h.12l2.03 5.79H9.71z" }) }));
-const BackgroundColorIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z" }) }));
-const HeadingIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M5 4v3h5.5v12h3V7H19V4H5z" }) }));
-const FontSizeIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v8h3v-8h3V10H3z" }) }));
-const ImageIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }));
-const CloseIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
-const LoadingIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" }) }));
-const UploadIcon = ({ width = 18, height = 18, className }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" }) }));
+const BoldIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }));
+const ItalicIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }));
+const UnderlineIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }));
+const UndoIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }));
+const RedoIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }));
+const ClearFormattingIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsxs("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: [jsxRuntime.jsx("path", { d: "M6 5v3h5v11h2V8h5V5H6z" }), jsxRuntime.jsx("path", { d: "M20.5 3.5L3.5 20.5l1.06 1.06L21.56 4.56z" })] }));
+const LinkIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }));
+const QuoteIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }));
+const BulletListIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }));
+const NumberedListIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 11.9V11H2zm6-5v2h14V6H8zm0 14h14v-2H8v2zm0-6h14v-2H8v2z" }) }));
+const TextColorIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.64L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.22-5.61l2.03-5.79h.12l2.03 5.79H9.71z" }) }));
+const BackgroundColorIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsxs("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: [jsxRuntime.jsx("path", { d: "M17.5 4.5c-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5-1.45 0-2.99.22-4.28.79C1.49 5.62 1 6.33 1 7.14v11.28c0 1.3 1.22 2.26 2.48 1.94.98-.25 2.02-.36 3.02-.36 1.56 0 3.22.26 4.56.92.6.3 1.28.3 1.88 0 1.34-.67 3-.92 4.56-.92 1 0 2.04.11 3.02.36C22.78 20.68 24 19.72 24 18.42V7.14c0-.81-.49-1.52-1.22-1.85-1.29-.57-2.83-.79-4.28-.79zM21 17.23c0 .63-.58 1.09-1.2.98-.75-.14-1.53-.2-2.3-.2-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5.77 0 1.55.06 2.3.2.62.11 1.2.58 1.2 1.18v9.35z" }), jsxRuntime.jsx("rect", { x: "4", y: "13", width: "16", height: "6", fill: "currentColor", opacity: "0.5" })] }));
+const HeadingIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M5 4v3h5.5v12h3V7H19V4H5z" }) }));
+const FontSizeIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v8h3v-8h3V10H3z" }) }));
+const ImageIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }));
+const CloseIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
+const LoadingIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" }) }));
+const UploadIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" }) }));
+const IndentIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M3 21h18v-2H3v2zM3 8l4 4-4 4V8zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }) }));
+const OutdentIcon = ({ width = 18, height = 18, className, }) => (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 24 24", fill: "currentColor", className: className, children: jsxRuntime.jsx("path", { d: "M3 21h18v-2H3v2zM11 8l4 4-4 4V8zM3 3v2h18V3H3zm0 4h10v2H3V7zm0 4h10v2H3v-2zm0 4h18v2H3v-2z" }) }));
 const iconMap = {
-    'mdi:format-bold': BoldIcon,
-    'mdi:format-italic': ItalicIcon,
-    'mdi:format-underline': UnderlineIcon,
-    'mdi:undo': UndoIcon,
-    'mdi:redo': RedoIcon,
-    'mdi:format-clear': ClearFormattingIcon,
-    'mdi:link': LinkIcon,
-    'mdi:format-quote-close': QuoteIcon,
-    'mdi:format-list-bulleted': BulletListIcon,
-    'mdi:format-list-numbered': NumberedListIcon,
-    'mdi:format-color-text': TextColorIcon,
-    'mdi:format-color-fill': BackgroundColorIcon,
-    'mdi:format-header-1': HeadingIcon,
-    'mdi:format-size': FontSizeIcon,
-    'mdi:image': ImageIcon,
-    'mdi:close': CloseIcon,
-    'mdi:loading': LoadingIcon,
-    'mdi:upload': UploadIcon,
+    "mdi:format-bold": BoldIcon,
+    "mdi:format-italic": ItalicIcon,
+    "mdi:format-underline": UnderlineIcon,
+    "mdi:undo": UndoIcon,
+    "mdi:redo": RedoIcon,
+    "mdi:format-clear": ClearFormattingIcon,
+    "mdi:link": LinkIcon,
+    "mdi:format-quote-close": QuoteIcon,
+    "mdi:format-list-bulleted": BulletListIcon,
+    "mdi:format-list-numbered": NumberedListIcon,
+    "mdi:format-color-text": TextColorIcon,
+    "mdi:format-color-fill": BackgroundColorIcon,
+    "mdi:format-header-1": HeadingIcon,
+    "mdi:format-size": FontSizeIcon,
+    "mdi:image": ImageIcon,
+    "mdi:close": CloseIcon,
+    "mdi:loading": LoadingIcon,
+    "mdi:upload": UploadIcon,
+    "mdi:format-indent-increase": IndentIcon,
+    "mdi:format-indent-decrease": OutdentIcon,
 };
 const Icon = ({ icon, width = 18, height = 18, className }) => {
     const IconComponent = iconMap[icon];
     if (!IconComponent) {
-        return jsxRuntime.jsx("span", { style: { width, height, display: 'inline-block' } });
+        return jsxRuntime.jsx("span", { style: { width, height, display: "inline-block" } });
     }
-    return jsxRuntime.jsx(IconComponent, { width: width, height: height, className: className });
+    return (jsxRuntime.jsx(IconComponent, { width: width, height: height, className: className }));
+};
+
+const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dropdownRef = React.useRef(null);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleSelect = (value) => {
+        onSelect(value);
+        setIsOpen(false);
+    };
+    const currentOption = options.find(opt => opt.value === currentValue);
+    return (jsxRuntime.jsxs("div", { className: "rte-dropdown", ref: dropdownRef, children: [jsxRuntime.jsxs("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, children: [jsxRuntime.jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsxRuntime.jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsxRuntime.jsx("div", { className: "rte-dropdown-menu", children: options.map((option) => (jsxRuntime.jsxs("button", { type: "button", className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsxRuntime.jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsxRuntime.jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsxRuntime.jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsxRuntime.jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsxRuntime.jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))) }))] }));
 };
 
 const IconWrapper = ({ icon, width = 18, height = 18, className }) => {
@@ -111,6 +139,168 @@ function createCommandPlugin(name, command, icon, label) {
     };
 }
 
+const defaultHeadings$2 = ["h1", "h2", "h3"];
+const headingLabels$1 = {
+    h1: "Überschrift 1",
+    h2: "Überschrift 2",
+    h3: "Überschrift 3",
+    h4: "Überschrift 4",
+    h5: "Überschrift 5",
+    h6: "Überschrift 6",
+};
+/**
+ * Erstellt ein Block-Format-Plugin, das Headlines, Listen und Quote in einem Dropdown kombiniert
+ * @param headings - Array von Heading-Levels (z.B. ["h1", "h2", "h3"])
+ */
+function createBlockFormatPlugin(headings = defaultHeadings$2) {
+    const options = [
+        { value: "p", label: "Normal", headingPreview: "p" },
+        ...headings.map((h) => ({
+            value: h,
+            label: headingLabels$1[h] || h.toUpperCase(),
+            headingPreview: h,
+        })),
+        {
+            value: "ul",
+            label: "Aufzählungsliste",
+            icon: "mdi:format-list-bulleted",
+        },
+        {
+            value: "ol",
+            label: "Nummerierte Liste",
+            icon: "mdi:format-list-numbered",
+        },
+        { value: "blockquote", label: "Zitat", icon: "mdi:format-quote-close" },
+    ];
+    return {
+        name: "blockFormat",
+        type: "block",
+        renderButton: (props) => {
+            // Aktuelles Format bestimmen
+            const editor = props.editorAPI;
+            let currentValue = props.currentValue;
+            if (!currentValue && editor) {
+                const selection = editor.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    const container = range.commonAncestorContainer;
+                    const element = container.nodeType === Node.TEXT_NODE
+                        ? container.parentElement
+                        : container;
+                    if (element) {
+                        const tagName = element.tagName.toLowerCase();
+                        // Prüfe auf Heading
+                        if (headings.includes(tagName)) {
+                            currentValue = tagName;
+                        }
+                        // Prüfe auf Blockquote
+                        else if (element.closest("blockquote")) {
+                            currentValue = "blockquote";
+                        }
+                        // Prüfe auf Liste
+                        else if (element.closest("ul")) {
+                            currentValue = "ul";
+                        }
+                        else if (element.closest("ol")) {
+                            currentValue = "ol";
+                        }
+                        // Prüfe auf Paragraph
+                        else if (tagName === "p") {
+                            currentValue = "p";
+                        }
+                    }
+                }
+            }
+            return (jsxRuntime.jsx(Dropdown, { icon: "mdi:format-header-1", label: "Format", options: options, onSelect: (value) => {
+                    // onSelect wird von der Toolbar übergeben und ruft handlePluginClick auf
+                    if (props.onSelect) {
+                        props.onSelect(value);
+                    }
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: (editor) => {
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return undefined;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            if (!element)
+                return undefined;
+            const tagName = element.tagName.toLowerCase();
+            // Prüfe auf Heading
+            if (headings.includes(tagName)) {
+                return tagName;
+            }
+            // Prüfe auf Blockquote
+            if (element.closest("blockquote")) {
+                return "blockquote";
+            }
+            // Prüfe auf Liste
+            if (element.closest("ul")) {
+                return "ul";
+            }
+            if (element.closest("ol")) {
+                return "ol";
+            }
+            // Prüfe auf Paragraph
+            if (tagName === "p") {
+                return "p";
+            }
+            return undefined;
+        },
+        execute: (editor, value) => {
+            if (!value)
+                return;
+            if (value === "ul") {
+                editor.executeCommand("insertUnorderedList");
+            }
+            else if (value === "ol") {
+                editor.executeCommand("insertOrderedList");
+            }
+            else if (value === "blockquote") {
+                const selection = editor.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    const container = range.commonAncestorContainer;
+                    const element = container.nodeType === Node.TEXT_NODE
+                        ? container.parentElement
+                        : container;
+                    if (element?.closest("blockquote")) {
+                        editor.executeCommand("formatBlock", "<p>");
+                    }
+                    else {
+                        editor.executeCommand("formatBlock", "<blockquote>");
+                    }
+                }
+            }
+            else {
+                editor.executeCommand("formatBlock", `<${value}>`);
+            }
+        },
+        isActive: (editor) => {
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return false;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            if (!element)
+                return false;
+            const tagName = element.tagName.toLowerCase();
+            return (headings.includes(tagName) ||
+                element.closest("blockquote") !== null ||
+                element.closest("ul") !== null ||
+                element.closest("ol") !== null);
+        },
+        canExecute: () => true,
+    };
+}
+
 /**
  * Clear Formatting Plugin - Entfernt alle Formatierungen
  */
@@ -127,50 +317,89 @@ const clearFormattingPlugin = {
     },
 };
 
+const defaultHeadings$1 = ["h1", "h2", "h3"];
 /**
  * Standard-Plugins
  */
-const boldPlugin = createInlinePlugin('bold', 'bold', 'mdi:format-bold', 'Fett');
-const italicPlugin = createInlinePlugin('italic', 'italic', 'mdi:format-italic', 'Kursiv');
-const underlinePlugin = createInlinePlugin('underline', 'underline', 'mdi:format-underline', 'Unterstrichen');
-const undoPlugin = createCommandPlugin('undo', 'undo', 'mdi:undo', 'Rückgängig');
-const redoPlugin = createCommandPlugin('redo', 'redo', 'mdi:redo', 'Wiederholen');
+const boldPlugin = createInlinePlugin("bold", "bold", "mdi:format-bold", "Fett");
+const italicPlugin = createInlinePlugin("italic", "italic", "mdi:format-italic", "Kursiv");
+const underlinePlugin = createInlinePlugin("underline", "underline", "mdi:format-underline", "Unterstrichen");
+const undoPlugin = createCommandPlugin("undo", "undo", "mdi:undo", "Rückgängig");
+const redoPlugin = createCommandPlugin("redo", "redo", "mdi:redo", "Wiederholen");
+/**
+ * Indent List Item Plugin (Tab für Unterliste)
+ */
+const indentListItemPlugin = {
+    name: "indentListItem",
+    type: "command",
+    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: "rte-toolbar-button", title: "Einr\u00FCcken (Unterliste)", "aria-label": "Einr\u00FCcken (Unterliste)", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-indent-increase", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        editor.indentListItem();
+    },
+    canExecute: (editor) => {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const listItem = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement?.closest("li")
+            : container.closest("li");
+        return listItem !== null;
+    },
+};
+/**
+ * Outdent List Item Plugin (Shift+Tab)
+ */
+const outdentListItemPlugin = {
+    name: "outdentListItem",
+    type: "command",
+    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: "rte-toolbar-button", title: "Ausr\u00FCcken", "aria-label": "Ausr\u00FCcken", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-indent-decrease", width: 18, height: 18 }) })),
+    execute: (editor) => {
+        editor.outdentListItem();
+    },
+    canExecute: (editor) => {
+        const selection = editor.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return false;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const listItem = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement?.closest("li")
+            : container.closest("li");
+        if (!listItem)
+            return false;
+        // Prüfe ob in verschachtelter Liste
+        const list = listItem.parentElement;
+        if (!list || (list.tagName !== "UL" && list.tagName !== "OL"))
+            return false;
+        const parentListItem = list.parentElement;
+        return parentListItem !== null && parentListItem.tagName === "LI";
+    },
+};
 /**
  * Standard-Plugin-Liste
+ * Die Plugins werden hier direkt referenziert, um sicherzustellen, dass sie in defaultPlugins enthalten sind
  */
+const _indentPlugin = indentListItemPlugin;
+const _outdentPlugin = outdentListItemPlugin;
+/**
+ * Standard Block-Format Plugin (Headlines, Listen, Quote in einem Dropdown)
+ * Verwendet standardmäßig h1, h2, h3, kann aber über Editor-Props angepasst werden
+ */
+const defaultBlockFormatPlugin = createBlockFormatPlugin(defaultHeadings$1);
 const defaultPlugins = [
     undoPlugin,
     redoPlugin,
     boldPlugin,
     italicPlugin,
     underlinePlugin,
+    defaultBlockFormatPlugin,
     clearFormattingPlugin,
+    _indentPlugin,
+    _outdentPlugin,
 ];
 
-const Dropdown = ({ icon, label, options, onSelect, currentValue, disabled, }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const dropdownRef = React.useRef(null);
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    const handleSelect = (value) => {
-        onSelect(value);
-        setIsOpen(false);
-    };
-    const currentOption = options.find(opt => opt.value === currentValue);
-    return (jsxRuntime.jsxs("div", { className: "rte-dropdown", ref: dropdownRef, children: [jsxRuntime.jsxs("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, children: [jsxRuntime.jsx(Icon, { icon: icon, width: 18, height: 18 }), currentOption && (jsxRuntime.jsx("span", { className: "rte-dropdown-value", children: currentOption.label }))] }), isOpen && (jsxRuntime.jsx("div", { className: "rte-dropdown-menu", children: options.map((option) => (jsxRuntime.jsxs("button", { type: "button", className: `rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`, onClick: () => handleSelect(option.value), children: [option.color && (jsxRuntime.jsx("span", { className: `rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`, style: { backgroundColor: option.color } })), option.preview && !option.headingPreview && (jsxRuntime.jsx("span", { className: "rte-dropdown-fontsize-preview", style: { fontSize: `${option.preview}px` }, children: "Aa" })), option.headingPreview && (jsxRuntime.jsx("span", { className: `rte-dropdown-heading-preview ${option.headingPreview}`, children: option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase() })), option.icon && jsxRuntime.jsx(Icon, { icon: option.icon, width: 16, height: 16 }), jsxRuntime.jsx("span", { style: { flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }, children: option.label })] }, option.value))) }))] }));
-};
-
 /**
  * Liest die aktuelle Font-Size aus dem DOM an der Cursor-Position
  */
@@ -488,64 +717,6 @@ function createFontSizePlugin(fontSizes = [12, 14, 16, 18, 20, 24]) {
     };
 }
 
-const defaultHeadings = ['h1', 'h2', 'h3'];
-const headingLabels = {
-    h1: 'Überschrift 1',
-    h2: 'Überschrift 2',
-    h3: 'Überschrift 3',
-    h4: 'Überschrift 4',
-    h5: 'Überschrift 5',
-    h6: 'Überschrift 6',
-};
-function createHeadingsPlugin(headings = defaultHeadings) {
-    const options = [
-        { value: 'p', label: 'Normal', headingPreview: 'p' },
-        ...headings.map(h => ({
-            value: h,
-            label: headingLabels[h] || h.toUpperCase(),
-            headingPreview: h,
-        })),
-    ];
-    return {
-        name: 'headings',
-        type: 'block',
-        renderButton: (props) => {
-            // Aktuelles Heading aus State Reflection
-            const currentValue = props.currentValue || (props.editorAPI ? getCurrentHeading(props.editorAPI, headings) : undefined);
-            return (jsxRuntime.jsx(Dropdown, { icon: "mdi:format-header-1", label: "\u00DCberschrift", options: options, onSelect: (value) => {
-                    if (props.onSelect) {
-                        props.onSelect(value);
-                    }
-                    else {
-                        props.onClick();
-                    }
-                }, currentValue: currentValue, disabled: props.disabled }));
-        },
-        getCurrentValue: (editor) => {
-            return getCurrentHeading(editor, headings);
-        },
-        execute: (editor, value) => {
-            const tag = value || 'p';
-            editor.executeCommand('formatBlock', `<${tag}>`);
-        },
-        isActive: (editor) => {
-            const selection = editor.getSelection();
-            if (!selection || selection.rangeCount === 0)
-                return false;
-            const range = selection.getRangeAt(0);
-            const container = range.commonAncestorContainer;
-            const element = container.nodeType === Node.TEXT_NODE
-                ? container.parentElement
-                : container;
-            if (!element)
-                return false;
-            const tagName = element.tagName.toLowerCase();
-            return headings.includes(tagName);
-        },
-        canExecute: () => true,
-    };
-}
-
 /**
  * Image-Plugin mit URL-Eingabe und File-Upload
  */
@@ -1341,8 +1512,16 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             allPlugins.push(createTextColorPlugin(colors));
             allPlugins.push(createBackgroundColorPlugin(colors));
         }
+        // BlockFormat Plugin ist bereits in defaultPlugins enthalten
+        // Wenn custom headings angegeben sind, ersetze das Standard-Plugin
         if (headings && headings.length > 0) {
-            allPlugins.push(createHeadingsPlugin(headings));
+            // Entferne das Standard-BlockFormat-Plugin
+            const blockFormatIndex = allPlugins.findIndex((p) => p.name === "blockFormat");
+            if (blockFormatIndex !== -1) {
+                allPlugins.splice(blockFormatIndex, 1);
+            }
+            // Füge das Plugin mit custom Headlines hinzu
+            allPlugins.push(createBlockFormatPlugin(headings));
         }
         allPlugins.push(createImagePlugin(onImageUpload));
         return allPlugins;
@@ -1356,7 +1535,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
         }
     }, [onChange]);
     const restoreSelection = React.useCallback((editor) => {
-        if (typeof window === 'undefined' || typeof document === 'undefined')
+        if (typeof window === "undefined" || typeof document === "undefined")
             return;
         const range = document.createRange();
         const selection = window.getSelection();
@@ -1549,7 +1728,7 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
         return {
             executeCommand,
             getSelection: () => {
-                if (typeof window === 'undefined')
+                if (typeof window === "undefined")
                     return null;
                 return window.getSelection();
             },
@@ -1741,6 +1920,40 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
                     }, 0);
                 }
             },
+            indentListItem: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    indentListItem(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
+            outdentListItem: () => {
+                const editor = editorRef.current;
+                if (!editor)
+                    return;
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    outdentListItem(selection);
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                }
+            },
         };
     }, [
         notifyChange,
@@ -1781,46 +1994,45 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
         const handleKeyDown = (e) => {
             const isModifierPressed = e.metaKey || e.ctrlKey;
             if (e.key === "Tab" && !isModifierPressed && !e.altKey) {
+                // Immer preventDefault aufrufen (wie Lexical), damit Tab den Fokus nicht aus dem Editor entfernt
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
                 const selection = window.getSelection();
-                const isSelectionInEditor = selection &&
-                    selection.rangeCount > 0 &&
-                    editor.contains(selection.getRangeAt(0).commonAncestorContainer);
-                const isEditorFocused = document.activeElement === editor ||
-                    editor.contains(document.activeElement) ||
-                    isSelectionInEditor;
-                if (!isEditorFocused) {
+                if (!selection || selection.rangeCount === 0) {
+                    // Keine Selection: Tab verhindern, Fokus bleibt im Editor
                     return;
                 }
-                e.preventDefault();
-                e.stopPropagation();
-                if (isSelectionInEditor &&
-                    selection &&
-                    selection.rangeCount > 0) {
-                    const range = selection.getRangeAt(0);
-                    const container = range.commonAncestorContainer;
-                    const listItem = container.nodeType === Node.TEXT_NODE
-                        ? container.parentElement?.closest("li")
-                        : container.closest("li");
-                    if (listItem && editor.contains(listItem)) {
-                        e.stopImmediatePropagation();
-                        const currentContent = domToContent(editor);
-                        historyRef.current.push(currentContent);
-                        if (e.shiftKey) {
-                            outdentListItem(selection);
-                        }
-                        else {
-                            indentListItem(selection);
-                        }
-                        setTimeout(() => {
-                            if (editor) {
-                                const content = domToContent(editor);
-                                notifyChange(content);
-                            }
-                        }, 0);
-                        return;
+                const range = selection.getRangeAt(0);
+                const container = range.commonAncestorContainer;
+                if (!editor.contains(container)) {
+                    // Container nicht im Editor: Tab verhindern
+                    return;
+                }
+                // Prüfe ob wir in einer Liste sind
+                const listItem = container.nodeType === Node.TEXT_NODE
+                    ? container.parentElement?.closest("li")
+                    : container.closest("li");
+                if (listItem && editor.contains(listItem)) {
+                    // In Liste: Indent/Outdent durchführen
+                    const currentContent = domToContent(editor);
+                    historyRef.current.push(currentContent);
+                    if (e.shiftKey) {
+                        outdentListItem(selection);
+                    }
+                    else {
+                        indentListItem(selection);
                     }
+                    setTimeout(() => {
+                        if (editor) {
+                            const content = domToContent(editor);
+                            notifyChange(content);
+                        }
+                    }, 0);
+                    return;
                 }
-                document.execCommand("insertText", false, "\t");
+                // Nicht in Liste: Tab verhindern, aber kein Tab-Zeichen einfügen
+                // Der Fokus bleibt im Editor (durch preventDefault)
             }
             if (isModifierPressed && e.key === "z" && !e.shiftKey) {
                 e.preventDefault();
@@ -1835,10 +2047,10 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
             }
         };
         editor.addEventListener("input", handleInput);
-        editor.addEventListener("keydown", handleKeyDown);
+        editor.addEventListener("keydown", handleKeyDown, true);
         return () => {
             editor.removeEventListener("input", handleInput);
-            editor.removeEventListener("keydown", handleKeyDown);
+            editor.removeEventListener("keydown", handleKeyDown, true);
             if (inputTimeout) {
                 clearTimeout(inputTimeout);
             }
@@ -1914,15 +2126,76 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
     return (jsxRuntime.jsxs("div", { className: `rte-container ${className || ""}`, style: containerStyle, children: [jsxRuntime.jsx(Toolbar, { plugins: plugins, editorAPI: editorAPI, className: toolbarClassName }), jsxRuntime.jsx("div", { ref: editorRef, contentEditable: true, className: `rte-editor ${editorClassName || ""}`, "data-placeholder": placeholder, onPaste: handlePaste, suppressContentEditableWarning: true })] }));
 };
 
+const defaultHeadings = ["h1", "h2", "h3"];
+const headingLabels = {
+    h1: "Überschrift 1",
+    h2: "Überschrift 2",
+    h3: "Überschrift 3",
+    h4: "Überschrift 4",
+    h5: "Überschrift 5",
+    h6: "Überschrift 6",
+};
+function createHeadingsPlugin(headings = defaultHeadings) {
+    const options = [
+        { value: "p", label: "Normal", headingPreview: "p" },
+        ...headings.map((h) => ({
+            value: h,
+            label: headingLabels[h] || h.toUpperCase(),
+            headingPreview: h,
+        })),
+    ];
+    return {
+        name: "headings",
+        type: "block",
+        renderButton: (props) => {
+            // Aktuelles Heading aus State Reflection
+            const currentValue = props.currentValue ||
+                (props.editorAPI
+                    ? getCurrentHeading(props.editorAPI, headings)
+                    : undefined);
+            return (jsxRuntime.jsx(Dropdown, { icon: "mdi:format-header-1", label: "\u00DCberschrift", options: options, onSelect: (value) => {
+                    if (props.onSelect) {
+                        props.onSelect(value);
+                    }
+                    else {
+                        props.onClick();
+                    }
+                }, currentValue: currentValue, disabled: props.disabled }));
+        },
+        getCurrentValue: (editor) => {
+            return getCurrentHeading(editor, headings);
+        },
+        execute: (editor, value) => {
+            const tag = value || "p";
+            editor.executeCommand("formatBlock", `<${tag}>`);
+        },
+        isActive: (editor) => {
+            const selection = editor.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return false;
+            const range = selection.getRangeAt(0);
+            const container = range.commonAncestorContainer;
+            const element = container.nodeType === Node.TEXT_NODE
+                ? container.parentElement
+                : container;
+            if (!element)
+                return false;
+            const tagName = element.tagName.toLowerCase();
+            return headings.includes(tagName);
+        },
+        canExecute: () => true,
+    };
+}
+
 /**
  * Link-Plugin mit verbesserter Funktionalität
  */
 function createLinkPlugin() {
     return {
-        name: 'link',
-        type: 'inline',
-        command: 'createLink',
-        renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Link einf\u00FCgen", "aria-label": "Link einf\u00FCgen", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:link", width: 18, height: 18 }) })),
+        name: "link",
+        type: "inline",
+        command: "createLink",
+        renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Link einf\u00FCgen", "aria-label": "Link einf\u00FCgen", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:link", width: 18, height: 18 }) })),
         execute: (editor) => {
             const selection = editor.getSelection();
             if (!selection || selection.rangeCount === 0)
@@ -1933,7 +2206,7 @@ function createLinkPlugin() {
                 ? container.parentElement
                 : container;
             // Prüfe ob bereits ein Link vorhanden ist
-            const existingLink = element?.closest('a');
+            const existingLink = element?.closest("a");
             if (existingLink) {
                 // Link entfernen
                 const parent = existingLink.parentNode;
@@ -1952,9 +2225,9 @@ function createLinkPlugin() {
             }
             else {
                 // Neuen Link einfügen
-                const url = prompt('URL eingeben:');
+                const url = prompt("URL eingeben:");
                 if (url) {
-                    editor.executeCommand('createLink', url);
+                    editor.executeCommand("createLink", url);
                 }
             }
         },
@@ -1969,7 +2242,7 @@ function createLinkPlugin() {
                 : container;
             if (!element)
                 return false;
-            return element.closest('a') !== null;
+            return element.closest("a") !== null;
         },
         getCurrentValue: (editor) => {
             const selection = editor.getSelection();
@@ -1982,7 +2255,7 @@ function createLinkPlugin() {
                 : container;
             if (!element)
                 return undefined;
-            const link = element.closest('a');
+            const link = element.closest("a");
             return link ? link.href : undefined;
         },
         canExecute: (editor) => {
@@ -1996,10 +2269,10 @@ const linkPlugin = createLinkPlugin();
  * Blockquote-Plugin
  */
 const blockquotePlugin = {
-    name: 'blockquote',
-    type: 'block',
-    command: 'formatBlock',
-    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Zitat", "aria-label": "Zitat", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-quote-close", width: 18, height: 18 }) })),
+    name: "blockquote",
+    type: "block",
+    command: "formatBlock",
+    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Zitat", "aria-label": "Zitat", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-quote-close", width: 18, height: 18 }) })),
     execute: (editor) => {
         const selection = editor.getSelection();
         if (!selection || selection.rangeCount === 0)
@@ -2011,12 +2284,12 @@ const blockquotePlugin = {
             : container;
         if (!element)
             return;
-        const isBlockquote = element.closest('blockquote') !== null;
+        const isBlockquote = element.closest("blockquote") !== null;
         if (isBlockquote) {
-            editor.executeCommand('formatBlock', '<p>');
+            editor.executeCommand("formatBlock", "<p>");
         }
         else {
-            editor.executeCommand('formatBlock', '<blockquote>');
+            editor.executeCommand("formatBlock", "<blockquote>");
         }
     },
     isActive: (editor) => {
@@ -2030,7 +2303,7 @@ const blockquotePlugin = {
             : container;
         if (!element)
             return false;
-        return element.closest('blockquote') !== null;
+        return element.closest("blockquote") !== null;
     },
     canExecute: (editor) => {
         const selection = editor.getSelection();
@@ -2041,17 +2314,17 @@ const blockquotePlugin = {
  * Unordered List Plugin
  */
 const unorderedListPlugin = {
-    name: 'unorderedList',
-    type: 'block',
-    command: 'insertUnorderedList',
-    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Aufz\u00E4hlungsliste", "aria-label": "Aufz\u00E4hlungsliste", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-list-bulleted", width: 18, height: 18 }) })),
+    name: "unorderedList",
+    type: "block",
+    command: "insertUnorderedList",
+    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Aufz\u00E4hlungsliste", "aria-label": "Aufz\u00E4hlungsliste", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-list-bulleted", width: 18, height: 18 }) })),
     execute: (editor) => {
-        editor.executeCommand('insertUnorderedList');
+        editor.executeCommand("insertUnorderedList");
     },
     isActive: (editor) => {
-        if (typeof document === 'undefined')
+        if (typeof document === "undefined")
             return false;
-        return document.queryCommandState('insertUnorderedList');
+        return document.queryCommandState("insertUnorderedList");
     },
     canExecute: (editor) => {
         const selection = editor.getSelection();
@@ -2062,17 +2335,17 @@ const unorderedListPlugin = {
  * Ordered List Plugin
  */
 const orderedListPlugin = {
-    name: 'orderedList',
-    type: 'block',
-    command: 'insertOrderedList',
-    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`, title: "Nummerierte Liste", "aria-label": "Nummerierte Liste", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-list-numbered", width: 18, height: 18 }) })),
+    name: "orderedList",
+    type: "block",
+    command: "insertOrderedList",
+    renderButton: (props) => (jsxRuntime.jsx("button", { type: "button", onClick: props.onClick, disabled: props.disabled, className: `rte-toolbar-button ${props.isActive ? "rte-toolbar-button-active" : ""}`, title: "Nummerierte Liste", "aria-label": "Nummerierte Liste", children: jsxRuntime.jsx(IconWrapper, { icon: "mdi:format-list-numbered", width: 18, height: 18 }) })),
     execute: (editor) => {
-        editor.executeCommand('insertOrderedList');
+        editor.executeCommand("insertOrderedList");
     },
     isActive: (editor) => {
-        if (typeof document === 'undefined')
+        if (typeof document === "undefined")
             return false;
-        return document.queryCommandState('insertOrderedList');
+        return document.queryCommandState("insertOrderedList");
     },
     canExecute: (editor) => {
         const selection = editor.getSelection();
@@ -2090,6 +2363,7 @@ exports.clearFormattingPlugin = clearFormattingPlugin;
 exports.contentToDOM = contentToDOM;
 exports.contentToHTML = contentToHTML;
 exports.createBackgroundColorPlugin = createBackgroundColorPlugin;
+exports.createBlockFormatPlugin = createBlockFormatPlugin;
 exports.createEmptyContent = createEmptyContent;
 exports.createFontSizePlugin = createFontSizePlugin;
 exports.createHeadingsPlugin = createHeadingsPlugin;
@@ -2105,10 +2379,12 @@ exports.getCurrentHeading = getCurrentHeading;
 exports.getCurrentTextColor = getCurrentTextColor;
 exports.htmlToContent = htmlToContent;
 exports.indentListItem = indentListItem;
+exports.indentListItemPlugin = indentListItemPlugin;
 exports.italicPlugin = italicPlugin;
 exports.linkPlugin = linkPlugin;
 exports.orderedListPlugin = orderedListPlugin;
 exports.outdentListItem = outdentListItem;
+exports.outdentListItemPlugin = outdentListItemPlugin;
 exports.redoPlugin = redoPlugin;
 exports.underlinePlugin = underlinePlugin;
 exports.undoPlugin = undoPlugin;