@manuscripts/body-editor 2.7.34 → 2.7.35

package/dist/cjs/components/toolbar/InsertEmbedDialog.js

@@ -52,12 +52,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openEmbedDialog = exports.NoPreviewMessageWithLink = exports.InsertEmbedDialog = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const commands_1 = require("../../commands");
 const oembed_1 = require("../../lib/oembed");
 const url_1 = require("../../lib/url");
+const use_do_with_debounce_1 = require("../../lib/use-do-with-debounce");
 const editor_props_1 = require("../../plugins/editor-props");
 const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
 const LinkForm_1 = require("../views/LinkForm");
@@ -82,39 +82,32 @@ const PreviewContainer = styled_components_1.default.div `
   border-radius: ${(props) => props.theme.grid.radius.small};
   padding: 6px ${(props) => props.theme.grid.unit * 4}px;
 `;
-const InsertEmbedDialog = ({ state, dispatch, operation, pos, }) => {
+const InsertEmbedDialog = ({ state, dispatch, pos, }) => {
     var _a;
-    const nodeAttr = pos ? (_a = state.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs : undefined;
+    const attrs = pos ? (_a = state.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs : undefined;
     const [isOpen, setOpen] = (0, react_1.useState)(true);
-    const [url, setUrl] = (0, react_1.useState)((nodeAttr === null || nodeAttr === void 0 ? void 0 : nodeAttr.href) || undefined);
-    const [oembedHTML, setOEmbedHTML] = (0, react_1.useState)(undefined);
-    const action = () => {
-        var _a;
-        if (operation === 'Insert') {
+    const [url, setUrl] = (0, react_1.useState)(attrs === null || attrs === void 0 ? void 0 : attrs.href);
+    const [oembedHTML, setOEmbedHTML] = (0, react_1.useState)();
+    const debounce = (0, use_do_with_debounce_1.useDoWithDebounce)();
+    const handleSave = () => {
+        if (!pos) {
             (0, commands_1.insertEmbed)(state, dispatch, { href: url });
         }
         else {
-            dispatch &&
-                pos &&
-                dispatch(state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, (_a = state.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs), { href: url })));
+            const tr = state.tr.setNodeAttribute(pos, 'href', url);
+            dispatch(tr);
         }
         setOpen(false);
     };
     (0, react_1.useEffect)(() => {
-        url && updateEmbedHTML(url);
-    }, [pos]);
-    const debouncedUrlChange = (0, lodash_1.debounce)((e) => __awaiter(void 0, void 0, void 0, function* () {
-        const url = e.target.value.trim();
-        yield updateEmbedHTML(url);
-        setUrl(url);
-    }), 500);
-    const updateEmbedHTML = (url) => __awaiter(void 0, void 0, void 0, function* () {
-        const oEmbedUrl = yield (0, oembed_1.getOEmbedUrl)(url, 368, 217);
-        const oembedJSON = oEmbedUrl && (yield (0, oembed_1.getOEmbedHTML)(oEmbedUrl, url));
-        setOEmbedHTML(oembedJSON);
-    });
+        debounce(() => __awaiter(void 0, void 0, void 0, function* () {
+            const html = yield (0, oembed_1.getOEmbedHTML)(url, 368, 217);
+            setOEmbedHTML(html);
+        }));
+    }, [url]);
+    const operation = pos ? 'Update' : 'Insert';
     return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
-        react_1.default.createElement(DialogContainer, null,
+        react_1.default.createElement(DialogContainer, { "data-cy": "media-editor" },
             react_1.default.createElement(HeaderContainer, null,
                 operation,
                 " external media"),
@@ -123,13 +116,13 @@ const InsertEmbedDialog = ({ state, dispatch, operation, pos, }) => {
                     react_1.default.createElement(LinkForm_1.FieldHeading, null,
                         react_1.default.createElement(Label, { htmlFor: 'embed-link' }, "Media link"),
                         url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(LinkForm_1.Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' }))),
-                    react_1.default.createElement(style_guide_1.TextArea, { id: 'embed-link', rows: 2, cols: 2, defaultValue: url, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: debouncedUrlChange })),
+                    react_1.default.createElement(style_guide_1.TextArea, { id: 'embed-link', rows: 2, cols: 2, defaultValue: url, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: (e) => setUrl(e.target.value.trim()) })),
                 url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(Container, null,
                     react_1.default.createElement(Label, null, "Preview"),
                     (oembedHTML && (react_1.default.createElement(PreviewContainer, { dangerouslySetInnerHTML: { __html: oembedHTML } }))) || react_1.default.createElement(NoPreviewMessage, null)))),
             react_1.default.createElement(style_guide_1.ButtonGroup, null,
                 react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: () => setOpen(false) }, "Cancel"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: action, disabled: !(url && (0, url_1.allowedHref)(url)) }, operation)))));
