@manuscripts/body-editor 2.8.1 → 2.8.2

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

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.promoteParagraphToSection = exports.demoteSectionToParagraph = exports.findSelectedOption = exports.titleCase = exports.optionName = void 0;
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_state_1 = require("prosemirror-state");
+const optionName = (nodeType) => {
+    switch (nodeType) {
+        case nodeType.schema.nodes.section:
+            return 'Heading';
+        default:
+            return transform_1.nodeNames.get(nodeType) || nodeType.name;
+    }
+};
+exports.optionName = optionName;
+const titleCase = (text) => text.replace(/\b([a-z])/g, (match) => match.toUpperCase());
+exports.titleCase = titleCase;
+const findSelectedOption = (options) => {
+    for (const option of options) {
+        if (option.isSelected) {
+            return option;
+        }
+    }
+};
+exports.findSelectedOption = findSelectedOption;
+const getDeepestSubsection = (subsection) => {
+    while (subsection.lastChild && (0, transform_1.isSectionNodeType)(subsection.lastChild.type)) {
+        subsection = subsection.lastChild;
+    }
+    return subsection;
+};
+const replaceDeepestSubsection = (parentNode, newSubsection) => {
+    if (!parentNode.lastChild || !(0, transform_1.isSectionNodeType)(parentNode.lastChild.type)) {
+        return newSubsection;
+    }
+    const lastSubsectionIndex = parentNode.content.childCount - 1;
+    const lastSubsection = parentNode.content.child(lastSubsectionIndex);
+    const updatedSubsection = replaceDeepestSubsection(lastSubsection, newSubsection);
+    return parentNode.copy(parentNode.content.replaceChild(lastSubsectionIndex, updatedSubsection));
+};
+const demoteSectionToParagraph = (state, dispatch, view) => {
+    const { doc, selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    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 - 1;
+    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;
+    let fragment;
+    const sectionContent = section.content.cut(afterSectionTitleOffset);
+    if (previousNode && (0, transform_1.isSectionNodeType)(previousNode.type)) {
+        const hasSubsections = previousNode.lastChild && (0, transform_1.isSectionNodeType)(previousNode.lastChild.type);
+        if (hasSubsections) {
+            const deepestSubsection = getDeepestSubsection(previousNode.lastChild);
+            const updatedDeepestSubsection = deepestSubsection.copy(deepestSubsection.content
+                .append(prosemirror_model_1.Fragment.from(paragraph))
+                .append(sectionContent));
+            const updatedPreviousNode = replaceDeepestSubsection(previousNode, updatedDeepestSubsection);
+            fragment = updatedPreviousNode.content;
+        }
+        else {
+            fragment = prosemirror_model_1.Fragment.from(previousNode.content)
+                .append(prosemirror_model_1.Fragment.from(paragraph))
+                .append(sectionContent);
+        }
+        tr.replaceWith(beforeSection - previousNode.nodeSize, afterSection, previousNode.copy(fragment));
+        anchor = beforeSection;
+    }
+    else {
+        tr.replaceWith(beforeSection, afterSection, prosemirror_model_1.Fragment.from(paragraph).append(sectionContent));
+        anchor = beforeSection + 1;
+    }
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor, anchor + paragraph.content.size));
+    dispatch((0, track_changes_plugin_1.skipTracking)(tr));
+    view && view.focus();
+};
+exports.demoteSectionToParagraph = demoteSectionToParagraph;
+const promoteParagraphToSection = (state, dispatch, view) => {
+    const { doc, selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    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 - 1;
+    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()));
+    }
+    if (parentSection.type.name === 'body') {
+        const newSection = nodes.section.create({}, sectionContent);
+        items[0] = nodes.body.create({}, items[0]
+            ? items[0].content.append(prosemirror_model_1.Fragment.from(newSection))
+            : prosemirror_model_1.Fragment.from(newSection));
+    }
+    else {
+        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((0, track_changes_plugin_1.skipTracking)(tr));
+    view && view.focus();
+};
+exports.promoteParagraphToSection = promoteParagraphToSection;

