@manuscripts/body-editor 2.7.3 → 2.7.4-LEAN-4218.0

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAffiliation = exports.insertContributors = exports.insertAbstract = exports.insertBackmatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAffiliation = exports.insertContributors = exports.insertAbstract = exports.insertBackmatterSection = exports.insertSection = exports.insertGraphicalAbstract = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.insertEmbed = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -150,6 +150,11 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
                 state.schema.nodes.equation.create(),
             ]);
             break;
+        case state.schema.nodes.embed:
+            node = state.schema.nodes.embed.create(attrs, [
+                createAndFillFigcaptionElement(state),
+            ]);
+            break;
         default:
             node = nodeType.createAndFill(attrs);
     }
@@ -160,6 +165,15 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
     }
 };
 exports.createBlock = createBlock;
+const insertEmbed = (state, dispatch, attrs) => {
+    const position = findBlockInsertPosition(state);
+    if (position === null) {
+        return false;
+    }
+    (0, exports.createBlock)(transform_1.schema.nodes.embed, position, state, dispatch, attrs);
+    return true;
+};
+exports.insertEmbed = insertEmbed;
 const insertInlineTableFootnote = (state, dispatch) => {
     const $pos = state.selection.$to;
     const table = (0, prosemirror_utils_1.findParentNodeOfTypeClosestToPos)($pos, transform_1.schema.nodes.table);

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

@@ -0,0 +1,159 @@
+"use strict";
+/*!
+ * © 2024 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 __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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 editor_props_1 = require("../../plugins/editor-props");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
+const LinkForm_1 = require("../views/LinkForm");
+const Label = styled_components_1.default.label `
+  padding-bottom: 4px;
+`;
+const HeaderContainer = (0, styled_components_1.default)(style_guide_1.PrimaryBoldHeading) `
+  font-size: ${(props) => props.theme.font.size.large};
+`;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 16px;
+`;
+const DialogContainer = (0, styled_components_1.default)(style_guide_1.DialogModalBody) `
+  min-width: 750px;
+`;
+const PreviewContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  padding: 6px ${(props) => props.theme.grid.unit * 4}px;
+`;
+const InsertEmbedDialog = ({ state, dispatch, operation, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    const [url, setUrl] = (0, react_1.useState)(undefined);
+    const [oembedHTML, setOEmbedHTML] = (0, react_1.useState)(undefined);
+    const action = () => {
+        if (operation === 'Insert') {
+            (0, commands_1.insertEmbed)(state, dispatch, { href: url });
+            setOpen(false);
+        }
+        else {
+        }
+    };
+    const debouncedUrlChange = (0, lodash_1.debounce)((e) => __awaiter(void 0, void 0, void 0, function* () {
+        const url = e.target.value.trim();
+        const oEmbedUrl = yield (0, oembed_1.getOEmbedUrl)(url, 368, 217);
+        if (oEmbedUrl) {
+            const oembedJSON = yield (0, oembed_1.getOEmbedHTML)(oEmbedUrl, url);
+            setOEmbedHTML(oembedJSON);
+        }
+        setUrl(url);
+    }), 500);
+    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
+        react_1.default.createElement(DialogContainer, null,
+            react_1.default.createElement(HeaderContainer, null,
+                operation,
+                " external media"),
+            react_1.default.createElement(style_guide_1.MessageContainer, null,
+                react_1.default.createElement(Container, null,
+                    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, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: debouncedUrlChange })),
+                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)))));
+};
+exports.InsertEmbedDialog = InsertEmbedDialog;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+`;
+const NoPreviewMessage = () => (react_1.default.createElement(PreviewContainer, null,
+    react_1.default.createElement(Wrapper, null, "Preview not available")));
+const NoPreviewContainer = (0, styled_components_1.default)(PreviewContainer) `
+  flex-direction: column;
+  background: #fafafa;
+  padding: 16px 56px 16px 48px;
+`;
+const Heading = (0, styled_components_1.default)(style_guide_1.PrimaryBoldHeading) `
+  font-size: ${(props) => props.theme.font.size.medium};
+`;
+const NoPreviewMessageWithLink = ({ href, }) => (react_1.default.createElement(NoPreviewContainer, null,
+    react_1.default.createElement(Heading, null, "Preview currently not available"),
+    react_1.default.createElement(style_guide_1.PrimarySmallText, null,
+        react_1.default.createElement("a", { href: href, target: '_blank', rel: "noreferrer" }, "Click here"),
+        ' ',
+        "to see the source media")));
+exports.NoPreviewMessageWithLink = NoPreviewMessageWithLink;
+const openEmbedDialog = (view, operation = 'Insert') => {
+    if (!view) {
+        return;
+    }
+    const { state, dispatch } = view;
+    const dialog = (0, ReactSubView_1.default)((0, editor_props_1.getEditorProps)(state), exports.InsertEmbedDialog, {
+        state,
+        dispatch,
+        operation,
+    }, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+};
+exports.openEmbedDialog = openEmbedDialog;

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

@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkForm = void 0;
+exports.LinkForm = exports.Open = exports.FieldHeading = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -66,7 +66,7 @@ const ActionGroup = styled_components_1.default.span `
 const Field = styled_components_1.default.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const FieldHeading = styled_components_1.default.div `
+exports.FieldHeading = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -78,7 +78,7 @@ const Label = styled_components_1.default.label `
   color: ${(props) => props.theme.colors.text.tertiary};
   font-size: ${(props) => props.theme.font.size.normal};
 `;
-const Open = styled_components_1.default.a `
+exports.Open = styled_components_1.default.a `
   display: inline-block;
   margin-left: ${(props) => props.theme.grid.unit * 2}px;
   text-transform: uppercase;
@@ -101,16 +101,16 @@ const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
     }, [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(exports.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' }))),
+                href && (0, url_1.allowedHref)(href) && (react_1.default.createElement(exports.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(exports.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(exports.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,

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

@@ -28,6 +28,7 @@ const box_element_1 = __importDefault(require("../views/box_element"));
 const citation_editable_1 = __importDefault(require("../views/citation_editable"));
 const contributors_1 = __importDefault(require("../views/contributors"));
 const cross_reference_editable_1 = __importDefault(require("../views/cross_reference_editable"));
+const embed_1 = __importDefault(require("../views/embed"));
 const empty_1 = __importDefault(require("../views/empty"));
 const equation_editable_1 = __importDefault(require("../views/equation_editable"));
 const equation_element_editable_1 = __importDefault(require("../views/equation_element_editable"));
@@ -64,6 +65,7 @@ exports.default = (props, dispatch) => {
         cross_reference: (0, cross_reference_editable_1.default)(props, dispatch),
         contributors: (0, contributors_1.default)(props, dispatch),
         affiliations: (0, affiliations_1.default)(props, dispatch),
+        embed: (0, embed_1.default)(props),
         equation: (0, equation_editable_1.default)(props),
         equation_element: (0, equation_element_editable_1.default)(props),
         figure: (0, figure_editable_1.default)(props, dispatch),

package/dist/cjs/lib/oembed.js

@@ -0,0 +1,93 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOEmbedHTML = exports.getOEmbedUrl = void 0;
+const oembed_providers_1 = __importDefault(require("oembed-providers"));
+const getOEmbedUrl = (url, width, height) => __awaiter(void 0, void 0, void 0, function* () {
+    let oembedUrl;
+    for (const provider of oembed_providers_1.default) {
+        if (provider) {
+            const { provider_url, endpoints } = provider;
+            for (const endpoint of endpoints) {
+                if (endpoint.schemes &&
+                    endpoint.schemes.find((schema) => globToRegex(schema).test(url))) {
+                    oembedUrl = endpoint.url.replace('{format}', 'json');
+                    break;
+                }
+                else if (!endpoint.schemes && url.startsWith(provider_url)) {
+                    oembedUrl = endpoint.url.replace('{format}', 'json');
+                    break;
+                }
+            }
+        }
+    }
+    if (oembedUrl) {
+        const params = new URLSearchParams();
+        params.append('url', url);
+        params.set('format', 'json');
+        params.append('maxwidth', width.toString());
+        params.append('maxheight', height.toString());
+        return `${oembedUrl}?${params.toString()}`;
+    }
+    else {
+        try {
+            const response = yield fetch(url, { method: 'HEAD' });
+            let oembedUrl;
+            const linkHeader = response.headers.get('link');
+            if (linkHeader) {
+                linkHeader.split(',').map((link) => {
+                    const typeMatch = /type="([^"]*)"/.exec(link);
+                    if (typeMatch &&
+                        (typeMatch[1] === 'application/json+oembed' ||
+                            typeMatch[1] === 'text/xml+oembed')) {
+                        oembedUrl = /<([^>]*)>/.exec(link);
+                    }
+                });
+            }
+            return oembedUrl;
+        }
+        catch (e) {
+            return undefined;
+        }
+    }
+});
+exports.getOEmbedUrl = getOEmbedUrl;
+const globToRegex = (glob) => {
+    const regex = glob
+        .replace(/\./g, '\\.')
+        .replace(/\*/g, '.*');
+    return new RegExp(`^${regex}$`);
+};
+const getOEmbedHTML = (oembedUrl, sourceLink) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield fetch(oembedUrl);
+        if (response.status === 200) {
+            const oembed = yield response.json();
+            return oembed.html || renderAlternativeHTML(oembed, sourceLink);
+        }
+        else {
+            return undefined;
+        }
+    }
+    catch (e) {
+        return undefined;
+    }
+});
+exports.getOEmbedHTML = getOEmbedHTML;
+const renderAlternativeHTML = (oembed, sourceLink) => {
+    if (oembed.type === 'photo') {
+        return `<img src="${oembed.url}">`;
+    }
+    return `<a href="${sourceLink}" target="_blank">${oembed.title || 'Media link'}</a>`;
+};