+                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleSave, disabled: !(url && (0, url_1.allowedHref)(url)) }, operation)))));
 };
 exports.InsertEmbedDialog = InsertEmbedDialog;
 const Wrapper = styled_components_1.default.div `
@@ -154,7 +147,7 @@ const NoPreviewMessageWithLink = ({ href, }) => (react_1.default.createElement(N
         ' ',
         "to see the source media")));
 exports.NoPreviewMessageWithLink = NoPreviewMessageWithLink;
-const openEmbedDialog = (view, operation = 'Insert', pos) => {
+const openEmbedDialog = (view, pos) => {
     if (!view) {
         return;
     }
@@ -162,7 +155,6 @@ const openEmbedDialog = (view, operation = 'Insert', pos) => {
     const dialog = (0, ReactSubView_1.default)((0, editor_props_1.getEditorProps)(state), exports.InsertEmbedDialog, {
         state,
         dispatch,
-        operation,
         pos,
     }, state.doc, () => 0, view);
     document.body.appendChild(dialog);

package/dist/cjs/lib/oembed.js

@@ -69,25 +69,25 @@ const globToRegex = (glob) => {
         .replace(/\*/g, '.*');
     return new RegExp(`^${regex}$`);
 };
-const getOEmbedHTML = (oembedUrl, sourceLink) => __awaiter(void 0, void 0, void 0, function* () {
+const getOEmbedHTML = (url, width, height) => __awaiter(void 0, void 0, void 0, function* () {
     try {
+        const oembedUrl = yield (0, exports.getOEmbedUrl)(url, width, height);
+        if (!oembedUrl) {
+            return;
+        }
         const response = yield fetch(oembedUrl);
         if (response.status === 200) {
-            const oembed = yield response.json();
-            return oembed.html || renderAlternativeHTML(oembed, sourceLink);
-        }
-        else {
-            return undefined;
+            const json = yield response.json();
+            return json.html || renderAlternativeHTML(json);
         }
     }
     catch (e) {
-        return undefined;
+        return;
     }
 });
 exports.getOEmbedHTML = getOEmbedHTML;
-const renderAlternativeHTML = (oembed, sourceLink) => {
+const renderAlternativeHTML = (oembed) => {
     if (oembed.type === 'photo') {
         return `<img src="${oembed.url}">`;
     }
-    return `<a href="${sourceLink}" target="_blank">${oembed.title || 'Media link'}</a>`;
 };

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '2.7.34';
+exports.VERSION = '2.7.35';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/embed.js

@@ -44,7 +44,6 @@ class EmbedMediaView extends block_view_1.default {
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block');
-            this.container.setAttribute('id', this.node.attrs.id);
             this.dom.appendChild(this.container);
             this.contentDOM = document.createElement('div');
             this.container.appendChild(this.contentDOM);
@@ -69,7 +68,7 @@ class EmbedMediaView extends block_view_1.default {
                     },
                     {
                         label: 'Edit',
-                        action: () => (0, InsertEmbedDialog_1.openEmbedDialog)(this.view, 'Update', this.getPos()),
+                        action: () => (0, InsertEmbedDialog_1.openEmbedDialog)(this.view, this.getPos()),
                         icon: 'Edit',
                     },
                 ],
@@ -101,15 +100,13 @@ class EmbedMediaView extends block_view_1.default {
             else {
                 this.container.prepend(preview);
             }
-            const oEmbedUrl = yield (0, oembed_1.getOEmbedUrl)(this.href, 643, 363);
-            if (oEmbedUrl) {
-                const oembedHTML = yield (0, oembed_1.getOEmbedHTML)(oEmbedUrl, this.href);
-                if (oembedHTML) {
-                    preview.innerHTML = oembedHTML;
-                    return;
-                }
+            const html = yield (0, oembed_1.getOEmbedHTML)(this.href, 643, 363);
+            if (html) {
+                preview.innerHTML = html;
+            }
+            else {
+                this.showUnavailableMessage(preview);
             }
-            this.showUnavailableMessage(preview);
         });
     }
     showUnavailableMessage(preview) {

package/dist/es/components/toolbar/InsertEmbedDialog.js

@@ -23,12 +23,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { ButtonGroup, DialogModalBody, MessageContainer, PrimaryBoldHeading, PrimaryButton, PrimarySmallText, SecondaryButton, StyledModal, TextArea, } from '@manuscripts/style-guide';
-import { debounce } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { insertEmbed } from '../../commands';
-import { getOEmbedHTML, getOEmbedUrl } from '../../lib/oembed';
+import { getOEmbedHTML } from '../../lib/oembed';
 import { allowedHref } from '../../lib/url';
+import { useDoWithDebounce } from '../../lib/use-do-with-debounce';
 import { getEditorProps } from '../../plugins/editor-props';
 import ReactSubView from '../../views/ReactSubView';
 import { FieldHeading, Open } from '../views/LinkForm';
@@ -53,39 +53,32 @@ const PreviewContainer = styled.div `
   border-radius: ${(props) => props.theme.grid.radius.small};
   padding: 6px ${(props) => props.theme.grid.unit * 4}px;
 `;
-export const InsertEmbedDialog = ({ state, dispatch, operation, pos, }) => {
+export const InsertEmbedDialog = ({ state, dispatch, pos, }) => {
     var _a;
-    const nodeAttr = pos ? (_a = state.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs : undefined;
+    const attrs = pos ? (_a = state.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs : undefined;
     const [isOpen, setOpen] = useState(true);
-    const [url, setUrl] = useState((nodeAttr === null || nodeAttr === void 0 ? void 0 : nodeAttr.href) || undefined);
-    const [oembedHTML, setOEmbedHTML] = useState(undefined);
-    const action = () => {
-        var _a;
-        if (operation === 'Insert') {
+    const [url, setUrl] = useState(attrs === null || attrs === void 0 ? void 0 : attrs.href);
+    const [oembedHTML, setOEmbedHTML] = useState();
+    const debounce = useDoWithDebounce();
+    const handleSave = () => {
+        if (!pos) {
             insertEmbed(state, dispatch, { href: url });
         }
         else {
-            dispatch &&
-                pos &&
-                dispatch(state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, (_a = state.doc.nodeAt(pos)) === null || _a === void 0 ? void 0 : _a.attrs), { href: url })));
+            const tr = state.tr.setNodeAttribute(pos, 'href', url);
+            dispatch(tr);
         }
         setOpen(false);
     };
     useEffect(() => {
-        url && updateEmbedHTML(url);
-    }, [pos]);
-    const debouncedUrlChange = debounce((e) => __awaiter(void 0, void 0, void 0, function* () {
-        const url = e.target.value.trim();
-        yield updateEmbedHTML(url);
-        setUrl(url);
-    }), 500);
-    const updateEmbedHTML = (url) => __awaiter(void 0, void 0, void 0, function* () {
-        const oEmbedUrl = yield getOEmbedUrl(url, 368, 217);
-        const oembedJSON = oEmbedUrl && (yield getOEmbedHTML(oEmbedUrl, url));
-        setOEmbedHTML(oembedJSON);
-    });
+        debounce(() => __awaiter(void 0, void 0, void 0, function* () {
+            const html = yield getOEmbedHTML(url, 368, 217);
+            setOEmbedHTML(html);
+        }));
+    }, [url]);
+    const operation = pos ? 'Update' : 'Insert';
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
-        React.createElement(DialogContainer, null,
+        React.createElement(DialogContainer, { "data-cy": "media-editor" },
             React.createElement(HeaderContainer, null,
                 operation,
                 " external media"),
@@ -94,13 +87,13 @@ export const InsertEmbedDialog = ({ state, dispatch, operation, pos, }) => {
                     React.createElement(FieldHeading, null,
                         React.createElement(Label, { htmlFor: 'embed-link' }, "Media link"),
                         url && allowedHref(url) && (React.createElement(Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' }))),
-                    React.createElement(TextArea, { id: 'embed-link', rows: 2, cols: 2, defaultValue: url, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: debouncedUrlChange })),
+                    React.createElement(TextArea, { id: 'embed-link', rows: 2, cols: 2, defaultValue: url, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: (e) => setUrl(e.target.value.trim()) })),
                 url && allowedHref(url) && (React.createElement(Container, null,
                     React.createElement(Label, null, "Preview"),
                     (oembedHTML && (React.createElement(PreviewContainer, { dangerouslySetInnerHTML: { __html: oembedHTML } }))) || React.createElement(NoPreviewMessage, null)))),
             React.createElement(ButtonGroup, null,
                 React.createElement(SecondaryButton, { onClick: () => setOpen(false) }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: action, disabled: !(url && allowedHref(url)) }, operation)))));
+                React.createElement(PrimaryButton, { onClick: handleSave, disabled: !(url && allowedHref(url)) }, operation)))));
 };
 const Wrapper = styled.div `
   display: flex;
