@overlap/rte 0.1.0

package/src/utils/clearFormatting.ts

@@ -0,0 +1,244 @@
+/**
+ * Entfernt alle Formatierungen aus der aktuellen Selection
+ */
+export function clearFormatting(selection: Selection): void {
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+  
+  // Wenn Selection leer ist, nichts zu tun
+  if (range.collapsed) return;
+
+  try {
+    // Verwende document.execCommand für Standard-Formatierungen
+    document.execCommand('removeFormat', false);
+    document.execCommand('unlink', false);
+    
+    // Entferne alle inline styles und Formatierungen manuell
+    const walker = document.createTreeWalker(
+      range.commonAncestorContainer,
+      NodeFilter.SHOW_ELEMENT,
+      null
+    );
+    
+    const elements: HTMLElement[] = [];
+    let node: Node | null = walker.currentNode as Node;
+    
+    while (node) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        if (range.intersectsNode(el)) {
+          const tagName = el.tagName.toLowerCase();
+          
+          // Entferne Inline-Formatierungen (strong, em, u, span, a, etc.)
+          if (['strong', 'b', 'em', 'i', 'u', 'span', 'a', 'font'].includes(tagName)) {
+            // Ersetze durch Text-Node
+            const text = el.textContent || '';
+            const textNode = document.createTextNode(text);
+            el.parentNode?.replaceChild(textNode, el);
+          }
+          
+          // Entferne alle Styles
+          if (el.style.length > 0) {
+            el.removeAttribute('style');
+          }
+          
+          // Konvertiere Headings zu Paragraphs
+          if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) {
+            const p = document.createElement('p');
+            while (el.firstChild) {
+              p.appendChild(el.firstChild);
+            }
+            el.parentNode?.replaceChild(p, el);
+          }
+        }
+      }
+      node = walker.nextNode();
+    }
+    
+    // Normalisiere: Entferne leere Formatierungs-Tags
+    const normalizeWalker = document.createTreeWalker(
+      range.commonAncestorContainer,
+      NodeFilter.SHOW_ELEMENT,
+      null
+    );
+    
+    node = normalizeWalker.currentNode as Node;
+    while (node) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        const tagName = el.tagName.toLowerCase();
+        
+        if (['strong', 'b', 'em', 'i', 'u', 'span'].includes(tagName) && !el.textContent?.trim()) {
+          el.parentNode?.removeChild(el);
+        }
+      }
+      node = normalizeWalker.nextNode();
+    }
+    
+  } catch (error) {
+    console.error('Error clearing formatting:', error);
+    // Fallback: Einfache Methode
+    document.execCommand('removeFormat', false);
+    document.execCommand('unlink', false);
+  }
+}
+
+/**
+ * Entfernt nur Textfarbe
+ */
+export function clearTextColor(selection: Selection): void {
+  if (!selection || selection.rangeCount === 0) return;
+  
+  const range = selection.getRangeAt(0);
+  if (range.collapsed) return;
+  
+  // Finde alle Elemente mit color style
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_ELEMENT,
+    null
+  );
+  
+  const elements: HTMLElement[] = [];
+  let node: Node | null = walker.currentNode as Node;
+  
+  while (node) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (range.intersectsNode(el) && el.style.color) {
+        elements.push(el);
+      }
+    }
+    node = walker.nextNode();
+  }
+  
+  elements.forEach(el => {
+    el.style.color = '';
+    if (!el.style.length) {
+      el.removeAttribute('style');
+    }
+  });
+}
+
+/**
+ * Entfernt nur Hintergrundfarbe
+ */
+export function clearBackgroundColor(selection: Selection): void {
+  if (!selection || selection.rangeCount === 0) return;
+  
+  const range = selection.getRangeAt(0);
+  if (range.collapsed) return;
+  
+  // Finde alle Elemente mit backgroundColor style
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_ELEMENT,
+    null
+  );
+  
+  const elements: HTMLElement[] = [];
+  let node: Node | null = walker.currentNode as Node;
+  
+  while (node) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (range.intersectsNode(el) && el.style.backgroundColor) {
+        elements.push(el);
+      }
+    }
+    node = walker.nextNode();
+  }
+  
+  elements.forEach(el => {
+    el.style.backgroundColor = '';
+    if (!el.style.length) {
+      el.removeAttribute('style');
+    }
+  });
+}
+
+/**
+ * Entfernt nur Font-Size
+ */
+export function clearFontSize(selection: Selection): void {
+  if (!selection || selection.rangeCount === 0) return;
+  
+  const range = selection.getRangeAt(0);
+  if (range.collapsed) return;
+  
+  // Finde alle Elemente mit fontSize style
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_ELEMENT,
+    null
+  );
+  
+  const elements: HTMLElement[] = [];
+  let node: Node | null = walker.currentNode as Node;
+  
+  while (node) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (range.intersectsNode(el) && el.style.fontSize) {
+        elements.push(el);
+      }
+    }
+    node = walker.nextNode();
+  }
+  
+  elements.forEach(el => {
+    el.style.fontSize = '';
+    if (!el.style.length) {
+      el.removeAttribute('style');
+    }
+  });
+}
+
+/**
+ * Entfernt Links (behält Text)
+ */
+export function clearLinks(selection: Selection): void {
+  if (!selection || selection.rangeCount === 0) return;
+  
+  const range = selection.getRangeAt(0);
+  
+  // Finde alle Links in der Selection
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: (node: Node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          const el = node as HTMLElement;
+          if (el.tagName.toLowerCase() === 'a' && range.intersectsNode(el)) {
+            return NodeFilter.FILTER_ACCEPT;
+          }
+        }
+        return NodeFilter.FILTER_SKIP;
+      }
+    }
+  );
+  
+  const links: HTMLAnchorElement[] = [];
+  let node: Node | null = walker.currentNode as Node;
+  
+  while (node) {
+    if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName.toLowerCase() === 'a') {
+      links.push(node as HTMLAnchorElement);
+    }
+    node = walker.nextNode();
+  }
+  
+  // Entferne Links (behält Text)
+  links.forEach(link => {
+    const parent = link.parentNode;
+    if (parent) {
+      while (link.firstChild) {
+        parent.insertBefore(link.firstChild, link);
+      }
+      parent.removeChild(link);
+    }
+  });
+}
+

