@overlap/rte 0.1.0

package/src/utils/listIndent.ts

@@ -0,0 +1,171 @@
+/**
+ * Erhöht den Einrückungs-Level eines List-Items (Tab)
+ */
+export function indentListItem(selection: Selection): boolean {
+  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;
+
+  const list = listItem.parentElement;
+  if (!list || (list.tagName !== 'UL' && list.tagName !== 'OL')) return false;
+
+  // Prüfe ob bereits verschachtelt (max depth check)
+  let depth = 0;
+  let current: HTMLElement | null = listItem;
+  while (current) {
+    const parent: HTMLElement | null = current.parentElement;
+    if (parent && (parent.tagName === 'UL' || parent.tagName === 'OL')) {
+      depth++;
+      current = parent.closest('li');
+    } else {
+      break;
+    }
+  }
+
+  // Max depth: 6 (wie in HTML Standard)
+  if (depth >= 6) return false;
+
+  // Finde vorheriges List-Item
+  const previousItem = listItem.previousElementSibling as HTMLElement | null;
+  
+  if (previousItem && previousItem.tagName === 'LI') {
+    // Erstelle verschachtelte Liste im vorherigen Item
+    let nestedList = previousItem.querySelector('ul, ol');
+    
+    if (!nestedList) {
+      // Erstelle neue verschachtelte Liste
+      nestedList = document.createElement(list.tagName.toLowerCase() as 'ul' | 'ol');
+      previousItem.appendChild(nestedList);
+    }
+    
+    // Verschiebe aktuelles Item in verschachtelte Liste
+    nestedList.appendChild(listItem);
+    
+    // Cursor setzen
+    const textNode = listItem.firstChild;
+    if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+      range.setStart(textNode, 0);
+      range.collapse(true);
+    } else if (listItem.firstChild) {
+      range.setStart(listItem.firstChild, 0);
+      range.collapse(true);
+    } else {
+      const newText = document.createTextNode('');
+      listItem.appendChild(newText);
+      range.setStart(newText, 0);
+      range.collapse(true);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+    
+    return true;
+  } else {
+    // Kein vorheriges Item - erstelle neue verschachtelte Liste im aktuellen Item
+    const nestedList = document.createElement(list.tagName.toLowerCase() as 'ul' | 'ol');
+    
+    // Verschiebe alle nachfolgenden Items in die verschachtelte Liste
+    let nextSibling = listItem.nextElementSibling;
+    while (nextSibling && nextSibling.tagName === 'LI') {
+      const toMove = nextSibling;
+      nextSibling = nextSibling.nextElementSibling;
+      nestedList.appendChild(toMove);
+    }
+    
+    if (nestedList.children.length > 0) {
+      listItem.appendChild(nestedList);
+    } else {
+      // Wenn keine nachfolgenden Items, erstelle leeres Sub-Item
+      const subItem = document.createElement('li');
+      nestedList.appendChild(subItem);
+      listItem.appendChild(nestedList);
+      
+      // Cursor ins Sub-Item setzen
+      const newText = document.createTextNode('');
+      subItem.appendChild(newText);
+      range.setStart(newText, 0);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    
+    return true;
+  }
+}
+
+/**
+ * Reduziert den Einrückungs-Level eines List-Items (Shift+Tab)
+ */
+export function outdentListItem(selection: Selection): boolean {
+  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;
+
+  const list = listItem.parentElement;
+  if (!list || (list.tagName !== 'UL' && list.tagName !== 'OL')) return false;
+
+  // Prüfe ob in verschachtelter Liste
+  const parentListItem = list.parentElement;
+  if (!parentListItem || parentListItem.tagName !== 'LI') {
+    // Bereits auf oberstem Level
+    return false;
+  }
+
+  const parentList = parentListItem.parentElement;
+  if (!parentList || (parentList.tagName !== 'UL' && parentList.tagName !== 'OL')) {
+    return false;
+  }
+
+  // Verschiebe Item auf oberes Level
+  // Finde Position nach dem Parent-Item
+  const insertAfter = parentListItem;
+  
+  // Verschiebe Item und alle nachfolgenden Items aus der verschachtelten Liste
+  const itemsToMove: HTMLElement[] = [listItem];
+  let nextSibling = listItem.nextElementSibling;
+  while (nextSibling && nextSibling.tagName === 'LI') {
+    itemsToMove.push(nextSibling as HTMLElement);
+    nextSibling = nextSibling.nextElementSibling;
+  }
+
+  // Füge Items nach dem Parent-Item ein
+  itemsToMove.forEach(item => {
+    parentList.insertBefore(item, insertAfter.nextSibling);
+  });
+
+  // Entferne leere verschachtelte Liste
+  if (list.children.length === 0) {
+    list.remove();
+  }
+
+  // Cursor setzen
+  const textNode = listItem.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    range.setStart(textNode, 0);
+    range.collapse(true);
+  } else if (listItem.firstChild) {
+    range.setStart(listItem.firstChild, 0);
+    range.collapse(true);
+  } else {
+    const newText = document.createTextNode('');
+    listItem.appendChild(newText);
+    range.setStart(newText, 0);
+    range.collapse(true);
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+
+  return true;
+}
+

package/src/utils/stateReflection.ts

@@ -0,0 +1,175 @@
+import { EditorAPI } from '../types';
+
+/**
+ * Liest die aktuelle Font-Size aus dem DOM an der Cursor-Position
+ */
+export function getCurrentFontSize(editor: EditorAPI): string | undefined {
+  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;
+
+  // Suche nach dem nächsten Element mit fontSize
+  let current: HTMLElement | null = element;
+  while (current && current !== document.body) {
+    const fontSize = window.getComputedStyle(current).fontSize;
+    if (fontSize && fontSize !== 'inherit' && fontSize !== 'initial') {
+      // Konvertiere "16px" zu "16"
+      const size = parseInt(fontSize, 10);
+      if (!isNaN(size)) {
+        return size.toString();
+      }
+    }
+    current = current.parentElement;
+  }
+
+  return undefined;
+}
+
+/**
+ * Liest die aktuelle Textfarbe aus dem DOM an der Cursor-Position
+ */
+export function getCurrentTextColor(editor: EditorAPI): string | undefined {
+  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;
+
+  // Suche nach dem nächsten Element mit color
+  let current: HTMLElement | null = element;
+  while (current && current !== document.body) {
+    // Prüfe zuerst inline style (hat Priorität)
+    const inlineColor = current.style.color;
+    if (inlineColor && inlineColor.trim()) {
+      // Wenn bereits Hex, direkt zurückgeben
+      if (inlineColor.startsWith('#')) {
+        return inlineColor;
+      }
+      // Wenn RGB/RGBA, konvertieren
+      const rgbMatch = inlineColor.match(/\d+/g);
+      if (rgbMatch && rgbMatch.length >= 3) {
+        const hex = '#' + rgbMatch.slice(0, 3).map(x => {
+          const hex = parseInt(x, 10).toString(16);
+          return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+        return hex;
+      }
+    }
+    
+    // Dann computed style
+    const color = window.getComputedStyle(current).color;
+    if (color && color !== 'inherit' && color !== 'initial' && color !== 'rgb(0, 0, 0)' && color !== 'rgba(0, 0, 0, 0)') {
+      // Konvertiere RGB zu Hex
+      const rgb = color.match(/\d+/g);
+      if (rgb && rgb.length >= 3) {
+        const hex = '#' + rgb.slice(0, 3).map(x => {
+          const hex = parseInt(x, 10).toString(16);
+          return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+        return hex;
+      }
+    }
+    current = current.parentElement;
+  }
+
+  return undefined;
+}
+
+/**
+ * Liest die aktuelle Hintergrundfarbe aus dem DOM an der Cursor-Position
+ */
+export function getCurrentBackgroundColor(editor: EditorAPI): string | undefined {
+  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;
+
+  // Suche nach dem nächsten Element mit backgroundColor
+  let current: HTMLElement | null = element;
+  while (current && current !== document.body) {
+    // Prüfe zuerst inline style (hat Priorität)
+    const inlineBgColor = current.style.backgroundColor;
+    if (inlineBgColor && inlineBgColor.trim()) {
+      // Wenn bereits Hex, direkt zurückgeben
+      if (inlineBgColor.startsWith('#')) {
+        return inlineBgColor;
+      }
+      // Wenn RGB/RGBA, konvertieren
+      const rgbMatch = inlineBgColor.match(/\d+/g);
+      if (rgbMatch && rgbMatch.length >= 3) {
+        const hex = '#' + rgbMatch.slice(0, 3).map(x => {
+          const hex = parseInt(x, 10).toString(16);
+          return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+        return hex;
+      }
+    }
+    
+    // Dann computed style
+    const bgColor = window.getComputedStyle(current).backgroundColor;
+    if (bgColor && bgColor !== 'inherit' && bgColor !== 'initial' && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+      // Konvertiere RGB zu Hex
+      const rgb = bgColor.match(/\d+/g);
+      if (rgb && rgb.length >= 3) {
+        const hex = '#' + rgb.slice(0, 3).map(x => {
+          const hex = parseInt(x, 10).toString(16);
+          return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+        return hex;
+      }
+    }
+    current = current.parentElement;
+  }
+
+  return undefined;
+}
+
+/**
+ * Liest das aktuelle Heading-Level aus dem DOM an der Cursor-Position
+ */
+export function getCurrentHeading(editor: EditorAPI, availableHeadings: string[]): string | undefined {
+  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;
+
+  // Suche nach dem nächsten Block-Element
+  let current: HTMLElement | null = element;
+  while (current && current !== document.body) {
+    const tagName = current.tagName.toLowerCase();
+    if (availableHeadings.includes(tagName)) {
+      return tagName;
+    }
+    if (tagName === 'p') {
+      return 'p';
+    }
+    current = current.parentElement;
+  }
+
+  return undefined;
+}
+