@progress/kendo-react-editor
Version:
React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package
570 lines (569 loc) • 14.3 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 { keys as e, messages as i } from "../messages/index.mjs";
import { boldIcon as c, italicIcon as r, underlineIcon as m, strikethroughIcon as p, subscriptIcon as d, supscriptIcon as g, linkIcon as f, fileAddIcon as I, tableAddIcon as u, tableRowInsertAboveIcon as v, tableRowInsertBelowIcon as y, tableColumnInsertLeftIcon as R, tableColumnInsertRightIcon as b, tableRowDeleteIcon as h, tableColumnDeleteIcon as C, tableDeleteIcon as k, cellsMergeIcon as N, cellSplitHorizontallyIcon as H, printIcon as x, selectAllIcon as w, filePdfIcon as A, clearCssIcon as L, imageIcon as F, codeIcon as M, binocularsIcon as z, unlinkIcon as W, undoIcon as D, redoIcon as B, foregroundColorIcon as P, dropletIcon as T, alignLeftIcon as U, alignRightIcon as G, alignCenterIcon as J, alignJustifyIcon as O, alignRemoveIcon as K, indentIcon as V, outdentIcon as j, listOrderedIcon as q, listUnorderedIcon as Q } from "@progress/kendo-svg-icons";
import { indentRules as o, bold as X, italic as Y, underline as Z, strikethrough as _, subscript as $, superscript as S, link as t, alignLeftRules as E, alignRightRules as ee, alignCenterRules as ne, alignJustifyRules as ae, alignRemoveRules as le, outdentRules as ie } from "@progress/kendo-editor-common";
const l = { ...o.listsTypes };
var s;
((n) => {
const a = {
type: "button"
};
n.bold = {
...X,
props: {
icon: "bold",
svgIcon: c,
...a
},
messages: {
title: e.bold
},
commandName: "Bold"
}, n.italic = {
...Y,
props: {
icon: "italic",
svgIcon: r,
...a
},
messages: {
title: e.italic
},
commandName: "Italic"
}, n.underline = {
...Z,
props: {
icon: "underline",
svgIcon: m,
...a
},
messages: {
title: e.underline
},
commandName: "Underline"
}, n.strikethrough = {
..._,
props: {
icon: "strikethrough",
svgIcon: p,
...a
},
messages: {
title: e.strikethrough
},
commandName: "Strikethrough"
}, n.subscript = {
...$,
props: {
icon: "subscript",
svgIcon: d,
...a
},
messages: {
title: e.subscript
},
commandName: "Subscript"
}, n.superscript = {
...S,
props: {
icon: "supscript",
svgIcon: g,
...a
},
messages: {
title: e.superscript
},
commandName: "Superscript"
}, n.link = {
...t,
props: {
icon: "link",
svgIcon: f,
...a
},
messages: {
insertHyperlink: e.insertHyperlink,
insertHyperlinkDialogTitle: e.insertHyperlinkDialogTitle,
insertHyperlinkAddress: e.insertHyperlinkAddress,
insertHyperlinkTitle: e.insertHyperlinkTitle,
insertHyperlinkNewWindow: e.insertHyperlinkNewWindow,
insertHyperlinkCancel: e.insertHyperlinkCancel,
insertHyperlinkInsert: e.insertHyperlinkInsert
},
commandName: "Link"
}, n.insertFile = {
...t,
props: {
icon: "file-add",
svgIcon: I,
...a
},
messages: {
insertHyperlink: e.insertFile,
insertHyperlinkDialogTitle: e.insertFileDialogTitle,
insertHyperlinkAddress: e.insertFileAddress,
insertHyperlinkTitle: e.insertFileTitle,
insertHyperlinkNewWindow: "",
insertHyperlinkCancel: e.insertFileCancel,
insertHyperlinkInsert: e.insertFileInsert
},
commandName: "InsertFile",
linkTarget: !1
}, n.insertTable = {
props: {
icon: "table-add",
svgIcon: u,
...a
},
messages: {
createTable: e.createTable,
createTableHint: e.createTableHint
},
commandName: "InsertTable"
}, n.addRowBefore = {
props: {
icon: "table-row-insert-above",
svgIcon: v,
...a
},
messages: {
title: e.addRowBefore
},
commandName: "AddRowBefore"
}, n.addRowAfter = {
props: {
icon: "table-row-insert-below",
svgIcon: y,
...a
},
messages: {
title: e.addRowAfter
},
commandName: "AddRowAfter"
}, n.addColumnBefore = {
props: {
icon: "table-column-insert-left",
svgIcon: R,
...a
},
messages: {
title: e.addColumnBefore
},
commandName: "AddColumnBefore"
}, n.addColumnAfter = {
props: {
icon: "table-column-insert-right",
svgIcon: b,
...a
},
messages: {
title: e.addColumnAfter
},
commandName: "AddColumnAfter"
}, n.deleteRow = {
props: {
icon: "table-row-delete",
svgIcon: h,
...a
},
messages: {
title: e.deleteRow
},
commandName: "DeleteRow"
}, n.deleteColumn = {
props: {
icon: "table-column-delete",
svgIcon: C,
...a
},
messages: {
title: e.deleteColumn
},
commandName: "DeleteColumn"
}, n.deleteTable = {
props: {
icon: "table-delete",
svgIcon: k,
...a
},
messages: {
title: e.deleteTable
},
commandName: "DeleteTable"
}, n.mergeCells = {
props: {
icon: "cells-merge",
svgIcon: N,
...a
},
messages: {
title: e.mergeCells
},
commandName: "MergeCells"
}, n.splitCell = {
props: {
icon: "cell-split-horizontally",
svgIcon: H,
...a
},
messages: {
title: e.splitCell
},
commandName: "SplitCell"
}, n.print = {
props: {
icon: "print",
svgIcon: x,
...a
},
messages: {
title: e.print
}
}, n.selectAll = {
props: {
icon: "select-all",
svgIcon: w,
...a
},
messages: {
title: e.selectAll
}
}, n.pdf = {
props: {
icon: "file-pdf",
svgIcon: A,
...a
},
messages: {
title: e.pdf
}
}, n.savePdfOptions = {
fileName: "editor.pdf",
paperSize: "A4",
margin: "1cm"
}, n.cleanFormatting = {
props: {
icon: "clear-css",
svgIcon: L,
...a
},
messages: {
title: e.cleanFormatting
},
commandName: "CleanFormatting"
}, n.image = {
node: "image",
props: {
icon: "image",
svgIcon: F,
...a
},
messages: {
insertImage: e.insertImage,
insertImageDialogTitle: e.insertImageDialogTitle,
insertImageAddress: e.insertImageAddress,
insertImageTitle: e.insertImageTitle,
insertImageAltText: e.insertImageAltText,
insertImageWidth: e.insertImageWidth,
insertImageHeight: e.insertImageHeight,
insertImageCancel: e.insertImageCancel,
insertImageInsert: e.insertImageInsert
},
commandName: "InsertImage"
}, n.viewHtml = {
props: {
icon: "code",
svgIcon: M,
...a
},
messages: {
viewHtml: e.viewHtml,
viewHtmlDialogTitle: e.viewHtmlDialogTitle,
viewHtmlCancel: e.viewHtmlCancel,
viewHtmlUpdate: e.viewHtmlUpdate
},
commandName: "SetContent"
}, n.findAndReplace = {
props: {
icon: "find",
svgIcon: z,
...a
},
messages: {
findReplaceToolTitle: e.findReplaceToolTitle,
findReplaceDialogTitle: e.findReplaceDialogTitle,
findReplaceTabFind: e.findReplaceTabFind,
findReplaceTabReplace: e.findReplaceTabReplace,
findReplaceFindWhat: e.findReplaceFindWhat,
findReplaceReplaceWith: e.findReplaceReplaceWith,
findReplaceReplace: e.findReplaceReplace,
findReplaceReplaceAll: e.findReplaceReplaceAll,
findReplaceMatchCase: e.findReplaceMatchCase,
findReplaceMatchWord: e.findReplaceMatchWord,
findReplaceMatchCyclic: e.findReplaceMatchCyclic,
findReplaceUseRegExp: e.findReplaceUseRegExp,
findReplacePrevMatch: e.findReplacePrevMatch,
findReplaceNextMatch: e.findReplaceNextMatch,
findReplaceMatches: e.findReplaceMatches,
findReplaceInvalidRegExp: e.findReplaceInvalidRegExp
}
}, n.unlink = {
...t,
props: {
icon: "unlink",
svgIcon: W,
...a
},
messages: {
title: e.unlink
},
commandName: "Unlink"
}, n.undo = {
props: {
icon: "undo",
svgIcon: D,
...a
},
messages: {
title: e.undo
},
commandName: "Undo"
}, n.redo = {
props: {
icon: "redo",
svgIcon: B,
...a
},
messages: {
title: e.redo
},
commandName: "Redo"
}, n.fontSize = {
style: "font-size",
defaultItem: { text: i[e.fontSize], value: "", localizationKey: e.fontSize },
items: [
{ text: "1 (8pt)", value: "xx-small" },
{ text: "2 (10pt)", value: "x-small" },
{ text: "3 (12pt)", value: "small" },
{ text: "4 (14pt)", value: "medium" },
{ text: "5 (18pt)", value: "large" },
{ text: "6 (24pt)", value: "x-large" },
{ text: "7 (36pt)", value: "xx-large" }
],
commandName: "FontSize"
}, n.fontName = {
style: "font-family",
defaultItem: { text: i[e.fontName], value: "", localizationKey: e.fontName },
items: [
{
text: "Arial",
value: "Arial, Helvetica, sans-serif",
style: { fontFamily: "Arial, Helvetica, sans-serif" }
},
{
text: "Courier New",
value: "'Courier New', Courier, monospace",
style: { fontFamily: "'Courier New', Courier, monospace" }
},
{ text: "Georgia", value: "Georgia, serif", style: { fontFamily: "Georgia, serif" } },
{
text: "Impact",
value: "Impact, Charcoal, sans-serif",
style: { fontFamily: "Impact, Charcoal, sans-serif" }
},
{
text: "Lucida Console",
value: "'Lucida Console', Monaco, monospace",
style: { fontFamily: "'Lucida Console', Monaco, monospace" }
},
{
text: "Tahoma",
value: "Tahoma, Geneva, sans-serif",
style: { fontFamily: "Tahoma, Geneva, sans-serif" }
},
{
text: "Times New Roman",
value: "'Times New Roman', Times,serif",
style: { fontFamily: "'Times New Roman', Times,serif" }
},
{
text: "Trebuchet MS",
value: "'Trebuchet MS', Helvetica, sans-serif",
style: { fontFamily: "'Trebuchet MS', Helvetica, sans-serif" }
},
{
text: "Verdana",
value: "Verdana, Geneva, sans-serif",
style: { fontFamily: "Verdana, Geneva, sans-serif" }
}
],
commandName: "FontName"
}, n.formatBlock = {
defaultItem: { text: i[e.format], value: "", localizationKey: e.format },
items: [
{ text: "Paragraph", value: "p", style: { display: "block", marginLeft: 0 } },
{
text: "Heading 1",
value: "h1",
style: { display: "block", fontSize: "2em", marginLeft: 0, fontWeight: "bold" }
},
{
text: "Heading 2",
value: "h2",
style: { display: "block", fontSize: "1.5em", marginLeft: 0, fontWeight: "bold" }
},
{
text: "Heading 3",
value: "h3",
style: { display: "block", fontSize: "1.17em", marginLeft: 0, fontWeight: "bold" }
},
{
text: "Heading 4",
value: "h4",
style: { display: "block", fontSize: "1em", marginLeft: 0, fontWeight: "bold" }
},
{
text: "Heading 5",
value: "h5",
style: { display: "block", fontSize: "0.83em", marginLeft: 0, fontWeight: "bold" }
},
{
text: "Heading 6",
value: "h6",
style: { display: "block", fontSize: "0.67em", marginLeft: 0, fontWeight: "bold" }
}
],
commandName: "FormatBlock"
}, n.foreColor = {
style: "color",
colorPickerProps: {
icon: "foreground-color",
svgIcon: P,
view: "palette",
title: e.foregroundColor,
ariaLabel: e.foreColorLabel
},
commandName: "ForeColor"
}, n.backColor = {
style: "background-color",
colorPickerProps: {
icon: "droplet",
svgIcon: T,
view: "palette",
title: e.backgroundColor,
ariaLabel: e.backColorLabel
},
commandName: "BackColor"
}, n.alignLeft = {
actions: [...E],
props: {
icon: "align-left",
svgIcon: U,
...a
},
messages: {
title: e.alignLeft
},
commandName: "AlignLeft"
}, n.alignRight = {
actions: [...ee],
props: {
icon: "align-right",
svgIcon: G,
...a
},
messages: {
title: e.alignRight
},
commandName: "AlignRight"
}, n.alignCenter = {
actions: [...ne],
props: {
icon: "align-center",
svgIcon: J,
...a
},
messages: {
title: e.alignCenter
},
commandName: "AlignCenter"
}, n.alignJustify = {
actions: [...ae],
props: {
icon: "align-justify",
svgIcon: O,
...a
},
messages: {
title: e.alignJustify
},
commandName: "AlignJustify"
}, n.alignRemove = {
actions: [...le],
props: {
icon: "align-remove",
svgIcon: K,
...a
},
messages: {},
commandName: "AlignRemove"
}, n.indent = {
actions: o.nodes,
listsTypes: l,
props: {
icon: "indent",
svgIcon: V,
...a
},
messages: {
title: e.indent
},
commandName: "Indent"
}, n.outdent = {
actions: ie.nodes,
listsTypes: l,
props: {
icon: "outdent",
svgIcon: j,
...a
},
messages: {
title: e.outdent
},
commandName: "Outdent"
}, n.orderedList = {
listType: l.orderedList,
props: {
icon: "list-ordered",
svgIcon: q,
...a
},
messages: {
title: e.orderedList
},
commandName: "OrderedList",
types: { ...l }
}, n.bulletList = {
listType: l.bulletList,
props: {
icon: "list-unordered",
svgIcon: Q,
...a
},
messages: {
title: e.bulletList
},
commandName: "UnorderedList",
types: { ...l }
};
})(s || (s = {}));
export {
s as EditorToolsSettings,
l as listsTypes
};