@manuscripts/body-editor 2.7.9-LEAN-4096.2 → 2.7.9

package/dist/cjs/commands.js

@@ -15,7 +15,8 @@
  * 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.insertAward = 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.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.insertAward = 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;
+exports.autoComplete = 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 +151,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 +166,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/outline/DraggableTree.js

@@ -44,7 +44,6 @@ const excludedTypes = [
     transform_1.schema.nodes.contributors,
     transform_1.schema.nodes.author_notes,
     transform_1.schema.nodes.title,
-    transform_1.schema.nodes.embed,
     transform_1.schema.nodes.image_element,
 ];
 const childrenExcludedTypes = [

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/FigureDropdown.js

@@ -3,10 +3,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FigureOptions = void 0;
+exports.FigureOptions = exports.FigureElementOptions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const FigureElementOptions = ({ can, files, onAdd, onUpload, hasUploadedImage, }) => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
+    const supplements = files.supplements
+        .map((s) => s.file)
+        .filter((f) => (0, style_guide_1.isImageFile)(f.name));
+    const others = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
+    return (react_1.default.createElement(FilesDropdownWrapper, { onClick: toggleOpen, ref: wrapperRef },
+        react_1.default.createElement(FilesButton, { disabled: hasUploadedImage },
+            react_1.default.createElement(style_guide_1.AttachIcon, null)),
+        isOpen && (react_1.default.createElement(style_guide_1.DropdownList, { direction: 'left', width: 208, height: 187, onClick: toggleOpen, top: 7 },
+            react_1.default.createElement(NestedDropdown, { disabled: !can.replaceFile || supplements.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Supplements', list: react_1.default.createElement(react_1.default.Fragment, null, supplements.map((file) => (react_1.default.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
+                    (0, style_guide_1.getFileIcon)(file.name),
+                    react_1.default.createElement(ListItemText, null, file.name))))) }),
+            react_1.default.createElement(NestedDropdown, { disabled: !can.replaceFile || others.length < 1, parentToggleOpen: toggleOpen, buttonText: 'Other files', list: react_1.default.createElement(react_1.default.Fragment, null, others.map((file) => (react_1.default.createElement(ListItemButton, { key: file.id, onClick: () => onAdd(file) },
+                    (0, style_guide_1.getFileIcon)(file.name),
+                    react_1.default.createElement(ListItemText, null, file.name))))) }),
+            react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !can.uploadFile },
+                react_1.default.createElement(style_guide_1.AddIcon, null),
+                " New file...")))));
+};
+exports.FigureElementOptions = FigureElementOptions;
 const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
     const otherFiles = files.others.filter((f) => (0, style_guide_1.isImageFile)(f.name));
@@ -18,6 +39,7 @@ const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace,
         react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
             react_1.default.createElement(style_guide_1.DotsIcon, null)),
         isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
+            react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
             react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: 'Replace', moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
                     otherFiles.map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         (0, style_guide_1.getFileIcon)(file.name),
@@ -25,7 +47,6 @@ const FigureOptions = ({ can, files, onDownload, onUpload, onDetach, onReplace,
                     react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
                         react_1.default.createElement(style_guide_1.UploadIcon, null),
                         " Upload new...")) }),
-            react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download"),
             react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")))));
 };
 exports.FigureOptions = FigureOptions;
@@ -54,6 +75,9 @@ const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton)
   margin: ${(props) => props.theme.grid.unit}px;
   visibility: hidden;
   background: white;
