@ckeditor/ckeditor5-media-embed 36.0.1 → 37.0.0-alpha.1

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.
@@ -2,181 +2,130 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
-
6
5
  /**
7
6
  * @module media-embed/automediaembed
8
7
  */
9
-
10
8
  import { Plugin } from 'ckeditor5/src/core';
11
9
  import { LiveRange, LivePosition } from 'ckeditor5/src/engine';
12
10
  import { Clipboard } from 'ckeditor5/src/clipboard';
13
11
  import { Delete } from 'ckeditor5/src/typing';
14
12
  import { Undo } from 'ckeditor5/src/undo';
15
13
  import { global } from 'ckeditor5/src/utils';
16
-
17
14
  import MediaEmbedEditing from './mediaembedediting';
18
15
  import { insertMedia } from './utils';
19
-
20
16
  const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
21
-
22
17
  /**
23
18
  * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
24
19
  * them shortly after they are injected into the document.
25
- *
26
- * @extends module:core/plugin~Plugin
27
20
  */
28
21
  export default class AutoMediaEmbed extends Plugin {
29
- /**
30
- * @inheritDoc
31
- */
32
- static get requires() {
33
- return [ Clipboard, Delete, Undo ];
34
- }
35
-
36
- /**
37
- * @inheritDoc
38
- */
39
- static get pluginName() {
40
- return 'AutoMediaEmbed';
41
- }
42
-
43
- /**
44
- * @inheritDoc
45
- */
46
- constructor( editor ) {
47
- super( editor );
48
-
49
- /**
50
- * The paste–to–embed `setTimeout` ID. Stored as a property to allow
51
- * cleaning of the timeout.
52
- *
53
- * @private
54
- * @member {Number} #_timeoutId
55
- */
56
- this._timeoutId = null;
57
-
58
- /**
59
- * The position where the `<media>` element will be inserted after the timeout,
60
- * determined each time the new content is pasted into the document.
61
- *
62
- * @private
63
- * @member {module:engine/model/liveposition~LivePosition} #_positionToInsert
64
- */
65
- this._positionToInsert = null;
66
- }
67
-
68
- /**
69
- * @inheritDoc
70
- */
71
- init() {
72
- const editor = this.editor;
73
- const modelDocument = editor.model.document;
74
-
75
- // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
76
- // After pasting, the content between those positions will be checked for a URL that could be transformed
77
- // into media.
78
- this.listenTo( editor.plugins.get( 'ClipboardPipeline' ), 'inputTransformation', () => {
79
- const firstRange = modelDocument.selection.getFirstRange();
80
-
81
- const leftLivePosition = LivePosition.fromPosition( firstRange.start );
82
- leftLivePosition.stickiness = 'toPrevious';
83
-
84
- const rightLivePosition = LivePosition.fromPosition( firstRange.end );
85
- rightLivePosition.stickiness = 'toNext';
86
-
87
- modelDocument.once( 'change:data', () => {
88
- this._embedMediaBetweenPositions( leftLivePosition, rightLivePosition );
89
-
90
- leftLivePosition.detach();
91
- rightLivePosition.detach();
92
- }, { priority: 'high' } );
93
- } );
94
-
95
- editor.commands.get( 'undo' ).on( 'execute', () => {
96
- if ( this._timeoutId ) {
97
- global.window.clearTimeout( this._timeoutId );
98
- this._positionToInsert.detach();
99
-
100
- this._timeoutId = null;
101
- this._positionToInsert = null;
102
- }
103
- }, { priority: 'high' } );
104
- }
105
-
106
- /**
107
- * Analyzes the part of the document between provided positions in search for a URL representing media.
108
- * When the URL is found, it is automatically converted into media.
109
- *
110
- * @protected
111
- * @param {module:engine/model/liveposition~LivePosition} leftPosition Left position of the selection.
112
- * @param {module:engine/model/liveposition~LivePosition} rightPosition Right position of the selection.
113
- */
114
- _embedMediaBetweenPositions( leftPosition, rightPosition ) {
115
- const editor = this.editor;
116
- const mediaRegistry = editor.plugins.get( MediaEmbedEditing ).registry;
117
- // TODO: Use marker instead of LiveRange & LivePositions.
118
- const urlRange = new LiveRange( leftPosition, rightPosition );
119
- const walker = urlRange.getWalker( { ignoreElementEnd: true } );
120
-
121
- let url = '';
122
-
123
- for ( const node of walker ) {
124
- if ( node.item.is( '$textProxy' ) ) {
125
- url += node.item.data;
126
- }
127
- }
128
-
129
- url = url.trim();
130
-
131
- // If the URL does not match to universal URL regexp, let's skip that.
132
- if ( !url.match( URL_REGEXP ) ) {
133
- urlRange.detach();
134
-
135
- return;
136
- }
137
-
138
- // If the URL represents a media, let's use it.
139
- if ( !mediaRegistry.hasMedia( url ) ) {
140
- urlRange.detach();
141
-
142
- return;
143
- }
144
-
145
- const mediaEmbedCommand = editor.commands.get( 'mediaEmbed' );
146
-
147
- // Do not anything if media element cannot be inserted at the current position (#47).
148
- if ( !mediaEmbedCommand.isEnabled ) {
149
- urlRange.detach();
150
-
151
- return;
152
- }
153
-
154
- // Position won't be available in the `setTimeout` function so let's clone it.
155
- this._positionToInsert = LivePosition.fromPosition( leftPosition );
156
-
157
- // This action mustn't be executed if undo was called between pasting and auto-embedding.
158
- this._timeoutId = global.window.setTimeout( () => {
159
- editor.model.change( writer => {
160
- this._timeoutId = null;
161
-
162
- writer.remove( urlRange );
163
- urlRange.detach();
164
-
165
- let insertionPosition;
166
-
167
- // Check if position where the media element should be inserted is still valid.
168
- // Otherwise leave it as undefined to use document.selection - default behavior of model.insertContent().
169
- if ( this._positionToInsert.root.rootName !== '$graveyard' ) {
170
- insertionPosition = this._positionToInsert;
171
- }
172
-
173
- insertMedia( editor.model, url, insertionPosition, false );
174
-
175
- this._positionToInsert.detach();
176
- this._positionToInsert = null;
177
- } );
178
-
179
- editor.plugins.get( 'Delete' ).requestUndoOnBackspace();
180
- }, 100 );
181
- }
22
+ /**
23
+ * @inheritDoc
24
+ */
25
+ static get requires() {
26
+ return [Clipboard, Delete, Undo];
27
+ }
28
+ /**
29
+ * @inheritDoc
30
+ */
31
+ static get pluginName() {
32
+ return 'AutoMediaEmbed';
33
+ }
34
+ /**
35
+ * @inheritDoc
36
+ */
37
+ constructor(editor) {
38
+ super(editor);
39
+ this._timeoutId = null;
40
+ this._positionToInsert = null;
41
+ }
42
+ /**
43
+ * @inheritDoc
44
+ */
45
+ init() {
46
+ const editor = this.editor;
47
+ const modelDocument = editor.model.document;
48
+ // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
49
+ // After pasting, the content between those positions will be checked for a URL that could be transformed
50
+ // into media.
51
+ const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
52
+ this.listenTo(clipboardPipeline, 'inputTransformation', () => {
53
+ const firstRange = modelDocument.selection.getFirstRange();
54
+ const leftLivePosition = LivePosition.fromPosition(firstRange.start);
55
+ leftLivePosition.stickiness = 'toPrevious';
56
+ const rightLivePosition = LivePosition.fromPosition(firstRange.end);
57
+ rightLivePosition.stickiness = 'toNext';
58
+ modelDocument.once('change:data', () => {
59
+ this._embedMediaBetweenPositions(leftLivePosition, rightLivePosition);
60
+ leftLivePosition.detach();
61
+ rightLivePosition.detach();
62
+ }, { priority: 'high' });
63
+ });
64
+ const undoCommand = editor.commands.get('undo');
65
+ undoCommand.on('execute', () => {
66
+ if (this._timeoutId) {
67
+ global.window.clearTimeout(this._timeoutId);
68
+ this._positionToInsert.detach();
69
+ this._timeoutId = null;
70
+ this._positionToInsert = null;
71
+ }
72
+ }, { priority: 'high' });
73
+ }
74
+ /**
75
+ * Analyzes the part of the document between provided positions in search for a URL representing media.
76
+ * When the URL is found, it is automatically converted into media.
77
+ *
78
+ * @param leftPosition Left position of the selection.
79
+ * @param rightPosition Right position of the selection.
80
+ */
81
+ _embedMediaBetweenPositions(leftPosition, rightPosition) {
82
+ const editor = this.editor;
83
+ const mediaRegistry = editor.plugins.get(MediaEmbedEditing).registry;
84
+ // TODO: Use marker instead of LiveRange & LivePositions.
85
+ const urlRange = new LiveRange(leftPosition, rightPosition);
86
+ const walker = urlRange.getWalker({ ignoreElementEnd: true });
87
+ let url = '';
88
+ for (const node of walker) {
89
+ if (node.item.is('$textProxy')) {
90
+ url += node.item.data;
91
+ }
92
+ }
93
+ url = url.trim();
94
+ // If the URL does not match to universal URL regexp, let's skip that.
95
+ if (!url.match(URL_REGEXP)) {
96
+ urlRange.detach();
97
+ return;
98
+ }
99
+ // If the URL represents a media, let's use it.
100
+ if (!mediaRegistry.hasMedia(url)) {
101
+ urlRange.detach();
102
+ return;
103
+ }
104
+ const mediaEmbedCommand = editor.commands.get('mediaEmbed');
105
+ // Do not anything if media element cannot be inserted at the current position (#47).
106
+ if (!mediaEmbedCommand.isEnabled) {
107
+ urlRange.detach();
108
+ return;
109
+ }
110
+ // Position won't be available in the `setTimeout` function so let's clone it.
111
+ this._positionToInsert = LivePosition.fromPosition(leftPosition);
112
+ // This action mustn't be executed if undo was called between pasting and auto-embedding.
113
+ this._timeoutId = global.window.setTimeout(() => {
114
+ editor.model.change(writer => {
115
+ this._timeoutId = null;
116
+ writer.remove(urlRange);
117
+ urlRange.detach();
118
+ let insertionPosition = null;
119
+ // Check if position where the media element should be inserted is still valid.
120
+ // Otherwise leave it as undefined to use document.selection - default behavior of model.insertContent().
121
+ if (this._positionToInsert.root.rootName !== '$graveyard') {
122
+ insertionPosition = this._positionToInsert;
123
+ }
124
+ insertMedia(editor.model, url, insertionPosition, false);
125
+ this._positionToInsert.detach();
126
+ this._positionToInsert = null;
127
+ });
128
+ editor.plugins.get(Delete).requestUndoOnBackspace();
129
+ }, 100);
130
+ }
182
131
  }
