@manuscripts/body-editor 2.8.4-LEAN-4358.0 → 2.8.4

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.autoComplete = exports.addColumns = void 0;
+exports.activateSearchReplace = exports.activateSearch = exports.indentParagraph = exports.indent = exports.canIndent = 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,8 +94,7 @@ 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 &&
-        type !== transform_1.schema.nodes.text) {
+        $from.pos === $to.pos) {
         return false;
     }
     if ((0, transform_1.isElementNodeType)(type) &&
@@ -1157,6 +1156,54 @@ 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/menus.js

@@ -23,7 +23,6 @@ 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) => {
@@ -318,12 +317,6 @@ 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

@@ -26,6 +26,14 @@ const react_1 = __importDefault(require("react"));
 const commands_1 = require("./commands");
 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)(),
+        },
+    },
     style: {
         bold: {
             title: 'Toggle bold',

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.4-LEAN-4358.0';
+exports.VERSION = '2.8.4';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/commands.js

@@ -86,8 +86,7 @@ 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 &&
-        type !== schema.nodes.text) {
+        $from.pos === $to.pos) {
         return false;
     }
     if (isElementNodeType(type) &&
@@ -1101,6 +1100,51 @@ 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/menus.js

@@ -20,7 +20,6 @@ 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) => {
@@ -315,12 +314,6 @@ 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

@@ -13,13 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddCommentIcon, ToolbarBoldIcon, ToolbarCitationIcon, ToolbarEquationIcon, ToolbarFigureIcon, ToolbarItalicIcon, ToolbarOrderedListIcon, ToolbarSubscriptIcon, ToolbarSuperscriptIcon, ToolbarTableIcon, ToolbarUnderlineIcon, ToolbarUnorderedListIcon, } from '@manuscripts/style-guide';
+import { AddCommentIcon, ToolbarBoldIcon, ToolbarCitationIcon, ToolbarEquationIcon, ToolbarFigureIcon, ToolbarIndentIcon, ToolbarItalicIcon, ToolbarOrderedListIcon, ToolbarSubscriptIcon, ToolbarSuperscriptIcon, ToolbarTableIcon, ToolbarUnderlineIcon, ToolbarUnorderedListIcon, } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import React from 'react';
-import { addInlineComment, blockActive, canInsert, insertBlock, insertInlineCitation, insertList, markActive, } from './commands';
+import { addInlineComment, blockActive, canIndent, canInsert, indent, insertBlock, insertInlineCitation, insertList, markActive, } from './commands';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 export const toolbar = {
+    indentation: {
+        indent: {
+            title: 'Indent',
+            content: React.createElement(ToolbarIndentIcon, null),
+            isEnabled: (state) => canIndent(state),
+            run: indent(),
+        },
+    },
     style: {
         bold: {
             title: 'Toggle bold',

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.4-LEAN-4358.0';
+export const VERSION = '2.8.4';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -80,5 +80,8 @@ 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/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.4-LEAN-4358.0";
+export declare const VERSION = "2.8.4";
 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.4-LEAN-4358.0",
+  "version": "2.8.4",
   "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.2",
+    "@manuscripts/style-guide": "2.1.3",
     "@manuscripts/track-changes-plugin": "1.10.0",
     "@manuscripts/transform": "3.0.45",
     "@popperjs/core": "^2.11.8",

package/styles/AdvancedEditor.css

@@ -1173,11 +1173,3 @@ 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;
-}

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

@@ -1,139 +0,0 @@
-"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: 'Specials', value: [0xfffc, 0xfffd] },
-    { 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/es/components/views/InsertSpecialCharacter.js

@@ -1,109 +0,0 @@
-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: 'Specials', value: [0xfffc, 0xfffd] },
-    { 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/types/components/views/InsertSpecialCharacter.d.ts

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