@manuscripts/body-editor 2.8.5 → 2.8.7

package/dist/cjs/commands.js

@@ -16,7 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.isCommentingAllowed = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.insertEmbed = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.activateSearchReplace = exports.activateSearch = exports.indentParagraph = exports.indent = exports.canIndent = exports.autoComplete = exports.addColumns = void 0;
+exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -94,7 +94,8 @@ const canInsert = (type) => (state) => {
     const { $from, $to } = state.selection;
     if (($from.node().type === transform_1.schema.nodes.title ||
         $from.node().type === transform_1.schema.nodes.section_title) &&
-        $from.pos === $to.pos) {
+        $from.pos === $to.pos &&
+        type !== transform_1.schema.nodes.text) {
         return false;
     }
     if ((0, transform_1.isElementNodeType)(type) &&
@@ -1156,54 +1157,6 @@ const autoComplete = (state, dispatch) => {
     return false;
 };
 exports.autoComplete = autoComplete;
-const canIndent = (state) => {
-    const { $from } = state.selection;
-    const node = $from.node($from.depth);
-    const allowedNodeTypes = [transform_1.schema.nodes.paragraph];
-    if (!allowedNodeTypes.includes(node.type)) {
-        return false;
-    }
-    const isBody = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.body)(state.selection);
-    if (!isBody || (0, track_changes_utils_1.isDeleted)(node)) {
-        return false;
-    }
-    if (node.type === transform_1.schema.nodes.paragraph) {
-        const parentNode = $from.node($from.depth - 1);
-        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.section &&
-            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.body) {
-            return false;
-        }
-    }
-    return true;
-};
-exports.canIndent = canIndent;
-const indent = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const nodeType = $from.node().type;
-    if (nodeType === transform_1.schema.nodes.paragraph) {
-        (0, exports.indentParagraph)()(state, dispatch, view);
-    }
-};
-exports.indent = indent;
-const indentParagraph = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const { schema, tr } = state;
-    const beforeParagraph = $from.before($from.depth);
-    const sectionDepth = $from.depth - 1;
-    const parentSection = $from.node(sectionDepth);
-    const sectionStart = $from.start(sectionDepth);
-    const sectionEnd = $from.end(sectionDepth);
-    const sectionTitle = schema.nodes.section_title.create();
-    const sectionContent = prosemirror_model_1.Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
-    const newSection = schema.nodes.section.create({ id: (0, transform_1.generateNodeID)(schema.nodes.section) }, sectionContent);
-    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
-    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, beforeParagraph + 2));
-    if (dispatch) {
-        dispatch((0, track_changes_plugin_1.skipTracking)(tr));
-        view === null || view === void 0 ? void 0 : view.focus();
-    }
-};
-exports.indentParagraph = indentParagraph;
 const activateSearch = (state, dispatch) => {
     const pluginState = search_replace_1.searchReplaceKey.getState(state);
     const tr = state.tr.setMeta(search_replace_1.searchReplaceKey, {

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.promoteParagraphToSection = exports.demoteSectionToParagraph = exports.findSelectedOption = exports.titleCase = exports.optionName = void 0;
+exports.indentParagraph = exports.indentSection = exports.indent = exports.canIndent = 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 prosemirror_utils_1 = require("prosemirror-utils");
+const track_changes_utils_1 = require("../../lib/track-changes-utils");
 const optionName = (nodeType) => {
     switch (nodeType) {
         case nodeType.schema.nodes.section:
@@ -133,3 +135,85 @@ const promoteParagraphToSection = (state, dispatch, view) => {
     view && view.focus();
 };
 exports.promoteParagraphToSection = promoteParagraphToSection;
+const canIndent = () => (state) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    const allowedNodeTypes = [transform_1.schema.nodes.section_title, transform_1.schema.nodes.paragraph];
+    if (!allowedNodeTypes.includes(nodeType)) {
+        return false;
+    }
+    const isInBody = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.body)(state.selection);
+    const isDeletedNode = (0, track_changes_utils_1.isDeleted)($from.node($from.depth));
+    if (!isInBody || isDeletedNode) {
+        return false;
+    }
+    const isParagraph = nodeType === transform_1.schema.nodes.paragraph;
+    if (isParagraph) {
+        const parentNode = $from.node($from.depth - 1);
+        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.section &&
+            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.body) {
+            return false;
+        }
+    }
+    return true;
+};
+exports.canIndent = canIndent;
+const indent = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    if (nodeType === transform_1.schema.nodes.section_title) {
+        (0, exports.indentSection)()(state, dispatch, view);
+    }
+    else if (nodeType === transform_1.schema.nodes.paragraph) {
+        (0, exports.indentParagraph)()(state, dispatch, view);
+    }
+};
+exports.indent = indent;
+const indentSection = () => (state, dispatch, view) => {
+    const { selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    const sectionDepth = $from.depth - 1;
+    const section = $from.node(sectionDepth);
+    const beforeSection = $from.before(sectionDepth);
+    const afterSection = $from.after(sectionDepth);
+    const parentSectionDepth = sectionDepth - 1;
+    const parentSection = $from.node(parentSectionDepth);
+    const startIndex = $from.index(parentSectionDepth);
+    const previousSection = startIndex > 0 ? parentSection.child(startIndex - 1) : null;
+    const isValidContainer = (previousSection === null || previousSection === void 0 ? void 0 : previousSection.type) === nodes.section;
+    let anchor;
+    if (!previousSection || !isValidContainer) {
+        const emptyTitle = nodes.section_title.create();
+        const newParentSectionContent = prosemirror_model_1.Fragment.fromArray([emptyTitle, section]);
+        const newParentSection = nodes.section.create({}, newParentSectionContent);
+        tr.replaceWith(beforeSection, afterSection, newParentSection);
+        anchor = beforeSection + 1;
+    }
+    else {
+        const newPreviousSection = previousSection.copy(previousSection.content.append(prosemirror_model_1.Fragment.from(section)));
+        const beforePreviousSection = beforeSection - previousSection.nodeSize;
+        tr.replaceWith(beforePreviousSection, afterSection, newPreviousSection);
+        anchor = beforePreviousSection + 1;
+    }
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor));
+    dispatch((0, track_changes_plugin_1.skipTracking)(tr));
+    view && view.focus();
+};
+exports.indentSection = indentSection;
+const indentParagraph = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const { schema, tr } = state;
+    const beforeParagraph = $from.before($from.depth);
+    const sectionDepth = $from.depth - 1;
+    const parentSection = $from.node(sectionDepth);
+    const sectionStart = $from.start(sectionDepth);
+    const sectionEnd = $from.end(sectionDepth);
+    const sectionTitle = schema.nodes.section_title.create();
+    const sectionContent = prosemirror_model_1.Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
+    const newSection = schema.nodes.section.create({ id: (0, transform_1.generateNodeID)(schema.nodes.section) }, sectionContent);
+    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, beforeParagraph + 2));
+    dispatch((0, track_changes_plugin_1.skipTracking)(tr));
+    view === null || view === void 0 ? void 0 : view.focus();
+};
+exports.indentParagraph = indentParagraph;

