@manuscripts/body-editor 1.6.11 → 1.6.12

package/dist/es/components/application-menu/ApplicationMenu.js

@@ -1,56 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import Modal from 'react-modal';
-import styled from 'styled-components';
-import { MenuItemContainer, MenuList, Text } from './MenuItemContainer';
-Modal.setAppElement('#root');
-const ApplicationMenuContainer = styled.div `
-  display: flex;
-  font-size: 14px;
-`;
-const MenuHeading = styled.div `
-  padding: 4px 8px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-bottom: none;
-`;
-const MenuContainer = styled.div `
-  position: relative;
-
-  & ${MenuHeading} {
-    background-color: #fff;
-    color: ${(props) => (props.isEnabled ? '#353535' : '#e2e2e2')};
-
-    &:hover {
-      background-color: ${(props) => (props.isEnabled ? '#f2fbfc' : '#fff')};
-    }
-  }
-`;
-export const ApplicationMenus = ({ menuState, wrapperRef, handleItemClick, }) => {
-    return (React.createElement(ApplicationMenuContainer, { ref: wrapperRef }, menuState.map((menu, index) => {
-        return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.enable },
-            React.createElement(MenuHeading, { onMouseDown: (e) => {
-                    e.preventDefault();
-                    handleItemClick([index]);
-                }, isOpen: menu.isOpen },
-                React.createElement(Text, null, menu.label)),
-            menu.enable && menu.isOpen && (React.createElement(MenuList, null, menu.submenu &&
-                menu.submenu.map((submenu, menuIndex) => {
-                    return (React.createElement(MenuItemContainer, { key: `menu-${menuIndex}`, item: submenu, depth: 1, handleMenuItemClick: () => handleItemClick([index, menuIndex]), handleSubmenuItemClick: (submenuIndex) => handleItemClick([index, menuIndex, submenuIndex]) }));
-                })))));
-    })));
-};

package/dist/es/components/application-menu/MenuItemContainer.js

@@ -1,120 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import TriangleCollapsed from '@manuscripts/assets/react/TriangleCollapsed';
-import React from 'react';
-import styled from 'styled-components';
-import { Shortcut } from './Shortcut';
-export const Text = styled.div `
-  flex: 1 0 auto;
-`;
-export const MenuList = styled.div `
-  background: #fff;
-  border: 1px solid #e2e2e2;
-  border-radius: 4px;
-  box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
-  color: #353535;
-  min-width: 150px;
-  max-height: 70vh;
-  overflow-y: auto;
-  padding: 4px 0;
-  white-space: nowrap;
-  width: auto;
-  z-index: 10;
-
-  position: absolute;
-
-  &[data-placement='bottom-start'] {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  closeMenu={closeMenu}
-
-  &[data-placement='right-start'] {
-    top: 8px;
-  }
-`;
-const SubmenuContainer = styled.div `
-  position: relative;
-`;
-const SubmenuList = styled(MenuList) `
-  top: 0;
-  left: 100%;
-`;
-const Separator = styled.div `
-  height: 0;
-  border-bottom: 1px solid #e2e2e2;
-  margin: 4px 0;
-`;
-const Active = styled.div `
-  width: 16px;
-  display: inline-flex;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-`;
-const Arrow = styled(TriangleCollapsed) `
-  margin-left: 8px;
-`;
-const Container = styled.div `
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  padding: 8px 16px 8px 4px;
-  position: relative;
-  ${(props) => props.isOpen && 'background: #f2fbfc;'}
-
-  &:hover {
-    background: #f2fbfc;
-  }
-
-  &.disabled {
-    cursor: default;
-    opacity: 0.4;
-  }
-`;
-const classNameFromState = (item) => (item.enable ? '' : 'disabled');
-const activeContent = (item) => (item.active ? '✓' : '');
-const isSeparator = (item) => item.role === 'separator';
-export const MenuItemContainer = ({ item, handleMenuItemClick, handleSubmenuItemClick, depth, }) => {
-    if (isSeparator(item)) {
-        return React.createElement(Separator, null);
-    }
-    if (!item.submenu) {
-        return (React.createElement(Container, { isOpen: item.isOpen, className: classNameFromState(item), onMouseDown: (e) => {
-                e.preventDefault();
-                handleMenuItemClick();
-            } },
-            React.createElement(Active, null, activeContent(item)),
-            React.createElement(Text, null, item.label),
-            item.accelerator && React.createElement(Shortcut, { accelerator: item.accelerator })));
-    }
-    return (React.createElement(SubmenuContainer, null,
-        React.createElement(Container, { onMouseDown: (e) => {
-                e.preventDefault();
-                handleMenuItemClick();
-            }, isOpen: item.isOpen, className: classNameFromState(item) },
-            React.createElement(Active, null, activeContent(item)),
-            React.createElement(Text, null, item.label),
-            item.submenu && React.createElement(Arrow, null),
-            item.accelerator && React.createElement(Shortcut, { accelerator: item.accelerator })),
-        item.isOpen && (React.createElement(SubmenuList, null, item.submenu &&
-            item.submenu.map((menu, index) => (React.createElement(MenuItemContainer, { key: `menu-${index}`, item: menu, handleMenuItemClick: () => {
-                    if (!handleSubmenuItemClick) {
-                        return;
-                    }
-                    handleSubmenuItemClick(index);
-                }, depth: depth + 1 })))))));
-};

