@overlap/rte 0.1.0

package/src/plugins/colors.tsx

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,81 @@
+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,
+    };
+}
+

package/src/plugins/headings.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Plugin, EditorAPI, ButtonProps } from '../types';
+import { Dropdown } from '../components/Dropdown';
+import { getCurrentHeading } from '../utils/stateReflection';
+
+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',
+};
+
+export function createHeadingsPlugin(headings: string[] = defaultHeadings): Plugin {
+    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: 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);
+            
+            return (
+                <Dropdown
+                    icon="mdi:format-header-1"
+                    label="Überschrift"
+                    options={options}
+                    onSelect={(value) => {
+                        if (props.onSelect) {
+                            props.onSelect(value);
+                        } else {
+                            props.onClick();
+                        }
+                    }}
+                    currentValue={currentValue}
+                    disabled={props.disabled}
+                />
+            );
+        },
+        getCurrentValue: (editor: EditorAPI) => {
+            return getCurrentHeading(editor, headings);
+        },
+        execute: (editor: EditorAPI, value?: string) => {
+            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;
+            
+            if (!element) return false;
+            
+            const tagName = element.tagName.toLowerCase();
+            return headings.includes(tagName);
+        },
+        canExecute: () => true,
+    };
+}
+

package/src/plugins/image.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useRef } from 'react';
+import { Plugin, EditorAPI, ButtonProps } from '../types';
+import { IconWrapper } from '../components/IconWrapper';
+
+/**
+ * Image-Plugin mit URL-Eingabe und File-Upload
+ */
+export function createImagePlugin(onImageUpload?: (file: File) => Promise<string>): Plugin {
+  return {
+    name: 'image',
+    type: 'block',
+    renderButton: (props: ButtonProps & { editorAPI?: EditorAPI }) => {
+      const [showModal, setShowModal] = useState(false);
+      const [imageUrl, setImageUrl] = useState('');
+      const [altText, setAltText] = useState('');
+      const [isUploading, setIsUploading] = useState(false);
+      const fileInputRef = useRef<HTMLInputElement>(null);
+
+      const handleInsertImage = () => {
+        if (!props.editorAPI) return;
+        
+        const src = imageUrl.trim();
+        
+        if (!src) {
+          alert('Bitte geben Sie eine Bild-URL ein');
+          return;
+        }
+
+        // Verwende executeCommand, das alles korrekt handhabt
+        // Alt-Text wird später über das Datenmodell gespeichert
+        props.editorAPI.executeCommand('insertImage', src);
+
+        // Modal schließen
+        setShowModal(false);
+        setImageUrl('');
+        setAltText('');
+      };
+
+      const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file || !onImageUpload) return;
+
+        if (!file.type.startsWith('image/')) {
+          alert('Bitte wählen Sie eine Bilddatei aus');
+          return;
+        }
+
+        setIsUploading(true);
+
+        try {
+          const uploadedUrl = await onImageUpload(file);
+          setImageUrl(uploadedUrl);
+        } catch (error) {
+          console.error('Image upload failed:', error);
+          alert('Fehler beim Hochladen des Bildes');
+        } finally {
+          setIsUploading(false);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+        }
+      };
+
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => setShowModal(true)}
+            disabled={props.disabled}
+            className="rte-toolbar-button"
+            title="Bild einfügen"
+            aria-label="Bild einfügen"
+          >
+            <IconWrapper icon="mdi:image" width={18} height={18} />
+          </button>
+
+          {showModal && (
+            <div
+              className="rte-image-modal-overlay"
+              onClick={(e) => {
+                if (e.target === e.currentTarget) {
+                  setShowModal(false);
+                }
+              }}
+            >
+              <div className="rte-image-modal">
+                <div className="rte-image-modal-header">
+                  <h3>Bild einfügen</h3>
+                  <button
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                    className="rte-image-modal-close"
+                    aria-label="Schließen"
+                  >
+                    <IconWrapper icon="mdi:close" width={20} height={20} />
+                  </button>
+                </div>
+
+                <div className="rte-image-modal-content">
+                  {onImageUpload && (
+                    <div className="rte-image-upload-section">
+                      <label className="rte-image-upload-label">
+                        <input
+                          ref={fileInputRef}
+                          type="file"
+                          accept="image/*"
+                          onChange={handleFileSelect}
+                          style={{ display: 'none' }}
+                        />
+                        <div className="rte-image-upload-button">
+                          {isUploading ? (
+                            <>
+                              <IconWrapper icon="mdi:loading" width={24} height={24} className="rte-spin" />
+                              <span>Wird hochgeladen...</span>
+                            </>
+                          ) : (
+                            <>
+                              <IconWrapper icon="mdi:upload" width={24} height={24} />
+                              <span>Datei auswählen</span>
+                            </>
+                          )}
+                        </div>
+                      </label>
+                    </div>
+                  )}
+
+                  <div className="rte-image-url-section">
+                    <label>
+                      Bild-URL
+                      <input
+                        type="url"
+                        value={imageUrl}
+                        onChange={(e) => setImageUrl(e.target.value)}
+                        placeholder="https://example.com/image.jpg"
+                        className="rte-image-url-input"
+                      />
+                    </label>
+                  </div>
+
+                  <div className="rte-image-alt-section">
+                    <label>
+                      Alt-Text (optional)
+                      <input
+                        type="text"
+                        value={altText}
+                        onChange={(e) => setAltText(e.target.value)}
+                        placeholder="Bildbeschreibung"
+                        className="rte-image-alt-input"
+                      />
+                    </label>
+                  </div>
+
+                  {imageUrl && (
+                    <div className="rte-image-preview">
+                      <img src={imageUrl} alt={altText || 'Preview'} />
+                    </div>
+                  )}
+                </div>
+
+                <div className="rte-image-modal-footer">
+                  <button
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                    className="rte-image-modal-cancel"
+                  >
+                    Abbrechen
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleInsertImage}
+                    disabled={!imageUrl.trim() || isUploading}
+                    className="rte-image-modal-insert"
+                  >
+                    Einfügen
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      );
+    },
+    execute: (editor: EditorAPI) => {
+      // Wird über renderButton gehandhabt
+    },
+    canExecute: () => true,
+  };
+}
+

package/src/plugins/index.ts

@@ -0,0 +1,54 @@
+import { Plugin } from '../types';
+import { createInlinePlugin, createCommandPlugin } from './base';
+import { clearFormattingPlugin } from './clearFormatting';
+
+/**
+ * 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'
+);
+
+/**
+ * Standard-Plugin-Liste
+ */
+export const defaultPlugins: Plugin[] = [
+  undoPlugin,
+  redoPlugin,
+  boldPlugin,
+  italicPlugin,
+  underlinePlugin,
+  clearFormattingPlugin,
+];
+