@blocklet/editor-lite 2.6.0

package/lib/main/ui/ImageResizer.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+    east: 1 << 0,
+    north: 1 << 3,
+    south: 1 << 1,
+    west: 1 << 2,
+};
+export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled, }) {
+    const controlWrapperRef = useRef(null);
+    const userSelect = useRef({
+        priority: '',
+        value: 'default',
+    });
+    const positioningRef = useRef({
+        currentHeight: 0,
+        currentWidth: 0,
+        direction: 0,
+        isResizing: false,
+        ratio: 0,
+        startHeight: 0,
+        startWidth: 0,
+        startX: 0,
+        startY: 0,
+    });
+    const editorRootElement = editor.getRootElement();
+    // Find max width, accounting for editor padding.
+    const maxWidthContainer = maxWidth || (editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100);
+    const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+    const minWidth = 100;
+    const minHeight = 100;
+    const setStartCursor = (direction) => {
+        const ew = direction === Direction.east || direction === Direction.west;
+        const ns = direction === Direction.north || direction === Direction.south;
+        const nwse = (direction & Direction.north && direction & Direction.west) ||
+            (direction & Direction.south && direction & Direction.east);
+        const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
+            userSelect.current.value = document.body.style.getPropertyValue('-webkit-user-select');
+            userSelect.current.priority = document.body.style.getPropertyPriority('-webkit-user-select');
+            document.body.style.setProperty('-webkit-user-select', 'none', 'important');
+        }
+    };
+    const setEndCursor = () => {
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty('cursor', 'default');
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty('cursor', 'default');
+            document.body.style.setProperty('-webkit-user-select', userSelect.current.value, userSelect.current.priority);
+        }
+    };
+    const handlePointerDown = (event, direction) => {
+        const image = imageRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null) {
+            const { width, height } = image.getBoundingClientRect();
+            const positioning = positioningRef.current;
+            positioning.startWidth = width;
+            positioning.startHeight = height;
+            positioning.ratio = width / height;
+            positioning.currentWidth = width;
+            positioning.currentHeight = height;
+            positioning.startX = event.clientX;
+            positioning.startY = event.clientY;
+            positioning.isResizing = true;
+            positioning.direction = direction;
+            setStartCursor(direction);
+            onResizeStart();
+            controlWrapper.classList.add('image-control-wrapper--resizing');
+            image.style.height = `${height}px`;
+            image.style.width = `${width}px`;
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+        }
+    };
+    const handlePointerMove = (event) => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+        const isVertical = positioning.direction & (Direction.south | Direction.north);
+        if (image !== null && positioning.isResizing) {
+            // Corner cursor
+            if (isHorizontal && isVertical) {
+                let diff = Math.floor(positioning.startX - event.clientX);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                const height = width / positioning.ratio;
+                image.style.width = `${width}px`;
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+                positioning.currentWidth = width;
+            }
+            else if (isVertical) {
+                let diff = Math.floor(positioning.startY - event.clientY);
+                diff = positioning.direction & Direction.south ? -diff : diff;
+                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+            }
+            else {
+                let diff = Math.floor(positioning.startX - event.clientX);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                image.style.width = `${width}px`;
+                positioning.currentWidth = width;
+            }
+        }
+    };
+    const handlePointerUp = () => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null && positioning.isResizing) {
+            const width = positioning.currentWidth;
+            const height = positioning.currentHeight;
+            positioning.startWidth = 0;
+            positioning.startHeight = 0;
+            positioning.ratio = 0;
+            positioning.startX = 0;
+            positioning.startY = 0;
+            positioning.currentWidth = 0;
+            positioning.currentHeight = 0;
+            positioning.isResizing = false;
+            controlWrapper.classList.remove('image-control-wrapper--resizing');
+            setEndCursor();
+            onResizeEnd(width, height);
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+        }
+    };
+    return (_jsxs("div", { ref: controlWrapperRef, children: [captionsEnabled && (_jsx("button", { className: "image-caption-button", ref: buttonRef, onClick: () => {
+                    setShowCaption(!showCaption);
+                }, children: showCaption ? 'Remove Caption' : 'Add Caption' })), _jsx("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.west);
+                } }), _jsx("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.west);
+                } }), _jsx("div", { className: "image-resizer image-resizer-nw", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.west);
+                } })] }));
+}

