@manuscripts/body-editor 1.6.2 → 1.6.3-LEAN-3156

package/dist/cjs/classes/collabProvider.js

@@ -0,0 +1,21 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollabProvider = void 0;
+class CollabProvider {
+}
+exports.CollabProvider = CollabProvider;

package/dist/cjs/configs/editor-plugins.js

@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 require("prosemirror-gapcursor/style/gapcursor.css");
 require("prosemirror-tables/style/tables.css");
+const prosemirror_collab_1 = require("prosemirror-collab");
 const prosemirror_dropcursor_1 = require("prosemirror-dropcursor");
 const prosemirror_history_1 = require("prosemirror-history");
 const prosemirror_tables_1 = require("prosemirror-tables");
@@ -42,7 +43,7 @@ const tracking_mark_1 = __importDefault(require("../plugins/tracking-mark"));
 const rules_1 = __importDefault(require("../rules"));
 exports.default = (props) => {
     const plugins = props.plugins || [];
-    return [
+    const allPlugins = [
         rules_1.default,
         ...keys_1.default,
         (0, prosemirror_dropcursor_1.dropCursor)(),
@@ -65,6 +66,10 @@ exports.default = (props) => {
         (0, tracking_mark_1.default)(),
         (0, footnotes_1.default)(),
     ];
+    if (props.collabProvider) {
+        allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));
+    }
+    return allPlugins;
 };
 document.execCommand('enableObjectResizing', false, 'false');
 document.execCommand('enableInlineTableEditing', false, 'false');

package/dist/cjs/index.js

@@ -32,7 +32,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManuscriptsEditor = exports.useEditor = exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.toolbar = exports.PopperManager = exports.getMenus = exports.ManuscriptToolbar = exports.OutlineManuscript = exports.OutlineItemIcon = exports.ManuscriptOutline = exports.DialogNames = exports.DialogController = void 0;
+exports.ManuscriptsEditor = exports.useEditor = exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.toolbar = exports.PopperManager = exports.CollabProvider = exports.getMenus = exports.ManuscriptToolbar = exports.OutlineManuscript = exports.OutlineItemIcon = exports.ManuscriptOutline = exports.DialogNames = exports.DialogController = void 0;
 __exportStar(require("./citation-sources"), exports);
 __exportStar(require("./commands"), exports);
 __exportStar(require("./components/application-menu"), exports);
@@ -49,6 +49,8 @@ var ManuscriptToolbar_1 = require("./components/toolbar/ManuscriptToolbar");
 Object.defineProperty(exports, "ManuscriptToolbar", { enumerable: true, get: function () { return ManuscriptToolbar_1.ManuscriptToolbar; } });
 var menus_1 = require("./menus");
 Object.defineProperty(exports, "getMenus", { enumerable: true, get: function () { return __importDefault(menus_1).default; } });
+var collabProvider_1 = require("./classes/collabProvider");
+Object.defineProperty(exports, "CollabProvider", { enumerable: true, get: function () { return collabProvider_1.CollabProvider; } });
 var popper_1 = require("./lib/popper");
 Object.defineProperty(exports, "PopperManager", { enumerable: true, get: function () { return popper_1.PopperManager; } });
 var toolbar_1 = require("./toolbar");

package/dist/cjs/lib/use-do-with-debounce.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDoWithDebounce = void 0;
+const react_1 = require("react");
+const useDoWithDebounce = () => {
+    const debounced = (0, react_1.useRef)(() => undefined);
+    const timeout = (0, react_1.useRef)();
+    const doWithDebounce = (fn, interval = 1000, flush = false) => {
+        debounced.current = fn;
+        if (flush) {
+            fn();
+            debounced.current = () => undefined;
+            window.clearTimeout(timeout.current);
+        }
+        window.clearTimeout(timeout.current);
+        timeout.current = window.setTimeout(() => {
+            debounced.current();
+            timeout.current = 0;
+        }, interval);
+    };
+    return doWithDebounce;
+};
+exports.useDoWithDebounce = useDoWithDebounce;

package/dist/cjs/plugins/highlight/index.js

@@ -54,7 +54,6 @@ const buildPluginState = (doc) => {
     const decorations = prosemirror_view_1.DecorationSet.create(doc, highlights.map((h) => prosemirror_view_1.Decoration.inline(h.start, h.end, {
         nodeName: 'span',
         class: 'highlight',
-        style: `background: rgba(250, 224, 150, 0.6)`,
     })));
     return { highlights, decorations };
 };

package/dist/cjs/useEditor.js

@@ -14,23 +14,62 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const prosemirror_collab_1 = require("prosemirror-collab");
 const prosemirror_state_1 = require("prosemirror-state");
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
+const use_do_with_debounce_1 = require("./lib/use-do-with-debounce");
 const bibliography_1 = require("./plugins/bibliography");
