@overlap/rte 0.1.2 → 0.1.4

package/src/plugins/headings.tsx

@@ -1,87 +0,0 @@
-import { Dropdown } from "../components/Dropdown";
-import { ButtonProps, EditorAPI, Plugin } from "../types";
-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

@@ -1,189 +0,0 @@
-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.tsx

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

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