@manuscripts/body-editor 1.6.5 → 1.6.6-LEAN-3209

package/dist/cjs/components/keywords/DeleteKeywordDialog.js

@@ -0,0 +1,46 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteKeywordDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const DeleteKeywordDialog = ({ keyword, handleDelete, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, actions: {
+            primary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+            secondary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+        }, category: style_guide_1.Category.confirmation, header: 'Delete Keyword', message: `Are you sure you want to delete "${keyword}" keyword?
+      ` }));
+};
+exports.DeleteKeywordDialog = DeleteKeywordDialog;

package/dist/cjs/configs/ManuscriptsEditor.js

@@ -18,6 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEditorView = exports.createEditorState = void 0;
 require("prosemirror-view/style/prosemirror.css");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
@@ -25,26 +26,24 @@ const prosemirror_view_1 = require("prosemirror-view");
 const paste_1 = require("../lib/paste");
 const editor_plugins_1 = __importDefault(require("./editor-plugins"));
 const editor_views_1 = __importDefault(require("./editor-views"));
-exports.default = {
-    createState: (props) => {
-        return prosemirror_state_1.EditorState.create({
-            doc: props.doc,
-            schema: transform_1.schema,
-            plugins: (0, editor_plugins_1.default)(props),
-        });
+const createEditorState = (props) => prosemirror_state_1.EditorState.create({
+    doc: props.doc,
+    schema: transform_1.schema,
+    plugins: (0, editor_plugins_1.default)(props),
+});
+exports.createEditorState = createEditorState;
+const createEditorView = (props, root, state, dispatch) => new prosemirror_view_1.EditorView(root, {
+    state,
+    editable: () => props.getCapabilities().editArticle,
+    scrollMargin: {
+        top: 100,
+        bottom: 100,
+        left: 0,
+        right: 0,
     },
-    createView: (props) => (el, state, dispatch) => new prosemirror_view_1.EditorView(el, {
-        state,
-        editable: () => props.getCapabilities().editArticle,
-        scrollMargin: {
-            top: 100,
-            bottom: 100,
-            left: 0,
-            right: 0,
-        },
-        dispatchTransaction: dispatch,
-        nodeViews: (0, editor_views_1.default)(props, dispatch),
-        attributes: props.attributes,
-        transformPasted: paste_1.transformPasted,
-    }),
-};
+    dispatchTransaction: dispatch,
+    nodeViews: (0, editor_views_1.default)(props, dispatch),
+    attributes: props.attributes,
+    transformPasted: paste_1.transformPasted,
+});
+exports.createEditorView = createEditorView;

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

@@ -30,7 +30,6 @@ const comment_annotation_1 = __importDefault(require("../plugins/comment_annotat
 const elements_1 = __importDefault(require("../plugins/elements"));
 const footnotes_1 = __importDefault(require("../plugins/footnotes"));
 const highlight_1 = __importDefault(require("../plugins/highlight"));
-const keywords_1 = __importDefault(require("../plugins/keywords"));
 const objects_1 = __importDefault(require("../plugins/objects"));
 const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
@@ -54,7 +53,6 @@ exports.default = (props) => {
         (0, persist_1.default)(),
         (0, sections_1.default)(),
         (0, toc_1.default)(props),
-        (0, keywords_1.default)(props),
         (0, bibliography_1.default)(props),
         (0, objects_1.default)(props),
         (0, comment_annotation_1.default)(props),

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

@@ -65,7 +65,7 @@ exports.default = (props, dispatch) => {
         footnotes_element: (0, footnotes_element_1.default)(props),
         inline_equation: (0, inline_equation_editable_1.default)(props),
         inline_footnote: (0, inline_footnote_editable_1.default)(props),
-        keyword: (0, keyword_1.default)(props),
+        keyword: (0, keyword_1.default)(props, dispatch),
         keywords_element: (0, keywords_element_1.default)(props, dispatch),
         link: (0, link_editable_1.default)(props),
         listing: (0, listing_editable_1.default)(props),

package/dist/cjs/index.js

@@ -28,11 +28,8 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-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.CollabProvider = exports.getMenus = exports.ManuscriptToolbar = exports.OutlineManuscript = exports.OutlineItemIcon = exports.ManuscriptOutline = exports.DialogNames = exports.DialogController = void 0;
+exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.toolbar = exports.PopperManager = exports.CollabProvider = 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);
@@ -47,8 +44,7 @@ var OutlineManuscript_1 = require("./components/outline/OutlineManuscript");
 Object.defineProperty(exports, "OutlineManuscript", { enumerable: true, get: function () { return OutlineManuscript_1.OutlineManuscript; } });
 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; } });
+__exportStar(require("./menus"), exports);
 var collabProvider_1 = require("./classes/collabProvider");
 Object.defineProperty(exports, "CollabProvider", { enumerable: true, get: function () { return collabProvider_1.CollabProvider; } });
 var popper_1 = require("./lib/popper");
@@ -60,9 +56,5 @@ var comment_annotation_1 = require("./plugins/comment_annotation");
 Object.defineProperty(exports, "commentScroll", { enumerable: true, get: function () { return comment_annotation_1.commentScroll; } });
 Object.defineProperty(exports, "isThereSelector", { enumerable: true, get: function () { return comment_annotation_1.isThereSelector; } });
 Object.defineProperty(exports, "isHighlightComment", { enumerable: true, get: function () { return comment_annotation_1.isHighlightComment; } });
-__exportStar(require("./plugins/keywords"), exports);
 __exportStar(require("./lib/utils"), exports);
-var useEditor_1 = require("./useEditor");
-Object.defineProperty(exports, "useEditor", { enumerable: true, get: function () { return __importDefault(useEditor_1).default; } });
-var ManuscriptsEditor_1 = require("./configs//ManuscriptsEditor");
-Object.defineProperty(exports, "ManuscriptsEditor", { enumerable: true, get: function () { return __importDefault(ManuscriptsEditor_1).default; } });
+__exportStar(require("./useEditor"), exports);

package/dist/cjs/menus.js

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMenus = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_commands_1 = require("prosemirror-commands");
 const prosemirror_history_1 = require("prosemirror-history");
@@ -24,7 +25,7 @@ const commands_1 = require("./commands");
 const dialog_1 = require("./components/dialog");
 const list_1 = require("./keys/list");
 const hierarchy_1 = require("./lib/hierarchy");
-exports.default = (editor, handleOpenDialog, footnotesEnabled, contentEditable) => {
+const getMenus = (editor, handleOpenDialog, footnotesEnabled, contentEditable) => {
     const { isCommandValid, state } = editor;
     const wrap = (command) => () => editor.doCommand(command);
     let menus = [
@@ -438,3 +439,4 @@ exports.default = (editor, handleOpenDialog, footnotesEnabled, contentEditable)
         return menuGroup;
     });
 };
+exports.getMenus = getMenus;

package/dist/cjs/useEditor.js

@@ -24,19 +24,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditor = void 0;
 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 ManuscriptsEditor_1 = require("./configs/ManuscriptsEditor");
 const use_do_with_debounce_1 = require("./lib/use-do-with-debounce");
-const bibliography_1 = require("./plugins/bibliography");
-const useEditor = (initialState, createView, editorProps) => {
+const useEditor = (props) => {
     const view = (0, react_1.useRef)();
-    const [state, setState] = (0, react_1.useState)(initialState);
-    const [viewElement, setViewElement] = (0, react_1.useState)(null);
+    const [state, setState] = (0, react_1.useState)(() => (0, ManuscriptsEditor_1.createEditorState)(props));
     const history = (0, react_router_dom_1.useHistory)();
-    const { collabProvider } = editorProps;
+    const { collabProvider } = props;
     if (collabProvider) {
         collabProvider.onNewSteps((newVersion, steps, clientIDs) => __awaiter(void 0, void 0, void 0, function* () {
             if (state && view.current) {
@@ -70,26 +70,15 @@ const useEditor = (initialState, createView, editorProps) => {
         debounce(() => {
             setState(nextState);
         }, 200, !tr.isGeneric);
-        return state;
+        return nextState;
     }, []);
-    const replaceView = (state, createView) => {
-        if (viewElement && view.current) {
-            view.current.destroy();
-            view.current = createView(viewElement, state, dispatch);
-            setState(view.current.state);
-        }
-    };
     const onRender = (0, react_1.useCallback)((el) => {
         var _a;
         if (!el) {
             return;
         }
-        view.current = createView(el, ((_a = view.current) === null || _a === void 0 ? void 0 : _a.state) || state, dispatch);
+        view.current = (0, ManuscriptsEditor_1.createEditorView)(props, el, ((_a = view.current) === null || _a === void 0 ? void 0 : _a.state) || state, dispatch);
         setState(view.current.state);
-        setViewElement(el);
-        view.current.dispatch(view.current.state.tr.setMeta(bibliography_1.bibliographyKey, {
-            initCitations: true,
-        }));
     }, []);
     const isCommandValid = (0, react_1.useCallback)((command) => command(state), [state]);
     const doCommand = (0, react_1.useCallback)((command) => command(state, dispatch, view.current), [state, dispatch]);
@@ -138,9 +127,8 @@ const useEditor = (initialState, createView, editorProps) => {
         isCommandValid,
         doCommand,
         replaceState,
-        replaceView,
         view: view.current,
         dispatch,
     };
 };
-exports.default = useEditor;
+exports.useEditor = useEditor;

package/dist/cjs/views/keyword.js

@@ -14,15 +14,65 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeywordView = void 0;
+const DeleteKeywordDialog_1 = require("../components/keywords/DeleteKeywordDialog");
+const track_changes_utils_1 = require("../lib/track-changes-utils");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+const icon = '<svg width="8px" height="8px" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">\n' +
+    '    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n' +
+    '        <g fill="#6E6E6E">\n' +
+    '            <rect id="Rectangle-23-Copy" transform="translate(13.000000, 13.000000) rotate(-45.000000) translate(-13.000000, -13.000000) " x="-3" y="11" width="32" height="4" rx="2"></rect>\n' +
+    '            <rect id="Rectangle-23-Copy-2" transform="translate(13.000000, 13.000000) scale(1, -1) rotate(-45.000000) translate(-13.000000, -13.000000) " x="-3" y="11" width="32" height="4" rx="2"></rect>\n' +
+    '        </g>\n' +
+    '    </g>\n' +
+    '</svg>';
 class KeywordView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
-        this.stopEvent = () => true;
-        this.ignoreMutation = () => true;
+        this.initialise = () => {
+            this.createDOM();
+            this.updateContents();
+        };
+        this.createDOM = () => {
+            this.dom = document.createElement('span');
+            this.contentDOM = document.createElement('span');
+        };
+        this.updateContents = () => {
+            const keyword = document.createElement('span');
+            const classes = ['keyword', ...(0, track_changes_utils_1.getChangeClasses)(this.node)];
+            keyword.classList.add(...classes);
+            keyword.appendChild(this.contentDOM);
+            const can = this.props.getCapabilities();
+            if (can.editArticle) {
+                const svg = new DOMParser()
+                    .parseFromString(icon, 'image/svg+xml')
+                    .querySelector('svg');
+                svg.classList.add('delete-keyword');
+                svg.addEventListener('click', this.showConfirmationDialog);
+                keyword.appendChild(svg);
+            }
+            this.dom.innerHTML = '';
+            this.dom.appendChild(keyword);
+        };
+        this.showConfirmationDialog = () => {
+            var _a;
+            (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+            const keyword = this.node;
+            const componentProps = {
+                keyword: keyword.textContent,
+                handleDelete: () => this.deleteNode(keyword.attrs.id),
+            };
+            this.dialog = (0, ReactSubView_1.default)(this.props, DeleteKeywordDialog_1.DeleteKeywordDialog, componentProps, this.node, this.getPos, this.view, 'keywords-delete');
+            if (this.dialog) {
+                this.dom.appendChild(this.dialog);
+            }
+        };
     }
 }
 exports.KeywordView = KeywordView;

package/dist/cjs/views/keywords_element.js

@@ -20,7 +20,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeywordsElementView = void 0;
 const AddKeywordInline_1 = require("../components/keywords/AddKeywordInline");
-const DeleteKeyword_1 = require("../components/keywords/DeleteKeyword");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
@@ -42,10 +41,6 @@ class KeywordsElementView extends block_view_1.default {
             if (this.addingTools && this.props.getCapabilities().editArticle) {
                 this.element.appendChild(this.addingTools);
             }
-            this.deleteTools = (0, ReactSubView_1.default)(this.props, DeleteKeyword_1.DeleteKeyword, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-delete');
-            if (this.deleteTools) {
-                this.element.appendChild(this.deleteTools);
-            }
         };
     }
 }

package/dist/es/components/keywords/DeleteKeywordDialog.js

@@ -0,0 +1,19 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+export const DeleteKeywordDialog = ({ keyword, handleDelete, }) => {
+    const [isOpen, setOpen] = useState(true);
+    return (React.createElement(Dialog, { isOpen: isOpen, actions: {
+            primary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+            secondary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+        }, category: Category.confirmation, header: 'Delete Keyword', message: `Are you sure you want to delete "${keyword}" keyword?
+      ` }));
+};

package/dist/es/configs/ManuscriptsEditor.js

@@ -20,26 +20,22 @@ import { EditorView } from 'prosemirror-view';
 import { transformPasted } from '../lib/paste';
 import plugins from './editor-plugins';
 import views from './editor-views';
-export default {
-    createState: (props) => {
-        return EditorState.create({
-            doc: props.doc,
-            schema,
-            plugins: plugins(props),
-        });
+export const createEditorState = (props) => EditorState.create({
+    doc: props.doc,
+    schema,
+    plugins: plugins(props),
+});
+export const createEditorView = (props, root, state, dispatch) => new EditorView(root, {
+    state,
+    editable: () => props.getCapabilities().editArticle,
+    scrollMargin: {
+        top: 100,
+        bottom: 100,
+        left: 0,
+        right: 0,
     },
-    createView: (props) => (el, state, dispatch) => new EditorView(el, {
-        state,
-        editable: () => props.getCapabilities().editArticle,
-        scrollMargin: {
-            top: 100,
-            bottom: 100,
-            left: 0,
-            right: 0,
-        },
-        dispatchTransaction: dispatch,
-        nodeViews: views(props, dispatch),
-        attributes: props.attributes,
-        transformPasted,
-    }),
-};
+    dispatchTransaction: dispatch,
+    nodeViews: views(props, dispatch),
+    attributes: props.attributes,
+    transformPasted,
+});

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

@@ -25,7 +25,6 @@ import comment_annotation from '../plugins/comment_annotation';
 import elements from '../plugins/elements';
 import footnotes from '../plugins/footnotes';
 import highlights from '../plugins/highlight';
-import keywords from '../plugins/keywords';
 import objects from '../plugins/objects';
 import paragraphs from '../plugins/paragraphs';
 import persist from '../plugins/persist';
@@ -49,7 +48,6 @@ export default (props) => {
         persist(),
         sections(),
         toc(props),
-        keywords(props),
         bibliography(props),
         objects(props),
         comment_annotation(props),

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

@@ -60,7 +60,7 @@ export default (props, dispatch) => {
         footnotes_element: footnotesElement(props),
         inline_equation: inlineEquation(props),
         inline_footnote: inlineFootnote(props),
-        keyword: keyword(props),
+        keyword: keyword(props, dispatch),
         keywords_element: keywordsElement(props, dispatch),
         link: link(props),
         listing: listing(props),

package/dist/es/index.js

@@ -21,13 +21,11 @@ export { ManuscriptOutline } from './components/outline/ManuscriptOutline';
 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 * from './menus';
 export { CollabProvider } from './classes/collabProvider';
 export { PopperManager } from './lib/popper';
 export { toolbar } from './toolbar';
 export * from './plugins/highlight';
 export { commentScroll, isThereSelector, isHighlightComment, } from './plugins/comment_annotation';
-export * from './plugins/keywords';
 export * from './lib/utils';
-export { default as useEditor } from './useEditor';
-export { default as ManuscriptsEditor } from './configs//ManuscriptsEditor';
+export * from './useEditor';

package/dist/es/menus.js

@@ -22,7 +22,7 @@ import { addComment, blockActive, canInsert, ifInTableBody, insertBibliographySe
 import { DialogNames } from './components/dialog';
 import { skipTrackingChanges } from './keys/list';
 import { deleteClosestParentElement, findClosestParentElementNodeName, } from './lib/hierarchy';
-export default (editor, handleOpenDialog, footnotesEnabled, contentEditable) => {
+export const getMenus = (editor, handleOpenDialog, footnotesEnabled, contentEditable) => {
     const { isCommandValid, state } = editor;
     const wrap = (command) => () => editor.doCommand(command);
     let menus = [

package/dist/es/useEditor.js

@@ -27,14 +27,13 @@ import { getVersion, receiveTransaction, sendableSteps, } from 'prosemirror-coll
 import { NodeSelection, } from 'prosemirror-state';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { createEditorState, createEditorView, } from './configs/ManuscriptsEditor';
 import { useDoWithDebounce } from './lib/use-do-with-debounce';
-import { bibliographyKey } from './plugins/bibliography';
-const useEditor = (initialState, createView, editorProps) => {
+export const useEditor = (props) => {
     const view = useRef();
-    const [state, setState] = useState(initialState);
-    const [viewElement, setViewElement] = useState(null);
+    const [state, setState] = useState(() => createEditorState(props));
     const history = useHistory();
-    const { collabProvider } = editorProps;
+    const { collabProvider } = props;
     if (collabProvider) {
         collabProvider.onNewSteps((newVersion, steps, clientIDs) => __awaiter(void 0, void 0, void 0, function* () {
             if (state && view.current) {
@@ -68,26 +67,15 @@ const useEditor = (initialState, createView, editorProps) => {
         debounce(() => {
             setState(nextState);
         }, 200, !tr.isGeneric);
-        return state;
+        return nextState;
     }, []);
-    const replaceView = (state, createView) => {
-        if (viewElement && view.current) {
-            view.current.destroy();
-            view.current = createView(viewElement, state, dispatch);
-            setState(view.current.state);
-        }
-    };
     const onRender = useCallback((el) => {
         var _a;
         if (!el) {
             return;
         }
-        view.current = createView(el, ((_a = view.current) === null || _a === void 0 ? void 0 : _a.state) || state, dispatch);
+        view.current = createEditorView(props, el, ((_a = view.current) === null || _a === void 0 ? void 0 : _a.state) || state, dispatch);
         setState(view.current.state);
-        setViewElement(el);
-        view.current.dispatch(view.current.state.tr.setMeta(bibliographyKey, {
-            initCitations: true,
-        }));
     }, []);
     const isCommandValid = useCallback((command) => command(state), [state]);
     const doCommand = useCallback((command) => command(state, dispatch, view.current), [state, dispatch]);
@@ -136,9 +124,7 @@ const useEditor = (initialState, createView, editorProps) => {
         isCommandValid,
         doCommand,
         replaceState,
-        replaceView,
         view: view.current,
         dispatch,
     };
 };
-export default useEditor;

package/dist/es/views/keyword.js

@@ -13,13 +13,60 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { DeleteKeywordDialog, } from '../components/keywords/DeleteKeywordDialog';
+import { getChangeClasses } from '../lib/track-changes-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
+const icon = '<svg width="8px" height="8px" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">\n' +
+    '    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n' +
+    '        <g fill="#6E6E6E">\n' +
+    '            <rect id="Rectangle-23-Copy" transform="translate(13.000000, 13.000000) rotate(-45.000000) translate(-13.000000, -13.000000) " x="-3" y="11" width="32" height="4" rx="2"></rect>\n' +
+    '            <rect id="Rectangle-23-Copy-2" transform="translate(13.000000, 13.000000) scale(1, -1) rotate(-45.000000) translate(-13.000000, -13.000000) " x="-3" y="11" width="32" height="4" rx="2"></rect>\n' +
+    '        </g>\n' +
+    '    </g>\n' +
+    '</svg>';
 export class KeywordView extends BaseNodeView {
     constructor() {
         super(...arguments);
-        this.stopEvent = () => true;
-        this.ignoreMutation = () => true;
+        this.initialise = () => {
+            this.createDOM();
+            this.updateContents();
+        };
+        this.createDOM = () => {
+            this.dom = document.createElement('span');
+            this.contentDOM = document.createElement('span');
+        };
+        this.updateContents = () => {
+            const keyword = document.createElement('span');
+            const classes = ['keyword', ...getChangeClasses(this.node)];
+            keyword.classList.add(...classes);
+            keyword.appendChild(this.contentDOM);
+            const can = this.props.getCapabilities();
+            if (can.editArticle) {
+                const svg = new DOMParser()
+                    .parseFromString(icon, 'image/svg+xml')
+                    .querySelector('svg');
+                svg.classList.add('delete-keyword');
+                svg.addEventListener('click', this.showConfirmationDialog);
+                keyword.appendChild(svg);
+            }
+            this.dom.innerHTML = '';
+            this.dom.appendChild(keyword);
+        };
+        this.showConfirmationDialog = () => {
+            var _a;
+            (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+            const keyword = this.node;
+            const componentProps = {
+                keyword: keyword.textContent,
+                handleDelete: () => this.deleteNode(keyword.attrs.id),
+            };
+            this.dialog = ReactSubView(this.props, DeleteKeywordDialog, componentProps, this.node, this.getPos, this.view, 'keywords-delete');
+            if (this.dialog) {
+                this.dom.appendChild(this.dialog);
+            }
+        };
     }
 }
 export default createNodeView(KeywordView);

package/dist/es/views/keywords_element.js

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { AddKeywordInline } from '../components/keywords/AddKeywordInline';
-import { DeleteKeyword } from '../components/keywords/DeleteKeyword';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
@@ -36,10 +35,6 @@ export class KeywordsElementView extends BlockView {
             if (this.addingTools && this.props.getCapabilities().editArticle) {
                 this.element.appendChild(this.addingTools);
             }
-            this.deleteTools = ReactSubView(this.props, DeleteKeyword, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-delete');
-            if (this.deleteTools) {
-                this.element.appendChild(this.deleteTools);
-            }
         };
     }
 }

package/dist/types/components/keywords/DeleteKeywordDialog.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface DeleteKeywordDialogProps {
+    keyword: string;
+    handleDelete: () => void;
+}
+export declare const DeleteKeywordDialog: React.FC<DeleteKeywordDialogProps>;

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

@@ -19,11 +19,12 @@ import { Capabilities, FileAttachment, FileManagement } from '@manuscripts/style
 import { Build, ManuscriptNode } from '@manuscripts/transform';
 import { History } from 'history';
 import { EditorState, Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 import React from 'react';
 import { DefaultTheme } from 'styled-components';
 import { CollabProvider } from '../classes/collabProvider';
+import { Dispatch } from '../commands';
 import { PopperManager } from '../lib/popper';
-import { CreateView } from '../useEditor';
 export type CSLProps = {
     style?: string;
     locale?: string;
@@ -58,8 +59,5 @@ export interface EditorProps {
     environment?: string;
     collabProvider?: CollabProvider;
 }
-declare const _default: {
-    createState: (props: EditorProps) => EditorState;
-    createView: (props: EditorProps) => CreateView;
-};
-export default _default;
+export declare const createEditorState: (props: EditorProps) => EditorState;
+export declare const createEditorView: (props: EditorProps, root: HTMLElement, state: EditorState, dispatch: Dispatch) => EditorView;

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

@@ -260,7 +260,7 @@ declare const _default: (props: EditorProps, dispatch: Dispatch) => {
     footnotes_element: import("../types").NodeViewCreator<import("../views/footnotes_element").FootnotesElementView<any>>;
     inline_equation: import("../types").NodeViewCreator<import("../views/inline_equation_editable").InlineEquationEditableView>;
     inline_footnote: import("../types").NodeViewCreator<import("../views/inline_footnote").InlineFootnoteView<any>>;
-    keyword: import("../types").NodeViewCreator<import("../views/keyword").KeywordView<any>>;
+    keyword: import("../types").NodeViewCreator<import("../views/keyword").KeywordView>;
     keywords_element: import("../types").NodeViewCreator<import("../views/keywords_element").KeywordsElementView>;
     link: import("../types").NodeViewCreator<import("../views/link_editable").LinkEditableView>;
     listing: import("../types").NodeViewCreator<import("../views/listing_editable").ListingEditableView>;