@ckeditor/ckeditor5-list 47.6.1 → 48.0.0-alpha.0

package/LICENSE.md

@@ -18,7 +18,7 @@ Where not otherwise indicated, all CKEditor 5 content is authored by CKSour
 
 The following libraries are included in CKEditor 5 under the [MIT license](https://opensource.org/licenses/MIT):
 
-* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
 
 Trademarks
 ----------

package/ckeditor5-metadata.json

@@ -5,17 +5,17 @@
 			"className": "LegacyList",
 			"description": "Implements bulleted and numbered list features. Add the to-do list plugin to bring support for inserting interactive checkboxes.",
 			"docs": "features/lists/lists.html",
-			"path": "src/legacylist.js",
+			"path": "src/legacylist.ts",
 			"uiComponents": [
 				{
 					"type": "Button",
 					"name": "numberedList",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/numbered-list.svg"
+					"iconName": "IconNumberedList"
 				},
 				{
 					"type": "Button",
 					"name": "bulletedList",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/bulleted-list.svg"
+					"iconName": "IconBulletedList"
 				}
 			],
 			"htmlOutput": [
@@ -41,7 +41,7 @@
 				{
 					"type": "Button",
 					"name": "todoList",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/todo-list.svg"
+					"iconName": "IconTodoList"
 				}
 			],
 			"htmlOutput": [
@@ -75,7 +75,7 @@
 			"className": "LegacyListProperties",
 			"description": "Enables styling the list item markers for both ordered and unordered lists. You can choose various types of numerals and letters or visual markers to use with these lists. Also enables setting the start index (initial marker value) and list reversal (from ascending to descending) for numbered lists.",
 			"docs": "features/lists/lists-properties.html#list-styles",
-			"path": "src/legacylistproperties.js",
+			"path": "src/legacylistproperties.ts",
 			"requires": [
 				"LegacyList"
 			],
@@ -98,17 +98,17 @@
 			"className": "List",
 			"description": "Implements bulleted and numbered list features. Supports block content inside list elements. Incompatible with the LegacyList plugin.",
 			"docs": "features/lists/lists.html",
-			"path": "src/list.js",
+			"path": "src/list.ts",
 			"uiComponents": [
 				{
 					"type": "Button",
 					"name": "numberedList",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/numbered-list.svg"
+					"iconName": "IconNumberedList"
 				},
 				{
 					"type": "Button",
 					"name": "bulletedList",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/bulleted-list.svg"
+					"iconName": "IconBulletedList"
 				}
 			],
 			"htmlOutput": [
@@ -128,7 +128,7 @@
 			"className": "ListFormatting",
 			"description": "Enables integration with formatting plugins to style the list marker. Supports font color, font size, font family, bold, and italic formatting.",
 			"docs": "features/lists/lists-properties.html#list-item-marker-formatting",
-			"path": "src/listformatting.js",
+			"path": "src/listformatting.ts",
 			"requires": [
 				"ListItemBoldIntegration",
 				"ListItemItalicIntegration",
@@ -142,7 +142,7 @@
 			"className": "ListItemBoldIntegration",
 			"description": "Integrates bold formatting with list items to style list markers with bold formatting when the content is consistently bold.",
 			"docs": "features/lists/lists-properties.html#list-item-marker-formatting",
-			"path": "src/listformatting/listitemboldintegration.js",
+			"path": "src/listformatting/listitemboldintegration.ts",
 			"requires": [
 				"ListEditing"
 			],
@@ -158,7 +158,7 @@
 			"className": "ListItemItalicIntegration",
 			"description": "Integrates italic formatting with list items to style list markers with italic formatting when the content is consistently italic.",
 			"docs": "features/lists/lists-properties.html#list-item-marker-formatting",
-			"path": "src/listformatting/listitemitalicintegration.js",
+			"path": "src/listformatting/listitemitalicintegration.ts",
 			"requires": [
 				"ListEditing"
 			],
@@ -174,7 +174,7 @@
 			"className": "ListItemFontSizeIntegration",
 			"description": "Integrates font size formatting with list items to style list markers with specific font sizes when the content has consistent font sizing.",
 			"docs": "features/lists/lists-properties.html#list-item-marker-formatting",
-			"path": "src/listformatting/listitemfontsizeintegration.js",
+			"path": "src/listformatting/listitemfontsizeintegration.ts",
 			"requires": [
 				"ListEditing"
 			],
@@ -197,7 +197,7 @@
 			"className": "ListItemFontColorIntegration",
 			"description": "Integrates font color formatting with list items to style list markers with specific colors when the content has consistent font coloring.",
 			"docs": "features/lists/lists-properties.html#list-item-marker-formatting",
-			"path": "src/listformatting/listitemfontcolorintegration.js",
+			"path": "src/listformatting/listitemfontcolorintegration.ts",
 			"requires": [
 				"ListEditing"
 			],
@@ -214,7 +214,7 @@
 			"className": "ListItemFontFamilyIntegration",
 			"description": "Integrates font family formatting with list items to style list markers with specific font families when the content has consistent font family formatting.",
 			"docs": "features/lists/lists-properties.html#list-item-marker-formatting",
-			"path": "src/listformatting/listitemfontfamilyintegration.js",
+			"path": "src/listformatting/listitemfontfamilyintegration.ts",
 			"requires": [
 				"ListEditing"
 			],
@@ -231,7 +231,7 @@
 			"className": "TodoList",
 			"description": "Allows for creating a list of interactive checkboxes with labels. Supports all features of lists so you can nest a to-do list together with bulleted and numbered lists in any combination.",
 			"docs": "features/lists/todo-lists.html",
-			"path": "src/todolist.js",
+			"path": "src/todolist.ts",
 			"requires": [
 				"List"
 			],
@@ -239,7 +239,7 @@
 				{
 					"type": "Button",
 					"name": "todoList",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/todo-list.svg"
+					"iconName": "IconTodoList"
 				}
 			],
 			"htmlOutput": [
@@ -252,7 +252,10 @@
 				},
 				{
 					"elements": "label",
-					"classes": [ "todo-list__label", "todo-list__label_without-description" ]
+					"classes": [
+						"todo-list__label",
+						"todo-list__label_without-description"
+					]
 				},
 				{
 					"elements": "span",
@@ -273,7 +276,7 @@
 			"className": "ListProperties",
 			"description": "Enables styling the list item markers for both ordered and unordered lists created by the list plugin. You can choose various types of numerals and letters or visual markers to use with these lists. Also enables setting the start index (initial marker value) and list reversal (from ascending to descending) for numbered lists.",
 			"docs": "features/lists/lists-properties.html",
-			"path": "src/listproperties.js",
+			"path": "src/listproperties.ts",
 			"requires": [
 				"List"
 			],

package/dist/index-content.css

@@ -3,165 +3,189 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 :root{
-	--ck-content-list-marker-color:var(--ck-content-font-color);
-	--ck-content-list-marker-font-family:var(--ck-content-font-family);
-	--ck-content-list-marker-font-size:var(--ck-content-font-size);
+  --ck-content-list-marker-color:var(--ck-content-font-color);
+  --ck-content-list-marker-font-family:var(--ck-content-font-family);
+  --ck-content-list-marker-font-size:var(--ck-content-font-size);
 }
 
 .ck-content li > p:first-of-type{
-		margin-top:0;
-	}
+  margin-top:0;
+}
 
 .ck-content li > p:only-of-type{
-		margin-top:0;
-		margin-bottom:0;
-	}
+  margin-top:0;
+  margin-bottom:0;
+}
 
 .ck-content li.ck-list-marker-bold::marker{
-		font-weight:bold;
-	}
+  font-weight:bold;
+}
 
 .ck-content li.ck-list-marker-italic::marker{
-		font-style:italic;
-	}
+  font-style:italic;
+}
 
 .ck-content li.ck-list-marker-color::marker{
-		color:var(--ck-content-list-marker-color);
-	}
+  color:var(--ck-content-list-marker-color);
+}
 
 .ck-content li.ck-list-marker-font-family::marker{
-		font-family:var(--ck-content-list-marker-font-family);
-	}
+  font-family:var(--ck-content-list-marker-font-family);
+}
 
 .ck-content li.ck-list-marker-font-size::marker{
-		font-size:var(--ck-content-list-marker-font-size);
-	}
+  font-size:var(--ck-content-list-marker-font-size);
+}
 
 .ck-content li.ck-list-marker-font-size-tiny::marker{
-		font-size:var(--ck-content-font-size-tiny);
-	}
+  font-size:var(--ck-content-font-size-tiny);
+}
 
 .ck-content li.ck-list-marker-font-size-small::marker{
-		font-size:var(--ck-content-font-size-small);
-	}
+  font-size:var(--ck-content-font-size-small);
+}
 
 .ck-content li.ck-list-marker-font-size-big::marker{
-		font-size:var(--ck-content-font-size-big);
-	}
+  font-size:var(--ck-content-font-size-big);
+}
 
 .ck-content li.ck-list-marker-font-size-huge::marker{
-		font-size:var(--ck-content-font-size-huge);
-	}
+  font-size:var(--ck-content-font-size-huge);
+}
 
 .ck-content ol{
-	list-style-type:decimal;
+  list-style-type:decimal;
 }
 
 .ck-content ol ol{
-		list-style-type:lower-latin;
-	}
+  list-style-type:lower-latin;
+}
 
 .ck-content ol ol ol{
-			list-style-type:lower-roman;
-		}
+  list-style-type:lower-roman;
+}
 
 .ck-content ol ol ol ol{
-				list-style-type:upper-latin;
-			}
+  list-style-type:upper-latin;
+}
 
 .ck-content ol ol ol ol ol{
-					list-style-type:upper-roman;
-				}
+  list-style-type:upper-roman;
+}
 
 .ck-content ul{
-	list-style-type:disc;
+  list-style-type:disc;
 }
 
 .ck-content ul ul{
-		list-style-type:circle;
-	}
+  list-style-type:circle;
+}
 
 .ck-content ul ul ul{
-			list-style-type:square;
-		}
+  list-style-type:square;
+}
 
 .ck-content ul ul ul ul{
-				list-style-type:square;
-			}
+  list-style-type:square;
+}
 
 :root{
-	--ck-content-todo-list-checkmark-size:16px;
+  --ck-content-todo-list-checkmark-size:16px;
+}
+
+.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input{
+  -webkit-appearance:none;
+  width:var(--ck-content-todo-list-checkmark-size);
+  height:var(--ck-content-todo-list-checkmark-size);
+  vertical-align:middle;
+  border:0;
+  margin-left:0;
+  margin-right:-15px;
+  display:inline-block;
+  position:relative;
+  left:-25px;
+  right:0;
+}
+
+[dir="rtl"]:is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input){
+  margin-left:-15px;
+  margin-right:0;
+  left:0;
+  right:-25px;
+}
+
+:is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):before{
+  box-sizing:border-box;
+  content:"";
+  border:1px solid #333;
+  border-radius:2px;
+  width:100%;
+  height:100%;
+  transition:box-shadow .25s ease-in-out;
+  display:block;
+  position:absolute;
 }