package/lib/main/ui/Input.css

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}

package/lib/main/ui/Modal.css

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Modal__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(40, 40, 40, 0.6);
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 10001;
+}
+.Modal__modal {
+  padding: 20px;
+  min-height: 100px;
+  min-width: 300px;
+  display: flex;
+  flex-grow: 0px;
+  background-color: #fff;
+  flex-direction: column;
+  position: relative;
+  box-shadow: 0 0 20px 0 #444;
+  border-radius: 10px;
+}
+.Modal__title {
+  color: #444;
+  margin: 0px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+}
+.Modal__closeButton {
+  border: 0px;
+  position: absolute;
+  right: 20px;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #eee;
+}
+.Modal__closeButton:hover {
+  background-color: #ddd;
+}
+.Modal__content {
+  padding-top: 20px;
+}

package/lib/main/ui/Modal.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Modal.css';
+import { ReactNode, type JSX } from 'react';
+export default function Modal({ onClose, children, title, closeOnClickOutside, }: {
+    children: ReactNode;
+    closeOnClickOutside?: boolean;
+    onClose: () => void;
+    title: string;
+}): JSX.Element;

package/lib/main/ui/Modal.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Modal.css';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+function PortalImpl({ onClose, children, title, closeOnClickOutside, }) {
+    const modalRef = useRef(null);
+    useEffect(() => {
+        if (modalRef.current !== null) {
+            modalRef.current.focus();
+        }
+    }, []);
+    useEffect(() => {
+        let modalOverlayElement = null;
+        const handler = (event) => {
+            if (event.keyCode === 27) {
+                onClose();
+            }
+        };
+        const clickOutsideHandler = (event) => {
+            const { target } = event;
+            if (modalRef.current !== null && !modalRef.current.contains(target) && closeOnClickOutside) {
+                onClose();
+            }
+        };
+        if (modalRef.current !== null) {
+            modalOverlayElement = modalRef.current?.parentElement;
+            if (modalOverlayElement !== null) {
+                modalOverlayElement?.addEventListener('click', clickOutsideHandler);
+            }
+        }
+        window.addEventListener('keydown', handler);
+        return () => {
+            window.removeEventListener('keydown', handler);
+            if (modalOverlayElement !== null) {
+                modalOverlayElement?.removeEventListener('click', clickOutsideHandler);
+            }
+        };
+    }, [closeOnClickOutside, onClose]);
+    return (_jsx("div", { className: "Modal__overlay", role: "dialog", children: _jsxs("div", { className: "Modal__modal", tabIndex: -1, ref: modalRef, children: [_jsx("h2", { className: "Modal__title", children: title }), _jsx("button", { className: "Modal__closeButton", "aria-label": "Close modal", type: "button", onClick: onClose, children: "X" }), _jsx("div", { className: "Modal__content", children: children })] }) }));
+}
+export default function Modal({ onClose, children, title, closeOnClickOutside = false, }) {
+    return createPortal(_jsx(PortalImpl, { onClose: onClose, title: title, closeOnClickOutside: closeOnClickOutside, children: children }), document.body);
+}

package/lib/main/ui/Placeholder.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PlaceholderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+}
+export default function Placeholder({ ref, ...props }: PlaceholderProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/main/ui/Placeholder.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+export default function Placeholder({ ref = undefined, ...props }) {
+    return _jsx(PlaceholderRoot, { ...props, ref: ref });
+}
+const PlaceholderRoot = styled.div `
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  // edit mode 下首个元素 (段落或标题) margin-top 设置为 0 后, top 需要设置为 0, 以解决 placeholder 与光标位置不对齐的问题
+  top: 8px;
+  left: 28px;
+  right: 28px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+`;

package/lib/main/ui/TextInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+import './Input.css';
+import { HTMLInputTypeAttribute } from 'react';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    label: string;
+    onChange: (val: string) => void;
+    placeholder?: string;
+    value: string;
+    type?: HTMLInputTypeAttribute;
+}>;
+export default function TextInput({ label, value, onChange, placeholder, 'data-test-id': dataTestId, type, }: Props): JSX.Element;
+export {};

