@manuscripts/body-editor 1.6.9 → 1.6.10

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/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

@@ -34,7 +34,7 @@ const footnotes_element_1 = __importDefault(require("../views/footnotes_element"
 const inline_equation_editable_1 = __importDefault(require("../views/inline_equation_editable"));
 const inline_footnote_editable_1 = __importDefault(require("../views/inline_footnote_editable"));
 const keyword_1 = __importDefault(require("../views/keyword"));
-const keywords_element_1 = __importDefault(require("../views/keywords_element"));
+const keyword_group_1 = __importDefault(require("../views/keyword_group"));
 const link_editable_1 = __importDefault(require("../views/link_editable"));
 const listing_editable_1 = __importDefault(require("../views/listing_editable"));
 const listing_element_editable_1 = __importDefault(require("../views/listing_element_editable"));
@@ -65,8 +65,8 @@ 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),
-        keywords_element: (0, keywords_element_1.default)(props, dispatch),
+        keyword: (0, keyword_1.default)(props, dispatch),
+        keyword_group: (0, keyword_group_1.default)(props, dispatch),
         link: (0, link_editable_1.default)(props),
         listing: (0, listing_editable_1.default)(props),
         listing_element: (0, listing_element_editable_1.default)(props),

package/dist/cjs/index.js

@@ -56,6 +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);
 __exportStar(require("./useEditor"), exports);

package/dist/cjs/views/keyword.js

@@ -14,15 +14,71 @@
  * 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 deleteIcon = '<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(deleteIcon, '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 pos = this.getPos();
+            const handleDelete = () => {
+                const tr = this.view.state.tr;
+                tr.delete(pos, pos + keyword.nodeSize);
+                this.view.dispatch(tr);
+            };
+            const componentProps = {
+                keyword: keyword.textContent,
+                handleDelete: handleDelete,
+            };
+            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 → keyword_group.js}