@@ -0,0 +1,38 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ import type { DowncastDispatcher } from 'ckeditor5/src/engine';
6
+ import type MediaRegistry from './mediaregistry';
7
+ import type { MediaOptions } from './utils';
8
+ /**
9
+ * Returns a function that converts the model "url" attribute to the view representation.
10
+ *
11
+ * Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
12
+ *
13
+ * ```html
14
+ * <figure class="media">
15
+ * <oembed url="foo"></oembed>
16
+ * </figure>
17
+ * ```
18
+ *
19
+ * or "non-semantic" (for the editing view pipeline):
20
+ *
21
+ * ```html
22
+ * <figure class="media">
23
+ * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
24
+ * </figure>
25
+ * ```
26
+ *
27
+ * **Note:** Changing the model "url" attribute replaces the entire content of the
28
+ * `<figure>` in the view.
29
+ *
30
+ * @param registry The registry providing
31
+ * the media and their content.
32
+ * @param options options object with following properties:
33
+ * - elementName When set, overrides the default element name for semantic media embeds.
34
+ * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
35
+ * - renderForEditingView When `true`, the converter will create a view specific for the
36
+ * editing pipeline (e.g. including CSS classes, content placeholders).
37
+ */
38
+ export declare function modelToViewUrlAttributeConverter(registry: MediaRegistry, options: MediaOptions): (dispatcher: DowncastDispatcher) => void;
package/src/converters.js CHANGED
@@ -2,59 +2,52 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
-
6
- /**
7
- * @module media-embed/converters
8
- */
9
-
10
5
  /**
11
6
  * Returns a function that converts the model "url" attribute to the view representation.
12
7
  *
13
8
  * Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
14
9
  *
15
- * <figure class="media">
16
- * <oembed url="foo"></oembed>
17
- * </figure>
10
+ * ```html
11
+ * <figure class="media">
12
+ * <oembed url="foo"></oembed>
13
+ * </figure>
14
+ * ```
18
15
  *
19
16
  * or "non-semantic" (for the editing view pipeline):
20
17
  *
21
- * <figure class="media">
22
- * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
23
- * </figure>
18
+ * ```html
19
+ * <figure class="media">
20
+ * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
21
+ * </figure>
22
+ * ```
24
23
  *
25
24
  * **Note:** Changing the model "url" attribute replaces the entire content of the
26
25
  * `<figure>` in the view.
27
26
  *
28
- * @param {module:media-embed/mediaregistry~MediaRegistry} registry The registry providing
27
+ * @param registry The registry providing
29
28
  * the media and their content.
30
- * @param {Object} options
31
- * @param {String} [options.elementName] When set, overrides the default element name for semantic media embeds.
32
- * @param {String} [options.renderMediaPreview] When `true`, the converter will create the view in the non-semantic form.
33
- * @param {String} [options.renderForEditingView] When `true`, the converter will create a view specific for the
29
+ * @param options options object with following properties:
30
+ * - elementName When set, overrides the default element name for semantic media embeds.
31
+ * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
32
+ * - renderForEditingView When `true`, the converter will create a view specific for the
34
33
  * editing pipeline (e.g. including CSS classes, content placeholders).
35
- * @returns {Function}
36
34
  */
