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

package/LICENSE.md

@@ -19,7 +19,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):
 
 * emojibase-data - Copyright (c) 2017-2019 Miles Johnson.
-* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
 * fuzzysort - Copyright (c) 2018 Stephen Kamenar.
 * is-emoji-supported - Copyright (c) 2016-2020 Koala Interactive, Inc.
 

package/ckeditor5-metadata.json

@@ -4,7 +4,7 @@
 			"name": "Emoji",
 			"className": "Emoji",
 			"description": "Allows for inserting emojis via a dropdown or by typing `:` followed by emoji name.",
-			"path": "src/emoji.js",
+			"path": "src/emoji.ts",
 			"docs": "features/emoji.html",
 			"requires": [
 				"Mention"
@@ -13,7 +13,7 @@
 				{
 					"type": "Button",
 					"name": "emoji",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/emoji.svg"
+					"iconName": "IconEmoji"
 				}
 			]
 		},
@@ -21,7 +21,7 @@
 			"name": "Emoji mention",
 			"className": "EmojiMention",
 			"description": "Allows for inserting emojis by typing `:` followed by emoji name.",
-			"path": "src/emojimention.js",
+			"path": "src/emojimention.ts",
 			"docs": "features/emoji.html",
 			"requires": [
 				"Mention"
@@ -31,13 +31,13 @@
 			"name": "Emoji picker",
 			"className": "EmojiPicker",
 			"description": "Allows for inserting emojis via a dropdown.",
-			"path": "src/emojipicker.js",
+			"path": "src/emojipicker.ts",
 			"docs": "features/emoji.html",
 			"uiComponents": [
 				{
 					"type": "Button",
 					"name": "emoji",
-					"iconPath": "@ckeditor/ckeditor5-icons/theme/icons/emoji.svg"
+					"iconName": "IconEmoji"
 				}
 			]
 		}

package/{src → dist}/emoji.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module emoji/emoji
  */
-import { Plugin } from 'ckeditor5/src/core.js';
+import { Plugin } from '@ckeditor/ckeditor5-core';
 import { EmojiMention } from './emojimention.js';
 import { EmojiPicker } from './emojipicker.js';
 /**

package/{src → dist}/emojicommand.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module emoji/emojicommand
  */
-import { Command } from 'ckeditor5/src/core.js';
+import { Command } from '@ckeditor/ckeditor5-core';
 /**
  * Command that shows the emoji user interface.
  */

package/{src → dist}/emojimention.d.ts

@@ -2,8 +2,9 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import { Plugin, type Editor } from 'ckeditor5/src/core.js';
-import { Typing } from 'ckeditor5/src/typing.js';
+import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { Mention } from '@ckeditor/ckeditor5-mention';
 import { EmojiRepository } from './emojirepository.js';
 import { type EmojiPicker } from './emojipicker.js';
 /**
@@ -37,7 +38,7 @@ export declare class EmojiMention extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof EmojiRepository, typeof Typing, "Mention"];
+    static get requires(): readonly [typeof EmojiRepository, typeof Typing, typeof Mention];
     /**
      * @inheritDoc
      */

package/{src → dist}/emojipicker.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module emoji/emojipicker
  */
-import { ContextualBalloon, Dialog } from 'ckeditor5/src/ui.js';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { Typing } from 'ckeditor5/src/typing.js';
+import { ContextualBalloon, Dialog } from '@ckeditor/ckeditor5-ui';
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { Typing } from '@ckeditor/ckeditor5-typing';
 import { EmojiRepository } from './emojirepository.js';
 import { EmojiPickerView } from './ui/emojipickerview.js';
 import { EmojiPickerFormView } from './ui/emojipickerformview.js';

