Email integration package

package.json

@@ -79,7 +79,8 @@
     "@ckeditor/ckeditor5-utils": "44.1.0",
     "@ckeditor/ckeditor5-watchdog": "44.1.0",
     "@ckeditor/ckeditor5-widget": "44.1.0",
-    "@ckeditor/ckeditor5-word-count": "44.1.0"
+    "@ckeditor/ckeditor5-word-count": "44.1.0",
+    "@ckeditor/ckeditor5-email": "0.0.1"
   },
   "devDependencies": {
     "@babel/parser": "^7.23.3",

packages/ckeditor5-email/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

packages/ckeditor5-email/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+========================================
+
+See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/contributing/contributing.html) to learn more.

packages/ckeditor5-email/LICENSE.md

@@ -0,0 +1,22 @@
+Software License Agreement
+==========================
+
+**CKEditor&nbsp;5 email feature** (https://github.com/ckeditor/ckeditor5)<br>
+Copyright (c) 2003–2025, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+
+Licensed under a dual-license model, this software is available under:
+
+* the [GNU General Public License Version 2 or later](https://www.gnu.org/licenses/gpl.html),
+* or commercial license terms from CKSource Holding sp. z o.o.
+
+For more information, see: [https://ckeditor.com/legal/ckeditor-licensing-options](https://ckeditor.com/legal/ckeditor-licensing-options).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

packages/ckeditor5-email/README.md

@@ -0,0 +1,35 @@
+CKEditor 5 email integration feature
+========================================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-email.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-email)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5?branch=master)
+
+This package implements email integration features for CKEditor 5. It provides basic functionality for handling email content.
+
+## Installation
+
+```bash
+npm install @ckeditor/ckeditor5-email
+```
+
+## Create free account
+
+If you want to check full CKEditor 5 capabilities, sign up for a [free non-commitment 14-day trial](https://portal.ckeditor.com/checkout?plan=free).
+
+## Demo
+
+Check out the [demo in the font feature guide](https://ckeditor.com/docs/ckeditor5/latest/features/email.html#demo).
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-email` package](https://ckeditor.com/docs/ckeditor5/latest/api/email.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+
+## License
+
+Licensed under a dual-license model, this software is available under:
+
+* the [GNU General Public License Version 2 or later](https://www.gnu.org/licenses/gpl.html),
+* or commercial license terms from CKSource Holding sp. z o.o.
+
+For more information, see: [https://ckeditor.com/legal/ckeditor-licensing-options](https://ckeditor.com/legal/ckeditor-licensing-options).

packages/ckeditor5-email/docs/_snippets/features/build-email-source.html

@@ -0,0 +1 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>

packages/ckeditor5-email/docs/_snippets/features/build-email-source.js

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* globals window */
+
+import { AutoLink, LinkImage } from '@ckeditor/ckeditor5-link';
+import { Bookmark } from '@ckeditor/ckeditor5-bookmark';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
+import { PictureEditing, ImageInsert, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+// Umberto combines all `packages/*/docs` into the `docs/` directory. The import path must be valid after merging all directories.
+import ClassicEditor from '../build-classic.js';
+
+window.CKEditorPlugins = { AutoLink, Bookmark, PictureEditing, ImageInsert, ImageResize, AutoImage, LinkImage, CKBox, CKBoxImageEdit };
+
+window.ClassicEditor = ClassicEditor;
+window.CS_CONFIG = CS_CONFIG;

packages/ckeditor5-email/docs/_snippets/features/email.html

@@ -0,0 +1,16 @@
+<div class="ck ck-content" id="snippet-link">
+	<h3>Valletta</h3>
+
+	<p>
+		The capital city of <a href="https://en.wikipedia.org/wiki/Malta">Malta</a> is the top destination
+		this summer. It’s home to cutting-edge contemporary architecture,
+		<a href="https://en.wikipedia.org/wiki/Baroque">baroque</a>
+		masterpieces, delicious local cuisine, and at least 8 months of sun.
+	</p>
+	<p>
+		It’s also a top destination for filmmakers so that you can take a tour through locations familiar
+		to you from <a href="https://en.wikipedia.org/wiki/Game_of_Thrones">Game
+		of Thrones</a>, <a href="https://en.wikipedia.org/wiki/Gladiator_(2000_film)">Gladiator</a>,
+		<a href="https://en.wikipedia.org/wiki/Troy_(film)">Troy</a>, and many more.
+	</p>
+</div>

packages/ckeditor5-email/docs/_snippets/features/email.js

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* globals console, window, document, ClassicEditor, CKEditorPlugins, CS_CONFIG */
+
+import { TOKEN_URL } from '@ckeditor/ckeditor5-ckbox/tests/_utils/ckbox-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-link' ), {
+		extraPlugins: [ ...Object.values( CKEditorPlugins ) ],
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'undo', 'redo', '|', 'heading',
+				'|', 'bold', 'italic',
+				'|', 'link', 'bookmark', 'insertImage', 'insertTable', 'mediaEmbed',
+				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
+			]
+		},
+		image: {
+			toolbar: [
+				'imageStyle:inline', 'imageStyle:block', 'imageStyle:wrapText', '|',
+				'toggleImageCaption', 'imageTextAlternative', 'ckboxImageEdit'
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
+		},
+		ckbox: {
+			tokenUrl: TOKEN_URL,
+			allowExternalImagesEditing: [ /^data:/, 'origin', /ckbox/ ],
+			forceDemoLabel: true
+		},
+		licenseKey: 'GPL'
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		window.attachTourBalloon( {
+			target: window.findToolbarItem( editor.ui.view.toolbar, item => item.label === 'Link' ),
+			text: 'Click to create a link.',
+			editor
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-email/docs/api/email.md

@@ -0,0 +1,36 @@
+---
+category: api-reference
+---
+
+# CKEditor 5 email feature
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-link.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-link)
+
+This package implements the email feature for CKEditor 5. It allows for turning the edited content into emails.
+
+## Demo
+
+Check out the demo in the {@link features/email#demo email feature guide}.
+
+## Documentation
+
+See the {@link features/email email feature guide} and the {@link module:email/emailintegration~EmailIntegration} plugin documentation.
+
+## Installation
+
+This package is part of our open-source aggregate package.
+
+```bash
+npm install ckeditor5
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link).
+
+## External links
+
+* [`@ckeditor/ckeditor5-link` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-link)
+* [`ckeditor/ckeditor5-link` on GitHub](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md)

packages/ckeditor5-email/docs/features/email.md

@@ -0,0 +1,128 @@
+---
+title: Email
+meta-title: Email | CKEditor 5 Documentation
+category: features
+modified_at: 2025-01-30
+---
+
+{@snippet features/build-email-source}
+
+Creating and editing emails is a demanding task that has to overcome various semantic and technical difficulties due to a variety of software solutions and a lack of a standardized approach. The email feature is a set of tools aimed at making the email composition a better and more effective experience.
+
+## Demo
+
+Use the email toolbar button {@icon @ckeditor/ckeditor5-link/theme/icons/link.svg Link}.
+
+{@snippet features/email}
+
+<info-box info>
+	This demo presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action.
+</info-box>
+
+## Installation
+
+<info-box info>
+	⚠️ **New import paths**
+
+	Starting with {@link updating/update-to-42 version 42.0.0}, we changed the format of import paths. This guide uses the new, shorter format. Refer to the {@link getting-started/legacy-getting-started/legacy-imports Packages in the legacy setup} guide if you use an older version of CKEditor&nbsp;5.
+</info-box>
+
+After {@link getting-started/integrations-cdn/quick-start installing the editor}, add the feature to your plugin list and toolbar configuration:
+
+<code-switcher>
+```js
+import { ClassicEditor, EmailIntegration } from 'ckeditor5';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
+		plugins: [ EmailIntegration, /* ... */ ],
+		toolbar: [ 'email', /* ... */ ], //probably not
+		link: {
+			// Configuration.
+		}
+	} )
+	.then( /* ... */ )
+	.catch( /* ... */ );
+```
+</code-switcher>
+
+## Configuration
+
+### Empty block plugin
+
+The {@link module:html-support/emptyblock~EmptyBlock} plugin is recommended for email editing as it helps maintain compatibility with email clients. By default, CKEditor&nbsp;5 adds `&nbsp;` fillers to empty block elements. This can cause inconsistent rendering across email clients and interfere with the CSS styling.
+
+Here is how empty blocks are handled with and without the plugin:
+
+```html
+<!-- Without EmptyBlock plugin -->
+<p class="spacer">&nbsp;</p>
+<td>&nbsp;</td>
+
+<!-- With EmptyBlock plugin -->
+<p class="spacer"></p>
+<td></td>
+```
+
+To enable the EmptyBlock plugin, add it to your editor configuration:
+
+```js
+import { EmailIntegration, EmptyBlock } from 'ckeditor5';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ EmailIntegration, EmptyBlock, /* ... */ ],
+		htmlSupport: {
+			preserveEmptyBlocksInEditingView: true
+		}
+	} )
+	.then( editor => {
+		console.log( 'Editor was initialized' );
+	} )
+	.catch( error => {
+		console.error( error );
+	} );
+```
+
+The `preserveEmptyBlocksInEditingView` option determines whether empty blocks should be preserved during editing (true) or only in the final output (false).
+
+<info-box warning>
+	Without the EmptyBlock plugin, email clients may render empty blocks inconsistently. The editor will display a warning in the console if the plugin is not enabled.
+</info-box>
+
+### Logs and warnings
+
+The {@link module:email/emailintegrationconfig~EmailIntegrationConfig} property lets you suppress warnings or log messages about email client compatibility.
+
+```js
+ClassicEditor
+	.create( editorElement, {
+		email: {
+			logs: {
+				suppressAll: false,
+				suppress: [ ... ]
+			}
+		}
+	} )
+```
+
+## Related features
+
+Here are some related CKEditor&nbsp;5 features that you may find helpful:
+* Export inline styles &nbsp; The export inline styles feature turn all external CSS styles to inline style, providing better compatibility with various email clients.
+
+## Common API
+
+The {@link module:email/emailintegration~EmailIntegration} plugin registers the following components:
+
+* The {@link module:email/emailintegration~EmailIntegration} component.
+* The {@link module:email/emailintegrationconfig~EmailIntegrationConfig} property.
+
+<info-box>
+	We recommend using the official {@link framework/development-tools/inspector CKEditor&nbsp;5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
+</info-box>
+
+## Contribute
+
+The source code of the feature is available on GitHub at [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link).

packages/ckeditor5-email/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ckeditor/ckeditor5-email",
+  "version": "0.0.1",
+  "description": "Email integration feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
+  ],
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "ckeditor5": "44.1.0",
+    "@ckeditor/ckeditor5-core": "44.1.0",
+    "@ckeditor/ckeditor5-font": "44.1.0",
+    "@ckeditor/ckeditor5-list": "44.1.0",
+    "@ckeditor/ckeditor5-table": "44.1.0",
+    "@ckeditor/ckeditor5-utils": "44.1.0"
+  },
+  "devDependencies": {
+    "typescript": "5.0.4",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "@ckeditor/ckeditor5-basic-styles": "44.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "44.1.0",
+    "@ckeditor/ckeditor5-essentials": "44.1.0",
+    "@ckeditor/ckeditor5-heading": "44.1.0",
+    "@ckeditor/ckeditor5-highlight": "44.1.0",
+    "@ckeditor/ckeditor5-image": "44.1.0",
+    "@ckeditor/ckeditor5-paragraph": "44.1.0",
+    "@ckeditor/ckeditor5-source-editing": "44.1.0"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://ckeditor.com/ckeditor-5",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-email"
+  },
+  "files": [
+    "dist",
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsc -p ./tsconfig.json",
+    "build:dist": "node ../../scripts/nim/build-package.mjs"
+  }
+}