@manuscripts/body-editor 2.7.7-LEAN-4218.0 → 2.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/cjs/commands.js +1 -16
  2. package/dist/cjs/components/outline/DraggableTree.js +1 -0
  3. package/dist/cjs/components/views/LinkForm.js +7 -7
  4. package/dist/cjs/configs/editor-views.js +0 -2
  5. package/dist/cjs/lib/helpers.js +0 -5
  6. package/dist/cjs/menus.js +0 -8
  7. package/dist/cjs/node-type-icons.js +0 -1
  8. package/dist/cjs/versions.js +1 -1
  9. package/dist/cjs/views/footnote.js +1 -5
  10. package/dist/cjs/views/inline_footnote.js +5 -9
  11. package/dist/es/commands.js +0 -13
  12. package/dist/es/components/outline/DraggableTree.js +1 -0
  13. package/dist/es/components/views/LinkForm.js +2 -2
  14. package/dist/es/configs/editor-views.js +0 -2
  15. package/dist/es/lib/helpers.js +1 -6
  16. package/dist/es/menus.js +0 -8
  17. package/dist/es/node-type-icons.js +1 -2
  18. package/dist/es/versions.js +1 -1
  19. package/dist/es/views/footnote.js +2 -6
  20. package/dist/es/views/inline_footnote.js +5 -9
  21. package/dist/types/commands.d.ts +0 -1
  22. package/dist/types/components/views/LinkForm.d.ts +0 -2
  23. package/dist/types/configs/editor-views.d.ts +0 -1
  24. package/dist/types/versions.d.ts +1 -1
  25. package/dist/types/views/inline_footnote.d.ts +1 -1
  26. package/package.json +3 -4
  27. package/styles/AdvancedEditor.css +2 -23
  28. package/styles/Editor.css +10 -28
  29. package/dist/cjs/components/toolbar/InsertEmbedDialog.js +0 -159
  30. package/dist/cjs/lib/oembed.js +0 -93
  31. package/dist/cjs/views/embed.js +0 -84
  32. package/dist/es/components/toolbar/InsertEmbedDialog.js +0 -127
  33. package/dist/es/lib/oembed.js +0 -85
  34. package/dist/es/views/embed.js +0 -77
  35. package/dist/types/components/toolbar/InsertEmbedDialog.d.ts +0 -29
  36. package/dist/types/lib/oembed.d.ts +0 -8
  37. package/dist/types/views/embed.d.ts +0 -30
