roosterjs
Version:
A simple facade for all roosterjs code
1,080 lines (1,006 loc) • 293 kB
JavaScript
define(["React","ReactDOM","FluentUIReact","roosterjs"], (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE__fluentui_react_lib_Theme__, __WEBPACK_EXTERNAL_MODULE_roosterjs_content_model_dom__) => { return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx":
/*!**********************************************************************************!*\
!*** ./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx ***!
\**********************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getColorPickerDropDown = exports.renderColorPicker = void 0;
var React = __webpack_require__(/*! react */ "react");
var backgroundColors_1 = __webpack_require__(/*! ../utils/backgroundColors */ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts");
var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
var textColors_1 = __webpack_require__(/*! ../utils/textColors */ "./packages/roosterjs-react/lib/colorPicker/utils/textColors.ts");
var getClassNamesForColorPicker_1 = __webpack_require__(/*! ../utils/getClassNamesForColorPicker */ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts");
var classNames = (0, Styling_1.mergeStyleSets)({
colorSquare: {
width: '20px',
height: '20px',
margin: '4px',
borderStyle: 'solid',
borderWidth: '2px',
'&:hover': {
borderColor: 'red',
},
},
colorSquareBorder: {
borderColor: 'transparent',
},
colorSquareBorderWhite: {
borderColor: '#bebebe',
},
});
/**
* @internal
* Render a color picker
* @param item Color items
* @param colorDef Definition of colors
* @param onClick On click event handler
*/
function renderColorPicker(item, colorDef, onClick) {
var key = item.key;
var buttonColor = colorDef[key].lightModeColor;
return (React.createElement("button", { onClick: function (e) { return onClick(e, item); }, title: item.text },
React.createElement("div", { className: classNames.colorSquare +
' ' +
(key == 'textColorWhite' || key == 'backgroundColorWhite'
? classNames.colorSquareBorderWhite
: classNames.colorSquareBorder), style: {
backgroundColor: buttonColor,
} })));
}
exports.renderColorPicker = renderColorPicker;
/**
* Get a drop down data object of color picker used by drop down button
* @param colorSet The set of color, text or background
* @returns The color picker drop down for ribbon button
*/
function getColorPickerDropDown(colorSet) {
return {
items: colorSet == 'background' ? backgroundColors_1.BackgroundColorDropDownItems : textColors_1.TextColorDropDownItems,
itemClassName: (0, getClassNamesForColorPicker_1.getColorPickerItemClassName)(),
allowLivePreview: true,
itemRender: colorSet == 'background'
? function (item, onClick) { return renderColorPicker(item, backgroundColors_1.BackgroundColors, onClick); }
: function (item, onClick) { return renderColorPicker(item, textColors_1.TextColors, onClick); },
commandBarSubMenuProperties: {
className: (0, getClassNamesForColorPicker_1.getColorPickerContainerClassName)(),
},
};
}
exports.getColorPickerDropDown = getColorPickerDropDown;
/***/ }),
/***/ "./packages/roosterjs-react/lib/colorPicker/index.ts":
/*!***********************************************************!*\
!*** ./packages/roosterjs-react/lib/colorPicker/index.ts ***!
\***********************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getColorPickerDropDown = exports.getTextColorValue = exports.getBackgroundColorValue = void 0;
var backgroundColors_1 = __webpack_require__(/*! ./utils/backgroundColors */ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts");
Object.defineProperty(exports, "getBackgroundColorValue", ({ enumerable: true, get: function () { return backgroundColors_1.getBackgroundColorValue; } }));
var textColors_1 = __webpack_require__(/*! ./utils/textColors */ "./packages/roosterjs-react/lib/colorPicker/utils/textColors.ts");
Object.defineProperty(exports, "getTextColorValue", ({ enumerable: true, get: function () { return textColors_1.getTextColorValue; } }));
var renderColorPicker_1 = __webpack_require__(/*! ./component/renderColorPicker */ "./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx");
Object.defineProperty(exports, "getColorPickerDropDown", ({ enumerable: true, get: function () { return renderColorPicker_1.getColorPickerDropDown; } }));
/***/ }),
/***/ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts":
/*!****************************************************************************!*\
!*** ./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts ***!
\****************************************************************************/
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getBackgroundColorValue = exports.BackgroundColorDropDownItems = exports.BackgroundColors = void 0;
/**
* @internal
*/
var BackgroundColors = {
backgroundColorCyan: { lightModeColor: '#00ffff', darkModeColor: '#005357' },
backgroundColorGreen: { lightModeColor: '#00ff00', darkModeColor: '#005e00' },
backgroundColorYellow: { lightModeColor: '#ffff00', darkModeColor: '#383e00' },
backgroundColorOrange: { lightModeColor: '#ff8000', darkModeColor: '#bf4c00' },
backgroundColorRed: { lightModeColor: '#ff0000', darkModeColor: '#ff2711' },
backgroundColorMagenta: { lightModeColor: '#ff00ff', darkModeColor: '#e700e8' },
backgroundColorLightCyan: { lightModeColor: '#80ffff', darkModeColor: '#004c4f' },
backgroundColorLightGreen: { lightModeColor: '#80ff80', darkModeColor: '#005400' },
backgroundColorLightYellow: { lightModeColor: '#ffff80', darkModeColor: '#343c00' },
backgroundColorLightOrange: { lightModeColor: '#ffc080', darkModeColor: '#77480b' },
backgroundColorLightRed: { lightModeColor: '#ff8080', darkModeColor: '#bc454a' },
backgroundColorLightMagenta: { lightModeColor: '#ff80ff', darkModeColor: '#aa2bad' },
backgroundColorWhite: { lightModeColor: '#ffffff', darkModeColor: '#333333' },
backgroundColorLightGray: { lightModeColor: '#cccccc', darkModeColor: '#535353' },
backgroundColorGray: { lightModeColor: '#999999', darkModeColor: '#777777' },
backgroundColorDarkGray: { lightModeColor: '#666666', darkModeColor: '#a0a0a0' },
backgroundColorDarkerGray: { lightModeColor: '#333333', darkModeColor: '#cfcfcf' },
backgroundColorBlack: { lightModeColor: '#000000', darkModeColor: '#ffffff' },
};
exports.BackgroundColors = BackgroundColors;
/**
* @internal
* List of colors in drop down list
*/
var BackgroundColorDropDownItems = {
backgroundColorCyan: 'Cyan',
backgroundColorGreen: 'Green',
backgroundColorYellow: 'Yellow',
backgroundColorOrange: 'Orange',
backgroundColorRed: 'Red',
backgroundColorMagenta: 'Magenta',
backgroundColorLightCyan: 'Light cyan',
backgroundColorLightGreen: 'Light green',
backgroundColorLightYellow: 'Light yellow',
backgroundColorLightOrange: 'Light orange',
backgroundColorLightRed: 'Light red',
backgroundColorLightMagenta: 'Light magenta',
backgroundColorWhite: 'White',
backgroundColorLightGray: 'Light gray',
backgroundColorGray: 'Gray',
backgroundColorDarkGray: 'Dark gray',
backgroundColorDarkerGray: 'Darker gray',
backgroundColorBlack: 'Black',
};
exports.BackgroundColorDropDownItems = BackgroundColorDropDownItems;
/**
* Get mode independent color value of background color from the given color key
* @param key The key to get color from
* @returns A model independent color value of the given key
*/
function getBackgroundColorValue(key) {
return BackgroundColors[key];
}
exports.getBackgroundColorValue = getBackgroundColorValue;
/***/ }),
/***/ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts":
/*!***************************************************************************************!*\
!*** ./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts ***!
\***************************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getColorPickerItemClassName = exports.getColorPickerContainerClassName = void 0;
var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
var classNames = (0, Styling_1.mergeStyleSets)({
colorPickerContainer: {
width: '192px',
padding: '8px',
overflow: 'hidden',
'& ul': {
width: '192px',
overflow: 'hidden',
},
},
colorMenuItem: {
display: 'inline-block',
width: '32px',
height: '32px',
'& button': {
padding: '0px',
minWidth: '0px',
background: 'transparent',
border: 'none',
},
},
});
/**
* @internal
*/
function getColorPickerContainerClassName() {
return classNames.colorPickerContainer;
}
exports.getColorPickerContainerClassName = getColorPickerContainerClassName;
/**
* @internal
*/
function getColorPickerItemClassName() {
return classNames.colorMenuItem;
}
exports.getColorPickerItemClassName = getColorPickerItemClassName;
/***/ }),
/***/ "./packages/roosterjs-react/lib/colorPicker/utils/textColors.ts":
/*!**********************************************************************!*\
!*** ./packages/roosterjs-react/lib/colorPicker/utils/textColors.ts ***!
\**********************************************************************/
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getTextColorValue = exports.TextColorDropDownItems = exports.TextColors = void 0;
/**
* @internal
*/
var TextColors = {
textColorLightBlue: { lightModeColor: '#51a7f9', darkModeColor: '#0075c2' },
textColorLightGreen: { lightModeColor: '#6fc040', darkModeColor: '#207a00' },
textColorLightYellow: { lightModeColor: '#f5d427', darkModeColor: '#5d4d00' },
textColorLightOrange: { lightModeColor: '#f3901d', darkModeColor: '#ab5500' },
textColorLightRed: { lightModeColor: '#ed5c57', darkModeColor: '#df504d' },
textColorLightPurple: { lightModeColor: '#b36ae2', darkModeColor: '#ab63da' },
textColorBlue: { lightModeColor: '#0c64c0', darkModeColor: '#6da0ff' },
textColorGreen: { lightModeColor: '#0c882a', darkModeColor: '#3da848' },
textColorYellow: { lightModeColor: '#dcbe22', darkModeColor: '#6d5c00' },
textColorOrange: { lightModeColor: '#de6a19', darkModeColor: '#d3610c' },
textColorRed: { lightModeColor: '#c82613', darkModeColor: '#ff6847' },
textColorPurple: { lightModeColor: '#763e9b', darkModeColor: '#d394f9' },
textColorDarkBlue: { lightModeColor: '#174e86', darkModeColor: '#93b8f9' },
textColorDarkGreen: { lightModeColor: '#0f5c1a', darkModeColor: '#7fc57b' },
textColorDarkYellow: { lightModeColor: '#c3971d', darkModeColor: '#946f00' },
textColorDarkOrange: { lightModeColor: '#be5b17', darkModeColor: '#de7633' },
textColorDarkRed: { lightModeColor: '#861106', darkModeColor: '#ff9b7c' },
textColorDarkPurple: { lightModeColor: '#5e327c', darkModeColor: '#dea9fd' },
textColorDarkerBlue: { lightModeColor: '#002451', darkModeColor: '#cedbff' },
textColorDarkerGreen: { lightModeColor: '#06400c', darkModeColor: '#a3da9b' },
textColorDarkerYellow: { lightModeColor: '#a37519', darkModeColor: '#b5852a' },
textColorDarkerOrange: { lightModeColor: '#934511', darkModeColor: '#ef935c' },
textColorDarkerRed: { lightModeColor: '#570606', darkModeColor: '#ffc0b1' },
textColorDarkerPurple: { lightModeColor: '#3b204d', darkModeColor: '#eecaff' },
textColorWhite: { lightModeColor: '#ffffff', darkModeColor: '#333333' },
textColorLightGray: { lightModeColor: '#cccccc', darkModeColor: '#535353' },
textColorGray: { lightModeColor: '#999999', darkModeColor: '#777777' },
textColorDarkGray: { lightModeColor: '#666666', darkModeColor: '#a0a0a0' },
textColorDarkerGray: { lightModeColor: '#333333', darkModeColor: '#cfcfcf' },
textColorBlack: { lightModeColor: '#000000', darkModeColor: '#ffffff' },
};
exports.TextColors = TextColors;
/**
* @internal
*/
var TextColorDropDownItems = {
textColorLightBlue: 'Light blue',
textColorLightGreen: 'Light green',
textColorLightYellow: 'Light yellow',
textColorLightOrange: 'Light orange',
textColorLightRed: 'Light red',
textColorLightPurple: 'Light purple',
textColorBlue: 'Blue',
textColorGreen: 'Green',
textColorYellow: 'Yellow',
textColorOrange: 'Orange',
textColorRed: 'Red',
textColorPurple: 'Purple',
textColorDarkBlue: 'Dark blue',
textColorDarkGreen: 'Dark green',
textColorDarkYellow: 'Dark yellow',
textColorDarkOrange: 'Dark orange',
textColorDarkRed: 'Dark red',
textColorDarkPurple: 'Dark purple',
textColorDarkerBlue: 'Darker blue',
textColorDarkerGreen: 'Darker green',
textColorDarkerYellow: 'Darker yellow',
textColorDarkerOrange: 'Darker orange',
textColorDarkerRed: 'Darker red',
textColorDarkerPurple: 'Darker purple',
textColorWhite: 'White',
textColorLightGray: 'Light gray',
textColorGray: 'Gray',
textColorDarkGray: 'Dark gray',
textColorDarkerGray: 'Darker gray',
textColorBlack: 'Black',
};
exports.TextColorDropDownItems = TextColorDropDownItems;
/**
* Get mode independent color value of text color from the given color key
* @param key The key to get color from
* @returns A model independent color value of the given key
*/
function getTextColorValue(key) {
return TextColors[key];
}
exports.getTextColorValue = getTextColorValue;
/***/ }),
/***/ "./packages/roosterjs-react/lib/common/index.ts":
/*!******************************************************!*\
!*** ./packages/roosterjs-react/lib/common/index.ts ***!
\******************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getLocalizedString = exports.createUIUtilities = void 0;
var createUIUtilities_1 = __webpack_require__(/*! ./utils/createUIUtilities */ "./packages/roosterjs-react/lib/common/utils/createUIUtilities.tsx");
Object.defineProperty(exports, "createUIUtilities", ({ enumerable: true, get: function () { return createUIUtilities_1.createUIUtilities; } }));
var getLocalizedString_1 = __webpack_require__(/*! ./utils/getLocalizedString */ "./packages/roosterjs-react/lib/common/utils/getLocalizedString.ts");
Object.defineProperty(exports, "getLocalizedString", ({ enumerable: true, get: function () { return getLocalizedString_1.getLocalizedString; } }));
/***/ }),
/***/ "./packages/roosterjs-react/lib/common/utils/createUIUtilities.tsx":
/*!*************************************************************************!*\
!*** ./packages/roosterjs-react/lib/common/utils/createUIUtilities.tsx ***!
\*************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createUIUtilities = void 0;
var React = __webpack_require__(/*! react */ "react");
var ReactDOM = __webpack_require__(/*! react-dom */ "react-dom");
var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Theme");
var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/Theme");
/**
* Create the UI Utilities object for plugins to render additional react components
* @param container Container DIV of editor
* @param theme Current theme used by editor
* @returns A UIUtilities object
*/
function createUIUtilities(container, theme) {
return {
renderComponent: function (element) {
var doc = container.ownerDocument;
var div = doc.createElement('div');
doc.body.appendChild(div);
ReactDOM.render(React.createElement(WindowProvider_1.WindowProvider, { window: doc.defaultView },
React.createElement(Theme_1.ThemeProvider, { theme: theme }, element)), div);
return function () {
ReactDOM.unmountComponentAtNode(div);
doc.body.removeChild(div);
};
},
isRightToLeft: function () {
var _a;
var dir = container &&
((_a = container.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(container).direction);
return dir == 'rtl';
},
};
}
exports.createUIUtilities = createUIUtilities;
/***/ }),
/***/ "./packages/roosterjs-react/lib/common/utils/getLocalizedString.ts":
/*!*************************************************************************!*\
!*** ./packages/roosterjs-react/lib/common/utils/getLocalizedString.ts ***!
\*************************************************************************/
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getLocalizedString = void 0;
/**
* Get a localized string
* @param strings The LocalizedStrings map
* @param key Key of the string
* @param defaultString Default unlocalized string, will be used if strings is not specified or the give key doesn't exist in strings
* @returns A localized string from the string map, or defaultString
*/
function getLocalizedString(strings, key, defaultString) {
var str = strings === null || strings === void 0 ? void 0 : strings[key];
if (typeof str == 'function') {
return str();
}
else if (typeof str == 'string') {
return str;
}
else {
return defaultString;
}
}
exports.getLocalizedString = getLocalizedString;
/***/ }),
/***/ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts":
/*!***************************************************************************!*\
!*** ./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts ***!
\***************************************************************************/
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.renderReactComponent = void 0;
/**
* @internal
*/
function renderReactComponent(uiUtilities, reactElement) {
if (uiUtilities) {
return uiUtilities.renderComponent(reactElement);
}
else {
throw new Error('UIUtilities is required but not provided. Please call ReactEditorPlugin.setUIUtilities() to set a valid uiUtilities object');
}
}
exports.renderReactComponent = renderReactComponent;
/***/ }),
/***/ "./packages/roosterjs-react/lib/contextMenu/index.ts":
/*!***********************************************************!*\
!*** ./packages/roosterjs-react/lib/contextMenu/index.ts ***!
\***********************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createTableEditMenuProvider = exports.createImageEditMenuProvider = exports.createListEditMenuProvider = exports.createContextMenuProvider = exports.createContextMenuPlugin = void 0;
var createContextMenuPlugin_1 = __webpack_require__(/*! ./plugin/createContextMenuPlugin */ "./packages/roosterjs-react/lib/contextMenu/plugin/createContextMenuPlugin.tsx");
Object.defineProperty(exports, "createContextMenuPlugin", ({ enumerable: true, get: function () { return createContextMenuPlugin_1.createContextMenuPlugin; } }));
var createContextMenuProvider_1 = __webpack_require__(/*! ./utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
Object.defineProperty(exports, "createContextMenuProvider", ({ enumerable: true, get: function () { return createContextMenuProvider_1.createContextMenuProvider; } }));
var createListEditMenuProvider_1 = __webpack_require__(/*! ./menus/createListEditMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/menus/createListEditMenuProvider.ts");
Object.defineProperty(exports, "createListEditMenuProvider", ({ enumerable: true, get: function () { return createListEditMenuProvider_1.createListEditMenuProvider; } }));
var createImageEditMenuProvider_1 = __webpack_require__(/*! ./menus/createImageEditMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx");
Object.defineProperty(exports, "createImageEditMenuProvider", ({ enumerable: true, get: function () { return createImageEditMenuProvider_1.createImageEditMenuProvider; } }));
var createTableEditMenuProvider_1 = __webpack_require__(/*! ./menus/createTableEditMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/menus/createTableEditMenuProvider.ts");
Object.defineProperty(exports, "createTableEditMenuProvider", ({ enumerable: true, get: function () { return createTableEditMenuProvider_1.createTableEditMenuProvider; } }));
/***/ }),
/***/ "./packages/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx":
/*!****************************************************************************************!*\
!*** ./packages/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx ***!
\****************************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createImageEditMenuProvider = void 0;
var createContextMenuProvider_1 = __webpack_require__(/*! ../utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
var MIN_WIDTH = 10;
var MIN_HEIGHT = 10;
var ImageAltTextMenuItem = {
key: 'menuNameImageAltText',
unlocalizedText: 'Add alternate text',
onClick: function (_, editor, node, strings, uiUtilities) {
var image = node;
var initValue = image.alt;
(0, showInputDialog_1.showInputDialog)(uiUtilities, 'menuNameImageAltText', 'Add alternate text', {
altText: {
labelKey: null,
unlocalizedLabel: null,
initValue: initValue,
},
}, strings).then(function (values) {
editor.focus();
editor.setDOMSelection({
type: 'image',
image: image,
});
if (values) {
(0, roosterjs_content_model_api_1.setImageAltText)(editor, values.altText);
}
});
},
};
var sizeMap = {
menuNameImageSizeBestFit: 0,
menuNameImageSizeSmall: 0.25,
menuNameImageSizeMedium: 0.5,
menuNameImageSizeOriginal: 1,
};
var ImageResizeMenuItem = {
key: 'menuNameImageResize',
unlocalizedText: 'Size',
subItems: {
menuNameImageSizeBestFit: 'Best fit',
menuNameImageSizeSmall: 'Small',
menuNameImageSizeMedium: 'Medium',
menuNameImageSizeOriginal: 'Original',
},
onClick: function (key, editor, _) {
var _a;
var selection = editor.getDOMSelection();
if (!selection || selection.type !== 'image') {
return;
}
var percentage = (_a = sizeMap[key]) !== null && _a !== void 0 ? _a : 0;
if (percentage > 0) {
var _b = selection.image, naturalWidth = _b.naturalWidth, naturalHeight = _b.naturalHeight;
resizeByPercentage(editor, percentage, naturalWidth, naturalHeight);
}
else {
resetImage(editor);
}
},
};
var ImageRotateMenuItem = {
key: 'menuNameImageRotate',
unlocalizedText: 'Rotate image',
subItems: {
menuNameImageRotateLeft: 'Left',
menuNameImageRotateRight: 'Right',
},
shouldShow: function (_, node, imageEditor) {
return (!!(imageEditor === null || imageEditor === void 0 ? void 0 : imageEditor.isOperationAllowed('rotate')) &&
imageEditor.canRegenerateImage(node));
},
onClick: function (key, _editor, _node, _strings, _uiUtilities, imageEdit) {
switch (key) {
case 'menuNameImageRotateLeft':
imageEdit === null || imageEdit === void 0 ? void 0 : imageEdit.rotateImage(-Math.PI / 2);
break;
case 'menuNameImageRotateRight':
imageEdit === null || imageEdit === void 0 ? void 0 : imageEdit.rotateImage(Math.PI / 2);
break;
}
},
};
var ImageFlipMenuItem = {
key: 'menuNameImageFlip',
unlocalizedText: 'Flip image',
subItems: {
menuNameImageRotateFlipHorizontally: 'Flip Horizontally',
menuNameImageRotateFlipVertically: 'Flip Vertically',
},
shouldShow: function (_, node, imageEditor) {
return (!!(imageEditor === null || imageEditor === void 0 ? void 0 : imageEditor.isOperationAllowed('rotate')) &&
imageEditor.canRegenerateImage(node));
},
onClick: function (key, _editor, _node, _strings, _uiUtilities, imageEdit) {
switch (key) {
case 'menuNameImageRotateFlipHorizontally':
imageEdit === null || imageEdit === void 0 ? void 0 : imageEdit.flipImage('horizontal');
break;
case 'menuNameImageRotateFlipVertically':
imageEdit === null || imageEdit === void 0 ? void 0 : imageEdit.flipImage('vertical');
break;
}
},
};
var ImageCropMenuItem = {
key: 'menuNameImageCrop',
unlocalizedText: 'Crop image',
shouldShow: function (_, node, imageEditor) {
return (!!(imageEditor === null || imageEditor === void 0 ? void 0 : imageEditor.isOperationAllowed('crop')) &&
imageEditor.canRegenerateImage(node));
},
onClick: function (_, _editor, _node, _strings, _uiUtilities, imageEdit) {
imageEdit === null || imageEdit === void 0 ? void 0 : imageEdit.cropImage();
},
};
var ImageRemoveMenuItem = {
key: 'menuNameImageRemove',
unlocalizedText: 'Remove image',
onClick: function (_, editor, node) {
removeImage(editor);
},
};
var ImageCopyMenuItem = {
key: 'menuNameImageCopy',
unlocalizedText: 'Copy image',
onClick: function (_, editor) {
var _a;
(_a = editor.getDocument()) === null || _a === void 0 ? void 0 : _a.execCommand('copy');
},
};
var ImageCutMenuItem = {
key: 'menuNameImageCut',
unlocalizedText: 'Cut image',
onClick: function (_, editor) {
var _a;
(_a = editor.getDocument()) === null || _a === void 0 ? void 0 : _a.execCommand('cut');
},
};
function shouldShowImageEditItems(editor, _) {
var selection = editor.getDOMSelection();
return (selection === null || selection === void 0 ? void 0 : selection.type) === 'image' && !!selection.image;
}
/**
* Create a new instance of ContextMenuProvider to support image editing functionalities in context menu
* @returns A new ContextMenuProvider
*/
function createImageEditMenuProvider(imageEditor, strings) {
return (0, createContextMenuProvider_1.createContextMenuProvider)('imageEdit', [
ImageAltTextMenuItem,
ImageResizeMenuItem,
ImageCropMenuItem,
ImageRemoveMenuItem,
ImageRotateMenuItem,
ImageFlipMenuItem,
ImageCopyMenuItem,
ImageCutMenuItem,
], strings, shouldShowImageEditItems, imageEditor);
}
exports.createImageEditMenuProvider = createImageEditMenuProvider;
function removeImage(editor) {
editor.formatContentModel(function (model) {
var changed = false;
(0, roosterjs_content_model_dom_1.iterateSelections)(model, function (_, __, block, segments) {
segments === null || segments === void 0 ? void 0 : segments.forEach(function (segment) {
if (segment.segmentType == 'Image' && (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph') {
var index = block.segments.indexOf(segment);
if (index >= 0) {
(0, roosterjs_content_model_dom_1.mutateBlock)(block).segments.splice(index, 1);
changed = true;
}
}
});
});
return changed;
}, {
apiName: 'DeleteImage',
});
}
function resizeByPercentage(editor, percentage, naturalWidth, naturalHeight) {
(0, roosterjs_content_model_api_1.formatImageWithContentModel)(editor, 'resizeImage', function (segment) {
(0, roosterjs_content_model_dom_1.updateImageMetadata)(segment, function (format) {
var validFormat = Object.assign({
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
leftPercent: 0,
rightPercent: 0,
topPercent: 0,
bottomPercent: 0,
angleRad: 0,
}, format);
var newWidth = Math.max(MIN_WIDTH, validFormat.naturalWidth *
(1 - validFormat.leftPercent - validFormat.rightPercent) *
percentage);
var newHeight = Math.max(MIN_HEIGHT, validFormat.naturalHeight *
(1 - validFormat.topPercent - validFormat.bottomPercent) *
percentage);
validFormat.widthPx = newWidth;
validFormat.heightPx = newHeight;
segment.format.width = newWidth + 'px';
segment.format.height = newHeight + 'px';
return validFormat;
});
});
}
function resetImage(editor) {
(0, roosterjs_content_model_api_1.formatImageWithContentModel)(editor, 'resizeImage', function (segment) {
(0, roosterjs_content_model_dom_1.updateImageMetadata)(segment, function () { return null; });
delete segment.format.width;
delete segment.format.height;
segment.format.maxWidth = '100%';
});
}
/***/ }),
/***/ "./packages/roosterjs-react/lib/contextMenu/menus/createListEditMenuProvider.ts":
/*!**************************************************************************************!*\
!*** ./packages/roosterjs-react/lib/contextMenu/menus/createListEditMenuProvider.ts ***!
\**************************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createListEditMenuProvider = void 0;
var createContextMenuProvider_1 = __webpack_require__(/*! ../utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
var ListNumberResetMenuItem = {
key: 'menuNameListNumberReset',
unlocalizedText: 'Restart at 1',
onClick: function (_, editor, node) {
(0, roosterjs_content_model_api_1.setListStartNumber)(editor, 1);
},
};
var ListNumberEditMenuItem = {
key: 'menuNameListNumberEdit',
unlocalizedText: 'Set numbering value',
onClick: function (_, editor, node, strings, uiUtilities) {
var listAndLi = getEditingList(editor, node);
if (listAndLi) {
var list = listAndLi.list, li = listAndLi.li;
var startNumber_1 = list.start;
for (var child = list.firstChild; child; child = child.nextSibling) {
if (child === li) {
break;
}
else if ((0, roosterjs_content_model_dom_1.isNodeOfType)(child, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isElementOfType)(child, 'li')) {
startNumber_1 += 1;
}
}
(0, showInputDialog_1.showInputDialog)(uiUtilities, 'menuNameListNumberEdit', 'Set numbering value', {
value: {
labelKey: 'dialogTextSetListNumber',
unlocalizedLabel: 'Set value to',
initValue: startNumber_1.toString(),
},
}, strings).then(function (values) {
editor.focus();
if (values) {
var result = parseInt(values.value);
if (result > 0 && result != startNumber_1) {
(0, roosterjs_content_model_api_1.setListStartNumber)(editor, Math.floor(result));
}
}
});
}
},
};
function getEditingList(editor, node) {
var domHelper = editor.getDOMHelper();
var li = domHelper.findClosestElementAncestor(node, 'LI');
var list = li && domHelper.findClosestElementAncestor(li, 'ol');
return (list === null || list === void 0 ? void 0 : list.isContentEditable) ? { list: list, li: li } : null;
}
/**
* Create a new instance of ContextMenuProvider to support list number editing functionalities in context menu
* @returns A new ContextMenuProvider
*/
function createListEditMenuProvider(strings) {
return (0, createContextMenuProvider_1.createContextMenuProvider)('listEdit', [ListNumberResetMenuItem, ListNumberEditMenuItem], strings, function (editor, node) { return !!getEditingList(editor, node); });
}
exports.createListEditMenuProvider = createListEditMenuProvider;
/***/ }),
/***/ "./packages/roosterjs-react/lib/contextMenu/menus/createTableEditMenuProvider.ts":
/*!***************************************************************************************!*\
!*** ./packages/roosterjs-react/lib/contextMenu/menus/createTableEditMenuProvider.ts ***!
\***************************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createTableEditMenuProvider = void 0;
var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
var createContextMenuProvider_1 = __webpack_require__(/*! ../utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
var renderColorPicker_1 = __webpack_require__(/*! ../../colorPicker/component/renderColorPicker */ "./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx");
var getClassNamesForColorPicker_1 = __webpack_require__(/*! ../../colorPicker/utils/getClassNamesForColorPicker */ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts");
var backgroundColors_1 = __webpack_require__(/*! ../../colorPicker/utils/backgroundColors */ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts");
var TableEditOperationMap = {
menuNameTableInsertAbove: 'insertAbove',
menuNameTableInsertBelow: 'insertBelow',
menuNameTableInsertLeft: 'insertLeft',
menuNameTableInsertRight: 'insertRight',
menuNameTableDeleteTable: 'deleteTable',
menuNameTableDeleteColumn: 'deleteColumn',
menuNameTableDeleteRow: 'deleteRow',
menuNameTableMergeAbove: 'mergeAbove',
menuNameTableMergeBelow: 'mergeBelow',
menuNameTableMergeLeft: 'mergeLeft',
menuNameTableMergeRight: 'mergeRight',
menuNameTableMergeCells: 'mergeCells',
menuNameTableSplitHorizontally: 'splitHorizontally',
menuNameTableSplitVertically: 'splitVertically',
menuNameTableAlignLeft: 'alignCellLeft',
menuNameTableAlignCenter: 'alignCellCenter',
menuNameTableAlignRight: 'alignCellRight',
menuNameTableAlignTop: 'alignCellTop',
menuNameTableAlignMiddle: 'alignCellMiddle',
menuNameTableAlignBottom: 'alignCellBottom',
menuNameTableAlignTableLeft: 'alignLeft',
menuNameTableAlignTableCenter: 'alignCenter',
menuNameTableAlignTableRight: 'alignRight',
};
var ColorValues = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, backgroundColors_1.BackgroundColors), {
// Add this value to satisfy compiler
menuNameTableCellShade: null });
function onClick(key, editor) {
var operation = TableEditOperationMap[key];
if (operation) {
(0, roosterjs_content_model_api_1.editTable)(editor, operation);
}
}
var TableEditInsertMenuItem = {
key: 'menuNameTableInsert',
unlocalizedText: 'Insert',
subItems: {
menuNameTableInsertAbove: 'Insert above',
menuNameTableInsertBelow: 'Insert below',
menuNameTableInsertLeft: 'Insert left',
menuNameTableInsertRight: 'Insert right',
},
onClick: onClick,
};
var TableEditDeleteMenuItem = {
key: 'menuNameTableDelete',
unlocalizedText: 'Delete',
subItems: {
menuNameTableDeleteColumn: 'Delete column',
menuNameTableDeleteRow: 'Delete row',
menuNameTableDeleteTable: 'Delete table',
},
onClick: onClick,
};
var TableEditMergeMenuItem = {
key: 'menuNameTableMerge',
unlocalizedText: 'Merge',
subItems: {
menuNameTableMergeAbove: 'Merge above',
menuNameTableMergeBelow: 'Merge below',
menuNameTableMergeLeft: 'Merge left',
menuNameTableMergeRight: 'Merge right',
'-': '-',
menuNameTableMergeCells: 'Merge selected cells',
},
onClick: onClick,
};
var TableEditSplitMenuItem = {
key: 'menuNameTableSplit',
unlocalizedText: 'Split',
subItems: {
menuNameTableSplitHorizontally: 'Split horizontally',
menuNameTableSplitVertically: 'Split vertically',
},
onClick: onClick,
};
var TableEditAlignMenuItem = {
key: 'menuNameTableAlign',
unlocalizedText: 'Align cell',
subItems: {
menuNameTableAlignLeft: 'Align left',
menuNameTableAlignCenter: 'Align center',
menuNameTableAlignRight: 'Align right',
'-': '-',
menuNameTableAlignTop: 'Align top',
menuNameTableAlignMiddle: 'Align middle',
menuNameTableAlignBottom: 'Align bottom',
},
onClick: onClick,
};
var TableEditAlignTableMenuItem = {
key: 'menuNameTableAlignTable',
unlocalizedText: 'Align table',
subItems: {
menuNameTableAlignTableLeft: 'Align left',
menuNameTableAlignTableCenter: 'Align center',
menuNameTableAlignTableRight: 'Align right',
},
onClick: onClick,
};
var TableEditCellShadeMenuItem = {
key: 'menuNameTableCellShade',
unlocalizedText: 'Shading',
subItems: backgroundColors_1.BackgroundColorDropDownItems,
onClick: function (key, editor) {
(0, roosterjs_content_model_api_1.setTableCellShade)(editor, ColorValues[key].lightModeColor);
},
itemRender: function (item, click) { return (0, renderColorPicker_1.renderColorPicker)(item, ColorValues, click); },
itemClassName: (0, getClassNamesForColorPicker_1.getColorPickerItemClassName)(),
commandBarSubMenuProperties: {
className: (0, getClassNamesForColorPicker_1.getColorPickerContainerClassName)(),
},
};
function getEditingTable(editor, node) {
var domHelper = editor.getDOMHelper();
var td = domHelper.findClosestElementAncestor(node, 'TD,TH');
var table = td && domHelper.findClosestElementAncestor(td, 'table');
return (table === null || table === void 0 ? void 0 : table.isContentEditable) ? { table: table, td: td } : null;
}
/**
* Create a new instance of ContextMenuProvider to support table editing functionalities in context menu
* @returns A new ContextMenuProvider
*/
function createTableEditMenuProvider(strings) {
return (0, createContextMenuProvider_1.createContextMenuProvider)('tableEdit', [
TableEditInsertMenuItem,
TableEditDeleteMenuItem,
TableEditMergeMenuItem,
TableEditSplitMenuItem,
TableEditAlignMenuItem,
TableEditAlignTableMenuItem,
TableEditCellShadeMenuItem,
], strings, function (editor, node) { return !!getEditingTable(editor, node); });
}
exports.createTableEditMenuProvider = createTableEditMenuProvider;
/***/ }),
/***/ "./packages/roosterjs-react/lib/contextMenu/plugin/createContextMenuPlugin.tsx":
/*!*************************************************************************************!*\
!*** ./packages/roosterjs-react/lib/contextMenu/plugin/createContextMenuPlugin.tsx ***!
\*************************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createContextMenuPlugin = void 0;
var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
var React = __webpack_require__(/*! react */ "react");
var roosterjs_content_model_plugins_1 = __webpack_require__(/*! roosterjs-content-model-plugins */ "roosterjs-content-model-dom");
var ContextualMenu_1 = __webpack_require__(/*! @fluentui/react/lib/ContextualMenu */ "@fluentui/react/lib/Theme");
var renderReactComponent_1 = __webpack_require__(/*! ../../common/utils/renderReactComponent */ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts");
function normalizeItems(items) {
var dividerKey = 0;
return items.map(function (item) {
return item || {
name: '-',
key: 'divider_' + (dividerKey++).toString(),
};
});
}
var ContextMenuPlugin = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ContextMenuPlugin, _super);
function ContextMenuPlugin() {
var _this = _super.call(this, {
render: function (container, items, onDismiss) {
var normalizedItems = normalizeItems(items);
if (normalizedItems.length > 0) {
_this.disposer = (0, renderReactComponent_1.renderReactComponent)(_this.uiUtilities, React.createElement(ContextualMenu_1.ContextualMenu, { target: container, onDismiss: onDismiss, items: normalizedItems }));
}
},
dismiss: function (_) {
var _a;
(_a = _this.disposer) === null || _a === void 0 ? void 0 : _a.call(_this);
_this.disposer = null;
},
}) || this;
_this.uiUtilities = null;
_this.disposer = null;
return _this;
}
ContextMenuPlugin.prototype.setUIUtilities = function (uiUtilities) {
this.uiUtilities = uiUtilities;
};
return ContextMenuPlugin;
}(roosterjs_content_model_plugins_1.ContextMenuPluginBase));
/**
* Create a new instance of ContextMenu plugin with context menu implementation based on FluentUI.
*/
function createContextMenuPlugin() {
return new ContextMenuPlugin();
}
exports.createContextMenuPlugin = createContextMenuPlugin;
/***/ }),
/***/ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts":
/*!*************************************************************************************!*\
!*** ./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts ***!
\*************************************************************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createContextMenuProvider = void 0;
var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
var getLocalizedString_1 = __webpack_require__(/*! ../../common/utils/getLocalizedString */ "./packages/roosterjs-react/lib/common/utils/getLocalizedString.ts");
var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
/**
* A plugin of editor to provide context menu items
*/
var ContextMenuProviderImpl = /** @class */ (function () {
/**
* Create a new instance of ContextMenuProviderImpl class
* @param menuName Name of this group of menus
* @param items Menu items that will be show
* @param strings Localized strings of these menu items
* @param shouldAddMenuItems A general checker to decide if we should add this group of menu items
*/
function ContextMenuProviderImpl(menuName, items, strings, shouldAddMenuItems, context) {
this.menuName = menuName;
this.items = items;
this.strings = strings;
this.shouldAddMenuItems = shouldAddMenuItems;
this.context = context;
this.editor = null;
this.targetNode = null;
this.uiUtilities = null;
}
/**
* Get a friendly name of this plugin
*/
ContextMenuProviderImpl.prototype.getName = function () {
return this.menuName;
};
/**
* Initialize this plugin. This should only be called from Editor
* @param editor Editor instance
*/
ContextMenuProviderImpl.prototype.initialize = function (editor) {
this.editor = editor;
};
/**
* Dispose this plugin
*/
ContextMenuProviderImpl.prototype.dispose = function () {
this.editor = null;
};
ContextMenuProviderImpl.prototype.getContextMenuItems = function (node) {
var _this = this;
var _a;
var editor = this.editor;
this.targetNode = node;
return editor && ((_a = this.shouldAddMenuItems) === null || _a === void 0 ? void 0 : _a.call(this, editor, node))
? this.items
.filter(function (item) { return !item.shouldShow || item.shouldShow(editor, node, _this.context); })
.map(function (item) { return _this.convertMenuItems(item, node); })
: [];
};
ContextMenuProviderImpl.prototype.setUIUtilities = function (uiUtilities) {
this.uiUtilities = uiUtilities;
};
ContextMenuProviderImpl.prototype.convertMenuItems = function (item, node) {
var _this = this;
var _a;
var selectedId = this.editor && ((_a = item.getSelectedId) === null || _a === void 0 ? void 0 : _a.call(item, this.editor, node));
return {
key: item.key,
data: item,
text: (0, getLocalizedString_1.getLocalizedString)(this.strings, item.key, item.unlocalizedText),
ariaLabel: (0, getLocalizedString_1.getLocalizedString)(this.strings, item.key, item.unlocalizedText),
onClick: function () { return _this.onClick(item, item.key); },
iconProps: item.iconProps,
subMenuProps: item.subItems
? (0, tslib_1.__assign)({ onItemClick: function (_, menuItem) { return menuItem && _this.onClick(item, menuItem.data); }, items: (0, roosterjs_content_model_dom_1.getObjectKeys)(item.subItems).map(function (key) {
var _a;
return ({
key: key,
data: key,
text: (0, getLocalizedString_1.getLocalizedString)(_this.strings, key, (_a = item.subItems) === null || _a === void 0 ? void 0 : _a[key]),
className: item.itemClassName,
onRender: item.itemRender
? function (subItem) { var _a; return (_a = item.itemRender) === null || _a === void 0 ? void 0 : _a.call(item, subItem, function () { return _this.onClick(item, key); }); }
: undefined,
iconProps: key == selectedId
? {
iconName: 'Checkmark',
}
: undefined,
});
}) }, (item.commandBarSubMenuProperties || {})) : undefined,
};
};
ContextMenuProviderImpl.prototype.onClick = function (item, key) {
if (this.editor && this.targetNode && this.uiUtilities) {
item.onClick(key, this.editor, this.targetNode, this.strings, this.uiUtilities, this.context);
}
};
return ContextMenuProviderImpl;
}());
/**
* Create a new instance of ContextMenuProviderImpl class
* @param menuName Name of this group of menus
* @param items Menu items that will be show
* @param strings Localized strings of these menu items
* @param shouldAddMenuItems A general checker to decide if we should add this group of menu items
*/