package/dist/cjs/components/views/InsertSpecialCharacter.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInsertSpecialCharacterDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const react_select_1 = __importDefault(require("react-select"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const editor_props_1 = require("../../plugins/editor-props");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
+const unicodeRanges = [
+    { label: 'Latin', value: [0x0100, 0x024f] },
+    { label: 'Greek and Coptic', value: [0x0370, 0x03ff] },
+    { label: 'Mathematical Operators', value: [0x2200, 0x22ff] },
+    { label: 'Arrows', value: [0x2190, 0x21ff] },
+];
+const reservedCharacters = new Set([
+    0x0380, 0x0381, 0x0382, 0x0383, 0x03a2, 0x0378, 0x0379, 0x038b, 0x038d,
+]);
+const generateCharacters = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    .filter((c) => !reservedCharacters.has(c))
+    .map((c) => String.fromCharCode(c));
+const InsertSpecialCharacterDialog = ({ view, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const [range, setRange] = (0, react_1.useState)(unicodeRanges[0].value);
+    const handleRangeChange = (range) => range && setRange(range.value);
+    const handleClose = () => setOpen(false);
+    const addCharacter = (event) => view.dispatch(view.state.tr.insertText(event.currentTarget.value, view.state.selection.from));
+    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: handleClose, shouldCloseOnOverlayClick: true },
+        react_1.default.createElement(Container, { "data-cy": "special-characters-modal" },
+            react_1.default.createElement(style_guide_1.ModalHeader, null,
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: handleClose, "data-cy": "modal-close-button" })),
+            react_1.default.createElement(StyledModalBody, null,
+                react_1.default.createElement(StyledModalSidebar, null,
+                    react_1.default.createElement(style_guide_1.ModalSidebarHeader, null,
+                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "Insert special characters")),
+                    react_1.default.createElement(StyledSidebarContent, null,
+                        react_1.default.createElement(react_select_1.default, { onChange: handleRangeChange, classNamePrefix: 'special-characters-ranges-select', defaultValue: unicodeRanges[0], options: unicodeRanges, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed" }),
+                        react_1.default.createElement(CharactersSetContainer, null,
+                            react_1.default.createElement(CharactersSet, null, generateCharacters(range[0], range[1]).map((character) => (react_1.default.createElement(Character, { key: character, value: character, onClick: addCharacter, "data-cy": "special-character" }, character)))))),
+                    react_1.default.createElement(ButtonsContainer, null,
+                        react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClose }, "Close")))))));
+};
+const OptionComponent = ({ innerProps, data, }) => {
+    return (react_1.default.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
+};
+const Container = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
+  padding: 8px;
+`;
+const StyledModalSidebar = (0, styled_components_1.default)(style_guide_1.ModalSidebar) `
+  background: white;
+  width: 30vw;
+`;
+const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
+  height: 60vh;
+`;
+const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
+  display: flex;
+  flex-direction: column;
+`;
+const ButtonsContainer = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
+  padding-top: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const OptionWrapper = styled_components_1.default.div `
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
+
+  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+const CharactersSetContainer = styled_components_1.default.div `
+  flex: 1;
+  overflow-y: scroll;
+  margin: 18px 0;
+  border: 1px solid #ddd;
+`;
+const CharactersSet = (0, styled_components_1.default)(style_guide_1.IconButtonGroup) `
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
+  height: ${(props) => props.theme.grid.unit * 8}px;
+`;
+const Character = (0, styled_components_1.default)(style_guide_1.IconButton) `
+  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-radius: unset;
+
+  :hover {
+    background-color: #f0f0f0 !important;
+  }
+
+  :active,
+  :focus {
+    color: inherit !important;
+    border-bottom: 1px solid #ddd !important;
+    border-right: 1px solid #ddd !important;
+  }
+`;
+const openInsertSpecialCharacterDialog = (view) => {
+    if (!view) {
+        return;
+    }
+    const { state } = view;
+    const props = (0, editor_props_1.getEditorProps)(state);
+    const dialog = (0, ReactSubView_1.default)(props, InsertSpecialCharacterDialog, { view }, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+};
+exports.openInsertSpecialCharacterDialog = openInsertSpecialCharacterDialog;

package/dist/cjs/menus.js

@@ -23,6 +23,7 @@ const commands_1 = require("./commands");
 const InsertEmbedDialog_1 = require("./components/toolbar/InsertEmbedDialog");
 const InsertTableDialog_1 = require("./components/toolbar/InsertTableDialog");
 const ListMenuItem_1 = require("./components/toolbar/ListMenuItem");
+const InsertSpecialCharacter_1 = require("./components/views/InsertSpecialCharacter");
 const hierarchy_1 = require("./lib/hierarchy");
 const editor_props_1 = require("./plugins/editor-props");
 const getEditorMenus = (editor) => {
@@ -317,6 +318,12 @@ const getEditorMenus = (editor) => {
                 isEnabled: isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.inline_footnote)),
                 run: doCommand(commands_1.insertInlineFootnote),
             },
+            {
+                id: 'insert-special-character',
+                label: 'Special Characters',
+                isEnabled: isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.text)),
+                run: () => (0, InsertSpecialCharacter_1.openInsertSpecialCharacterDialog)(editor.view),
+            },
             {
                 id: 'insert-comment',
                 label: 'Comment',

package/dist/cjs/toolbar.js

@@ -24,14 +24,15 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_commands_1 = require("prosemirror-commands");
 const react_1 = __importDefault(require("react"));
 const commands_1 = require("./commands");
+const helpers_1 = require("./components/toolbar/helpers");
 const InsertTableDialog_1 = require("./components/toolbar/InsertTableDialog");
 exports.toolbar = {
     indentation: {
         indent: {
             title: 'Indent',
             content: react_1.default.createElement(style_guide_1.ToolbarIndentIcon, null),
-            isEnabled: (state) => (0, commands_1.canIndent)(state),
-            run: (0, commands_1.indent)(),
+            isEnabled: (0, helpers_1.canIndent)(),
+            run: (0, helpers_1.indent)(),
         },
     },
     style: {

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.5';
+exports.VERSION = '2.8.7';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/commands.js

@@ -86,7 +86,8 @@ export const canInsert = (type) => (state) => {
     const { $from, $to } = state.selection;
     if (($from.node().type === schema.nodes.title ||
         $from.node().type === schema.nodes.section_title) &&
-        $from.pos === $to.pos) {
+        $from.pos === $to.pos &&
+        type !== schema.nodes.text) {
         return false;
     }
     if (isElementNodeType(type) &&
@@ -1100,51 +1101,6 @@ export const autoComplete = (state, dispatch) => {
     }
     return false;
 };
-export const canIndent = (state) => {
-    const { $from } = state.selection;
-    const node = $from.node($from.depth);
-    const allowedNodeTypes = [schema.nodes.paragraph];
-    if (!allowedNodeTypes.includes(node.type)) {
-        return false;
-    }
-    const isBody = hasParentNodeOfType(schema.nodes.body)(state.selection);
-    if (!isBody || isDeleted(node)) {
-        return false;
-    }
-    if (node.type === schema.nodes.paragraph) {
-        const parentNode = $from.node($from.depth - 1);
-        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.section &&
-            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.body) {
-            return false;
-        }
-    }
-    return true;
-};
-export const indent = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const nodeType = $from.node().type;
-    if (nodeType === schema.nodes.paragraph) {
-        indentParagraph()(state, dispatch, view);
-    }
-};
-export const indentParagraph = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const { schema, tr } = state;
-    const beforeParagraph = $from.before($from.depth);
-    const sectionDepth = $from.depth - 1;
-    const parentSection = $from.node(sectionDepth);
-    const sectionStart = $from.start(sectionDepth);
-    const sectionEnd = $from.end(sectionDepth);
-    const sectionTitle = schema.nodes.section_title.create();
-    const sectionContent = Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
-    const newSection = schema.nodes.section.create({ id: generateNodeID(schema.nodes.section) }, sectionContent);
-    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
-    tr.setSelection(TextSelection.create(tr.doc, beforeParagraph + 2));
-    if (dispatch) {
-        dispatch(skipTracking(tr));
-        view === null || view === void 0 ? void 0 : view.focus();
-    }
-};
 export const activateSearch = (state, dispatch) => {
     const pluginState = searchReplaceKey.getState(state);
     const tr = state.tr.setMeta(searchReplaceKey, {

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

@@ -1,7 +1,9 @@
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { generateNodeID, isSectionNodeType, nodeNames, } from '@manuscripts/transform';
+import { generateNodeID, isSectionNodeType, nodeNames, schema, } from '@manuscripts/transform';
 import { Fragment } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { isDeleted } from '../../lib/track-changes-utils';
 export const optionName = (nodeType) => {
     switch (nodeType) {
         case nodeType.schema.nodes.section:
@@ -125,3 +127,81 @@ export const promoteParagraphToSection = (state, dispatch, view) => {
     dispatch(skipTracking(tr));
     view && view.focus();
 };
+export const canIndent = () => (state) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    const allowedNodeTypes = [schema.nodes.section_title, schema.nodes.paragraph];
+    if (!allowedNodeTypes.includes(nodeType)) {
+        return false;
+    }
+    const isInBody = hasParentNodeOfType(schema.nodes.body)(state.selection);
+    const isDeletedNode = isDeleted($from.node($from.depth));
+    if (!isInBody || isDeletedNode) {
+        return false;
+    }
+    const isParagraph = nodeType === schema.nodes.paragraph;
+    if (isParagraph) {
+        const parentNode = $from.node($from.depth - 1);
+        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.section &&
+            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.body) {
+            return false;
+        }
+    }
+    return true;
+};
+export const indent = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    if (nodeType === schema.nodes.section_title) {
+        indentSection()(state, dispatch, view);
+    }
+    else if (nodeType === schema.nodes.paragraph) {
+        indentParagraph()(state, dispatch, view);
+    }
+};
+export const indentSection = () => (state, dispatch, view) => {
+    const { selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    const sectionDepth = $from.depth - 1;
+    const section = $from.node(sectionDepth);
+    const beforeSection = $from.before(sectionDepth);
+    const afterSection = $from.after(sectionDepth);
+    const parentSectionDepth = sectionDepth - 1;
+    const parentSection = $from.node(parentSectionDepth);
+    const startIndex = $from.index(parentSectionDepth);
+    const previousSection = startIndex > 0 ? parentSection.child(startIndex - 1) : null;
+    const isValidContainer = (previousSection === null || previousSection === void 0 ? void 0 : previousSection.type) === nodes.section;
+    let anchor;
+    if (!previousSection || !isValidContainer) {
+        const emptyTitle = nodes.section_title.create();
+        const newParentSectionContent = Fragment.fromArray([emptyTitle, section]);
+        const newParentSection = nodes.section.create({}, newParentSectionContent);
+        tr.replaceWith(beforeSection, afterSection, newParentSection);
+        anchor = beforeSection + 1;
+    }
+    else {
+        const newPreviousSection = previousSection.copy(previousSection.content.append(Fragment.from(section)));
+        const beforePreviousSection = beforeSection - previousSection.nodeSize;
+        tr.replaceWith(beforePreviousSection, afterSection, newPreviousSection);
+        anchor = beforePreviousSection + 1;
+    }
+    tr.setSelection(TextSelection.create(tr.doc, anchor));
+    dispatch(skipTracking(tr));
+    view && view.focus();
+};
+export const indentParagraph = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const { schema, tr } = state;
+    const beforeParagraph = $from.before($from.depth);
+    const sectionDepth = $from.depth - 1;
+    const parentSection = $from.node(sectionDepth);
+    const sectionStart = $from.start(sectionDepth);
+    const sectionEnd = $from.end(sectionDepth);
+    const sectionTitle = schema.nodes.section_title.create();
+    const sectionContent = Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
+    const newSection = schema.nodes.section.create({ id: generateNodeID(schema.nodes.section) }, sectionContent);
+    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
+    tr.setSelection(TextSelection.create(tr.doc, beforeParagraph + 2));
+    dispatch(skipTracking(tr));
+    view === null || view === void 0 ? void 0 : view.focus();
+};

package/dist/es/components/views/InsertSpecialCharacter.js

@@ -0,0 +1,108 @@
+import { ButtonGroup, CloseButton, IconButton, IconButtonGroup, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, PrimaryButton, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+import Select from 'react-select';
+import styled from 'styled-components';
+import { getEditorProps } from '../../plugins/editor-props';
+import ReactSubView from '../../views/ReactSubView';
+const unicodeRanges = [
+    { label: 'Latin', value: [0x0100, 0x024f] },
+    { label: 'Greek and Coptic', value: [0x0370, 0x03ff] },
+    { label: 'Mathematical Operators', value: [0x2200, 0x22ff] },
+    { label: 'Arrows', value: [0x2190, 0x21ff] },
+];
+const reservedCharacters = new Set([
+    0x0380, 0x0381, 0x0382, 0x0383, 0x03a2, 0x0378, 0x0379, 0x038b, 0x038d,
+]);
+const generateCharacters = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    .filter((c) => !reservedCharacters.has(c))
+    .map((c) => String.fromCharCode(c));
+const InsertSpecialCharacterDialog = ({ view, }) => {
+    const [isOpen, setOpen] = useState(true);
+    const [range, setRange] = useState(unicodeRanges[0].value);
+    const handleRangeChange = (range) => range && setRange(range.value);
+    const handleClose = () => setOpen(false);
+    const addCharacter = (event) => view.dispatch(view.state.tr.insertText(event.currentTarget.value, view.state.selection.from));
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: handleClose, shouldCloseOnOverlayClick: true },
+        React.createElement(Container, { "data-cy": "special-characters-modal" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: handleClose, "data-cy": "modal-close-button" })),
+            React.createElement(StyledModalBody, null,
+                React.createElement(StyledModalSidebar, null,
+                    React.createElement(ModalSidebarHeader, null,
+                        React.createElement(ModalSidebarTitle, null, "Insert special characters")),
+                    React.createElement(StyledSidebarContent, null,
+                        React.createElement(Select, { onChange: handleRangeChange, classNamePrefix: 'special-characters-ranges-select', defaultValue: unicodeRanges[0], options: unicodeRanges, components: {
+                                Option: OptionComponent,
+                            }, menuPosition: "fixed" }),
+                        React.createElement(CharactersSetContainer, null,
+                            React.createElement(CharactersSet, null, generateCharacters(range[0], range[1]).map((character) => (React.createElement(Character, { key: character, value: character, onClick: addCharacter, "data-cy": "special-character" }, character)))))),
+                    React.createElement(ButtonsContainer, null,
+                        React.createElement(PrimaryButton, { onClick: handleClose }, "Close")))))));
+};
+const OptionComponent = ({ innerProps, data, }) => {
+    return (React.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
+};
+const Container = styled(ModalContainer) `
+  padding: 8px;
+`;
+const StyledModalSidebar = styled(ModalSidebar) `
+  background: white;
+  width: 30vw;
+`;
+const StyledModalBody = styled(ModalBody) `
+  height: 60vh;
+`;
+const StyledSidebarContent = styled(SidebarContent) `
+  display: flex;
+  flex-direction: column;
+`;
+const ButtonsContainer = styled(ButtonGroup) `
+  padding-top: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const OptionWrapper = styled.div `
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
+
+  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+const CharactersSetContainer = styled.div `
+  flex: 1;
+  overflow-y: scroll;
+  margin: 18px 0;
+  border: 1px solid #ddd;
+`;
+const CharactersSet = styled(IconButtonGroup) `
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
+  height: ${(props) => props.theme.grid.unit * 8}px;
+`;
+const Character = styled(IconButton) `
+  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-radius: unset;
+
+  :hover {
+    background-color: #f0f0f0 !important;
+  }
+
+  :active,
+  :focus {
+    color: inherit !important;
+    border-bottom: 1px solid #ddd !important;
+    border-right: 1px solid #ddd !important;
+  }
+`;
+export const openInsertSpecialCharacterDialog = (view) => {
+    if (!view) {
+        return;
+    }
+    const { state } = view;
+    const props = getEditorProps(state);
+    const dialog = ReactSubView(props, InsertSpecialCharacterDialog, { view }, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+};

package/dist/es/menus.js

@@ -20,6 +20,7 @@ import { activateSearchReplace, addInlineComment, blockActive, canInsert, insert
 import { openEmbedDialog } from './components/toolbar/InsertEmbedDialog';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { ListMenuItem } from './components/toolbar/ListMenuItem';
+import { openInsertSpecialCharacterDialog } from './components/views/InsertSpecialCharacter';
 import { deleteClosestParentElement, findClosestParentElementNodeName, } from './lib/hierarchy';
 import { getEditorProps } from './plugins/editor-props';
 export const getEditorMenus = (editor) => {
@@ -314,6 +315,12 @@ export const getEditorMenus = (editor) => {
                 isEnabled: isCommandValid(canInsert(schema.nodes.inline_footnote)),
                 run: doCommand(insertInlineFootnote),
             },
+            {
+                id: 'insert-special-character',
+                label: 'Special Characters',
+                isEnabled: isCommandValid(canInsert(schema.nodes.text)),
+                run: () => openInsertSpecialCharacterDialog(editor.view),
+            },
             {
                 id: 'insert-comment',
                 label: 'Comment',

package/dist/es/toolbar.js

@@ -17,14 +17,15 @@ import { AddCommentIcon, ToolbarBoldIcon, ToolbarCitationIcon, ToolbarEquationIc
 import { schema } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import React from 'react';
-import { addInlineComment, blockActive, canIndent, canInsert, indent, insertBlock, insertInlineCitation, insertList, markActive, } from './commands';
+import { addInlineComment, blockActive, canInsert, insertBlock, insertInlineCitation, insertList, markActive, } from './commands';
+import { canIndent, indent } from './components/toolbar/helpers';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 export const toolbar = {
     indentation: {
         indent: {
             title: 'Indent',
             content: React.createElement(ToolbarIndentIcon, null),
-            isEnabled: (state) => canIndent(state),
+            isEnabled: canIndent(),
             run: indent(),
         },
     },

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.5';
+export const VERSION = '2.8.7';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -80,8 +80,5 @@ export declare const addRows: (direction: 'top' | 'bottom') => (state: EditorSta
 export declare const addHeaderRow: (direction: 'above' | 'below') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export declare const addColumns: (direction: 'right' | 'left') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export declare const autoComplete: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
-export declare const canIndent: (state: ManuscriptEditorState) => boolean;
-export declare const indent: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;
-export declare const indentParagraph: () => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: ManuscriptEditorView) => void;
 export declare const activateSearch: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const activateSearchReplace: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

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

@@ -1,8 +1,14 @@
 import { ManuscriptEditorView, ManuscriptNodeType } from '@manuscripts/transform';
 import { EditorState, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Dispatch } from '../../commands';
 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;
+export declare const canIndent: () => (state: EditorState) => boolean;
+export declare const indent: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;
+export declare const indentSection: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;
+export declare const indentParagraph: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;

package/dist/types/components/views/InsertSpecialCharacter.d.ts

@@ -0,0 +1,2 @@
+import { EditorView } from 'prosemirror-view';
+export declare const openInsertSpecialCharacterDialog: (view?: EditorView) => void;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.5";
+export declare const VERSION = "2.8.7";
 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.5",
+  "version": "2.8.7",
   "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.3",
+    "@manuscripts/style-guide": "2.1.4",
     "@manuscripts/track-changes-plugin": "1.10.0",
     "@manuscripts/transform": "3.0.45",
     "@popperjs/core": "^2.11.8",

package/styles/AdvancedEditor.css

@@ -1173,3 +1173,11 @@ th:hover > .table-context-menu-button,
 .search-result.search-result-selected {
   background-color: #ffbdf8;
 }
+
+.special-characters-ranges-select__control {
+  width: fit-content;
+}
+
+.special-characters-ranges-select__menu {
+  min-width: 220px;
+}