+  position: absolute;
+  top: -4px;
+  right: 4%;
 
   &:hover {
     background: #f2fbfc !important;
@@ -95,6 +119,24 @@ const ListItemText = styled_components_1.default.div `
   text-overflow: ellipsis;
   text-align: start;
 `;
+const FilesButton = (0, styled_components_1.default)(style_guide_1.RoundIconButton) `
+  path {
+    stroke: #6e6e6e;
+  }
+
+  &:active,
+  &:focus {
+    path {
+      stroke: #1a9bc7;
+    }
+  }
+`;
+const FilesDropdownWrapper = styled_components_1.default.div `
+  position: absolute;
+  top: 8px;
+  left: 70px;
+  z-index: 1;
+`;
 const NestedListButton = (0, styled_components_1.default)(ListItemButton) `
   width: 100%;
   &:active,

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-plugins.js

@@ -34,7 +34,6 @@ const doi_1 = __importDefault(require("../plugins/doi"));
 const editor_props_1 = __importDefault(require("../plugins/editor-props"));
 const elements_1 = __importDefault(require("../plugins/elements"));
 const footnotes_1 = __importDefault(require("../plugins/footnotes"));
-const inspector_actions_1 = __importDefault(require("../plugins/inspector-actions"));
 const objects_1 = __importDefault(require("../plugins/objects"));
 const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
@@ -76,7 +75,6 @@ exports.default = (props) => {
         (0, doi_1.default)(),
         (0, section_category_1.default)(props),
         (0, cross_references_1.default)(),
-        (0, inspector_actions_1.default)(),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

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/index.js

@@ -68,4 +68,3 @@ Object.defineProperty(exports, "metadata", { enumerable: true, get: function ()
 var authors_1 = require("./lib/authors");
 Object.defineProperty(exports, "authorLabel", { enumerable: true, get: function () { return authors_1.authorLabel; } });
 Object.defineProperty(exports, "affiliationLabel", { enumerable: true, get: function () { return authors_1.affiliationLabel; } });
-__exportStar(require("./plugins/inspector-actions"), exports);

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

@@ -16,13 +16,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = exports.contextMenuBtnClass = exports.sectionLevel = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
-const react_1 = require("react");
-const server_1 = require("react-dom/server");
 const commands_1 = require("../commands");
-const figure_1 = require("../views/figure");
 const popper_1 = require("./popper");
 const utils_1 = require("./utils");
 const popper = new popper_1.PopperManager();
@@ -46,8 +42,6 @@ const hasAny = (set, ...items) => {
     return items.some((i) => set.has(i));
 };
 exports.contextMenuBtnClass = 'btn-context-menu';
-const contextSubmenuBtnClass = 'context-submenu-trigger';
-const contextSubmenuClass = 'context-submenu';
 class ContextMenu {
     constructor(node, view, getPos, actions = {}) {
         this.showAddMenu = (target, after) => {
@@ -156,36 +150,6 @@ class ContextMenu {
             const $pos = this.resolvePos();
             const isBox = isBoxElementSectionTitle($pos, this.node);
             const type = isBox ? transform_1.schema.nodes.box_element : this.node.type;
-            if (type === transform_1.schema.nodes.figure_element) {
-                const figure = (0, utils_1.getMatchingChild)(this.node, (node) => node.type === transform_1.schema.nodes.figure);
-                if (figure) {
-                    const attrType = figure.attrs.type;
-                    const { state, dispatch } = this.view;
-                    const submenuOptions = [
-                        {
-                            title: 'Left',
-                            action: () => (0, utils_1.updateNodeAttributes)(state, dispatch, figure.attrs.id, Object.assign(Object.assign({}, figure.attrs), { type: figure_1.figurePositions.left })),
-                            Icon: style_guide_1.ImageLeftIcon,
-                            selected: attrType === figure_1.figurePositions.left,
-                        },
-                        {
-                            title: 'Default',
-                            action: () => (0, utils_1.updateNodeAttributes)(state, dispatch, figure.attrs.id, Object.assign(Object.assign({}, figure.attrs), { type: figure_1.figurePositions.default })),
-                            Icon: style_guide_1.ImageDefaultIcon,
-                            selected: !attrType,
-                        },
-                        {
-                            title: 'Right',
-                            action: () => (0, utils_1.updateNodeAttributes)(state, dispatch, figure.attrs.id, Object.assign(Object.assign({}, figure.attrs), { type: figure_1.figurePositions.right })),
-                            Icon: style_guide_1.ImageRightIcon,
-                            selected: attrType === figure_1.figurePositions.right,
-                        },
-                    ];
-                    const submenuLabel = 'Position';
-                    const submenu = this.createSubmenu(submenuLabel, submenuOptions);
-                    menu.appendChild(submenu);
-                }
-            }
             if (type === transform_1.schema.nodes.list) {
                 menu.appendChild(this.createMenuSection((section) => {
                     const attrs = this.node.attrs;
@@ -250,48 +214,22 @@ class ContextMenu {
             popper.show(target, menu, 'right', true);
             this.addPopperEventListeners();
         };
-        this.createSubmenuTrigger = (contents) => {
-            const item = document.createElement('div');
-            item.className = 'menu-item';
-            const textNode = document.createTextNode(contents);
-            item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.TriangleCollapsedIcon));
-            item.prepend(textNode);
-            item.classList.add(contextSubmenuBtnClass);
-            item.addEventListener('mousedown', this.toggleSubmenu);
-            return item;
-        };
-        this.createMenuItem = (contents, handler, Icon = null, selected = false) => {
+        this.createMenuItem = (contents, handler) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
-            selected && item.classList.add('selected');
-            if (Icon) {
-                item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(Icon));
-            }
-            const textNode = document.createTextNode(contents);
-            item.appendChild(textNode);
+            item.textContent = contents;
             item.addEventListener('mousedown', (event) => {
                 event.preventDefault();
                 handler(event);
             });
             return item;
         };
-        this.createMenuSection = (createMenuItems, isSubmenu = false) => {
+        this.createMenuSection = (createMenuItems) => {
             const section = document.createElement('div');
             section.className = 'menu-section';
-            isSubmenu && section.classList.add('menu');
             createMenuItems(section);
             return section;
         };
-        this.createSubmenu = (submenuLabel, items) => {
-            const submenu = document.createElement('div');
-            submenu.classList.add('menu-section', contextSubmenuClass);
-            submenu.append(this.createSubmenuTrigger(submenuLabel), this.createMenuSection((section) => {
-                items.forEach(({ title, action, Icon, selected }) => {
-                    section.appendChild(this.createMenuItem(title, action, Icon, selected));
-                });
-            }, true));
-            return submenu;
-        };
         this.insertableTypes = (after, insertPos, endPos) => {
             const { nodes } = transform_1.schema;
             const insertable = new Set();
@@ -353,8 +291,7 @@ class ContextMenu {
         this.addPopperEventListeners = () => {
             const mouseListener = (event) => {
                 const target = event.target;
-                if (target.classList.contains(exports.contextMenuBtnClass) ||
-                    target.classList.contains(contextSubmenuBtnClass)) {
+                if (target.classList.contains(exports.contextMenuBtnClass)) {
                     return;
                 }
                 window.requestAnimationFrame(() => {
@@ -386,10 +323,6 @@ class ContextMenu {
             }
             return this.node;
         };
-        this.toggleSubmenu = (ev) => {
-            const submenu = ev.target.nextElementSibling;
-            submenu === null || submenu === void 0 ? void 0 : submenu.classList.toggle('show');
-        };
         this.node = node;
         this.view = view;
         this.getPos = getPos;

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/lib/utils.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateNodeAttributes = exports.createHeader = exports.isSelectionInNode = exports.isChildOfNodeTypes = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = exports.iterateChildren = void 0;
+exports.createHeader = exports.isSelectionInNode = exports.isChildOfNodeTypes = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = exports.iterateChildren = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 function* iterateChildren(node, recurse = false) {
@@ -86,18 +86,3 @@ const createHeader = (typeName, text) => {
     return header;
 };
 exports.createHeader = createHeader;
-const updateNodeAttributes = (state, dispatch, id, attrs) => {
-    let nodePosition = -1;
-    state.doc.descendants((node, pos) => {
-        if (node.attrs.id === id) {
-            nodePosition = pos;
-            return true;
-        }
-    });
-    if (nodePosition !== -1) {
-        dispatch(state.tr.setNodeMarkup(nodePosition, null, attrs));
-        return true;
-    }
-    return false;
-};
-exports.updateNodeAttributes = updateNodeAttributes;

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");
@@ -211,6 +212,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',