37
- export function modelToViewUrlAttributeConverter( registry, options ) {
38
- return dispatcher => {
39
- dispatcher.on( 'attribute:url:media', converter );
40
- };
41
-
42
- function converter( evt, data, conversionApi ) {
43
- if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
44
- return;
45
- }
46
-
47
- const url = data.attributeNewValue;
48
- const viewWriter = conversionApi.writer;
49
- const figure = conversionApi.mapper.toViewElement( data.item );
50
- const mediaContentElement = [ ...figure.getChildren() ]
51
- .find( child => child.getCustomProperty( 'media-content' ) );
52
-
53
- // TODO: removing the wrapper and creating it from scratch is a hack. We can do better than that.
54
- viewWriter.remove( mediaContentElement );
55
-
56
- const mediaViewElement = registry.getMediaViewElement( viewWriter, url, options );
57
-
58
- viewWriter.insert( viewWriter.createPositionAt( figure, 0 ), mediaViewElement );
59
- }
35
+ export function modelToViewUrlAttributeConverter(registry, options) {
36
+ const converter = (evt, data, conversionApi) => {
37
+ if (!conversionApi.consumable.consume(data.item, evt.name)) {
38
+ return;
39
+ }
40
+ const url = data.attributeNewValue;
41
+ const viewWriter = conversionApi.writer;
42
+ const figure = conversionApi.mapper.toViewElement(data.item);
43
+ const mediaContentElement = [...figure.getChildren()]
44
+ .find(child => child.getCustomProperty('media-content'));
45
+ // TODO: removing the wrapper and creating it from scratch is a hack. We can do better than that.
46
+ viewWriter.remove(mediaContentElement);
47
+ const mediaViewElement = registry.getMediaViewElement(viewWriter, url, options);
48
+ viewWriter.insert(viewWriter.createPositionAt(figure, 0), mediaViewElement);
49
+ };
50
+ return dispatcher => {
51
+ dispatcher.on('attribute:url:media', converter);
52
+ };
60
53
  }