@@ -1,159 +0,0 @@
1
- "use strict";
2
- /*!
3
- * © 2024 Atypon Systems LLC
4
- *
5
- * Licensed under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License.
7
- * You may obtain a copy of the License at
8
- *
9
- * http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software
12
- * distributed under the License is distributed on an "AS IS" BASIS,
13
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
- * See the License for the specific language governing permissions and
15
- * limitations under the License.
16
- */
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
41
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
42
- return new (P || (P = Promise))(function (resolve, reject) {
43
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
44
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
45
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
46
- step((generator = generator.apply(thisArg, _arguments || [])).next());
47
- });
48
- };
49
- var __importDefault = (this && this.__importDefault) || function (mod) {
50
- return (mod && mod.__esModule) ? mod : { "default": mod };
51
- };
52
- Object.defineProperty(exports, "__esModule", { value: true });
53
- exports.openEmbedDialog = exports.NoPreviewMessageWithLink = exports.InsertEmbedDialog = void 0;
54
- const style_guide_1 = require("@manuscripts/style-guide");
55
- const lodash_1 = require("lodash");
56
- const react_1 = __importStar(require("react"));
57
- const styled_components_1 = __importDefault(require("styled-components"));
58
- const commands_1 = require("../../commands");
59
- const oembed_1 = require("../../lib/oembed");
60
- const url_1 = require("../../lib/url");
61
- const editor_props_1 = require("../../plugins/editor-props");
62
- const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
63
- const LinkForm_1 = require("../views/LinkForm");
64
- const Label = styled_components_1.default.label `
65
- padding-bottom: 4px;
66
- `;
67
- const HeaderContainer = (0, styled_components_1.default)(style_guide_1.PrimaryBoldHeading) `
68
- font-size: ${(props) => props.theme.font.size.large};
69
- `;
70
- const Container = styled_components_1.default.div `
71
- display: flex;
72
- flex-direction: column;
73
- padding-bottom: 16px;
74
- `;
75
- const DialogContainer = (0, styled_components_1.default)(style_guide_1.DialogModalBody) `
76
- min-width: 750px;
77
- `;
78
- const PreviewContainer = styled_components_1.default.div `
79
- display: flex;
80
- justify-content: center;
81
- border: 1px solid ${(props) => props.theme.colors.border.field.default};
82
- border-radius: ${(props) => props.theme.grid.radius.small};
83
- padding: 6px ${(props) => props.theme.grid.unit * 4}px;
84
- `;
85
- const InsertEmbedDialog = ({ state, dispatch, operation, }) => {
86
- const [isOpen, setOpen] = (0, react_1.useState)(true);
87
- const [url, setUrl] = (0, react_1.useState)(undefined);
88
- const [oembedHTML, setOEmbedHTML] = (0, react_1.useState)(undefined);
89
- const action = () => {
90
- if (operation === 'Insert') {
91
- (0, commands_1.insertEmbed)(state, dispatch, { href: url });
92
- setOpen(false);
93
- }
94
- else {
95
- }
96
- };
97
- const debouncedUrlChange = (0, lodash_1.debounce)((e) => __awaiter(void 0, void 0, void 0, function* () {
98
- const url = e.target.value.trim();
99
- const oEmbedUrl = yield (0, oembed_1.getOEmbedUrl)(url, 368, 217);
100
- if (oEmbedUrl) {
101
- const oembedJSON = yield (0, oembed_1.getOEmbedHTML)(oEmbedUrl, url);
102
- setOEmbedHTML(oembedJSON);
103
- }
104
- setUrl(url);
105
- }), 500);
106
- return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
107
- react_1.default.createElement(DialogContainer, null,
108
- react_1.default.createElement(HeaderContainer, null,
109
- operation,
110
- " external media"),
111
- react_1.default.createElement(style_guide_1.MessageContainer, null,
112
- react_1.default.createElement(Container, null,
113
- react_1.default.createElement(LinkForm_1.FieldHeading, null,
114
- react_1.default.createElement(Label, { htmlFor: 'embed-link' }, "Media link"),
115
- url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(LinkForm_1.Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' }))),
116
- 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 })),
117
- url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(Container, null,
118
- react_1.default.createElement(Label, null, "Preview"),
119
- (oembedHTML && (react_1.default.createElement(PreviewContainer, { dangerouslySetInnerHTML: { __html: oembedHTML } }))) || react_1.default.createElement(NoPreviewMessage, null)))),
120
- react_1.default.createElement(style_guide_1.ButtonGroup, null,
121
- react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: () => setOpen(false) }, "Cancel"),
122
- react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: action, disabled: !(url && (0, url_1.allowedHref)(url)) }, operation)))));
123
- };
124
- exports.InsertEmbedDialog = InsertEmbedDialog;
125
- const Wrapper = styled_components_1.default.div `
126
- display: flex;
127
- justify-content: center;
128
- padding: 50px 0;
129
- `;
130
- const NoPreviewMessage = () => (react_1.default.createElement(PreviewContainer, null,
131
- react_1.default.createElement(Wrapper, null, "Preview not available")));
132
- const NoPreviewContainer = (0, styled_components_1.default)(PreviewContainer) `
133
- flex-direction: column;
134
- background: #fafafa;
135
- padding: 16px 56px 16px 48px;
136
- `;
137
- const Heading = (0, styled_components_1.default)(style_guide_1.PrimaryBoldHeading) `
138
- font-size: ${(props) => props.theme.font.size.medium};
139
- `;
140
- const NoPreviewMessageWithLink = ({ href, }) => (react_1.default.createElement(NoPreviewContainer, null,
141
- react_1.default.createElement(Heading, null, "Preview currently not available"),
142
- react_1.default.createElement(style_guide_1.PrimarySmallText, null,
143
- react_1.default.createElement("a", { href: href, target: '_blank', rel: "noreferrer" }, "Click here"),
144
- ' ',
145
- "to see the source media")));
146
- exports.NoPreviewMessageWithLink = NoPreviewMessageWithLink;
147
- const openEmbedDialog = (view, operation = 'Insert') => {
148
- if (!view) {
149
- return;
150
- }
151
- const { state, dispatch } = view;
152
- const dialog = (0, ReactSubView_1.default)((0, editor_props_1.getEditorProps)(state), exports.InsertEmbedDialog, {
153
- state,
154
- dispatch,
155
- operation,
156
- }, state.doc, () => 0, view);
157
- document.body.appendChild(dialog);
158
- };
159
- exports.openEmbedDialog = openEmbedDialog;
@@ -1,93 +0,0 @@
1
- "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- var __importDefault = (this && this.__importDefault) || function (mod) {
12
- return (mod && mod.__esModule) ? mod : { "default": mod };
13
- };
14
- Object.defineProperty(exports, "__esModule", { value: true });
15
- exports.getOEmbedHTML = exports.getOEmbedUrl = void 0;
16
- const oembed_providers_1 = __importDefault(require("oembed-providers"));
17
- const getOEmbedUrl = (url, width, height) => __awaiter(void 0, void 0, void 0, function* () {
18
- let oembedUrl;
19
- for (const provider of oembed_providers_1.default) {
20
- if (provider) {
21
- const { provider_url, endpoints } = provider;
22
- for (const endpoint of endpoints) {
23
- if (endpoint.schemes &&
24
- endpoint.schemes.find((schema) => globToRegex(schema).test(url))) {
25
- oembedUrl = endpoint.url.replace('{format}', 'json');
26
- break;
27
- }
28
- else if (!endpoint.schemes && url.startsWith(provider_url)) {
29
- oembedUrl = endpoint.url.replace('{format}', 'json');
30
- break;
31
- }
32
- }
33
- }
34
- }
35
- if (oembedUrl) {
36
- const params = new URLSearchParams();
37
- params.append('url', url);
38
- params.set('format', 'json');
39
- params.append('maxwidth', width.toString());
40
- params.append('maxheight', height.toString());
41
- return `${oembedUrl}?${params.toString()}`;
42
- }
43
- else {
44
- try {
45
- const response = yield fetch(url, { method: 'HEAD' });
46
- let oembedUrl;
47
- const linkHeader = response.headers.get('link');
48
- if (linkHeader) {
49
- linkHeader.split(',').map((link) => {
50
- const typeMatch = /type="([^"]*)"/.exec(link);
51
- if (typeMatch &&
52
- (typeMatch[1] === 'application/json+oembed' ||
53
- typeMatch[1] === 'text/xml+oembed')) {
54
- oembedUrl = /<([^>]*)>/.exec(link);
55
- }
56
- });
57
- }
58
- return oembedUrl;
59
- }
60
- catch (e) {
61
- return undefined;
62
- }
63
- }
64
- });
65
- exports.getOEmbedUrl = getOEmbedUrl;
66
- const globToRegex = (glob) => {
67
- const regex = glob
68
- .replace(/\./g, '\\.')
69
- .replace(/\*/g, '.*');
70
- return new RegExp(`^${regex}$`);
71
- };
72
- const getOEmbedHTML = (oembedUrl, sourceLink) => __awaiter(void 0, void 0, void 0, function* () {
73
- try {
74
- const response = yield fetch(oembedUrl);
75
- if (response.status === 200) {
76
- const oembed = yield response.json();
77
- return oembed.html || renderAlternativeHTML(oembed, sourceLink);
78
- }
79
- else {
80
- return undefined;
81
- }
82
- }
83
- catch (e) {
84
- return undefined;
85
- }
86
- });
87
- exports.getOEmbedHTML = getOEmbedHTML;
88
- const renderAlternativeHTML = (oembed, sourceLink) => {
89
- if (oembed.type === 'photo') {
90
- return `<img src="${oembed.url}">`;
91
- }
92
- return `<a href="${sourceLink}" target="_blank">${oembed.title || 'Media link'}</a>`;
93
- };
@@ -1,84 +0,0 @@
1
- "use strict";
2
- /*!
3
- * © 2019 Atypon Systems LLC
4
- *
5
- * Licensed under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License.
7
- * You may obtain a copy of the License at
8
- *
9
- * http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software
12
- * distributed under the License is distributed on an "AS IS" BASIS,
13
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
- * See the License for the specific language governing permissions and
15
- * limitations under the License.
16
- */
17
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
18
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
19
- return new (P || (P = Promise))(function (resolve, reject) {
20
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
21
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
22
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
23
- step((generator = generator.apply(thisArg, _arguments || [])).next());
24
- });
25
- };
26
- var __importDefault = (this && this.__importDefault) || function (mod) {
27
- return (mod && mod.__esModule) ? mod : { "default": mod };
28
- };
29
- Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.EmbedMediaView = void 0;
31
- const InsertEmbedDialog_1 = require("../components/toolbar/InsertEmbedDialog");
32
- const oembed_1 = require("../lib/oembed");
33
- const block_view_1 = __importDefault(require("./block_view"));
34
- const creators_1 = require("./creators");
35
- const ReactSubView_1 = __importDefault(require("./ReactSubView"));
36
- class EmbedMediaView extends block_view_1.default {
37
- constructor() {
38
- super(...arguments);
39
- this.ignoreMutation = () => true;
40
- this.stopEvent = () => true;
41
- this.createElement = () => {
42
- this.container = document.createElement('div');
43
- this.container.classList.add('block');
44
- this.container.setAttribute('id', this.node.attrs.id);
45
- this.dom.appendChild(this.container);
46
- this.contentDOM = document.createElement('div');
47
- this.container.appendChild(this.contentDOM);
48
- };
49
- }
50
- updateContents() {
51
- const _super = Object.create(null, {
52
- updateContents: { get: () => super.updateContents }
53
- });
54
- return __awaiter(this, void 0, void 0, function* () {
55
- _super.updateContents.call(this);
56
- if (this.href !== this.node.attrs.href) {
57
- this.href = this.node.attrs.href;
58
- yield this.updateOEmbedPreview();
59
- }
60
- });
61
- }
62
- updateOEmbedPreview() {
63
- return __awaiter(this, void 0, void 0, function* () {
64
- const preview = document.createElement('div');
65
- preview.classList.add('embed-media-preview');
66
- preview.setAttribute('contenteditable', 'false');
67
- this.container.prepend(preview);
68
- const oEmbedUrl = yield (0, oembed_1.getOEmbedUrl)(this.href, 643, 363);
69
- if (oEmbedUrl) {
70
- const oembedHTML = yield (0, oembed_1.getOEmbedHTML)(oEmbedUrl, this.href);
71
- if (oembedHTML) {
72
- preview.innerHTML = oembedHTML;
73
- return;
74
- }
75
- }
76
- this.showUnavailableMessage(preview);
77
- });
78
- }
79
- showUnavailableMessage(preview) {
80
- preview.appendChild((0, ReactSubView_1.default)(this.props, InsertEmbedDialog_1.NoPreviewMessageWithLink, { href: this.node.attrs.href }, this.node, this.getPos, this.view));
81
- }
82
- }
83
- exports.EmbedMediaView = EmbedMediaView;
84
- exports.default = (0, creators_1.createNodeView)(EmbedMediaView);
@@ -1,127 +0,0 @@
1
- /*!
2
- * © 2024 Atypon Systems LLC
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
17
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
18
- return new (P || (P = Promise))(function (resolve, reject) {
19
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
20
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
21
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
22
- step((generator = generator.apply(thisArg, _arguments || [])).next());
23
- });
24
- };
25
- import { ButtonGroup, DialogModalBody, MessageContainer, PrimaryBoldHeading, PrimaryButton, PrimarySmallText, SecondaryButton, StyledModal, TextArea, } from '@manuscripts/style-guide';
26
- import { debounce } from 'lodash';
27
- import React, { useState } from 'react';
28
- import styled from 'styled-components';
29
- import { insertEmbed } from '../../commands';
30
- import { getOEmbedHTML, getOEmbedUrl } from '../../lib/oembed';
31
- import { allowedHref } from '../../lib/url';
32
- import { getEditorProps } from '../../plugins/editor-props';
33
- import ReactSubView from '../../views/ReactSubView';
34
- import { FieldHeading, Open } from '../views/LinkForm';
35
- const Label = styled.label `
36
- padding-bottom: 4px;
37
- `;
38
- const HeaderContainer = styled(PrimaryBoldHeading) `
39
- font-size: ${(props) => props.theme.font.size.large};
40
- `;
41
- const Container = styled.div `
42
- display: flex;
43
- flex-direction: column;
44
- padding-bottom: 16px;
45
- `;
46
- const DialogContainer = styled(DialogModalBody) `
47
- min-width: 750px;
48
- `;
49
- const PreviewContainer = styled.div `
50
- display: flex;
51
- justify-content: center;
52
- border: 1px solid ${(props) => props.theme.colors.border.field.default};
53
- border-radius: ${(props) => props.theme.grid.radius.small};
54
- padding: 6px ${(props) => props.theme.grid.unit * 4}px;
55
- `;
56
- export const InsertEmbedDialog = ({ state, dispatch, operation, }) => {
57
- const [isOpen, setOpen] = useState(true);
58
- const [url, setUrl] = useState(undefined);
59
- const [oembedHTML, setOEmbedHTML] = useState(undefined);
60
- const action = () => {
61
- if (operation === 'Insert') {
62
- insertEmbed(state, dispatch, { href: url });
63
- setOpen(false);
64
- }
65
- else {
66
- }
67
- };
68
- const debouncedUrlChange = debounce((e) => __awaiter(void 0, void 0, void 0, function* () {
69
- const url = e.target.value.trim();
70
- const oEmbedUrl = yield getOEmbedUrl(url, 368, 217);
71
- if (oEmbedUrl) {
72
- const oembedJSON = yield getOEmbedHTML(oEmbedUrl, url);
73
- setOEmbedHTML(oembedJSON);
74
- }
75
- setUrl(url);
76
- }), 500);
77
- return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: () => setOpen(false) },
78
- React.createElement(DialogContainer, null,
79
- React.createElement(HeaderContainer, null,
80
- operation,
81
- " external media"),
82
- React.createElement(MessageContainer, null,
83
- React.createElement(Container, null,
84
- React.createElement(FieldHeading, null,
85
- React.createElement(Label, { htmlFor: 'embed-link' }, "Media link"),
86
- url && allowedHref(url) && (React.createElement(Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' }))),
87
- React.createElement(TextArea, { id: 'embed-link', rows: 2, cols: 2, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: debouncedUrlChange })),
88
- url && allowedHref(url) && (React.createElement(Container, null,
89
- React.createElement(Label, null, "Preview"),
90
- (oembedHTML && (React.createElement(PreviewContainer, { dangerouslySetInnerHTML: { __html: oembedHTML } }))) || React.createElement(NoPreviewMessage, null)))),
91
- React.createElement(ButtonGroup, null,
92
- React.createElement(SecondaryButton, { onClick: () => setOpen(false) }, "Cancel"),
93
- React.createElement(PrimaryButton, { onClick: action, disabled: !(url && allowedHref(url)) }, operation)))));
94
- };
95
- const Wrapper = styled.div `
96
- display: flex;
97
- justify-content: center;
98
- padding: 50px 0;
99
- `;
100
- const NoPreviewMessage = () => (React.createElement(PreviewContainer, null,
101
- React.createElement(Wrapper, null, "Preview not available")));
102
- const NoPreviewContainer = styled(PreviewContainer) `
103
- flex-direction: column;
104
- background: #fafafa;
105
- padding: 16px 56px 16px 48px;
106
- `;
107
- const Heading = styled(PrimaryBoldHeading) `
108
- font-size: ${(props) => props.theme.font.size.medium};
109
- `;
110
- export const NoPreviewMessageWithLink = ({ href, }) => (React.createElement(NoPreviewContainer, null,
111
- React.createElement(Heading, null, "Preview currently not available"),
112
- React.createElement(PrimarySmallText, null,
113
- React.createElement("a", { href: href, target: '_blank', rel: "noreferrer" }, "Click here"),
114
- ' ',
115
- "to see the source media")));
116
- export const openEmbedDialog = (view, operation = 'Insert') => {
117
- if (!view) {
118
- return;
119
- }
120
- const { state, dispatch } = view;
121
- const dialog = ReactSubView(getEditorProps(state), InsertEmbedDialog, {
122
- state,
123
- dispatch,
124
- operation,
125
- }, state.doc, () => 0, view);
126
- document.body.appendChild(dialog);
127
- };
@@ -1,85 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import providers from 'oembed-providers';
11
- export const getOEmbedUrl = (url, width, height) => __awaiter(void 0, void 0, void 0, function* () {
12
- let oembedUrl;
13
- for (const provider of providers) {
14
- if (provider) {
15
- const { provider_url, endpoints } = provider;
16
- for (const endpoint of endpoints) {
17
- if (endpoint.schemes &&
18
- endpoint.schemes.find((schema) => globToRegex(schema).test(url))) {
19
- oembedUrl = endpoint.url.replace('{format}', 'json');
20
- break;
21
- }
22
- else if (!endpoint.schemes && url.startsWith(provider_url)) {
23
- oembedUrl = endpoint.url.replace('{format}', 'json');
24
- break;
25
- }
26
- }
27
- }
28
- }
29
- if (oembedUrl) {
30
- const params = new URLSearchParams();
31
- params.append('url', url);
32
- params.set('format', 'json');
33
- params.append('maxwidth', width.toString());
34
- params.append('maxheight', height.toString());
35
- return `${oembedUrl}?${params.toString()}`;
36
- }
37
- else {
38
- try {
39
- const response = yield fetch(url, { method: 'HEAD' });
40
- let oembedUrl;
41
- const linkHeader = response.headers.get('link');
42
- if (linkHeader) {
43
- linkHeader.split(',').map((link) => {
44
- const typeMatch = /type="([^"]*)"/.exec(link);
45
- if (typeMatch &&
46
- (typeMatch[1] === 'application/json+oembed' ||
47
- typeMatch[1] === 'text/xml+oembed')) {
48
- oembedUrl = /<([^>]*)>/.exec(link);
49
- }
50
- });
51
- }
52
- return oembedUrl;
53
- }
54
- catch (e) {
55
- return undefined;
56
- }
57
- }
58
- });
59
- const globToRegex = (glob) => {
60
- const regex = glob
61
- .replace(/\./g, '\\.')
62
- .replace(/\*/g, '.*');
63
- return new RegExp(`^${regex}$`);
64
- };
65
- export const getOEmbedHTML = (oembedUrl, sourceLink) => __awaiter(void 0, void 0, void 0, function* () {
66
- try {
67
- const response = yield fetch(oembedUrl);
68
- if (response.status === 200) {
69
- const oembed = yield response.json();
70
- return oembed.html || renderAlternativeHTML(oembed, sourceLink);
71
- }
72
- else {
73
- return undefined;
74
- }
75
- }
76
- catch (e) {
77
- return undefined;
78
- }
79
- });
80
- const renderAlternativeHTML = (oembed, sourceLink) => {
81
- if (oembed.type === 'photo') {
82
- return `<img src="${oembed.url}">`;
83
- }
84
- return `<a href="${sourceLink}" target="_blank">${oembed.title || 'Media link'}</a>`;
85
- };
@@ -1,77 +0,0 @@
1
- /*!
2
- * © 2019 Atypon Systems LLC
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
17
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
18
- return new (P || (P = Promise))(function (resolve, reject) {
19
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
20
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
21
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
22
- step((generator = generator.apply(thisArg, _arguments || [])).next());
23
- });
24
- };
25
- import { NoPreviewMessageWithLink } from '../components/toolbar/InsertEmbedDialog';
26
- import { getOEmbedHTML, getOEmbedUrl } from '../lib/oembed';
27
- import BlockView from './block_view';
28
- import { createNodeView } from './creators';
29
- import ReactSubView from './ReactSubView';
30
- export class EmbedMediaView extends BlockView {
31
- constructor() {
32
- super(...arguments);
33
- this.ignoreMutation = () => true;
34
- this.stopEvent = () => true;
35
- this.createElement = () => {
36
- this.container = document.createElement('div');
37
- this.container.classList.add('block');
38
- this.container.setAttribute('id', this.node.attrs.id);
39
- this.dom.appendChild(this.container);
40
- this.contentDOM = document.createElement('div');
41
- this.container.appendChild(this.contentDOM);
42
- };
43
- }
44
- updateContents() {
45
- const _super = Object.create(null, {
46
- updateContents: { get: () => super.updateContents }
47
- });
48
- return __awaiter(this, void 0, void 0, function* () {
49
- _super.updateContents.call(this);
50
- if (this.href !== this.node.attrs.href) {
51
- this.href = this.node.attrs.href;
52
- yield this.updateOEmbedPreview();
53
- }
54
- });
55
- }
56
- updateOEmbedPreview() {
57
- return __awaiter(this, void 0, void 0, function* () {
58
- const preview = document.createElement('div');
59
- preview.classList.add('embed-media-preview');
60
- preview.setAttribute('contenteditable', 'false');
61
- this.container.prepend(preview);
62
- const oEmbedUrl = yield getOEmbedUrl(this.href, 643, 363);
63
- if (oEmbedUrl) {
64
- const oembedHTML = yield getOEmbedHTML(oEmbedUrl, this.href);
65
- if (oembedHTML) {
66
- preview.innerHTML = oembedHTML;
67
- return;
68
- }
69
- }
70
- this.showUnavailableMessage(preview);
71
- });
72
- }
73
- showUnavailableMessage(preview) {
74
- preview.appendChild(ReactSubView(this.props, NoPreviewMessageWithLink, { href: this.node.attrs.href }, this.node, this.getPos, this.view));
75
- }
76
- }
77
- export default createNodeView(EmbedMediaView);
@@ -1,29 +0,0 @@
1
- /*!
2
- * © 2024 Atypon Systems LLC
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import { ManuscriptEditorState } from '@manuscripts/transform';
17
- import { EditorView } from 'prosemirror-view';
18
- import React from 'react';
19
- import { Dispatch } from '../../commands';
20
- export type InsertEmbedDialogProps = {
21
- state: ManuscriptEditorState;
22
- dispatch?: Dispatch;
23
- operation: 'Insert' | 'Update';
24
- };
25
- export declare const InsertEmbedDialog: React.FC<InsertEmbedDialogProps>;
26
- export declare const NoPreviewMessageWithLink: React.FC<{
27
- href: string;
28
- }>;
29
- export declare const openEmbedDialog: (view?: EditorView, operation?: string) => void;
@@ -1,8 +0,0 @@
1
- export type ProviderJson = {
2
- type: 'photo' | 'video' | 'link' | 'rich';
3
- html?: string;
4
- url?: string;
5
- title?: string;
6
- };
7
- export declare const getOEmbedUrl: (url: string, width: number, height: number) => Promise<string | undefined>;
8
- export declare const getOEmbedHTML: (oembedUrl: string, sourceLink: string) => Promise<any>;