@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.30

package/lib/website/mirrormedia/draft-editor.js

@@ -4,39 +4,79 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.buttonNames = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
 var _draftJs = require("draft-js");
+
 var _blockRendererFn = require("./block-renderer-fn");
+
 var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
+
 var _annotation = require("../../draft-js/buttons/annotation");
+
 var _embeddedCode = require("../../draft-js/buttons/embedded-code");
+
 var _enlarge = require("../../draft-js/buttons/enlarge");
+
 var _image = require("../../draft-js/buttons/image");
+
 var _infoBox = require("../../draft-js/buttons/info-box");
+
 var _link = require("../../draft-js/buttons/link");
+
 var _slideshow = require("../../draft-js/buttons/slideshow");
+
 var _table = require("../../draft-js/buttons/table");
+
 var _divider = require("../../draft-js/buttons/divider");
+
 var _colorBox = require("../../draft-js/buttons/color-box");
+
 var _backgroundImage = require("../../draft-js/buttons/background-image");
+
 var _backgroundVideo = require("../../draft-js/buttons/background-video");
+
 var _relatedPost = require("../../draft-js/buttons/related-post");
+
 var _sideIndex = require("../../draft-js/buttons/side-index");
+
 var _textAlign = require("../../draft-js/buttons/text-align");
+
 var _fontColor = require("../../draft-js/buttons/font-color");
+
 var _backgroundColor = require("../../draft-js/buttons/background-color");
+
 var _video = require("../../draft-js/buttons/video");
+
 var _audio = require("../../draft-js/buttons/audio");
+
+var _youtube = require("../../draft-js/buttons/youtube");
+
 var _const = require("../../draft-js/const");
+
 var _imageSelector = require("./selector/image-selector");
+
 var _videoSelector = require("./selector/video-selector");
+
 var _postSelector = require("./selector/post-selector");
+
 var _audioSelector = require("./selector/audio-selector");
+
+var _sharedStyle = require("./shared-style");
+
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const buttonNames = {
   // inline styles
   bold: 'bold',
@@ -69,10 +109,11 @@ const buttonNames = {
   relatedPost: 'related-post',
   sideIndex: 'side-index',
   video: 'video',
-  audio: 'audio'
+  audio: 'audio',
+  youtube: 'youtube'
 };
 exports.buttonNames = buttonNames;
-const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex, buttonNames.video, buttonNames.audio];
+const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex, buttonNames.video, buttonNames.audio, buttonNames.youtube];
 const buttonStyle = (0, _styledComponents.css)`
   border-radius: 6px;
   text-align: center;
@@ -88,15 +129,18 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return 'not-allowed';
   }
+
   return 'pointer';
 }};
   color: ${props => {
   if (props.readOnly) {
     return '#c1c7d0';
   }
+
   if (props.isActive) {
     return '#3b82f6';
   }
+
   return '#6b7280';
 }};
   border: solid 1px
@@ -104,18 +148,22 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
+
   if (props.isActive) {
     return '#3b82f6';
   }
+
   return '#6b7280';
 }};
   box-shadow: ${props => {
   if (props.readOnly) {
     return 'unset';
   }
+
   if (props.isActive) {
     return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
   }
+
   return 'unset';
 }};
   transition: box-shadow 100ms linear;
@@ -124,6 +172,7 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.isDisabled) {
     return 'none';
   }
+
   return 'inline-flex';
 }};
 `;
@@ -133,9 +182,11 @@ const longFormButtonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
+
   if (props.isActive) {
     return '#ED8B00';
   }
+
   return '#6b7280';
 }};
   border: solid 1px
@@ -143,18 +194,22 @@ const longFormButtonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
+
   if (props.isActive) {
     return '#ED8B00';
   }
+
   return '#FECC85';
 }};
   box-shadow: ${props => {
   if (props.readOnly) {
     return 'unset';
   }
+
   if (props.isActive) {
     return 'rgba(237, 139, 0, 0.5) 0px 1px 4px';
   }
+
   return 'unset';
 }};
 `;
@@ -173,6 +228,7 @@ const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.Annota
 const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
   ${buttonStyle}
 `;