package/src/index.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module media-embed
7
+ */
8
+ export { default as MediaEmbed } from './mediaembed';
9
+ export { default as MediaEmbedEditing } from './mediaembedediting';
10
+ export { default as MediaEmbedUI } from './mediaembedui';
11
+ export { default as AutoMediaEmbed } from './automediaembed';
12
+ export { default as MediaEmbedToolbar } from './mediaembedtoolbar';
13
+ export type { MediaEmbedConfig } from './mediaembedconfig';
14
+ export type { default as MediaEmbedCommand } from './mediaembedcommand';
15
+ import './augmentation';
package/src/index.js CHANGED
@@ -2,13 +2,12 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
-
6
5
  /**
7
6
  * @module media-embed
8
7
  */
9
-
10
8
  export { default as MediaEmbed } from './mediaembed';
11
9
  export { default as MediaEmbedEditing } from './mediaembedediting';
12
10
  export { default as MediaEmbedUI } from './mediaembedui';
13
11
  export { default as AutoMediaEmbed } from './automediaembed';
14
12
  export { default as MediaEmbedToolbar } from './mediaembedtoolbar';
13
+ import './augmentation';
@@ -0,0 +1,30 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module media-embed/mediaembed
7
+ */
8
+ import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
9
+ import '../theme/mediaembed.css';
10
+ /**
11
+ * The media embed plugin.
12
+ *
13
+ * For a detailed overview, check the {@glink features/media-embed Media Embed feature documentation}.
14
+ *
15
+ * This is a "glue" plugin which loads the following plugins:
16
+ *
17
+ * * The {@link module:media-embed/mediaembedediting~MediaEmbedEditing media embed editing feature},
18
+ * * The {@link module:media-embed/mediaembedui~MediaEmbedUI media embed UI feature} and
19
+ * * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
20
+ */
21
+ export default class MediaEmbed extends Plugin {
22
+ /**
23
+ * @inheritDoc
24
+ */
25
+ static get requires(): PluginDependencies;
26
+ /**
27
+ * @inheritDoc
28
+ */
29
+ static get pluginName(): 'MediaEmbed';
30
+ }