@overlap/rte 0.1.0

package/dist/utils/clearFormatting.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Entfernt alle Formatierungen aus der aktuellen Selection
+ */
+export declare function clearFormatting(selection: Selection): void;
+/**
+ * Entfernt nur Textfarbe
+ */
+export declare function clearTextColor(selection: Selection): void;
+/**
+ * Entfernt nur Hintergrundfarbe
+ */
+export declare function clearBackgroundColor(selection: Selection): void;
+/**
+ * Entfernt nur Font-Size
+ */
+export declare function clearFontSize(selection: Selection): void;
+/**
+ * Entfernt Links (behält Text)
+ */
+export declare function clearLinks(selection: Selection): void;
+//# sourceMappingURL=clearFormatting.d.ts.map

package/dist/utils/clearFormatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearFormatting.d.ts","sourceRoot":"","sources":["../../src/utils/clearFormatting.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAiF1D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAgCzD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAgC/D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAgCxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CA0CrD"}

package/dist/utils/content.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { EditorContent } from "../types";
+export declare function domToContent(element: HTMLElement): EditorContent;
+export declare 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;
+export declare function createEmptyContent(): EditorContent;
+export declare function htmlToContent(htmlString: string): EditorContent;
+export declare function contentToHTML(content: EditorContent): string;
+//# sourceMappingURL=content.d.ts.map

package/dist/utils/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../src/utils/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAc,MAAM,UAAU,CAAC;AAErD,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,aAAa,CAsKhE;AAED,wBAAgB,YAAY,CACxB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,WAAW,EACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAC,EACF,qBAAqB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,KAAK,CAAC,SAAS,KACxB,KAAK,CAAC,YAAY,GACxB,IAAI,CAwFN;AAED,wBAAgB,kBAAkB,IAAI,aAAa,CAIlD;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,aAAa,CAI/D;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAI5D"}

package/dist/utils/history.d.ts

@@ -0,0 +1,14 @@
+import { EditorContent } from '../types';
+export declare class HistoryManager {
+    private history;
+    private currentIndex;
+    private maxHistorySize;
+    push(content: EditorContent): void;
+    undo(): EditorContent | null;
+    redo(): EditorContent | null;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    getCurrent(): EditorContent | null;
+    reset(): void;
+}
+//# sourceMappingURL=history.d.ts.map

package/dist/utils/history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.d.ts","sourceRoot":"","sources":["../../src/utils/history.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,qBAAa,cAAc;IACzB,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,cAAc,CAAc;IAEpC,IAAI,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAelC,IAAI,IAAI,aAAa,GAAG,IAAI;IAQ5B,IAAI,IAAI,aAAa,GAAG,IAAI;IAQ5B,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;IAIlB,UAAU,IAAI,aAAa,GAAG,IAAI;IAOlC,KAAK,IAAI,IAAI;CAId"}

package/dist/utils/listIndent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Erhöht den Einrückungs-Level eines List-Items (Tab)
+ */
+export declare function indentListItem(selection: Selection): boolean;
+/**
+ * Reduziert den Einrückungs-Level eines List-Items (Shift+Tab)
+ */
+export declare function outdentListItem(selection: Selection): boolean;
+//# sourceMappingURL=listIndent.d.ts.map

package/dist/utils/listIndent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listIndent.d.ts","sourceRoot":"","sources":["../../src/utils/listIndent.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CA+F5D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAkE7D"}

package/dist/utils/stateReflection.d.ts

@@ -0,0 +1,18 @@
+import { EditorAPI } from '../types';
+/**
+ * Liest die aktuelle Font-Size aus dem DOM an der Cursor-Position
+ */
+export declare function getCurrentFontSize(editor: EditorAPI): string | undefined;
+/**
+ * Liest die aktuelle Textfarbe aus dem DOM an der Cursor-Position
+ */
+export declare function getCurrentTextColor(editor: EditorAPI): string | undefined;
+/**
+ * Liest die aktuelle Hintergrundfarbe aus dem DOM an der Cursor-Position
+ */
+export declare function getCurrentBackgroundColor(editor: EditorAPI): string | undefined;
+/**
+ * Liest das aktuelle Heading-Level aus dem DOM an der Cursor-Position
+ */
+export declare function getCurrentHeading(editor: EditorAPI, availableHeadings: string[]): string | undefined;
+//# sourceMappingURL=stateReflection.d.ts.map