package/src/utils/content.ts

@@ -0,0 +1,290 @@
+import React from "react";
+import { EditorContent, EditorNode } from "../types";
+
+export function domToContent(element: HTMLElement): EditorContent {
+    const blocks: EditorNode[] = [];
+
+    function processNode(node: Node): EditorNode | null {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent;
+            if (text === null || text === undefined) return null;
+            return { type: "text", text };
+        }
+
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node as HTMLElement;
+            const tagName = el.tagName.toLowerCase();
+
+            if (tagName === "img") {
+                const attributes: Record<string, string> = {};
+                const src = el.getAttribute("src");
+                const alt = el.getAttribute("alt");
+                if (src) attributes.src = src;
+                if (alt) attributes.alt = alt;
+                return {
+                    type: "image",
+                    attributes:
+                        Object.keys(attributes).length > 0
+                            ? attributes
+                            : undefined,
+                };
+            }
+
+            if (
+                [
+                    "p",
+                    "div",
+                    "h1",
+                    "h2",
+                    "h3",
+                    "h4",
+                    "h5",
+                    "h6",
+                    "blockquote",
+                    "ul",
+                    "ol",
+                    "li",
+                ].includes(tagName)
+            ) {
+                const children: EditorNode[] = [];
+                Array.from(el.childNodes).forEach((child) => {
+                    const processed = processNode(child);
+                    if (processed) children.push(processed);
+                });
+
+                const attributes: Record<string, string> = {};
+                if (tagName === "a") {
+                    const href = el.getAttribute("href");
+                    if (href) attributes.href = href;
+                }
+
+                return {
+                    type: tagName,
+                    children: children.length > 0 ? children : [],
+                    attributes:
+                        Object.keys(attributes).length > 0
+                            ? attributes
+                            : undefined,
+                };
+            }
+
+            if (
+                ["strong", "b", "em", "i", "u", "a", "span"].includes(tagName)
+            ) {
+                const children: EditorNode[] = [];
+                Array.from(el.childNodes).forEach((child) => {
+                    const processed = processNode(child);
+                    if (processed) children.push(processed);
+                });
+
+                const attributes: Record<string, string> = {};
+
+                Array.from(el.attributes).forEach((attr) => {
+                    attributes[attr.name] = attr.value;
+                });
+
+                if (tagName === "a") {
+                    const href = el.getAttribute("href");
+                    if (href) attributes.href = href;
+                    return {
+                        type: "link",
+                        children: children.length > 0 ? children : undefined,
+                        attributes:
+                            Object.keys(attributes).length > 0
+                                ? attributes
+                                : undefined,
+                    };
+                }
+
+                if (tagName === "span") {
+                    const style = el.getAttribute("style");
+                    if (style) {
+                        const styleObj: Record<string, string> = {};
+                        style.split(";").forEach((rule) => {
+                            const [key, value] = rule
+                                .split(":")
+                                .map((s) => s.trim());
+                            if (key && value) {
+                                if (key === "font-size") {
+                                    attributes.fontSize = value;
+                                } else if (key === "color") {
+                                    attributes.color = value;
+                                } else if (key === "background-color") {
+                                    attributes.backgroundColor = value;
+                                }
+                            }
+                        });
+                    }
+                }
+
+                return {
+                    type:
+                        tagName === "strong" || tagName === "b"
+                            ? "bold"
+                            : tagName === "em" || tagName === "i"
+                            ? "italic"
+                            : tagName === "u"
+                            ? "underline"
+                            : tagName,
+                    children: children.length > 0 ? children : undefined,
+                    attributes:
+                        Object.keys(attributes).length > 0
+                            ? attributes
+                            : undefined,
+                };
+            }
+
+            const children: EditorNode[] = [];
+            Array.from(el.childNodes).forEach((child) => {
+                const processed = processNode(child);
+                if (processed) children.push(processed);
+            });
+
+            if (children.length > 0) {
+                return {
+                    type: tagName,
+                    children,
+                };
+            }
+        }
+
+        return null;
+    }
+
+    Array.from(element.childNodes).forEach((node) => {
+        const processed = processNode(node);
+        if (processed) {
+            if (processed.type === "text") {
+                blocks.push({ type: "p", children: [processed] });
+            } else {
+                blocks.push(processed);
+            }
+        }
+    });
+
+    if (blocks.length === 0) {
+        blocks.push({ type: "p", children: [] });
+    }
+
+    return { blocks };
+}
+
+export function contentToDOM(
+    content: EditorContent,
+    container: HTMLElement,
+    customLinkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        [key: string]: any;
+    }>,
+    customHeadingRenderer?: (
+        level: string,
+        children: React.ReactNode
+    ) => React.ReactElement
+): void {
+    container.innerHTML = "";
+
+    function createNode(node: EditorNode): Node {
+        if (node.type === "text" && node.text !== undefined) {
+            return document.createTextNode(node.text);
+        }
+
+        if (node.type === "image") {
+            const img = document.createElement("img");
+            if (node.attributes) {
+                if (node.attributes.src)
+                    img.setAttribute("src", node.attributes.src);
+                if (node.attributes.alt)
+                    img.setAttribute("alt", node.attributes.alt);
+                if (node.attributes.uploading === "true") {
+                    img.setAttribute("data-uploading", "true");
+                }
+            }
+            img.style.maxWidth = "100%";
+            img.style.height = "auto";
+            img.style.display = "block";
+            img.style.margin = "16px 0";
+            return img;
+        }
+
+        const tagMap: Record<string, string> = {
+            bold: "strong",
+            italic: "em",
+            underline: "u",
+            link: "a",
+        };
+
+        let tagName = tagMap[node.type] || node.type;
+
+        if (node.type === "link" && customLinkComponent) {
+            tagName = "a";
+            if (node.attributes) {
+                node.attributes["data-custom-link"] = "true";
+            }
+        }
+
+        const element = document.createElement(tagName);
+
+        if (node.attributes) {
+            Object.entries(node.attributes).forEach(([key, value]) => {
+                if (
+                    key === "fontSize" ||
+                    key === "color" ||
+                    key === "backgroundColor"
+                ) {
+                    const currentStyle = element.getAttribute("style") || "";
+                    if (key === "fontSize") {
+                        element.setAttribute(
+                            "style",
+                            `${currentStyle}font-size: ${value};`.trim()
+                        );
+                    } else if (key === "color") {
+                        element.setAttribute(
+                            "style",
+                            `${currentStyle}color: ${value};`.trim()
+                        );
+                    } else if (key === "backgroundColor") {
+                        element.setAttribute(
+                            "style",
+                            `${currentStyle}background-color: ${value};`.trim()
+                        );
+                    }
+                } else {
+                    element.setAttribute(key, value);
+                }
+            });
+        }
+
+        if (node.children) {
+            node.children.forEach((child) => {
+                const childNode = createNode(child);
+                element.appendChild(childNode);
+            });
+        }
+
+        return element;
+    }
+
+    content.blocks.forEach((block) => {
+        const blockNode = createNode(block);
+        container.appendChild(blockNode);
+    });
+}
+
+export function createEmptyContent(): EditorContent {
+    return {
+        blocks: [{ type: "p", children: [] }],
+    };
+}
+
+export function htmlToContent(htmlString: string): EditorContent {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString.trim();
+    return domToContent(tempDiv);
+}
+
+export function contentToHTML(content: EditorContent): string {
+    const tempDiv = document.createElement("div");
+    contentToDOM(content, tempDiv);
+    return tempDiv.innerHTML;
+}