package/dist/cjs/menus.js

@@ -20,6 +20,7 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_commands_1 = require("prosemirror-commands");
 const prosemirror_history_1 = require("prosemirror-history");
 const commands_1 = require("./commands");
+const InsertEmbedDialog_1 = require("./components/toolbar/InsertEmbedDialog");
 const InsertTableDialog_1 = require("./components/toolbar/InsertTableDialog");
 const ListMenuItem_1 = require("./components/toolbar/ListMenuItem");
 const hierarchy_1 = require("./lib/hierarchy");
@@ -205,6 +206,13 @@ const getEditorMenus = (editor) => {
             {
                 role: 'separator',
             },
+            {
+                id: 'insert-embed-media',
+                label: 'Embedded Media',
+                isActive: (0, commands_1.blockActive)(transform_1.schema.nodes.embed)(state),
+                isEnabled: isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.embed)),
+                run: () => (0, InsertEmbedDialog_1.openEmbedDialog)(editor.view),
+            },
             {
                 id: 'insert-link',
                 label: 'Link',

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.3';
+exports.VERSION = '2.7.4-LEAN-4218.0';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/embed.js

@@ -0,0 +1,84 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmbedMediaView = void 0;
+const InsertEmbedDialog_1 = require("../components/toolbar/InsertEmbedDialog");
+const oembed_1 = require("../lib/oembed");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+class EmbedMediaView extends block_view_1.default {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.stopEvent = () => true;
+        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);
+        };
+    }
+    updateContents() {
+        const _super = Object.create(null, {
+            updateContents: { get: () => super.updateContents }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.updateContents.call(this);
+            if (this.href !== this.node.attrs.href) {
+                this.href = this.node.attrs.href;
+                yield this.updateOEmbedPreview();
+            }
+        });
+    }
+    updateOEmbedPreview() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const preview = document.createElement('div');
+            preview.classList.add('embed-media-preview');
+            preview.setAttribute('contenteditable', 'false');
+            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;
+                }
+            }
+            this.showUnavailableMessage(preview);
+        });
+    }
+    showUnavailableMessage(preview) {
+        preview.appendChild((0, ReactSubView_1.default)(this.props, InsertEmbedDialog_1.NoPreviewMessageWithLink, { href: this.node.attrs.href }, this.node, this.getPos, this.view));
+    }
+}
+exports.EmbedMediaView = EmbedMediaView;
+exports.default = (0, creators_1.createNodeView)(EmbedMediaView);

