burdy
Version:
Open Source Headless Platform
140 lines (139 loc) • 7.04 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createLinkDecorator = void 0;
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const draft_js_1 = require("draft-js");
const react_hook_form_1 = require("react-hook-form");
const dynamic_richtext_context_1 = require("../../dynamic-richtext.context");
const rhf_components_1 = require("../../../components/rhf-components");
const useStyles = (0, react_2.makeStyles)((theme) => ({
link: {
color: `${theme.palette.themePrimary} !important`,
display: 'inline-block',
fontStyle: 'italic',
cursor: 'context-menu'
},
callout: {
padding: '20px 24px',
minWidth: 320
},
calloutTitle: {
marginBottom: 12
},
calloutStack: {
marginTop: 20,
},
removeLinkText: {
color: theme.palette.red
}
}));
const findLinkEntities = (contentBlock, callback, contentState) => {
contentBlock.findEntityRanges((character) => {
const entityKey = character.getEntity();
return (entityKey !== null &&
contentState.getEntity(entityKey).getType() === 'LINK');
}, callback);
};
const createLinkDecorator = () => new draft_js_1.CompositeDecorator([
{
strategy: findLinkEntities,
component: DraftLinkInline
}
]);
exports.createLinkDecorator = createLinkDecorator;
const DraftLinkInline = (_a) => {
var { children, entityKey, blockKey } = _a, props = __rest(_a, ["children", "entityKey", "blockKey"]);
const classes = useStyles();
const contentState = props.contentState;
const entity = contentState.getEntity(entityKey);
const block = contentState.getBlockForKey(blockKey);
const { url, target } = entity.getData();
const link = (0, react_1.useRef)(null);
const { forceUpdate, editorProps, setEditorProps, setEditorState, editorState } = (0, dynamic_richtext_context_1.useRichtext)();
const [calloutOpen, setCalloutOpen] = (0, react_1.useState)(false);
const { control, handleSubmit, reset } = (0, react_hook_form_1.useForm)({
defaultValues: {
target: target !== null && target !== void 0 ? target : '_self',
url: url !== null && url !== void 0 ? url : ''
}
});
const removeLink = () => {
const selection = draft_js_1.SelectionState.createEmpty(blockKey).merge({ focusOffset: block.getText().length });
setEditorState(draft_js_1.RichUtils.toggleLink(editorState, selection, null));
setReadOnly(false);
};
const submit = handleSubmit(data => {
contentState.mergeEntityData(entityKey, Object.assign({}, data));
forceUpdate();
setReadOnly(false);
setCalloutOpen(false);
});
const setReadOnly = (readOnly) => {
setEditorProps(Object.assign(Object.assign({}, editorProps), { readOnly }));
};
const openCallout = (e) => {
reset({ url, target });
setCalloutOpen(true);
setReadOnly(true);
e === null || e === void 0 ? void 0 : e.preventDefault();
};
const closeCallout = () => {
setCalloutOpen(false);
setReadOnly(false);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { onContextMenu: openCallout, className: classes.link, ref: link }, children),
calloutOpen && (react_1.default.createElement(react_2.FocusTrapCallout, { className: classes.callout, hidden: !calloutOpen, onDismiss: closeCallout, target: link, setInitialFocus: true, contentEditable: false },
react_1.default.createElement("form", { onSubmit: submit },
react_1.default.createElement(react_2.Text, { className: classes.calloutTitle, block: true, variant: "large" }, "Edit link"),
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 8 } },
react_1.default.createElement(rhf_components_1.ControlledTextField, { name: "url", label: "URL", control: control, onRenderLabel: (labelProps, defaultRender) => (react_1.default.createElement(react_2.Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "space-between" },
react_1.default.createElement(react_2.StackItem, null, defaultRender(labelProps)),
react_1.default.createElement(react_2.StackItem, { className: classes.removeLinkText, onClick: removeLink },
react_1.default.createElement(react_2.ActionButton, null, "Remove Link")))) }),
react_1.default.createElement(rhf_components_1.ControlledCombobox, { control: control, name: "target", label: "Target", options: [{
key: '_self',
text: 'Self',
}, {
key: '_blank',
text: 'Blank',
}] })),
react_1.default.createElement(react_2.FocusZone, null,
react_1.default.createElement(react_2.Stack, { tokens: { childrenGap: 12 }, className: classes.calloutStack, horizontalAlign: "end", horizontal: true },
react_1.default.createElement(react_2.StackItem, null,
react_1.default.createElement(react_2.PrimaryButton, { type: "submit" }, "Save")),
react_1.default.createElement(react_2.StackItem, null,
react_1.default.createElement(react_2.DefaultButton, { onClick: closeCallout }, "Cancel")))))))));
};
exports.default = DraftLinkInline;