Merge pull request #18736 from ckeditor/18-06-2025-line-height

Other (core): Implemented the `--ck-content-line-height` CSS variable to standardize `line-height` styling in CKEditor 5 content. See #18710.

MAJOR BREAKING CHANGE: The editor now enforces a default line height of `1.5`, affecting both editing and rendered content. This may impact existing styling and layout, so custom line-height settings should be reviewed.

Author: pomek

packages/ckeditor5-core/package.json

@@ -62,6 +62,7 @@
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",
+    "theme",
     "CHANGELOG.md"
   ],
   "scripts": {

packages/ckeditor5-core/src/editor/editor.ts

@@ -46,6 +46,8 @@ import { getEditorUsageData, type EditorUsageData } from './utils/editorusagedat
 import type { LoadedPlugins, PluginConstructor } from '../plugin.js';
 import type { EditorConfig } from './editorconfig.js';
 
+import '../../theme/core.css';
+
 declare global {
 	// eslint-disable-next-line no-var
 	var CKEDITOR_GLOBAL_LICENSE_KEY: string | undefined;

packages/ckeditor5-core/theme/core.css

@@ -0,0 +1,12 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-content-line-height: 1.5;
+}
+
+.ck-content {
+	line-height: var(--ck-content-line-height);
+}

packages/ckeditor5-icons/src/index.ts

@@ -80,6 +80,7 @@ export { default as IconIndent } from '../theme/icons/indent.svg';
 export { default as IconInsertMergeField } from '../theme/icons/insert-merge-field.svg';
 export { default as IconItalic } from '../theme/icons/italic.svg';
 export { default as IconLegalStyleList } from '../theme/icons/legal-style-list.svg';
+export { default as IconLineHeight } from '../theme/icons/line-height.svg';
 export { default as IconLink } from '../theme/icons/link.svg';
 export { default as IconListStyleCircle } from '../theme/icons/list-style-circle.svg';
 export { default as IconListStyleDecimalLeadingZero } from '../theme/icons/list-style-decimal-leading-zero.svg';