@progress/kendo-react-editor
Version:
React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package
413 lines (412 loc) • 20.6 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 A } from "@progress/kendo-react-buttons";
import { NumericTextBox as s, ColorPicker as se, Checkbox as Ne, TextBox as L } from "@progress/kendo-react-inputs";
import { AutoComplete as ie, DropDownList as d } from "@progress/kendo-react-dropdowns";
import { Window as Se, WindowActionsBar as xe } from "@progress/kendo-react-dialogs";
import { TabStrip as he, TabStripTab as ce } from "@progress/kendo-react-layout";
import { tablePropertiesIcon as Ce, tablePositionStartIcon as we, tablePositionCenterIcon as ye, tablePositionEndIcon as Re, tableAlignMiddleLeftIcon as Le, tableAlignMiddleCenterIcon as Ae, tableAlignMiddleRightIcon as Ie, tableAlignRemoveIcon as Be, positionTopIcon as Ke, positionBottomIcon as Ve } from "@progress/kendo-svg-icons";
import { parentNode as Te, onDownPreventDefault as De, units as me, popupSettings as c, borderStyles as ue } from "../utils.mjs";
import { valueRenderWithIcon as k, itemRenderWithIcon as v } from "./tableCellProperties.mjs";
import { useLocalization as ge } from "@progress/kendo-react-intl";
import { keys as t, messages as l } from "../../messages/index.mjs";
import { applyTableData as ze, tablePositionStyles as He, tableDefaultData as We, initialTableData as Ue } from "./tablePropsUtils.mjs";
const _e = (n) => {
const { view: o, ...r } = n, P = ge(), [N, b] = e.useState(!1), g = !!(o && Te(o.state.selection.$from, (i) => i.type.spec.tableRole === "table")), p = e.useCallback(() => {
b(!0);
}, []), m = e.useCallback(() => {
b(!1), o == null || o.focus();
}, [o]), f = e.useCallback(
(i) => {
if (o && i) {
const u = ze(o.state, i);
u && o.dispatch(u);
}
m();
},
[o, m]
);
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
A,
{
type: "button",
title: P.toLanguageString(t.tableProperties, l[t.tableProperties]),
icon: "table-properties",
svgIcon: Ce,
onClick: p,
disabled: !g,
...De,
...r
}
), N && /* @__PURE__ */ e.createElement(Fe, { onClose: m, onSave: f, view: o }));
}, E = [
{
textKey: t.tablePropertiesAlignLeft,
text: l[t.tablePropertiesAlignLeft],
value: "left",
icon: "table-align-middle-left",
svgIcon: Le
},
{
textKey: t.tablePropertiesAlignCenter,
text: l[t.tablePropertiesAlignCenter],
value: "center",
icon: "table-align-middle-center",
svgIcon: Ae
},
{
textKey: t.tablePropertiesAlignRight,
text: l[t.tablePropertiesAlignRight],
value: "right",
icon: "table-align-middle-right",
svgIcon: Ie
},
{
textKey: t.tablePropertiesNoAlignment,
text: l[t.tablePropertiesNoAlignment],
value: "",
icon: "align-remove",
svgIcon: Be
}
], de = [
{
textKey: t.tablePropertiesLeft,
text: l[t.tablePropertiesLeft],
value: "left",
style: {},
icon: "table-position-left",
svgIcon: we
},
{
textKey: t.tablePropertiesCenter,
text: l[t.tablePropertiesCenter],
value: "center",
style: {},
icon: "table-position-center",
svgIcon: ye
},
{
textKey: t.tablePropertiesRight,
text: l[t.tablePropertiesRight],
value: "right",
style: {},
icon: "table-position-right",
svgIcon: Re
}
].map((n) => ({ ...n, style: He[n.value] })), fe = [
{
textKey: t.tablePropertiesTop,
text: l[t.tablePropertiesTop],
value: "top",
icon: "position-top",
svgIcon: Ke
},
{
textKey: t.tablePropertiesBottom,
text: l[t.tablePropertiesBottom],
value: "bottom",
icon: "position-bottom",
svgIcon: Ve
}
], be = [
{ textKey: t.tablePropertiesNone, text: l[t.tablePropertiesNone], value: "none" },
{
textKey: t.tablePropertiesUsingScopeAttribute,
text: l[t.tablePropertiesUsingScopeAttribute],
value: "scope"
},
{
textKey: t.tablePropertiesUsingIdAttributes,
text: l[t.tablePropertiesUsingIdAttributes],
value: "id"
}
], Fe = (n) => {
const o = e.useMemo(() => {
const a = n.view && n.view.state;
return a ? We(a) : Ue;
}, [n.view]), r = ge(), [P, N] = e.useState(0), b = e.useCallback((a) => {
N(a.selected);
}, []), g = e.useRef(null), p = e.useRef(null), m = e.useRef(null), f = e.useRef(null), i = e.useRef(null), u = e.useRef(null), S = e.useRef(null), I = e.useRef(null), B = e.useRef(null), K = e.useRef(null), x = e.useRef(null), h = e.useRef(null), V = e.useRef(null), T = e.useRef(null), D = e.useRef(null), z = e.useRef(null), H = e.useRef(null), W = e.useRef(null), U = e.useRef(null), F = e.useRef(null), C = e.useRef(null), w = e.useRef(null), y = e.useRef(null), pe = e.useCallback(() => {
var R, M, G, $, j, q, J, O, Q, X, Y, Z, _, ee, te, ae, le, re, oe, ne;
const a = {
rows: ((R = g.current) == null ? void 0 : R.value) || 0,
columns: ((M = p.current) == null ? void 0 : M.value) || 0,
width: m.current ? m.current.value : null,
height: f.current ? f.current.value : null,
cellSpacing: i.current ? i.current.value : null,
cellPadding: u.current ? u.current.value : null,
borderWidth: S.current ? S.current.value : null,
widthUnit: ((G = I.current) == null ? void 0 : G.value) || "",
heightUnit: (($ = B.current) == null ? void 0 : $.value) || "",
position: ((q = (j = K.current) == null ? void 0 : j.value) == null ? void 0 : q.value) || null,
textAlign: (J = x.current) != null && J.value ? x.current.value.value : null,
borderStyle: (O = h.current) != null && O.value ? h.current.value.value : null,
backgroundColor: (Q = V.current) == null ? void 0 : Q.value,
borderColor: (X = T.current) == null ? void 0 : X.value,
collapseBorders: !!((Z = (Y = D.current) == null ? void 0 : Y.element) != null && Z.checked),
id: String(((_ = z.current) == null ? void 0 : _.value) || ""),
className: String(((ee = H.current) == null ? void 0 : ee.value) || ""),
caption: String(((te = W.current) == null ? void 0 : te.value) || ""),
headerRows: ((ae = U.current) == null ? void 0 : ae.value) || 0,
headerColumns: ((le = F.current) == null ? void 0 : le.value) || 0,
captionAlignment: (re = C.current) != null && re.value ? C.current.value.value : null,
captionPosition: (oe = w.current) != null && oe.value ? w.current.value.value : null,
associateHeaders: (ne = y.current) != null && ne.value ? y.current.value.value : "none"
};
n.onSave.call(void 0, a);
}, [n.onSave]), ke = /* @__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-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesRows,
l[t.tablePropertiesRows]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(s, { ref: g, defaultValue: o.rows, min: 1 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesColumns,
l[t.tablePropertiesColumns]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(s, { ref: p, defaultValue: o.columns, min: 1 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesWidth,
l[t.tablePropertiesWidth]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
s,
{
ref: m,
defaultValue: o.width,
min: 0,
placeholder: r.toLanguageString(t.sizeAuto, l[t.sizeAuto])
}
))), /* @__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(
ie,
{
ref: I,
defaultValue: o.widthUnit,
data: me,
popupSettings: c
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesHeight,
l[t.tablePropertiesHeight]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
s,
{
ref: f,
defaultValue: o.height,
min: 0,
placeholder: r.toLanguageString(t.sizeAuto, l[t.sizeAuto])
}
))), /* @__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(
ie,
{
ref: B,
defaultValue: o.heightUnit,
data: me.filter((a) => a !== "%"),
popupSettings: c
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesPosition,
l[t.tablePropertiesPosition]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
ref: K,
defaultValue: de.find((a) => a.value === o.position),
popupSettings: c,
data: de.map((a) => ({
...a,
text: r.toLanguageString(a.textKey, a.text)
})),
textField: "text",
dataItemKey: "value",
valueRender: k,
itemRender: v
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesAlignment,
l[t.tablePropertiesAlignment]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
ref: x,
defaultValue: E.find((a) => a.value === o.textAlign),
data: E.map((a) => ({ ...a, text: r.toLanguageString(a.textKey, a.text) })),
textField: "text",
dataItemKey: "value",
popupSettings: c,
valueRender: k,
itemRender: v
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesCellSpacing,
l[t.tablePropertiesCellSpacing]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
s,
{
ref: i,
defaultValue: o.cellSpacing,
placeholder: r.toLanguageString(t.sizeAuto, l[t.sizeAuto]),
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(
t.tablePropertiesCellPadding,
l[t.tablePropertiesCellPadding]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
s,
{
ref: u,
defaultValue: o.cellPadding,
placeholder: r.toLanguageString(t.sizeAuto, l[t.sizeAuto]),
min: 0
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesTableBackground,
l[t.tablePropertiesTableBackground]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(se, { ref: V, defaultValue: o.backgroundColor }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesBorderWidth,
l[t.tablePropertiesBorderWidth]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(s, { ref: S, defaultValue: o.borderWidth, 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(
t.tablePropertiesBorderColor,
l[t.tablePropertiesBorderColor]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(se, { ref: T, defaultValue: o.borderColor }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesBorderStyle,
l[t.tablePropertiesBorderStyle]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
ref: h,
defaultValue: ue.find((a) => a.value === o.borderStyle),
popupSettings: c,
data: ue.map((a) => ({
...a,
text: r.toLanguageString(a.textKey, a.text)
})),
textField: "text",
dataItemKey: "value"
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
Ne,
{
ref: D,
className: "k-checkbox-wrap",
label: r.toLanguageString(
t.tablePropertiesCollapseBorders,
l[t.tablePropertiesCollapseBorders]
),
defaultChecked: o.collapseBorders
}
)))))), 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" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(t.tablePropertiesId, l[t.tablePropertiesId])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(L, { ref: z, defaultValue: o.id }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesCssClass,
l[t.tablePropertiesCssClass]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(L, { ref: H, defaultValue: o.className }))), /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, /* @__PURE__ */ e.createElement("legend", { className: "k-form-legend" }, r.toLanguageString(
t.tablePropertiesAccessibility,
l[t.tablePropertiesAccessibility]
)), /* @__PURE__ */ e.createElement("div", { className: "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("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesCaption,
l[t.tablePropertiesCaption]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(L, { ref: W, defaultValue: o.caption }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesCaptionPosition,
l[t.tablePropertiesCaptionPosition]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
ref: w,
defaultValue: fe.find(
(a) => a.value === o.captionPosition
),
data: fe.map((a) => ({
...a,
text: r.toLanguageString(a.textKey, a.text)
})),
popupSettings: c,
textField: "text",
dataItemKey: "value",
valueRender: k,
itemRender: v
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesCaptionAlignment,
l[t.tablePropertiesCaptionAlignment]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
ref: C,
defaultValue: E.find((a) => a.value === o.captionAlignment),
data: E.map((a) => ({
...a,
text: r.toLanguageString(a.textKey, a.text)
})),
popupSettings: c,
textField: "text",
dataItemKey: "value",
valueRender: k,
itemRender: v
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
t.tablePropertiesHeaderRows,
l[t.tablePropertiesHeaderRows]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(s, { ref: U, defaultValue: o.headerRows, 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(
t.tablePropertiesHeaderCols,
l[t.tablePropertiesHeaderCols]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(s, { ref: F, defaultValue: o.headerColumns, 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(
t.tablePropertiesAssociateHeaders,
l[t.tablePropertiesAssociateHeaders]
)), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
d,
{
ref: y,
defaultValue: be.find(
(a) => a.value === o.associateHeaders
),
data: be.map((a) => ({
...a,
text: r.toLanguageString(a.textKey, a.text)
})),
popupSettings: c,
textField: "text",
dataItemKey: "value"
}
)))))))), Ee = /* @__PURE__ */ e.createElement(he, { selected: P, onSelect: b, animation: !1, keepTabsMounted: !0 }, /* @__PURE__ */ e.createElement(
ce,
{
title: r.toLanguageString(
t.tablePropertiesGeneral,
l[t.tablePropertiesGeneral]
)
},
ke
), /* @__PURE__ */ e.createElement(
ce,
{
title: r.toLanguageString(
t.tablePropertiesAdvanced,
l[t.tablePropertiesAdvanced]
)
},
ve
)), Pe = [
/* @__PURE__ */ e.createElement(A, { themeColor: "primary", key: "save", onClick: pe }, r.toLanguageString(t.tablePropertiesSave, l[t.tablePropertiesSave])),
/* @__PURE__ */ e.createElement(A, { onClick: n.onClose, key: "cancel" }, r.toLanguageString(t.tablePropertiesCancel, l[t.tablePropertiesCancel]))
];
return /* @__PURE__ */ e.createElement(
Se,
{
className: "k-editor-window k-editor-table-wizard-window",
title: r.toLanguageString(t.tableProperties, l[t.tableProperties]),
onClose: n.onClose,
key: "dialog",
style: { userSelect: "none" },
width: 480,
height: 630,
modal: !0,
minimizeButton: () => null,
maximizeButton: () => null,
resizable: !1
},
Ee,
/* @__PURE__ */ e.createElement(xe, { layout: "start" }, ...Pe)
);
};
export {
_e as TableProperties
};