@uxf/wysiwyg 13.0.3 → 14.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/hooks.js +21 -7
- package/package.json +8 -8
- package/plugins/image/create-image-plugin.js +6 -0
- package/plugins/image/image-upload-errors.test.d.ts +1 -0
- package/plugins/image/image-upload-errors.test.js +78 -0
- package/plugins/image/with-paste-image-url.js +24 -3
- package/plugins/link/floating-link-wrapper.js +111 -8
- package/plugins/link/hooks/use-floating-link-selectors.js +67 -7
- package/plugins/link/hooks/use-link-actions.js +127 -31
- package/plugins/link/hooks/use-link-submit-on-enter.js +58 -12
- package/ui/button/button-element.js +72 -48
- package/ui/button/insert-button-modal-content.js +183 -40
- package/ui/components/modal/modal-button-cancel.js +46 -44
- package/ui/floating-link.js +381 -46
- package/ui/image/image-element.js +72 -48
- package/ui/image/insert-image-modal-content.js +268 -45
- package/ui/paragraph-element.js +1 -1
- package/ui/paragraph-element.test.d.ts +1 -0
- package/ui/paragraph-element.test.js +15 -0
- package/ui/toolbar/buttons/button-toolbar-button.js +37 -2
- package/ui/toolbar/buttons/element-toolbar-button.js +53 -8
- package/ui/toolbar/buttons/image-toolbar-button.js +37 -2
- package/ui/toolbar/buttons/link-toolbar-button.js +53 -9
- package/ui/toolbar/buttons/list-toolbar-button.js +50 -9
- package/ui/toolbar/buttons/mark-toolbar-button.js +49 -9
- package/ui/toolbar/buttons/toolbar-button.js +59 -14
- package/ui/toolbar/buttons/undo-redo-button-group.js +132 -58
- package/ui/toolbar/buttons/video-toolbar-button.js +37 -2
- package/ui/toolbar/toolbar.js +162 -38
- package/ui/video/insert-video-modal-content.js +160 -36
- package/ui/video/video-element.js +83 -48
- package/wysiwyg-editor.js +187 -37
- package/wysiwyg-editor.stories.js +291 -121
package/hooks.js
CHANGED
|
@@ -2,13 +2,21 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useSelected = exports.usePlateStore = exports.useUxfPlateStates = exports.useUxfPlateActions = exports.useUxfPlateSelectors = exports.useUxfPlateEditorState = exports.useUxfEditorState = exports.useUxfEditorRef = exports.useUxfPlateEditorRef = void 0;
|
|
4
4
|
const react_1 = require("platejs/react");
|
|
5
|
-
const useUxfPlateEditorRef =
|
|
5
|
+
const useUxfPlateEditorRef = id => {
|
|
6
|
+
return (0, react_1.useEditorRef)((0, react_1.useEventPlateId)(id));
|
|
7
|
+
};
|
|
6
8
|
exports.useUxfPlateEditorRef = useUxfPlateEditorRef;
|
|
7
|
-
const useUxfEditorRef = () =>
|
|
9
|
+
const useUxfEditorRef = () => {
|
|
10
|
+
return (0, react_1.useEditorRef)();
|
|
11
|
+
};
|
|
8
12
|
exports.useUxfEditorRef = useUxfEditorRef;
|
|
9
|
-
const useUxfEditorState = () =>
|
|
13
|
+
const useUxfEditorState = () => {
|
|
14
|
+
return (0, react_1.useEditorState)();
|
|
15
|
+
};
|
|
10
16
|
exports.useUxfEditorState = useUxfEditorState;
|
|
11
|
-
const useUxfPlateEditorState =
|
|
17
|
+
const useUxfPlateEditorState = id => {
|
|
18
|
+
return (0, react_1.useEditorState)((0, react_1.useEventPlateId)(id));
|
|
19
|
+
};
|
|
12
20
|
exports.useUxfPlateEditorState = useUxfPlateEditorState;
|
|
13
21
|
/**
|
|
14
22
|
* Plate 53 merged the split selectors/actions/states store into one, so these three cannot honour
|
|
@@ -16,11 +24,17 @@ exports.useUxfPlateEditorState = useUxfPlateEditorState;
|
|
|
16
24
|
* type would emit a `.d.ts` pointing into `@platejs/core/node_modules` (TS2883) – use the re-exported
|
|
17
25
|
* `usePlateStore` instead. Nothing in the monorepo consumes them.
|
|
18
26
|
*/
|
|
19
|
-
const useUxfPlateSelectors =
|
|
27
|
+
const useUxfPlateSelectors = id => {
|
|
28
|
+
return (0, react_1.usePlateStore)(id);
|
|
29
|
+
};
|
|
20
30
|
exports.useUxfPlateSelectors = useUxfPlateSelectors;
|
|
21
|
-
const useUxfPlateActions =
|
|
31
|
+
const useUxfPlateActions = id => {
|
|
32
|
+
return (0, react_1.usePlateStore)(id);
|
|
33
|
+
};
|
|
22
34
|
exports.useUxfPlateActions = useUxfPlateActions;
|
|
23
|
-
const useUxfPlateStates =
|
|
35
|
+
const useUxfPlateStates = id => {
|
|
36
|
+
return (0, react_1.usePlateStore)(id);
|
|
37
|
+
};
|
|
24
38
|
exports.useUxfPlateStates = useUxfPlateStates;
|
|
25
39
|
var react_2 = require("platejs/react");
|
|
26
40
|
Object.defineProperty(exports, "usePlateStore", { enumerable: true, get: function () { return react_2.usePlateStore; } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/wysiwyg",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "14.1.0",
|
|
4
4
|
"description": "UXF Wysiwyg editor",
|
|
5
5
|
"author": "Robin Dvorak <dvorak@uxf.cz>",
|
|
6
6
|
"homepage": "https://gitlab.com/uxf-npm/wysiwyg",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"access": "public"
|
|
10
10
|
},
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "tsc -P tsconfig.json",
|
|
12
|
+
"build": "tsc -P tsconfig.json && node ../../scripts/build-react-package.mjs",
|
|
13
13
|
"typecheck": "tsc --noEmit"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
"@platejs/link": "53.3.5",
|
|
19
19
|
"@platejs/list-classic": "53.0.0",
|
|
20
20
|
"@platejs/media": "53.1.4",
|
|
21
|
-
"@uxf/core": "
|
|
22
|
-
"@uxf/core-react": "
|
|
23
|
-
"@uxf/ui": "
|
|
21
|
+
"@uxf/core": "14.1.0",
|
|
22
|
+
"@uxf/core-react": "14.1.0",
|
|
23
|
+
"@uxf/ui": "14.1.0",
|
|
24
24
|
"platejs": "53.3.15",
|
|
25
25
|
"react": "^19.3.0",
|
|
26
26
|
"react-dom": "^19.3.0"
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"@platejs/media": "53.1.4",
|
|
34
34
|
"@types/react": "19.3.0",
|
|
35
35
|
"@types/react-dom": "19.3.0",
|
|
36
|
-
"@uxf/core": "
|
|
37
|
-
"@uxf/core-react": "
|
|
38
|
-
"@uxf/ui": "
|
|
36
|
+
"@uxf/core": "14.1.0",
|
|
37
|
+
"@uxf/core-react": "14.1.0",
|
|
38
|
+
"@uxf/ui": "14.1.0",
|
|
39
39
|
"platejs": "53.3.15",
|
|
40
40
|
"react": "19.3.0",
|
|
41
41
|
"react-dom": "19.3.0"
|
|
@@ -34,6 +34,12 @@ const baseImagePlugin = (0, platejs_1.createSlatePlugin)({
|
|
|
34
34
|
request.open("GET", url, true);
|
|
35
35
|
request.responseType = "blob";
|
|
36
36
|
request.onload = () => {
|
|
37
|
+
// `onload` fires for any complete response, an error page included.
|
|
38
|
+
if (request.status < 200 || request.status >= 300) {
|
|
39
|
+
// eslint-disable-next-line no-console
|
|
40
|
+
console.error(`Error receiving image (${request.status}).`);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
37
43
|
const blob = request.response;
|
|
38
44
|
const file = new File([blob], "image-from-wysiwyg", {
|
|
39
45
|
type: blob.type,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const platejs_1 = require("platejs");
|
|
4
|
+
const create_paragraph_plugin_1 = require("../paragraph/create-paragraph-plugin");
|
|
5
|
+
const create_image_plugin_1 = require("./create-image-plugin");
|
|
6
|
+
const FILE = { extension: ".png", id: 1, name: "a.png", namespace: "wysiwyg", uuid: "u" };
|
|
7
|
+
function createEditor() {
|
|
8
|
+
const uploadImage = jest.fn(async () => FILE);
|
|
9
|
+
const editor = (0, platejs_1.createSlateEditor)({
|
|
10
|
+
plugins: [
|
|
11
|
+
(0, create_paragraph_plugin_1.createParagraphPlugin)(),
|
|
12
|
+
create_image_plugin_1.createImagePlugin.configure({ options: { getImageUrl: (file) => file.name, uploadImage } }),
|
|
13
|
+
],
|
|
14
|
+
value: [{ type: "p", children: [{ text: "" }] }],
|
|
15
|
+
});
|
|
16
|
+
editor.tf.select({ path: [0, 0], offset: 0 });
|
|
17
|
+
return { editor, uploadImage };
|
|
18
|
+
}
|
|
19
|
+
function textData(text) {
|
|
20
|
+
return {
|
|
21
|
+
effectAllowed: "uninitialized",
|
|
22
|
+
files: [],
|
|
23
|
+
getData: (type) => (type === "text/plain" ? text : ""),
|
|
24
|
+
types: ["text/plain"],
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
afterEach(() => {
|
|
28
|
+
jest.restoreAllMocks();
|
|
29
|
+
// jsdom has no fetch of its own.
|
|
30
|
+
delete global.fetch;
|
|
31
|
+
});
|
|
32
|
+
test("a pasted image URL that answers with an error is not uploaded", async () => {
|
|
33
|
+
global.fetch = jest.fn().mockResolvedValue({ ok: false, status: 404, blob: async () => new Blob() });
|
|
34
|
+
const { editor, uploadImage } = createEditor();
|
|
35
|
+
await editor.tf.insertData(textData("https://example.com/missing.png"));
|
|
36
|
+
expect(uploadImage).not.toHaveBeenCalled();
|
|
37
|
+
});
|
|
38
|
+
test("a pasted image URL that cannot be fetched at all neither rejects the paste nor uploads", async () => {
|
|
39
|
+
global.fetch = jest.fn().mockRejectedValue(new TypeError("Failed to fetch"));
|
|
40
|
+
const { editor, uploadImage } = createEditor();
|
|
41
|
+
await expect(editor.tf.insertData(textData("https://example.com/cors.png"))).resolves.not.toThrow();
|
|
42
|
+
expect(uploadImage).not.toHaveBeenCalled();
|
|
43
|
+
});
|
|
44
|
+
test("an <img> in pasted HTML whose download fails is not uploaded", () => {
|
|
45
|
+
var _a, _b, _c, _d;
|
|
46
|
+
jest.spyOn(console, "error").mockImplementation(() => undefined);
|
|
47
|
+
const requests = [];
|
|
48
|
+
jest.spyOn(window, "XMLHttpRequest").mockImplementation(function () {
|
|
49
|
+
const request = {
|
|
50
|
+
onload: () => undefined,
|
|
51
|
+
open: jest.fn(),
|
|
52
|
+
response: new Blob(["<html/>"]),
|
|
53
|
+
send: jest.fn(),
|
|
54
|
+
status: 404,
|
|
55
|
+
};
|
|
56
|
+
requests.push(request);
|
|
57
|
+
return request;
|
|
58
|
+
});
|
|
59
|
+
const { editor, uploadImage } = createEditor();
|
|
60
|
+
const element = document.createElement("img");
|
|
61
|
+
element.setAttribute("src", "https://example.com/missing.png");
|
|
62
|
+
(_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, {
|
|
63
|
+
editor,
|
|
64
|
+
element,
|
|
65
|
+
getOptions: () => editor.getOptions({ key: "img" }),
|
|
66
|
+
});
|
|
67
|
+
expect(requests).toHaveLength(1);
|
|
68
|
+
(_d = requests.at(0)) === null || _d === void 0 ? void 0 : _d.onload();
|
|
69
|
+
expect(uploadImage).not.toHaveBeenCalled();
|
|
70
|
+
});
|
|
71
|
+
test("a pasted image URL whose upload fails does not reject the paste", async () => {
|
|
72
|
+
global.fetch = jest
|
|
73
|
+
.fn()
|
|
74
|
+
.mockResolvedValue({ ok: true, status: 200, blob: async () => new Blob(["x"], { type: "image/png" }) });
|
|
75
|
+
const { editor, uploadImage } = createEditor();
|
|
76
|
+
uploadImage.mockRejectedValueOnce(new Error("Upload failed"));
|
|
77
|
+
await expect(editor.tf.insertData(textData("https://example.com/a.png"))).resolves.not.toThrow();
|
|
78
|
+
});
|
|
@@ -3,6 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.withPasteImageUrl = void 0;
|
|
4
4
|
const insert_image_1 = require("./transforms/insert-image");
|
|
5
5
|
const is_image_url_1 = require("./utils/is-image-url");
|
|
6
|
+
/** The image behind a pasted URL, or `null` when it cannot be downloaded (an error status, CORS, offline). */
|
|
7
|
+
async function downloadImage(url) {
|
|
8
|
+
try {
|
|
9
|
+
const response = await fetch(url, { mode: "cors" });
|
|
10
|
+
return response.ok ? await response.blob() : null;
|
|
11
|
+
}
|
|
12
|
+
catch {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
6
16
|
/**
|
|
7
17
|
* If inserted text is image url, upload image and insert it instead. The disable flag is checked
|
|
8
18
|
* inside the handler because `.overrideEditor` is installed when the plugin is defined.
|
|
@@ -16,15 +26,26 @@ const withPasteImageUrl = ({ editor, getOptions, tf: { insertData }, }) => ({
|
|
|
16
26
|
}
|
|
17
27
|
const text = dataTransfer.getData("text/plain");
|
|
18
28
|
if ((0, is_image_url_1.isImageUrl)(text)) {
|
|
19
|
-
const
|
|
20
|
-
|
|
29
|
+
const blob = await downloadImage(text);
|
|
30
|
+
if (!blob) {
|
|
31
|
+
// Pasted as text, as without this plugin. Uploading an error page as the image, or losing the
|
|
32
|
+
// paste to a rejected fetch, was worse.
|
|
33
|
+
return insertData(dataTransfer);
|
|
34
|
+
}
|
|
21
35
|
const file = new File([blob], "image-from-wysiwyg." + (0, is_image_url_1.getImageExtension)(text), { type: blob.type });
|
|
22
36
|
if (!uploadImage) {
|
|
23
37
|
// eslint-disable-next-line no-console
|
|
24
38
|
console.log("Missing uploadImage function in image plugin options!");
|
|
25
39
|
return;
|
|
26
40
|
}
|
|
27
|
-
|
|
41
|
+
let fileResponse;
|
|
42
|
+
try {
|
|
43
|
+
fileResponse = await uploadImage(file);
|
|
44
|
+
}
|
|
45
|
+
catch {
|
|
46
|
+
// A failed upload falls back to pasting the URL as text, like a failed download.
|
|
47
|
+
return insertData(dataTransfer);
|
|
48
|
+
}
|
|
28
49
|
if (!getImageUrl) {
|
|
29
50
|
// eslint-disable-next-line no-console
|
|
30
51
|
console.log("Missing getImageUrl function in image plugin options!");
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.FloatingLinkWrapper = void 0;
|
|
7
7
|
exports.FloatingLinkInsertRoot = FloatingLinkInsertRoot;
|
|
8
8
|
exports.FloatingLinkEditRoot = FloatingLinkEditRoot;
|
|
9
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
9
10
|
const floating_1 = require("@platejs/floating");
|
|
10
11
|
const react_1 = require("@platejs/link/react");
|
|
11
12
|
const tw_z_index_1 = require("@uxf/ui/tw-tokens/tw-z-index");
|
|
@@ -17,12 +18,16 @@ const react_2 = __importDefault(require("react"));
|
|
|
17
18
|
* Plate 20's verbatim.
|
|
18
19
|
*/
|
|
19
20
|
const FLOATING_DEFAULTS = {
|
|
20
|
-
middleware: [(0, floating_1.offset)(12), (0, floating_1.flip)({
|
|
21
|
-
|
|
21
|
+
middleware: [(0, floating_1.offset)(12), (0, floating_1.flip)({
|
|
22
|
+
padding: 96
|
|
23
|
+
})],
|
|
24
|
+
placement: "bottom-start"
|
|
22
25
|
};
|
|
23
26
|
/** `floatingOptions` is consumed by the hook and must not reach the DOM. */
|
|
24
27
|
function toDivProps(props) {
|
|
25
|
-
const divProps = {
|
|
28
|
+
const divProps = {
|
|
29
|
+
...props
|
|
30
|
+
};
|
|
26
31
|
delete divProps.floatingOptions;
|
|
27
32
|
return divProps;
|
|
28
33
|
}
|
|
@@ -34,22 +39,120 @@ function toDivProps(props) {
|
|
|
34
39
|
* The insert hook reports `hidden`; the edit hook does not, so it is derived from its state.
|
|
35
40
|
*/
|
|
36
41
|
function FloatingLinkInsertRoot(props) {
|
|
37
|
-
const
|
|
42
|
+
const $ = (0, compiler_runtime_1.c)(11);
|
|
43
|
+
let t0;
|
|
44
|
+
if ($[0] !== props.floatingOptions) {
|
|
45
|
+
t0 = {
|
|
46
|
+
floatingOptions: {
|
|
47
|
+
...FLOATING_DEFAULTS,
|
|
48
|
+
...props.floatingOptions
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
$[0] = props.floatingOptions;
|
|
52
|
+
$[1] = t0;
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
t0 = $[1];
|
|
56
|
+
}
|
|
57
|
+
const state = (0, react_1.useFloatingLinkInsertState)(t0);
|
|
38
58
|
const root = (0, react_1.useFloatingLinkInsert)(state);
|
|
59
|
+
const { ref: rootRef } = root;
|
|
39
60
|
if (root.hidden) {
|
|
40
61
|
return null;
|
|
41
62
|
}
|
|
42
|
-
|
|
63
|
+
let t1;
|
|
64
|
+
if ($[2] !== props) {
|
|
65
|
+
t1 = toDivProps(props);
|
|
66
|
+
$[2] = props;
|
|
67
|
+
$[3] = t1;
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
t1 = $[3];
|
|
71
|
+
}
|
|
72
|
+
let t2;
|
|
73
|
+
if ($[4] !== root.props.style) {
|
|
74
|
+
t2 = {
|
|
75
|
+
...root.props.style,
|
|
76
|
+
zIndex: tw_z_index_1.twZIndex.modal
|
|
77
|
+
};
|
|
78
|
+
$[4] = root.props.style;
|
|
79
|
+
$[5] = t2;
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
t2 = $[5];
|
|
83
|
+
}
|
|
84
|
+
let t3;
|
|
85
|
+
if ($[6] !== root.props || $[7] !== rootRef || $[8] !== t1 || $[9] !== t2) {
|
|
86
|
+
t3 = react_2.default.createElement("div", { ...t1, ...root.props, ref: rootRef, style: t2 });
|
|
87
|
+
$[6] = root.props;
|
|
88
|
+
$[7] = rootRef;
|
|
89
|
+
$[8] = t1;
|
|
90
|
+
$[9] = t2;
|
|
91
|
+
$[10] = t3;
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
t3 = $[10];
|
|
95
|
+
}
|
|
96
|
+
return t3;
|
|
43
97
|
}
|
|
44
98
|
function FloatingLinkEditRoot(props) {
|
|
45
|
-
const
|
|
99
|
+
const $ = (0, compiler_runtime_1.c)(11);
|
|
100
|
+
let t0;
|
|
101
|
+
if ($[0] !== props.floatingOptions) {
|
|
102
|
+
t0 = {
|
|
103
|
+
floatingOptions: {
|
|
104
|
+
...FLOATING_DEFAULTS,
|
|
105
|
+
...props.floatingOptions
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
$[0] = props.floatingOptions;
|
|
109
|
+
$[1] = t0;
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
t0 = $[1];
|
|
113
|
+
}
|
|
114
|
+
const state = (0, react_1.useFloatingLinkEditState)(t0);
|
|
46
115
|
const root = (0, react_1.useFloatingLinkEdit)(state);
|
|
116
|
+
const { ref: rootRef } = root;
|
|
47
117
|
if (state.readOnly || !state.isOpen) {
|
|
48
118
|
return null;
|
|
49
119
|
}
|
|
50
|
-
|
|
120
|
+
let t1;
|
|
121
|
+
if ($[2] !== props) {
|
|
122
|
+
t1 = toDivProps(props);
|
|
123
|
+
$[2] = props;
|
|
124
|
+
$[3] = t1;
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
t1 = $[3];
|
|
128
|
+
}
|
|
129
|
+
let t2;
|
|
130
|
+
if ($[4] !== root.props.style) {
|
|
131
|
+
t2 = {
|
|
132
|
+
...root.props.style,
|
|
133
|
+
zIndex: tw_z_index_1.twZIndex.modal
|
|
134
|
+
};
|
|
135
|
+
$[4] = root.props.style;
|
|
136
|
+
$[5] = t2;
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
t2 = $[5];
|
|
140
|
+
}
|
|
141
|
+
let t3;
|
|
142
|
+
if ($[6] !== root.props || $[7] !== rootRef || $[8] !== t1 || $[9] !== t2) {
|
|
143
|
+
t3 = react_2.default.createElement("div", { ...t1, ...root.props, ref: rootRef, style: t2 });
|
|
144
|
+
$[6] = root.props;
|
|
145
|
+
$[7] = rootRef;
|
|
146
|
+
$[8] = t1;
|
|
147
|
+
$[9] = t2;
|
|
148
|
+
$[10] = t3;
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
t3 = $[10];
|
|
152
|
+
}
|
|
153
|
+
return t3;
|
|
51
154
|
}
|
|
52
155
|
exports.FloatingLinkWrapper = {
|
|
53
156
|
EditRoot: FloatingLinkEditRoot,
|
|
54
|
-
InsertRoot: FloatingLinkInsertRoot
|
|
157
|
+
InsertRoot: FloatingLinkInsertRoot
|
|
55
158
|
};
|
|
@@ -1,21 +1,81 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useFloatingLinkSelectors = void 0;
|
|
4
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
4
5
|
const react_1 = require("@platejs/link/react");
|
|
5
6
|
const react_2 = require("platejs/react");
|
|
6
7
|
/** Shim over `LinkPlugin` options, so the three call sites keep the Plate 20 getter-bundle shape. */
|
|
7
8
|
const useFloatingLinkSelectors = () => {
|
|
9
|
+
const $ = (0, compiler_runtime_1.c)(16);
|
|
8
10
|
const isEditing = (0, react_2.usePluginOption)(react_1.LinkPlugin, "isEditing");
|
|
9
11
|
const url = (0, react_2.usePluginOption)(react_1.LinkPlugin, "url");
|
|
10
12
|
const text = (0, react_2.usePluginOption)(react_1.LinkPlugin, "text");
|
|
11
13
|
const newTab = (0, react_2.usePluginOption)(react_1.LinkPlugin, "newTab");
|
|
12
14
|
const mode = (0, react_2.usePluginOption)(react_1.LinkPlugin, "mode");
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
let t0;
|
|
16
|
+
if ($[0] !== isEditing) {
|
|
17
|
+
t0 = () => isEditing;
|
|
18
|
+
$[0] = isEditing;
|
|
19
|
+
$[1] = t0;
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
t0 = $[1];
|
|
23
|
+
}
|
|
24
|
+
let t1;
|
|
25
|
+
if ($[2] !== mode) {
|
|
26
|
+
t1 = () => mode;
|
|
27
|
+
$[2] = mode;
|
|
28
|
+
$[3] = t1;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
t1 = $[3];
|
|
32
|
+
}
|
|
33
|
+
let t2;
|
|
34
|
+
if ($[4] !== newTab) {
|
|
35
|
+
t2 = () => newTab;
|
|
36
|
+
$[4] = newTab;
|
|
37
|
+
$[5] = t2;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
t2 = $[5];
|
|
41
|
+
}
|
|
42
|
+
let t3;
|
|
43
|
+
if ($[6] !== text) {
|
|
44
|
+
t3 = () => text;
|
|
45
|
+
$[6] = text;
|
|
46
|
+
$[7] = t3;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
t3 = $[7];
|
|
50
|
+
}
|
|
51
|
+
let t4;
|
|
52
|
+
if ($[8] !== url) {
|
|
53
|
+
t4 = () => url;
|
|
54
|
+
$[8] = url;
|
|
55
|
+
$[9] = t4;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
t4 = $[9];
|
|
59
|
+
}
|
|
60
|
+
let t5;
|
|
61
|
+
if ($[10] !== t0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
|
|
62
|
+
t5 = {
|
|
63
|
+
isEditing: t0,
|
|
64
|
+
mode: t1,
|
|
65
|
+
newTab: t2,
|
|
66
|
+
text: t3,
|
|
67
|
+
url: t4
|
|
68
|
+
};
|
|
69
|
+
$[10] = t0;
|
|
70
|
+
$[11] = t1;
|
|
71
|
+
$[12] = t2;
|
|
72
|
+
$[13] = t3;
|
|
73
|
+
$[14] = t4;
|
|
74
|
+
$[15] = t5;
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
t5 = $[15];
|
|
78
|
+
}
|
|
79
|
+
return t5;
|
|
20
80
|
};
|
|
21
81
|
exports.useFloatingLinkSelectors = useFloatingLinkSelectors;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useLinkActions = void 0;
|
|
4
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
4
5
|
const react_1 = require("@platejs/link/react");
|
|
5
6
|
const hooks_1 = require("../../../hooks");
|
|
6
7
|
const get_active_link_1 = require("../transforms/get-active-link");
|
|
@@ -12,40 +13,135 @@ const use_link_submit_on_enter_1 = require("./use-link-submit-on-enter");
|
|
|
12
13
|
* `editor`, which used to be `editor.current` and so always `undefined`. Nothing reads it.
|
|
13
14
|
*/
|
|
14
15
|
const useLinkActions = () => {
|
|
16
|
+
const $ = (0, compiler_runtime_1.c)(30);
|
|
15
17
|
const editor = (0, hooks_1.useUxfEditorRef)();
|
|
16
18
|
(0, use_link_submit_on_enter_1.useLinkSubmitOnEnter)();
|
|
17
19
|
(0, use_link_cancel_on_escape_1.useLinkCancelOnEscape)();
|
|
18
20
|
const floatingLinkSelectors = (0, use_floating_link_selectors_1.useFloatingLinkSelectors)();
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
21
|
+
let t0;
|
|
22
|
+
if ($[0] !== editor) {
|
|
23
|
+
t0 = url => {
|
|
24
|
+
editor.setOption(react_1.LinkPlugin, "url", url);
|
|
25
|
+
editor.setOption(react_1.LinkPlugin, "isEditing", true);
|
|
26
|
+
};
|
|
27
|
+
$[0] = editor;
|
|
28
|
+
$[1] = t0;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
t0 = $[1];
|
|
32
|
+
}
|
|
33
|
+
const setUrl = t0;
|
|
34
|
+
let t1;
|
|
35
|
+
if ($[2] !== editor) {
|
|
36
|
+
t1 = text => {
|
|
37
|
+
editor.setOption(react_1.LinkPlugin, "text", text);
|
|
38
|
+
editor.setOption(react_1.LinkPlugin, "isEditing", true);
|
|
39
|
+
};
|
|
40
|
+
$[2] = editor;
|
|
41
|
+
$[3] = t1;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
t1 = $[3];
|
|
45
|
+
}
|
|
46
|
+
const setText = t1;
|
|
47
|
+
let t2;
|
|
48
|
+
if ($[4] !== editor) {
|
|
49
|
+
t2 = target => {
|
|
50
|
+
editor.setOption(react_1.LinkPlugin, "newTab", target === "_blank");
|
|
51
|
+
editor.setOption(react_1.LinkPlugin, "isEditing", true);
|
|
52
|
+
};
|
|
53
|
+
$[4] = editor;
|
|
54
|
+
$[5] = t2;
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
t2 = $[5];
|
|
58
|
+
}
|
|
59
|
+
const setTarget = t2;
|
|
60
|
+
let t3;
|
|
61
|
+
if ($[6] !== editor || $[7] !== setTarget || $[8] !== setText || $[9] !== setUrl) {
|
|
62
|
+
t3 = (url_0, text_0, target_0) => {
|
|
63
|
+
setUrl(url_0);
|
|
64
|
+
setText(text_0);
|
|
65
|
+
setTarget(target_0);
|
|
66
|
+
editor.setOption(react_1.LinkPlugin, "isEditing", true);
|
|
67
|
+
};
|
|
68
|
+
$[6] = editor;
|
|
69
|
+
$[7] = setTarget;
|
|
70
|
+
$[8] = setText;
|
|
71
|
+
$[9] = setUrl;
|
|
72
|
+
$[10] = t3;
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
t3 = $[10];
|
|
76
|
+
}
|
|
77
|
+
const setAllValues = t3;
|
|
78
|
+
let t4;
|
|
79
|
+
if ($[11] !== editor) {
|
|
80
|
+
t4 = () => (0, get_active_link_1.getActiveLink)(editor);
|
|
81
|
+
$[11] = editor;
|
|
82
|
+
$[12] = t4;
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
t4 = $[12];
|
|
86
|
+
}
|
|
87
|
+
const getActiveLinkValue = t4;
|
|
88
|
+
const t5 = floatingLinkSelectors.newTab() ? "_blank" : "_self";
|
|
89
|
+
let t6;
|
|
90
|
+
if ($[13] !== floatingLinkSelectors) {
|
|
91
|
+
t6 = floatingLinkSelectors.text();
|
|
92
|
+
$[13] = floatingLinkSelectors;
|
|
93
|
+
$[14] = t6;
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
t6 = $[14];
|
|
97
|
+
}
|
|
98
|
+
let t7;
|
|
99
|
+
if ($[15] !== floatingLinkSelectors) {
|
|
100
|
+
t7 = floatingLinkSelectors.url();
|
|
101
|
+
$[15] = floatingLinkSelectors;
|
|
102
|
+
$[16] = t7;
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
t7 = $[16];
|
|
106
|
+
}
|
|
107
|
+
let t8;
|
|
108
|
+
if ($[17] !== floatingLinkSelectors) {
|
|
109
|
+
t8 = floatingLinkSelectors.isEditing();
|
|
110
|
+
$[17] = floatingLinkSelectors;
|
|
111
|
+
$[18] = t8;
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
t8 = $[18];
|
|
115
|
+
}
|
|
116
|
+
let t9;
|
|
117
|
+
if ($[19] !== editor || $[20] !== getActiveLinkValue || $[21] !== setAllValues || $[22] !== setTarget || $[23] !== setText || $[24] !== setUrl || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8) {
|
|
118
|
+
t9 = {
|
|
119
|
+
editor,
|
|
120
|
+
getActiveLinkValue,
|
|
121
|
+
getTarget: t5,
|
|
122
|
+
getText: t6,
|
|
123
|
+
getUrl: t7,
|
|
124
|
+
isEditing: t8,
|
|
125
|
+
setAllValues,
|
|
126
|
+
setTarget,
|
|
127
|
+
setText,
|
|
128
|
+
setUrl
|
|
129
|
+
};
|
|
130
|
+
$[19] = editor;
|
|
131
|
+
$[20] = getActiveLinkValue;
|
|
132
|
+
$[21] = setAllValues;
|
|
133
|
+
$[22] = setTarget;
|
|
134
|
+
$[23] = setText;
|
|
135
|
+
$[24] = setUrl;
|
|
136
|
+
$[25] = t5;
|
|
137
|
+
$[26] = t6;
|
|
138
|
+
$[27] = t7;
|
|
139
|
+
$[28] = t8;
|
|
140
|
+
$[29] = t9;
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
t9 = $[29];
|
|
144
|
+
}
|
|
145
|
+
return t9;
|
|
50
146
|
};
|
|
51
147
|
exports.useLinkActions = useLinkActions;
|