@manuscripts/body-editor 2.8.1 → 2.8.2

package/dist/types/components/toolbar/type-selector/styles.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import { CSSObjectWithLabel } from 'react-select';
+import { Option } from './TypeSelector';
+export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<Pick<import("react-select/dist/declarations/src/Select").Props<Option, false, import("react-select").GroupBase<Option>>, "id" | "form" | "name" | "value" | "theme" | "className" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "autoFocus" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+    placeholder?: import("react").ReactNode;
+    options?: import("react-select").OptionsOrGroups<Option, import("react-select").GroupBase<Option>> | undefined;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    backspaceRemovesValue?: boolean | undefined;
+    blurInputOnSelect?: boolean | undefined;
+    captureMenuScroll?: boolean | undefined;
+    classNames?: import("react-select").ClassNamesConfig<Option, false, import("react-select").GroupBase<Option>> | undefined;
+    closeMenuOnSelect?: boolean | undefined;
+    closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, false, import("react-select").GroupBase<Option>>> | undefined;
+    controlShouldRenderValue?: boolean | undefined;
+    escapeClearsValue?: boolean | undefined;
+    filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
+    formatGroupLabel?: ((group: import("react-select").GroupBase<Option>) => import("react").ReactNode) | undefined;
+    getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
+    getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
+    isDisabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
+    isMulti?: false | undefined;
+    isRtl?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    loadingMessage?: ((obj: {
+        inputValue: string;
+    }) => import("react").ReactNode) | undefined;
+    minMenuHeight?: number | undefined;
+    maxMenuHeight?: number | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: import("react-select").MenuPlacement | undefined;
+    menuPosition?: import("react-select").MenuPosition | undefined;
+    menuShouldBlockScroll?: boolean | undefined;
+    menuShouldScrollIntoView?: boolean | undefined;
+    noOptionsMessage?: ((obj: {
+        inputValue: string;
+    }) => import("react").ReactNode) | undefined;
+    openMenuOnFocus?: boolean | undefined;
+    openMenuOnClick?: boolean | undefined;
+    pageSize?: number | undefined;
+    screenReaderStatus?: ((obj: {
+        count: number;
+    }) => string) | undefined;
+    styles?: import("react-select").StylesConfig<Option, false, import("react-select").GroupBase<Option>> | undefined;
+    tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
+} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<Option, false, import("react-select").GroupBase<Option>>, "id" | "form" | "name" | "value" | "theme" | "className" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "autoFocus" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
+    placeholder?: import("react").ReactNode;
+    options?: import("react-select").OptionsOrGroups<Option, import("react-select").GroupBase<Option>> | undefined;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    backspaceRemovesValue?: boolean | undefined;
+    blurInputOnSelect?: boolean | undefined;
+    captureMenuScroll?: boolean | undefined;
+    classNames?: import("react-select").ClassNamesConfig<Option, false, import("react-select").GroupBase<Option>> | undefined;
+    closeMenuOnSelect?: boolean | undefined;
+    closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+    components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, false, import("react-select").GroupBase<Option>>> | undefined;
+    controlShouldRenderValue?: boolean | undefined;
+    escapeClearsValue?: boolean | undefined;
+    filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
+    formatGroupLabel?: ((group: import("react-select").GroupBase<Option>) => import("react").ReactNode) | undefined;
+    getOptionLabel?: import("react-select").GetOptionLabel<Option> | undefined;
+    getOptionValue?: import("react-select").GetOptionValue<Option> | undefined;
+    isDisabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    isOptionDisabled?: ((option: Option, selectValue: import("react-select").Options<Option>) => boolean) | undefined;
+    isMulti?: false | undefined;
+    isRtl?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    loadingMessage?: ((obj: {
+        inputValue: string;
+    }) => import("react").ReactNode) | undefined;
+    minMenuHeight?: number | undefined;
+    maxMenuHeight?: number | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: import("react-select").MenuPlacement | undefined;
+    menuPosition?: import("react-select").MenuPosition | undefined;
+    menuShouldBlockScroll?: boolean | undefined;
+    menuShouldScrollIntoView?: boolean | undefined;
+    noOptionsMessage?: ((obj: {
+        inputValue: string;
+    }) => import("react").ReactNode) | undefined;
+    openMenuOnFocus?: boolean | undefined;
+    openMenuOnClick?: boolean | undefined;
+    pageSize?: number | undefined;
+    screenReaderStatus?: ((obj: {
+        count: number;
+    }) => string) | undefined;
+    styles?: import("react-select").StylesConfig<Option, false, import("react-select").GroupBase<Option>> | undefined;
+    tabSelectsValue?: boolean | undefined;
+    unstyled?: boolean | undefined;
+} & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<Option, false, import("react-select").GroupBase<Option>>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
+export declare const customStyles: {
+    control: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
+    indicatorSeparator: () => CSSObjectWithLabel;
+    dropdownIndicator: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
+    menu: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
+    singleValue: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
+    valueContainer: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
+    container: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
+};