package/dist/es/commands.js

@@ -141,6 +141,11 @@ export const createBlock = (nodeType, position, state, dispatch, attrs) => {
                 state.schema.nodes.equation.create(),
             ]);
             break;
+        case state.schema.nodes.embed:
+            node = state.schema.nodes.embed.create(attrs, [
+                createAndFillFigcaptionElement(state),
+            ]);
+            break;
         default:
             node = nodeType.createAndFill(attrs);
     }
@@ -150,6 +155,14 @@ export const createBlock = (nodeType, position, state, dispatch, attrs) => {
         dispatch(tr.setSelection(selection).scrollIntoView());
     }
 };
+export const insertEmbed = (state, dispatch, attrs) => {
+    const position = findBlockInsertPosition(state);
+    if (position === null) {
+        return false;
+    }
+    createBlock(schema.nodes.embed, position, state, dispatch, attrs);
+    return true;
+};
 export const insertInlineTableFootnote = (state, dispatch) => {
     const $pos = state.selection.$to;
     const table = findParentNodeOfTypeClosestToPos($pos, schema.nodes.table);

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

@@ -0,0 +1,127 @@
+/*!
+ * © 2024 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ButtonGroup, DialogModalBody, MessageContainer, PrimaryBoldHeading, PrimaryButton, PrimarySmallText, SecondaryButton, StyledModal, TextArea, } from '@manuscripts/style-guide';
+import { debounce } from 'lodash';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { insertEmbed } from '../../commands';
+import { getOEmbedHTML, getOEmbedUrl } from '../../lib/oembed';
+import { allowedHref } from '../../lib/url';
+import { getEditorProps } from '../../plugins/editor-props';
+import ReactSubView from '../../views/ReactSubView';
+import { FieldHeading, Open } from '../views/LinkForm';
+const Label = styled.label `
+  padding-bottom: 4px;
+`;
+const HeaderContainer = styled(PrimaryBoldHeading) `
+  font-size: ${(props) => props.theme.font.size.large};
+`;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 16px;
+`;
+const DialogContainer = styled(DialogModalBody) `
+  min-width: 750px;
+`;
+const PreviewContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  padding: 6px ${(props) => props.theme.grid.unit * 4}px;
+`;
+export const InsertEmbedDialog = ({ state, dispatch, operation, }) => {
+    const [isOpen, setOpen] = useState(true);
+    const [url, setUrl] = useState(undefined);
+    const [oembedHTML, setOEmbedHTML] = useState(undefined);
+    const action = () => {
+        if (operation === 'Insert') {
+            insertEmbed(state, dispatch, { href: url });
+            setOpen(false);
+        }
+        else {
+        }
+    };
+    const debouncedUrlChange = debounce((e) => __awaiter(void 0, void 0, void 0, function* () {
+        const url = e.target.value.trim();
+        const oEmbedUrl = yield getOEmbedUrl(url, 368, 217);
+        if (oEmbedUrl) {
+            const oembedJSON = yield getOEmbedHTML(oEmbedUrl, url);
+            setOEmbedHTML(oembedJSON);
+        }
+        setUrl(url);
+    }), 500);
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
+        React.createElement(DialogContainer, null,
+            React.createElement(HeaderContainer, null,
+                operation,
+                " external media"),
+            React.createElement(MessageContainer, null,
+                React.createElement(Container, null,
+                    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, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: debouncedUrlChange })),
+                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)))));
+};
+const Wrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+`;
+const NoPreviewMessage = () => (React.createElement(PreviewContainer, null,
+    React.createElement(Wrapper, null, "Preview not available")));
+const NoPreviewContainer = styled(PreviewContainer) `
+  flex-direction: column;
+  background: #fafafa;
+  padding: 16px 56px 16px 48px;
+`;
+const Heading = styled(PrimaryBoldHeading) `
+  font-size: ${(props) => props.theme.font.size.medium};
+`;
+export const NoPreviewMessageWithLink = ({ href, }) => (React.createElement(NoPreviewContainer, null,
+    React.createElement(Heading, null, "Preview currently not available"),
+    React.createElement(PrimarySmallText, null,
+        React.createElement("a", { href: href, target: '_blank', rel: "noreferrer" }, "Click here"),
+        ' ',
+        "to see the source media")));
+export const openEmbedDialog = (view, operation = 'Insert') => {
+    if (!view) {
+        return;
+    }
+    const { state, dispatch } = view;
+    const dialog = ReactSubView(getEditorProps(state), InsertEmbedDialog, {
+        state,
+        dispatch,
+        operation,
+    }, state.doc, () => 0, view);
+    document.body.appendChild(dialog);
+};

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

@@ -37,7 +37,7 @@ const ActionGroup = styled.span `
 const Field = styled.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const FieldHeading = styled.div `
+export const FieldHeading = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -49,7 +49,7 @@ const Label = styled.label `
   color: ${(props) => props.theme.colors.text.tertiary};
   font-size: ${(props) => props.theme.font.size.normal};
 `;
-const Open = styled.a `
+export const Open = styled.a `
   display: inline-block;
   margin-left: ${(props) => props.theme.grid.unit * 2}px;
   text-transform: uppercase;

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

@@ -23,6 +23,7 @@ import boxElement from '../views/box_element';
 import citation from '../views/citation_editable';
 import contributors from '../views/contributors';
 import crossReference from '../views/cross_reference_editable';
+import embed from '../views/embed';
 import empty from '../views/empty';
 import equation from '../views/equation_editable';
 import equationElement from '../views/equation_element_editable';
@@ -59,6 +60,7 @@ export default (props, dispatch) => {
         cross_reference: crossReference(props, dispatch),
         contributors: contributors(props, dispatch),
         affiliations: affiliations(props, dispatch),
+        embed: embed(props),
         equation: equation(props),
         equation_element: equationElement(props),
         figure: figure(props, dispatch),

package/dist/es/lib/oembed.js

@@ -0,0 +1,85 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import providers from 'oembed-providers';
+export const getOEmbedUrl = (url, width, height) => __awaiter(void 0, void 0, void 0, function* () {
+    let oembedUrl;
+    for (const provider of providers) {
+        if (provider) {
+            const { provider_url, endpoints } = provider;
+            for (const endpoint of endpoints) {
+                if (endpoint.schemes &&
+                    endpoint.schemes.find((schema) => globToRegex(schema).test(url))) {
+                    oembedUrl = endpoint.url.replace('{format}', 'json');
+                    break;
+                }
+                else if (!endpoint.schemes && url.startsWith(provider_url)) {
+                    oembedUrl = endpoint.url.replace('{format}', 'json');
+                    break;
+                }
+            }
+        }
+    }
+    if (oembedUrl) {
+        const params = new URLSearchParams();
+        params.append('url', url);
+        params.set('format', 'json');
+        params.append('maxwidth', width.toString());
+        params.append('maxheight', height.toString());
+        return `${oembedUrl}?${params.toString()}`;
+    }
+    else {
+        try {
+            const response = yield fetch(url, { method: 'HEAD' });
+            let oembedUrl;
+            const linkHeader = response.headers.get('link');
+            if (linkHeader) {
+                linkHeader.split(',').map((link) => {
+                    const typeMatch = /type="([^"]*)"/.exec(link);
+                    if (typeMatch &&
+                        (typeMatch[1] === 'application/json+oembed' ||
+                            typeMatch[1] === 'text/xml+oembed')) {
+                        oembedUrl = /<([^>]*)>/.exec(link);
+                    }
+                });
+            }
+            return oembedUrl;
+        }
+        catch (e) {
+            return undefined;
+        }
+    }
+});
+const globToRegex = (glob) => {
+    const regex = glob
+        .replace(/\./g, '\\.')
+        .replace(/\*/g, '.*');
+    return new RegExp(`^${regex}$`);
+};
+export const getOEmbedHTML = (oembedUrl, sourceLink) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield fetch(oembedUrl);
+        if (response.status === 200) {
+            const oembed = yield response.json();
+            return oembed.html || renderAlternativeHTML(oembed, sourceLink);
+        }
+        else {
+            return undefined;
+        }
+    }
+    catch (e) {
+        return undefined;
+    }
+});
+const renderAlternativeHTML = (oembed, sourceLink) => {
+    if (oembed.type === 'photo') {
+        return `<img src="${oembed.url}">`;
+    }
+    return `<a href="${sourceLink}" target="_blank">${oembed.title || 'Media link'}</a>`;
+};

