@kids-reporter/draft-editor 0.1.0

package/lib/buttons/info-box.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoBoxButton = InfoBoxButton;
+exports.InfoBoxInput = InfoBoxInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _fields = require("@keystone-ui/fields");
+
+var _draftConverter = _interopRequireDefault(require("../draft-converter"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const TitleInput = (0, _styledComponents.default)(_fields.TextInput)`
+  margin-top: 30px;
+  margin-bottom: 10px;
+`;
+
+function InfoBoxInput(props) {
+  const {
+    isOpen,
+    onChange,
+    onCancel,
+    title,
+    rawContentStateForInfoBoxEditor,
+    renderBasicEditor,
+    decorators
+  } = props;
+  const rawContentState = rawContentStateForInfoBoxEditor || {
+    blocks: [],
+    entityMap: {}
+  };
+  const initialInputValue = {
+    title: title || '',
+    // create an `editorState` from raw content state object
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+
+  const clearInputValue = () => {
+    setInputValue(initialInputValue);
+  };
+
+  const basicEditorJsx = renderBasicEditor({
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue({
+        title: inputValue.title,
+        editorStateOfBasicEditor
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Info Box`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          clearInputValue();
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({
+            title: inputValue.title,
+            // convert `contentState` of the `editorState` into raw content state object
+            rawContentState: (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent())
+          });
+          clearInputValue();
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(TitleInput, {
+    onChange: e => setInputValue({
+      title: e.target.value,
+      editorStateOfBasicEditor: inputValue.editorStateOfBasicEditor
+    }),
+    type: "text",
+    placeholder: "Title",
+    value: inputValue.title
+  }), basicEditorJsx));
+}
+
+function InfoBoxButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange,
+    renderBasicEditor
+  } = props;
+
+  const onChange = ({
+    title,
+    rawContentState
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an InfoBox entity
+
+    const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
+      title,
+      rawContentState,
+      body: _draftConverter.default.convertToHtml(rawContentState)
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); //The third parameter here is a space string, not an empty string
+    //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
+    onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowInput(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
+    renderBasicEditor: renderBasicEditor,
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "InfoBox")));
+}

package/lib/buttons/link.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkButton = LinkButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _modals = require("@keystone-ui/modals");
+
+var _draftJs = require("draft-js");
+
+var _fields = require("@keystone-ui/fields");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const styles = {
+  urlInput: {
+    fontFamily: "'Georgia', serif",
+    marginRight: 10,
+    padding: 10
+  }
+};
+
+function LinkButton(props) {
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+  const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
+  const [urlValue, setUrlValue] = (0, _react.useState)('');
+
+  const promptForLink = e => {
+    e.preventDefault();
+    const selection = editorState.getSelection();
+
+    if (!selection.isCollapsed()) {
+      setToShowUrlInput(true);
+    }
+  };
+
+  const confirmLink = () => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
+      url: urlValue
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+
+    onChange(_draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
+    setToShowUrlInput(false);
+    setUrlValue('');
+  };
+
+  const onLinkInputKeyDown = e => {
+    if (e.which === 13) {
+      e.preventDefault();
+      confirmLink();
+    }
+  };
+
+  const removeLink = () => {
+    const selection = editorState.getSelection();
+
+    if (!selection.isCollapsed()) {
+      onChange(_draftJs.RichUtils.toggleLink(editorState, selection, null));
+    }
+
+    setToShowUrlInput(false);
+    setUrlValue('');
+  };
+
+  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: "Insert LINK",
+    isOpen: toShowUrlInput,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: removeLink
+      },
+      confirm: {
+        label: 'Confirm',
+        action: confirmLink
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setUrlValue(e.target.value),
+    style: styles.urlInput,
+    type: "text",
+    value: urlValue,
+    onKeyDown: onLinkInputKeyDown
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeLink : promptForLink
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-link"
+  })));
+}

package/lib/buttons/media.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaButton = MediaButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _modals = require("@keystone-ui/modals");
+
+var _draftJs = require("draft-js");
+
+var _fields = require("@keystone-ui/fields");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const styles = {
+  buttons: {
+    marginBottom: 10,
+    display: 'flex'
+  },
+  urlInputContainer: {
+    marginBottom: 10
+  },
+  urlInput: {
+    fontFamily: "'Georgia', serif",
+    marginRight: 10,
+    padding: 3
+  },
+  button: {
+    marginTop: '10px',
+    marginRight: '10px',
+    cursor: 'pointer'
+  }
+};
+
+function MediaButton(props) {
+  const {
+    editorState,
+    onChange,
+    customStyles
+  } = props;
+  const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
+  const [urlValue, setUrlValue] = (0, _react.useState)('');
+  const [urlType, setUrlType] = (0, _react.useState)('');
+
+  const promptForMedia = mediaType => {
+    setToShowUrlInput(true);
+    setUrlValue('');
+    setUrlType(mediaType);
+  };
+
+  const confirmMedia = () => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
+      src: urlValue
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowUrlInput(false);
+    setUrlType('');
+  };
+
+  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: `Insert ${urlType.toUpperCase()} LINK`,
+    isOpen: toShowUrlInput,
+    actions: {
+      confirm: {
+        label: 'Confirm',
+        action: confirmMedia
+      },
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          setToShowUrlInput(false);
+          setUrlValue('');
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setUrlValue(e.target.value),
+    style: styles.urlInput,
+    type: "text",
+    value: urlValue
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles.buttons
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => {
+      promptForMedia('imageLink');
+    },
+    style: customStyles || styles.button
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-arrow-up-right-from-square"
+  }), /*#__PURE__*/_react.default.createElement("span", null, " Image Link")), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => {
+      promptForMedia('audioLink');
+    },
+    style: customStyles || styles.button
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far fa-file-audio"
+  }), /*#__PURE__*/_react.default.createElement("span", null, " Audio Link")), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => {
+      promptForMedia('videoLink');
+    },
+    style: customStyles || styles.button
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far fa-file-video"
+  }), /*#__PURE__*/_react.default.createElement("span", null, " Video Link"))));
+}

package/lib/buttons/related-post.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedPostButton = RelatedPostButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _postSelector = require("./selector/post-selector");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function RelatedPostButton(props) {
+  const {
+    editorState,
+    onChange,
+    className,
+    PostSelector = _postSelector.PostSelector
+  } = props;
+  const [toShowPostSelector, setToShowPostSelector] = (0, _react.useState)(false);
+
+  const promptForPostSelector = () => {
+    setToShowPostSelector(true);
+  };
+
+  const onPostSelectorChange = selected => {
+    if (!selected.length) {
+      setToShowPostSelector(false);
+      return;
+    }
+
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('RELATEDPOST', 'IMMUTABLE', {
+      posts: selected.map(ele => ele.post)
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowPostSelector(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowPostSelector && /*#__PURE__*/_react.default.createElement(PostSelector, {
+    onChange: onPostSelectorChange,
+    enableMultiSelect: true,
+    minSelectCount: 1,
+    maxSelectCount: 3
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: promptForPostSelector
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M14.675 0H10.7917C9.45556 0 8.29445 1.11291 8.00278 2.6837C7.70833 1.11291 6.55 0 5.21389 0H1.33333C0.597222 0 0 0.718549 0 1.6042V9.81905C0 10.7047 0.597222 11.4233 1.33333 11.4233H3.825C6.66389 11.4233 7.51111 12.2387 7.91667 13.9298C7.93611 14.0234 8.06111 14.0234 8.08333 13.9298C8.49167 12.2387 9.33889 11.4233 12.175 11.4233H14.6667C15.4028 11.4233 16 10.7047 16 9.81905V1.60754C16 0.725233 15.4083 0.00668417 14.675 0ZM6.72222 8.8699C6.72222 8.9334 6.68056 8.98687 6.625 8.98687H2.17222C2.11944 8.98687 2.075 8.93674 2.075 8.8699V8.10456C2.075 8.04106 2.11667 7.98759 2.17222 7.98759H6.62778C6.68056 7.98759 6.725 8.03772 6.725 8.10456V8.8699H6.72222ZM6.72222 6.83457C6.72222 6.89807 6.68056 6.95154 6.625 6.95154H2.17222C2.11944 6.95154 2.075 6.90141 2.075 6.83457V6.06923C2.075 6.00573 2.11667 5.95226 2.17222 5.95226H6.62778C6.68056 5.95226 6.725 6.00239 6.725 6.06923V6.83457H6.72222ZM6.72222 4.79924C6.72222 4.86274 6.68056 4.91621 6.625 4.91621H2.17222C2.11944 4.91621 2.075 4.86608 2.075 4.79924V4.0339C2.075 3.9704 2.11667 3.91693 2.17222 3.91693H6.62778C6.68056 3.91693 6.725 3.96706 6.725 4.0339V4.79924H6.72222ZM13.925 8.86656C13.925 8.93005 13.8833 8.98353 13.8278 8.98353H9.375C9.32222 8.98353 9.27778 8.9334 9.27778 8.86656V8.10122C9.27778 8.03772 9.31944 7.98424 9.375 7.98424H13.8306C13.8833 7.98424 13.9278 8.03438 13.9278 8.10122V8.86656H13.925ZM13.925 6.83122C13.925 6.89472 13.8833 6.9482 13.8278 6.9482H9.375C9.32222 6.9482 9.27778 6.89807 9.27778 6.83122V6.06589C9.27778 6.00239 9.31944 5.94891 9.375 5.94891H13.8306C13.8833 5.94891 13.9278 5.99905 13.9278 6.06589V6.83122H13.925ZM13.925 4.79589C13.925 4.85939 13.8833 4.91287 13.8278 4.91287H9.375C9.32222 4.91287 9.27778 4.86274 9.27778 4.79589V4.0339C9.27778 3.9704 9.31944 3.91693 9.375 3.91693H13.8306C13.8833 3.91693 13.9278 3.96706 13.9278 4.0339V4.79589H13.925Z",
+    fill: "#6b7280"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Related Post")));
+}

package/lib/buttons/selector/align-selector.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignSelector = AlignSelector;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fields = require("@keystone-ui/fields");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Label = _styledComponents.default.label`
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+`;
+const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
+  ${({
+  menuHeight
+}) => {
+  return `margin-bottom: ${menuHeight}px;`;
+}}
+`;
+
+function AlignSelector(props) {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  const {
+    align,
+    options,
+    onChange,
+    onOpen
+  } = props;
+  (0, _react.useEffect)(() => {
+    const selectMenu = document.querySelector('.css-nabggt-menu');
+
+    if (selectMenu) {
+      const styles = window.getComputedStyle(selectMenu);
+      const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
+      setMenuHeight(selectMenu.offsetHeight + margin);
+    } else {
+      setMenuHeight(0);
+    }
+
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "alignment"
+  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
+    id: "alignment" // default align === undefined
+    ,
+    value: options.find(option => option.value === align),
+    options: options,
+    onChange: option => {
+      onChange(option.value);
+    },
+    onMenuOpen: () => setIsOpen(true),
+    onMenuClose: () => setIsOpen(false),
+    menuHeight: menuHeight
+  }));
+}