@progress/kendo-react-editor
Version:
React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package
139 lines (138 loc) • 6.1 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import { Window as x, WindowActionsBar as C } from "@progress/kendo-react-dialogs";
import { Button as b } from "@progress/kendo-react-buttons";
import { insertNode as y, NodeSelection as F } from "@progress/kendo-editor-common";
import { registerForLocalization as L, provideLocalizationService as S } from "@progress/kendo-react-intl";
import { messages as a } from "../messages/index.mjs";
import { Input as h } from "@progress/kendo-react-inputs";
import { Form as T, FormElement as z, FieldWrapper as u } from "@progress/kendo-react-form";
let A = class extends e.Component {
constructor() {
super(...arguments), this.src = null, this.altText = null, this.title = null, this.width = null, this.height = null, this.onClose = () => {
this.props.view.focus(), this.props.onClose();
}, this.onInsert = () => {
const { view: s, settings: m } = this.props, p = s.state.schema.nodes[m.node], n = {
src: this.src ? this.src.value : null,
title: this.title ? this.title.value : null,
alt: this.altText ? this.altText.value : null,
width: this.width ? this.width.value : null,
height: this.height ? this.height.value : null
}, c = Object.keys(n).filter((l) => n[l] !== null && n[l] !== "").reduce((l, r) => Object.assign(l, { [r]: n[r] }), {}), d = p.createAndFill(c);
d && y(d, !0)(
s.state,
(r) => s.dispatch(r.setMeta("commandName", m.commandName).setMeta("args", c))
), this.onClose();
};
}
/**
* @hidden
*/
render() {
const { view: s, settings: m, dir: f, render: p } = this.props, {
insertImageDialogTitle: n,
insertImageAddress: c,
insertImageTitle: d,
insertImageAltText: l,
insertImageWidth: r,
insertImageHeight: E,
insertImageCancel: k,
insertImageInsert: w
} = m.messages, i = S(this), g = s && s.state;
let o = {};
g && g.selection instanceof F && g.selection.node.type === g.schema.nodes[m.node] && (o = g.selection.node.attrs);
const I = /* @__PURE__ */ e.createElement(
T,
{
render: () => /* @__PURE__ */ e.createElement(z, { horizontal: !0 }, /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-url", className: "k-form-label" }, i.toLanguageString(
c,
a[c]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
h,
{
type: "text",
id: "k-editor-image-url",
defaultValue: o.src,
ref: (t) => {
this.src = t && t.element;
},
autoFocus: !0
}
))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-url", className: "k-form-label" }, i.toLanguageString(
l,
a[l]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
h,
{
type: "text",
id: "k-editor-image-alt",
defaultValue: o.alt,
ref: (t) => {
this.altText = t && t.element;
}
}
))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-title", className: "k-form-label" }, i.toLanguageString(d, a[d])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
h,
{
type: "text",
id: "k-editor-image-title",
defaultValue: o.title,
ref: (t) => {
this.title = t && t.element;
}
}
))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-width", className: "k-form-label" }, i.toLanguageString(r, a[r])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
h,
{
type: "text",
id: "k-editor-image-width",
defaultValue: o.width,
ref: (t) => {
this.width = t && t.element;
}
}
))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-height", className: "k-form-label" }, i.toLanguageString(E, a[E])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
h,
{
id: "k-editor-image-height",
defaultValue: o.height,
ref: (t) => {
this.height = t && t.element;
}
}
))))
}
), v = [
/* @__PURE__ */ e.createElement(b, { onClick: this.onClose, dir: f, key: "cancel" }, i.toLanguageString(k, a[k])),
/* @__PURE__ */ e.createElement(b, { onClick: this.onInsert, themeColor: "primary", dir: f, key: "insert" }, i.toLanguageString(w, a[w]))
], N = /* @__PURE__ */ e.createElement(
x,
{
initialWidth: 500,
initialHeight: 350,
className: "k-editor-window",
title: i.toLanguageString(n, a[n]),
onClose: this.onClose,
key: "dialog",
style: f === "rtl" ? { textAlign: "right" } : void 0,
modal: !0,
minimizeButton: () => null,
maximizeButton: () => null,
resizable: !1
},
I,
/* @__PURE__ */ e.createElement(C, null, ...v)
);
return p ? p(N, { content: I, actionButtons: v }) : N;
}
};
L(A);
export {
A as InsertImageDialog
};