@overlap/rte 0.1.2 → 0.1.4

package/src/components/FloatingToolbar.tsx

@@ -1,214 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import { ButtonProps, EditorAPI, Plugin } from "../types";
-
-interface FloatingToolbarProps {
-    plugins: Plugin[];
-    editorAPI: EditorAPI;
-    editorElement: HTMLElement | null;
-}
-
-interface Position {
-    top: number;
-    left: number;
-    visible: boolean;
-}
-
-export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
-    plugins,
-    editorAPI,
-    editorElement,
-}) => {
-    const [position, setPosition] = useState<Position>({
-        top: 0,
-        left: 0,
-        visible: false,
-    });
-    const toolbarRef = useRef<HTMLDivElement>(null);
-    const updateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    const inlinePlugins = plugins.filter(
-        (p) => p.type === "inline" && p.name !== "clearFormatting"
-    );
-
-    const updatePosition = React.useCallback(() => {
-        if (typeof window === 'undefined') {
-            setPosition((prev) => ({ ...prev, visible: false }));
-            return;
-        }
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0 || !editorElement) {
-            setPosition((prev) => ({ ...prev, visible: false }));
-            return;
-        }
-
-        const range = selection.getRangeAt(0);
-        
-        if (range.collapsed) {
-            setPosition((prev) => ({ ...prev, visible: false }));
-            return;
-        }
-
-        if (!editorElement.contains(range.commonAncestorContainer)) {
-            setPosition((prev) => ({ ...prev, visible: false }));
-            return;
-        }
-
-        const rect = range.getBoundingClientRect();
-        const editorRect = editorElement.getBoundingClientRect();
-        const toolbarHeight = toolbarRef.current?.offsetHeight || 40;
-        const toolbarWidth = toolbarRef.current?.offsetWidth || 200;
-
-        let viewportTop = rect.top - toolbarHeight - 8;
-        let viewportLeft = rect.left + rect.width / 2 - toolbarWidth / 2;
-
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        if (viewportLeft < 8) {
-            viewportLeft = 8;
-        }
-        if (viewportLeft + toolbarWidth > viewportWidth - 8) {
-            viewportLeft = viewportWidth - toolbarWidth - 8;
-        }
-
-        if (viewportTop < 8) {
-            viewportTop = rect.bottom + 8;
-        }
-        if (viewportTop + toolbarHeight > viewportHeight - 8) {
-            viewportTop = rect.top - toolbarHeight - 8;
-            if (viewportTop < 8) {
-                viewportTop = 8;
-            }
-        }
-
-        const relativeTop = viewportTop - editorRect.top + editorElement.scrollTop;
-        const relativeLeft = viewportLeft - editorRect.left + editorElement.scrollLeft;
-
-        setPosition({
-            top: relativeTop,
-            left: relativeLeft,
-            visible: true,
-        });
-    }, [editorElement]);
-
-    const scheduleUpdate = React.useCallback(() => {
-        if (updateTimeoutRef.current) {
-            clearTimeout(updateTimeoutRef.current);
-        }
-        updateTimeoutRef.current = setTimeout(() => {
-            updatePosition();
-        }, 10);
-    }, [updatePosition]);
-
-    useEffect(() => {
-        const handleSelectionChange = () => {
-            scheduleUpdate();
-        };
-
-        const handleMouseUp = () => {
-            scheduleUpdate();
-        };
-
-        const handleKeyUp = () => {
-            scheduleUpdate();
-        };
-
-        const handleScroll = () => {
-            if (position.visible) {
-                scheduleUpdate();
-            }
-        };
-
-        const handleResize = () => {
-            if (position.visible) {
-                scheduleUpdate();
-            }
-        };
-
-        document.addEventListener("selectionchange", handleSelectionChange);
-        document.addEventListener("mouseup", handleMouseUp);
-        document.addEventListener("keyup", handleKeyUp);
-        window.addEventListener("scroll", handleScroll, true);
-        window.addEventListener("resize", handleResize);
-
-        return () => {
-            document.removeEventListener("selectionchange", handleSelectionChange);
-            document.removeEventListener("mouseup", handleMouseUp);
-            document.removeEventListener("keyup", handleKeyUp);
-            window.removeEventListener("scroll", handleScroll, true);
-            window.removeEventListener("resize", handleResize);
-            if (updateTimeoutRef.current) {
-                clearTimeout(updateTimeoutRef.current);
-            }
-        };
-    }, [position.visible, scheduleUpdate]);
-
-    useEffect(() => {
-        scheduleUpdate();
-    }, [scheduleUpdate]);
-
-    const handlePluginClick = (plugin: Plugin, value?: string) => {
-        if (plugin.canExecute?.(editorAPI) !== false) {
-            if (plugin.execute) {
-                plugin.execute(editorAPI, value);
-            } else if (plugin.command && value !== undefined) {
-                editorAPI.executeCommand(plugin.command, value);
-            } else if (plugin.command) {
-                editorAPI.executeCommand(plugin.command);
-            }
-            setTimeout(() => {
-                scheduleUpdate();
-            }, 50);
-        }
-    };
-
-    if (!position.visible || inlinePlugins.length === 0) {
-        return null;
-    }
-
-    return (
-        <div
-            ref={toolbarRef}
-            className="rte-floating-toolbar"
-            style={{
-                position: "absolute",
-                top: `${position.top}px`,
-                left: `${position.left}px`,
-            }}
-        >
-            <div className="rte-floating-toolbar-content">
-                {inlinePlugins.map((plugin) => {
-                    if (!plugin.renderButton) return null;
-
-                    const isActive = plugin.isActive
-                        ? plugin.isActive(editorAPI)
-                        : false;
-                    const canExecute = plugin.canExecute
-                        ? plugin.canExecute(editorAPI)
-                        : true;
-
-                    const currentValue = plugin.getCurrentValue
-                        ? plugin.getCurrentValue(editorAPI)
-                        : undefined;
-
-                    const buttonProps: ButtonProps & { [key: string]: any } = {
-                        isActive,
-                        onClick: () => handlePluginClick(plugin),
-                        disabled: !canExecute,
-                        onSelect: (value: string) =>
-                            handlePluginClick(plugin, value),
-                        editorAPI,
-                        currentValue,
-                    };
-
-                    return (
-                        <React.Fragment key={plugin.name}>
-                            {plugin.renderButton(buttonProps)}
-                        </React.Fragment>
-                    );
-                })}
-            </div>
-        </div>
-    );
-};
-