package/dist/cjs/components/toolbar/type-selector/OptionComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionComponent = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const helpers_1 = require("../helpers");
+const OptionContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 8px;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+const OptionLabel = styled_components_1.default.span ``;
+const TickIconWrapper = styled_components_1.default.div ``;
+const OptionComponent = ({ innerProps, data, }) => {
+    return (react_1.default.createElement(OptionContainer, Object.assign({}, innerProps, { ref: null }),
+        react_1.default.createElement(OptionLabel, null, (0, helpers_1.titleCase)((0, helpers_1.optionName)(data.nodeType))),
+        data.isSelected && (react_1.default.createElement(TickIconWrapper, null,
+            react_1.default.createElement(style_guide_1.TickIcon, null)))));
+};
+exports.OptionComponent = OptionComponent;

package/dist/cjs/components/toolbar/type-selector/TypeSelector.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeSelector = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const react_1 = __importDefault(require("react"));
+const hierarchy_1 = require("../../../lib/hierarchy");
+const helpers_1 = require("../helpers");
+const OptionComponent_1 = require("./OptionComponent");
+const styles_1 = require("./styles");
+const buildOptions = (state) => {
+    const { doc, selection: { $from, $to }, schema, } = state;
+    const { nodes } = schema;
+    if (!$from.sameParent($to)) {
+        return [];
+    }
+    const parentElement = (0, hierarchy_1.findClosestParentElement)($from);
+    if (!parentElement) {
+        return [];
+    }
+    const parentElementType = parentElement.node.type;
+    const options = [];
+    switch (parentElementType) {
+        case parentElementType.schema.nodes.section: {
+            const sectionDepth = Math.max(1, $from.depth - 1);
+            const beforeSection = $from.before(sectionDepth);
+            const $beforeSection = doc.resolve(beforeSection);
+            const sectionOffset = $beforeSection.parentOffset;
+            options.push({
+                nodeType: nodes.paragraph,
+                label: 'Paragraph',
+                action: helpers_1.demoteSectionToParagraph,
+                isDisabled: sectionDepth <= 1 && sectionOffset <= 1,
+                isSelected: false,
+            }, {
+                nodeType: nodes.section,
+                label: 'Heading',
+                isDisabled: true,
+                isSelected: true,
+            });
+            return options;
+        }
+        case parentElementType.schema.nodes.paragraph: {
+            options.push({
+                nodeType: nodes.paragraph,
+                label: 'Paragraph',
+                isDisabled: true,
+                isSelected: true,
+            }, {
+                nodeType: nodes.section,
+                label: 'Heading',
+                action: helpers_1.promoteParagraphToSection,
+                isDisabled: false,
+                isSelected: false,
+            });
+            return options;
+        }
+        default: {
+            options.push({
+                nodeType: parentElementType,
+                label: (0, helpers_1.titleCase)((0, helpers_1.optionName)(parentElementType)),
+                isDisabled: true,
+                isSelected: true,
+            });
+            return options;
+        }
+    }
+};
+const TypeSelector = ({ state, dispatch, view }) => {
+    const options = buildOptions(state);
+    const isInBody = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.body)(state.selection);
+    return (react_1.default.createElement(styles_1.StyledSelect, { onChange: (value) => {
+            if (value && value.action) {
+                value.action(state, dispatch, view);
+            }
+        }, value: options.length === 1
+            ? options[0]
+            : (0, helpers_1.findSelectedOption)(options), options: options, components: {
+            Option: OptionComponent_1.OptionComponent,
+        }, styles: styles_1.customStyles, isDisabled: options.length <= 1 || !isInBody, isSearchable: false }));
+};
+exports.TypeSelector = TypeSelector;

package/dist/cjs/components/toolbar/type-selector/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customStyles = exports.StyledSelect = void 0;
+const react_select_1 = __importDefault(require("react-select"));
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledSelect = (0, styled_components_1.default)((react_select_1.default)) `
+  & > div:hover {
+    border-color: ${(props) => props.theme.colors.border.secondary};
+  }
+`;
+exports.customStyles = {
+    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: '200px' })),
+    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' })),
+};

