Integrate emojis with the text transformation feature

[pomek]

📝 Provide a description of the new feature

The text transformation feature enables autocorrection. It automatically changes predefined text fragments into their improved forms.

Example: (tm) is replaced with ™.

Integrating the text emoticons and a commonly used emoji they might map to would be good.

Below, you can find a text and a corresponding emoji.

• :) — :slightly_smiling_face: (🙂)
• :( — :slightly_frowning_face: (🙁)
• :D — :grinning: (😀)
• :O — :open_mouth: (😮)
• ;) — :wink: (😉)
• :P — :stuck_out_tongue: (😛)
• :/ — :confused: (😕)
• :\ — :confused: (😕)
• :| — :neutral_face: (😐)
• 8) — :sunglasses: (😎)
• :* — :kissing: (😗)
• :'( — :cry: (😢)
• :') — :joy: (😂)
• XD — :laughing: (😆)
• XP — :stuck_out_tongue_winking_eye: (😜)
• T_T — :sob: (😭)
• -_- — :expressionless: (😑)
• x_x — :dizzy_face: (😵)
• :3 — :smile_cat: (😸)
• <3 — :heart: (❤)
• </3 — :broken_heart: (💔)
• >:( — :angry: (😠)
• D: — :anguished: (😧)
• :^D — :zany_face: (🤪)
• :v — :v: (✌)
• =D — :grin: (😁)
• 8( — :tired_face: (😫)
• ;( — :cry: (😢)

To avoid issues with the loaded plugins' order, I suggest moving the TextTransformation initialization phase from the init() hook to afterInit().

ckeditor5/packages/ckeditor5-typing/src/texttransformation.ts

Lines 121 to 131 in 9333cc9

	public init(): void {
	const model = this.editor.model;
	const modelSelection = model.document.selection;
	modelSelection.on( 'change:range', () => {
	// Disable plugin when selection is inside a code block.
	this.isEnabled = !modelSelection.anchor!.parent.is( 'element', 'codeBlock' );
	} );
	this._enableTransformationWatchers();
	}

Definition of Done

• A text emoticon is replaced with an emoji while typing in the editor.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.