@@ -123,7 +116,7 @@ export const NoPreviewMessageWithLink = ({ href, }) => (React.createElement(NoPr
         React.createElement("a", { href: href, target: '_blank', rel: "noreferrer" }, "Click here"),
         ' ',
         "to see the source media")));
-export const openEmbedDialog = (view, operation = 'Insert', pos) => {
+export const openEmbedDialog = (view, pos) => {
     if (!view) {
         return;
     }
@@ -131,7 +124,6 @@ export const openEmbedDialog = (view, operation = 'Insert', pos) => {
     const dialog = ReactSubView(getEditorProps(state), InsertEmbedDialog, {
         state,
         dispatch,
-        operation,
         pos,
     }, state.doc, () => 0, view);
     document.body.appendChild(dialog);

package/dist/es/lib/oembed.js

@@ -62,24 +62,24 @@ const globToRegex = (glob) => {
         .replace(/\*/g, '.*');
     return new RegExp(`^${regex}$`);
 };
-export const getOEmbedHTML = (oembedUrl, sourceLink) => __awaiter(void 0, void 0, void 0, function* () {
+export const getOEmbedHTML = (url, width, height) => __awaiter(void 0, void 0, void 0, function* () {
     try {
+        const oembedUrl = yield getOEmbedUrl(url, width, height);
+        if (!oembedUrl) {
+            return;
+        }
         const response = yield fetch(oembedUrl);
         if (response.status === 200) {
-            const oembed = yield response.json();
-            return oembed.html || renderAlternativeHTML(oembed, sourceLink);
-        }
-        else {
-            return undefined;
+            const json = yield response.json();
+            return json.html || renderAlternativeHTML(json);
         }
     }
     catch (e) {
-        return undefined;
+        return;
     }
 });
-const renderAlternativeHTML = (oembed, sourceLink) => {
+const renderAlternativeHTML = (oembed) => {
     if (oembed.type === 'photo') {
         return `<img src="${oembed.url}">`;
     }
-    return `<a href="${sourceLink}" target="_blank">${oembed.title || 'Media link'}</a>`;
 };

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.7.34';
+export const VERSION = '2.7.35';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/embed.js

@@ -26,7 +26,7 @@ import { ContextMenu } from '@manuscripts/style-guide';
 import { addNodeComment } from '../commands';
 import { NoPreviewMessageWithLink, openEmbedDialog, } from '../components/toolbar/InsertEmbedDialog';
 import { openDeleteEmbedDialog } from '../components/views/DeleteEmbedDialog';
-import { getOEmbedHTML, getOEmbedUrl } from '../lib/oembed';
+import { getOEmbedHTML } from '../lib/oembed';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
@@ -38,7 +38,6 @@ export class EmbedMediaView extends BlockView {
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block');
-            this.container.setAttribute('id', this.node.attrs.id);
             this.dom.appendChild(this.container);
             this.contentDOM = document.createElement('div');
             this.container.appendChild(this.contentDOM);
@@ -63,7 +62,7 @@ export class EmbedMediaView extends BlockView {
                     },
                     {
                         label: 'Edit',
-                        action: () => openEmbedDialog(this.view, 'Update', this.getPos()),
+                        action: () => openEmbedDialog(this.view, this.getPos()),
                         icon: 'Edit',
                     },
                 ],
@@ -95,15 +94,13 @@ export class EmbedMediaView extends BlockView {
             else {
                 this.container.prepend(preview);
             }
-            const oEmbedUrl = yield getOEmbedUrl(this.href, 643, 363);
-            if (oEmbedUrl) {
-                const oembedHTML = yield getOEmbedHTML(oEmbedUrl, this.href);
-                if (oembedHTML) {
-                    preview.innerHTML = oembedHTML;
-                    return;
-                }
+            const html = yield getOEmbedHTML(this.href, 643, 363);
+            if (html) {
+                preview.innerHTML = html;
+            }
+            else {
+                this.showUnavailableMessage(preview);
             }
-            this.showUnavailableMessage(preview);
         });
     }
     showUnavailableMessage(preview) {

package/dist/types/components/toolbar/InsertEmbedDialog.d.ts

@@ -19,12 +19,11 @@ import React from 'react';
 import { Dispatch } from '../../commands';
 export type InsertEmbedDialogProps = {
     state: ManuscriptEditorState;
-    dispatch?: Dispatch;
-    operation: 'Insert' | 'Update';
+    dispatch: Dispatch;
     pos?: number;
 };
 export declare const InsertEmbedDialog: React.FC<InsertEmbedDialogProps>;
 export declare const NoPreviewMessageWithLink: React.FC<{
     href: string;
 }>;
-export declare const openEmbedDialog: (view?: EditorView, operation?: string, pos?: number) => void;
+export declare const openEmbedDialog: (view?: EditorView, pos?: number) => void;

package/dist/types/lib/oembed.d.ts

@@ -5,4 +5,4 @@ export type ProviderJson = {
     title?: string;
 };
 export declare const getOEmbedUrl: (url: string, width: number, height: number) => Promise<string | undefined>;
-export declare const getOEmbedHTML: (oembedUrl: string, sourceLink: string) => Promise<any>;
+export declare const getOEmbedHTML: (url: string, width: number, height: number) => Promise<any>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.7.34";
+export declare const VERSION = "2.7.35";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

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