@manuscripts/body-editor 1.7.37 → 1.7.39-LEAN-3049.0

package/dist/cjs/assets.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
+exports.deleteIcon = exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
 exports.editIcon = `
   <svg
     width="14"
@@ -118,3 +118,49 @@ exports.alertIcon = `
     />
   </svg>
 `;
+exports.deleteIcon = `
+  <svg 
+    width="13" 
+    height="15" 
+    viewBox="0 0 13 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z" 
+    fill="#C9C9C9"
+  />
+  <rect 
+    y="2" 
+    width="13" 
+    height="3" 
+    rx="1.5" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z" 
+    fill="white"
+  />
+</svg>`;

package/dist/cjs/commands.js

@@ -242,21 +242,23 @@ const insertSectionLabel = (state, dispatch, currentTr) => {
     return true;
 };
 exports.insertSectionLabel = insertSectionLabel;
+const isLink = (text) => /^\s*(https?:\S+)/.test(text);
 const insertLink = (state, dispatch) => {
-    const text = selectedText();
-    const contents = text ? state.schema.text(text) : undefined;
-    const matches = text.match(/^\s*(https?:\S+)/);
-    const attrs = {
-        href: matches ? matches[1] : '',
-    };
-    const range = new prosemirror_model_1.NodeRange(state.selection.$from, state.selection.$to, state.selection.$from.depth);
-    const { tr } = state;
-    const wrapping = (0, prosemirror_transform_1.findWrapping)(range, state.schema.nodes.link, attrs);
-    if (wrapping) {
-        tr.wrap(range, wrapping);
+    const tr = state.tr;
+    const selection = state.selection;
+    if (!selection.empty) {
+        const text = selectedText();
+        const attrs = {
+            href: isLink(text) ? text.trim() : '',
+        };
+        const range = new prosemirror_model_1.NodeRange(selection.$from, selection.$to, selection.$from.depth);
+        const wrapping = (0, prosemirror_transform_1.findWrapping)(range, transform_1.schema.nodes.link, attrs);
+        if (wrapping) {
+            tr.wrap(range, wrapping);
+        }
     }
     else {
-        tr.insert(state.selection.anchor, state.schema.nodes.link.create(attrs, contents));
+        tr.insert(state.selection.anchor, transform_1.schema.nodes.link.create());
     }
     if (dispatch) {
         const selection = prosemirror_state_1.NodeSelection.create(tr.doc, state.tr.selection.from);

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

@@ -0,0 +1,45 @@
+"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.DeleteFootnoteDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const DeleteFootnoteDialog = ({ footnoteType, footnoteMessage, handleDelete, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(style_guide_1.Dialog, { className: "delete-footnote-dialog", isOpen: isOpen, actions: {
+            primary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+            secondary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+        }, category: style_guide_1.Category.confirmation, header: `Delete ${footnoteType}`, message: `${footnoteMessage}` }));
+};
+exports.DeleteFootnoteDialog = DeleteFootnoteDialog;

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

@@ -46,42 +46,6 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const url_1 = require("../../lib/url");
-const LinkForm = ({ handleCancel, handleRemove, handleSave, value }) => {
-    const [href, setHref] = (0, react_1.useState)(value.href);
-    const [text, setText] = (0, react_1.useState)(value.text);
-    const [title, setTitle] = (0, react_1.useState)(value.title || '');
-    const handleSubmit = (0, react_1.useCallback)((event) => {
-        event.preventDefault();
-        handleSave({ href, text, title });
-    }, [href, text, title, handleSave]);
-    return (react_1.default.createElement(Form, { onSubmit: handleSubmit },
-        react_1.default.createElement(Field, null,
-            react_1.default.createElement(FieldHeading, null,
-                react_1.default.createElement(Label, null, "URL"),
-                href && (0, url_1.allowedHref)(href) && (react_1.default.createElement(Open, { href: href, target: '_blank', rel: 'noopener' }))),
-            react_1.default.createElement(style_guide_1.TextField, { type: 'url', name: 'href', value: href, autoComplete: 'off', autoFocus: true, required: true, onChange: (event) => {
-                    setHref(event.target.value);
-                } })),
-        react_1.default.createElement(Field, null,
-            react_1.default.createElement(FieldHeading, null,
-                react_1.default.createElement(Label, null, "Text")),
-            react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', required: true, onChange: (event) => {
-                    setText(event.target.value);
-                } })),
-        react_1.default.createElement(Field, null,
-            react_1.default.createElement(FieldHeading, null,
-                react_1.default.createElement(Label, null, "Title (optional)")),
-            react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (event) => {
-                    setTitle(event.target.value);
-                } })),
-        react_1.default.createElement(Actions, null,
-            react_1.default.createElement(ActionGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', mini: true, onClick: handleRemove }, "Remove Link")),
-            react_1.default.createElement(ActionGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', onClick: handleCancel }, "Cancel"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { type: 'submit' }, "Save")))));
-};
-exports.LinkForm = LinkForm;
 const Form = styled_components_1.default.form `
   padding: 16px;
 `;
@@ -127,3 +91,33 @@ const Open = styled_components_1.default.a `
     margin-left: 4px;
   }
 `;
+const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
+    const [href, setHref] = (0, react_1.useState)(value.href);
+    const [text, setText] = (0, react_1.useState)(value.text);
+    const [title, setTitle] = (0, react_1.useState)(value.title || '');
+    const handleSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        onSave({ href, text, title });
+    }, [href, text, title, onSave]);
+    return (react_1.default.createElement(Form, { onSubmit: handleSubmit },
+        react_1.default.createElement(Field, null,
+            react_1.default.createElement(FieldHeading, null,
+                react_1.default.createElement(Label, null, "URL"),
+                href && (0, url_1.allowedHref)(href) && (react_1.default.createElement(Open, { href: href, target: '_blank', rel: 'noopener' }))),
+            react_1.default.createElement(style_guide_1.TextField, { type: 'url', name: 'href', value: href, autoComplete: 'off', autoFocus: true, required: true, onChange: (e) => setHref(e.target.value) })),
+        react_1.default.createElement(Field, null,
+            react_1.default.createElement(FieldHeading, null,
+                react_1.default.createElement(Label, null, "Text")),
+            react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', required: true, onChange: (e) => setText(e.target.value) })),
+        react_1.default.createElement(Field, null,
+            react_1.default.createElement(FieldHeading, null,
+                react_1.default.createElement(Label, null, "Title (optional)")),
+            react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
+        react_1.default.createElement(Actions, null,
+            react_1.default.createElement(ActionGroup, null,
+                react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', mini: true, onClick: onRemove }, "Remove Link")),
+            react_1.default.createElement(ActionGroup, null,
+                react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
+                react_1.default.createElement(style_guide_1.PrimaryButton, { type: 'submit' }, "Save")))));
+};
+exports.LinkForm = LinkForm;

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

@@ -69,7 +69,7 @@ exports.default = (props) => {
         (0, prosemirror_tables_1.tableEditing)(),
         (0, highlight_1.default)(props),
         (0, selected_suggestion_ui_1.default)(props),
-        (0, footnotes_1.default)(),
+        (0, footnotes_1.default)(props),
         (0, table_footnote_1.default)(),
     ];
     if (props.collabProvider) {

package/dist/cjs/lib/context-menu.js

@@ -142,7 +142,7 @@ class ContextMenu {
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
-            var _a;
+            var _a, _b;
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -176,9 +176,17 @@ class ContextMenu {
             if (type === transform_1.schema.nodes.table_element) {
                 const isInTable = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table)(this.view.state.selection);
                 const tableElementFooter = (0, prosemirror_utils_1.findChildrenByType)(this.node, transform_1.schema.nodes.table_element_footer);
+                let isDeletedOrRejected = false;
                 const hasGeneralNote = tableElementFooter.length &&
                     ((_a = tableElementFooter[0].node.firstChild) === null || _a === void 0 ? void 0 : _a.type) === transform_1.schema.nodes.paragraph;
-                if (!hasGeneralNote) {
+                if (hasGeneralNote) {
+                    const generalFootnote = (_b = tableElementFooter[0]) === null || _b === void 0 ? void 0 : _b.node.firstChild;
+                    if (generalFootnote) {
+                        isDeletedOrRejected =
+                            (0, track_changes_utils_1.isDeleted)(generalFootnote) || (0, track_changes_utils_1.isRejectedInsert)(generalFootnote);
+                    }
+                }
+                if (!hasGeneralNote || isDeletedOrRejected) {
                     menu.appendChild(this.createMenuSection((section) => {
                         section.appendChild(this.createMenuItem('Add General Note', () => {
                             (0, commands_1.insertGeneralFootnote)(this.node, this.getPos(), this.view, tableElementFooter);

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

@@ -14,6 +14,9 @@
  * 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.uncitedFootnoteWidget = exports.buildPluginState = exports.footnotesKey = void 0;
 const transform_1 = require("@manuscripts/transform");
@@ -22,7 +25,9 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const prosemirror_view_1 = require("prosemirror-view");
 const assets_1 = require("../../assets");
+const DeleteFootnoteDialog_1 = require("../../components/views/DeleteFootnoteDialog");
 const utils_1 = require("../../lib/utils");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
 const placeholder_1 = require("../placeholder");
 const footnotes_utils_1 = require("./footnotes-utils");
 exports.footnotesKey = new prosemirror_state_1.PluginKey('footnotes');
@@ -68,7 +73,39 @@ const uncitedFootnoteWidget = () => () => {
     return element;
 };
 exports.uncitedFootnoteWidget = uncitedFootnoteWidget;
-exports.default = () => {
+const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage) => (view, getPos) => {
+    const deleteBtn = document.createElement('span');
+    deleteBtn.className = 'delete-icon';
+    deleteBtn.innerHTML = assets_1.deleteIcon;
+    deleteBtn.addEventListener('click', () => {
+        const handleDelete = () => {
+            const tr = view.state.tr;
+            const pos = getPos();
+            if (node.type === transform_1.schema.nodes.table_element_footer) {
+                if (!(0, utils_1.getChildOfType)(node, transform_1.schema.nodes.footnotes_element, true) &&
+                    pos) {
+                    tr.delete(pos - 1, pos + node.nodeSize);
+                }
+                else {
+                    node.content.forEach((item) => {
+                        if (item.type === transform_1.schema.nodes.paragraph && pos) {
+                            tr.delete(pos - 1, pos + item.nodeSize + 1);
+                        }
+                    });
+                }
+            }
+            view.dispatch(tr);
+        };
+        const componentProps = {
+            footnoteType: footnoteType,
+            footnoteMessage: footnoteMessage,
+            handleDelete: handleDelete,
+        };
+        (0, ReactSubView_1.default)(Object.assign(Object.assign({}, props), { dispatch: view.dispatch }), DeleteFootnoteDialog_1.DeleteFootnoteDialog, componentProps, node, () => getPos(), view);
+    });
+    return deleteBtn;
+};
+exports.default = (props) => {
     return new prosemirror_state_1.Plugin({
         key: exports.footnotesKey,
         state: {
@@ -101,6 +138,7 @@ exports.default = () => {
             decorations: (state) => {
                 const decorations = [];
                 const isInTableElementFooter = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table_element_footer)(state.selection);
+                const isInTableElement = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table_element)(state.selection);
                 if (isInTableElementFooter) {
                     const parent = (0, utils_1.findParentNodeWithIdValue)(state.selection);
                     if (parent) {
@@ -111,6 +149,7 @@ exports.default = () => {
                 }
                 const { labels } = exports.footnotesKey.getState(state);
                 let tableInlineFootnoteIds = undefined;
+                const can = props.getCapabilities();
                 state.doc.descendants((node, pos, parent) => {
                     var _a;
                     if ((0, transform_1.isFootnoteNode)(node)) {
@@ -131,6 +170,30 @@ exports.default = () => {
                             decorations.push(prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, (0, exports.uncitedFootnoteWidget)()));
                         }
                     }
+                    if (can.editArticle) {
+                        if (isInTableElement) {
+                            const footnote = (() => {
+                                switch (node.type) {
+                                    case transform_1.schema.nodes.footnote:
+                                        return {
+                                            type: 'table footnote',
+                                            message: 'This action will entirely remove the table footnote from the list  because it will no longer be used.',
+                                        };
+                                    default:
+                                        return {
+                                            type: 'table general note',
+                                            message: 'This action will entirely remove the table general note.',
+                                        };
+                                }
+                            })();
+                            if (node.type === transform_1.schema.nodes.paragraph &&
+                                (parent === null || parent === void 0 ? void 0 : parent.type) === transform_1.schema.nodes.table_element_footer) {
+                                decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, deleteFootnoteWidget(parent, props, footnote.type, footnote.message), {
+                                    key: parent.attrs.id,
+                                }));
+                            }
+                        }
+                    }
                     if (node.type === transform_1.schema.nodes.footnotes_element) {
                         if ((parent === null || parent === void 0 ? void 0 : parent.type) === transform_1.schema.nodes.table_element_footer) {
                             decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {

package/dist/cjs/views/link.js

@@ -16,44 +16,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkView = void 0;
-const track_changes_utils_1 = require("../lib/track-changes-utils");
-const url_1 = require("../lib/url");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 class LinkView extends base_node_view_1.BaseNodeView {
-    constructor() {
-        super(...arguments);
-        this.initialise = () => {
-            this.createDOM();
-            this.updateContents();
-        };
-        this.updateContents = () => {
-            var _a, _b, _c;
-            const linkText = ((_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.firstChild) === null || _c === void 0 ? void 0 : _c.text) || '';
-            if (!(0, track_changes_utils_1.isRejectedInsert)(this.node)) {
-                const { href, title } = this.node.attrs;
-                const linkElement = document.createElement('a');
-                linkElement.classList.add('link');
-                linkElement.style.position = 'relative';
-                if (href && (0, url_1.allowedHref)(href)) {
-                    linkElement.setAttribute('href', href);
-                }
-                if (title) {
-                    linkElement.setAttribute('title', title);
-                }
-                linkElement.innerHTML = linkText;
-                this.dom.innerHTML = '';
-                this.dom.appendChild(linkElement);
-            }
-            else {
-                this.dom.innerHTML = linkText;
-            }
-        };
-        this.createDOM = () => {
-            this.dom = document.createElement('span');
-            this.contentDOM = this.dom;
-        };
-    }
 }
 exports.LinkView = LinkView;
 exports.default = (0, creators_1.createNodeView)(LinkView);

package/dist/cjs/views/link_editable.js

@@ -19,76 +19,119 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkEditableView = void 0;
+const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const LinkForm_1 = require("../components/views/LinkForm");
+const track_changes_utils_1 = require("../lib/track-changes-utils");
+const url_1 = require("../lib/url");
 const creators_1 = require("./creators");
 const link_1 = require("./link");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class LinkEditableView extends link_1.LinkView {
     constructor() {
         super(...arguments);
+        this.ignoreMutation = () => true;
+        this.initialise = () => {
+            this.createDOM();
+            this.updateContents();
+        };
+        this.updateContents = () => {
+            if ((0, track_changes_utils_1.isRejectedInsert)(this.node)) {
+                this.dom.innerHTML = '';
+                this.contentDOM = undefined;
+                return;
+            }
+            this.contentDOM = this.dom;
+            const attrs = (0, track_changes_utils_1.getActualAttrs)(this.node);
+            const href = attrs.href;
+            const title = attrs.title;
+            const classes = ['link', ...(0, track_changes_utils_1.getChangeClasses)(this.node.attrs.dataTracked)];
+            this.dom.className = classes.join(' ');
+            this.dom.setAttribute('href', (0, url_1.allowedHref)(href) ? href : '');
+            this.dom.setAttribute('target', '_blank');
+            this.dom.setAttribute('title', title || '');
+        };
+        this.createDOM = () => {
+            this.dom = document.createElement('a');
+            this.dom.addEventListener('click', this.handleClick);
+        };
         this.selectNode = () => {
-            this.showForm();
+            if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
+                this.showForm();
+            }
         };
         this.destroy = () => {
             this.closeForm();
         };
         this.deselectNode = () => {
+            const attrs = (0, track_changes_utils_1.getActualAttrs)(this.node);
+            if (!this.node.content.size || !attrs.href) {
+                this.removeLink();
+            }
             this.closeForm();
         };
-        this.showForm = (event) => {
-            if (event) {
-                event.preventDefault();
-            }
+        this.showForm = () => {
             if (!this.props.getCapabilities().editArticle) {
                 return;
             }
-            const originalValue = {
-                href: this.node.attrs.href,
-                title: this.node.attrs.title,
+            const attrs = (0, track_changes_utils_1.getActualAttrs)(this.node);
+            const value = {
+                href: attrs.href,
+                title: attrs.title,
                 text: this.node.textContent,
             };
             const componentProps = {
-                value: originalValue,
-                handleCancel: this.handleCancel,
-                handleRemove: this.handleRemove,
-                handleSave: this.handleSave,
+                value,
+                onCancel: this.handleCancel,
+                onRemove: this.handleRemove,
+                onSave: this.handleSave,
             };
             this.popperContainer = (0, ReactSubView_1.default)(this.props, LinkForm_1.LinkForm, componentProps, this.node, this.getPos, this.view, 'link-editor');
             this.props.popper.show(this.dom, this.popperContainer, 'bottom');
         };
+        this.handleClick = (e) => {
+            if (this.props.getCapabilities().editArticle) {
+                e.preventDefault();
+            }
+        };
         this.handleCancel = () => {
-            const tr = this.view.state.tr;
-            const pos = this.getPos();
-            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
-            this.view.focus();
-            this.view.dispatch(tr);
+            const attrs = (0, track_changes_utils_1.getActualAttrs)(this.node);
+            if (!this.node.content.size || !attrs.href) {
+                this.removeLink();
+            }
             this.closeForm();
         };
         this.handleRemove = () => {
-            const tr = this.view.state.tr;
-            const pos = this.getPos();
-            const to = pos + this.node.nodeSize;
-            tr.replaceWith(pos, to, this.node.content).setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
-            this.view.focus();
-            this.view.dispatch(tr);
+            this.removeLink();
             this.closeForm();
         };
         this.handleSave = (value) => {
             const tr = this.view.state.tr;
-            const link = this.node;
+            const attrs = (0, track_changes_utils_1.getActualAttrs)(this.node);
             const pos = this.getPos();
-            if (value.href !== link.attrs.href || value.title !== link.attrs.title) {
+            if (value.href !== attrs.href || value.title !== attrs.title) {
                 tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, this.node.attrs), { href: value.href, title: value.title }));
             }
-            if (value.text !== link.textContent) {
-                tr.insertText(value.text, pos + 1, pos + this.node.nodeSize - 1);
+            if (value.text !== this.node.textContent) {
+                tr.delete(pos + 1, pos + this.node.nodeSize - 1);
+                tr.insert(pos + 1, transform_1.schema.text(value.text));
             }
             tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
             this.view.focus();
             this.view.dispatch(tr);
             this.closeForm();
         };
+        this.removeLink = () => {
+            const tr = this.view.state.tr;
+            const pos = this.getPos();
+            tr.delete(pos, pos + this.node.nodeSize);
+            const text = this.node.textContent;
+            if (text) {
+                tr.insert(pos, transform_1.schema.text(text));
+            }
+            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
+            this.view.dispatch(tr);
+        };
         this.closeForm = () => {
             var _a;
             this.props.popper.destroy();

package/dist/es/assets.js

@@ -115,3 +115,49 @@ export const alertIcon = `
     />
   </svg>
 `;
+export const deleteIcon = `
+  <svg 
+    width="13" 
+    height="15" 
+    viewBox="0 0 13 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z" 
+    fill="#C9C9C9"
+  />
+  <rect 
+    y="2" 
+    width="13" 
+    height="3" 
+    rx="1.5" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z" 
+    fill="white"
+  />
+</svg>`;

package/dist/es/commands.js

@@ -227,21 +227,23 @@ export const insertSectionLabel = (state, dispatch, currentTr) => {
     }
     return true;
 };
+const isLink = (text) => /^\s*(https?:\S+)/.test(text);
 export const insertLink = (state, dispatch) => {
-    const text = selectedText();
-    const contents = text ? state.schema.text(text) : undefined;
-    const matches = text.match(/^\s*(https?:\S+)/);
-    const attrs = {
-        href: matches ? matches[1] : '',
-    };
-    const range = new NodeRange(state.selection.$from, state.selection.$to, state.selection.$from.depth);
-    const { tr } = state;
-    const wrapping = findWrapping(range, state.schema.nodes.link, attrs);
-    if (wrapping) {
-        tr.wrap(range, wrapping);
+    const tr = state.tr;
+    const selection = state.selection;
+    if (!selection.empty) {
+        const text = selectedText();
+        const attrs = {
+            href: isLink(text) ? text.trim() : '',
+        };
+        const range = new NodeRange(selection.$from, selection.$to, selection.$from.depth);
+        const wrapping = findWrapping(range, schema.nodes.link, attrs);
+        if (wrapping) {
+            tr.wrap(range, wrapping);
+        }
     }
     else {
-        tr.insert(state.selection.anchor, state.schema.nodes.link.create(attrs, contents));
+        tr.insert(state.selection.anchor, schema.nodes.link.create());
     }
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, state.tr.selection.from);