@@ -18,36 +18,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeywordsElementView = void 0;
+exports.KeywordGroupView = 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"));
-class KeywordsElementView extends block_view_1.default {
+class KeywordGroupView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
         this.createElement = () => {
             this.element = document.createElement('div');
-            this.element.classList.add('block');
+            this.element.classList.add('block', 'keyword-group-container');
             this.dom.appendChild(this.element);
             this.contentDOM = document.createElement('div');
-            this.contentDOM.classList.add('keywords-list');
+            this.contentDOM.classList.add('keyword-group');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.contentDOM.setAttribute('contenteditable', 'false');
             this.element.appendChild(this.contentDOM);
-            this.addingTools = (0, ReactSubView_1.default)(this.props, AddKeywordInline_1.AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-editor');
-            if (this.addingTools && this.props.getCapabilities().editArticle) {
-                this.element.appendChild(this.addingTools);
+            if (this.props.getCapabilities().editArticle) {
+                this.addingTools = (0, ReactSubView_1.default)(this.props, AddKeywordInline_1.AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-editor');
             }
-            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);
+            if (this.addingTools) {
+                this.element.appendChild(this.addingTools);
             }
         };
     }
 }
-exports.KeywordsElementView = KeywordsElementView;
-exports.default = (0, creators_1.createNodeView)(KeywordsElementView);
+exports.KeywordGroupView = KeywordGroupView;
+exports.default = (0, creators_1.createNodeView)(KeywordGroupView);

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/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

@@ -29,7 +29,7 @@ import footnotesElement from '../views/footnotes_element';
 import inlineEquation from '../views/inline_equation_editable';
 import inlineFootnote from '../views/inline_footnote_editable';
 import keyword from '../views/keyword';
-import keywordsElement from '../views/keywords_element';
+import keywordGroup from '../views/keyword_group';
 import link from '../views/link_editable';
 import listing from '../views/listing_editable';
 import listingElement from '../views/listing_element_editable';
@@ -60,8 +60,8 @@ export default (props, dispatch) => {
         footnotes_element: footnotesElement(props),
         inline_equation: inlineEquation(props),
         inline_footnote: inlineFootnote(props),
-        keyword: keyword(props),
-        keywords_element: keywordsElement(props, dispatch),
+        keyword: keyword(props, dispatch),
+        keyword_group: keywordGroup(props, dispatch),
         link: link(props),
         listing: listing(props),
         listing_element: listingElement(props),

package/dist/es/index.js

@@ -27,6 +27,5 @@ 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 * from './useEditor';

package/dist/es/views/keyword.js

@@ -13,13 +13,66 @@
  * 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 deleteIcon = '<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(deleteIcon, '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 pos = this.getPos();
+            const handleDelete = () => {
+                const tr = this.view.state.tr;
+                tr.delete(pos, pos + keyword.nodeSize);
+                this.view.dispatch(tr);
+            };
+            const componentProps = {
+                keyword: keyword.textContent,
+                handleDelete: handleDelete,
+            };
+            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 → keyword_group.js}

@@ -14,33 +14,30 @@
  * 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';
-export class KeywordsElementView extends BlockView {
+export class KeywordGroupView extends BlockView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
         this.createElement = () => {
             this.element = document.createElement('div');
-            this.element.classList.add('block');
+            this.element.classList.add('block', 'keyword-group-container');
             this.dom.appendChild(this.element);
             this.contentDOM = document.createElement('div');
-            this.contentDOM.classList.add('keywords-list');
+            this.contentDOM.classList.add('keyword-group');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.contentDOM.setAttribute('contenteditable', 'false');
             this.element.appendChild(this.contentDOM);
-            this.addingTools = ReactSubView(this.props, AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-editor');
-            if (this.addingTools && this.props.getCapabilities().editArticle) {
-                this.element.appendChild(this.addingTools);
+            if (this.props.getCapabilities().editArticle) {
+                this.addingTools = ReactSubView(this.props, AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, 'keywords-editor');
             }
-            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);
+            if (this.addingTools) {
+                this.element.appendChild(this.addingTools);
             }
         };
     }
 }
-export default createNodeView(KeywordsElementView);
+export default createNodeView(KeywordGroupView);

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/editor-views.d.ts

@@ -18,7 +18,7 @@ import { Dispatch } from '../commands';
 import { CitationViewProps } from '../views/citation';
 import { EditableBlockProps } from '../views/editable_block';
 import { FigureProps } from '../views/figure_editable';
-import { KeywordsElementProps } from '../views/keywords_element';
+import { KeywordsElementProps } from '../views/keyword_group';
 type EditorProps = EditableBlockProps & CitationViewProps & FigureProps & KeywordsElementProps & {
     theme: DefaultTheme;
 };
@@ -260,8 +260,8 @@ 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>>;
-    keywords_element: import("../types").NodeViewCreator<import("../views/keywords_element").KeywordsElementView>;
+    keyword: import("../types").NodeViewCreator<import("../views/keyword").KeywordView>;
+    keyword_group: import("../types").NodeViewCreator<import("../views/keyword_group").KeywordGroupView>;
     link: import("../types").NodeViewCreator<import("../views/link_editable").LinkEditableView>;
     listing: import("../types").NodeViewCreator<import("../views/listing_editable").ListingEditableView>;
     listing_element: import("../types").NodeViewCreator<{

package/dist/types/index.d.ts

@@ -28,6 +28,5 @@ 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 * from './useEditor';

package/dist/types/views/keyword.d.ts

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Capabilities } from '@manuscripts/style-guide';
 import { ManuscriptNodeView } from '@manuscripts/transform';
-import { BaseNodeProps, BaseNodeView } from './base_node_view';
-export interface Props extends BaseNodeProps {
-    getCapabilities: () => Capabilities;
+import { BaseNodeView } from './base_node_view';
+import { EditableBlockProps } from './editable_block';
+export declare class KeywordView extends BaseNodeView<EditableBlockProps> implements ManuscriptNodeView {
+    private dialog;
+    initialise: () => void;
+    createDOM: () => void;
+    updateContents: () => void;
+    private showConfirmationDialog;
 }
-export declare class KeywordView<PropsType extends Props> extends BaseNodeView<PropsType> implements ManuscriptNodeView {
-    stopEvent: () => boolean;
-    ignoreMutation: () => boolean;
-}
-declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<KeywordView<any>>;
+declare const _default: (props: import("./base_node_view").BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<KeywordView>;
 export default _default;

package/dist/types/views/{keywords_element.d.ts → keyword_group.d.ts}

@@ -27,13 +27,12 @@ export interface KeywordsElementProps {
     retrySync: (componentIDs: string[]) => Promise<void>;
     saveModel: <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
 }
-export declare class KeywordsElementView extends BlockView<BaseNodeProps & KeywordsElementProps> {
+export declare class KeywordGroupView extends BlockView<BaseNodeProps & KeywordsElementProps> {
     private element;
-    addingTools: HTMLDivElement;
-    deleteTools: HTMLDivElement;
+    private addingTools;
     ignoreMutation: () => boolean;
     stopEvent: () => boolean;
     createElement: () => void;
 }
-declare const _default: (props: BaseNodeProps, dispatch?: Dispatch | undefined) => import("../types").NodeViewCreator<KeywordsElementView>;
+declare const _default: (props: BaseNodeProps, dispatch?: Dispatch | undefined) => import("../types").NodeViewCreator<KeywordGroupView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/AdvancedEditor.css

@@ -545,10 +545,6 @@ Next levels are shifted 'up' by 1
   border-radius: 0 0 32px 32px;
 }
 
-.keywords {
-  margin: 0 0 36px;
-}
-
 .ProseMirror > .keywords > .block-section_title > h1 {
     color: #353535 !important;
     font-size: 12px !important;
@@ -558,76 +554,76 @@ Next levels are shifted 'up' by 1
     margin-top: 4px !important;
 }
 
-.keywords-list {
-  margin: 0;
-  display: inline;
-}
-
-.keywords-list span.keyword {
+.keywords .keyword {
   display: inline-block;
   color: #353535;
   background-color: #f2f2f2;
-  font-family: Lato, sans-serif;
+  font-family: Lato,sans-serif;
   font-size: 14px;
   line-height: 16px;
   margin-right: 4px;
   margin-bottom: 4px;
-  border: 1px solid #f2f2f2;
+  border: 1px solid transparent;
   border-radius: 6px;
   position: relative;
   cursor: default;
+  padding: 4px 8px
 }
 
-.keywords-list span.keyword.no-tracking {
-  padding: 4px 8px;
-}
-
-.keywords-list span.keyword ins,
-.keywords-list span.keyword del {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 6px;
+.keywords .keyword ins, .keywords .keyword del {
+  background-color: inherit !important
 }
 
-.keywords-list span.keyword:hover,
-.keywords-list span.keyword:hover ins,
-.keywords-list span.keyword:hover del {
-  background-color: #f2fbfc;
-  border-color: #f2fbfc;
+.keywords .keyword:hover {
+  background-color:#f2fbfc !important;
 }
 
-.keywords-list span.keyword.selected {
+.keywords .keyword.selected {
   background-color: #f2fbfc;
   border-color: #bce7f6;
 }
 
-.keywords-list .keyword.deleted.pending,
-.keywords-list .keyword.deleted.accepted {
+.keywords .keyword.deleted.pending,.keywords .keyword.deleted.accepted {
   text-decoration: line-through;
 }
-.keywords-list .keyword .track-changes--control {
+
+.keywords .keyword .track-changes--control {
   top: 0;
 }
 
-.keywords-list span.delete-keyword {
+.keywords .delete-keyword {
   cursor: pointer;
   margin: 0 0 0 8px;
   opacity: 0.5;
 }
 
-.keywords-list span.delete-keyword:hover {
+.keywords .delete-keyword:hover {
   opacity: 1;
 }
 
-.keywords-list .deleted.accepted span.delete-keyword {
+.keywords .deleted .delete-keyword {
+  display: none;
+}
+
+.keywords .deleted.rejected .delete-keyword {
+  display: inline;
+}
+
+.keywords .inserted.pending .delete-keyword {
   display: none;
 }
 
-.keywords-list > div {
+.keywords .keyword-group-container {
+  position: relative;
+  margin: 0 0 36px !important;
+
+}
+
+.keywords .keyword-group {
   display: inline;
 }
 
-.keywords-editor {
+.keywords .keywords-editor {
   position: static;
   display: inline-block;
   width: auto;
@@ -643,6 +639,15 @@ Next levels are shifted 'up' by 1
   align-items: center;
 }
 
+.keywords .block-comment-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.keywords .block-comment-button .comment-icon {
+  top: 8px;
+}
 
 .attrs-popper-button-active,
 .attrs-track-mark:hover .attrs-popper-button {

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

@@ -1,92 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeleteKeyword = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importStar(require("react"));
-const DeleteKeyword = ({ viewProps }) => {
-    const [isDeletingKeyword, setIsDeletingKeyword] = (0, react_1.useState)(false);
-    const [keywordToDelete, setKeywordToDelete] = (0, react_1.useState)('');
-    const [keywordToDeleteId, setKeywordToDeleteId] = (0, react_1.useState)('');
-    const { getPos, view, node } = viewProps;
-    const getKeywords = () => {
-        let position = 0, elementSize = 0;
-        node.descendants((node, pos) => {
-            if (node.attrs.id === keywordToDeleteId) {
-                position = pos + getPos();
-                elementSize = node.nodeSize;
-                return false;
-            }
-        });
-        return { pos: position, to: position + elementSize + 1 };
-    };
-    const handleClick = (event) => {
-        var _a, _b;
-        const clickTarget = event.target;
-        const deleteIcon = clickTarget.closest('.delete-keyword');
-        if (deleteIcon) {
-            const keywordId = ((_a = deleteIcon.closest('.keyword')) === null || _a === void 0 ? void 0 : _a.getAttribute('id')) || '';
-            const keywordContent = ((_b = deleteIcon.closest('.keyword')) === null || _b === void 0 ? void 0 : _b.textContent) || '';
-            setKeywordToDeleteId(keywordId);
-            setKeywordToDelete(keywordContent);
-            setIsDeletingKeyword(true);
-        }
-    };
-    const handleCancel = () => {
-        resetState();
-    };
-    const handleDelete = () => {
-        if (keywordToDeleteId) {
-            const { pos, to } = getKeywords();
-            if (view.dispatch) {
-                view.dispatch(view.state.tr.delete(pos, to).setMeta('keywordsUpdated', true));
-            }
-            resetState();
-        }
-    };
-    const resetState = () => {
-        setIsDeletingKeyword(false);
-        setKeywordToDeleteId('');
-    };
-    (0, react_1.useEffect)(() => {
-        document.addEventListener('mousedown', handleClick);
-        return () => {
-            document.removeEventListener('mousedown', handleClick);
-        };
-    }, []);
-    const actions = {
-        primary: {
-            action: handleCancel,
-            title: 'Cancel',
-        },
-        secondary: {
-            action: handleDelete,
-            title: 'Delete',
-        },
-    };
-    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isDeletingKeyword, actions: actions, category: style_guide_1.Category.confirmation, header: 'Delete Keyword', message: `Are you sure you want to delete "${keywordToDelete}" keyword?
-      ` }));
-};
-exports.DeleteKeyword = DeleteKeyword;

package/dist/cjs/plugins/keywords.js

@@ -1,121 +0,0 @@
-"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.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.keywordsKey = void 0;
-const CloseIconDark_1 = __importDefault(require("@manuscripts/assets/react/CloseIconDark"));
-const json_schema_1 = require("@manuscripts/json-schema");
-const transform_1 = require("@manuscripts/transform");
-const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_view_1 = require("prosemirror-view");
-const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
-const track_changes_utils_1 = require("../lib/track-changes-utils");
-exports.keywordsKey = new prosemirror_state_1.PluginKey('keywords');
-const isKeywordNode = (node) => node.type === node.type.schema.nodes.keyword;
-const buildKeywordNodes = (doc) => {
-    const keywordNodes = [];
-    doc.descendants((node, pos) => {
-        if (isKeywordNode(node)) {
-            keywordNodes.push([node, pos]);
-        }
-    });
-    return keywordNodes;
-};
-const keywordsUpdated = (transactions) => transactions.some((tr) => {
-    const metaDeleted = tr.getMeta('keywordsUpdated');
-    return metaDeleted;
-});
-const buildDecorations = (keywordNodes, getCapabilities) => {
-    const decorations = [];
-    for (const [node, pos] of keywordNodes) {
-        const nodeClasses = [...(0, track_changes_utils_1.getChangeClasses)(node)];
-        if (!(0, track_changes_utils_1.isTracked)(node)) {
-            nodeClasses.push('no-tracking');
-        }
-        const classesDecoration = prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
-            class: nodeClasses.join(' '),
-        });
-        decorations.push(classesDecoration);
-        if (!(0, track_changes_utils_1.isPending)(node) && !(0, track_changes_utils_1.isDeleted)(node) && getCapabilities().editArticle) {
-            const removeIconDecoration = prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, () => {
-                const closeIconWrapper = document.createElement('span');
-                closeIconWrapper.classList.add('delete-keyword');
-                react_dom_1.default.render((0, react_1.createElement)(CloseIconDark_1.default, {
-                    height: 8,
-                    width: 8,
-                    color: '#353535',
-                }), closeIconWrapper);
-                return closeIconWrapper;
-            }, { side: -1 });
-            decorations.push(removeIconDecoration);
-        }
-    }
-    return decorations;
-};
-exports.default = (props) => {
-    return new prosemirror_state_1.Plugin({
-        key: exports.keywordsKey,
-        state: {
-            init(config, instance) {
-                const keywordNodes = buildKeywordNodes(instance.doc);
-                return {
-                    keywordNodes,
-                };
-            },
-            apply(tr, value, oldState, newState) {
-                const keywordNodes = buildKeywordNodes(newState.doc);
-                return {
-                    keywordNodes,
-                };
-            },
-        },
-        appendTransaction(transactions, oldState, newState) {
-            if (!keywordsUpdated(transactions)) {
-                return;
-            }
-            const keywordsElements = [];
-            const { tr } = newState;
-            tr.doc.descendants((node, pos) => {
-                if (node.type === node.type.schema.nodes.keywords_element) {
-                    keywordsElements.push({
-                        node,
-                        pos,
-                    });
-                }
-            });
-            if (keywordsElements.length) {
-                for (const { node, pos } of keywordsElements) {
-                    tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { id: node.attrs.id || (0, transform_1.generateID)(json_schema_1.ObjectTypes.KeywordsElement) }));
-                }
-                if (tr.selection instanceof prosemirror_state_1.NodeSelection) {
-                    tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, tr.selection.from));
-                }
-                tr.setMeta('origin', exports.keywordsKey);
-                return tr;
-            }
-        },
-        props: {
-            decorations(state) {
-                const { keywordNodes } = exports.keywordsKey.getState(state);
-                return prosemirror_view_1.DecorationSet.create(state.doc, buildDecorations(keywordNodes, props.getCapabilities));
-            },
-        },
-    });
-};

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

@@ -1,65 +0,0 @@
-import { Category, Dialog } from '@manuscripts/style-guide';
-import React, { useEffect, useState } from 'react';
-export const DeleteKeyword = ({ viewProps }) => {
-    const [isDeletingKeyword, setIsDeletingKeyword] = useState(false);
-    const [keywordToDelete, setKeywordToDelete] = useState('');
-    const [keywordToDeleteId, setKeywordToDeleteId] = useState('');
-    const { getPos, view, node } = viewProps;
-    const getKeywords = () => {
-        let position = 0, elementSize = 0;
-        node.descendants((node, pos) => {
-            if (node.attrs.id === keywordToDeleteId) {
-                position = pos + getPos();
-                elementSize = node.nodeSize;
-                return false;
-            }
-        });
-        return { pos: position, to: position + elementSize + 1 };
-    };
-    const handleClick = (event) => {
-        var _a, _b;
-        const clickTarget = event.target;
-        const deleteIcon = clickTarget.closest('.delete-keyword');
-        if (deleteIcon) {
-            const keywordId = ((_a = deleteIcon.closest('.keyword')) === null || _a === void 0 ? void 0 : _a.getAttribute('id')) || '';
-            const keywordContent = ((_b = deleteIcon.closest('.keyword')) === null || _b === void 0 ? void 0 : _b.textContent) || '';
-            setKeywordToDeleteId(keywordId);
-            setKeywordToDelete(keywordContent);
-            setIsDeletingKeyword(true);
-        }
-    };
-    const handleCancel = () => {
-        resetState();
-    };
-    const handleDelete = () => {
-        if (keywordToDeleteId) {
-            const { pos, to } = getKeywords();
-            if (view.dispatch) {
-                view.dispatch(view.state.tr.delete(pos, to).setMeta('keywordsUpdated', true));
-            }
-            resetState();
-        }
-    };
-    const resetState = () => {
-        setIsDeletingKeyword(false);
-        setKeywordToDeleteId('');
-    };
-    useEffect(() => {
-        document.addEventListener('mousedown', handleClick);
-        return () => {
-            document.removeEventListener('mousedown', handleClick);
-        };
-    }, []);
-    const actions = {
-        primary: {
-            action: handleCancel,
-            title: 'Cancel',
-        },
-        secondary: {
-            action: handleDelete,
-            title: 'Delete',
-        },
-    };
-    return (React.createElement(Dialog, { isOpen: isDeletingKeyword, actions: actions, category: Category.confirmation, header: 'Delete Keyword', message: `Are you sure you want to delete "${keywordToDelete}" keyword?
-      ` }));
-};

package/dist/es/plugins/keywords.js

@@ -1,115 +0,0 @@
-/*!
- * © 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 CloseIconDark from '@manuscripts/assets/react/CloseIconDark';
-import { ObjectTypes } from '@manuscripts/json-schema';
-import { generateID } from '@manuscripts/transform';
-import { NodeSelection, Plugin, PluginKey, } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-import { createElement } from 'react';
-import ReactDOM from 'react-dom';
-import { getChangeClasses, isDeleted, isPending, isTracked, } from '../lib/track-changes-utils';
-export const keywordsKey = new PluginKey('keywords');
-const isKeywordNode = (node) => node.type === node.type.schema.nodes.keyword;
-const buildKeywordNodes = (doc) => {
-    const keywordNodes = [];
-    doc.descendants((node, pos) => {
-        if (isKeywordNode(node)) {
-            keywordNodes.push([node, pos]);
-        }
-    });
-    return keywordNodes;
-};
-const keywordsUpdated = (transactions) => transactions.some((tr) => {
-    const metaDeleted = tr.getMeta('keywordsUpdated');
-    return metaDeleted;
-});
-const buildDecorations = (keywordNodes, getCapabilities) => {
-    const decorations = [];
-    for (const [node, pos] of keywordNodes) {
-        const nodeClasses = [...getChangeClasses(node)];
-        if (!isTracked(node)) {
-            nodeClasses.push('no-tracking');
-        }
-        const classesDecoration = Decoration.node(pos, pos + node.nodeSize, {
-            class: nodeClasses.join(' '),
-        });
-        decorations.push(classesDecoration);
-        if (!isPending(node) && !isDeleted(node) && getCapabilities().editArticle) {
-            const removeIconDecoration = Decoration.widget(pos + node.nodeSize - 1, () => {
-                const closeIconWrapper = document.createElement('span');
-                closeIconWrapper.classList.add('delete-keyword');
-                ReactDOM.render(createElement(CloseIconDark, {
-                    height: 8,
-                    width: 8,
-                    color: '#353535',
-                }), closeIconWrapper);
-                return closeIconWrapper;
-            }, { side: -1 });
-            decorations.push(removeIconDecoration);
-        }
-    }
-    return decorations;
-};
-export default (props) => {
-    return new Plugin({
-        key: keywordsKey,
-        state: {
-            init(config, instance) {
-                const keywordNodes = buildKeywordNodes(instance.doc);
-                return {
-                    keywordNodes,
-                };
-            },
-            apply(tr, value, oldState, newState) {
-                const keywordNodes = buildKeywordNodes(newState.doc);
-                return {
-                    keywordNodes,
-                };
-            },
-        },
-        appendTransaction(transactions, oldState, newState) {
-            if (!keywordsUpdated(transactions)) {
-                return;
-            }
-            const keywordsElements = [];
-            const { tr } = newState;
-            tr.doc.descendants((node, pos) => {
-                if (node.type === node.type.schema.nodes.keywords_element) {
-                    keywordsElements.push({
-                        node,
-                        pos,
-                    });
-                }
-            });
-            if (keywordsElements.length) {
-                for (const { node, pos } of keywordsElements) {
-                    tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { id: node.attrs.id || generateID(ObjectTypes.KeywordsElement) }));
-                }
-                if (tr.selection instanceof NodeSelection) {
-                    tr.setSelection(NodeSelection.create(tr.doc, tr.selection.from));
-                }
-                tr.setMeta('origin', keywordsKey);
-                return tr;
-            }
-        },
-        props: {
-            decorations(state) {
-                const { keywordNodes } = keywordsKey.getState(state);
-                return DecorationSet.create(state.doc, buildDecorations(keywordNodes, props.getCapabilities));
-            },
-        },
-    });
-};

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

@@ -1,10 +0,0 @@
-import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
-import React from 'react';
-export declare const DeleteKeyword: React.FC<{
-    viewProps: {
-        view: ManuscriptEditorView;
-        getPos: () => number;
-        node: ManuscriptNode;
-    };
-    getUpdatedNode: () => ManuscriptNode;
-}>;

package/dist/types/plugins/keywords.d.ts

@@ -1,28 +0,0 @@
-/*!
- * © 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 { Capabilities } from '@manuscripts/style-guide';
-import type { KeywordNode } from '@manuscripts/transform';
-import { Plugin, PluginKey } from 'prosemirror-state';
-export declare const keywordsKey: PluginKey<any>;
-interface PluginState {
-    keywordNodes: KeywordNodes;
-}
-interface KeywordsProps {
-    getCapabilities: () => Capabilities;
-}
-type KeywordNodes = Array<[KeywordNode, number]>;
-declare const _default: (props: KeywordsProps) => Plugin<PluginState>;
-export default _default;