@prisma-cms/editor
Version:
Editor for @prisma-cms
145 lines • 6.97 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinkDecorator = void 0;
const react_1 = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
// import { Link } from "react-router-dom";
const Grid_1 = __importDefault(require("material-ui/Grid"));
const IconButton_1 = __importDefault(require("material-ui/IconButton"));
const Done_1 = __importDefault(require("material-ui-icons/Done"));
const decorator_1 = __importDefault(require("../../../components/decorator"));
const TextField_1 = __importDefault(require("material-ui/TextField"));
const Typography_1 = __importDefault(require("material-ui/Typography"));
const urijs_1 = __importDefault(require("urijs"));
/**
* В версии 0.11-alpha порядок методов отличается
*/
// function findLinkEntities(contentState, contentBlock, callback) {
function findLinkEntities(contentBlock, callback, contentState) {
// return;
contentBlock.findEntityRanges((character) => {
const entityKey = character.getEntity();
return (entityKey !== null &&
contentState.getEntity(entityKey).getType() === 'LINK');
}, callback);
}
class LinkDecorator extends decorator_1.default {
constructor() {
// static contextTypes = {
// ...Decorator.contextType,
// uri: PropTypes.object.isRequired,
// }
super(...arguments);
this.onUrlChange = (event) => {
const { value } = event.target;
this.updateData({
url: value,
});
};
// componentWillReceiveProps(nextProps, nextState) {
// }
this.onClick = (event) => {
const { isReadOnly, onClick } = this.props;
const readOnly = isReadOnly();
if (!readOnly) {
event.preventDefault();
this.showEditor();
return;
}
return (onClick && onClick(event)) || false;
};
}
render() {
const { children, entityKey, contentState, isReadOnly,
// onClick,
// Component: Link,
Component: Element, } = this.props;
const { showEditor } = this.state;
const readOnly = isReadOnly();
const { url } = contentState.getEntity(entityKey).getData();
// return <span>
// rgreg rg gerg erg herg rger g <input />
// </span>
let helperText = 'Укажите адрес ссылки';
// let Element = "a";
let to = url;
let uri;
let target;
const { location } = global;
if (url) {
uri = new urijs_1.default(url);
/**
* Если это текущий домен, то делаем ссылку локальной
*/
if (location && uri.origin() === location.origin) {
uri.origin('');
}
if (!uri.scheme()) {
// Element = Link;
to = uri.toString();
if (!to.startsWith('/')) {
to = `/${to}`;
}
helperText = (react_1.default.createElement(Typography_1.default, { color: "secondary", component: "span" }, "\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u043B\u043E\u043A\u0430\u043B\u044C\u043D\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443"));
}
else {
target = '_blank';
helperText = (react_1.default.createElement(Typography_1.default, { color: "primary", component: "span" }, "\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0432\u043D\u0435\u0448\u043D\u0438\u0439 \u0438\u0441\u0442\u043E\u0447\u043D\u0438\u043A"));
}
}
// console.log("Element url", url);
// console.log("Element to", to);
return (react_1.default.createElement(react_1.Fragment, null,
react_1.default.createElement(Element, { href: url || '', to: to, target: target,
// onMouseEnter={this.toggleShowPopOver}
// onMouseLeave={this.toggleShowPopOver}
// onMouseDown={this.showEditor}
onClick: this.onClick }, children),
!readOnly && (showEditor || !url) ? (react_1.default.createElement("div", { style: {
marginBottom: 20,
} },
react_1.default.createElement(Grid_1.default, { container: true, alignItems: "center" },
react_1.default.createElement(Grid_1.default, { item: true, xs: true },
react_1.default.createElement(TextField_1.default, { onMouseDown: this.showEditor, value: url || '', onChange: this.onUrlChange, onFocus: this.startEdit, onBlur: this.endEdit, fullWidth: true, label: "\u0410\u0434\u0440\u0435\u0441 \u0441\u0441\u044B\u043B\u043A\u0438", placeholder: "https://...", helperText: helperText, error: !url })),
react_1.default.createElement(Grid_1.default, { item: true },
react_1.default.createElement(IconButton_1.default, { onClick: this.hideEditor },
react_1.default.createElement(Done_1.default, { style: {
color: 'green',
} })))))) : null));
}
}
exports.LinkDecorator = LinkDecorator;
LinkDecorator.propTypes = Object.assign(Object.assign({}, decorator_1.default.propTypes), {
/**
* Link component to render
*/
Component: prop_types_1.default.func.isRequired });
const EditorLinkDecorator = (config) => (Object.assign({ strategy: findLinkEntities, component: LinkDecorator }, config));
exports.default = EditorLinkDecorator;
//# sourceMappingURL=index.js.map