package/dist/es/components/application-menu/Shortcut.js

@@ -1,56 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import styled from 'styled-components';
-import { isMac } from '../../lib/platform';
-export const ShortcutContainer = styled.div `
-  display: inline-flex;
-  color: #6e6e6e;
-  margin-left: 16px;
-  flex-shrink: 0;
-  justify-content: flex-end;
-`;
-const modifiers = isMac
-    ? {
-        Option: '⌥',
-        CommandOrControl: '⌘',
-        Shift: '⇧',
-    }
-    : {
-        Option: 'Alt',
-        CommandOrControl: 'Ctrl',
-        Shift: 'Shift',
-    };
-const system = isMac ? 'mac' : 'pc';
-const separator = isMac ? '' : '-';
-const Character = styled.span `
-  display: inline-block;
-  min-width: 1ch;
-`;
-const acceleratorParts = (accelerator) => {
-    const parts = [];
-    for (const part of accelerator[system].split('+')) {
-        if (part in modifiers) {
-            parts.push(modifiers[part]);
-            parts.push(separator);
-        }
-        else {
-            parts.push(React.createElement(Character, { key: part }, part));
-        }
-    }
-    return parts;
-};
-export const Shortcut = ({ accelerator, }) => React.createElement(ShortcutContainer, null, acceleratorParts(accelerator));

package/dist/es/components/application-menu/index.js

@@ -1,17 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { ApplicationMenus } from './ApplicationMenu';
-export { useApplicationMenus } from './useApplicationMenus';

package/dist/es/components/application-menu/menuState.js

@@ -1,44 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export const getMenuState = (spec, pointer, depth = 0) => {
-    const pointerPart = pointer[depth];
-    return spec.map((itemSpec, index) => {
-        return {
-            id: itemSpec.id || '',
-            role: itemSpec.role || '',
-            accelerator: itemSpec.accelerator || null,
-            label: itemSpec.label || '',
-            active: itemSpec.active || false,
-            enable: typeof itemSpec.enable === 'boolean' ? itemSpec.enable : true,
-            run: itemSpec.run || null,
-            submenu: itemSpec.submenu
-                ? getMenuState(itemSpec.submenu, pointer, depth + 1)
-                : null,
-            isOpen: index === pointerPart,
-        };
-    });
-};
-export const getMenuItem = (menuState, indices) => {
-    const [head, ...tail] = indices.filter((item) => item !== -1);
-    const item = menuState[head];
-    if (!tail.length) {
-        return item;
-    }
-    else if (item.submenu) {
-        return getMenuItem(item.submenu, tail);
-    }
-    return null;
-};

package/dist/es/components/application-menu/types.js

@@ -1,16 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export {};

package/dist/es/components/application-menu/useApplicationMenus.js