+
 function createButtonWithoutProps(referenceComponent, isLongForm = false, additionalCSS = ``) {
   return isLongForm ? (0, _styledComponents.default)(referenceComponent)`
         ${longFormButtonStyle}
@@ -182,6 +238,7 @@ function createButtonWithoutProps(referenceComponent, isLongForm = false, additi
         ${additionalCSS}
       `;
 }
+
 const CustomEnlargeButton = createButtonWithoutProps(_enlarge.EnlargeButton, false, `color: #999`);
 const CustomImageButton = createButtonWithoutProps(_image.ImageButton);
 const CustomSlideshowButton = createButtonWithoutProps(_slideshow.SlideshowButton);
@@ -198,6 +255,7 @@ const CustomAlignCenterButton = createButtonWithoutProps(_textAlign.AlignCenterB
 const CustomAlignLeftButton = createButtonWithoutProps(_textAlign.AlignLeftButton, true);
 const CustomVideoButton = createButtonWithoutProps(_video.VideoButton);
 const CustomAudioButton = createButtonWithoutProps(_audio.AudioButton);
+const CustomYoutubeButton = createButtonWithoutProps(_youtube.YoutubeButton);
 const DraftEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-root)*/
   background: #fff;
@@ -215,21 +273,34 @@ const DraftEditorWrapper = _styledComponents.default.div`
   background: rgb(255, 255, 255);
   border-radius: 6px;
   padding: 0 1rem 1rem;
+  font-size: 18px;
+  line-height: 2;
+  letter-spacing: 0.5px;
+
+  .public-DraftStyleDefault-block {
+    ${_sharedStyle.defaultMarginBottom}
+  }
 
   /* Draft built-in buttons' style */
   .public-DraftStyleDefault-header-two {
+    font-size: 36px;
+    line-height: 1.5;
   }
   .public-DraftStyleDefault-header-three {
+    font-size: 30px;
+    line-height: 1.5;
   }
   .public-DraftStyleDefault-header-four {
   }
   .public-DraftStyleDefault-blockquote {
   }
   .public-DraftStyleDefault-ul {
+    ${_sharedStyle.defaultMarginBottom}
   }
   .public-DraftStyleDefault-unorderedListItem {
   }
   .public-DraftStyleDefault-ol {
+    ${_sharedStyle.defaultMarginBottom}
   }
   .public-DraftStyleDefault-orderedListItem {
   }
@@ -339,14 +410,15 @@ const EnlargeButtonWrapper = _styledComponents.default.div`
   right: 0;
   margin: 0;
 `;
+
 class RichTextEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.state = {
       isEnlarged: false,
       readOnly: false
-    };
-    // Custom overrides for "code" style.
+    }; // Custom overrides for "code" style.
+
     this.customStyleMap = {
       CODE: {
         backgroundColor: 'rgba(0, 0, 0, 0.05)',
@@ -356,15 +428,18 @@ class RichTextEditor extends _react.default.Component {
       }
     };
   }
+
   onChange = editorState => {
     this.props.onChange(editorState);
   };
   handleKeyCommand = (command, editorState) => {
     const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
+
     if (newState) {
       this.onChange(newState);
       return true;
     }
+
     return false;
   };
   handleReturn = event => {
@@ -376,17 +451,24 @@ class RichTextEditor extends _react.default.Component {
       onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
       return 'handled';
     }
+
     return 'not-handled';
   };
   mapKeyToEditorCommand = e => {
-    if (e.keyCode === 9 /* TAB */) {
-      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4 /* maxDepth */);
+    if (e.keyCode === 9
+    /* TAB */
+    ) {
+      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4
+      /* maxDepth */
+      );
 
       if (newEditorState !== this.props.editorState) {
         this.onChange(newEditorState);
       }
+
       return;
     }
+
     return (0, _draftJs.getDefaultKeyBinding)(e);
   };
   toggleBlockType = blockType => {
@@ -403,18 +485,23 @@ class RichTextEditor extends _react.default.Component {
     const endOffset = selection.getEndOffset();
     let entityInstance;
     let entityKey;
+
     if (!selection.isCollapsed()) {
       entityKey = startBlock.getEntityAt(startOffset);
     } else {
       entityKey = startBlock.getEntityAt(endOffset);
     }
+
     if (entityKey !== null) {
       entityInstance = contentState.getEntity(entityKey);
     }
+
     let entityType = '';
+
     if (entityInstance) {
       entityType = entityInstance.getType();
     }
+
     return entityType;
   };
   getCustomStyle = style => {
@@ -422,9 +509,11 @@ class RichTextEditor extends _react.default.Component {
       if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
         styles['color'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
       }
+
       if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
         styles['backgroundColor'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
       }
+
       return styles;
     }, {});
   };
@@ -436,8 +525,10 @@ class RichTextEditor extends _react.default.Component {
   customStyleFn = style => {
     return this.getCustomStyle(style);
   };
+
   blockStyleFn(block) {
     var _entity$getData;
+
     const {
       editorState
     } = this.props;
@@ -445,14 +536,17 @@ class RichTextEditor extends _react.default.Component {
     const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
     let result = '';
     const blockData = block.getData();
+
     if (blockData) {
       const textAlign = blockData === null || blockData === void 0 ? void 0 : blockData.get('textAlign');
+
       if (textAlign === 'center') {
         result += 'alignCenter ';
       } else if (textAlign === 'left') {
         result += 'alignLeft ';
       }
     }
+
     switch (block.getType()) {
       case 'header-two':
       case 'header-three':
@@ -460,19 +554,25 @@ class RichTextEditor extends _react.default.Component {
       case 'blockquote':
         result += 'public-DraftStyleDefault-' + block.getType();
         break;
+
       case 'atomic':
         if ((_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
           // support all atomic block to set alignment
           result += ' ' + entity.getData().alignment;
         }
+
         break;
+
       default:
         break;
     }
+
     return result;
   }
+
   blockRendererFn = block => {
     const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
+
     if (atomicBlockObj) {
       const onEditStart = () => {
         this.setState({
@@ -488,6 +588,7 @@ class RichTextEditor extends _react.default.Component {
           readOnly: true
         });
       };
+
       const onEditFinish = ({
         entityKey,
         entityData
@@ -498,20 +599,20 @@ class RichTextEditor extends _react.default.Component {
           this.onChange(_draftJs.EditorState.set(this.props.editorState, {
             currentContent: newContentState
           }));
-        }
-
-        // Custom block interaction is finished.
+        } // Custom block interaction is finished.
         // Therefore, we set readOnly={false} to
         // make editor editable.
+
+
         this.setState({
           readOnly: false
         });
-      };
-
-      // `onEditStart` and `onEditFinish` will be passed
+      }; // `onEditStart` and `onEditFinish` will be passed
       // into custom block component.
       // We can get them via `props.blockProps.onEditStart`
       // and `props.blockProps.onEditFinish` in the custom block components.
+
+
       atomicBlockObj['props'] = {
         onEditStart,
         onEditFinish,
@@ -523,8 +624,10 @@ class RichTextEditor extends _react.default.Component {
         }
       };
     }
+
     return atomicBlockObj;
   };
+
   render() {
     const {
       disabledButtons = []
@@ -532,21 +635,27 @@ class RichTextEditor extends _react.default.Component {
     let {
       editorState
     } = this.props;
+
     if (!(editorState instanceof _draftJs.EditorState)) {
       editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
     }
+
     const {
       isEnlarged,
       readOnly
     } = this.state;
     const entityType = this.getEntityType(editorState);
     const customStyle = this.getCustomStyle(editorState.getCurrentInlineStyle());
+
     const renderBasicEditor = propsOfBasicEditor => {
       return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
         disabledButtons: disabledButtonsOnBasicEditor
       }));
     };
-    return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
+
+    return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+      theme: _theme.default
+    }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
       isEnlarged: isEnlarged
     }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
       href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
@@ -613,6 +722,11 @@ class RichTextEditor extends _react.default.Component {
       onChange: this.onChange,
       readOnly: this.state.readOnly,
       VideoSelector: _videoSelector.VideoSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomYoutubeButton, {
+      isDisabled: disabledButtons.includes(buttonNames.youtube),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
       isDisabled: disabledButtons.includes(buttonNames.audio),
       editorState: editorState,
@@ -697,6 +811,7 @@ class RichTextEditor extends _react.default.Component {
     })))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
       onClick: () => {
         var _this$refs$editor;
+
         // eslint-disable-next-line prettier/prettier
         (_this$refs$editor = this.refs.editor) === null || _this$refs$editor === void 0 ? void 0 : _this$refs$editor.focus();
       }
@@ -714,14 +829,17 @@ class RichTextEditor extends _react.default.Component {
       ref: "editor",
       spellCheck: true,
       readOnly: readOnly
-    }))));
+    })))));
   }
+
 }
+
 class StyleButton extends _react.default.Component {
   onToggle = e => {
     e.preventDefault();
     this.props.onToggle(this.props.style);
   };
+
   render() {
     return /*#__PURE__*/_react.default.createElement(CustomButton, {
       isDisabled: this.props.isDisabled,
@@ -732,7 +850,9 @@ class StyleButton extends _react.default.Component {
       className: this.props.icon
     }), /*#__PURE__*/_react.default.createElement("span", null, !this.props.icon ? this.props.label : ''));
   }
+
 }
+
 const blockStyles = [{
   label: 'H2',
   style: 'header-two',
@@ -762,6 +882,7 @@ const blockStyles = [{
   style: 'code-block',
   icon: 'fas fa-code'
 }];
+
 const BlockStyleControls = props => {
   const {
     editorState,
@@ -780,6 +901,7 @@ const BlockStyleControls = props => {
     readOnly: props.readOnly
   })));
 };
+
 const inlineStyles = [{
   label: 'Bold',
   style: 'BOLD',
@@ -797,6 +919,7 @@ const inlineStyles = [{
   style: 'CODE',
   icon: 'fas fa-terminal'
 }];
+
 const InlineStyleControls = props => {
   const currentStyle = props.editorState.getCurrentInlineStyle();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
@@ -810,6 +933,7 @@ const InlineStyleControls = props => {
     readOnly: props.readOnly
   })));
 };
+
 const DraftEditor = {
   RichTextEditor,
   decorators: _entityDecorator.default

package/lib/website/mirrormedia/entity-decorator.js

@@ -4,13 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _draftJs = require("draft-js");
+
 var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//Because `annotationDecorator` and `linkDecorator` is generated by different `contentLayout`,
+//so it is needed to generate decorators by using function `decoratorsGenerator`.
 const {
   annotationDecorator,
   linkDecorator
 } = _mirrormedia.default.entityDecorators;
-const decorators = new _draftJs.CompositeDecorator([annotationDecorator, linkDecorator]);
+
+const decoratorsGenerator = (contentLayout = 'normal') => {
+  return new _draftJs.CompositeDecorator([annotationDecorator(contentLayout), linkDecorator(contentLayout)]);
+};
+
+const decorators = decoratorsGenerator('normal');
 var _default = decorators;
 exports.default = _default;

package/lib/website/mirrormedia/index.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _draftEditor = _interopRequireDefault(require("./draft-editor"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const MirrorMedia = {
   DraftEditor: _draftEditor.default
 };

package/lib/website/mirrormedia/selector/align-selector.js

@@ -4,12 +4,19 @@ 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;
@@ -22,6 +29,7 @@ const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
   return `margin-bottom: ${menuHeight}px;`;
 }}
 `;
+
 function AlignSelector(props) {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
@@ -33,6 +41,7 @@ function AlignSelector(props) {
   } = 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']);
@@ -40,6 +49,7 @@ function AlignSelector(props) {
     } else {
       setMenuHeight(0);
     }
+
     if (isOpen && onOpen) {
       onOpen();
     }
@@ -47,8 +57,7 @@ function AlignSelector(props) {
   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
+    id: "alignment" // default align === undefined
     ,
     value: options.find(option => option.value === align),
     options: options,