@manuscripts/body-editor 2.8.6 → 2.8.7

package/dist/cjs/commands.js

@@ -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) &&

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/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.6';
+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) &&

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

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

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.6";
+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.6",
+  "version": "2.8.7",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

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;
+}