@manuscripts/body-editor 1.7.39 → 1.8.0

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

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

@@ -17,41 +17,6 @@ import { PrimaryButton, SecondaryButton, TextField, } from '@manuscripts/style-g
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { allowedHref } from '../../lib/url';
-export const LinkForm = ({ handleCancel, handleRemove, handleSave, value }) => {
-    const [href, setHref] = useState(value.href);
-    const [text, setText] = useState(value.text);
-    const [title, setTitle] = useState(value.title || '');
-    const handleSubmit = useCallback((event) => {
-        event.preventDefault();
-        handleSave({ href, text, title });
-    }, [href, text, title, handleSave]);
-    return (React.createElement(Form, { onSubmit: handleSubmit },
-        React.createElement(Field, null,
-            React.createElement(FieldHeading, null,
-                React.createElement(Label, null, "URL"),
-                href && allowedHref(href) && (React.createElement(Open, { href: href, target: '_blank', rel: 'noopener' }))),
-            React.createElement(TextField, { type: 'url', name: 'href', value: href, autoComplete: 'off', autoFocus: true, required: true, onChange: (event) => {
-                    setHref(event.target.value);
-                } })),
-        React.createElement(Field, null,
-            React.createElement(FieldHeading, null,
-                React.createElement(Label, null, "Text")),
-            React.createElement(TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', required: true, onChange: (event) => {
-                    setText(event.target.value);
-                } })),
-        React.createElement(Field, null,
-            React.createElement(FieldHeading, null,
-                React.createElement(Label, null, "Title (optional)")),
-            React.createElement(TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (event) => {
-                    setTitle(event.target.value);
-                } })),
-        React.createElement(Actions, null,
-            React.createElement(ActionGroup, null,
-                React.createElement(SecondaryButton, { type: 'button', mini: true, onClick: handleRemove }, "Remove Link")),
-            React.createElement(ActionGroup, null,
-                React.createElement(SecondaryButton, { type: 'button', onClick: handleCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { type: 'submit' }, "Save")))));
-};
 const Form = styled.form `
   padding: 16px;
 `;
@@ -97,3 +62,32 @@ const Open = styled.a `
     margin-left: 4px;
   }
 `;
