@uxf/wysiwyg 11.129.0 → 11.130.1
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/README.md +9 -7
- package/create-all-plugins-with-ui.d.ts +78 -14
- package/create-all-plugins-with-ui.js +3 -5
- package/create-plugins-with-ui.d.ts +2 -2
- package/create-plugins-with-ui.js +25 -30
- package/data-format.test.d.ts +1 -0
- package/data-format.test.js +132 -0
- package/editor-smoke.test.d.ts +1 -0
- package/editor-smoke.test.js +9 -0
- package/hooks.d.ts +1971 -8
- package/hooks.js +18 -11
- package/package.json +15 -47
- package/plugins/blockquote/create-blockquote-plugin.d.ts +9 -3
- package/plugins/blockquote/create-blockquote-plugin.js +31 -3
- package/plugins/blockquote/create-blockquote-plugin.test.d.ts +1 -0
- package/plugins/blockquote/create-blockquote-plugin.test.js +57 -0
- package/plugins/blockquote/types.d.ts +1 -1
- package/plugins/blockquote/types.js +2 -2
- package/plugins/button/create-button-plugin.d.ts +1 -2
- package/plugins/button/create-button-plugin.js +3 -5
- package/plugins/button/transforms/is-button-active.js +1 -2
- package/plugins/button/transforms/update-button.js +1 -2
- package/plugins/constants.test.d.ts +1 -0
- package/plugins/constants.test.js +52 -0
- package/plugins/embedded/types.d.ts +6 -0
- package/plugins/embedded/types.js +2 -0
- package/plugins/embedded/utils.d.ts +2 -1
- package/plugins/embedded/utils.js +4 -4
- package/plugins/embedded/video/create-video-plugin.d.ts +10 -3
- package/plugins/embedded/video/create-video-plugin.js +8 -9
- package/plugins/embedded/video/create-video-plugin.test.d.ts +1 -0
- package/plugins/embedded/video/create-video-plugin.test.js +30 -0
- package/plugins/embedded/video/update-video.js +1 -2
- package/plugins/exit-break/create-exit-break-plugin.d.ts +8 -3
- package/plugins/exit-break/create-exit-break-plugin.js +8 -25
- package/plugins/heading/create-headings-plugin.d.ts +13 -4
- package/plugins/heading/create-headings-plugin.js +22 -36
- package/plugins/heading/create-headings-plugin.test.d.ts +1 -0
- package/plugins/heading/create-headings-plugin.test.js +42 -0
- package/plugins/highlight/createHighlightPlugin.d.ts +4 -2
- package/plugins/highlight/createHighlightPlugin.js +17 -19
- package/plugins/highlight/types.d.ts +1 -2
- package/plugins/image/create-image-plugin.d.ts +3 -3
- package/plugins/image/create-image-plugin.js +58 -91
- package/plugins/image/create-image-plugin.test.d.ts +1 -0
- package/plugins/image/create-image-plugin.test.js +33 -0
- package/plugins/image/transforms/is-image-active.js +1 -2
- package/plugins/image/transforms/update-image.js +1 -2
- package/plugins/image/types.d.ts +6 -3
- package/plugins/image/types.js +2 -2
- package/plugins/image/utils/is-image-url.js +2 -2
- package/plugins/image/with-paste-image-url.d.ts +5 -5
- package/plugins/image/with-paste-image-url.js +29 -25
- package/plugins/image/with-paste-image.d.ts +4 -7
- package/plugins/image/with-paste-image.js +41 -39
- package/plugins/link/constants.d.ts +1 -1
- package/plugins/link/constants.js +2 -2
- package/plugins/link/create-link-plugin.d.ts +38 -3
- package/plugins/link/create-link-plugin.js +9 -7
- package/plugins/link/create-link-plugin.test.d.ts +1 -0
- package/plugins/link/create-link-plugin.test.js +24 -0
- package/plugins/link/floating-link-wrapper.d.ts +14 -7
- package/plugins/link/floating-link-wrapper.js +46 -17
- package/plugins/link/hooks/index.d.ts +1 -1
- package/plugins/link/hooks/index.js +2 -2
- package/plugins/link/hooks/use-floating-link-selectors.d.ts +8 -0
- package/plugins/link/hooks/use-floating-link-selectors.js +21 -0
- package/plugins/link/hooks/use-link-actions.d.ts +991 -8
- package/plugins/link/hooks/use-link-actions.js +22 -19
- package/plugins/link/hooks/use-link-cancel-on-escape.d.ts +1 -1
- package/plugins/link/hooks/use-link-cancel-on-escape.js +2 -2
- package/plugins/link/hooks/use-link-submit-on-enter.js +5 -5
- package/plugins/link/transforms/get-active-link.d.ts +1 -1
- package/plugins/link/transforms/get-active-link.js +3 -5
- package/plugins/link/transforms/insert-link.js +9 -9
- package/plugins/link/transforms/submit-link.d.ts +2 -3
- package/plugins/link/transforms/submit-link.js +13 -13
- package/plugins/link/transforms/trigger-link-insert-or-edit.js +2 -2
- package/plugins/link/transforms/unwrap-link.js +2 -2
- package/plugins/list/constants.d.ts +11 -3
- package/plugins/list/constants.js +14 -10
- package/plugins/list/create-list-plugin.d.ts +26 -4
- package/plugins/list/create-list-plugin.js +13 -12
- package/plugins/list/create-list-plugin.test.d.ts +1 -0
- package/plugins/list/create-list-plugin.test.js +20 -0
- package/plugins/mark-bold/create-bold-plugin.d.ts +3 -3
- package/plugins/mark-bold/create-bold-plugin.js +2 -2
- package/plugins/mark-bold/types.d.ts +2 -2
- package/plugins/mark-bold/types.js +3 -3
- package/plugins/mark-code/create-code-plugin.d.ts +7 -3
- package/plugins/mark-code/create-code-plugin.js +6 -2
- package/plugins/mark-code/types.d.ts +2 -2
- package/plugins/mark-code/types.js +3 -3
- package/plugins/mark-italic/create-italic-plugin.d.ts +3 -3
- package/plugins/mark-italic/create-italic-plugin.js +2 -2
- package/plugins/mark-italic/types.d.ts +2 -2
- package/plugins/mark-italic/types.js +3 -3
- package/plugins/mark-underline/create-underline-plugin.d.ts +3 -3
- package/plugins/mark-underline/create-underline-plugin.js +2 -2
- package/plugins/mark-underline/types.d.ts +2 -2
- package/plugins/mark-underline/types.js +3 -3
- package/plugins/marks.test.d.ts +1 -0
- package/plugins/marks.test.js +42 -0
- package/plugins/node-id/add-ids-to-nodes.d.ts +1 -1
- package/plugins/node-id/create-node-id-plugin.d.ts +22 -3
- package/plugins/node-id/create-node-id-plugin.js +3 -2
- package/plugins/paragraph/create-paragraph-plugin.d.ts +1 -3
- package/plugins/paragraph/create-paragraph-plugin.js +3 -4
- package/plugins/paragraph/types.d.ts +1 -1
- package/plugins/paragraph/types.js +2 -2
- package/plugins/structural.test.d.ts +1 -0
- package/plugins/structural.test.js +29 -0
- package/plugins/trailing-block/create-trailing-block-plugin.d.ts +13 -3
- package/plugins/trailing-block/create-trailing-block-plugin.js +8 -2
- package/serializers/serialize-to-plaintext.js +2 -2
- package/styles/styles.css +1 -0
- package/types.d.ts +23 -14
- package/ui/floating-link.js +28 -28
- package/ui/highlight-mark.d.ts +2 -3
- package/ui/highlight-mark.js +4 -1
- package/ui/link-element.js +6 -3
- package/ui/toolbar/buttons/button-toolbar-button.d.ts +1 -1
- package/ui/toolbar/buttons/element-toolbar-button.d.ts +1 -1
- package/ui/toolbar/buttons/image-toolbar-button.d.ts +1 -1
- package/ui/toolbar/buttons/link-toolbar-button.d.ts +1 -1
- package/ui/toolbar/buttons/link-toolbar-button.js +1 -1
- package/ui/toolbar/buttons/list-toolbar-button.d.ts +1 -1
- package/ui/toolbar/buttons/list-toolbar-button.js +3 -3
- package/ui/toolbar/buttons/mark-toolbar-button.d.ts +1 -1
- package/ui/toolbar/buttons/undo-redo-button-group.d.ts +1 -1
- package/ui/toolbar/buttons/video-toolbar-button.d.ts +1 -1
- package/ui/toolbar/types.d.ts +1 -1
- package/ui/utils.js +1 -1
- package/utils.d.ts +18 -19
- package/utils.js +31 -28
- package/utils.test.d.ts +1 -0
- package/utils.test.js +23 -0
- package/wysiwyg-editor.d.ts +2 -2
- package/wysiwyg-editor.js +29 -23
- package/wysiwyg-editor.test.js +111 -6
- package/plugins/image/with-image.d.ts +0 -7
- package/plugins/image/with-image.js +0 -19
- package/plugins/reset-node/create-reset-node.d.ts +0 -3
- package/plugins/reset-node/create-reset-node.js +0 -28
- package/plugins/select-on-backspace/create-select-on-backspace-plugin.d.ts +0 -3
- package/plugins/select-on-backspace/create-select-on-backspace-plugin.js +0 -14
- package/plugins/soft-break/create-soft-break-plugin.d.ts +0 -3
- package/plugins/soft-break/create-soft-break-plugin.js +0 -22
|
@@ -0,0 +1,42 @@
|
|
|
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 constants_1 = require("./constants");
|
|
6
|
+
const create_headings_plugin_1 = require("./create-headings-plugin");
|
|
7
|
+
function editor(disabledLevels) {
|
|
8
|
+
return (0, platejs_1.createSlateEditor)({
|
|
9
|
+
plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), (0, create_headings_plugin_1.createHeadingsPlugin)({ options: { disabledLevels } })],
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
describe("headings", () => {
|
|
13
|
+
it("registers all six levels by default", () => {
|
|
14
|
+
const registered = constants_1.KEYS_HEADING.filter((key) => Boolean(editor().plugins[key]));
|
|
15
|
+
expect(registered).toEqual(constants_1.KEYS_HEADING);
|
|
16
|
+
});
|
|
17
|
+
it("omits disabled levels entirely", () => {
|
|
18
|
+
const withoutFirstAndLast = editor([1, 6]);
|
|
19
|
+
expect(withoutFirstAndLast.plugins.h1).toBeUndefined();
|
|
20
|
+
expect(withoutFirstAndLast.plugins.h6).toBeUndefined();
|
|
21
|
+
expect(withoutFirstAndLast.plugins.h2).toBeDefined();
|
|
22
|
+
});
|
|
23
|
+
it("registers no heading hotkey, matching Plate 20 where that config never fired", () => {
|
|
24
|
+
expect(editor().plugins.h1.shortcuts).toEqual({});
|
|
25
|
+
});
|
|
26
|
+
// Without rules.break.empty the inherited splitReset puts the paragraph *before* the heading.
|
|
27
|
+
it("exits an empty heading downwards", () => {
|
|
28
|
+
const e = editor();
|
|
29
|
+
e.tf.setValue([{ children: [{ text: "" }], type: "h1" }]);
|
|
30
|
+
e.tf.select({ offset: 0, path: [0, 0] });
|
|
31
|
+
e.tf.insertBreak();
|
|
32
|
+
expect(e.children.map((node) => node.type)).toEqual(["h1", "paragraph"]);
|
|
33
|
+
});
|
|
34
|
+
// Accepted deviation: Plate 53's splitReset default. Plate 20 produced a second heading here.
|
|
35
|
+
it("starts a paragraph when splitting at the end of a heading", () => {
|
|
36
|
+
const e = editor();
|
|
37
|
+
e.tf.setValue([{ children: [{ text: "Nadpis" }], type: "h1" }]);
|
|
38
|
+
e.tf.select({ offset: 6, path: [0, 0] });
|
|
39
|
+
e.tf.insertBreak();
|
|
40
|
+
expect(e.children.map((node) => node.type)).toEqual(["h1", "paragraph"]);
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import { WysiwygContent } from "../../types";
|
|
2
1
|
import { HighlightPluginOptions } from "./types";
|
|
3
|
-
|
|
2
|
+
/** Hand-written for the `color` option and the `--highlight-color` custom property. */
|
|
3
|
+
export declare const createHighlightPlugin: (color?: HighlightPluginOptions["color"]) => import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"highlight", {
|
|
4
|
+
color: import("csstype").Property.Color;
|
|
5
|
+
}, {}, {}, {}>>;
|
|
@@ -1,27 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.createHighlightPlugin = void 0;
|
|
4
|
-
const
|
|
4
|
+
const react_1 = require("platejs/react");
|
|
5
5
|
const types_1 = require("./types");
|
|
6
|
-
|
|
6
|
+
/** Hand-written for the `color` option and the `--highlight-color` custom property. */
|
|
7
|
+
const createHighlightPlugin = (color = "yellow") => (0, react_1.createPlatePlugin)({
|
|
7
8
|
key: types_1.HIGHLIGHT_PLUGIN_KEY,
|
|
8
|
-
isLeaf: true,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
node: { isLeaf: true },
|
|
10
|
+
options: { color },
|
|
11
|
+
parsers: { html: { deserializer: { rules: [{ validNodeName: ["MARK"] }] } } },
|
|
12
|
+
// The handler is not optional: a bare `keys` shortcut resolves through the plugin's own
|
|
13
|
+
// toggle transform, which Plate's marks get from `toPlatePlugin` and a hand-written plugin
|
|
14
|
+
// does not have. Without it the hotkey silently does nothing.
|
|
15
|
+
shortcuts: {
|
|
16
|
+
toggle: {
|
|
17
|
+
handler: ({ editor }) => {
|
|
18
|
+
editor.tf.toggleMark(types_1.HIGHLIGHT_PLUGIN_KEY);
|
|
19
|
+
return true;
|
|
16
20
|
},
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
options: {
|
|
20
|
-
hotkey: "mod+shift+h",
|
|
21
|
-
color: color,
|
|
22
|
-
},
|
|
23
|
-
props: {
|
|
24
|
-
color: color,
|
|
21
|
+
keys: "mod+shift+h",
|
|
22
|
+
},
|
|
25
23
|
},
|
|
26
|
-
})
|
|
24
|
+
});
|
|
27
25
|
exports.createHighlightPlugin = createHighlightPlugin;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { ToggleMarkPlugin } from "@udecode/plate-core";
|
|
2
1
|
import { CSSProperties } from "react";
|
|
3
2
|
import { RenderLeafProps } from "../../types";
|
|
4
3
|
export declare const HIGHLIGHT_PLUGIN_KEY = "highlight";
|
|
5
|
-
export interface HighlightPluginOptions
|
|
4
|
+
export interface HighlightPluginOptions {
|
|
6
5
|
color?: CSSProperties["color"];
|
|
7
6
|
}
|
|
8
7
|
export interface HighlightLeafElementProps extends RenderLeafProps {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { WysiwygContent } from "../../types";
|
|
2
1
|
import { UxfImagePluginOptions } from "./types";
|
|
3
2
|
/**
|
|
4
|
-
*
|
|
3
|
+
* Defined headless and lifted here, the way `@platejs/media` is: `getInjectedPlugins`, which
|
|
4
|
+
* `withPasteImage` needs, has no React counterpart.
|
|
5
5
|
*/
|
|
6
|
-
export declare const createImagePlugin:
|
|
6
|
+
export declare const createImagePlugin: import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"img", UxfImagePluginOptions, {}, {}, {}>>;
|
|
@@ -1,105 +1,72 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.createImagePlugin = void 0;
|
|
4
|
-
const
|
|
4
|
+
const platejs_1 = require("platejs");
|
|
5
|
+
const react_1 = require("platejs/react");
|
|
5
6
|
const insert_image_1 = require("./transforms/insert-image");
|
|
6
7
|
const types_1 = require("./types");
|
|
7
|
-
const
|
|
8
|
+
const with_paste_image_1 = require("./with-paste-image");
|
|
9
|
+
const with_paste_image_url_1 = require("./with-paste-image-url");
|
|
8
10
|
/**
|
|
9
11
|
* Enables support for images.
|
|
12
|
+
*
|
|
13
|
+
* Custom rather than built on `BaseImagePlugin`, as in Plate 20: Plate's own paste handlers insert
|
|
14
|
+
* `{ url }` nodes from the pasted files and would fire alongside ours.
|
|
15
|
+
*
|
|
16
|
+
* Order matters: the last `.overrideEditor` is outermost and runs first, so `withPasteImageUrl` goes
|
|
17
|
+
* second to keep Plate 20's layering.
|
|
10
18
|
*/
|
|
11
|
-
|
|
19
|
+
const baseImagePlugin = (0, platejs_1.createSlatePlugin)({
|
|
12
20
|
key: types_1.IMAGE_PLUGIN_KEY,
|
|
13
|
-
type: types_1.IMAGE_PLUGIN_TYPE,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
request.responseType = "blob";
|
|
35
|
-
request.onload = () => {
|
|
36
|
-
const blob = request.response;
|
|
37
|
-
const file = new File([blob], "image-from-wysiwyg", {
|
|
38
|
-
type: blob.type,
|
|
39
|
-
});
|
|
40
|
-
if (!options.uploadImage) {
|
|
41
|
-
// eslint-disable-next-line no-console
|
|
42
|
-
console.error("Missing uploadImage function in image plugin options!");
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
options.uploadImage(file).then((response) => {
|
|
46
|
-
if (!options.getImageUrl) {
|
|
21
|
+
node: { isElement: true, isVoid: true, type: types_1.IMAGE_PLUGIN_TYPE },
|
|
22
|
+
options: {},
|
|
23
|
+
parsers: {
|
|
24
|
+
html: {
|
|
25
|
+
deserializer: {
|
|
26
|
+
rules: [{ validNodeName: "IMG" }],
|
|
27
|
+
// `getNode` in Plate 20; the context object replaces the bare element argument.
|
|
28
|
+
parse: ({ editor, element, getOptions }) => {
|
|
29
|
+
var _a;
|
|
30
|
+
const url = (_a = element.getAttribute("src")) !== null && _a !== void 0 ? _a : "";
|
|
31
|
+
if (url) {
|
|
32
|
+
const options = getOptions();
|
|
33
|
+
const request = new XMLHttpRequest();
|
|
34
|
+
request.open("GET", url, true);
|
|
35
|
+
request.responseType = "blob";
|
|
36
|
+
request.onload = () => {
|
|
37
|
+
const blob = request.response;
|
|
38
|
+
const file = new File([blob], "image-from-wysiwyg", {
|
|
39
|
+
type: blob.type,
|
|
40
|
+
});
|
|
41
|
+
if (!options.uploadImage) {
|
|
47
42
|
// eslint-disable-next-line no-console
|
|
48
|
-
console.error("Missing
|
|
43
|
+
console.error("Missing uploadImage function in image plugin options!");
|
|
49
44
|
return;
|
|
50
45
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
// type: blob.type,
|
|
68
|
-
// });
|
|
69
|
-
// if (!options.uploadImage) {
|
|
70
|
-
// // eslint-disable-next-line no-console
|
|
71
|
-
// console.log("Missing uploadImage function in image plugin options!");
|
|
72
|
-
// return;
|
|
73
|
-
// }
|
|
74
|
-
//
|
|
75
|
-
// const fileResponse = await options.uploadImage(file);
|
|
76
|
-
//
|
|
77
|
-
// if (!options.getImageUrl) {
|
|
78
|
-
// // eslint-disable-next-line no-console
|
|
79
|
-
// console.log("Missing getImageUrl function in image plugin options!");
|
|
80
|
-
// return;
|
|
81
|
-
// }
|
|
82
|
-
// // async hack images will be at the end of the document :(
|
|
83
|
-
// insertImage(
|
|
84
|
-
// editor,
|
|
85
|
-
// fileResponse,
|
|
86
|
-
// undefined,
|
|
87
|
-
// undefined,
|
|
88
|
-
// undefined,
|
|
89
|
-
// options.getImageUrl(fileResponse),
|
|
90
|
-
// );
|
|
91
|
-
//
|
|
92
|
-
// return {
|
|
93
|
-
// type,
|
|
94
|
-
// file: fileResponse,
|
|
95
|
-
// url: options.getImageUrl(fileResponse),
|
|
96
|
-
// };
|
|
97
|
-
// } catch (e) {
|
|
98
|
-
// // eslint-disable-next-line no-console
|
|
99
|
-
// console.error("Image insert failed.");
|
|
100
|
-
// }
|
|
101
|
-
}
|
|
46
|
+
void options.uploadImage(file).then((response) => {
|
|
47
|
+
if (!options.getImageUrl) {
|
|
48
|
+
// eslint-disable-next-line no-console
|
|
49
|
+
console.error("Missing getImageUrl function in image plugin options!");
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
// async hack images will be at the end of the document :(
|
|
53
|
+
(0, insert_image_1.insertImage)(editor, response, undefined, undefined, undefined, options.getImageUrl(response));
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
// eslint-disable-next-line no-console
|
|
57
|
+
request.onerror = () => console.error("Error receiving image.");
|
|
58
|
+
request.send();
|
|
59
|
+
}
|
|
60
|
+
return undefined;
|
|
61
|
+
},
|
|
102
62
|
},
|
|
103
63
|
},
|
|
104
|
-
}
|
|
105
|
-
})
|
|
64
|
+
},
|
|
65
|
+
})
|
|
66
|
+
.overrideEditor(with_paste_image_1.withPasteImage)
|
|
67
|
+
.overrideEditor(with_paste_image_url_1.withPasteImageUrl);
|
|
68
|
+
/**
|
|
69
|
+
* Defined headless and lifted here, the way `@platejs/media` is: `getInjectedPlugins`, which
|
|
70
|
+
* `withPasteImage` needs, has no React counterpart.
|
|
71
|
+
*/
|
|
72
|
+
exports.createImagePlugin = (0, react_1.toPlatePlugin)(baseImagePlugin);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
const options = {
|
|
8
|
+
getImageUrl: (file) => file.name,
|
|
9
|
+
uploadImage: async () => FILE,
|
|
10
|
+
};
|
|
11
|
+
const editor = (0, platejs_1.createSlateEditor)({
|
|
12
|
+
plugins: [(0, create_paragraph_plugin_1.createParagraphPlugin)(), create_image_plugin_1.createImagePlugin.configure({ options })],
|
|
13
|
+
});
|
|
14
|
+
describe("image", () => {
|
|
15
|
+
it("keeps key img and stored type image", () => {
|
|
16
|
+
expect(editor.plugins.img.node.type).toBe("image");
|
|
17
|
+
expect(editor.getType("img")).toBe("image");
|
|
18
|
+
});
|
|
19
|
+
it("is a void element", () => {
|
|
20
|
+
expect(editor.plugins.img.node.isVoid).toBe(true);
|
|
21
|
+
expect(editor.plugins.img.node.isElement).toBe(true);
|
|
22
|
+
});
|
|
23
|
+
it("carries the upload handlers through as options", () => {
|
|
24
|
+
expect(editor.getOptions({ key: "img" })).toMatchObject({
|
|
25
|
+
getImageUrl: options.getImageUrl,
|
|
26
|
+
uploadImage: options.uploadImage,
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
// Custom precisely so Plate's own paste handlers never run alongside ours.
|
|
30
|
+
it("does not inherit Plate's own media paste options", () => {
|
|
31
|
+
expect(editor.getOptions({ key: "img" })).not.toHaveProperty("disableUploadInsert");
|
|
32
|
+
});
|
|
33
|
+
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.isImageActive = void 0;
|
|
4
|
-
const plate_common_1 = require("@udecode/plate-common");
|
|
5
4
|
const get_active_image_1 = require("./get-active-image");
|
|
6
|
-
const isImageActive = (editor) => Boolean((0, get_active_image_1.getActiveImage)(editor) && (
|
|
5
|
+
const isImageActive = (editor) => Boolean((0, get_active_image_1.getActiveImage)(editor) && editor.api.isAt({ block: true }));
|
|
7
6
|
exports.isImageActive = isImageActive;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.updateImage = void 0;
|
|
4
|
-
const
|
|
5
|
-
const updateImage = (editor, file, alt, caption, source, url) => (0, plate_common_1.setNodes)(editor, {
|
|
4
|
+
const updateImage = (editor, file, alt, caption, source, url) => editor.tf.setNodes({
|
|
6
5
|
file,
|
|
7
6
|
alt,
|
|
8
7
|
caption,
|
package/plugins/image/types.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import { MediaPlugin } from "@udecode/plate-media";
|
|
2
1
|
import { FileResponse } from "@uxf/core/types";
|
|
3
|
-
|
|
2
|
+
import { PluginConfig } from "platejs";
|
|
3
|
+
export declare const IMAGE_PLUGIN_KEY: "img";
|
|
4
4
|
export declare const IMAGE_PLUGIN_TYPE = "image";
|
|
5
5
|
export type GetImageUrlHandler = (file: FileResponse) => string;
|
|
6
6
|
export type ImageUploadHandler = (file: File) => Promise<FileResponse>;
|
|
7
|
-
|
|
7
|
+
/** No longer extends Plate's media options – Plate 53 exports no such type and nothing used it. */
|
|
8
|
+
export interface UxfImagePluginOptions {
|
|
8
9
|
uploadImage?: ImageUploadHandler;
|
|
9
10
|
getImageUrl?: GetImageUrlHandler;
|
|
10
11
|
disableUploadOnPasteImageUrl?: boolean;
|
|
11
12
|
disableUploadOnPasteImage?: boolean;
|
|
12
13
|
}
|
|
14
|
+
/** The plugin config the two paste overrides are typed against. */
|
|
15
|
+
export type UxfImagePluginConfig = PluginConfig<typeof IMAGE_PLUGIN_KEY, UxfImagePluginOptions>;
|
package/plugins/image/types.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.IMAGE_PLUGIN_TYPE = exports.IMAGE_PLUGIN_KEY = void 0;
|
|
4
|
-
const
|
|
5
|
-
exports.IMAGE_PLUGIN_KEY =
|
|
4
|
+
const platejs_1 = require("platejs");
|
|
5
|
+
exports.IMAGE_PLUGIN_KEY = platejs_1.KEYS.img;
|
|
6
6
|
exports.IMAGE_PLUGIN_TYPE = "image";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.isImageUrl = exports.getImageExtension = void 0;
|
|
4
|
-
const
|
|
4
|
+
const platejs_1 = require("platejs");
|
|
5
5
|
const imageExtensions = [
|
|
6
6
|
"ase",
|
|
7
7
|
"art",
|
|
@@ -127,7 +127,7 @@ const imageExtensions = [
|
|
|
127
127
|
const getImageExtension = (url) => new URL(url).pathname.split(".").pop();
|
|
128
128
|
exports.getImageExtension = getImageExtension;
|
|
129
129
|
const isImageUrl = (url) => {
|
|
130
|
-
if (!(0,
|
|
130
|
+
if (!(0, platejs_1.isUrl)(url)) {
|
|
131
131
|
return false;
|
|
132
132
|
}
|
|
133
133
|
return imageExtensions.includes((0, exports.getImageExtension)(url));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { UxfImagePluginOptions } from "./types";
|
|
1
|
+
import { OverrideEditor } from "platejs";
|
|
2
|
+
import { UxfImagePluginConfig } from "./types";
|
|
4
3
|
/**
|
|
5
|
-
* If inserted text is image url, upload image and insert it instead.
|
|
4
|
+
* If inserted text is image url, upload image and insert it instead. The disable flag is checked
|
|
5
|
+
* inside the handler because `.overrideEditor` is installed when the plugin is defined.
|
|
6
6
|
*/
|
|
7
|
-
export declare const withPasteImageUrl:
|
|
7
|
+
export declare const withPasteImageUrl: OverrideEditor<UxfImagePluginConfig>;
|
|
@@ -4,33 +4,37 @@ 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
6
|
/**
|
|
7
|
-
* If inserted text is image url, upload image and insert it instead.
|
|
7
|
+
* If inserted text is image url, upload image and insert it instead. The disable flag is checked
|
|
8
|
+
* inside the handler because `.overrideEditor` is installed when the plugin is defined.
|
|
8
9
|
*/
|
|
9
|
-
const withPasteImageUrl = (editor,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const imageResponse = await fetch(text, { mode: "cors" });
|
|
16
|
-
const blob = await imageResponse.blob();
|
|
17
|
-
const file = new File([blob], "image-from-wysiwyg." + (0, is_image_url_1.getImageExtension)(text), { type: blob.type });
|
|
18
|
-
if (!uploadImage) {
|
|
19
|
-
// eslint-disable-next-line no-console
|
|
20
|
-
console.log("Missing uploadImage function in image plugin options!");
|
|
21
|
-
return;
|
|
10
|
+
const withPasteImageUrl = ({ editor, getOptions, tf: { insertData }, }) => ({
|
|
11
|
+
transforms: {
|
|
12
|
+
async insertData(dataTransfer) {
|
|
13
|
+
const { uploadImage, getImageUrl, disableUploadOnPasteImageUrl } = getOptions();
|
|
14
|
+
if (disableUploadOnPasteImageUrl) {
|
|
15
|
+
return insertData(dataTransfer);
|
|
22
16
|
}
|
|
23
|
-
const
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
const text = dataTransfer.getData("text/plain");
|
|
18
|
+
if ((0, is_image_url_1.isImageUrl)(text)) {
|
|
19
|
+
const imageResponse = await fetch(text, { mode: "cors" });
|
|
20
|
+
const blob = await imageResponse.blob();
|
|
21
|
+
const file = new File([blob], "image-from-wysiwyg." + (0, is_image_url_1.getImageExtension)(text), { type: blob.type });
|
|
22
|
+
if (!uploadImage) {
|
|
23
|
+
// eslint-disable-next-line no-console
|
|
24
|
+
console.log("Missing uploadImage function in image plugin options!");
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const fileResponse = await uploadImage(file);
|
|
28
|
+
if (!getImageUrl) {
|
|
29
|
+
// eslint-disable-next-line no-console
|
|
30
|
+
console.log("Missing getImageUrl function in image plugin options!");
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
(0, insert_image_1.insertImage)(editor, fileResponse, "", "", "", getImageUrl(fileResponse));
|
|
27
34
|
return;
|
|
28
35
|
}
|
|
29
|
-
(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
return editor;
|
|
35
|
-
};
|
|
36
|
+
insertData(dataTransfer);
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
});
|
|
36
40
|
exports.withPasteImageUrl = withPasteImageUrl;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* If image is pasted from clipboard, upload image and insert it.
|
|
6
|
-
*/
|
|
7
|
-
export declare const withPasteImage: (editor: UxfEditor, plugin: WithPlatePlugin<UxfImagePluginOptions, WysiwygContent, UxfEditor>) => UxfEditor;
|
|
1
|
+
import { OverrideEditor } from "platejs";
|
|
2
|
+
import { UxfImagePluginConfig } from "./types";
|
|
3
|
+
/** If image is pasted from clipboard, upload image and insert it. */
|
|
4
|
+
export declare const withPasteImage: OverrideEditor<UxfImagePluginConfig>;
|
|
@@ -1,49 +1,51 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.withPasteImage = void 0;
|
|
4
|
-
const
|
|
4
|
+
const platejs_1 = require("platejs");
|
|
5
5
|
const insert_image_1 = require("./transforms/insert-image");
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
editor.insertData = async (dataTransfer) => {
|
|
13
|
-
const text = dataTransfer.getData("text/plain");
|
|
14
|
-
const { files, effectAllowed } = dataTransfer;
|
|
15
|
-
if (files.length > 0 && effectAllowed === "uninitialized") {
|
|
16
|
-
// effectAllowed prevents re-upload image on drag and drop
|
|
17
|
-
const injectedPlugins = (0, plate_core_1.getInjectedPlugins)(editor, plugin);
|
|
18
|
-
if (!(0, plate_core_1.pipeInsertDataQuery)(injectedPlugins, {
|
|
19
|
-
data: text,
|
|
20
|
-
dataTransfer,
|
|
21
|
-
})) {
|
|
6
|
+
/** If image is pasted from clipboard, upload image and insert it. */
|
|
7
|
+
const withPasteImage = ({ editor, getOptions, plugin, tf: { insertData }, }) => ({
|
|
8
|
+
transforms: {
|
|
9
|
+
async insertData(dataTransfer) {
|
|
10
|
+
const { uploadImage, getImageUrl, disableUploadOnPasteImage } = getOptions();
|
|
11
|
+
if (disableUploadOnPasteImage) {
|
|
22
12
|
return insertData(dataTransfer);
|
|
23
13
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
14
|
+
const text = dataTransfer.getData("text/plain");
|
|
15
|
+
const { files, effectAllowed } = dataTransfer;
|
|
16
|
+
if (files.length > 0 && effectAllowed === "uninitialized") {
|
|
17
|
+
// effectAllowed prevents re-upload image on drag and drop
|
|
18
|
+
const injectedPlugins = (0, platejs_1.getInjectedPlugins)(editor, plugin);
|
|
19
|
+
if (!(0, platejs_1.pipeInsertDataQuery)(editor, injectedPlugins, {
|
|
20
|
+
data: text,
|
|
21
|
+
dataTransfer,
|
|
22
|
+
mimeType: "text/plain",
|
|
23
|
+
})) {
|
|
24
|
+
return insertData(dataTransfer);
|
|
25
|
+
}
|
|
26
|
+
for (const file of Array.from(files)) {
|
|
27
|
+
const [mime] = file.type.split("/");
|
|
28
|
+
if (mime === "image") {
|
|
29
|
+
if (!uploadImage) {
|
|
30
|
+
// eslint-disable-next-line no-console
|
|
31
|
+
console.log("Missing uploadImage function in image plugin options!");
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
// eslint-disable-next-line no-await-in-loop
|
|
35
|
+
const uploadedFile = await uploadImage(file);
|
|
36
|
+
if (!getImageUrl) {
|
|
37
|
+
// eslint-disable-next-line no-console
|
|
38
|
+
console.log("Missing getImageUrl function in image plugin options!");
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
(0, insert_image_1.insertImage)(editor, uploadedFile, undefined, undefined, undefined, getImageUrl(uploadedFile));
|
|
38
42
|
}
|
|
39
|
-
(0, insert_image_1.insertImage)(editor, uploadedFile, undefined, undefined, undefined, getImageUrl(uploadedFile));
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
};
|
|
45
|
+
else {
|
|
46
|
+
insertData(dataTransfer);
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
});
|
|
49
51
|
exports.withPasteImage = withPasteImage;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export declare const ELEMENT_LINK: "a";
|
|
2
2
|
export declare const LINK_PLUGIN_TYPE = "link";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LINK_PLUGIN_TYPE = exports.ELEMENT_LINK = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const platejs_1 = require("platejs");
|
|
5
|
+
exports.ELEMENT_LINK = platejs_1.KEYS.link;
|
|
6
6
|
exports.LINK_PLUGIN_TYPE = "link";
|