@uxf/wysiwyg 11.6.0 → 11.7.0

package/README.md

@@ -0,0 +1,14 @@
+# Wysiwyg
+
+## Installation
+
+```bash
+yarn add @uxf/core @uxf/ui @uxf/wysiwyg
+```
+
+## CSS Dependencies
+
+```css
+/** link plugin css */
+@import url("@uxf/wysiwyg/styles/base.css");
+```

package/components.d.ts

@@ -0,0 +1,7 @@
+import * as wysiwygEditorStories from "./wysiwyg-editor.stories";
+export declare const components: {
+    readonly "wysiwyg-editor": {
+        readonly title: "WysiwygEditor";
+        readonly stories: typeof wysiwygEditorStories;
+    };
+};

package/components.js

@@ -0,0 +1,34 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = void 0;
+// generated file
+const wysiwygEditorStories = __importStar(require("./wysiwyg-editor.stories"));
+exports.components = {
+    "wysiwyg-editor": {
+        title: "WysiwygEditor",
+        stories: wysiwygEditorStories
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/wysiwyg",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "UXF Wysiwyg editor",
   "author": "Robin Dvorak <dvorak@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -28,7 +28,7 @@
     "@udecode/plate-select": "20.7.2",
     "@udecode/plate-trailing-block": "20.7.2",
     "@uxf/core": "10.0.0",
-    "@uxf/ui": "11.6.0",
+    "@uxf/ui": "11.7.0",
     "slate": "0.90.0",
     "slate-history": "0.86.0",
     "slate-hyperscript": "0.77.0",

package/plugins/link/floating-link-wrapper.js

@@ -10,7 +10,7 @@ exports.FloatingLinkEditRoot = (0, plate_common_1.createComponentAs)((props) =>
     if (((_a = htmlProps.style) === null || _a === void 0 ? void 0 : _a.display) === "none") {
         return null;
     }
-    return (0, plate_common_1.createElementAs)("div", { ...htmlProps, style: { ...htmlProps.style, zIndex: tw_z_index_1.twZIndex.fixed } });
+    return (0, plate_common_1.createElementAs)("div", { ...htmlProps, style: { ...htmlProps.style, zIndex: tw_z_index_1.twZIndex.modal } });
 });
 exports.FloatingLinkInsertRoot = (0, plate_common_1.createComponentAs)((props) => {
     var _a;
@@ -18,7 +18,7 @@ exports.FloatingLinkInsertRoot = (0, plate_common_1.createComponentAs)((props) =
     if (((_a = htmlProps.style) === null || _a === void 0 ? void 0 : _a.display) === "none") {
         return null;
     }
-    return (0, plate_common_1.createElementAs)("div", { ...htmlProps, style: { ...htmlProps.style, zIndex: tw_z_index_1.twZIndex.fixed } });
+    return (0, plate_common_1.createElementAs)("div", { ...htmlProps, style: { ...htmlProps.style, zIndex: tw_z_index_1.twZIndex.modal } });
 });
 exports.FloatingLinkWrapper = {
     EditRoot: exports.FloatingLinkEditRoot,

package/wysiwyg-editor.stories.d.ts

@@ -0,0 +1,5 @@
+import { WysiwygContent } from "@uxf/wysiwyg";
+import React from "react";
+export declare const initialValue: WysiwygContent;
+export declare function Playground(): React.JSX.Element;
+export declare function SelectedPlugins(): React.JSX.Element;

package/wysiwyg-editor.stories.js

@@ -0,0 +1,190 @@
+"use strict";
+"use client";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedPlugins = exports.Playground = exports.initialValue = void 0;
+const wysiwyg_1 = require("@uxf/wysiwyg");
+const dynamic_no_ssr_1 = require("next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr");
+const react_1 = __importStar(require("react"));
+exports.initialValue = [
+    {
+        type: "h1",
+        id: "mnlt6",
+        children: [{ text: "Nadpis H1" }],
+    },
+    {
+        type: "h2",
+        id: "feu6s",
+        children: [{ text: "Nadpis H2" }],
+    },
+    {
+        type: "h3",
+        id: "i9cb4",
+        children: [{ text: "Nadpis H3" }],
+    },
+    {
+        type: "h4",
+        id: "967c7",
+        children: [{ text: "Nadpis H4" }],
+    },
+    {
+        type: "h5",
+        id: "4kyki",
+        children: [{ text: "Nadpis H5" }],
+    },
+    {
+        type: "h6",
+        id: "ximag",
+        children: [{ text: "Nadpis H6" }],
+    },
+    {
+        type: "paragraph",
+        id: "xnws3",
+        children: [
+            { text: "Toto je odstavec. " },
+            { type: "link", id: "j4bh1", url: "https://uxf.cz", target: "_blank", children: [{ text: "uxf.cz" }] },
+            { text: " " },
+            { text: "tučné ", bold: true },
+            { text: "kurzíva ", italic: true },
+            { text: "podtržení", underline: true },
+            { text: " kód", code: true },
+            { text: " " },
+            { text: "zvýraznění", highlight: true },
+        ],
+    },
+    {
+        type: "block-quote",
+        id: "imx33",
+        children: [{ text: "Toto je citace." }],
+    },
+    {
+        type: "ul",
+        id: "aq7rl",
+        children: [
+            {
+                type: "li",
+                id: "b8ljb",
+                children: [
+                    {
+                        type: "lic",
+                        id: "az5v2",
+                        children: [{ text: "Položka nečíslovaného seznamu" }],
+                    },
+                ],
+            },
+            {
+                type: "li",
+                id: "nq1e3",
+                children: [{ type: "lic", id: "dp5er", children: [{ text: "Druhá položka" }] }],
+            },
+        ],
+    },
+    {
+        type: "ol",
+        id: "hioy1",
+        children: [
+            {
+                type: "li",
+                id: "wm2vd",
+                children: [{ type: "lic", id: "q5ynx", children: [{ text: "Položka číslovaného seznamu" }] }],
+            },
+            {
+                type: "li",
+                id: "5qjr0",
+                children: [{ type: "lic", id: "8u41x", children: [{ text: "Druhá položka" }] }],
+            },
+        ],
+    },
+    {
+        type: "paragraph",
+        id: "9013p",
+        children: [
+            {
+                text: "Pokud vypneš nějaký plugin, zobrazení je nefunkční, ale v JSONu pořád je, protože je v initial values.",
+            },
+        ],
+    },
+];
+function Playground() {
+    const [value, setValue] = (0, react_1.useState)(exports.initialValue);
+    const plugins = (0, wysiwyg_1.createPluginsWithUi)([
+        (0, wysiwyg_1.createHeadingsPluginWithUi)({ disabledLevels: [1] }),
+        (0, wysiwyg_1.createBoldPluginWithUi)(),
+        (0, wysiwyg_1.createImagePluginWithUi)({
+            uploadImage: async (file) => ({
+                id: 1,
+                name: URL.createObjectURL(file),
+                extension: ".ext",
+                namespace: "wysiwyg",
+                uuid: "this-should-be-some-random-uuid",
+            }),
+            getImageUrl: (file) => file.name,
+        }),
+        (0, wysiwyg_1.createHighlightPluginWithUi)("red"),
+    ]);
+    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" },
+            react_1.default.createElement("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true" },
+                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(dynamic_no_ssr_1.NoSSR, null,
+            react_1.default.createElement("pre", null,
+                react_1.default.createElement("code", null, JSON.stringify(value, null, "    "))))));
+}
+exports.Playground = Playground;
+function SelectedPlugins() {
+    const _initialValues = [
+        { type: "paragraph", id: "mnlt6", children: [{ text: "Použití pouze vybraných pluginů" }] },
+    ];
+    const [value, setValue] = (0, react_1.useState)(_initialValues);
+    const plugins = (0, wysiwyg_1.createPluginsWithUi)([
+        (0, wysiwyg_1.createHeadingsPluginWithUi)({ disabledLevels: [1] }),
+        (0, wysiwyg_1.createBoldPluginWithUi)(),
+        (0, wysiwyg_1.createImagePluginWithUi)({
+            uploadImage: async (file) => ({
+                id: 1,
+                name: URL.createObjectURL(file),
+                extension: ".ext",
+                namespace: "wysiwyg",
+                uuid: "this-should-be-some-random-uuid",
+            }),
+            getImageUrl: (file) => file.name,
+        }),
+        (0, wysiwyg_1.createHighlightPluginWithUi)("red"),
+    ]);
+    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" },
+            react_1.default.createElement("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true" },
+                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(dynamic_no_ssr_1.NoSSR, null,
+            react_1.default.createElement("pre", null,
+                react_1.default.createElement("code", null, JSON.stringify(value, null, "    "))))));
+}
+exports.SelectedPlugins = SelectedPlugins;