@quillforms/block-editor
Version:
264 lines (250 loc) • 9.79 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _data = require("@wordpress/data");
var _hooks = require("@wordpress/hooks");
var _element = require("@wordpress/element");
var _adminComponents = require("@quillforms/admin-components");
var _rendererCore = require("@quillforms/renderer-core");
var _lodash = require("lodash");
var _emotion = require("emotion");
var _classnames = _interopRequireDefault(require("classnames"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Dependencies
*/
/**
* External Dependencies
*/
const BlockEdit = ({
id,
parentId
}) => {
const theme = (0, _rendererCore.useBlockTheme)(id);
const {
blockTypes,
block,
correctIncorrectQuiz
} = (0, _data.useSelect)(select => {
return {
blockTypes: select('quillForms/blocks').getBlockTypes(),
block: select('quillForms/block-editor').getBlockById(id),
correctIncorrectQuiz: select('quillForms/quiz-editor').getState()
};
});
const blockName = block?.name;
const blockType = blockTypes[blockName];
const {
attributes: {
label,
description,
layout
}
} = block;
const getDeserializedValue = val => {
return (0, _adminComponents.__unstableHtmlDeserialize)(val);
};
const [labelJsonVal, setLabelJsonVal] = (0, _element.useState)(getDeserializedValue(label));
const [descJsonVal, setDescJsonVal] = (0, _element.useState)(getDeserializedValue(description));
// Handling the error state
// Deserialize value on mount
(0, _element.useEffect)(() => {
setLabelJsonVal(getDeserializedValue(label));
if (!!description) setDescJsonVal(getDeserializedValue(description));
}, []);
// @ts-expect-error
const labelEditor = (0, _element.useMemo)(() => (0, _adminComponents.__unstableCreateEditor)(), [id]);
//@ts-expect-error
const descEditor = (0, _element.useMemo)(() => (0, _adminComponents.__unstableCreateEditor)(), [id]);
const {
currentBlock
} = (0, _data.useSelect)(select => {
return {
currentBlock: select('quillForms/block-editor').getCurrentBlock()
};
});
const {
setBlockAttributes
} = (0, _data.useDispatch)('quillForms/block-editor');
const {
prevFields
} = (0, _data.useSelect)(select => {
return {
prevFields: select('quillForms/block-editor').getPreviousEditableFieldsWithOrder(id)
};
});
// Serialize label is a debounced function that updates the store with serialized html value
const serializeLabel = (0, _element.useCallback)((0, _lodash.debounce)(value => {
setBlockAttributes(id, {
label: (0, _adminComponents.__unstableHtmlSerialize)(value)
}, parentId);
}, 200), []);
// Serialize description is a debounced function that updates the store with serialized html value
const serializeDesc = (0, _element.useCallback)((0, _lodash.debounce)(value => {
setBlockAttributes(id, {
description: (0, _adminComponents.__unstableHtmlSerialize)(value)
}, parentId);
}, 200), []);
let mergeTags = prevFields.map(field => {
return {
type: 'field',
label: field?.attributes?.label,
modifier: field.id,
icon: blockTypes[field.name]?.icon,
color: blockTypes[field.name]?.color,
order: field.order
};
});
mergeTags = mergeTags.concat((0, _hooks.applyFilters)('QuillForms.Builder.MergeTags', []));
if (correctIncorrectQuiz?.enabled) {
mergeTags = mergeTags.concat([{
type: 'quiz',
label: 'Correct Answers Count',
modifier: 'correct_answers_count',
icon: 'yes',
color: '#4caf50',
order: undefined
}, {
type: 'quiz',
label: 'Incorrect Answers Count',
modifier: 'incorrect_answers_count',
icon: 'no-alt',
color: '#f44336',
order: undefined
}, {
type: 'quiz',
label: 'Quiz Summary',
modifier: 'summary',
icon: 'editor-table',
color: '#4caf50',
order: undefined
}]);
}
// Title Change Handler
const labelChangeHandler = value => {
if (JSON.stringify(value) !== JSON.stringify(label)) {
setLabelJsonVal(value);
serializeLabel(value);
}
};
// // Description Change Handler
const descChangeHandler = value => {
if (JSON.stringify(value) !== JSON.stringify(description)) {
setDescJsonVal(value);
serializeDesc(value);
}
};
// Title Rich Text Editor
const LabelEditor = (0, _element.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-edit__title-editor",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.__experimentalEditor, {
editor: labelEditor,
placeholder: "Type question here...",
className: (0, _emotion.css)`
p {
color: ${theme.questionsColor} !important;
font-family: ${theme.questionsLabelFont} !important;
@media ( min-width: 768px ) {
font-size: ${theme.questionsLabelFontSize.lg} !important;
line-height: ${theme.questionsLabelLineHeight.lg} !important;
}
@media ( max-width: 767px ) {
font-size: ${theme.questionsLabelFontSize.sm} !important;
line-height: ${theme.questionsLabelLineHeight.sm} !important;
}
}
`,
mergeTags: mergeTags,
value: labelJsonVal,
onChange: value => labelChangeHandler(value),
onFocus: () => {
// if (parentId) {
// setCurrentBlock(parentId);
// setCurrentChildBlock(id);
// } else {
// setCurrentBlock(id);
// }
},
allowedFormats: ['bold', 'italic', 'link']
})
}), [JSON.stringify(labelJsonVal), JSON.stringify(mergeTags), id]);
const DescEditor = (0, _element.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-edit__title-editor",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.__experimentalEditor, {
editor: descEditor,
placeholder: "Add a description",
className: (0, _emotion.css)`
margin-top: 12px;
p {
opacity: 0.7;
color: ${theme.questionsColor} !important;
font-family: ${theme.questionsDescriptionFont} !important;
@media ( min-width: 768px ) {
font-size: ${theme.questionsDescriptionFontSize.lg} !important;
line-height: ${theme.questionsDescriptionLineHeight.lg} !important;
}
@media ( max-width: 767px ) {
font-size: ${theme.questionsDescriptionFontSize.sm} !important;
line-height: ${theme.questionsDescriptionLineHeight.sm} !important;
}
}
`,
mergeTags: mergeTags,
value: descJsonVal,
onChange: value => descChangeHandler(value),
onFocus: () => {
// if (parentId) {
// setCurrentBlock(parentId);
// setCurrentChildBlock(id);
// } else {
// setCurrentBlock(id);
// }
},
allowedFormats: ['bold', 'italic', 'link']
})
}), [JSON.stringify(descJsonVal), JSON.stringify(mergeTags), id]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-edit__wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
id: 'block-' + id,
className: (0, _classnames.default)(`blocktype-${blockName}-block`, `renderer-core-block-${layout}-layout`, {
'with-attachment': blockType?.supports.attachment
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "renderer-components-field-wrapper__content-wrapper renderer-components-block__content-wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "renderer-core-block-scroller",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FieldContent, {})
})
}), (layout !== 'stack' || layout === 'split-left' || layout === 'split-right') && blockType?.supports?.attachment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('renderer-core-block-attachment-wrapper', (0, _emotion.css)`
img {
object-position: ${
// @ts-expect-error
attributes?.attachmentFocalPoint?.x * 100}%
${
// @ts-expect-error
attributes?.attachmentFocalPoint?.y * 100}%;
}
`),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockAttachment, {})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-edit",
children: currentBlock && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-edit__content",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-edit__label",
children: [LabelEditor, DescEditor]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-edit__description"
})]
})
})]
});
};
var _default = exports.default = BlockEdit;
//# sourceMappingURL=index.js.map