1 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
2 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
3 | import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
4 | import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
5 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
6 | import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
7 | import { createElement } from "@wordpress/element";
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import { HOSTS_NO_PREVIEWS } from './constants';
|
13 | import { getPhotoHtml } from './util';
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | import { parse } from 'url';
|
19 | import { includes } from 'lodash';
|
20 | import classnames from 'classnames/dedupe';
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | import { __, sprintf } from '@wordpress/i18n';
|
26 | import { Placeholder, SandBox } from '@wordpress/components';
|
27 | import { RichText, BlockIcon } from '@wordpress/block-editor';
|
28 | import { Component } from '@wordpress/element';
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | import WpEmbedPreview from './wp-embed-preview';
|
34 |
|
35 | var EmbedPreview =
|
36 |
|
37 | function (_Component) {
|
38 | _inherits(EmbedPreview, _Component);
|
39 |
|
40 | function EmbedPreview() {
|
41 | var _this;
|
42 |
|
43 | _classCallCheck(this, EmbedPreview);
|
44 |
|
45 | _this = _possibleConstructorReturn(this, _getPrototypeOf(EmbedPreview).apply(this, arguments));
|
46 | _this.hideOverlay = _this.hideOverlay.bind(_assertThisInitialized(_assertThisInitialized(_this)));
|
47 | _this.state = {
|
48 | interactive: false
|
49 | };
|
50 | return _this;
|
51 | }
|
52 |
|
53 | _createClass(EmbedPreview, [{
|
54 | key: "hideOverlay",
|
55 | value: function hideOverlay() {
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 | this.setState({
|
62 | interactive: true
|
63 | });
|
64 | }
|
65 | }, {
|
66 | key: "render",
|
67 | value: function render() {
|
68 | var _this$props = this.props,
|
69 | preview = _this$props.preview,
|
70 | url = _this$props.url,
|
71 | type = _this$props.type,
|
72 | caption = _this$props.caption,
|
73 | onCaptionChange = _this$props.onCaptionChange,
|
74 | isSelected = _this$props.isSelected,
|
75 | className = _this$props.className,
|
76 | icon = _this$props.icon,
|
77 | label = _this$props.label;
|
78 | var scripts = preview.scripts;
|
79 | var interactive = this.state.interactive;
|
80 | var html = 'photo' === type ? getPhotoHtml(preview) : preview.html;
|
81 | var parsedHost = parse(url).host.split('.');
|
82 | var parsedHostBaseUrl = parsedHost.splice(parsedHost.length - 2, parsedHost.length - 1).join('.');
|
83 | var cannotPreview = includes(HOSTS_NO_PREVIEWS, parsedHostBaseUrl);
|
84 |
|
85 | var iframeTitle = sprintf(__('Embedded content from %s'), parsedHostBaseUrl);
|
86 | var sandboxClassnames = classnames(type, className, 'wp-block-embed__wrapper');
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 | var embedWrapper = 'wp-embed' === type ? createElement(WpEmbedPreview, {
|
95 | html: html
|
96 | }) : createElement("div", {
|
97 | className: "wp-block-embed__wrapper"
|
98 | }, createElement(SandBox, {
|
99 | html: html,
|
100 | scripts: scripts,
|
101 | title: iframeTitle,
|
102 | type: sandboxClassnames,
|
103 | onFocus: this.hideOverlay
|
104 | }), !interactive && createElement("div", {
|
105 | className: "block-library-embed__interactive-overlay",
|
106 | onMouseUp: this.hideOverlay
|
107 | }));
|
108 |
|
109 |
|
110 |
|
111 |
|
112 | return createElement("figure", {
|
113 | className: classnames(className, 'wp-block-embed', {
|
114 | 'is-type-video': 'video' === type
|
115 | })
|
116 | }, cannotPreview ? createElement(Placeholder, {
|
117 | icon: createElement(BlockIcon, {
|
118 | icon: icon,
|
119 | showColors: true
|
120 | }),
|
121 | label: label
|
122 | }, createElement("p", {
|
123 | className: "components-placeholder__error"
|
124 | }, createElement("a", {
|
125 | href: url
|
126 | }, url)), createElement("p", {
|
127 | className: "components-placeholder__error"
|
128 | },
|
129 |
|
130 | sprintf(__("Embedded content from %s can't be previewed in the editor."), parsedHostBaseUrl))) : embedWrapper, (!RichText.isEmpty(caption) || isSelected) && createElement(RichText, {
|
131 | tagName: "figcaption",
|
132 | placeholder: __('Write caption…'),
|
133 | value: caption,
|
134 | onChange: onCaptionChange,
|
135 | inlineToolbar: true
|
136 | }));
|
137 | }
|
138 | }], [{
|
139 | key: "getDerivedStateFromProps",
|
140 | value: function getDerivedStateFromProps(nextProps, state) {
|
141 | if (!nextProps.isSelected && state.interactive) {
|
142 |
|
143 |
|
144 |
|
145 | return {
|
146 | interactive: false
|
147 | };
|
148 | }
|
149 |
|
150 | return null;
|
151 | }
|
152 | }]);
|
153 |
|
154 | return EmbedPreview;
|
155 | }(Component);
|
156 |
|
157 | export default EmbedPreview;
|
158 |
|
\ | No newline at end of file |