package/dist/cjs/index.js

@@ -29,14 +29,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.affiliationLabel = exports.authorLabel = exports.metadata = exports.getClosestMatch = exports.getNewMatch = exports.searchReplacePluginKey = exports.bibliographyPluginKey = exports.footnotesPluginKey = exports.objectsPluginKey = exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.affiliationLabel = exports.authorLabel = exports.metadata = exports.getClosestMatch = exports.getNewMatch = exports.searchReplacePluginKey = exports.bibliographyPluginKey = exports.footnotesPluginKey = exports.objectsPluginKey = exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.TypeSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
 __exportStar(require("./commands"), exports);
 var ManuscriptOutline_1 = require("./components/outline/ManuscriptOutline");
 Object.defineProperty(exports, "ManuscriptOutline", { enumerable: true, get: function () { return ManuscriptOutline_1.ManuscriptOutline; } });
 var Outline_1 = require("./components/outline/Outline");
 Object.defineProperty(exports, "OutlineItemIcon", { enumerable: true, get: function () { return Outline_1.OutlineItemIcon; } });
-var LevelSelector_1 = require("./components/toolbar/LevelSelector");
-Object.defineProperty(exports, "LevelSelector", { enumerable: true, get: function () { return LevelSelector_1.LevelSelector; } });
+var TypeSelector_1 = require("./components/toolbar/type-selector/TypeSelector");
+Object.defineProperty(exports, "TypeSelector", { enumerable: true, get: function () { return TypeSelector_1.TypeSelector; } });
 __exportStar(require("./components/toolbar/ListMenuItem"), exports);
 __exportStar(require("./components/toolbar/InsertTableDialog"), exports);
 __exportStar(require("./menus"), exports);

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '2.8.1';
+exports.VERSION = '2.8.2';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/components/toolbar/helpers.js