package/src/utils/history.ts

@@ -0,0 +1,59 @@
+import { EditorContent } from '../types';
+
+export class HistoryManager {
+  private history: EditorContent[] = [];
+  private currentIndex: number = -1;
+  private maxHistorySize: number = 50;
+
+  push(content: EditorContent): void {
+    // Entferne alle Einträge nach currentIndex (wenn wir zurückgegangen sind)
+    this.history = this.history.slice(0, this.currentIndex + 1);
+    
+    // Füge neuen Eintrag hinzu
+    this.history.push(JSON.parse(JSON.stringify(content))); // Deep clone
+    this.currentIndex++;
+    
+    // Begrenze die Historie
+    if (this.history.length > this.maxHistorySize) {
+      this.history.shift();
+      this.currentIndex--;
+    }
+  }
+
+  undo(): EditorContent | null {
+    if (this.canUndo()) {
+      this.currentIndex--;
+      return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
+    }
+    return null;
+  }
+
+  redo(): EditorContent | null {
+    if (this.canRedo()) {
+      this.currentIndex++;
+      return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
+    }
+    return null;
+  }
+
+  canUndo(): boolean {
+    return this.currentIndex > 0;
+  }
+
+  canRedo(): boolean {
+    return this.currentIndex < this.history.length - 1;
+  }
+
+  getCurrent(): EditorContent | null {
+    if (this.currentIndex >= 0 && this.currentIndex < this.history.length) {
+      return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
+    }
+    return null;
+  }
+
+  reset(): void {
+    this.history = [];
+    this.currentIndex = -1;
+  }
+}
+