package/lib/main/ui/TextInput.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Input.css';
+import { styled, useTheme } from '@mui/material';
+export default function TextInput({ label, value, onChange, placeholder = '', 'data-test-id': dataTestId, type = 'text', }) {
+    const theme = useTheme();
+    return (_jsxs("div", { className: "Input__wrapper", children: [_jsx("label", { className: "Input__label", style: { color: theme.palette.grey[500] }, children: label }), _jsx(Input, { type: type, className: "Input__input", placeholder: placeholder, value: value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, "data-test-id": dataTestId })] }));
+}
+const Input = styled('input') `
+  background-color: ${(props) => props.theme.palette.background.paper};
+  color: ${(props) => props.theme.palette.grey[500]};
+  border: 1px solid ${(props) => props.theme.palette.divider};
+`;

package/lib/main/utils/getDOMRangeRect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect;

package/lib/main/utils/getDOMRangeRect.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function getDOMRangeRect(nativeSelection, rootElement) {
+    const domRange = nativeSelection.getRangeAt(0);
+    let rect;
+    if (nativeSelection.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+            inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+    }
+    else {
+        rect = domRange.getBoundingClientRect();
+    }
+    return rect;
+}

package/lib/main/utils/getSelectedNode.d.ts

@@ -0,0 +1,2 @@
+import { ElementNode, RangeSelection, TextNode } from 'lexical';
+export declare function getSelectedNode(selection: RangeSelection): TextNode | ElementNode;

package/lib/main/utils/getSelectedNode.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $isAtNodeEnd } from '@lexical/selection';
+export function getSelectedNode(selection) {
+    const { anchor } = selection;
+    const { focus } = selection;
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    if (anchorNode === focusNode) {
+        return anchorNode;
+    }
+    const isBackward = selection.isBackward();
+    if (isBackward) {
+        return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+    }
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+}

package/lib/main/utils/guard.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function isHTMLElement(x: unknown): x is HTMLElement;
+/**
+ * Determines if the specified font is too tall
+ */
+export declare function isFontTooTall(fontFamily: string): boolean;
+export declare const isHeadFontTooTall: boolean;
+export declare const isBodyFontTooTall: boolean;

package/lib/main/utils/guard.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function isHTMLElement(x) {
+    return x instanceof HTMLElement;
+}
+/**
+ * Determines if the specified font is too tall
+ */
+export function isFontTooTall(fontFamily) {
+    const fontSizePx = 16;
+    const threshold = 1.1;
+    const container = document.createElement('div');
+    container.style.fontSize = `${fontSizePx}px`;
+    container.style.fontFamily = fontFamily;
+    container.style.opacity = '0';
+    container.style.whiteSpace = 'nowrap';
+    container.style.position = 'absolute';
+    container.style.pointerEvents = 'none';
+    const span = document.createElement('span');
+    span.textContent = 'Éy';
+    container.appendChild(span);
+    document.body.appendChild(container);
+    const renderHeight = span.getBoundingClientRect().height;
+    document.body.removeChild(container);
+    return renderHeight > fontSizePx * threshold;
+}
+const typography = window?.blocklet?.theme?.common?.typography;
+const headFont = typography?.h1?.fontFamily;
+const bodyFont = typography?.fontFamily;
+export const isHeadFontTooTall = headFont ? isFontTooTall(headFont) : false;
+export const isBodyFontTooTall = bodyFont ? isFontTooTall(bodyFont) : false;

package/lib/main/utils/images.d.ts

