@uxf/wysiwyg 13.0.3 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/wysiwyg",
-    "version": "13.0.3",
+    "version": "14.0.0",
     "description": "UXF Wysiwyg editor",
     "author": "Robin Dvorak <dvorak@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -18,9 +18,9 @@
         "@platejs/link": "53.3.5",
         "@platejs/list-classic": "53.0.0",
         "@platejs/media": "53.1.4",
-        "@uxf/core": "13.0.0",
-        "@uxf/core-react": "13.0.3",
-        "@uxf/ui": "13.0.3",
+        "@uxf/core": "14.0.0",
+        "@uxf/core-react": "14.0.0",
+        "@uxf/ui": "14.0.0",
         "platejs": "53.3.15",
         "react": "^19.3.0",
         "react-dom": "^19.3.0"
@@ -33,9 +33,9 @@
         "@platejs/media": "53.1.4",
         "@types/react": "19.3.0",
         "@types/react-dom": "19.3.0",
-        "@uxf/core": "13.0.0",
-        "@uxf/core-react": "13.0.3",
-        "@uxf/ui": "13.0.3",
+        "@uxf/core": "14.0.0",
+        "@uxf/core-react": "14.0.0",
+        "@uxf/ui": "14.0.0",
         "platejs": "53.3.15",
         "react": "19.3.0",
         "react-dom": "19.3.0"

package/plugins/image/create-image-plugin.js

