@uxf/wysiwyg 11.88.1 → 11.89.0

package/create-all-plugins-with-ui.d.ts

@@ -41,20 +41,20 @@ export declare const createListPluginWithUi: () => {
     };
 };
 export declare const createLinkPluginWithUi: () => {
-    plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-link").LinkPlugin, import("./types").WysiwygContent, import("./types").UxfEditor>;
-    component: ElementUiComponent<import("./plugins/link/types").TLinkElement>;
+    plugin: import("./types").UxfPlatePlugin<import("@udecode/plate-link").LinkPlugin>;
+    component: ElementUiComponent;
 };
 export declare const createImagePluginWithUi: (options: UxfImagePluginOptions) => {
     plugin: import("@udecode/plate-core").PlatePlugin<UxfImagePluginOptions, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
-    component: ElementUiComponent<import("./types").UxfImageElement>;
+    component: ElementUiComponent;
 };
 export declare const createVideoPluginWithUi: () => {
     plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-media").MediaPlugin, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
-    component: ElementUiComponent<import("./types").UxfVideoElement>;
+    component: ElementUiComponent;
 };
 export declare const createButtonPluginWithUi: () => {
     plugin: import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("./types").WysiwygContent, import("@udecode/plate-core").PlateEditor<import("./types").WysiwygContent>>;
-    component: ElementUiComponent<import("./types").UxfButtonElement>;
+    component: ElementUiComponent;
 };
 export interface CreateAllPluginsOptions {
     image: UxfImagePluginOptions;

package/create-plugins-with-ui.d.ts

@@ -1,4 +1,4 @@
 import { MyOverrideByKey, UxfPlatePlugin, WysiwygPlugin, WysiwygRecursivePlugin } from "./types";
-export declare const createPluginsWithUi: (wysiwygPlugins: Array<WysiwygPlugin<any> | WysiwygRecursivePlugin<string>>, options?: {
+export declare const createPluginsWithUi: (wysiwygPlugins: Array<WysiwygPlugin | WysiwygRecursivePlugin<string>>, options?: {
     overrideByKey?: MyOverrideByKey;
 }) => UxfPlatePlugin[];

package/create-plugins-with-ui.js

@@ -41,6 +41,7 @@ const createPluginsWithUi = (wysiwygPlugins, options) => {
         ...plugins,
     ], {
         ...options,
+        // eslint-disable-next-line no-restricted-syntax
         components: pluginComponents /* TODO: fix this type mismatch */,
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/wysiwyg",
-    "version": "11.88.1",
+    "version": "11.89.0",
     "description": "UXF Wysiwyg editor",
     "author": "Robin Dvorak <dvorak@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -25,9 +25,9 @@
         "@udecode/plate-reset-node": "20.7.2",
         "@udecode/plate-select": "20.7.2",
         "@udecode/plate-trailing-block": "20.7.2",
-        "@uxf/core": "11.88.0",
-        "@uxf/core-react": "11.88.0",
-        "@uxf/ui": "11.88.1",
+        "@uxf/core": "11.89.0",
+        "@uxf/core-react": "11.89.0",
+        "@uxf/ui": "11.89.0",
         "slate": "0.90.0",
         "slate-history": "0.86.0",
         "slate-hyperscript": "0.77.0",

package/plugins/image/transforms/insert-image.js

@@ -12,7 +12,7 @@ const insertImage = (editor, file, alt, caption, source, url) => {
         alt,
         caption,
         source,
-        url: url,
+        url,
     };
     (0, utils_1.insertVoid)(editor, image);
 };

package/plugins/link/create-link-plugin.d.ts

@@ -1,3 +1,3 @@
 import { LinkPlugin } from "@udecode/plate-link";
-import { UxfEditor, WysiwygContent } from "../../types";
-export declare const createLinkPlugin: () => import("@udecode/plate-core").PlatePlugin<LinkPlugin, WysiwygContent, UxfEditor>;
+import { UxfPlatePlugin } from "../../types";
+export declare const createLinkPlugin: () => UxfPlatePlugin<LinkPlugin>;

package/plugins/node-id/add-ids-to-nodes.d.ts

@@ -1,2 +1,3 @@
+import { AnyObject } from "@udecode/plate-common";
 import { WysiwygContent } from "../../types";
-export declare const addIdsToNodes: (nodes: any[]) => WysiwygContent;
+export declare const addIdsToNodes: (nodes: AnyObject[]) => WysiwygContent;

package/types.d.ts

@@ -89,7 +89,7 @@ export interface UxfButtonElement extends UxfBlockElement {
     children: [EmptyText];
 }
 export type WysiwygRootBlock = UxfParagraphElement | UxfBlockQuoteElement | UxfImageElement | UxfHeadingElement | UxfLinkElement | UxfUnorderedListElement | UxfOrderedListElement | UxfVideoElement | UxfButtonElement;
-export type UiComponents = Record<string, PlatePluginComponent>;
+export type UiComponents = Partial<Record<string, PlatePluginComponent>>;
 export type WysiwygContent = WysiwygRootBlock[];
 export type RenderElementProps<E extends TElement = UxfBlockElement> = PlateRenderElementProps<WysiwygContent, E>;
 export type ElementUiComponent<E extends TElement = UxfBlockElement> = FC<RenderElementProps<E>>;

package/ui/button/button-element.d.ts

@@ -1,2 +1,2 @@
-import { ElementUiComponent, UxfButtonElement } from "../../types";
-export declare const ButtonElement: ElementUiComponent<UxfButtonElement>;
+import { ElementUiComponent } from "../../types";
+export declare const ButtonElement: ElementUiComponent;

package/ui/button/button-element.js

@@ -46,7 +46,7 @@ const insert_button_modal_content_1 = require("./insert-button-modal-content");
 const CLASS_NAME = "uxf-wysiwyg__element";
 const ButtonElement = (props) => {
     var _a;
-    const selected = (0, hooks_1.useSelected)();
+    const isSelected = (0, hooks_1.useSelected)();
     const onEdit = (0, react_1.useCallback)(() => {
         (0, modal_service_1.openModal)({
             children: (react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "lg" },
@@ -56,9 +56,10 @@ const ButtonElement = (props) => {
     const onRemove = (0, react_1.useCallback)(() => {
         (0, remove_selected_button_1.removeSelectedButton)(props.editor);
     }, [props.editor]);
+    const element = props.element;
     return (react_1.default.createElement("div", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-button ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-button__action-buttons`, isSelected: selected, onDelete: onRemove, onEdit: onEdit, padding: selected },
-            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME}-button__action-button`, href: props.element.buttonUrl, isDisabled: true, variant: "secondary" }, props.element.buttonText)),
+        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-button__action-buttons`, isSelected: isSelected, onDelete: onRemove, onEdit: onEdit, padding: isSelected },
+            react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME}-button__action-button`, href: element.buttonUrl, isDisabled: true, variant: "secondary" }, element.buttonText)),
         props.children));
 };
 exports.ButtonElement = ButtonElement;

package/ui/create-uxf-ui.d.ts

@@ -14,8 +14,8 @@ export declare const createUxfUi: () => {
     li: import("..").ElementUiComponent;
     ul: import("..").ElementUiComponent;
     ol: import("..").ElementUiComponent;
-    a: import("..").ElementUiComponent<import("../plugins/link/types").TLinkElement>;
-    img: import("..").ElementUiComponent<import("..").UxfImageElement>;
-    video: import("..").ElementUiComponent<import("..").UxfVideoElement>;
-    button: import("..").ElementUiComponent<import("..").UxfButtonElement>;
+    a: import("..").ElementUiComponent;
+    img: import("..").ElementUiComponent;
+    video: import("..").ElementUiComponent;
+    button: import("..").ElementUiComponent;
 };

package/ui/image/image-element.d.ts

@@ -1,2 +1,2 @@
-import { ElementUiComponent, UxfImageElement } from "../../types";
-export declare const ImageElement: ElementUiComponent<UxfImageElement>;
+import { ElementUiComponent } from "../../types";
+export declare const ImageElement: ElementUiComponent;

package/ui/image/image-element.js

@@ -45,7 +45,7 @@ const insert_image_modal_content_1 = require("./insert-image-modal-content");
 const CLASS_NAME = "uxf-wysiwyg__element";
 const ImageElement = (props) => {
     var _a;
-    const selected = (0, hooks_1.useSelected)();
+    const isSelected = (0, hooks_1.useSelected)();
     const onEdit = (0, react_1.useCallback)(() => {
         (0, modal_service_1.openModal)({
             children: (react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "lg" },
@@ -55,9 +55,10 @@ const ImageElement = (props) => {
     const onDelete = (0, react_1.useCallback)(() => {
         (0, remove_selected_image_1.removeSelectedImage)(props.editor);
     }, [props.editor]);
+    const element = props.element;
     return (react_1.default.createElement("div", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-image ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-image__action-buttons`, isSelected: selected, onDelete: onDelete, onEdit: onEdit },
-            react_1.default.createElement("img", { alt: props.element.alt, className: `${CLASS_NAME}-image__img`, src: props.element.url })),
+        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-image__action-buttons`, isSelected: isSelected, onDelete: onDelete, onEdit: onEdit },
+            react_1.default.createElement("img", { alt: element.alt, className: `${CLASS_NAME}-image__img`, src: element.url })),
         props.children));
 };
 exports.ImageElement = ImageElement;

package/ui/link-element.d.ts

@@ -1,3 +1,2 @@
-import { TLinkElement } from "../plugins/link/types";
 import { ElementUiComponent } from "../types";
-export declare const LinkElement: ElementUiComponent<TLinkElement>;
+export declare const LinkElement: ElementUiComponent;

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

@@ -5,18 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListToolbarButton = void 0;
 const plate_list_1 = require("@udecode/plate-list");
+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"));
 const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
 const toolbar_button_1 = require("./toolbar-button");
 const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
+function getIsListElementActive(editor, type) {
+    const res = (0, is_not_nil_1.isNotNil)(editor.selection) ? (0, plate_list_1.getListItemEntry)(editor) : undefined;
+    if ((0, is_nil_1.isNil)(res)) {
+        return false;
+    }
+    const [listElement] = res.list;
+    return listElement.type === type;
+}
 const ListToolbarButton = (props) => {
     var _a;
     const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
     const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
-    const res = (0, is_not_nil_1.isNotNil)(editor.selection) ? (0, plate_list_1.getListItemEntry)(editor) : undefined;
-    const isActive = (res === null || res === void 0 ? void 0 : res.list[0].type) === type;
+    const isActive = getIsListElementActive(editor, type);
     const onMouseDown = () => {
         (0, plate_list_1.toggleList)(editor, {
             type,

package/ui/video/video-element.d.ts

@@ -1,2 +1,2 @@
-import { ElementUiComponent, UxfVideoElement } from "../../types";
-export declare const VideoElement: ElementUiComponent<UxfVideoElement>;
+import { ElementUiComponent } from "../../types";
+export declare const VideoElement: ElementUiComponent;

package/ui/video/video-element.js

@@ -47,7 +47,7 @@ const CLASS_NAME = "uxf-wysiwyg__element";
 const VideoElement = (props) => {
     var _a;
     const t = (0, translations_1.useUxfTranslation)();
-    const selected = (0, hooks_1.useSelected)();
+    const isSelected = (0, hooks_1.useSelected)();
     const onEdit = (0, react_1.useCallback)(() => {
         (0, modal_service_1.openModal)({
             children: (react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "lg" },
@@ -57,9 +57,10 @@ const VideoElement = (props) => {
     const onDelete = (0, react_1.useCallback)(() => {
         (0, utils_1.removeSelectedNode)(props.editor);
     }, [props.editor]);
+    const element = props.element;
     return (react_1.default.createElement("div", { ...props.attributes, className: `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-video__action-buttons`, isSelected: selected, onDelete: onDelete, onEdit: onEdit },
-            react_1.default.createElement("iframe", { className: `${CLASS_NAME}-video__iframe`, src: props.element.embeddedUrl, tabIndex: -1, title: t("uxf-wysiwyg:plugins.video.iframe-title") })),
+        react_1.default.createElement(element_with_action_buttons_1.ElementWithActionButtons, { className: `${CLASS_NAME}-video__action-buttons`, isSelected: isSelected, onDelete: onDelete, onEdit: onEdit },
+            react_1.default.createElement("iframe", { className: `${CLASS_NAME}-video__iframe`, src: element.embeddedUrl, tabIndex: -1, title: t("uxf-wysiwyg:plugins.video.iframe-title") })),
         props.children));
 };
 exports.VideoElement = VideoElement;