@uxf/wysiwyg 13.0.3 → 14.1.0

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
@@ -20,16 +21,56 @@ function getIsListElementActive(editor, type) {
     const [listElement] = res.list;
     return listElement.type === type;
 }
-const ListToolbarButton = (props) => {
+const ListToolbarButton = props => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(15);
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
-    const isActive = getIsListElementActive(editor, type);
-    const onMouseDown = () => {
-        (0, constants_1.toggleList)(editor, {
-            type,
-        });
-    };
-    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-list ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: props.iconName, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText }));
+    let t0;
+    let type;
+    if ($[0] !== editor || $[1] !== props.pluginKey) {
+        type = (0, utils_1.getPluginType)(editor, props.pluginKey);
+        t0 = getIsListElementActive(editor, type);
+        $[0] = editor;
+        $[1] = props.pluginKey;
+        $[2] = t0;
+        $[3] = type;
+    }
+    else {
+        t0 = $[2];
+        type = $[3];
+    }
+    const isActive = t0;
+    let t1;
+    if ($[4] !== editor || $[5] !== type) {
+        t1 = () => {
+            (0, constants_1.toggleList)(editor, {
+                type
+            });
+        };
+        $[4] = editor;
+        $[5] = type;
+        $[6] = t1;
+    }
+    else {
+        t1 = $[6];
+    }
+    const onMouseDown = t1;
+    const t2 = `${CLASS_NAME} ${CLASS_NAME}-list ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    let t3;
+    if ($[7] !== editor || $[8] !== isActive || $[9] !== onMouseDown || $[10] !== props.iconName || $[11] !== props.pluginKey || $[12] !== props.tooltipText || $[13] !== t2) {
+        t3 = react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: t2, editor: editor, iconName: props.iconName, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText });
+        $[7] = editor;
+        $[8] = isActive;
+        $[9] = onMouseDown;
+        $[10] = props.iconName;
+        $[11] = props.pluginKey;
+        $[12] = props.tooltipText;
+        $[13] = t2;
+        $[14] = t3;
+    }
+    else {
+        t3 = $[14];
+    }
+    return t3;
 };
 exports.ListToolbarButton = ListToolbarButton;

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

@@ -4,22 +4,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const toolbar_button_1 = require("./toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const MarkToolbarButton = (props) => {
+const MarkToolbarButton = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(15);
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
-    const isActive = (0, is_not_nil_1.isNotNil)(editor.selection) && (0, utils_1.isMarkActive)(editor, type);
-    const onMouseDown = () => {
-        (0, utils_1.toggleMark)(editor, {
-            key: props.pluginKey,
-        });
-    };
-    return (react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: `${CLASS_NAME} ${CLASS_NAME}-mark ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: props.iconName, iconSize: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText }));
+    let t0;
+    if ($[0] !== editor || $[1] !== props.pluginKey) {
+        const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
+        t0 = (0, is_not_nil_1.isNotNil)(editor.selection) && (0, utils_1.isMarkActive)(editor, type);
+        $[0] = editor;
+        $[1] = props.pluginKey;
+        $[2] = t0;
+    }
+    else {
+        t0 = $[2];
+    }
+    const isActive = t0;
+    let t1;
+    if ($[3] !== editor || $[4] !== props.pluginKey) {
+        t1 = () => {
+            (0, utils_1.toggleMark)(editor, {
+                key: props.pluginKey
+            });
+        };
+        $[3] = editor;
+        $[4] = props.pluginKey;
+        $[5] = t1;
+    }
+    else {
+        t1 = $[5];
+    }
+    const onMouseDown = t1;
+    const t2 = `${CLASS_NAME} ${CLASS_NAME}-mark ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t3 = (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20;
+    let t4;
+    if ($[6] !== editor || $[7] !== isActive || $[8] !== onMouseDown || $[9] !== props.iconName || $[10] !== props.pluginKey || $[11] !== props.tooltipText || $[12] !== t2 || $[13] !== t3) {
+        t4 = react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: t2, editor: editor, iconName: props.iconName, iconSize: t3, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText });
+        $[6] = editor;
+        $[7] = isActive;
+        $[8] = onMouseDown;
+        $[9] = props.iconName;
+        $[10] = props.pluginKey;
+        $[11] = props.tooltipText;
+        $[12] = t2;
+        $[13] = t3;
+        $[14] = t4;
+    }
+    else {
+        t4 = $[14];
+    }
+    return t4;
 };
 exports.MarkToolbarButton = MarkToolbarButton;

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

@@ -4,32 +4,77 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
+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");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../../utils");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const ToolbarButton = (props) => {
+const ToolbarButton = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(13);
+    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) => {
-        if (e.button === 0) {
-            e.preventDefault();
-            e.stopPropagation();
-            onMouseDown(e);
-        }
-    };
+    let t0;
+    if ($[0] !== onMouseDown) {
+        t0 = e => {
+            if (e.button === 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                onMouseDown(e);
+            }
+        };
+        $[0] = onMouseDown;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const onLeftMouseDown = t0;
     if (!(0, utils_1.isPluginEnabled)(props.editor, props.pluginKey)) {
         return null;
     }
-    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) {
+    const t1 = `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t2 = props.isActive ? "default" : "secondary";
+    const t3 = (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20;
+    let t4;
+    if ($[2] !== props.iconName || $[3] !== t3) {
+        t4 = react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: props.iconName, size: t3 });
+        $[2] = props.iconName;
+        $[3] = t3;
+        $[4] = t4;
+    }
+    else {
+        t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== onLeftMouseDown || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
+        t5 = react_1.default.createElement(button_1.Button, { className: t1, isIconButton: true, onPointerDown: onLeftMouseDown, variant: t2 }, t4);
+        $[5] = onLeftMouseDown;
+        $[6] = t1;
+        $[7] = t2;
+        $[8] = t4;
+        $[9] = t5;
+    }
+    else {
+        t5 = $[9];
+    }
+    const button = t5;
+    if (isCoarsePointer) {
         return button;
     }
