@quillforms/block-editor/build-module/components/block-toolbar/index.js

Quill forms block editor

/**
 * QuillForms Dependencies
 */
import { __unstableTransforms as Transforms, __unstableReactEditor as ReactEditor } from '@quillforms/admin-components';

/**
 * WordPress Dependencies
 */

import { Tooltip, Icon, Modal } from '@wordpress/components';
import { useState } from '@wordpress/element';

/**
 * External Dependencies
 */
import { css } from 'emotion';
/**
 * Internal Dependencies
 */
import BlockActions from '../block-actions';
import BlockControls from '../block-controls';
import ControlsIcon from './controls-icon';

// import { EmojiPicker } from '@quillforms/admin-components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BlockToolbar = ({
  id,
  index,
  editor,
  parentId,
  parentIndex
}) => {
  const [showBlockControls, setShowBlockControls] = useState(false);
  // // Insert Emoji
  // const insertEmoji = ( emoji ) => {
  // 	insertText( editor, emoji.native );
  // };
  return /*#__PURE__*/_jsxs("div", {
    className: "block-editor-block-toolbar",
    children: [/*#__PURE__*/_jsx(Tooltip, {
      text: "Controls",
      position: "bottom center",
      children: /*#__PURE__*/_jsx("div", {
        role: "presentation",
        className: "block-editor-block-toolbar__controls-icon-wrapper",
        onClick: () => {
          setShowBlockControls(true);
        },
        children: /*#__PURE__*/_jsx(Icon, {
          className: "block-editor-block-toolbar__controls-icon",
          icon: ControlsIcon
        })
      })
    }), /*#__PURE__*/_jsx(Tooltip, {
      text: "Recall Information",
      position: "bottom center",
      children: /*#__PURE__*/_jsx("div", {
        className: "block-editor-block-toolbar__merge-tag-icon-wrapper",
        children: /*#__PURE__*/_jsx("div", {
          role: "presentation",
          className: "block-editor-block-toolbar__merge-tag-icon",
          onClick: () => {
            Transforms.insertText(editor, '@');
            ReactEditor.focus(editor);
          },
          children: "@"
        })
      })
    }), /*#__PURE__*/_jsx(BlockActions, {
      id: id,
      index: index,
      parentIndex: parentIndex,
      parentId: parentId
    }), showBlockControls && /*#__PURE__*/_jsx(Modal, {
      overlayClassName: 'qf-custom-modal',
      className: 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__*/_jsx(BlockControls, {
        parentId: parentId
      })
    })]
  });
};
export default BlockToolbar;
//# sourceMappingURL=index.js.map