package/dist/utils/stateReflection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateReflection.d.ts","sourceRoot":"","sources":["../../src/utils/stateReflection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CA2BxE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAkDzE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAkD/E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CA0BpG"}

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@overlap/rte",
+    "version": "0.1.0",
+    "description": "A lightweight, extensible Rich Text Editor for React",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "type": "module",
+    "scripts": {
+        "build": "rollup -c",
+        "dev": "rollup -c -w",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "react",
+        "rich-text-editor",
+        "rte",
+        "contenteditable",
+        "editor"
+    ],
+    "author": "Almir Nakicevic <a.nakicevic@overlap.at>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/overlap-dev/hendriks-rte"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "dependencies": {
+        "tslib": "^2.8.1"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-typescript": "^11.1.5",
+        "@types/react": "^18.2.43",
+        "@types/react-dom": "^18.2.17",
+        "rollup": "^4.6.1",
+        "rollup-plugin-copy": "^3.5.0",
+        "rollup-plugin-dts": "^6.1.0",
+        "typescript": "^5.3.3"
+    }
+}

package/src/components/Dropdown.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Icon } from './Icons';
+
+interface DropdownProps {
+    icon: string;
+    label: string;
+    options: Array<{ value: string; label: string; icon?: string; color?: string; preview?: string; headingPreview?: string }>;
+    onSelect: (value: string) => void;
+    currentValue?: string;
+    disabled?: boolean;
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({
+    icon,
+    label,
+    options,
+    onSelect,
+    currentValue,
+    disabled,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    const handleSelect = (value: string) => {
+        onSelect(value);
+        setIsOpen(false);
+    };
+
+    const currentOption = options.find(opt => opt.value === currentValue);
+
+    return (
+        <div className="rte-dropdown" ref={dropdownRef}>
+            <button
+                type="button"
+                onClick={() => !disabled && setIsOpen(!isOpen)}
+                disabled={disabled}
+                className={`rte-toolbar-button rte-dropdown-button ${currentOption ? 'rte-dropdown-button-has-value' : ''}`}
+                title={label}
+                aria-label={label}
+            >
+                <Icon icon={icon} width={18} height={18} />
+                {currentOption && (
+                    <span className="rte-dropdown-value">{currentOption.label}</span>
+                )}
+            </button>
+            {isOpen && (
+                <div className="rte-dropdown-menu">
+                    {options.map((option) => (
+                        <button
+                            key={option.value}
+                            type="button"
+                            className={`rte-dropdown-item ${currentValue === option.value ? 'rte-dropdown-item-active' : ''}`}
+                            onClick={() => handleSelect(option.value)}
+                        >
+                            {option.color && (
+                                <span 
+                                    className={`rte-dropdown-color-preview ${currentValue === option.value ? 'active' : ''}`}
+                                    style={{ backgroundColor: option.color }}
+                                />
+                            )}
+                            {option.preview && !option.headingPreview && (
+                                <span 
+                                    className="rte-dropdown-fontsize-preview"
+                                    style={{ fontSize: `${option.preview}px` }}
+                                >
+                                    Aa
+                                </span>
+                            )}
+                            {option.headingPreview && (
+                                <span 
+                                    className={`rte-dropdown-heading-preview ${option.headingPreview}`}
+                                >
+                                    {option.headingPreview === 'p' ? 'Normal' : option.headingPreview.toUpperCase()}
+                                </span>
+                            )}
+                            {option.icon && <Icon icon={option.icon} width={16} height={16} />}
+                            <span style={{ flex: 1, fontWeight: currentValue === option.value ? 600 : 400 }}>
+                                {option.label}
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+

package/src/components/Editor.css

@@ -0,0 +1,2 @@
+@import '../styles.css';
+