@@ -0,0 +1,127 @@
+import { skipTracking } from '@manuscripts/track-changes-plugin';
+import { generateNodeID, isSectionNodeType, nodeNames, } from '@manuscripts/transform';
+import { Fragment } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+export const optionName = (nodeType) => {
+    switch (nodeType) {
+        case nodeType.schema.nodes.section:
+            return 'Heading';
+        default:
+            return nodeNames.get(nodeType) || nodeType.name;
+    }
+};
+export const titleCase = (text) => text.replace(/\b([a-z])/g, (match) => match.toUpperCase());
+export const findSelectedOption = (options) => {
+    for (const option of options) {
+        if (option.isSelected) {
+            return option;
+        }
+    }
+};
+const getDeepestSubsection = (subsection) => {
+    while (subsection.lastChild && isSectionNodeType(subsection.lastChild.type)) {
+        subsection = subsection.lastChild;
+    }
+    return subsection;
+};
+const replaceDeepestSubsection = (parentNode, newSubsection) => {
+    if (!parentNode.lastChild || !isSectionNodeType(parentNode.lastChild.type)) {
+        return newSubsection;
+    }
+    const lastSubsectionIndex = parentNode.content.childCount - 1;
+    const lastSubsection = parentNode.content.child(lastSubsectionIndex);
+    const updatedSubsection = replaceDeepestSubsection(lastSubsection, newSubsection);
+    return parentNode.copy(parentNode.content.replaceChild(lastSubsectionIndex, updatedSubsection));
+};
+export const demoteSectionToParagraph = (state, dispatch, view) => {
+    const { doc, selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    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 - 1;
+    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: generateNodeID(nodes.paragraph),
+    }, sectionTitle.content);
+    let anchor;
+    let fragment;
+    const sectionContent = section.content.cut(afterSectionTitleOffset);
+    if (previousNode && isSectionNodeType(previousNode.type)) {
+        const hasSubsections = previousNode.lastChild && isSectionNodeType(previousNode.lastChild.type);
+        if (hasSubsections) {
+            const deepestSubsection = getDeepestSubsection(previousNode.lastChild);
+            const updatedDeepestSubsection = deepestSubsection.copy(deepestSubsection.content
+                .append(Fragment.from(paragraph))
+                .append(sectionContent));
+            const updatedPreviousNode = replaceDeepestSubsection(previousNode, updatedDeepestSubsection);
+            fragment = updatedPreviousNode.content;
+        }
+        else {
+            fragment = Fragment.from(previousNode.content)
+                .append(Fragment.from(paragraph))
+                .append(sectionContent);
+        }
+        tr.replaceWith(beforeSection - previousNode.nodeSize, afterSection, previousNode.copy(fragment));
+        anchor = beforeSection;
+    }
+    else {
+        tr.replaceWith(beforeSection, afterSection, Fragment.from(paragraph).append(sectionContent));
+        anchor = beforeSection + 1;
+    }
+    tr.setSelection(TextSelection.create(tr.doc, anchor, anchor + paragraph.content.size));
+    dispatch(skipTracking(tr));
+    view && view.focus();
+};
+export const promoteParagraphToSection = (state, dispatch, view) => {
+    const { doc, selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    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 - 1;
+    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 = Fragment.from(sectionTitle);
+    if (endIndex < parentSection.childCount) {
+        sectionContent = sectionContent.append(parentSection.content.cut(afterParagraphOffset));
+    }
+    else {
+        sectionContent = sectionContent.append(Fragment.from(paragraph.copy()));
+    }
+    if (parentSection.type.name === 'body') {
+        const newSection = nodes.section.create({}, sectionContent);
+        items[0] = nodes.body.create({}, items[0]
+            ? items[0].content.append(Fragment.from(newSection))
+            : Fragment.from(newSection));
+    }
+    else {
+        items.push(parentSection.copy(sectionContent));
+    }
+    tr.replaceWith(beforeParentSection, afterParentSection, items);
+    const anchor = beforeParentSection + offset + 2;
+    tr.setSelection(TextSelection.create(tr.doc, anchor, anchor + sectionTitle.content.size));
+    dispatch(skipTracking(tr));
+    view && view.focus();
+};

package/dist/es/components/toolbar/type-selector/OptionComponent.js

@@ -0,0 +1,24 @@
+import { TickIcon } from '@manuscripts/style-guide';
+import React from 'react';
+import styled from 'styled-components';
+import { optionName, titleCase } from '../helpers';
+const OptionContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 8px;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+const OptionLabel = styled.span ``;
+const TickIconWrapper = styled.div ``;
+export const OptionComponent = ({ innerProps, data, }) => {
+    return (React.createElement(OptionContainer, Object.assign({}, innerProps, { ref: null }),
+        React.createElement(OptionLabel, null, titleCase(optionName(data.nodeType))),
+        data.isSelected && (React.createElement(TickIconWrapper, null,
+            React.createElement(TickIcon, null)))));
+};

package/dist/es/components/toolbar/type-selector/TypeSelector.js

@@ -0,0 +1,78 @@
+import { schema, } from '@manuscripts/transform';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import React from 'react';
+import { findClosestParentElement } from '../../../lib/hierarchy';
+import { demoteSectionToParagraph, findSelectedOption, optionName, promoteParagraphToSection, titleCase, } from '../helpers';
+import { OptionComponent } from './OptionComponent';
+import { customStyles, StyledSelect } from './styles';
+const buildOptions = (state) => {
+    const { doc, selection: { $from, $to }, schema, } = state;
+    const { nodes } = schema;
+    if (!$from.sameParent($to)) {
+        return [];
+    }
+    const parentElement = findClosestParentElement($from);
+    if (!parentElement) {
+        return [];
+    }
+    const parentElementType = parentElement.node.type;
+    const options = [];
+    switch (parentElementType) {
+        case parentElementType.schema.nodes.section: {
+            const sectionDepth = Math.max(1, $from.depth - 1);
+            const beforeSection = $from.before(sectionDepth);
+            const $beforeSection = doc.resolve(beforeSection);
+            const sectionOffset = $beforeSection.parentOffset;
+            options.push({
+                nodeType: nodes.paragraph,
+                label: 'Paragraph',
+                action: demoteSectionToParagraph,
+                isDisabled: sectionDepth <= 1 && sectionOffset <= 1,
+                isSelected: false,
+            }, {
+                nodeType: nodes.section,
+                label: 'Heading',
+                isDisabled: true,
+                isSelected: true,
+            });
+            return options;
+        }
+        case parentElementType.schema.nodes.paragraph: {
+            options.push({
+                nodeType: nodes.paragraph,
+                label: 'Paragraph',
+                isDisabled: true,
+                isSelected: true,
+            }, {
+                nodeType: nodes.section,
+                label: 'Heading',
+                action: promoteParagraphToSection,
+                isDisabled: false,
+                isSelected: false,
+            });
+            return options;
+        }
+        default: {
+            options.push({
+                nodeType: parentElementType,
+                label: titleCase(optionName(parentElementType)),
+                isDisabled: true,
+                isSelected: true,
+            });
+            return options;
+        }
+    }
+};
+export const TypeSelector = ({ state, dispatch, view }) => {
+    const options = buildOptions(state);
+    const isInBody = hasParentNodeOfType(schema.nodes.body)(state.selection);
+    return (React.createElement(StyledSelect, { onChange: (value) => {
+            if (value && value.action) {
+                value.action(state, dispatch, view);
+            }
+        }, value: options.length === 1
+            ? options[0]
+            : findSelectedOption(options), options: options, components: {
+            Option: OptionComponent,
+        }, styles: customStyles, isDisabled: options.length <= 1 || !isInBody, isSearchable: false }));
+};

package/dist/es/components/toolbar/type-selector/styles.js

@@ -0,0 +1,18 @@
+import Select from 'react-select';
+import styled from 'styled-components';
+export const StyledSelect = styled((Select)) `
+  & > div:hover {
+    border-color: ${(props) => props.theme.colors.border.secondary};
+  }
+`;
+export const customStyles = {
+    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: '200px' })),
+    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' })),
+};

