@overlap/rte 0.1.2 → 0.1.4

package/src/components/Toolbar.tsx

@@ -1,137 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { ButtonProps, EditorAPI, Plugin } from "../types";
-
-interface ToolbarProps {
-    plugins: Plugin[];
-    editorAPI: EditorAPI;
-    className?: string;
-}
-
-export const Toolbar: React.FC<ToolbarProps> = ({
-    plugins,
-    editorAPI,
-    className,
-}) => {
-    const [updateTrigger, setUpdateTrigger] = useState(0);
-    const [isClient, setIsClient] = useState(false);
-
-    useEffect(() => {
-        setIsClient(true);
-        
-        const handleSelectionChange = () => {
-            setUpdateTrigger((prev) => prev + 1);
-        };
-
-        const handleMouseUp = () => {
-            setTimeout(handleSelectionChange, 10);
-        };
-
-        const handleKeyUp = () => {
-            setTimeout(handleSelectionChange, 10);
-        };
-
-        if (typeof document !== 'undefined') {
-        document.addEventListener("selectionchange", handleSelectionChange);
-        document.addEventListener("mouseup", handleMouseUp);
-        document.addEventListener("keyup", handleKeyUp);
-        }
-
-        return () => {
-            if (typeof document !== 'undefined') {
-            document.removeEventListener(
-                "selectionchange",
-                handleSelectionChange
-            );
-            document.removeEventListener("mouseup", handleMouseUp);
-            document.removeEventListener("keyup", handleKeyUp);
-            }
-        };
-    }, []);
-
-    const handlePluginClick = (plugin: Plugin, value?: string) => {
-        if (plugin.canExecute?.(editorAPI) !== false) {
-            if (plugin.execute) {
-                plugin.execute(editorAPI, value);
-            } else if (plugin.command && value !== undefined) {
-                editorAPI.executeCommand(plugin.command, value);
-            } else if (plugin.command) {
-                editorAPI.executeCommand(plugin.command);
-            }
-            setTimeout(() => setUpdateTrigger((prev) => prev + 1), 50);
-        }
-    };
-
-    const leftPlugins = plugins.filter((p) => p.name !== "clearFormatting");
-    const clearFormattingPlugin = plugins.find(
-        (p) => p.name === "clearFormatting"
-    );
-
-    return (
-        <div className={`rte-toolbar rte-toolbar-sticky ${className || ""}`}>
-            <div className="rte-toolbar-left">
-                {leftPlugins.map((plugin) => {
-                    if (!plugin.renderButton) return null;
-
-                    const isActive = isClient && plugin.isActive
-                        ? plugin.isActive(editorAPI)
-                        : false;
-                    const canExecute = isClient && plugin.canExecute
-                        ? plugin.canExecute(editorAPI)
-                        : true;
-
-                    const currentValue = isClient && plugin.getCurrentValue
-                        ? plugin.getCurrentValue(editorAPI)
-                        : undefined;
-
-                    const buttonProps: ButtonProps & { [key: string]: any } = {
-                        isActive,
-                        onClick: () => handlePluginClick(plugin),
-                        disabled: !canExecute,
-                        onSelect: (value: string) =>
-                            handlePluginClick(plugin, value),
-                        editorAPI,
-                        currentValue,
-                    };
-
-                    return (
-                        <React.Fragment key={plugin.name}>
-                            {plugin.renderButton(buttonProps)}
-                        </React.Fragment>
-                    );
-                })}
-            </div>
-
-            {clearFormattingPlugin && clearFormattingPlugin.renderButton && (
-                <div className="rte-toolbar-right">
-                    <div className="rte-toolbar-divider" />
-                    {(() => {
-                        const isActive = isClient && clearFormattingPlugin.isActive
-                            ? clearFormattingPlugin.isActive(editorAPI)
-                            : false;
-                        const canExecute = isClient && clearFormattingPlugin.canExecute
-                            ? clearFormattingPlugin.canExecute(editorAPI)
-                            : true;
-
-                        const buttonProps: ButtonProps & {
-                            [key: string]: any;
-                        } = {
-                            isActive,
-                            onClick: () =>
-                                handlePluginClick(clearFormattingPlugin),
-                            disabled: !canExecute,
-                            editorAPI,
-                        };
-
-                        return (
-                            <React.Fragment key={clearFormattingPlugin.name}>
-                                {clearFormattingPlugin.renderButton(
-                                    buttonProps
-                                )}
-                            </React.Fragment>
-                        );
-                    })()}
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/index.ts

@@ -1,3 +0,0 @@
-export { Editor } from './Editor';
-export { Toolbar } from './Toolbar';
-

package/src/index.ts

@@ -1,19 +0,0 @@
-export { Dropdown } from "./components/Dropdown";
-export { Editor } from "./components/Editor";
-export { Toolbar } from "./components/Toolbar";
-export * from "./plugins";
-export * from "./plugins/blockFormat";
-export * from "./plugins/clearFormatting";
-export * from "./plugins/colors";
-export * from "./plugins/fontSize";
-export * from "./plugins/headings";
-export * from "./plugins/image";
-export * from "./plugins/optional";
-export * from "./types";
-export * from "./utils/content";
-export { contentToHTML, htmlToContent } from "./utils/content";
-export { HistoryManager } from "./utils/history";
-export { indentListItem, outdentListItem } from "./utils/listIndent";
-export * from "./utils/stateReflection";
-
-export { Editor as default } from "./components/Editor";

package/src/plugins/base.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import { Plugin, EditorAPI, ButtonProps } from '../types';
-import { IconWrapper } from '../components/IconWrapper';
-
-/**
- * Basis-Plugin für Inline-Formatierungen
- */
-export function createInlinePlugin(
-  name: string,
-  command: string,
-  icon: string,
-  label: string
-): Plugin {
-  return {
-    name,
-    type: 'inline',
-    command,
-    renderButton: (props: ButtonProps) => (
-      <button
-        type="button"
-        onClick={props.onClick}
-        disabled={props.disabled}
-        className={`rte-toolbar-button ${props.isActive ? 'rte-toolbar-button-active' : ''}`}
-        title={label}
-        aria-label={label}
-      >
-        <IconWrapper icon={icon} width={18} height={18} />
-      </button>
-    ),
-    execute: (editor: EditorAPI) => {
-      editor.executeCommand(command);
-    },
-    isActive: (editor: EditorAPI) => {
-      if (typeof window === 'undefined' || typeof document === 'undefined') return false;
-      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;
-      
-      return document.queryCommandState(command);
-    },
-    canExecute: (editor: EditorAPI) => {
-      // Formatierung sollte auch ohne Selection möglich sein
-      // (z.B. wenn Editor leer ist, wird beim Klick eine Selection erstellt)
-      return true;
-    },
-  };
-}
-
-/**
- * Basis-Plugin für Commands
- */
-export function createCommandPlugin(
-  name: string,
-  command: string,
-  icon: string,
-  label: string
-): Plugin {
-  return {
-    name,
-    type: 'command',
-    command,
-    renderButton: (props: ButtonProps) => (
-      <button
-        type="button"
-        onClick={props.onClick}
-        disabled={props.disabled}
-        className="rte-toolbar-button"
-        title={label}
-        aria-label={label}
-      >
-        <IconWrapper icon={icon} width={18} height={18} />
-      </button>
-    ),
-    execute: (editor: EditorAPI) => {
-      editor.executeCommand(command);
-    },
-    canExecute: (editor: EditorAPI) => {
-      if (command === 'undo') return editor.canUndo();
-      if (command === 'redo') return editor.canRedo();
-      return true;
-    },
-  };
-}
-

package/src/plugins/blockFormat.tsx

@@ -1,194 +0,0 @@
-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/clearFormatting.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Plugin, EditorAPI, ButtonProps } from '../types';
-import { IconWrapper } from '../components/IconWrapper';
-
-/**
- * Clear Formatting Plugin - Entfernt alle Formatierungen
- */
-export const clearFormattingPlugin: Plugin = {
-    name: 'clearFormatting',
-    type: 'command',
-    renderButton: (props: ButtonProps) => (
-        <button
-            type="button"
-            onClick={props.onClick}
-            disabled={props.disabled}
-            className="rte-toolbar-button"
-            title="Formatierung entfernen"
-            aria-label="Formatierung entfernen"
-        >
-            <IconWrapper icon="mdi:format-clear" width={18} height={18} />
-        </button>
-    ),
-    execute: (editor: EditorAPI) => {
-        editor.clearFormatting();
-    },
-    canExecute: (editor: EditorAPI) => {
-        const selection = editor.getSelection();
-        return selection !== null && selection.rangeCount > 0 && !selection.isCollapsed;
-    },
-};
-

package/src/plugins/colors.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import { Plugin, EditorAPI, ButtonProps } from '../types';
-import { Dropdown } from '../components/Dropdown';
-import { getCurrentTextColor, getCurrentBackgroundColor } from '../utils/stateReflection';
-
-const defaultColors = [
-    { value: '#000000', label: 'Schwarz', color: '#000000' },
-    { value: '#333333', label: 'Dunkelgrau', color: '#333333' },
-    { value: '#666666', label: 'Grau', color: '#666666' },
-    { value: '#ff0000', label: 'Rot', color: '#ff0000' },
-    { value: '#0000ff', label: 'Blau', color: '#0000ff' },
-    { value: '#00aa00', label: 'Grün', color: '#00aa00' },
-    { value: '#ffaa00', label: 'Orange', color: '#ffaa00' },
-    { value: '#aa00ff', label: 'Lila', color: '#aa00ff' },
-];
-
-export function createTextColorPlugin(colors: string[] = defaultColors.map(c => c.value)): Plugin {
-    // Finde Labels für bekannte Farben
-    const getColorLabel = (color: string): string => {
-        const found = defaultColors.find(c => c.value.toLowerCase() === color.toLowerCase());
-        return found ? found.label : color;
-    };
-    
-    const colorOptions = colors.map(color => ({
-        value: color,
-        label: getColorLabel(color),
-        color,
-    }));
-
-    return {
-        name: 'textColor',
-        type: 'inline',
-        renderButton: (props: ButtonProps & { onSelect?: (value: string) => void; editorAPI?: EditorAPI; currentValue?: string }) => {
-            // Aktuelle Textfarbe aus State Reflection
-            const currentValue = props.currentValue || (props.editorAPI ? getCurrentTextColor(props.editorAPI) : undefined);
-            
-            return (
-                <Dropdown
-                    icon="mdi:format-color-text"
-                    label="Textfarbe"
-                    options={colorOptions.map(opt => ({
-                        value: opt.value,
-                        label: opt.label,
-                        color: opt.color,
-                    }))}
-                    onSelect={(value) => {
-                        if (props.onSelect) {
-                            props.onSelect(value);
-                        } else {
-                            props.onClick();
-                        }
-                    }}
-                    currentValue={currentValue}
-                    disabled={props.disabled}
-                />
-            );
-        },
-        execute: (editor: EditorAPI, value?: string) => {
-            if (value) {
-                editor.executeCommand('foreColor', value);
-            }
-        },
-        canExecute: () => true,
-        getCurrentValue: (editor: EditorAPI) => {
-            return getCurrentTextColor(editor);
-        },
-    };
-}
-
-export function createBackgroundColorPlugin(colors: string[] = defaultColors.map(c => c.value)): Plugin {
-    // Finde Labels für bekannte Farben
-    const getColorLabel = (color: string): string => {
-        const found = defaultColors.find(c => c.value.toLowerCase() === color.toLowerCase());
-        return found ? found.label : color;
-    };
-    
-    const colorOptions = colors.map(color => ({
-        value: color,
-        label: getColorLabel(color),
-        color,
-    }));
-
-    return {
-        name: 'backgroundColor',
-        type: 'inline',
-        renderButton: (props: ButtonProps & { onSelect?: (value: string) => void; editorAPI?: EditorAPI; currentValue?: string }) => {
-            // Aktuelle Hintergrundfarbe aus State Reflection
-            const currentValue = props.currentValue || (props.editorAPI ? getCurrentBackgroundColor(props.editorAPI) : undefined);
-            
-            return (
-                <Dropdown
-                    icon="mdi:format-color-fill"
-                    label="Hintergrundfarbe"
-                    options={colorOptions.map(opt => ({
-                        value: opt.value,
-                        label: opt.label,
-                        color: opt.color,
-                    }))}
-                    onSelect={(value) => {
-                        if (props.onSelect) {
-                            props.onSelect(value);
-                        } else {
-                            props.onClick();
-                        }
-                    }}
-                    currentValue={currentValue}
-                    disabled={props.disabled}
-                />
-            );
-        },
-        execute: (editor: EditorAPI, value?: string) => {
-            if (value) {
-                editor.executeCommand('backColor', value);
-            }
-        },
-        canExecute: () => true,
-        getCurrentValue: (editor: EditorAPI) => {
-            return getCurrentBackgroundColor(editor);
-        },
-    };
-}
-

package/src/plugins/fontSize.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Plugin, EditorAPI, ButtonProps } from '../types';
-import { Dropdown } from '../components/Dropdown';
-import { getCurrentFontSize } from '../utils/stateReflection';
-
-export function createFontSizePlugin(fontSizes: number[] = [12, 14, 16, 18, 20, 24]): Plugin {
-    return {
-        name: 'fontSize',
-        type: 'inline',
-        renderButton: (props: ButtonProps & { fontSizes?: number[]; onSelect?: (value: string) => void; editorAPI?: EditorAPI; currentValue?: string }) => {
-            const sizes = props.fontSizes || fontSizes;
-            const options = sizes.map(size => ({
-                value: size.toString(),
-                label: `${size}px`,
-                preview: size.toString(),
-            }));
-
-            // Aktuelle Font-Size aus State Reflection
-            const currentValue = props.currentValue || (props.editorAPI ? getCurrentFontSize(props.editorAPI) : undefined);
-
-            return (
-                <Dropdown
-                    icon="mdi:format-size"
-                    label="Schriftgröße"
-                    options={options}
-                    onSelect={(value) => {
-                        if (props.onSelect) {
-                            props.onSelect(value);
-                        } else {
-                            props.onClick();
-                        }
-                    }}
-                    currentValue={currentValue}
-                    disabled={props.disabled}
-                />
-            );
-        },
-        getCurrentValue: (editor: EditorAPI) => {
-            return getCurrentFontSize(editor);
-        },
-        execute: (editor: EditorAPI, value?: string) => {
-            if (value) {
-                // Setze inline style für präzise Größe
-                const selection = editor.getSelection();
-                if (selection && selection.rangeCount > 0) {
-                    const range = selection.getRangeAt(0);
-                    let element: HTMLElement | null = null;
-                    
-                    if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
-                        element = range.commonAncestorContainer.parentElement;
-                    } else {
-                        element = range.commonAncestorContainer as HTMLElement;
-                    }
-                    
-                    if (element) {
-                        // Erstelle oder aktualisiere span mit fontSize
-                        const span = document.createElement('span');
-                        span.style.fontSize = `${value}px`;
-                        
-                        try {
-                            range.surroundContents(span);
-                        } catch (e) {
-                            // Falls surroundContents fehlschlägt
-                            const contents = range.extractContents();
-                            span.appendChild(contents);
-                            range.insertNode(span);
-                        }
-                        
-                        // Cursor setzen
-                        range.setStartAfter(span);
-                        range.collapse(true);
-                        selection.removeAllRanges();
-                        selection.addRange(range);
-                    }
-                }
-            }
-        },
-        canExecute: () => true,
-    };
-}
-