+
+@media (prefers-reduced-motion: reduce){
+  :is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):before{
+    transition:none;
+  }
+}
+
+:is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):after{
+  box-sizing:content-box;
+  pointer-events:none;
+  content:"";
+  left:calc(var(--ck-content-todo-list-checkmark-size) / 3);
+  top:calc(var(--ck-content-todo-list-checkmark-size) / 5.3);
+  width:calc(var(--ck-content-todo-list-checkmark-size) / 5.3);
+  height:calc(var(--ck-content-todo-list-checkmark-size) / 2.6);
+  border-style:solid;
+  border-color:#0000;
+  border-width:0 calc(var(--ck-content-todo-list-checkmark-size) / 8) calc(var(--ck-content-todo-list-checkmark-size) / 8) 0;
+  display:block;
+  position:absolute;
+  transform:rotate(45deg);
+}
+
+:is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input)[checked]:before{
+  background:#26ab33;
+  border-color:#26ab33;
+}
+
+:is(.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input)[checked]:after{
+  border-color:#fff;
+}
+
 .ck-content .todo-list{
-	list-style:none;
+  list-style:none;
 }
+
 .ck-content .todo-list li{
-		position:relative;
-		margin-bottom:5px;
-	}
+  margin-bottom:5px;
+  position:relative;
+}
+
 .ck-content .todo-list li .todo-list{
-			margin-top:5px;
-		}
-.ck-content .todo-list .todo-list__label > input{
-			-webkit-appearance:none;
-			display:inline-block;
-			position:relative;
-			width:var(--ck-content-todo-list-checkmark-size);
-			height:var(--ck-content-todo-list-checkmark-size);
-			vertical-align:middle;
-			border:0;
-			left:-25px;
-			margin-right:-15px;
-			right:0;
-			margin-left:0;
-		}
-.ck-content[dir=rtl] .todo-list .todo-list__label > input{
-		left:0;
-		margin-right:0;
-		right:-25px;
-		margin-left:-15px;
-	}
-.ck-content .todo-list .todo-list__label > input::before{
-		display:block;
-		position:absolute;
-		box-sizing:border-box;
-		content:'';
-		width:100%;
-		height:100%;
-		border:1px solid hsl(0, 0%, 20%);
-		border-radius:2px;
-		transition:250ms ease-in-out box-shadow;
-	}
-@media (prefers-reduced-motion: reduce){
-.ck-content .todo-list .todo-list__label > input::before{
-			transition:none;
-	}
-		}
-.ck-content .todo-list .todo-list__label > input::after{
-		display:block;
-		position:absolute;
-		box-sizing:content-box;
-		pointer-events:none;
-		content:'';
-		left:calc( var(--ck-content-todo-list-checkmark-size) / 3);
-		top:calc( var(--ck-content-todo-list-checkmark-size) / 5.3);
-		width:calc( var(--ck-content-todo-list-checkmark-size) / 5.3);
-		height:calc( var(--ck-content-todo-list-checkmark-size) / 2.6);
-		border-style:solid;
-		border-color:transparent;
-		border-width:0 calc( var(--ck-content-todo-list-checkmark-size) / 8) calc( var(--ck-content-todo-list-checkmark-size) / 8) 0;
-		transform:rotate(45deg);
-	}
-.ck-content .todo-list .todo-list__label > input[checked]::before{
-			background:hsl(126, 64%, 41%);
-			border-color:hsl(126, 64%, 41%);
-		}
-.ck-content .todo-list .todo-list__label > input[checked]::after{
-			border-color:hsl(0, 0%, 100%);
-		}
+  margin-top:5px;
+}
+
 .ck-content .todo-list .todo-list__label .todo-list__label__description{
-			vertical-align:middle;
-		}
-.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox]{
-			position:absolute;
-		}
+  vertical-align:middle;
+}
+
+.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type="checkbox"]{
+  position:absolute;
+}
+
+.ck-editor__editable.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input{
+  cursor:pointer;
+}
+
+:is(.ck-editor__editable.ck-content .todo-list .todo-list__label > input, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable="false"] > input):hover:before{
+  box-shadow:0 0 0 5px #0000001a;
+}
+
+.ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type="checkbox"]{
+  position:absolute;
+}