package/dist/types/index.d.ts

@@ -16,7 +16,7 @@
 export * from './commands';
 export { ManuscriptOutline } from './components/outline/ManuscriptOutline';
 export { OutlineItemIcon } from './components/outline/Outline';
-export { LevelSelector } from './components/toolbar/LevelSelector';
+export { TypeSelector } from './components/toolbar/type-selector/TypeSelector';
 export * from './components/toolbar/ListMenuItem';
 export * from './components/toolbar/InsertTableDialog';
 export * from './menus';

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.1";
+export declare const VERSION = "2.8.2";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.1.0",
+    "@manuscripts/style-guide": "2.1.1",
     "@manuscripts/track-changes-plugin": "1.10.0",
     "@manuscripts/transform": "3.0.45",
     "@popperjs/core": "^2.11.8",

package/dist/cjs/components/toolbar/LevelSelector.js

@@ -1,467 +0,0 @@
-"use strict";
-/*!
- * © 2024 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.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LevelSelector = void 0;
-const transform_1 = require("@manuscripts/transform");
-const prosemirror_model_1 = require("prosemirror-model");
-const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_utils_1 = require("prosemirror-utils");
-const react_1 = __importDefault(require("react"));
-const react_select_1 = __importDefault(require("react-select"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const hierarchy_1 = require("../../lib/hierarchy");
-const node_type_icons_1 = require("../../node-type-icons");
-const optionName = (nodeType, depth, listType) => {
-    switch (nodeType) {
-        case nodeType.schema.nodes.section:
-            return (depth > 0 ? 'sub'.repeat(depth - 1) : '') + 'section heading';
-        case nodeType.schema.nodes.list:
-            return listType === 'order' ? 'Ordered list' : 'Bulleted list';
-        default:
-            return transform_1.nodeNames.get(nodeType) || nodeType.name;
-    }
-};
-const titleCase = (text) => text.replace(/\b([a-z])/g, (match) => match.toUpperCase());
-const buildOption = (props) => (Object.assign(Object.assign({}, props), { icon: (0, node_type_icons_1.nodeTypeIcon)(props.nodeType, props.listType), label: titleCase(optionName(props.nodeType, props.depth, props.listType)), isDisabled: Boolean(props.isDisabled), isSelected: Boolean(props.isSelected), isFocused: Boolean(props.isFocused) }));
-const buildOptions = (state, dispatch, view) => {
-    var _a;
-    const { doc, selection: { $from, $to }, schema, tr, } = state;
-    const { nodes } = schema;
-    if (!$from.sameParent($to)) {
-        return [];
-    }
-    const parentElement = (0, hierarchy_1.findClosestParentElement)($from);
-    if (!parentElement) {
-        return [];
-    }
-    const depth = ((_a = (0, prosemirror_utils_1.findParentNodeOfType)(schema.nodes.box_element)(state.selection)) === null || _a === void 0 ? void 0 : _a.depth) || 1;
-    const moveParagraphToNewSubsection = () => {
-        const paragraph = $from.node($from.depth);
-        const beforeParagraph = $from.before($from.depth);
-        const afterParagraph = $from.after($from.depth);
-        const $afterParagraph = doc.resolve(afterParagraph);
-        const afterParagraphOffset = $afterParagraph.parentOffset;
-        const sectionDepth = $from.depth - 1;
-        const parentSection = $from.node(sectionDepth);
-        const endIndex = $from.indexAfter(sectionDepth);
-        const sectionEnd = $from.end(sectionDepth);
-        const textContent = paragraph.textContent;
-        const sectionTitle = textContent
-            ? nodes.section_title.create({}, schema.text(textContent))
-            : nodes.section_title.create();
-        let sectionContent = prosemirror_model_1.Fragment.from(sectionTitle);
-        if (endIndex < parentSection.childCount) {
-            sectionContent = sectionContent.append(parentSection.content.cut(afterParagraphOffset));
-        }
-        const newSection = nodes.section.create({
-            id: (0, transform_1.generateNodeID)(nodes.section),
-        }, sectionContent);
-        tr.replaceWith(beforeParagraph, sectionEnd, newSection);
-        const anchor = beforeParagraph + 2;
-        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + sectionTitle.content.size));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const moveSectionToSubsection = () => {
-        const sectionTitle = $from.node();
-        const sectionDepth = $from.depth - 1;
-        const section = $from.node(sectionDepth);
-        const beforeSection = $from.before(sectionDepth);
-        const afterSection = $from.after(sectionDepth);
-        const parentSectionDepth = $from.depth - 2;
-        const parentSection = $from.node(parentSectionDepth);
-        const startIndex = $from.index(parentSectionDepth);
-        const previousSection = parentSection.child(startIndex - 1);
-        const beforePreviousSection = beforeSection - previousSection.nodeSize;
-        tr.replaceWith(beforePreviousSection, afterSection, previousSection.content.append(prosemirror_model_1.Fragment.from(section)));
-        const anchor = beforeSection + 1;
-        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + sectionTitle.content.size));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const promoteSection = (target) => () => {
-        const sectionDepth = $from.depth - 1;
-        const section = $from.node(sectionDepth);
-        const beforeSection = $from.before(sectionDepth);
-        const sectionTitle = $from.node($from.depth);
-        const $beforeSection = doc.resolve(beforeSection);
-        const beforeSectionOffset = $beforeSection.parentOffset;
-        const afterSectionOffset = beforeSectionOffset + section.nodeSize;
-        const parentSectionDepth = $from.depth - 2;
-        const parentSection = $from.node(parentSectionDepth);
-        const startIndex = $from.index(parentSectionDepth);
-        const endIndex = $from.indexAfter(parentSectionDepth);
-        const beforeParentSection = $from.before(parentSectionDepth);
-        const afterParentSection = $from.after(parentSectionDepth);
-        const items = [];
-        let offset = 0;
-        if (startIndex > 0) {
-            const precedingSection = parentSection.cut(0, beforeSectionOffset);
-            items.push(precedingSection);
-            offset += precedingSection.nodeSize;
-        }
-        items.push(section);
-        if (endIndex < parentSection.childCount) {
-            const fragment = prosemirror_model_1.Fragment.from(nodes.section_title.create()).append(parentSection.content.cut(afterSectionOffset));
-            items.push(parentSection.copy(fragment));
-        }
-        tr.replaceWith(beforeParentSection, afterParentSection, items);
-        const anchor = beforeParentSection + offset + 2;
-        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + sectionTitle.content.size));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const promoteParagraphToSection = (target) => () => {
-        const paragraph = $from.node($from.depth);
-        const beforeParagraph = $from.before($from.depth);
-        const $beforeParagraph = doc.resolve(beforeParagraph);
-        const beforeParagraphOffset = $beforeParagraph.parentOffset;
-        const afterParagraphOffset = beforeParagraphOffset + paragraph.nodeSize;
-        const sectionDepth = $from.depth - depth;
-        const parentSection = $from.node(sectionDepth);
-        const startIndex = $from.index(sectionDepth);
-        const endIndex = $from.indexAfter(sectionDepth);
-        const beforeParentSection = $from.before(sectionDepth);
-        const afterParentSection = $from.after(sectionDepth);
-        const items = [];
-        let offset = 0;
-        if (startIndex > 0) {
-            const precedingSection = parentSection.cut(0, beforeParagraphOffset);
-            items.push(precedingSection);
-            offset += precedingSection.nodeSize;
-        }
-        const textContent = paragraph.textContent;
-        const sectionTitle = textContent
-            ? nodes.section_title.create({}, schema.text(textContent))
-            : nodes.section_title.create();
-        let sectionContent = prosemirror_model_1.Fragment.from(sectionTitle);
-        if (endIndex < parentSection.childCount) {
-            sectionContent = sectionContent.append(parentSection.content.cut(afterParagraphOffset));
-        }
-        else {
-            sectionContent = sectionContent.append(prosemirror_model_1.Fragment.from(paragraph.copy()));
-        }
-        items.push(parentSection.copy(sectionContent));
-        tr.replaceWith(beforeParentSection, afterParentSection, items);
-        const anchor = beforeParentSection + offset + 2;
-        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + sectionTitle.content.size));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const demoteSectionToParagraph = () => {
-        const sectionTitle = $from.node($from.depth);
-        const afterSectionTitle = $from.after($from.depth);
-        const $afterSectionTitle = doc.resolve(afterSectionTitle);
-        const afterSectionTitleOffset = $afterSectionTitle.parentOffset;
-        const sectionDepth = $from.depth - depth;
-        const section = $from.node(sectionDepth);
-        const beforeSection = $from.before(sectionDepth);
-        const afterSection = $from.after(sectionDepth);
-        const $beforeSection = doc.resolve(beforeSection);
-        const previousNode = $beforeSection.nodeBefore;
-        const paragraph = nodes.paragraph.create({
-            id: (0, transform_1.generateNodeID)(nodes.paragraph),
-        }, sectionTitle.content);
-        let anchor;
-        if (previousNode && (0, transform_1.isSectionNodeType)(previousNode.type)) {
-            tr.replaceWith(beforeSection - previousNode.nodeSize, afterSection, previousNode.copy(prosemirror_model_1.Fragment.from(previousNode.content)
-                .append(prosemirror_model_1.Fragment.from(paragraph))
-                .append(section.content.cut(afterSectionTitleOffset))));
-            anchor = beforeSection;
-        }
-        else {
-            tr.replaceWith(beforeSection, afterSection, prosemirror_model_1.Fragment.from(paragraph).append(section.content.cut(afterSectionTitleOffset)));
-            anchor = beforeSection + 1;
-        }
-        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + paragraph.content.size));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const convertParagraphToList = (nodeType, listType) => () => {
-        const paragraph = $from.node($from.depth);
-        const beforeParagraph = $from.before($from.depth);
-        const afterParagraph = $from.after($from.depth);
-        const list = nodeType.create({
-            id: (0, transform_1.generateNodeID)(nodeType),
-            listStyleType: listType,
-        }, nodes.list_item.create({}, schema.nodes.paragraph.create({}, paragraph.content)));
-        tr.replaceWith(beforeParagraph, afterParagraph, list);
-        const anchor = beforeParagraph + 3;
-        tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + paragraph.content.size));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const convertListType = (nodeType, list, listType) => () => {
-        tr.setNodeMarkup(list.before, nodeType, Object.assign(Object.assign({}, list.node.attrs), { listStyleType: listType }));
-        dispatch(tr.scrollIntoView());
-        view && view.focus();
-    };
-    const parentElementType = parentElement.node.type;
-    switch (parentElementType) {
-        case parentElementType.schema.nodes.section: {
-            const sectionDepth = Math.max(1, $from.depth - depth);
-            const parentSectionDepth = sectionDepth - 1;
-            const minimumDepth = Math.max(1, parentSectionDepth);
-            const beforeSection = $from.before(sectionDepth);
-            const $beforeSection = doc.resolve(beforeSection);
-            const sectionOffset = $beforeSection.parentOffset;
-            const typeOptions = [
-                buildOption({
-                    nodeType: nodes.paragraph,
-                    value: -4,
-                    depth: 1,
-                    action: demoteSectionToParagraph,
-                    isDisabled: sectionDepth <= 1 && sectionOffset <= 1,
-                }),
-                buildOption({
-                    nodeType: nodes.list,
-                    value: -3,
-                    depth: 1,
-                    isDisabled: true,
-                    listType: 'order',
-                }),
-                buildOption({
-                    nodeType: nodes.list,
-                    value: -2,
-                    depth: 1,
-                    isDisabled: true,
-                    listType: 'bullet',
-                }),
-            ];
-            const sectionOptions = [];
-            for (let depth = 2; depth < sectionDepth; depth++) {
-                const node = $from.node(depth);
-                if ((0, transform_1.isSectionNodeType)(node.type)) {
-                    const indentLevel = depth - 1;
-                    sectionOptions.push(buildOption({
-                        nodeType: nodes.section,
-                        value: depth,
-                        depth: indentLevel,
-                        action: promoteSection(depth),
-                        isDisabled: depth < minimumDepth,
-                    }));
-                }
-            }
-            sectionOptions.push(buildOption({
-                nodeType: nodes.section,
-                value: parentSectionDepth + 1,
-                depth: parentSectionDepth,
-                isDisabled: true,
-                isSelected: true,
-            }));
-            const parentSection = $from.node(parentSectionDepth);
-            const beforeSectionPos = $from.before(parentSectionDepth + 1);
-            const $beforeSectionPos = doc.resolve(beforeSectionPos);
-            const precedingSections = [];
-            parentSection.nodesBetween(0, $beforeSectionPos.parentOffset, (node) => {
-                if ((0, transform_1.isSectionNodeType)(node.type)) {
-                    precedingSections.push(node);
-                }
-                return false;
-            });
-            if (precedingSections.length > 0) {
-                sectionOptions.push(buildOption({
-                    nodeType: nodes.section,
-                    value: parentSectionDepth + 2,
-                    depth: parentSectionDepth + 2,
-                    action: moveSectionToSubsection,
-                }));
-            }
-            return [{ options: typeOptions }, { options: sectionOptions }];
-        }
-        case parentElementType.schema.nodes.paragraph: {
-            const sectionDepth = $from.depth - depth;
-            const minimumDepth = Math.max(1, sectionDepth);
-            let parentSectionDepth = 0;
-            const typeOptions = [
-                buildOption({
-                    nodeType: nodes.paragraph,
-                    value: -4,
-                    depth: 1,
-                    isDisabled: true,
-                    isSelected: true,
-                }),
-                buildOption({
-                    nodeType: nodes.list,
-                    value: -3,
-                    depth: 1,
-                    action: convertParagraphToList(nodes.list, 'order'),
-                    listType: 'order',
-                }),
-                buildOption({
-                    nodeType: nodes.list,
-                    value: -2,
-                    depth: 1,
-                    action: convertParagraphToList(nodes.list, 'bullet'),
-                    listType: 'bullet',
-                }),
-            ];
-            const sectionOptions = [];
-            for (let depth = 2; depth <= sectionDepth; depth++) {
-                const node = $from.node(depth);
-                if ((0, transform_1.isSectionNodeType)(node.type)) {
-                    const indentLevel = depth - 1;
-                    sectionOptions.push(buildOption({
-                        nodeType: nodes.section,
-                        value: depth,
-                        depth: indentLevel,
-                        action: promoteParagraphToSection(depth),
-                        isDisabled: depth < minimumDepth,
-                    }));
-                    parentSectionDepth = depth;
-                }
-            }
-            sectionOptions.push(buildOption({
-                nodeType: nodes.section,
-                value: parentSectionDepth + 1,
-                depth: parentSectionDepth + 1,
-                action: moveParagraphToNewSubsection,
-            }));
-            return [{ options: typeOptions }, { options: sectionOptions }];
-        }
-        case schema.nodes.list: {
-            const { style } = (0, transform_1.getListType)(parentElement.node.attrs.listStyleType);
-            return [
-                {
-                    options: [
-                        buildOption({
-                            nodeType: parentElementType,
-                            value: -4,
-                            depth: 1,
-                            isDisabled: true,
-                            isSelected: true,
-                        }),
-                    ],
-                },
-                {
-                    options: [
-                        buildOption({
-                            nodeType: nodes.list,
-                            value: -3,
-                            depth: 1,
-                            action: convertListType(nodes.list, parentElement, style),
-                            listType: style === 'none' || style === 'disc' ? 'bullet' : 'order',
-                        }),
-                    ],
-                },
-            ];
-        }
-        default: {
-            return [
-                buildOption({
-                    nodeType: parentElementType,
-                    value: -3,
-                    depth: 1,
-                    isDisabled: true,
-                    isSelected: true,
-                }),
-            ];
-        }
-    }
-};
-const OptionContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-`;
-const OptionIcon = styled_components_1.default.span `
-  display: inline-flex;
-  width: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${(props) => props.theme.grid.unit * 2}px;
-  flex-shrink: 0;
-`;
-const OptionLabel = styled_components_1.default.span `
-  flex: 1;
-`;
-const Group = styled_components_1.default.div `
-  &:not(:last-child) {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border.secondary};
-  }
-`;
-const StyledSelect = (0, styled_components_1.default)((react_select_1.default)) `
-  z-index: 3;
-
-  & > div:hover {
-    border-color: ${(props) => props.theme.colors.border.secondary};
-  }
-`;
-const findSelectedOption = (options) => {
-    for (const group of options) {
-        for (const option of group.options) {
-            if (option.isSelected) {
-                return option;
-            }
-        }
-    }
-};
-const LevelSelector = ({ state, dispatch, view }) => {
-    const { schema: { nodes }, } = state;
-    const options = buildOptions(state, dispatch, view);
-    return (react_1.default.createElement(StyledSelect, { isDisabled: options.length <= 1, isSearchable: false, options: options, value: options.length === 1
-            ? options[0]
-            : findSelectedOption(options), components: {
-            Group: (props) => (react_1.default.createElement(Group, Object.assign({}, props.innerProps, { ref: null }), props.children)),
-            GroupHeading: () => null,
-            Option: (props) => {
-                const data = props.data;
-                const style = props.getStyles('option', props);
-                style.display = 'flex';
-                style.fontSize = 16;
-                style.cursor = 'pointer';
-                style.paddingLeft = 8 + (data.depth - 1) * 16;
-                style.minWidth = 200;
-                if (data.nodeType === nodes.section) {
-                    style.fontSize = Math.max(14, 23 - 3 * (data.value - 1));
-                    style.fontWeight = 600;
-                }
-                if (props.isFocused) {
-                    style.backgroundColor = '#f5fbfc';
-                }
-                if (props.isSelected) {
-                    style.backgroundColor = '#f2fbfc';
-                    style.borderBottom = '1px solid #bce7f6';
-                    style.borderTop = '1px solid #bce7f6';
-                }
-                style.color = '#353535';
-                if (props.isDisabled && !props.isSelected) {
-                    style.opacity = 0.4;
-                }
-                return (react_1.default.createElement(OptionContainer, Object.assign({}, props.innerProps, { ref: null, style: style }),
-                    react_1.default.createElement(OptionIcon, null, (0, node_type_icons_1.nodeTypeIcon)(data.nodeType, data.listType)),
-                    react_1.default.createElement(OptionLabel, null, data.label)));
-            },
-        }, onChange: (value) => {
-            if (value && value.action) {
-                value.action();
-            }
-        }, styles: {
-            control: (styles) => (Object.assign(Object.assign({}, styles), { backgroundColor: '#fff', borderWidth: 1, borderStyle: 'solid', borderColor: '#e2e2e2', boxShadow: 'none', fontSize: '14px', minHeight: 0, padding: 0, width: 200, overflowX: 'hidden', textOverflow: 'ellipsis', cursor: 'pointer', height: 32 })),
-            indicatorSeparator: () => ({
-                display: 'none',
-            }),
-            dropdownIndicator: (styles) => (Object.assign(Object.assign({}, styles), { padding: '0 4px' })),
-            menu: (styles) => (Object.assign(Object.assign({}, styles), { width: 'auto' })),
-            singleValue: (styles) => (Object.assign(Object.assign({}, styles), { padding: 0 })),
-            valueContainer: (styles) => (Object.assign(Object.assign({}, styles), { padding: '1px 8px' })),
-            container: (styles) => (Object.assign(Object.assign({}, styles), { border: 'none' })),
-        } }));
-};
-exports.LevelSelector = LevelSelector;