@@ -34,6 +34,12 @@ const baseImagePlugin = (0, platejs_1.createSlatePlugin)({
                         request.open("GET", url, true);
                         request.responseType = "blob";
                         request.onload = () => {
+                            // `onload` fires for any complete response, an error page included.
+                            if (request.status < 200 || request.status >= 300) {
+                                // eslint-disable-next-line no-console
+                                console.error(`Error receiving image (${request.status}).`);
+                                return;
+                            }
                             const blob = request.response;
                             const file = new File([blob], "image-from-wysiwyg", {
                                 type: blob.type,

package/plugins/image/image-upload-errors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/plugins/image/image-upload-errors.test.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const platejs_1 = require("platejs");
+const create_paragraph_plugin_1 = require("../paragraph/create-paragraph-plugin");
+const create_image_plugin_1 = require("./create-image-plugin");
+const FILE = { extension: ".png", id: 1, name: "a.png", namespace: "wysiwyg", uuid: "u" };
+function createEditor() {
+    const uploadImage = jest.fn(async () => FILE);
+    const editor = (0, platejs_1.createSlateEditor)({
+        plugins: [
+            (0, create_paragraph_plugin_1.createParagraphPlugin)(),
+            create_image_plugin_1.createImagePlugin.configure({ options: { getImageUrl: (file) => file.name, uploadImage } }),
+        ],
+        value: [{ type: "p", children: [{ text: "" }] }],
+    });
+    editor.tf.select({ path: [0, 0], offset: 0 });
+    return { editor, uploadImage };
+}
+function textData(text) {
+    return {
+        effectAllowed: "uninitialized",
+        files: [],
+        getData: (type) => (type === "text/plain" ? text : ""),
+        types: ["text/plain"],
+    };
+}
+afterEach(() => {
+    jest.restoreAllMocks();
+    // jsdom has no fetch of its own.
+    delete global.fetch;
+});
+test("a pasted image URL that answers with an error is not uploaded", async () => {
+    global.fetch = jest.fn().mockResolvedValue({ ok: false, status: 404, blob: async () => new Blob() });
+    const { editor, uploadImage } = createEditor();
+    await editor.tf.insertData(textData("https://example.com/missing.png"));
+    expect(uploadImage).not.toHaveBeenCalled();
+});
+test("a pasted image URL that cannot be fetched at all neither rejects the paste nor uploads", async () => {
+    global.fetch = jest.fn().mockRejectedValue(new TypeError("Failed to fetch"));
+    const { editor, uploadImage } = createEditor();
+    await expect(editor.tf.insertData(textData("https://example.com/cors.png"))).resolves.not.toThrow();
+    expect(uploadImage).not.toHaveBeenCalled();
+});
+test("an <img> in pasted HTML whose download fails is not uploaded", () => {
+    var _a, _b, _c, _d;
+    jest.spyOn(console, "error").mockImplementation(() => undefined);
+    const requests = [];
+    jest.spyOn(window, "XMLHttpRequest").mockImplementation(function () {
+        const request = {
+            onload: () => undefined,
+            open: jest.fn(),
+            response: new Blob(["<html/>"]),
+            send: jest.fn(),
+            status: 404,
+        };
+        requests.push(request);
+        return request;
+    });
+    const { editor, uploadImage } = createEditor();
+    const element = document.createElement("img");
+    element.setAttribute("src", "https://example.com/missing.png");
+    (_c = (_b = (_a = editor.plugins.img.parsers.html) === null || _a === void 0 ? void 0 : _a.deserializer) === null || _b === void 0 ? void 0 : _b.parse) === null || _c === void 0 ? void 0 : _c.call(_b, {
+        editor,
+        element,
+        getOptions: () => editor.getOptions({ key: "img" }),
+    });
+    expect(requests).toHaveLength(1);
+    (_d = requests.at(0)) === null || _d === void 0 ? void 0 : _d.onload();
+    expect(uploadImage).not.toHaveBeenCalled();
+});
+test("a pasted image URL whose upload fails does not reject the paste", async () => {
+    global.fetch = jest
+        .fn()
+        .mockResolvedValue({ ok: true, status: 200, blob: async () => new Blob(["x"], { type: "image/png" }) });
+    const { editor, uploadImage } = createEditor();
+    uploadImage.mockRejectedValueOnce(new Error("Upload failed"));
+    await expect(editor.tf.insertData(textData("https://example.com/a.png"))).resolves.not.toThrow();
+});

package/plugins/image/with-paste-image-url.js

@@ -3,6 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withPasteImageUrl = void 0;
 const insert_image_1 = require("./transforms/insert-image");
 const is_image_url_1 = require("./utils/is-image-url");
+/** The image behind a pasted URL, or `null` when it cannot be downloaded (an error status, CORS, offline). */
+async function downloadImage(url) {
+    try {
+        const response = await fetch(url, { mode: "cors" });
+        return response.ok ? await response.blob() : null;
+    }
+    catch {
+        return null;
+    }
+}
 /**
  * If inserted text is image url, upload image and insert it instead. The disable flag is checked
  * inside the handler because `.overrideEditor` is installed when the plugin is defined.
@@ -16,15 +26,26 @@ const withPasteImageUrl = ({ editor, getOptions, tf: { insertData }, }) => ({
             }
             const text = dataTransfer.getData("text/plain");
             if ((0, is_image_url_1.isImageUrl)(text)) {
-                const imageResponse = await fetch(text, { mode: "cors" });
-                const blob = await imageResponse.blob();
+                const blob = await downloadImage(text);
+                if (!blob) {
+                    // Pasted as text, as without this plugin. Uploading an error page as the image, or losing the
+                    // paste to a rejected fetch, was worse.
+                    return insertData(dataTransfer);
+                }
                 const file = new File([blob], "image-from-wysiwyg." + (0, is_image_url_1.getImageExtension)(text), { type: blob.type });
                 if (!uploadImage) {
                     // eslint-disable-next-line no-console
                     console.log("Missing uploadImage function in image plugin options!");
                     return;
                 }
-                const fileResponse = await uploadImage(file);
+                let fileResponse;
+                try {
+                    fileResponse = await uploadImage(file);
+                }
+                catch {
+                    // A failed upload falls back to pasting the URL as text, like a failed download.
+                    return insertData(dataTransfer);
+                }
                 if (!getImageUrl) {
                     // eslint-disable-next-line no-console
                     console.log("Missing getImageUrl function in image plugin options!");

package/ui/paragraph-element.js

@@ -8,6 +8,6 @@ const react_1 = __importDefault(require("react"));
 const CLASS_NAME = "uxf-wysiwyg__element";
 const ParagraphElement = (props) => {
     var _a;
-    return (react_1.default.createElement("p", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-paragraph${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
+    return (react_1.default.createElement("p", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-paragraph ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children));
 };
 exports.ParagraphElement = ParagraphElement;

package/ui/paragraph-element.test.d.ts

@@ -0,0 +1 @@
+export {};

package/ui/paragraph-element.test.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const react_2 = __importDefault(require("react"));
+const paragraph_element_1 = require("./paragraph-element");
+test("keeps a passed className separate from its own", () => {
+    var _a, _b;
+    const props = { attributes: {}, children: "Text", className: "custom" };
+    const { container } = (0, react_1.render)(react_2.default.createElement(paragraph_element_1.ParagraphElement, { ...props }));
+    expect((_a = container.querySelector("p")) === null || _a === void 0 ? void 0 : _a.classList.contains("uxf-wysiwyg__element-paragraph")).toBe(true);
+    expect((_b = container.querySelector("p")) === null || _b === void 0 ? void 0 : _b.classList.contains("custom")).toBe(true);
+});

package/ui/toolbar/buttons/toolbar-button.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarButton = void 0;
+const use_media_query_1 = require("@uxf/core-react/hooks/use-media-query");
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const tooltip_1 = require("@uxf/ui/tooltip");
@@ -12,6 +13,9 @@ const utils_1 = require("../../../utils");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
 const ToolbarButton = (props) => {
     var _a, _b;
+    // Touch input (no hover, so no tooltip). Through useMediaQuery rather than matchMedia during render, so it
+    // follows a change of input device.
+    const isCoarsePointer = (0, use_media_query_1.useMediaQuery)("(pointer: coarse)");
     const onMouseDown = props.onMouseDown;
     /* `onPointerDown` must be used, because Editor loses focus on `onClick`. */
     const onLeftMouseDown = (e) => {
@@ -26,8 +30,7 @@ const ToolbarButton = (props) => {
     }
     const button = (react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, isIconButton: true, onPointerDown: onLeftMouseDown, variant: props.isActive ? "default" : "secondary" },
         react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: props.iconName, size: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20 })));
-    /* This detects touch input. */
-    if (window.matchMedia("(pointer: coarse)").matches) {
+    if (isCoarsePointer) {
         return button;
     }
     return (react_1.default.createElement(tooltip_1.Tooltip, { className: `${CLASS_NAME}__tooltip`, content: props.tooltipText }, button));

package/wysiwyg-editor.js

@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WysiwygEditor = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
-const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const use_is_hydrated_1 = require("@uxf/core-react/hooks/use-is-hydrated");
 const translations_1 = require("@uxf/core-react/translations");
 const loader_1 = require("@uxf/ui/loader");
 const react_1 = require("platejs/react");
@@ -88,8 +88,10 @@ const Editor = (props) => {
 };
 const WysiwygEditor = (props) => {
     var _a, _b;
-    const isMounted = (0, use_is_mounted_1.useIsMounted)();
-    if (!isMounted) {
+    // Plate needs the browser. Rendered on the client after hydration (e.g. after a client-side navigation), the
+    // editor shows at once instead of flashing the loader for a commit.
+    const isHydrated = (0, use_is_hydrated_1.useIsHydrated)();
+    if (!isHydrated) {
         return (react_2.default.createElement("div", { className: `${CLASS_NAME} ${CLASS_NAME}--${classes_1.CLASSES.IS_LOADING} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
             react_2.default.createElement(loader_1.Loader, { className: `${CLASS_NAME}__loader` })));
     }

package/wysiwyg-editor.stories.js

@@ -38,7 +38,7 @@ exports.initialValue = void 0;
 exports.Playground = Playground;
 exports.SelectedPlugins = SelectedPlugins;
 const show_1 = require("@uxf/core-react/components/show");
-const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const use_is_hydrated_1 = require("@uxf/core-react/hooks/use-is-hydrated");
 const react_1 = __importStar(require("react"));
 const wysiwyg_1 = require("@uxf/wysiwyg");
 exports.initialValue = [
@@ -157,7 +157,7 @@ function Playground() {
         }),
         (0, wysiwyg_1.createHighlightPluginWithUi)("red"),
     ]);
-    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    const isHydrated = (0, use_is_hydrated_1.useIsHydrated)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(wysiwyg_1.WysiwygEditor, { id: "editor", initialValue: exports.initialValue, onChange: setValue, plugins: plugins }),
         react_1.default.createElement("div", { className: "relative mt-4" },
@@ -165,7 +165,7 @@ function Playground() {
                 react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
             react_1.default.createElement("div", { className: "relative flex justify-center" },
                 react_1.default.createElement("span", { className: "bg-white px-2 text-sm text-gray-500" }, "Value"))),
-        react_1.default.createElement(show_1.Show, { when: isMounted },
+        react_1.default.createElement(show_1.Show, { when: isHydrated },
             react_1.default.createElement("pre", null,
                 react_1.default.createElement("code", null, JSON.stringify(value, null, "    "))))));
 }
@@ -189,7 +189,7 @@ function SelectedPlugins() {
         }),
         (0, wysiwyg_1.createHighlightPluginWithUi)("red"),
     ]);
-    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    const isHydrated = (0, use_is_hydrated_1.useIsHydrated)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(wysiwyg_1.WysiwygEditor, { id: "editor", initialValue: _initialValues, onChange: setValue, plugins: plugins }),
         react_1.default.createElement("div", { className: "relative mt-4" },
@@ -197,7 +197,7 @@ function SelectedPlugins() {
                 react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
             react_1.default.createElement("div", { className: "relative flex justify-center" },
                 react_1.default.createElement("span", { className: "bg-white px-2 text-sm text-gray-500" }, "Value"))),
-        react_1.default.createElement(show_1.Show, { when: isMounted },
+        react_1.default.createElement(show_1.Show, { when: isHydrated },
             react_1.default.createElement("pre", null,
                 react_1.default.createElement("code", null, JSON.stringify(value, null, "    "))))));
 }