@@ -1,148 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { getMenuItem, getMenuState } from './menuState';
-const initialPointer = [-1, -1, -1];
-const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
-    if (i === depth) {
-        return index;
-    }
-    if (i > depth) {
-        return -1;
-    }
-    return pointerPart;
-});
-export const prevValidItem = (menu, current) => {
-    const prevIndex = current - 1;
-    if (prevIndex <= -1) {
-        return -1;
-    }
-    const prevItem = menu[prevIndex];
-    if (prevItem.role !== 'separator' && prevItem.enable) {
-        return prevIndex;
-    }
-    return prevValidItem(menu, prevIndex);
-};
-export const nextValidItem = (menu, current) => {
-    const nextIndex = current + 1;
-    if (nextIndex >= menu.length) {
-        return 0;
-    }
-    const nextItem = menu[nextIndex];
-    if (nextItem.role !== 'separator' && nextItem.enable) {
-        return nextIndex;
-    }
-    return nextValidItem(menu, nextIndex);
-};
-export const useApplicationMenus = (menuSpec) => {
-    const [pointer, setPointer] = useState(initialPointer);
-    const menuState = getMenuState(menuSpec, pointer);
-    const toggleMenus = useCallback(() => {
-        setPointer(pointer[0] === -1 ? [0, -1, -1] : [-1, -1, -1]);
-    }, [pointer]);
-    const handleItemClick = useCallback((indices) => {
-        const item = getMenuItem(menuState, indices);
-        if (!item || !item.enable) {
-            return;
-        }
-        if (item.run) {
-            item.run();
-            setPointer([-1, -1, -1]);
-        }
-        else if (item.submenu) {
-            const depth = indices.length - 1;
-            const index = indices[depth];
-            setPointer(transformPointer(depth, index));
-        }
-    }, [menuState]);
-    const wrapperRef = useRef(null);
-    const handleKeydown = useCallback((e) => {
-        const { key } = e;
-        const [menuI, itemI, submenuItemI] = pointer;
-        if (key === 'Escape') {
-            toggleMenus();
-            return false;
-        }
-        else if (menuI === -1) {
-            return true;
-        }
-        e.preventDefault();
-        let menuItem;
-        let items;
-        switch (key) {
-            case 'ArrowLeft':
-                if (submenuItemI !== -1) {
-                    setPointer([menuI, itemI, -1]);
-                    return false;
-                }
-                setPointer(transformPointer(0, prevValidItem(menuState, menuI)));
-                return false;
-            case 'ArrowRight':
-                if (itemI !== -1 && submenuItemI === -1) {
-                    menuItem = getMenuItem(menuState, pointer);
-                    if (!menuItem || !menuItem.submenu) {
-                        return false;
-                    }
-                    setPointer(transformPointer(2, nextValidItem(menuItem.submenu, -1)));
-                    return false;
-                }
-                setPointer(transformPointer(0, nextValidItem(menuState, menuI)));
-                return false;
-            case 'ArrowUp':
-                if (submenuItemI !== -1) {
-                    menuItem = getMenuItem(menuState, [menuI, itemI]);
-                    items = menuItem && menuItem.submenu;
-                    if (!items) {
-                        return false;
-                    }
-                    setPointer(transformPointer(2, prevValidItem(items, submenuItemI)));
-                    return false;
-                }
-                items = menuState[menuI].submenu;
-                if (!items) {
-                    return false;
-                }
-                setPointer(transformPointer(1, prevValidItem(items, itemI)));
-                return false;
-            case 'ArrowDown':
-                if (submenuItemI !== -1) {
-                    menuItem = getMenuItem(menuState, [menuI, itemI]);
-                    items = menuItem && menuItem.submenu;
-                    if (!items) {
-                        return false;
-                    }
-                    setPointer(transformPointer(2, nextValidItem(items, submenuItemI)));
-                    return false;
-                }
-                items = menuState[menuI].submenu;
-                if (!items) {
-                    return false;
-                }
-                setPointer(transformPointer(1, nextValidItem(items, itemI)));
-                return false;
-            case 'Enter':
-            case 'Space':
-                handleItemClick(pointer);
-                return false;
-        }
-        return false;
-    }, [menuState, handleItemClick, pointer, toggleMenus]);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (wrapperRef.current &&
-                !wrapperRef.current.contains(event.target)) {
-                setPointer([-1, -1, -1]);
-            }
-        };
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    return {
-        handleKeydown,
-        toggleMenus,
-        menuState,
-        handleItemClick,
-        isMenuOpen: pointer[0] > -1,
-        wrapperRef,
-    };
-};

package/dist/es/components/dialog/TableCellBorderOptions.js

