@uxf/wysiwyg 10.0.0-beta.49 → 10.0.0-beta.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/wysiwyg",
-  "version": "10.0.0-beta.49",
+  "version": "10.0.0-beta.52",
   "description": "UXF Wysiwyg editor",
   "author": "Robin Dvorak <dvorak@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -10,12 +10,12 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "devDependencies": {
-    "@uxf/ui": "10.0.0-beta.49",
+    "@uxf/ui": "10.0.0-beta.52",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@uxf/ui": "10.0.0-beta.49",
+    "@uxf/ui": "10.0.0-beta.52",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/translations/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const TranslationContextProvider: import("react").Provider<import("./translations").TranslationFunction>;
+export declare const useTranslation: () => import("./translations").TranslationFunction;

package/translations/context.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTranslation = exports.TranslationContextProvider = void 0;
+const react_1 = require("react");
+const translations_1 = require("./translations");
+const TranslationContext = (0, react_1.createContext)(translations_1.defaultTranslationFunction);
+exports.TranslationContextProvider = TranslationContext.Provider;
+const useTranslation = () => (0, react_1.useContext)(TranslationContext);
+exports.useTranslation = useTranslation;

package/translations/translations.d.ts

@@ -0,0 +1,23 @@
+declare const translations: {
+    readonly "wysiwyg:plugins.bold.tooltip": "Tučné (Ctrl+B)";
+    readonly "wysiwyg:plugins.italic.tooltip": "Kurzíva (Ctrl+I)";
+    readonly "wysiwyg:plugins.underline.tooltip": "Podtržení (Ctrl+U)";
+    readonly "wysiwyg:plugins.code.tooltip": "Kód";
+    readonly "wysiwyg:plugins.highlight.tooltip": "Zvýraznění (Ctrl+Shift+H)";
+    readonly "wysiwyg:plugins.h1.tooltip": "Nadpis H1";
+    readonly "wysiwyg:plugins.h2.tooltip": "Nadpis H2";
+    readonly "wysiwyg:plugins.h3.tooltip": "Nadpis H3";
+    readonly "wysiwyg:plugins.h4.tooltip": "Nadpis H4";
+    readonly "wysiwyg:plugins.h5.tooltip": "Nadpis H5";
+    readonly "wysiwyg:plugins.h6.tooltip": "Nadpis H6";
+    readonly "wysiwyg:plugins.link.url-address.label": "URL adresa";
+    readonly "wysiwyg:plugins.link.url-address.placeholder": "Vložte URL adresu";
+    readonly "wysiwyg:plugins.link.link-text.label": "Text odkazu";
+    readonly "wysiwyg:plugins.link.link-text.placeholder": "Vložte text odkazu";
+    readonly "wysiwyg:plugins.link.open-in-new-tab": "Otevřít v nové záložce";
+};
+export type TranslationFunction = (key: keyof typeof translations, query?: {
+    [name: string]: any;
+}) => string;
+export declare const defaultTranslationFunction: TranslationFunction;
+export {};

package/translations/translations.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTranslationFunction = void 0;
+const translations = {
+    "wysiwyg:plugins.bold.tooltip": "Tučné (Ctrl+B)",
+    "wysiwyg:plugins.italic.tooltip": "Kurzíva (Ctrl+I)",
+    "wysiwyg:plugins.underline.tooltip": "Podtržení (Ctrl+U)",
+    "wysiwyg:plugins.code.tooltip": "Kód",
+    "wysiwyg:plugins.highlight.tooltip": "Zvýraznění (Ctrl+Shift+H)",
+    "wysiwyg:plugins.h1.tooltip": "Nadpis H1",
+    "wysiwyg:plugins.h2.tooltip": "Nadpis H2",
+    "wysiwyg:plugins.h3.tooltip": "Nadpis H3",
+    "wysiwyg:plugins.h4.tooltip": "Nadpis H4",
+    "wysiwyg:plugins.h5.tooltip": "Nadpis H5",
+    "wysiwyg:plugins.h6.tooltip": "Nadpis H6",
+    "wysiwyg:plugins.link.url-address.label": "URL adresa",
+    "wysiwyg:plugins.link.url-address.placeholder": "Vložte URL adresu",
+    "wysiwyg:plugins.link.link-text.label": "Text odkazu",
+    "wysiwyg:plugins.link.link-text.placeholder": "Vložte text odkazu",
+    "wysiwyg:plugins.link.open-in-new-tab": "Otevřít v nové záložce",
+};
+const defaultTranslationFunction = (key) => translations[key];
+exports.defaultTranslationFunction = defaultTranslationFunction;

package/ui/floating-link.js

@@ -36,6 +36,7 @@ const floating_link_wrapper_1 = require("../plugins/link/floating-link-wrapper")
 const hooks_2 = require("../plugins/link/hooks");
 const get_active_link_1 = require("../plugins/link/transforms/get-active-link");
 const unwrap_link_1 = require("../plugins/link/transforms/unwrap-link");
