react-simple-wysiwyg
Version:
Simple and lightweight React WYSIWYG editor
37 lines • 1.86 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { withEditorContext } from '../Editor';
export var BtnStyles = createDropdown('Styles', [
['Normal', 'formatBlock', 'DIV'],
['𝗛𝗲𝗮𝗱𝗲𝗿 𝟭', 'formatBlock', 'H1'],
['Header 2', 'formatBlock', 'H2'],
['𝙲𝚘𝚍𝚎', 'formatBlock', 'PRE'],
]);
function createDropdown(title, items) {
DropdownFactory.displayName = title;
return withEditorContext(DropdownFactory);
function DropdownFactory(props) {
var selection = props.selection, ddProps = tslib_1.__rest(props, ["selection"]);
return (React.createElement(Dropdown, tslib_1.__assign({}, ddProps, { onChange: onChange, title: title, items: items })));
function onChange(e) {
var selected = parseInt(e.target.value, 10);
var _a = items[selected], command = _a[1], commandArgument = _a[2];
e.preventDefault();
e.target.selectedIndex = 0;
if (typeof command === 'function') {
command(selection);
}
else {
document.execCommand(command, false, commandArgument);
}
}
}
}
export function Dropdown(props) {
var el = props.el, items = props.items, selected = props.selected, selection = props.selection, styles = props.styles, inputProps = tslib_1.__rest(props, ["el", "items", "selected", "selection", "styles"]);
var style = tslib_1.__assign({}, styles.dropdown, props.style);
return (React.createElement("select", tslib_1.__assign({}, inputProps, { value: selected, style: style }),
React.createElement("option", { hidden: true }, props.title),
items.map(function (item, index) { return (React.createElement("option", { key: index, value: index }, item[0])); })));
}
//# sourceMappingURL=dropdowns.js.map