@progress/kendo-react-editor
Version:
React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package
298 lines (297 loc) • 15.4 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 { Button as x } from "@progress/kendo-react-buttons";
import { Checkbox as Ee, NumericTextBox as k, ColorPicker as X, TextBox as Y, InputPrefix as re } from "@progress/kendo-react-inputs";
import { AutoComplete as Z, DropDownList as P } from "@progress/kendo-react-dropdowns";
import { Window as Pe, WindowActionsBar as xe } from "@progress/kendo-react-dialogs";
import { tableCellPropertiesIcon as Ce, tableAlignTopLeftIcon as ye, tableAlignTopCenterIcon as Ne, tableAlignTopRightIcon as Se, tableAlignMiddleLeftIcon as we, tableAlignMiddleCenterIcon as Ie, tableAlignMiddleRightIcon as Re, tableAlignBottomLeftIcon as Le, tableAlignBottomCenterIcon as Ae, tableAlignBottomRightIcon as Te, tableAlignRemoveIcon as De, textWrapIcon as Be, parameterStringIcon as We } from "@progress/kendo-svg-icons";
import { parentNode as Ke, onDownPreventDefault as Ue, units as i, borderStyles as _, popupSettings as d } from "../utils.mjs";
import { IconWrap as oe } from "@progress/kendo-react-common";
import { useLocalization as ne } from "@progress/kendo-react-intl";
import { keys as l, messages as a } from "../../messages/index.mjs";
import { applyCellsData as Ve, cellsDefaultData as Me } from "./cellPropsUtils.mjs";
const Ye = (n) => {
const { view: t, ...r } = n, [u, f] = e.useState(!1), g = ne(), v = !!(t && Ke(t.state.selection.$from, (c) => c.type.spec.tableRole === "table")), p = e.useCallback(() => {
f(!0);
}, []), s = e.useCallback(() => {
f(!1), t == null || t.focus();
}, [t]), b = e.useCallback(
(c) => {
if (t && c) {
const m = Ve(t.state, c);
m.docChanged && t.dispatch(m);
}
s();
},
[t, s]
);
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
x,
{
type: "button",
title: g.toLanguageString(l.cellProperties, a[l.cellProperties]),
icon: "table-cell-properties",
svgIcon: Ce,
onClick: p,
disabled: !v,
...Ue,
...r
}
), u && t && /* @__PURE__ */ e.createElement(ze, { view: t, onCancel: s, onSave: b }));
}, ee = [
{
textKey: l.cellPropertiesLeftTop,
text: a[l.cellPropertiesLeftTop],
icon: "table-align-top-left",
svgIcon: ye,
value: { x: "left", y: "top" }
},
{
textKey: l.cellPropertiesCenterTop,
text: a[l.cellPropertiesCenterTop],
icon: "table-align-top-center",
svgIcon: Ne,
value: { x: "center", y: "top" }
},
{
textKey: l.cellPropertiesRightTop,
text: a[l.cellPropertiesRightTop],
icon: "table-align-top-right",
svgIcon: Se,
value: { x: "right", y: "top" }
},
{
textKey: l.cellPropertiesLeftMiddle,
text: a[l.cellPropertiesLeftMiddle],
icon: "table-align-middle-left",
svgIcon: we,
value: { x: "left", y: "middle" }
},
{
textKey: l.cellPropertiesCenterMiddle,
text: a[l.cellPropertiesCenterMiddle],
icon: "table-align-middle-center",
svgIcon: Ie,
value: { x: "center", y: "middle" }
},
{
textKey: l.cellPropertiesRightMiddle,
text: a[l.cellPropertiesRightMiddle],
icon: "table-align-middle-right",
svgIcon: Re,
value: { x: "right", y: "middle" }
},
{
textKey: l.cellPropertiesLeftBottom,
text: a[l.cellPropertiesLeftBottom],
icon: "table-align-bottom-left",
svgIcon: Le,
value: { x: "left", y: "bottom" }
},
{
textKey: l.cellPropertiesCenterBottom,
text: a[l.cellPropertiesCenterBottom],
icon: "table-align-bottom-center",
svgIcon: Ae,
value: { x: "center", y: "bottom" }
},
{
textKey: l.cellPropertiesRightBottom,
text: a[l.cellPropertiesRightBottom],
icon: "table-align-bottom-right",
svgIcon: Te,
value: { x: "right", y: "bottom" }
},
{
textKey: l.cellPropertiesNoAlignment,
text: a[l.cellPropertiesNoAlignment],
icon: "align-remove",
svgIcon: De,
value: { x: "", y: "" }
}
], le = [
{
textKey: l.cellPropertiesWrap,
text: a[l.cellPropertiesWrap],
value: "",
icon: "text-wrap",
svgIcon: Be
},
{
textKey: l.cellPropertiesFitToCell,
text: a[l.cellPropertiesFitToCell],
value: "nowrap",
icon: "parameter-string",
svgIcon: We
}
], te = (n, t) => t ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(re, null, /* @__PURE__ */ e.createElement(oe, { icon: t.svgIcon, name: t.icon })), n) : n, ae = (n, t) => {
const r = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(re, null, /* @__PURE__ */ e.createElement(oe, { icon: t.dataItem.svgIcon, name: t.dataItem.icon })), n.props.children);
return e.cloneElement(n, n.props, r);
}, ze = (n) => {
const t = e.useMemo(() => Me(n.view.state), [n.view]), r = ne(), u = e.useRef(null), f = t.applyToAll, g = e.useRef(null), v = t.cellWidth, p = e.useRef(null);
t.widthUnit && !i.includes(t.widthUnit) && i.push(t.widthUnit);
const s = t.widthUnit || "", b = e.useRef(null), c = t.cellHeight, m = e.useRef(null);
t.heightUnit && !i.includes(t.heightUnit) && i.push(t.heightUnit);
const ce = t.heightUnit || "", C = e.useRef(null), ie = ee.find(
(o) => o.value.x !== void 0 && t.alignment && o.value.x === t.alignment.x && o.value.y === t.alignment.y
) || null, y = e.useRef(null), se = le.find((o) => o.value === t.textControl), N = e.useRef(null), me = t.backgroundColor, h = e.useRef(null), de = t.cellPadding, E = e.useRef(null), ue = t.borderWidth, S = e.useRef(null), fe = t.borderColor, w = e.useRef(null), ge = _.find((o) => o.value === t.borderStyle), I = e.useRef(null), pe = t.id, R = e.useRef(null), be = t.className, ke = e.useCallback(() => {
var L, A, T, D, B, W, K, U, V, M, z, F, H, $, j, q, G, J, O, Q;
const o = {
applyToAll: !!((A = (L = u.current) == null ? void 0 : L.element) != null && A.checked),
cellWidth: ((T = g.current) == null ? void 0 : T.value) || null,
widthUnit: ((D = p.current) == null ? void 0 : D.value) || "",
cellHeight: ((B = b.current) == null ? void 0 : B.value) || null,
heightUnit: ((W = m.current) == null ? void 0 : W.value) || "",
alignment: (U = (K = C.current) == null ? void 0 : K.value) == null ? void 0 : U.value,
textControl: (M = (V = y.current) == null ? void 0 : V.value) == null ? void 0 : M.value,
backgroundColor: (z = N.current) == null ? void 0 : z.value,
cellPadding: typeof ((F = h.current) == null ? void 0 : F.value) == "number" ? (H = h.current) == null ? void 0 : H.value : null,
borderWidth: typeof (($ = E.current) == null ? void 0 : $.value) == "number" ? (j = E.current) == null ? void 0 : j.value : null,
borderColor: (q = S.current) == null ? void 0 : q.value,
borderStyle: ((J = (G = w.current) == null ? void 0 : G.value) == null ? void 0 : J.value) || null,
id: String(((O = I.current) == null ? void 0 : O.value) || ""),
className: String(((Q = R.current) == null ? void 0 : Q.value) || "")
};
n.onSave.call(void 0, o);
}, [n.onSave]), ve = /* @__PURE__ */ e.createElement("div", { className: "k-form k-form-md" }, /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-4 k-gap-x-4" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement("span", { className: "k-checkbox-wrap" }, /* @__PURE__ */ e.createElement(Ee, { ref: u, defaultChecked: f })), /* @__PURE__ */ e.createElement("label", { className: "k-checkbox-label" }, r.toLanguageString(
l.cellPropertiesApplyToAllCells,
a[l.cellPropertiesApplyToAllCells]
)))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesWidth,
a[l.cellPropertiesWidth]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
k,
{
ref: g,
defaultValue: v,
min: 0,
placeholder: r.toLanguageString(l.sizeAuto, a[l.sizeAuto])
}
), /* @__PURE__ */ e.createElement("div", { className: "k-form-hint" }, r.toLanguageString(
l.cellPropertiesApplyToColumn,
a[l.cellPropertiesApplyToColumn]
)))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, " "), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
Z,
{
ref: p,
defaultValue: s,
data: i,
popupSettings: d
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesHeight,
a[l.cellPropertiesHeight]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
k,
{
ref: b,
defaultValue: c,
min: 0,
placeholder: r.toLanguageString(l.sizeAuto, a[l.sizeAuto])
}
), /* @__PURE__ */ e.createElement("div", { className: "k-form-hint" }, r.toLanguageString(
l.cellPropertiesApplyToRow,
a[l.cellPropertiesApplyToRow]
)))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, " "), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
Z,
{
ref: m,
defaultValue: ce,
data: i,
popupSettings: d
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesAlignment,
a[l.cellPropertiesAlignment]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
P,
{
ref: C,
defaultValue: ie,
data: ee.map((o) => ({ ...o, text: r.toLanguageString(o.textKey, o.text) })),
textField: "text",
dataItemKey: "text",
popupSettings: d,
valueRender: te,
itemRender: ae
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesTextControl,
a[l.cellPropertiesTextControl]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
P,
{
ref: y,
defaultValue: se,
data: le.map((o) => ({
...o,
text: r.toLanguageString(o.textKey, o.text)
})),
textField: "text",
dataItemKey: "value",
popupSettings: d,
valueRender: te,
itemRender: ae
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesCellPadding,
a[l.cellPropertiesCellPadding]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(k, { ref: h, defaultValue: de, min: 0 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesBackground,
a[l.cellPropertiesBackground]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(X, { ref: N, defaultValue: me }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesBorderWidth,
a[l.cellPropertiesBorderWidth]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(k, { ref: E, defaultValue: ue, min: 0 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesBorderColor,
a[l.cellPropertiesBorderColor]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(X, { ref: S, defaultValue: fe }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesBorderStyle,
a[l.cellPropertiesBorderStyle]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
P,
{
ref: w,
defaultValue: ge,
popupSettings: d,
data: _,
textField: "text",
dataItemKey: "value"
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesId, a[l.cellPropertiesId])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Y, { ref: I, defaultValue: pe }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
l.cellPropertiesCssClass,
a[l.cellPropertiesCssClass]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Y, { ref: R, defaultValue: be })))))), he = [
/* @__PURE__ */ e.createElement(x, { themeColor: "primary", key: "save", onClick: ke }, r.toLanguageString(l.cellPropertiesSave, a[l.cellPropertiesSave])),
/* @__PURE__ */ e.createElement(x, { onClick: n.onCancel, key: "cancel" }, r.toLanguageString(l.cellPropertiesCancel, a[l.cellPropertiesCancel]))
];
return /* @__PURE__ */ e.createElement(
Pe,
{
className: "k-editor-window k-editor-table-wizard-window",
title: r.toLanguageString(l.cellProperties, a[l.cellProperties]),
onClose: n.onCancel,
key: "dialog",
style: { userSelect: "none" },
width: 408,
height: 587,
modal: !0,
minimizeButton: () => null,
maximizeButton: () => null,
resizable: !1
},
ve,
/* @__PURE__ */ e.createElement(xe, { layout: "start" }, ...he)
);
};
export {
Ye as TableCellProperties,
ae as itemRenderWithIcon,
te as valueRenderWithIcon
};