+const context_1 = require("../translations/context");
 const Edit = () => {
     var _a;
     const editor = (0, hooks_1.useUxfEditorRef)();
@@ -54,6 +55,7 @@ const Edit = () => {
             react_1.default.createElement(icon_1.Icon, { name: "delete", size: 15 }))));
 };
 const Insert = () => {
+    const t = (0, context_1.useTranslation)();
     const linkActions = (0, hooks_2.useLinkActions)();
     const onChangeTarget = (0, react_1.useCallback)((checked) => {
         linkActions.setTarget(checked ? "_blank" : "_self");
@@ -69,9 +71,9 @@ const Insert = () => {
         };
     }, []);
     return (react_1.default.createElement("div", { className: "w-80 bg-white p-4 shadow sm:rounded-lg" },
-        react_1.default.createElement(text_input_1.TextInput, { className: "first-input", leftAddon: react_1.default.createElement("span", { className: "mx-2 w-24" }, "URL adresa"), placeholder: "Vlo\u017Ete URL adresu", onChange: linkActions.setUrl, value: linkActions.getUrl }),
-        react_1.default.createElement(text_input_1.TextInput, { className: "mt-4", leftAddon: react_1.default.createElement("span", { className: "mx-2 w-24" }, "Text odkazu"), placeholder: "Vlo\u017Ete text odkazu", onChange: linkActions.setText, value: linkActions.getText }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: "mt-4", label: "Otev\u0159\u00EDt v nov\u00E9 z\u00E1lo\u017Ece", onChange: onChangeTarget, value: linkActions.getTarget === "_blank" })));
+        react_1.default.createElement(text_input_1.TextInput, { className: "first-input", leftAddon: react_1.default.createElement("span", { className: "mx-2 w-24" }, t("wysiwyg:plugins.link.url-address.label")), placeholder: t("wysiwyg:plugins.link.url-address.placeholder"), onChange: linkActions.setUrl, value: linkActions.getUrl }),
+        react_1.default.createElement(text_input_1.TextInput, { className: "mt-4", leftAddon: react_1.default.createElement("span", { className: "mx-2 w-24" }, t("wysiwyg:plugins.link.link-text.label")), placeholder: t("wysiwyg:plugins.link.link-text.placeholder"), onChange: linkActions.setText, value: linkActions.getText }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: "mt-4", label: t("wysiwyg:plugins.link.open-in-new-tab"), onChange: onChangeTarget, value: linkActions.getTarget === "_blank" })));
 };
 const FloatingLink = () => {
     const isEditing = (0, plate_link_1.useFloatingLinkSelectors)().isEditing();

package/ui/toolbar/toolbar.js

@@ -28,16 +28,18 @@ const constants_3 = require("../../plugins/link/constants");
 const button_1 = require("../../plugins/button");
 const types_7 = require("../../plugins/image/types");
 const create_video_plugin_1 = require("../../plugins/embedded/video/create-video-plugin");
+const context_1 = require("../../translations/context");
 const Toolbar = (props) => {
     const editor = (0, hooks_1.useUxfPlateEditorState)();
+    const t = (0, context_1.useTranslation)();
     return (react_1.default.createElement("div", { ...props, className: "mb-4 flex flex-wrap gap-2" },
         (0, utils_1.isSomeOfPluginsEnabled)(editor, constants_1.KEYS_HEADING) && (react_1.default.createElement(button_group_1.ButtonGroup, null,
-            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H1, icon: "h1", tooltipText: "Nadpis H1" }),
-            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H2, icon: "h2", tooltipText: "Nadpis H2" }),
-            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H3, icon: "h3", tooltipText: "Nadpis H3" }),
-            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H4, icon: "h4", tooltipText: "Nadpis H4" }),
-            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H5, icon: "h5", tooltipText: "Nadpis H5" }),
-            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H6, icon: "h6", tooltipText: "Nadpis H6" }))),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H1, icon: "h1", tooltipText: t("wysiwyg:plugins.h1.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H2, icon: "h2", tooltipText: t("wysiwyg:plugins.h2.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H3, icon: "h3", tooltipText: t("wysiwyg:plugins.h3.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H4, icon: "h4", tooltipText: t("wysiwyg:plugins.h4.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H5, icon: "h5", tooltipText: t("wysiwyg:plugins.h5.tooltip") }),
+            react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: constants_1.ELEMENT_H6, icon: "h6", tooltipText: t("wysiwyg:plugins.h6.tooltip") }))),
         (0, utils_1.isSomeOfPluginsEnabled)(editor, [
             types_2.BOLD_PLUGIN_KEY,
             types_4.ITALIC_PLUGIN_KEY,
@@ -45,11 +47,11 @@ const Toolbar = (props) => {
             types_3.CODE_PLUGIN_KEY,
             types_6.HIGHLIGHT_PLUGIN_KEY,
         ]) && (react_1.default.createElement(button_group_1.ButtonGroup, null,
-            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_2.BOLD_PLUGIN_KEY, iconName: "bold", iconSize: 12, tooltipText: "Tu\u010Dn\u00E9 (Ctrl+B)" }),
-            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_4.ITALIC_PLUGIN_KEY, iconName: "italic", iconSize: 12, tooltipText: "Kurz\u00EDva (Ctrl+I)" }),
-            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_5.UNDER_LINE_PLUGIN_KEY, iconName: "underline", iconSize: 14, tooltipText: "Podtr\u017Een\u00ED (Ctrl+U)" }),
-            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_3.CODE_PLUGIN_KEY, iconName: "code-simple", tooltipText: "K\u00F3d" }),
-            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_6.HIGHLIGHT_PLUGIN_KEY, iconName: "highlighter-line", iconSize: 19, tooltipText: "Zv\u00FDrazn\u011Bn\u00ED (Ctrl+Shift+H)" }))),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_2.BOLD_PLUGIN_KEY, iconName: "bold", iconSize: 12, tooltipText: t("wysiwyg:plugins.bold.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_4.ITALIC_PLUGIN_KEY, iconName: "italic", iconSize: 12, tooltipText: t("wysiwyg:plugins.italic.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_5.UNDER_LINE_PLUGIN_KEY, iconName: "underline", iconSize: 14, tooltipText: t("wysiwyg:plugins.underline.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_3.CODE_PLUGIN_KEY, iconName: "code-simple", tooltipText: t("wysiwyg:plugins.code.tooltip") }),
+            react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { pluginKey: types_6.HIGHLIGHT_PLUGIN_KEY, iconName: "highlighter-line", iconSize: 19, tooltipText: t("wysiwyg:plugins.highlight.tooltip") }))),
         react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { pluginKey: types_1.BLOCK_QUOTE_PLUGIN_KEY, icon: "block-quote", tooltipText: "Citace" }),
         (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_2.LIST_UNORDERED_TYPE, constants_2.LIST_ORDERED_TYPE]) && (react_1.default.createElement(button_group_1.ButtonGroup, null,
             react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { pluginKey: constants_2.LIST_UNORDERED_TYPE, iconName: "ul" }),

package/wysiwyg-editor.d.ts

@@ -1,10 +1,12 @@
 import { TEditableProps } from "@udecode/plate-core";
 import { FC } from "react";
 import { UxfPlatePlugin, WysiwygContent } from "./types";
+import { TranslationFunction } from "./translations/translations";
 export interface WysiwygEditorProps {
     initialValue: WysiwygContent | undefined;
     onChange: (value: WysiwygContent) => void;
     plugins: UxfPlatePlugin[];
     editableProps?: TEditableProps<WysiwygContent>;
+    t?: TranslationFunction;
 }
 export declare const WysiwygEditor: FC<WysiwygEditorProps>;

package/wysiwyg-editor.js

@@ -7,17 +7,20 @@ exports.WysiwygEditor = void 0;
 const plate_core_1 = require("@udecode/plate-core");
 const react_1 = __importDefault(require("react"));
 const toolbar_1 = require("./ui/toolbar/toolbar");
+const context_1 = require("./translations/context");
+const translations_1 = require("./translations/translations");
 const defaultEditableProps = {
     placeholder: "Napište něco hezkého...",
     spellCheck: false,
     autoFocus: true,
     readOnly: false,
 };
-// eslint-disable-next-line react/destructuring-assignment
-const WysiwygEditor = ({ initialValue, onChange, editableProps, plugins }) => {
-    return (react_1.default.createElement(plate_core_1.PlateProvider, { initialValue: initialValue, plugins: plugins, onChange: onChange },
-        react_1.default.createElement(toolbar_1.Toolbar, null),
-        react_1.default.createElement("div", { className: "wysiwyg" },
-            react_1.default.createElement(plate_core_1.Plate, { editableProps: { ...defaultEditableProps, ...editableProps }, normalizeInitialValue: true }))));
+const WysiwygEditor = (props) => {
+    var _a;
+    return (react_1.default.createElement(context_1.TranslationContextProvider, { value: (_a = props.t) !== null && _a !== void 0 ? _a : translations_1.defaultTranslationFunction },
+        react_1.default.createElement(plate_core_1.PlateProvider, { initialValue: props.initialValue, plugins: props.plugins, onChange: props.onChange },
+            react_1.default.createElement(toolbar_1.Toolbar, null),
+            react_1.default.createElement("div", { className: "wysiwyg" },
+                react_1.default.createElement(plate_core_1.Plate, { editableProps: { ...defaultEditableProps, ...props.editableProps }, normalizeInitialValue: true })))));
 };
 exports.WysiwygEditor = WysiwygEditor;