@quillforms/block-editor
Version:
118 lines (111 loc) • 3.69 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _adminComponents = require("@quillforms/admin-components");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _emotion = require("emotion");
var _blockActions = _interopRequireDefault(require("../block-actions"));
var _blockControls = _interopRequireDefault(require("../block-controls"));
var _controlsIcon = _interopRequireDefault(require("./controls-icon"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Dependencies
*/
/**
* WordPress Dependencies
*/
/**
* External Dependencies
*/
/**
* Internal Dependencies
*/
// import { EmojiPicker } from '@quillforms/admin-components';
const BlockToolbar = ({
id,
index,
editor,
parentId,
parentIndex
}) => {
const [showBlockControls, setShowBlockControls] = (0, _element.useState)(false);
// // Insert Emoji
// const insertEmoji = ( emoji ) => {
// insertText( editor, emoji.native );
// };
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-toolbar",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
text: "Controls",
position: "bottom center",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
role: "presentation",
className: "block-editor-block-toolbar__controls-icon-wrapper",
onClick: () => {
setShowBlockControls(true);
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
className: "block-editor-block-toolbar__controls-icon",
icon: _controlsIcon.default
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
text: "Recall Information",
position: "bottom center",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-toolbar__merge-tag-icon-wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
role: "presentation",
className: "block-editor-block-toolbar__merge-tag-icon",
onClick: () => {
_adminComponents.__unstableTransforms.insertText(editor, '@');
_adminComponents.__unstableReactEditor.focus(editor);
},
children: "@"
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockActions.default, {
id: id,
index: index,
parentIndex: parentIndex,
parentId: parentId
}), showBlockControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
overlayClassName: 'qf-custom-modal',
className: (0, _emotion.css)`
border: none !important;
min-width: 350px !important;
min-height: calc( 100% - 54px ) !important;
margin-bottom: 0 !important;
.components-modal__content {
margin-top: 54px;
background: #eee !important;
}
.components-modal__header {
background: #a120f1;
.components-modal__header-heading {
color: #fff;
}
.components-button.has-icon svg {
fill: #fff;
}
}
`
// Because focus on editor is causing the click handler to be triggered
,
title: "Block Controls",
shouldCloseOnClickOutside: false,
onRequestClose: () => {
setShowBlockControls(false);
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default, {
parentId: parentId
})
})]
});
};
var _default = exports.default = BlockToolbar;
//# sourceMappingURL=index.js.map