@@ -0,0 +1,10 @@
+export declare const scaleImage: ({ width, height, maxSize }: {
+    width: number;
+    height: number;
+    maxSize: number;
+}) => {
+    width: number;
+    height: number;
+    scaleFactor: number;
+};
+export declare function getDevicePixelRatio(): number;

package/lib/main/utils/images.js

@@ -0,0 +1,16 @@
+export const scaleImage = ({ width, height, maxSize }) => {
+    const longAxis = Math.max(width, height);
+    const scaleFactor = maxSize / longAxis;
+    let newWidth = maxSize;
+    let newHeight = maxSize;
+    if (width !== longAxis) {
+        newWidth = Math.floor(scaleFactor * width);
+    }
+    if (height !== longAxis) {
+        newHeight = Math.floor(scaleFactor * height);
+    }
+    return { width: newWidth, height: newHeight, scaleFactor };
+};
+export function getDevicePixelRatio() {
+    return window?.devicePixelRatio || 1;
+}

package/lib/main/utils/join-classes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default function joinClasses(...args: Array<string | boolean | null | undefined>): string;

package/lib/main/utils/join-classes.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default function joinClasses(...args) {
+    return args.filter(Boolean).join(' ');
+}

package/lib/main/utils/point.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare class Point {
+    private readonly _x;
+    private readonly _y;
+    constructor(x: number, y: number);
+    get x(): number;
+    get y(): number;
+    equals({ x, y }: Point): boolean;
+    calcDeltaXTo({ x }: Point): number;
+    calcDeltaYTo({ y }: Point): number;
+    calcHorizontalDistanceTo(point: Point): number;
+    calcVerticalDistance(point: Point): number;
+    calcDistanceTo(point: Point): number;
+}
+export declare function isPoint(x: unknown): x is Point;

package/lib/main/utils/point.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export class Point {
+    _x;
+    _y;
+    constructor(x, y) {
+        this._x = x;
+        this._y = y;
+    }
+    get x() {
+        return this._x;
+    }
+    get y() {
+        return this._y;
+    }
+    equals({ x, y }) {
+        return this.x === x && this.y === y;
+    }
+    calcDeltaXTo({ x }) {
+        return this.x - x;
+    }
+    calcDeltaYTo({ y }) {
+        return this.y - y;
+    }
+    calcHorizontalDistanceTo(point) {
+        return Math.abs(this.calcDeltaXTo(point));
+    }
+    calcVerticalDistance(point) {
+        return Math.abs(this.calcDeltaYTo(point));
+    }
+    calcDistanceTo(point) {
+        return Math.sqrt(this.calcDeltaXTo(point) ** 2 + this.calcDeltaYTo(point) ** 2);
+    }
+}
+export function isPoint(x) {
+    return x instanceof Point;
+}

package/lib/main/utils/prevent-duplicate-upload.d.ts

@@ -0,0 +1,2 @@
+export declare function preventDuplicateUploadSuccess(handler: (...args: any[]) => void): (...args: any[]) => void;
+export declare function clearRecentUploads(): void;

package/lib/main/utils/prevent-duplicate-upload.js

@@ -0,0 +1,25 @@
+// Avoid handling upload success multiple times for the same file within a short interval
+// ref: https://github.com/blocklet/media-kit/issues/428
+// Module-level array to store recent uploaded files with timestamps
+const recentUploads = [];
+export function preventDuplicateUploadSuccess(handler) {
+    return (...args) => {
+        const fileHash = args[0]?.file?.hashFileName;
+        if (!fileHash) {
+            handler(...args);
+            return;
+        }
+        // Check if this file was recently uploaded
+        const isDuplicate = recentUploads.some((record) => record.fileHash === fileHash);
+        if (isDuplicate) {
+            return;
+        }
+        // Add new upload record
+        const newRecord = { fileHash };
+        recentUploads.push(newRecord);
+        handler(...args);
+    };
+}
+export function clearRecentUploads() {
+    recentUploads.length = 0;
+}