-const useEditor = (initialState, createView) => {
+const useEditor = (initialState, createView, editorProps) => {
     const view = (0, react_1.useRef)();
     const [state, setState] = (0, react_1.useState)(initialState);
     const [viewElement, setViewElement] = (0, react_1.useState)(null);
     const history = (0, react_router_dom_1.useHistory)();
+    const { collabProvider } = editorProps;
+    if (collabProvider) {
+        collabProvider.onNewSteps((newVersion, steps, clientIDs) => __awaiter(void 0, void 0, void 0, function* () {
+            if (state && view.current) {
+                const localVersion = (0, prosemirror_collab_1.getVersion)(view.current.state);
+                const since = yield collabProvider.stepsSince(localVersion);
+                if ((since === null || since === void 0 ? void 0 : since.steps) && since.clientIDs) {
+                    view.current.dispatch((0, prosemirror_collab_1.receiveTransaction)(view.current.state, since === null || since === void 0 ? void 0 : since.steps, since.clientIDs));
+                }
+                else {
+                    console.warn('Inconsistent new steps event from the authority.');
+                }
+            }
+        }));
+    }
+    const debounce = (0, use_do_with_debounce_1.useDoWithDebounce)();
     const dispatch = (0, react_1.useCallback)((tr) => {
         if (!view.current) {
             return state;
         }
         const nextState = view.current.state.apply(tr);
         view.current.updateState(nextState);
-        setState(nextState);
+        const trackState = track_changes_plugin_1.trackChangesPluginKey.getState(view.current.state);
+        if (collabProvider &&
+            trackState &&
+            trackState.status !== track_changes_plugin_1.TrackChangesStatus.viewSnapshots) {
+            const sendable = (0, prosemirror_collab_1.sendableSteps)(nextState);
+            if (sendable) {
+                collabProvider.sendSteps(sendable.version, sendable.steps, sendable.clientID, !tr.isGeneric);
+            }
+        }
+        debounce(() => {
+            setState(nextState);
+        }, 200, !tr.isGeneric);
         return state;
     }, []);
     const replaceView = (state, createView) => {

package/dist/es/classes/collabProvider.js

@@ -0,0 +1,17 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export class CollabProvider {
+}

package/dist/es/configs/editor-plugins.js

@@ -15,6 +15,7 @@
  */
 import 'prosemirror-gapcursor/style/gapcursor.css';
 import 'prosemirror-tables/style/tables.css';
+import { collab } from 'prosemirror-collab';
 import { dropCursor } from 'prosemirror-dropcursor';
 import { history } from 'prosemirror-history';
 import { tableEditing } from 'prosemirror-tables';
@@ -37,7 +38,7 @@ import tracking_mark from '../plugins/tracking-mark';
 import rules from '../rules';
 export default (props) => {
     const plugins = props.plugins || [];
-    return [
+    const allPlugins = [
         rules,
         ...keys,
         dropCursor(),
@@ -60,6 +61,10 @@ export default (props) => {
         tracking_mark(),
         footnotes(),
     ];
+    if (props.collabProvider) {
+        allPlugins.push(collab({ version: props.collabProvider.currentVersion }));
+    }
+    return allPlugins;
 };
 document.execCommand('enableObjectResizing', false, 'false');
 document.execCommand('enableInlineTableEditing', false, 'false');

package/dist/es/index.js

@@ -22,6 +22,7 @@ export { OutlineItemIcon } from './components/outline/Outline';
 export { OutlineManuscript } from './components/outline/OutlineManuscript';
 export { ManuscriptToolbar, } from './components/toolbar/ManuscriptToolbar';
 export { default as getMenus } from './menus';
+export { CollabProvider } from './classes/collabProvider';
 export { PopperManager } from './lib/popper';
 export { toolbar } from './toolbar';
 export * from './plugins/highlight';

package/dist/es/lib/use-do-with-debounce.js

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+export const useDoWithDebounce = () => {
+    const debounced = useRef(() => undefined);
+    const timeout = useRef();
+    const doWithDebounce = (fn, interval = 1000, flush = false) => {
+        debounced.current = fn;
+        if (flush) {
+            fn();
+            debounced.current = () => undefined;
+            window.clearTimeout(timeout.current);
+        }
+        window.clearTimeout(timeout.current);
+        timeout.current = window.setTimeout(() => {
+            debounced.current();
+            timeout.current = 0;
+        }, interval);
+    };
+    return doWithDebounce;
+};

package/dist/es/plugins/highlight/index.js

@@ -48,7 +48,6 @@ const buildPluginState = (doc) => {
     const decorations = DecorationSet.create(doc, highlights.map((h) => Decoration.inline(h.start, h.end, {
         nodeName: 'span',
         class: 'highlight',
-        style: `background: rgba(250, 224, 150, 0.6)`,
     })));
     return { highlights, decorations };
 };

package/dist/es/useEditor.js

@@ -13,22 +13,61 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { trackChangesPluginKey, TrackChangesStatus, } from '@manuscripts/track-changes-plugin';
+import { getVersion, receiveTransaction, sendableSteps, } from 'prosemirror-collab';
 import { NodeSelection, } from 'prosemirror-state';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useDoWithDebounce } from './lib/use-do-with-debounce';
 import { bibliographyKey } from './plugins/bibliography';
-const useEditor = (initialState, createView) => {
+const useEditor = (initialState, createView, editorProps) => {
     const view = useRef();
     const [state, setState] = useState(initialState);
     const [viewElement, setViewElement] = useState(null);
     const history = useHistory();
+    const { collabProvider } = editorProps;
+    if (collabProvider) {
+        collabProvider.onNewSteps((newVersion, steps, clientIDs) => __awaiter(void 0, void 0, void 0, function* () {
+            if (state && view.current) {
+                const localVersion = getVersion(view.current.state);
+                const since = yield collabProvider.stepsSince(localVersion);
+                if ((since === null || since === void 0 ? void 0 : since.steps) && since.clientIDs) {
+                    view.current.dispatch(receiveTransaction(view.current.state, since === null || since === void 0 ? void 0 : since.steps, since.clientIDs));
+                }
+                else {
+                    console.warn('Inconsistent new steps event from the authority.');
+                }
+            }
+        }));
+    }
+    const debounce = useDoWithDebounce();
     const dispatch = useCallback((tr) => {
         if (!view.current) {
             return state;
         }
         const nextState = view.current.state.apply(tr);
         view.current.updateState(nextState);
-        setState(nextState);
+        const trackState = trackChangesPluginKey.getState(view.current.state);
+        if (collabProvider &&
+            trackState &&
+            trackState.status !== TrackChangesStatus.viewSnapshots) {
+            const sendable = sendableSteps(nextState);
+            if (sendable) {
+                collabProvider.sendSteps(sendable.version, sendable.steps, sendable.clientID, !tr.isGeneric);
+            }
+        }
+        debounce(() => {
+            setState(nextState);
+        }, 200, !tr.isGeneric);
         return state;
     }, []);
     const replaceView = (state, createView) => {

package/dist/types/classes/collabProvider.d.ts

@@ -0,0 +1,27 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Step } from 'prosemirror-transform';
+export declare abstract class CollabProvider {
+    currentVersion: number;
+    protected newStepsListener: (version: number, steps: Step[], clientIDs: number[]) => void;
+    abstract sendSteps(version: number, steps: readonly Step[], clientID: string | number, flush?: boolean): Promise<void>;
+    abstract onNewSteps(listener: CollabProvider['newStepsListener']): void;
+    abstract stepsSince(version: number): Promise<{
+        steps: Step[];
+        clientIDs: number[];
+        version: number;
+    } | undefined>;
+}

package/dist/types/configs/ManuscriptsEditor.d.ts

@@ -21,6 +21,7 @@ import { History } from 'history';
 import { EditorState, Plugin } from 'prosemirror-state';
 import React from 'react';
 import { DefaultTheme } from 'styled-components';
+import { CollabProvider } from '../classes/collabProvider';
 import { PopperManager } from '../lib/popper';
 import { CreateView } from '../useEditor';
 export type CSLProps = {
@@ -55,6 +56,7 @@ export interface EditorProps {
     setEditorSelectedSuggestion: (id?: string) => void;
     retrySync: (componentIDs: string[]) => Promise<void>;
     environment?: string;
+    collabProvider?: CollabProvider;
 }
 declare const _default: {
     createState: (props: EditorProps) => EditorState;

package/dist/types/configs/editor-plugins.d.ts

@@ -19,6 +19,7 @@ import { CommentAnnotation, Manuscript, Model } from '@manuscripts/json-schema';
 import { Capabilities } from '@manuscripts/style-guide';
 import { Build, ManuscriptSchema } from '@manuscripts/transform';
 import { Plugin } from 'prosemirror-state';
+import { CollabProvider } from '../classes/collabProvider';
 import { PopperManager } from '../lib/popper';
 import { CSLProps } from './ManuscriptsEditor';
 interface PluginProps {
@@ -33,6 +34,7 @@ interface PluginProps {
     plugins?: Plugin<ManuscriptSchema>[];
     cslProps: CSLProps;
     popper: PopperManager;
+    collabProvider?: CollabProvider;
 }
 declare const _default: (props: PluginProps) => any[];
 export default _default;

package/dist/types/index.d.ts

@@ -23,6 +23,7 @@ export { OutlineManuscript } from './components/outline/OutlineManuscript';
 export { ManuscriptToolbar, ToolbarButtonConfig, } from './components/toolbar/ManuscriptToolbar';
 export { default as getMenus } from './menus';
 export { ChangeReceiver } from './types';
+export { CollabProvider } from './classes/collabProvider';
 export { PopperManager } from './lib/popper';
 export { toolbar } from './toolbar';
 export * from './plugins/highlight';

package/dist/types/lib/use-do-with-debounce.d.ts

@@ -0,0 +1 @@
+export declare const useDoWithDebounce: () => (fn: () => void, interval?: number, flush?: boolean) => void;

package/dist/types/useEditor.d.ts

@@ -15,8 +15,9 @@
  */
 import { Command, EditorState, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { EditorProps } from './configs/ManuscriptsEditor';
 export type CreateView = (element: HTMLDivElement, state: EditorState, dispatch: (tr: Transaction) => EditorState) => EditorView;
-declare const useEditor: (initialState: EditorState, createView: CreateView) => {
+declare const useEditor: (initialState: EditorState, createView: CreateView, editorProps: EditorProps) => {
     state: EditorState;
     onRender: (el: HTMLDivElement | null) => void;
     isCommandValid: (command: Command) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.6.2",
+  "version": "1.6.3-LEAN-3156",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -20,6 +20,7 @@
     "lint:fix": "eslint src --fix --ext .ts,.tsx --max-warnings=0",
     "prebuild": "rimraf dist",
     "prettier": "prettier --write 'src/**/*.{ts,tsx}'",
+    "prepare": "husky install",
     "preversion": "concurrently 'yarn:typecheck' 'yarn:lint' 'yarn:test'",
     "test": "jest --runInBand",
     "typecheck": "tsc --noEmit",
@@ -43,6 +44,7 @@
     "lodash-es": "^4.17.21",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.0.0",
+    "prosemirror-collab": "^1.3.1",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-dropcursor": "^1.6.1",
     "prosemirror-history": "^1.3.0",
@@ -69,8 +71,8 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@manuscripts/eslint-config": "^0.5.1",
     "@inline-svg-unique-id/react": "^1.2.3",
+    "@manuscripts/eslint-config": "^0.5.1",
     "@types/codemirror": "^5.60.5",
     "@types/dompurify": "^2.4.0",
     "@types/enzyme": "^3.10.12",

package/styles/AdvancedEditor.css

@@ -643,11 +643,7 @@ Next levels are shifted 'up' by 1
   align-items: center;
 }
 
-.ProseMirror .inserted.accepted,
-.ProseMirror .set_attrs.accepted {
-  background: #bffca7;
-  text-decoration: none;
-}
+
 .attrs-popper-button-active,
 .attrs-track-mark:hover .attrs-popper-button {
   display: inline-flex;
@@ -682,28 +678,58 @@ Next levels are shifted 'up' by 1
   right: 0;
 }
 
+.ProseMirror {
+  --pending-bg-color: #e6f7fc;
+  --accepted-bg-color: #d1edaf ;
+  --deleted-color: #f35143;
+  --highlight-bg-color: #ffeebf;
+  --selection-bg-color: #bce7f6;
+}
+
+.ProseMirror ::selection {
+  background: var(--selection-bg-color);
+}
+
 .ProseMirror .inserted.pending {
-  background: #ddf3fa;
+  background: var(--pending-bg-color);
   text-decoration: none;
 }
-.ProseMirror .inserted.pending,
-.ProseMirror .set_attrs.pending {
+.ProseMirror .inserted.accepted {
+  background: var(--accepted-bg-color);
   text-decoration: none;
 }
 .ProseMirror .inserted.rejected {
   display: none;
 }
+
+.ProseMirror .set_attrs.pending {
+  background: var(--pending-bg-color);
+  text-decoration: none;
+}
+.ProseMirror .set_attrs.accepted {
+  background: var(--accepted-bg-color);
+  text-decoration: none;
+}
+
+.ProseMirror .deleted.pending {
+  background: var(--pending-bg-color);
+  color: var(--deleted-color);
+  text-decoration: line-through;
+}
 .ProseMirror .deleted.accepted {
-  background: #bffca7;
+  background: var(--accepted-bg-color);
+  color: var(--deleted-color);
+  text-decoration: line-through;
 }
 .ProseMirror .deleted.rejected {
   text-decoration: none;
 }
-.ProseMirror .inserted.pending,
-.ProseMirror .set_attrs.pending,
-.ProseMirror .deleted.pending {
-  background: #ddf3fa;
+
+
+.ProseMirror span.highlight {
+  background-color: var(--highlight-bg-color);
 }
+
 .ProseMirror figure[data-track-status='rejected'][data-track-op='insert'],
 .ProseMirror table[data-track-status='rejected'][data-track-op='insert'],
 .ProseMirror