package/dist/es/index.js

@@ -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/es/versions.js

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

package/dist/types/components/toolbar/helpers.d.ts

@@ -0,0 +1,8 @@
+import { ManuscriptEditorView, ManuscriptNodeType } from '@manuscripts/transform';
+import { EditorState, Transaction } from 'prosemirror-state';
+import { Option } from './type-selector/TypeSelector';
+export declare const optionName: (nodeType: ManuscriptNodeType) => string;
+export declare const titleCase: (text: string) => string;
+export declare const findSelectedOption: (options: Option[]) => Option | undefined;
+export declare const demoteSectionToParagraph: (state: EditorState, dispatch: (tr: Transaction) => void, view?: ManuscriptEditorView) => void;
+export declare const promoteParagraphToSection: (state: EditorState, dispatch: (tr: Transaction) => void, view?: ManuscriptEditorView) => void;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { OptionProps } from 'react-select';
+import { Option } from './TypeSelector';
+export declare const OptionComponent: React.FC<OptionProps<Option, false>>;

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

@@ -0,0 +1,15 @@
+import { ManuscriptEditorView, ManuscriptNodeType } from '@manuscripts/transform';
+import { EditorState, Transaction } from 'prosemirror-state';
+import React from 'react';
+export interface Option {
+    action?: (state: EditorState, dispatch: (tr: Transaction) => void, view?: ManuscriptEditorView) => void;
+    isDisabled: boolean;
+    isSelected: boolean;
+    label: string;
+    nodeType: ManuscriptNodeType;
+}
+export declare const TypeSelector: React.FC<{
+    state: EditorState;
+    dispatch: (tr: Transaction) => void;
+    view?: ManuscriptEditorView;
+}>;