burdy
Version:
Open Source Headless Platform
155 lines (154 loc) • 6.71 kB
JavaScript
;
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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const draft_js_1 = require("draft-js");
const dynamic_richtext_context_1 = require("../../dynamic-richtext.context");
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const useStyles = (0, react_1.makeStyles)((theme) => ({
container: {
display: 'grid',
justifyContent: 'center',
alignItems: 'center',
'&.left': {
justifyContent: 'flex-start'
},
'&.right': {
justifyContent: 'flex-end'
}
},
captionField: {
'& .ms-TextField-fieldGroup': {
border: 'none !important'
},
'& input': {
fontSize: theme.fonts.small.fontSize,
textAlign: 'center'
},
'& input::placeholder': {
fontSize: theme.fonts.small.fontSize,
textAlign: 'center',
fontStyle: 'italic'
}
},
image: {
maxWidth: '100%',
maxHeight: 300,
border: `1px solid ${theme.palette.neutralLight}`,
cursor: 'context-menu'
}
}));
const DraftImageBlock = (props) => {
const classes = useStyles();
const theme = (0, react_1.useTheme)();
const contentState = props.contentState;
const contentBlock = props.block;
const selectionState = props.selection;
const entityKey = contentBlock.getEntityAt(0);
const { npath, caption, align } = contentState.getEntity(entityKey).getData();
const { setEditorProps, editorProps, setEditorState, editorState, forceUpdate } = (0, dynamic_richtext_context_1.useRichtext)();
const [captionValue, setCaptionValue] = (0, react_2.useState)(caption !== null && caption !== void 0 ? caption : '');
const [alignment, setAlignment] = (0, react_2.useState)(align !== null && align !== void 0 ? align : 'center');
const [contextMenuTarget, setContextMenuTarget] = (0, react_2.useState)(null);
const setReadOnly = (readOnly) => {
setEditorProps(Object.assign(Object.assign({}, editorProps), { readOnly }));
};
(0, react_2.useEffect)(() => {
contentState.mergeEntityData(entityKey, { caption: captionValue });
forceUpdate();
}, [captionValue]);
(0, react_2.useEffect)(() => {
contentState.mergeEntityData(entityKey, { align: alignment });
forceUpdate();
}, [alignment]);
const contextMenuItems = (0, react_2.useMemo)(() => [
{
key: 'align-left',
text: 'Align Left',
disabled: alignment === 'left',
iconProps: {
iconName: 'AlignLeft'
},
onClick: () => {
setAlignment('left');
}
},
{
key: 'align-center',
text: 'Align Center',
disabled: alignment === 'center',
iconProps: {
iconName: 'AlignCenter'
},
onClick: () => {
setAlignment('center');
}
},
{
key: 'align-right',
text: 'Align Right',
disabled: alignment === 'right',
iconProps: {
iconName: 'AlignRight'
},
onClick: () => {
setAlignment('right');
}
},
{ key: 'divider', itemType: react_1.ContextualMenuItemType.Divider },
{
key: 'remove',
text: 'Remove',
iconProps: {
iconName: 'Delete',
style: { color: theme.palette.red }
},
onClick: () => {
const blockKey = contentBlock.getKey();
const previousSelection = editorState.getSelection();
const selection = draft_js_1.SelectionState.createEmpty(blockKey).merge({ focusOffset: contentBlock.getLength() });
const newContentState = draft_js_1.Modifier.removeRange(contentState, selection, 'backward');
const blockMap = newContentState.getBlockMap().delete(contentBlock.getKey());
const withoutAtomic = newContentState.merge({
blockMap,
selectionAfter: selection,
});
const newEditorState = draft_js_1.EditorState.push(editorState, withoutAtomic, 'remove-range');
setEditorState(draft_js_1.EditorState.forceSelection(newEditorState, previousSelection));
}
}
], [theme, alignment, contentState, selectionState, setEditorState, editorState]);
return (react_2.default.createElement("div", { className: (0, classnames_1.default)(classes.container, {
left: alignment === 'left',
right: alignment === 'right'
}) },
react_2.default.createElement("img", { src: `/api/assets/single?npath=${npath}`, className: classes.image, alt: "", onContextMenu: (e) => {
setContextMenuTarget(e.nativeEvent);
e.preventDefault();
} }),
react_2.default.createElement(react_1.TextField, { className: classes.captionField, onFocus: () => setReadOnly(true), onBlur: () => setReadOnly(false), value: captionValue, onChange: e => setCaptionValue(e.currentTarget.value), placeholder: "Caption", name: "caption", autoComplete: "off" }),
react_2.default.createElement(react_1.ContextualMenu, { target: contextMenuTarget, items: contextMenuItems, hidden: contextMenuTarget === null, onDismiss: () => setContextMenuTarget(null), onItemClick: () => setContextMenuTarget(null) })));
};
exports.default = DraftImageBlock;