@ckeditor/ckeditor5-html-embed - npm Package Compare versions

Comparing version 23.1.0 to 24.0.0

package.json

 {
   "name": "@ckeditor/ckeditor5-html-embed",
-  "version": "23.1.0",
+  "version": "24.0.0",
   "description": "HTML embed feature for CKEditor 5.",
@@ -13,12 +13,12 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^23.1.0",
-    "@ckeditor/ckeditor5-engine": "^23.1.0",
-    "@ckeditor/ckeditor5-ui": "^23.1.0",
-    "@ckeditor/ckeditor5-utils": "^23.1.0",
-    "@ckeditor/ckeditor5-widget": "^23.1.0"
+    "@ckeditor/ckeditor5-core": "^24.0.0",
+    "@ckeditor/ckeditor5-engine": "^24.0.0",
+    "@ckeditor/ckeditor5-ui": "^24.0.0",
+    "@ckeditor/ckeditor5-utils": "^24.0.0",
+    "@ckeditor/ckeditor5-widget": "^24.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^23.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^23.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^23.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^24.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^24.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^24.0.0",
     "lodash-es": "^4.17.15",
@@ -25,0 +25,0 @@ "sanitize-html": "^2.1.0"

README.md

@@ -8,3 +8,3 @@ CKEditor 5 HTML embed feature
 
-This package implements the HTML embed feature for CKEditor 5.
+This package implements the HTML embed feature for CKEditor 5. It allows embedding an arbitrary HTML snippet in the rich-text editor.
 
@@ -11,0 +11,0 @@ ## Demo

src/htmlembed.js

@@ -17,3 +17,3 @@ /**
  *
- * It allows inserting HTML snippets directly to the editor.
+ * It allows inserting HTML snippets directly into the editor.
  *
@@ -56,3 +56,3 @@ * For a detailed overview, check the {@glink features/html-embed HTML embed feature} documentation.
 /**
- * Whether the feature should render previews of the the embedded HTML.
+ * Whether the feature should render previews of the embedded HTML.
  *
@@ -72,5 +72,5 @@ * When set to `true`, the feature will produce a preview of the inserted HTML based on a sanitized
 /**
- * Callback used to sanitize HTML provided by the user when generating previews of it in the editor.
+ * Callback used to sanitize the HTML provided by the user when generating previews of it in the editor.
  *
- * We strongly recommend to overwrite the default function to avoid XSS vulnerabilities.
+ * We strongly recommend overwriting the default function to avoid XSS vulnerabilities.
  *
@@ -77,0 +77,0 @@ * Read more about the security aspect of this feature in the {@glink features/html-embed#security "Security"} section of

src/htmlembedediting.js

@@ -11,4 +11,2 @@ /**
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
-import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
 import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
@@ -51,4 +49,4 @@ import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 				/**
-				 * When using the HTML embed feature with `htmlEmbed.showPreviews=true` option, it is strongly recommended to
-				 * define a sanitize function that will clean up an input HTML in order to avoid XSS vulnerability.
+				 * When using the HTML embed feature with the `htmlEmbed.showPreviews=true` option, it is strongly recommended to
+				 * define a sanitize function that will clean up the input HTML in order to avoid XSS vulnerability.
 				 *
@@ -99,5 +97,10 @@ * For a detailed overview, check the {@glink features/html-embed HTML embed feature} documentation.
 		const htmlEmbedConfig = editor.config.get( 'htmlEmbed' );
-		const upcastWriter = new UpcastWriter( view.document );
-		const htmlProcessor = new HtmlDataProcessor( view.document );
 
+		// Register div.raw-html-embed as a raw content element so all of it's content will be provided
+		// as a view element's custom property while data upcasting.
+		editor.data.processor.registerRawContentMatcher( {
+			name: 'div',
+			classes: 'raw-html-embed'
+		} );
+
 		editor.conversion.for( 'upcast' ).elementToElement( {
@@ -109,9 +112,6 @@ view: {
 			model: ( viewElement, { writer } ) => {
-				// Note: The below line has a side-effect – the children are *moved* to the DF so
-				// viewElement becomes empty. It's fine here.
-				const fragment = upcastWriter.createDocumentFragment( viewElement.getChildren() );
-				const innerHtml = htmlProcessor.toData( fragment );
-
+				// The div.raw-html-embed is registered as a raw content element,
+				// so all it's content is available in a custom property.
 				return writer.createElement( 'rawHtml', {
-					value: innerHtml
+					value: viewElement.getCustomProperty( '$rawContent' )
 				} );
@@ -140,3 +140,4 @@ }
 					class: 'raw-html-embed',
-					'data-html-embed-label': t( 'HTML snippet' )
+					'data-html-embed-label': t( 'HTML snippet' ),
+					dir: editor.locale.uiLanguageDirection
 				} );
@@ -151,2 +152,17 @@ // Widget cannot be a raw element because the widget system would not be able
 					renderContent( { domElement, editor, state, props } );
+
+					// Since there is a `data-cke-ignore-events` attribute set on the wrapper element in the editable mode,
+					// the explicit `mousedown` handler on the `capture` phase is needed to move the selection onto the whole
+					// HTML embed widget.
+					domContentWrapper.addEventListener( 'mousedown', () => {
+						if ( state.isEditable ) {
+							const model = editor.model;
+							const selectedElement = model.document.selection.getSelectedElement();
+
+							// Move the selection onto the whole HTML embed widget if it's currently not selected.
+							if ( selectedElement !== modelElement ) {
+								model.change( writer => writer.setSelection( modelElement, 'on' ) );
+							}
+						}
+					}, true );
 				} );
@@ -175,4 +191,3 @@
 							editor.execute( 'updateHtmlEmbed', newValue );
-						} else {
-							this.cancel();
+							editor.editing.view.focus();
 						}
@@ -186,2 +201,3 @@ },
 						renderContent( { domElement: domContentWrapper, editor, state, props } );
+						editor.editing.view.focus();
 
@@ -248,3 +264,3 @@ view.change( writer => {
 
-				domElement.append( createPreviewContainer( { domDocument, state, props: previewContainerProps } ) );
+				domElement.append( createPreviewContainer( { domDocument, state, props: previewContainerProps, editor } ) );
 			} else {
@@ -274,5 +290,5 @@ const textareaProps = {
 			// TODO these should be cached and we should only clone here these cached nodes!
-			const domEditButton = createDomButton( editor.locale, 'edit' );
-			const domSaveButton = createDomButton( editor.locale, 'save' );
-			const domCancelButton = createDomButton( editor.locale, 'cancel' );
+			const domEditButton = createDomButton( editor, 'edit' );
+			const domSaveButton = createDomButton( editor, 'save' );
+			const domCancelButton = createDomButton( editor, 'cancel' );
 
@@ -321,5 +337,6 @@ if ( state.isEditable ) {
 
-		function createPreviewContainer( { domDocument, state, props } ) {
+		function createPreviewContainer( { domDocument, state, props, editor } ) {
 			const domPreviewContainer = createElement( domDocument, 'div', {
-				class: 'raw-html-embed__preview'
+				class: 'raw-html-embed__preview',
+				dir: editor.locale.contentLanguageDirection
 			} );
@@ -340,8 +357,9 @@
 //  @returns {HTMLElement}
-function createDomButton( locale, type ) {
-	const t = locale.t;
-	const buttonView = new ButtonView( locale );
+function createDomButton( editor, type ) {
+	const t = editor.locale.t;
+	const buttonView = new ButtonView( editor.locale );
+	const command = editor.commands.get( 'updateHtmlEmbed' );
 
 	buttonView.set( {
-		tooltipPosition: 'sw',
+		tooltipPosition: editor.locale.uiLanguageDirection === 'rtl' ? 'e' : 'w',
 		icon: pencilIcon,
@@ -365,2 +383,3 @@ tooltip: true
 		} );
+		buttonView.bind( 'isEnabled' ).to( command, 'isEnabled' );
 	} else {
@@ -367,0 +386,0 @@ buttonView.set( {

src/inserthtmlembedcommand.js

@@ -14,7 +14,7 @@ /**
 /**
- * The insert raw HTML element command.
+ * The insert HTML embed element command.
  *
  * The command is registered by {@link module:html-embed/htmlembedediting~HtmlEmbedEditing} as `'insertHtmlEmbed'`.
  *
- * To insert the raw HTML element at the current selection, execute the command:
+ * To insert the HTML embed element at the current selection, execute the command:
  *
@@ -34,3 +34,3 @@ *		editor.execute( 'insertHtmlEmbed' );
 	/**
-	 * Executes the command, which creates and inserts a new html element.
+	 * Executes the command, which creates and inserts a new HTML embed element.
 	 *
@@ -63,3 +63,3 @@ * @fires execute
 
-// Checks if a html embed is allowed by the schema in the optimal insertion parent.
+// Checks if an HTML embed is allowed by the schema in the optimal insertion parent.
 //
@@ -66,0 +66,0 @@ // @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection

src/updatehtmlembedcommand.js

@@ -13,7 +13,7 @@ /**
 /**
- * The update raw HTML value command.
+ * The update HTML embed value command.
  *
  * The command is registered by {@link module:html-embed/htmlembedediting~HtmlEmbedEditing} as `'updateHtmlEmbed'`.
  *
- * To update the value of the raw HTML element at the current selection, execute the command:
+ * To update the value of the HTML embed element at the current selection, execute the command:
  *
@@ -53,3 +53,3 @@ *		editor.execute( 'updateHtmlEmbed', '<b>HTML.</b>' );
 
-// Returns a selected raw html element in the model, if any.
+// Returns the selected HTML embed element in the model, if any.
 //
@@ -56,0 +56,0 @@ // @param {module:engine/model/selection~Selection} selection

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47297

increased by69.91%

Number of package files

26

increased by100%

Lines of code

650

increased by3.01%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@ckeditor/ckeditor5-core@24.0.0(transitive)

• + Added@ckeditor/ckeditor5-engine@24.0.0(transitive)

• + Added@ckeditor/ckeditor5-typing@24.0.0(transitive)

• + Added@ckeditor/ckeditor5-ui@24.0.0(transitive)

• + Added@ckeditor/ckeditor5-utils@24.0.0(transitive)

• + Added@ckeditor/ckeditor5-widget@24.0.0(transitive)

• - Removed@ckeditor/ckeditor5-core@23.1.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@23.1.0(transitive)

• - Removed@ckeditor/ckeditor5-typing@23.1.0(transitive)

• - Removed@ckeditor/ckeditor5-ui@23.1.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@23.1.0(transitive)

• - Removed@ckeditor/ckeditor5-widget@23.1.0(transitive)

• Updated@ckeditor/ckeditor5-core@^24.0.0

• Updated@ckeditor/ckeditor5-engine@^24.0.0

• Updated@ckeditor/ckeditor5-ui@^24.0.0

• Updated@ckeditor/ckeditor5-utils@^24.0.0

• Updated@ckeditor/ckeditor5-widget@^24.0.0