package/{src → dist}/emojirepository.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { type Editor, Plugin } from '@ckeditor/ckeditor5-core';
 import { EmojiUtils } from './emojiutils.js';
 import type { EmojiSkinToneId } from './emojiconfig.js';
 /**

package/{src → dist}/emojiutils.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import { Plugin } from 'ckeditor5/src/core.js';
+import { Plugin } from '@ckeditor/ckeditor5-core';
 import type { EmojiCdnResource, EmojiEntry } from './emojirepository.js';
 /**
  * The Emoji utilities plugin.

package/dist/index-editor.css

@@ -3,227 +3,122 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 .ck.ck-emoji{
-	width:320px;
+  width:320px;
 }
 
 .ck .ck.ck-emoji__search{
-	display:flex;
-	padding:var(--ck-spacing-large);
-	padding-bottom:var(--ck-spacing-medium);
-	justify-content:space-between;
-	align-items:center;
+  padding:var(--ck-spacing-large);
+  padding-bottom:var(--ck-spacing-medium);
+  justify-content:space-between;
+  align-items:center;
+  display:flex;
 }
 
 .ck .ck.ck-emoji__search > .ck.ck-search{
-		flex:1;
-	}
+  flex:1;
+}
+
 .ck .ck-fake-emoji-selection{
-	background:var(--ck-color-link-fake-selection);
+  background:var(--ck-color-link-fake-selection);
 }
+
 .ck .ck-fake-emoji-selection_collapsed{
-	height:100%;
-	border-right:1px solid var(--ck-color-base-text);
-	margin-right:-1px;
-	outline:solid 1px hsla(0, 0%, 100%, .5);
+  border-right:1px solid var(--ck-color-base-text);
+  outline:1px solid #ffffff80;
+  height:100%;
+  margin-right:-1px;
 }
 
 div.ck.ck-balloon-panel.ck-emoji-picker-balloon{
-	z-index:calc( var(--ck-z-dialog) + 1);
+  z-index:calc(var(--ck-z-dialog) + 1);
 }
 
 .ck.ck-emoji__categories-list{
-	display:flex;
-	justify-content:space-between;
-	margin:0 var(--ck-spacing-large);
+  margin:0 var(--ck-spacing-large);
+  justify-content:space-between;
+  display:flex;
 }
 
 .ck.ck-emoji__categories-list > .ck.ck-button.ck-button_with-text{
-		border-width:0;
-		border-bottom-width:2px;
-		border-bottom-style:solid;
-		border-bottom-color:transparent;
-		padding:0;
-		font-size:var(--ck-font-size-big);
-		min-width:var(--ck-font-size-big);
-		min-height:var(--ck-font-size-big);
-	}
+  font-size:var(--ck-font-size-big);
+  min-width:var(--ck-font-size-big);
+  min-height:var(--ck-font-size-big);
+  border-width:0 0 2px;
+  border-bottom-style:solid;
+  border-bottom-color:#0000;
+  padding:0;
+}
 
 .ck.ck-emoji__categories-list > .ck.ck-button.ck-button_with-text.ck-emoji__category-item.ck-on{
-			border-bottom-color:var(--ck-color-base-active);
-		}
+  border-bottom-color:var(--ck-color-base-active);
+}
 
 .ck.ck-emoji__categories-list > .ck.ck-button.ck-button_with-text > span{
-			margin:auto;
-		}
+  margin:auto;
+}
 
 :root{
-	--ck-emoji-grid-tile-size:27px;
+  --ck-emoji-grid-tile-size:27px;
 }
 
 .ck.ck-emoji .ck.ck-emoji__tiles{
-		max-width:100%;
-		max-height:min(265px, 40vh);
-
-		overflow-y:auto;
-		overflow-x:hidden;
-		border-top:1px solid var(--ck-color-base-border);
-	}
+  border-top:1px solid var(--ck-color-base-border);
+  max-width:100%;
+  max-height:min(265px, 40vh);
+  overflow:hidden auto;
+}
 
 .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__grid{
-			display:grid;
-			grid-template-columns:repeat(auto-fill, minmax(var(--ck-emoji-grid-tile-size), 1fr));
-			margin:var(--ck-spacing-standard) var(--ck-spacing-large);
-			grid-gap:var(--ck-spacing-small);
-		}
+  grid-template-columns:repeat(auto-fill, minmax(var(--ck-emoji-grid-tile-size), 1fr));
+  margin:var(--ck-spacing-standard) var(--ck-spacing-large);
+  grid-gap:var(--ck-spacing-small);
+  display:grid;
+}
 
 .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile{
-			width:var(--ck-emoji-grid-tile-size);
-			height:var(--ck-emoji-grid-tile-size);
-			min-width:var(--ck-emoji-grid-tile-size);
-			min-height:var(--ck-emoji-grid-tile-size);
-			font-size:1.5em;
-			padding:0;
-			transition:.2s ease box-shadow;
-			border:0;
-		}
+  width:var(--ck-emoji-grid-tile-size);
+  height:var(--ck-emoji-grid-tile-size);
+  min-width:var(--ck-emoji-grid-tile-size);
+  min-height:var(--ck-emoji-grid-tile-size);
+  border:0;
+  padding:0;
+  font-size:1.5em;
+  transition:box-shadow .2s;
+}
 
 @media (prefers-reduced-motion: reduce){
-
-.ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile{
-				transition:none;
-		}
-			}
-
-.ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile:focus:not(.ck-disabled),
-			.ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile:hover:not(.ck-disabled){
-				border:0;
-				box-shadow:inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
-			}
-
-.ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile .ck-button__label{
-				line-height:var(--ck-emoji-grid-tile-size);
-				width:100%;
-				text-align:center;
-			}
-
-.ck-vertical-form .ck-button::after{
-		content:"";
-		width:0;
-		position:absolute;
-		right:-1px;
-		top:-1px;
-		bottom:-1px;
-		z-index:1;
-	}
-
-.ck-vertical-form .ck-button:focus::after{
-		display:none;
-	}
-
-@media screen and (max-width: 600px){
-			.ck.ck-responsive-form .ck-button::after{
-				content:"";
-				width:0;
-				position:absolute;
-				right:-1px;
-				top:-1px;
-				bottom:-1px;
-				z-index:1;
-			}
-
-			.ck.ck-responsive-form .ck-button:focus::after{
-				display:none;
-			}
-	}
-
-:root{
-	--ck-form-default-width:340px;
+  .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile{
+    transition:none;
+  }
 }
 
-.ck.ck-form{
-	padding:0 0 var(--ck-spacing-large);
+.ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile:focus:not(.ck-disabled), .ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile:hover:not(.ck-disabled){
+  box-shadow:inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
+  border:0;
 }
 
-.ck.ck-form.ck-form_default-width{
-		width:var(--ck-form-default-width);
-	}
-
-.ck.ck-form:focus{
-		outline:none;
-	}
-
-.ck.ck-form .ck.ck-input-text,
-	.ck.ck-form .ck.ck-input-number{
-		min-width:100%;
-		width:0;
-	}
-
-.ck.ck-form .ck.ck-dropdown{
-		min-width:100%;
-	}
-
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus){
-				border:1px solid var(--ck-color-base-border);
-			}
-
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label{
-				width:100%;
-			}
-
-@media screen and (max-width: 600px){
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit{
-					flex-direction:column;
-					align-items:stretch;
-					padding:0;
-			}
-	}
-
-@media screen and (max-width: 600px){
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck{
-						margin:var(--ck-spacing-large) var(--ck-spacing-large) 0;
-				}
-	}
-
-@media screen and (max-width: 600px){
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text{
-						justify-content:center;
-				}
-	}
-
-@media screen and (max-width: 600px){
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding{
-					padding-bottom:var(--ck-spacing-large);
-			}
-	}
-
-[dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child){
-				margin-left:0;
-			}
-
-[dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child){
-				margin-left:0;
-			}
+.ck.ck-emoji .ck.ck-emoji__tiles .ck-emoji__tile .ck-button__label{
+  line-height:var(--ck-emoji-grid-tile-size);
+  text-align:center;
+  width:100%;
+}
 
 .ck.ck-form.ck-emoji-picker-form{
-	padding-bottom:0;
+  padding-bottom:0;
 }
 
 .ck.ck-form.ck-emoji-picker-form .ck.ck-dropdown .ck-dropdown__button:not(:focus){
-		border-color:transparent;
-	}
+  border-color:#0000;
+}
 
 .ck.ck-emoji__skin-tone{
-	margin-left:var(--ck-spacing-standard);
+  margin-left:var(--ck-spacing-standard);
 }
 
 .ck.ck-emoji__skin-tone > .ck.ck-dropdown .ck.ck-list__item{
-			min-width:1em;
-		}
+  min-width:1em;
+}
 
 .ck.ck-emoji__skin-tone > .ck.ck-dropdown .ck-button.ck-dropdown__button .ck-button__label{
-				width:initial;
-			}
+  width:initial;
+}