@manuscripts/body-editor 3.7.16 → 3.7.18

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.changeIndentation = exports.unindentParagraph = exports.unindentSection = exports.indentParagraph = exports.indentSection = exports.isIndentationAllowed = exports.promoteParagraphToSection = exports.demoteSectionToParagraph = exports.findSelectedOption = exports.titleCase = exports.optionName = exports.shouldSkipNode = void 0;
+exports.changeIndentation = exports.unindentParagraph = exports.unindentSection = exports.indentParagraph = exports.indentSection = exports.isIndentationAllowed = exports.promoteParagraphToSection = exports.demoteSectionToParagraph = exports.getDeepestSubsectionPosition = exports.findSelectedOption = exports.titleCase = exports.optionName = exports.shouldSkipNode = 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");
@@ -44,6 +44,7 @@ const getDeepestSubsectionPosition = (subsection, position) => {
     }
     return position + subsection.content.size;
 };
+exports.getDeepestSubsectionPosition = getDeepestSubsectionPosition;
 const getInsertDataTracked = (node) => {
     const dataTracked = node.attrs.dataTracked;
     const change = dataTracked?.find((c) => c.operation === 'insert');
@@ -84,7 +85,7 @@ const demoteSectionToParagraph = (state, dispatch, view) => {
     if (previousNode && (0, transform_1.isSectionNodeType)(previousNode.type)) {
         const hasSubsections = previousNode.lastChild && (0, transform_1.isSectionNodeType)(previousNode.lastChild.type);
         if (hasSubsections) {
-            beforeSection = getDeepestSubsectionPosition(previousNode, beforeSection - previousNode.nodeSize);
+            beforeSection = (0, exports.getDeepestSubsectionPosition)(previousNode, beforeSection - previousNode.nodeSize);
         }
         else {
             beforeSection = beforeSection - 1;

package/dist/cjs/lib/paste.js

@@ -21,6 +21,7 @@ const prosemirror_model_1 = require("prosemirror-model");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const url_1 = require("./url");
+const helpers_1 = require("../components/toolbar/helpers");
 const removeFirstParagraphIfEmpty = (slice) => {
     const firstChild = slice.content.firstChild;
     if (firstChild &&
@@ -71,22 +72,54 @@ const transformPasted = (slice) => {
 };
 exports.transformPasted = transformPasted;
 const transformPastedHTML = (html) => {
-    if (html.includes('table')) {
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        doc.querySelectorAll('table').forEach((table) => {
-            if (table.parentElement?.tagName !== 'figure') {
-                const tableElement = document.createElement('figure');
-                tableElement.className = 'table';
-                table.removeAttribute('data-pm-slice');
-                table.parentElement?.insertBefore(tableElement, table);
-                tableElement.append(table);
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    wrapHeadingWithSection(doc);
+    wrapTableWithFigure(doc);
+    console.log(doc.body.innerHTML);
+    return doc.body.innerHTML;
+};
+exports.transformPastedHTML = transformPastedHTML;
+const wrapHeadingWithSection = (doc) => {
+    if (!doc.body.querySelector('h1, h2, h3, h4, h5, h6')) {
+        return;
+    }
+    const getHeadingLevel = (element) => {
+        const level = element.tagName.match(/^H(\d)$/);
+        return level ? parseInt(level[1]) : -1;
+    };
+    const root = doc.createElement('div');
+    const google_doc_document = doc.body.querySelector('b[id^="docs-internal-guid"]');
+    const elements = Array.from(google_doc_document?.children || doc.body.children);
+    const stack = [{ level: 0, element: root }];
+    for (const element of elements) {
+        const headingLevel = getHeadingLevel(element);
+        if (headingLevel > 0) {
+            while (stack.length > 1 &&
+                stack[stack.length - 1].level >= headingLevel) {
+                stack.pop();
             }
-        });
-        return doc.body.innerHTML;
+            const section = doc.createElement('section');
+            section.appendChild(element.cloneNode(true));
+            stack[stack.length - 1].element.appendChild(section);
+            stack.push({ level: headingLevel, element: section });
+        }
+        else {
+            stack[stack.length - 1].element.appendChild(element.cloneNode(true));
+        }
     }
-    return html;
+    doc.body.innerHTML = root.innerHTML;
+};
+const wrapTableWithFigure = (doc) => {
+    doc.body.querySelectorAll('table').forEach((table) => {
+        if (table.parentElement?.tagName !== 'FIGURE') {
+            const tableElement = doc.createElement('figure');
+            tableElement.className = 'table';
+            table.removeAttribute('data-pm-slice');
+            table.parentElement?.insertBefore(tableElement, table);
+            tableElement.append(table);
+        }
+    });
 };
-exports.transformPastedHTML = transformPastedHTML;
 const handlePaste = (view, event, slice) => {
     if (event.type !== 'paste') {
         return false;
@@ -101,12 +134,27 @@ const handlePaste = (view, event, slice) => {
         dispatch(tr.insert(selection.from, prosemirror_model_1.Fragment.from(link)).scrollIntoView());
         return true;
     }
-    const parent = (0, prosemirror_utils_1.findParentNode)((node) => node.type === transform_1.schema.nodes.section)(tr.selection);
-    if (slice.content.firstChild?.type === transform_1.schema.nodes.section && parent) {
-        const $pos = tr.doc.resolve(parent.start);
-        const insertPos = $pos.after($pos.depth);
+    const parent = (0, prosemirror_utils_1.findParentNode)((node) => node.type === transform_1.schema.nodes.section || node.type === transform_1.schema.nodes.body)(selection);
+    if ((slice.content.firstChild?.type === transform_1.schema.nodes.section ||
+        slice.content.lastChild?.type === transform_1.schema.nodes.section) &&
+        parent) {
+        const $pos = tr.doc.resolve((0, helpers_1.getDeepestSubsectionPosition)(parent.node, parent.pos));
+        const insertPos = $pos.end();
         tr.insert(insertPos, slice.content);
-        dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, insertPos)).scrollIntoView());
+        dispatch(tr
+            .setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, tr.steps[0]['to'] || insertPos))
+            .scrollIntoView());
+        return true;
+    }
+    if ((slice.content.firstChild?.type === transform_1.schema.nodes.body ||
+        slice.content.lastChild?.type === transform_1.schema.nodes.backmatter) &&
+        parent) {
+        const $pos = tr.doc.resolve((0, helpers_1.getDeepestSubsectionPosition)(parent.node, parent.pos));
+        const insertPos = $pos.end();
+        tr.insert(insertPos, slice.content.firstChild.content.append(slice.content.lastChild.content));
+        dispatch(tr
+            .setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, tr.doc.resolve(insertPos).after()))
+            .scrollIntoView());
         return true;
     }
     if (selection instanceof prosemirror_state_1.TextSelection &&

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

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

@@ -25,7 +25,7 @@ export const findSelectedOption = (options) => {
         }
     }
 };
-const getDeepestSubsectionPosition = (subsection, position) => {
+export const getDeepestSubsectionPosition = (subsection, position) => {
     while (subsection.lastChild && isSectionNodeType(subsection.lastChild.type)) {
         if (isDeleted(subsection.lastChild)) {
             return (position +

package/dist/es/lib/paste.js

@@ -15,9 +15,10 @@
  */
 import { generateNodeID, isElementNodeType, schema, } from '@manuscripts/transform';
 import { Fragment, Slice } from 'prosemirror-model';
-import { TextSelection } from 'prosemirror-state';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { findParentNode } from 'prosemirror-utils';
 import { allowedHref } from './url';
+import { getDeepestSubsectionPosition } from '../components/toolbar/helpers';
 const removeFirstParagraphIfEmpty = (slice) => {
     const firstChild = slice.content.firstChild;
     if (firstChild &&
@@ -67,20 +68,52 @@ export const transformPasted = (slice) => {
     return slice;
 };
 export const transformPastedHTML = (html) => {
-    if (html.includes('table')) {
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        doc.querySelectorAll('table').forEach((table) => {
-            if (table.parentElement?.tagName !== 'figure') {
-                const tableElement = document.createElement('figure');
-                tableElement.className = 'table';
-                table.removeAttribute('data-pm-slice');
-                table.parentElement?.insertBefore(tableElement, table);
-                tableElement.append(table);
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    wrapHeadingWithSection(doc);
+    wrapTableWithFigure(doc);
+    console.log(doc.body.innerHTML);
+    return doc.body.innerHTML;
+};
+const wrapHeadingWithSection = (doc) => {
+    if (!doc.body.querySelector('h1, h2, h3, h4, h5, h6')) {
+        return;
+    }
+    const getHeadingLevel = (element) => {
+        const level = element.tagName.match(/^H(\d)$/);
+        return level ? parseInt(level[1]) : -1;
+    };
+    const root = doc.createElement('div');
+    const google_doc_document = doc.body.querySelector('b[id^="docs-internal-guid"]');
+    const elements = Array.from(google_doc_document?.children || doc.body.children);
+    const stack = [{ level: 0, element: root }];
+    for (const element of elements) {
+        const headingLevel = getHeadingLevel(element);
+        if (headingLevel > 0) {
+            while (stack.length > 1 &&
+                stack[stack.length - 1].level >= headingLevel) {
+                stack.pop();
             }
-        });
-        return doc.body.innerHTML;
+            const section = doc.createElement('section');
+            section.appendChild(element.cloneNode(true));
+            stack[stack.length - 1].element.appendChild(section);
+            stack.push({ level: headingLevel, element: section });
+        }
+        else {
+            stack[stack.length - 1].element.appendChild(element.cloneNode(true));
+        }
     }
-    return html;
+    doc.body.innerHTML = root.innerHTML;
+};
+const wrapTableWithFigure = (doc) => {
+    doc.body.querySelectorAll('table').forEach((table) => {
+        if (table.parentElement?.tagName !== 'FIGURE') {
+            const tableElement = doc.createElement('figure');
+            tableElement.className = 'table';
+            table.removeAttribute('data-pm-slice');
+            table.parentElement?.insertBefore(tableElement, table);
+            tableElement.append(table);
+        }
+    });
 };
 export const handlePaste = (view, event, slice) => {
     if (event.type !== 'paste') {
@@ -96,12 +129,27 @@ export const handlePaste = (view, event, slice) => {
         dispatch(tr.insert(selection.from, Fragment.from(link)).scrollIntoView());
         return true;
     }
-    const parent = findParentNode((node) => node.type === schema.nodes.section)(tr.selection);
-    if (slice.content.firstChild?.type === schema.nodes.section && parent) {
-        const $pos = tr.doc.resolve(parent.start);
-        const insertPos = $pos.after($pos.depth);
+    const parent = findParentNode((node) => node.type === schema.nodes.section || node.type === schema.nodes.body)(selection);
+    if ((slice.content.firstChild?.type === schema.nodes.section ||
+        slice.content.lastChild?.type === schema.nodes.section) &&
+        parent) {
+        const $pos = tr.doc.resolve(getDeepestSubsectionPosition(parent.node, parent.pos));
+        const insertPos = $pos.end();
         tr.insert(insertPos, slice.content);
-        dispatch(tr.setSelection(TextSelection.create(tr.doc, insertPos)).scrollIntoView());
+        dispatch(tr
+            .setSelection(NodeSelection.create(tr.doc, tr.steps[0]['to'] || insertPos))
+            .scrollIntoView());
+        return true;
+    }
+    if ((slice.content.firstChild?.type === schema.nodes.body ||
+        slice.content.lastChild?.type === schema.nodes.backmatter) &&
+        parent) {
+        const $pos = tr.doc.resolve(getDeepestSubsectionPosition(parent.node, parent.pos));
+        const insertPos = $pos.end();
+        tr.insert(insertPos, slice.content.firstChild.content.append(slice.content.lastChild.content));
+        dispatch(tr
+            .setSelection(NodeSelection.create(tr.doc, tr.doc.resolve(insertPos).after()))
+            .scrollIntoView());
         return true;
     }
     if (selection instanceof TextSelection &&

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.7.16';
+export const VERSION = '3.7.18';
 export const MATHJAX_VERSION = '3.2.2';

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

@@ -8,6 +8,7 @@ export declare const shouldSkipNode: (node: Node) => boolean;
 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 getDeepestSubsectionPosition: (subsection: Node, position: number) => number;
 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 isIndentationAllowed: (action: string) => (state: EditorState) => boolean;

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

@@ -1,6 +1,6 @@
 import { CSSObjectWithLabel } from 'react-select';
 import { Option } from './TypeSelector';
-export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<Option, false, import("react-select").GroupBase<Option>>>) => import("react").ReactElement, any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>, "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<Option, false, import("react-select").GroupBase<Option>>>) => import("react").ReactElement, any, {}, never>;
 export declare const customStyles: {
     control: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
     indicatorSeparator: () => CSSObjectWithLabel;

package/dist/types/lib/dnd.d.ts

@@ -1,3 +1,3 @@
 import { DropTargetMonitor } from 'react-dnd';
 export type DropSide = 'before' | 'after';
-export declare const getDropSide: (element: Element, monitor: DropTargetMonitor) => "before" | "after";
+export declare const getDropSide: (element: Element, monitor: DropTargetMonitor) => "after" | "before";

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.7.16";
+export declare const VERSION = "3.7.18";
 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": "3.7.16",
+  "version": "3.7.18",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -39,7 +39,7 @@
     "@iarna/word-count": "1.1.2",
     "@manuscripts/json-schema": "2.2.12",
     "@manuscripts/style-guide": "3.3.10",
-    "@manuscripts/track-changes-plugin": "2.2.1",
+    "@manuscripts/track-changes-plugin": "2.2.2",
     "@manuscripts/transform": "4.3.12",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",