package/src/components/IconWrapper.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Icon } from './Icons';
-
-interface IconWrapperProps {
-    icon: string;
-    width?: number;
-    height?: number;
-    className?: string;
-}
-
-export const IconWrapper: React.FC<IconWrapperProps> = ({ icon, width = 18, height = 18, className }) => {
-    return <Icon icon={icon} width={width} height={height} className={className} />;
-};
-

package/src/components/Icons.tsx

@@ -1,374 +0,0 @@
-import React from "react";
-
-interface IconProps {
-    width?: number;
-    height?: number;
-    className?: string;
-}
-
-export const BoldIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
-    </svg>
-);
-
-export const ItalicIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
-    </svg>
-);
-
-export const UnderlineIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
-    </svg>
-);
-
-export const UndoIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" />
-    </svg>
-);
-
-export const RedoIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" />
-    </svg>
-);
-
-export const ClearFormattingIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M6 5v3h5v11h2V8h5V5H6z" />
-        <path d="M20.5 3.5L3.5 20.5l1.06 1.06L21.56 4.56z" />
-    </svg>
-);
-
-export const LinkIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
-    </svg>
-);
-
-export const QuoteIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
-    </svg>
-);
-
-export const BulletListIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-    </svg>
-);
-
-export const NumberedListIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 11.9V11H2zm6-5v2h14V6H8zm0 14h14v-2H8v2zm0-6h14v-2H8v2z" />
-    </svg>
-);
-
-export const TextColorIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M2 20h20v4H2v-4zm3.49-3h2.42l1.27-3.58h5.64L16.09 17h2.42L13.25 3h-2.5L5.49 17zm4.22-5.61l2.03-5.79h.12l2.03 5.79H9.71z" />
-    </svg>
-);
-
-export const BackgroundColorIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M17.5 4.5c-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5-1.45 0-2.99.22-4.28.79C1.49 5.62 1 6.33 1 7.14v11.28c0 1.3 1.22 2.26 2.48 1.94.98-.25 2.02-.36 3.02-.36 1.56 0 3.22.26 4.56.92.6.3 1.28.3 1.88 0 1.34-.67 3-.92 4.56-.92 1 0 2.04.11 3.02.36C22.78 20.68 24 19.72 24 18.42V7.14c0-.81-.49-1.52-1.22-1.85-1.29-.57-2.83-.79-4.28-.79zM21 17.23c0 .63-.58 1.09-1.2.98-.75-.14-1.53-.2-2.3-.2-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5.77 0 1.55.06 2.3.2.62.11 1.2.58 1.2 1.18v9.35z" />
-        <rect
-            x="4"
-            y="13"
-            width="16"
-            height="6"
-            fill="currentColor"
-            opacity="0.5"
-        />
-    </svg>
-);
-
-export const HeadingIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M5 4v3h5.5v12h3V7H19V4H5z" />
-    </svg>
-);
-
-export const FontSizeIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v8h3v-8h3V10H3z" />
-    </svg>
-);
-
-export const ImageIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
-    </svg>
-);
-
-export const CloseIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-    </svg>
-);
-
-export const LoadingIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
-    </svg>
-);
-
-export const UploadIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
-    </svg>
-);
-
-export const IndentIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M3 21h18v-2H3v2zM3 8l4 4-4 4V8zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" />
-    </svg>
-);
-
-export const OutdentIcon: React.FC<IconProps> = ({
-    width = 18,
-    height = 18,
-    className,
-}) => (
-    <svg
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className={className}
-    >
-        <path d="M3 21h18v-2H3v2zM11 8l4 4-4 4V8zM3 3v2h18V3H3zm0 4h10v2H3V7zm0 4h10v2H3v-2zm0 4h18v2H3v-2z" />
-    </svg>
-);
-
-const iconMap: Record<string, React.FC<IconProps>> = {
-    "mdi:format-bold": BoldIcon,
-    "mdi:format-italic": ItalicIcon,
-    "mdi:format-underline": UnderlineIcon,
-    "mdi:undo": UndoIcon,
-    "mdi:redo": RedoIcon,
-    "mdi:format-clear": ClearFormattingIcon,
-    "mdi:link": LinkIcon,
-    "mdi:format-quote-close": QuoteIcon,
-    "mdi:format-list-bulleted": BulletListIcon,
-    "mdi:format-list-numbered": NumberedListIcon,
-    "mdi:format-color-text": TextColorIcon,
-    "mdi:format-color-fill": BackgroundColorIcon,
-    "mdi:format-header-1": HeadingIcon,
-    "mdi:format-size": FontSizeIcon,
-    "mdi:image": ImageIcon,
-    "mdi:close": CloseIcon,
-    "mdi:loading": LoadingIcon,
-    "mdi:upload": UploadIcon,
-    "mdi:format-indent-increase": IndentIcon,
-    "mdi:format-indent-decrease": OutdentIcon,
-};
-
-export const Icon: React.FC<{
-    icon: string;
-    width?: number;
-    height?: number;
-    className?: string;
-}> = ({ icon, width = 18, height = 18, className }) => {
-    const IconComponent = iconMap[icon];
-    if (!IconComponent) {
-        return <span style={{ width, height, display: "inline-block" }} />;
-    }
-    return (
-        <IconComponent width={width} height={height} className={className} />
-    );
-};