@@ -1,36 +0,0 @@
-import { ColorField } from '@manuscripts/style-guide';
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { setTableCellBorderStyles } from './commands';
-import { Modal } from './shared';
-const LabelStyled = styled.label `
-  font-weight: bold;
-  display: block;
-`;
-const initialState = () => ({
-    direction: 'all',
-    width: 1,
-    color: '#000',
-});
-const TableCellBorderOptions = ({ editorState, handleCloseDialog, dispatch, colors, handleAddColor, }) => {
-    const setColors = colors.filter((color) => color.value);
-    const colorExists = useCallback((hex) => setColors.find((color) => color.value === hex), [setColors]);
-    return (React.createElement(Modal, { handleCloseDialog: handleCloseDialog, selector: initialState, command: setTableCellBorderStyles, editorState: editorState, dispatch: dispatch, header: "Configure the Cell Borders" }, ({ state, handleChange }) => (React.createElement("form", null,
-        React.createElement(LabelStyled, { htmlFor: "direction" }, "Apply to"),
-        React.createElement("select", { id: "direction", value: state.direction, onChange: (e) => handleChange('direction', e.target.value) },
-            React.createElement("option", { value: "all" }, "All"),
-            React.createElement("option", { value: "top" }, "Top"),
-            React.createElement("option", { value: "bottom" }, "Bottom"),
-            React.createElement("option", { value: "left" }, "Left"),
-            React.createElement("option", { value: "right" }, "Right")),
-        React.createElement(LabelStyled, { htmlFor: "width" }, "Width (px)"),
-        React.createElement("input", { id: "width", type: "number", min: "0", max: "5", value: state.width, onChange: (e) => handleChange('width', e.target.value) }),
-        React.createElement(LabelStyled, { htmlFor: "backgroundColor" }, "Border Color"),
-        React.createElement(ColorField, { options: setColors, value: state.color, handleChange: (hex) => {
-                handleChange('color', hex || '');
-                if (hex && !colorExists(hex)) {
-                    handleAddColor(hex);
-                }
-            } })))));
-};
-export default TableCellBorderOptions;

package/dist/es/components/dialog/TableCellOptions.js

@@ -1,22 +0,0 @@
-import { ColorField } from '@manuscripts/style-guide';
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { getSelectedTableCellStyles, setTableCellStyles } from './commands';
-import { Modal } from './shared';
-const LabelStyled = styled.label `
-  font-weight: bold;
-  display: block;
-`;
-const TableCellOptions = ({ editorState, handleCloseDialog, dispatch, colors, handleAddColor, }) => {
-    const setColors = colors.filter((color) => color.value);
-    const colorExists = useCallback((hex) => setColors.find((color) => color.value === hex), [setColors]);
-    return (React.createElement(Modal, { handleCloseDialog: handleCloseDialog, selector: getSelectedTableCellStyles, command: setTableCellStyles, editorState: editorState, dispatch: dispatch, header: "Configure the Selected Table Cells" }, ({ state, handleChange }) => (React.createElement("form", null,
-        React.createElement(LabelStyled, { htmlFor: "backgroundColor" }, "Background Color"),
-        React.createElement(ColorField, { options: setColors, value: state.backgroundColor || '', handleChange: (hex) => {
-                handleChange('backgroundColor', hex || '');
-                if (hex && !colorExists(hex)) {
-                    handleAddColor(hex);
-                }
-            } })))));
-};
-export default TableCellOptions;

package/dist/es/components/dialog/TableOptions.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { getSelectedTableAttr, setTableAttrs } from './commands';
-import { Modal } from './shared';
-const FormStyled = styled.form `
-  display: flex;
-  flex-direction: row;
-`;
-const Field = styled.div `
-  flex: 1 0 auto;
-  width: 50%;
-`;
-const LabelStyled = styled.label `
-  font-weight: bold;
-  display: block;
-`;
-const TableOptions = ({ editorState, handleCloseDialog, dispatch, }) => {
-    return (React.createElement(Modal, { handleCloseDialog: handleCloseDialog, editorState: editorState, dispatch: dispatch, selector: getSelectedTableAttr, command: setTableAttrs, header: "Configure the Selected Table" }, ({ state, handleChange }) => (React.createElement(FormStyled, null,
-        React.createElement(Field, null,
-            React.createElement(LabelStyled, { htmlFor: "headerRows" }, "Num Header Rows"),
-            React.createElement("input", { id: "headerRows", type: "number", min: "0", max: "5", value: state.headerRows, onChange: (e) => handleChange('headerRows', e.target.value) })),
-        React.createElement(Field, null,
-            React.createElement(LabelStyled, { htmlFor: "footerRows" }, "Num Footer Rows"),
-            React.createElement("input", { id: "footerRows", type: "number", min: "0", max: "5", value: state.footerRows, onChange: (e) => handleChange('footerRows', e.target.value) }))))));
-};
-export default TableOptions;