-    return (react_1.default.createElement(tooltip_1.Tooltip, { className: `${CLASS_NAME}__tooltip`, content: props.tooltipText }, button));
+    let t6;
+    if ($[10] !== button || $[11] !== props.tooltipText) {
+        t6 = react_1.default.createElement(tooltip_1.Tooltip, { className: `${CLASS_NAME}__tooltip`, content: props.tooltipText }, button);
+        $[10] = button;
+        $[11] = props.tooltipText;
+        $[12] = t6;
+    }
+    else {
+        t6 = $[12];
+    }
+    return t6;
 };
 exports.ToolbarButton = ToolbarButton;

package/ui/toolbar/buttons/undo-redo-button-group.js

@@ -1,74 +1,148 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UndoRedoButtonGroup = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const button_1 = require("@uxf/ui/button");
 const button_group_1 = require("@uxf/ui/button-group");
 const icon_1 = require("@uxf/ui/icon");
 const tooltip_1 = require("@uxf/ui/tooltip");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const UndoRedoButtonGroup = (props) => {
+const UndoRedoButtonGroup = props => {
     var _a;
+    const $ = (0, compiler_runtime_1.c)(26);
     const t = (0, translations_1.useUxfTranslation)();
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    const undoHandler = (0, react_1.useCallback)((e) => {
-        if (e.button === 0) {
-            e.preventDefault();
-            e.stopPropagation();
-            editor.undo();
-            (0, utils_1.focusEditor)(editor);
-        }
-    }, [editor]);
-    const redoHandler = (0, react_1.useCallback)((e) => {
-        if (e.button === 0) {
-            e.preventDefault();
-            e.stopPropagation();
-            editor.redo();
-            (0, utils_1.focusEditor)(editor);
-        }
-    }, [editor]);
-    return (react_1.default.createElement(button_group_1.ButtonGroup, { className: `${CLASS_NAME}-group ${CLASS_NAME}-group-undo-redo ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement(tooltip_1.Tooltip, { content: t("uxf-wysiwyg:plugins.actions.undo.tooltip") },
-            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-undo`, isDisabled: editor.history.undos.length === 0, isIconButton: true, onMouseDown: undoHandler, variant: "secondary" },
-                react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-left", size: 16 }))),
-        react_1.default.createElement(tooltip_1.Tooltip, { content: t("uxf-wysiwyg:plugins.actions.redo.tooltip") },
-            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-redo`, isDisabled: editor.history.redos.length === 0, isIconButton: true, onMouseDown: redoHandler, variant: "secondary" },
-                react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-right", size: 16 })))));
+    let t0;
+    if ($[0] !== editor) {
+        t0 = e => {
+            if (e.button === 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                editor.undo();
+                (0, utils_1.focusEditor)(editor);
+            }
+        };
+        $[0] = editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const undoHandler = t0;
+    let t1;
+    if ($[2] !== editor) {
+        t1 = e_0 => {
+            if (e_0.button === 0) {
+                e_0.preventDefault();
+                e_0.stopPropagation();
+                editor.redo();
+                (0, utils_1.focusEditor)(editor);
+            }
+        };
+        $[2] = editor;
+        $[3] = t1;
+    }
+    else {
+        t1 = $[3];
+    }
+    const redoHandler = t1;
+    const t2 = `${CLASS_NAME}-group ${CLASS_NAME}-group-undo-redo ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    let t3;
+    if ($[4] !== t) {
+        t3 = t("uxf-wysiwyg:plugins.actions.undo.tooltip");
+        $[4] = t;
+        $[5] = t3;
+    }
+    else {
+        t3 = $[5];
+    }
+    const t4 = editor.history.undos.length === 0;
+    let t5;
+    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-left", size: 16 });
+        $[6] = t5;
+    }
+    else {
+        t5 = $[6];
+    }
+    let t6;
+    if ($[7] !== t4 || $[8] !== undoHandler) {
+        t6 = react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-undo`, isDisabled: t4, isIconButton: true, onMouseDown: undoHandler, variant: "secondary" }, t5);
+        $[7] = t4;
+        $[8] = undoHandler;
+        $[9] = t6;
+    }
+    else {
+        t6 = $[9];
+    }
+    let t7;
+    if ($[10] !== t3 || $[11] !== t6) {
+        t7 = react_1.default.createElement(tooltip_1.Tooltip, { content: t3 }, t6);
+        $[10] = t3;
+        $[11] = t6;
+        $[12] = t7;
+    }
+    else {
+        t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== t) {
+        t8 = t("uxf-wysiwyg:plugins.actions.redo.tooltip");
+        $[13] = t;
+        $[14] = t8;
+    }
+    else {
+        t8 = $[14];
+    }
+    const t9 = editor.history.redos.length === 0;
+    let t10;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+        t10 = react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-right", size: 16 });
+        $[15] = t10;
+    }
+    else {
+        t10 = $[15];
+    }
+    let t11;
+    if ($[16] !== redoHandler || $[17] !== t9) {
+        t11 = react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-redo`, isDisabled: t9, isIconButton: true, onMouseDown: redoHandler, variant: "secondary" }, t10);
+        $[16] = redoHandler;
+        $[17] = t9;
+        $[18] = t11;
+    }
+    else {
+        t11 = $[18];
+    }
+    let t12;
+    if ($[19] !== t11 || $[20] !== t8) {
+        t12 = react_1.default.createElement(tooltip_1.Tooltip, { content: t8 }, t11);
+        $[19] = t11;
+        $[20] = t8;
+        $[21] = t12;
+    }
+    else {
+        t12 = $[21];
+    }
+    let t13;
+    if ($[22] !== t12 || $[23] !== t2 || $[24] !== t7) {
+        t13 = react_1.default.createElement(button_group_1.ButtonGroup, { className: t2 },
+            t7,
+            t12);
+        $[22] = t12;
+        $[23] = t2;
+        $[24] = t7;
+        $[25] = t13;
+    }
+    else {
+        t13 = $[25];
+    }
+    return t13;
 };
 exports.UndoRedoButtonGroup = UndoRedoButtonGroup;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoToolbarButton = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const translations_1 = require("@uxf/core-react/translations");
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../../hooks");
@@ -11,10 +12,44 @@ const create_video_plugin_1 = require("../../../plugins/embedded/video/create-vi
 const insert_video_modal_content_1 = require("../../video/insert-video-modal-content");
 const modal_toolbar_button_1 = require("./modal-toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
-const VideoToolbarButton = (props) => {
+const VideoToolbarButton = props => {
     var _a, _b;
+    const $ = (0, compiler_runtime_1.c)(10);
     const t = (0, translations_1.useUxfTranslation)();
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
-    return (react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: react_1.default.createElement(insert_video_modal_content_1.InsertVideoModalContent, { editor: editor }), className: `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, editor: editor, iconName: (_b = props.iconName) !== null && _b !== void 0 ? _b : "youtube", pluginKey: create_video_plugin_1.ELEMENT_VIDEO_EMBED, tooltipText: t("uxf-wysiwyg:plugins.video.tooltip") }));
+    let t0;
+    if ($[0] !== editor) {
+        t0 = react_1.default.createElement(insert_video_modal_content_1.InsertVideoModalContent, { editor: editor });
+        $[0] = editor;
+        $[1] = t0;
+    }
+    else {
+        t0 = $[1];
+    }
+    const t1 = `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
+    const t2 = (_b = props.iconName) !== null && _b !== void 0 ? _b : "youtube";
+    let t3;
+    if ($[2] !== t) {
+        t3 = t("uxf-wysiwyg:plugins.video.tooltip");
+        $[2] = t;
+        $[3] = t3;
+    }
+    else {
+        t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== editor || $[5] !== t0 || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+        t4 = react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: t0, className: t1, editor: editor, iconName: t2, pluginKey: create_video_plugin_1.ELEMENT_VIDEO_EMBED, tooltipText: t3 });
+        $[4] = editor;
+        $[5] = t0;
+        $[6] = t1;
+        $[7] = t2;
+        $[8] = t3;
+        $[9] = t4;
+    }
+    else {
+        t4 = $[9];
+    }
+    return t4;
 };
 exports.VideoToolbarButton = VideoToolbarButton;