+export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
+    const [href, setHref] = useState(value.href);
+    const [text, setText] = useState(value.text);
+    const [title, setTitle] = useState(value.title || '');
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        onSave({ href, text, title });
+    }, [href, text, title, onSave]);
+    return (React.createElement(Form, { onSubmit: handleSubmit },
+        React.createElement(Field, null,
+            React.createElement(FieldHeading, null,
+                React.createElement(Label, null, "URL"),
+                href && allowedHref(href) && (React.createElement(Open, { href: href, target: '_blank', rel: 'noopener' }))),
+            React.createElement(TextField, { type: 'url', name: 'href', value: href, autoComplete: 'off', autoFocus: true, required: true, onChange: (e) => setHref(e.target.value) })),
+        React.createElement(Field, null,
+            React.createElement(FieldHeading, null,
+                React.createElement(Label, null, "Text")),
+            React.createElement(TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', required: true, onChange: (e) => setText(e.target.value) })),
+        React.createElement(Field, null,
+            React.createElement(FieldHeading, null,
+                React.createElement(Label, null, "Title (optional)")),
+            React.createElement(TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
+        React.createElement(Actions, null,
+            React.createElement(ActionGroup, null,
+                React.createElement(SecondaryButton, { type: 'button', mini: true, onClick: onRemove }, "Remove Link")),
+            React.createElement(ActionGroup, null,
+                React.createElement(SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
+                React.createElement(PrimaryButton, { type: 'submit' }, "Save")))));
+};

package/dist/es/views/link.js

@@ -13,43 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { isRejectedInsert } from '../lib/track-changes-utils';
-import { allowedHref } from '../lib/url';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 export class LinkView extends 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 (!isRejectedInsert(this.node)) {
-                const { href, title } = this.node.attrs;
-                const linkElement = document.createElement('a');
-                linkElement.classList.add('link');
-                linkElement.style.position = 'relative';
-                if (href && 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;
-        };
-    }
 }
 export default createNodeView(LinkView);

package/dist/es/views/link_editable.js

@@ -13,76 +13,119 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { schema } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
-import { LinkForm } from '../components/views/LinkForm';
+import { LinkForm, } from '../components/views/LinkForm';
+import { getActualAttrs, getChangeClasses, isDeleted, isRejectedInsert, } from '../lib/track-changes-utils';
+import { allowedHref } from '../lib/url';
 import { createEditableNodeView } from './creators';
 import { LinkView } from './link';
 import ReactSubView from './ReactSubView';
 export class LinkEditableView extends LinkView {
     constructor() {
         super(...arguments);
+        this.ignoreMutation = () => true;
+        this.initialise = () => {
+            this.createDOM();
+            this.updateContents();
+        };
+        this.updateContents = () => {
+            if (isRejectedInsert(this.node)) {
+                this.dom.innerHTML = '';
+                this.contentDOM = undefined;
+                return;
+            }
+            this.contentDOM = this.dom;
+            const attrs = getActualAttrs(this.node);
+            const href = attrs.href;
+            const title = attrs.title;
+            const classes = ['link', ...getChangeClasses(this.node.attrs.dataTracked)];
+            this.dom.className = classes.join(' ');
+            this.dom.setAttribute('href', 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 (!isDeleted(this.node)) {
+                this.showForm();
+            }
         };
         this.destroy = () => {
             this.closeForm();
         };
         this.deselectNode = () => {
+            const attrs = 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 = 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 = ReactSubView(this.props, 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(TextSelection.create(tr.doc, pos));
-            this.view.focus();
-            this.view.dispatch(tr);
+            const attrs = 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(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 = 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, schema.text(value.text));
             }
             tr.setSelection(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, schema.text(text));
+            }
+            tr.setSelection(TextSelection.create(tr.doc, pos));
+            this.view.dispatch(tr);
+        };
         this.closeForm = () => {
             var _a;
             this.props.popper.destroy();

package/dist/types/components/views/LinkForm.d.ts

@@ -19,9 +19,10 @@ export interface LinkValue {
     href: string;
     title?: string;
 }
-export declare const LinkForm: React.FC<{
-    handleCancel: () => void;
-    handleRemove: () => void;
-    handleSave: (value: LinkValue) => void;
+export interface LinkFormProps {
+    onCancel: () => void;
+    onRemove: () => void;
+    onSave: (value: LinkValue) => void;
     value: LinkValue;
-}>;
+}
+export declare const LinkForm: React.FC<LinkFormProps>;

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

@@ -16,9 +16,6 @@
 import { ManuscriptNodeView } from '@manuscripts/transform';
 import { BaseNodeProps, BaseNodeView } from './base_node_view';
 export declare class LinkView<PropsType extends BaseNodeProps> extends BaseNodeView<PropsType> implements ManuscriptNodeView {
-    initialise: () => void;
-    updateContents: () => void;
-    protected createDOM: () => void;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<LinkView<any>>;
 export default _default;

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

@@ -17,13 +17,19 @@ import { EditableBlockProps } from './editable_block';
 import { LinkView } from './link';
 export declare class LinkEditableView extends LinkView<EditableBlockProps> {
     protected popperContainer: HTMLDivElement;
+    ignoreMutation: () => boolean;
+    initialise: () => void;
+    updateContents: () => void;
+    protected createDOM: () => void;
     selectNode: () => void;
     destroy: () => void;
     deselectNode: () => void;
     private showForm;
+    private handleClick;
     private handleCancel;
     private handleRemove;
     private handleSave;
+    private removeLink;
     private closeForm;
 }
 declare const _default: (props: EditableBlockProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<LinkEditableView>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.39",
+  "version": "1.8.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -31,9 +31,9 @@
     "@manuscripts/assets": "^0.6.4",
     "@manuscripts/json-schema": "^2.2.7",
     "@manuscripts/library": "^1.3.6",
-    "@manuscripts/style-guide": "1.8.7",
+    "@manuscripts/style-guide": "1.11.1",
     "@manuscripts/track-changes-plugin": "1.7.9",
-    "@manuscripts/transform": "2.1.13",
+    "@manuscripts/transform": "2.2.0",
     "astrocite-eutils": "^0.16.4",
     "axios": "^1.6.7",
     "mathjax-full": "^3.2.2",