package/dist/es/menus.js

@@ -17,6 +17,7 @@ import { getGroupCateogries, schema, } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { addInlineComment, blockActive, canInsert, insertAbstract, insertAffiliation, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertGraphicalAbstract, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, } from './commands';
+import { openEmbedDialog } from './components/toolbar/InsertEmbedDialog';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { ListMenuItem } from './components/toolbar/ListMenuItem';
 import { deleteClosestParentElement, findClosestParentElementNodeName, } from './lib/hierarchy';
@@ -202,6 +203,13 @@ export const getEditorMenus = (editor) => {
             {
                 role: 'separator',
             },
+            {
+                id: 'insert-embed-media',
+                label: 'Embedded Media',
+                isActive: blockActive(schema.nodes.embed)(state),
+                isEnabled: isCommandValid(canInsert(schema.nodes.embed)),
+                run: () => openEmbedDialog(editor.view),
+            },
             {
                 id: 'insert-link',
                 label: 'Link',

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.7.3';
+export const VERSION = '2.7.4-LEAN-4218.0';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/embed.js

@@ -0,0 +1,77 @@
+/*!
+ * © 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { NoPreviewMessageWithLink } from '../components/toolbar/InsertEmbedDialog';
+import { getOEmbedHTML, getOEmbedUrl } from '../lib/oembed';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
+export class EmbedMediaView extends BlockView {
+    constructor() {
+        super(...arguments);
+        this.ignoreMutation = () => true;
+        this.stopEvent = () => true;
+        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);
+        };
+    }
+    updateContents() {
+        const _super = Object.create(null, {
+            updateContents: { get: () => super.updateContents }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.updateContents.call(this);
+            if (this.href !== this.node.attrs.href) {
+                this.href = this.node.attrs.href;
+                yield this.updateOEmbedPreview();
+            }
+        });
+    }
+    updateOEmbedPreview() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const preview = document.createElement('div');
+            preview.classList.add('embed-media-preview');
+            preview.setAttribute('contenteditable', 'false');
+            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;
+                }
+            }
+            this.showUnavailableMessage(preview);
+        });
+    }
+    showUnavailableMessage(preview) {
+        preview.appendChild(ReactSubView(this.props, NoPreviewMessageWithLink, { href: this.node.attrs.href }, this.node, this.getPos, this.view));
+    }
+}
+export default createNodeView(EmbedMediaView);

package/dist/types/commands.d.ts

@@ -27,6 +27,7 @@ export declare const blockActive: (type: ManuscriptNodeType) => (state: Manuscri
 export declare const canInsert: (type: ManuscriptNodeType) => (state: ManuscriptEditorState) => boolean;
 export declare const createSelection: (nodeType: ManuscriptNodeType, position: number, doc: ManuscriptNode) => Selection;
 export declare const createBlock: (nodeType: ManuscriptNodeType, position: number, state: ManuscriptEditorState, dispatch?: Dispatch, attrs?: Attrs) => void;
+export declare const insertEmbed: (state: ManuscriptEditorState, dispatch?: Dispatch, attrs?: Attrs) => boolean;
 export declare const insertInlineTableFootnote: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertGeneralTableFootnote: (element: [ManuscriptNode, number], state: ManuscriptEditorState, dispatch?: Dispatch) => boolean | undefined;
 export declare const insertFigure: (file: FileAttachment, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

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

@@ -0,0 +1,29 @@
+/*!
+ * © 2024 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 { ManuscriptEditorState } from '@manuscripts/transform';
+import { EditorView } from 'prosemirror-view';
+import React from 'react';
+import { Dispatch } from '../../commands';
+export type InsertEmbedDialogProps = {
+    state: ManuscriptEditorState;
+    dispatch?: Dispatch;
+    operation: 'Insert' | 'Update';
+};
+export declare const InsertEmbedDialog: React.FC<InsertEmbedDialogProps>;
+export declare const NoPreviewMessageWithLink: React.FC<{
+    href: string;
+}>;
+export declare const openEmbedDialog: (view?: EditorView, operation?: string) => void;

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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
+export declare const FieldHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Open: import("styled-components").StyledComponent<"a", any, {}, never>;
 export interface LinkValue {
     text: string;
     href: string;

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

@@ -49,6 +49,7 @@ declare const _default: (props: EditorProps, dispatch: Dispatch) => {
     cross_reference: import("../types").NodeViewCreator<import("../views/cross_reference_editable").CrossReferenceEditableView>;
     contributors: import("../types").NodeViewCreator<import("../views/contributors").ContributorsView>;
     affiliations: import("../types").NodeViewCreator<import("../views/affiliations").AffiliationsView>;
+    embed: import("../types").NodeViewCreator<import("../views/embed").EmbedMediaView>;
     equation: import("../types").NodeViewCreator<import("../views/equation_editable").EquationEditableView>;
     equation_element: import("../types").NodeViewCreator<{
         gutterButtons(): HTMLElement[];

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

@@ -0,0 +1,8 @@
+export type ProviderJson = {
+    type: 'photo' | 'video' | 'link' | 'rich';
+    html?: string;
+    url?: string;
+    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>;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.7.3";
+export declare const VERSION = "2.7.4-LEAN-4218.0";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -0,0 +1,30 @@
+/*!
+ * © 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 { EmbedNode } from '@manuscripts/transform';
+import { Trackable } from '../types';
+import BlockView from './block_view';
+export declare class EmbedMediaView extends BlockView<Trackable<EmbedNode>> {
+    private container;
+    private href;
+    ignoreMutation: () => boolean;
+    stopEvent: () => boolean;
+    createElement: () => void;
+    updateContents(): Promise<void>;
+    private updateOEmbedPreview;
+    private showUnavailableMessage;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<EmbedMediaView>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.7.3",
+  "version": "2.7.4-LEAN-4218.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -34,7 +34,7 @@
     "@manuscripts/library": "1.3.11",
     "@manuscripts/style-guide": "2.0.28",
     "@manuscripts/track-changes-plugin": "1.9.1",
-    "@manuscripts/transform": "3.0.32",
+    "@manuscripts/transform": "3.0.33-LEAN-4218.0",
     "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
     "codemirror": "^5.58.1",
@@ -43,6 +43,7 @@
     "grapheme-splitter": "^1.0.4",
     "history": "^4.10.1",
     "mathjax": "3.2.2",
+    "oembed-providers": "^1.0.20241022",
     "prosemirror-collab": "^1.3.1",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-dropcursor": "^1.6.1",

package/styles/AdvancedEditor.css

@@ -1071,4 +1071,25 @@ th:hover > .table-context-menu-button,
 .ProseMirror .block-contributors .action-gutter {
   right: 15px;
   pointer-events: none;
-}
+}
+
+.ProseMirror .block-embed {
+  grid-template-columns: none;
+}
+
+.ProseMirror .block-embed .block {
+  text-align: center;
+  margin: 0 52px;
+}
+
+.tracking-visible .ProseMirror .block-embed[data-track-status='pending'][data-track-op='delete'] .block > * {
+  opacity: 0.5
+}
+
+.ProseMirror .block-embed .tools-panel {
+  position: relative;
+}
+
+.ProseMirror .block-embed .block-gutter, .block-embed .action-gutter {
+  display: none;
+}