@overlap/rte 0.1.1 → 0.1.2

package/src/plugins/blockFormat.tsx

@@ -0,0 +1,194 @@
+import { Dropdown } from "../components/Dropdown";
+import { ButtonProps, EditorAPI, Plugin } from "../types";
+
+const defaultHeadings = ["h1", "h2", "h3"];
+
+const headingLabels: Record<string, string> = {
+    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"])
+ */
+export function createBlockFormatPlugin(
+    headings: string[] = defaultHeadings
+): Plugin {
+    const options = [
+        { value: "p", label: "Normal", headingPreview: "p" },
+        ...headings.map((h) => ({
+            value: h,
+            label: headingLabels[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: ButtonProps & {
+                onSelect?: (value: string) => void;
+                editorAPI?: EditorAPI;
+                currentValue?: string;
+            }
+        ) => {
+            // 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 as HTMLElement);
+
+                    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 (
+                <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: EditorAPI) => {
+            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 as HTMLElement);
+
+            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: EditorAPI, value?: string) => {
+            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 as HTMLElement);
+
+                    if (element?.closest("blockquote")) {
+                        editor.executeCommand("formatBlock", "<p>");
+                    } else {
+                        editor.executeCommand("formatBlock", "<blockquote>");
+                    }
+                }
+            } else {
+                editor.executeCommand("formatBlock", `<${value}>`);
+            }
+        },
+        isActive: (editor: EditorAPI) => {
+            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 as HTMLElement);
+
+            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,
+    };
+}

package/src/plugins/headings.tsx

@@ -1,23 +1,24 @@
-import React from 'react';
-import { Plugin, EditorAPI, ButtonProps } from '../types';
-import { Dropdown } from '../components/Dropdown';
-import { getCurrentHeading } from '../utils/stateReflection';
+import { Dropdown } from "../components/Dropdown";
+import { ButtonProps, EditorAPI, Plugin } from "../types";
+import { getCurrentHeading } from "../utils/stateReflection";
 
-const defaultHeadings = ['h1', 'h2', 'h3'];
+const defaultHeadings = ["h1", "h2", "h3"];
 
 const headingLabels: Record<string, string> = {
-    h1: 'Überschrift 1',
-    h2: 'Überschrift 2',
-    h3: 'Überschrift 3',
-    h4: 'Überschrift 4',
-    h5: 'Überschrift 5',
-    h6: 'Überschrift 6',
+    h1: "Überschrift 1",
+    h2: "Überschrift 2",
+    h3: "Überschrift 3",
+    h4: "Überschrift 4",
+    h5: "Überschrift 5",
+    h6: "Überschrift 6",
 };
 
-export function createHeadingsPlugin(headings: string[] = defaultHeadings): Plugin {
+export function createHeadingsPlugin(
+    headings: string[] = defaultHeadings
+): Plugin {
     const options = [
-        { value: 'p', label: 'Normal', headingPreview: 'p' },
-        ...headings.map(h => ({
+        { value: "p", label: "Normal", headingPreview: "p" },
+        ...headings.map((h) => ({
             value: h,
             label: headingLabels[h] || h.toUpperCase(),
             headingPreview: h,
@@ -25,12 +26,22 @@ export function createHeadingsPlugin(headings: string[] = defaultHeadings): Plug
     ];
 
     return {
-        name: 'headings',
-        type: 'block',
-        renderButton: (props: ButtonProps & { onSelect?: (value: string) => void; editorAPI?: EditorAPI; currentValue?: string }) => {
+        name: "headings",
+        type: "block",
+        renderButton: (
+            props: ButtonProps & {
+                onSelect?: (value: string) => void;
+                editorAPI?: EditorAPI;
+                currentValue?: string;
+            }
+        ) => {
             // Aktuelles Heading aus State Reflection
-            const currentValue = props.currentValue || (props.editorAPI ? getCurrentHeading(props.editorAPI, headings) : undefined);
-            
+            const currentValue =
+                props.currentValue ||
+                (props.editorAPI
+                    ? getCurrentHeading(props.editorAPI, headings)
+                    : undefined);
+
             return (
                 <Dropdown
                     icon="mdi:format-header-1"
@@ -52,25 +63,25 @@ export function createHeadingsPlugin(headings: string[] = defaultHeadings): Plug
             return getCurrentHeading(editor, headings);
         },
         execute: (editor: EditorAPI, value?: string) => {
-            const tag = value || 'p';
-            editor.executeCommand('formatBlock', `<${tag}>`);
+            const tag = value || "p";
+            editor.executeCommand("formatBlock", `<${tag}>`);
         },
         isActive: (editor: EditorAPI) => {
             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 as HTMLElement;
-            
+            const element =
+                container.nodeType === Node.TEXT_NODE
+                    ? container.parentElement
+                    : (container as HTMLElement);
+
             if (!element) return false;
-            
+
             const tagName = element.tagName.toLowerCase();
             return headings.includes(tagName);
         },
         canExecute: () => true,
     };
 }
-

package/src/plugins/index.tsx

@@ -0,0 +1,161 @@
+import { IconWrapper } from "../components/IconWrapper";
+import { ButtonProps, EditorAPI, Plugin } from "../types";
+import { createCommandPlugin, createInlinePlugin } from "./base";
+import { createBlockFormatPlugin } from "./blockFormat";
+import { clearFormattingPlugin } from "./clearFormatting";
+
+const defaultHeadings = ["h1", "h2", "h3"];
+
+/**
+ * Standard-Plugins
+ */
+export const boldPlugin: Plugin = createInlinePlugin(
+    "bold",
+    "bold",
+    "mdi:format-bold",
+    "Fett"
+);
+
+export const italicPlugin: Plugin = createInlinePlugin(
+    "italic",
+    "italic",
+    "mdi:format-italic",
+    "Kursiv"
+);
+
+export const underlinePlugin: Plugin = createInlinePlugin(
+    "underline",
+    "underline",
+    "mdi:format-underline",
+    "Unterstrichen"
+);
+
+export const undoPlugin: Plugin = createCommandPlugin(
+    "undo",
+    "undo",
+    "mdi:undo",
+    "Rückgängig"
+);
+
+export const redoPlugin: Plugin = createCommandPlugin(
+    "redo",
+    "redo",
+    "mdi:redo",
+    "Wiederholen"
+);
+
+/**
+ * Indent List Item Plugin (Tab für Unterliste)
+ */
+const indentListItemPlugin: Plugin = {
+    name: "indentListItem",
+    type: "command",
+    renderButton: (props: ButtonProps) => (
+        <button
+            type="button"
+            onClick={props.onClick}
+            disabled={props.disabled}
+            className="rte-toolbar-button"
+            title="Einrücken (Unterliste)"
+            aria-label="Einrücken (Unterliste)"
+        >
+            <IconWrapper
+                icon="mdi:format-indent-increase"
+                width={18}
+                height={18}
+            />
+        </button>
+    ),
+    execute: (editor: EditorAPI) => {
+        editor.indentListItem();
+    },
+    canExecute: (editor: EditorAPI) => {
+        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 as HTMLElement).closest("li");
+
+        return listItem !== null;
+    },
+};
+
+/**
+ * Outdent List Item Plugin (Shift+Tab)
+ */
+const outdentListItemPlugin: Plugin = {
+    name: "outdentListItem",
+    type: "command",
+    renderButton: (props: ButtonProps) => (
+        <button
+            type="button"
+            onClick={props.onClick}
+            disabled={props.disabled}
+            className="rte-toolbar-button"
+            title="Ausrücken"
+            aria-label="Ausrücken"
+        >
+            <IconWrapper
+                icon="mdi:format-indent-decrease"
+                width={18}
+                height={18}
+            />
+        </button>
+    ),
+    execute: (editor: EditorAPI) => {
+        editor.outdentListItem();
+    },
+    canExecute: (editor: EditorAPI) => {
+        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 as HTMLElement).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";
+    },
+};
+
+// Export plugins for direct use
+export { indentListItemPlugin, outdentListItemPlugin };
+
+/**
+ * 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);
+
+export const defaultPlugins: Plugin[] = [
+    undoPlugin,
+    redoPlugin,
+    boldPlugin,
+    italicPlugin,
+    underlinePlugin,
+    defaultBlockFormatPlugin,
+    clearFormattingPlugin,
+    _indentPlugin,
+    _outdentPlugin,
+];

package/src/plugins/listIndent.tsx

@@ -0,0 +1,90 @@
+import { IconWrapper } from "../components/IconWrapper";
+import { ButtonProps, EditorAPI, Plugin } from "../types";
+
+/**
+ * Indent List Item Plugin (Tab für Unterliste)
+ */
+export const indentListItemPlugin: Plugin = {
+    name: "indentListItem",
+    type: "command",
+    renderButton: (props: ButtonProps) => (
+        <button
+            type="button"
+            onClick={props.onClick}
+            disabled={props.disabled}
+            className="rte-toolbar-button"
+            title="Einrücken (Unterliste)"
+            aria-label="Einrücken (Unterliste)"
+        >
+            <IconWrapper
+                icon="mdi:format-indent-increase"
+                width={18}
+                height={18}
+            />
+        </button>
+    ),
+    execute: (editor: EditorAPI) => {
+        editor.indentListItem();
+    },
+    canExecute: (editor: EditorAPI) => {
+        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 as HTMLElement).closest("li");
+
+        return listItem !== null;
+    },
+};
+
+/**
+ * Outdent List Item Plugin (Shift+Tab)
+ */
+export const outdentListItemPlugin: Plugin = {
+    name: "outdentListItem",
+    type: "command",
+    renderButton: (props: ButtonProps) => (
+        <button
+            type="button"
+            onClick={props.onClick}
+            disabled={props.disabled}
+            className="rte-toolbar-button"
+            title="Ausrücken"
+            aria-label="Ausrücken"
+        >
+            <IconWrapper
+                icon="mdi:format-indent-decrease"
+                width={18}
+                height={18}
+            />
+        </button>
+    ),
+    execute: (editor: EditorAPI) => {
+        editor.outdentListItem();
+    },
+    canExecute: (editor: EditorAPI) => {
+        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 as HTMLElement).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";
+    },
+};