ng-utf8-emojis-to-images

Angular6+ pipe based on the library @ctrl/ngx-emoji-mart to transform HTML containing unicode emojis to HTML containing emoji image elements

Demo

For a demo either just checkout this project and run npm install && npm run start or visit the StackBlitz demo page.

Installation

For use in an existing angular project run npm install --save ng-utf8-emojis-to-images @ctrl/ngx-emoji-mart

Then add the installed module to your app.module.ts:

import { Utf8EmojisToImagesModule } from 'ng-utf8-emojis-to-images';

// ...

@NgModule({
  // ...
  imports: [
    // ...
    Utf8EmojisToImagesModule
  ]
  // ...
})
export class AppModule {}

Usage

Without parameters

Anywhere in your template:

<div [innerHTML]="'<a title=\'Ang🧛‍♀️ular\'>Hello</a> 👌 Ang🧛‍♀️ular 👌!' | utf8EmojisToImages"></div>

By default the pipe will use the apple sheet (hosted at https://unpkg.com/emoji-datasource-apple@5.0.1/img/apple/sheets-256/64.png) - for other available sheets see https://missive.github.io/emoji-mart/

With all available parameters (all of them optional!)

<div [innerHTML]="html | utf8EmojisToImages:set:size:sheetSize:backgroundImageFn:sheetRows:sheetColumns"></div>

Usage from within the component

As with any pipe you can also use this one directly from your component if you follow those steps:

Add the pipe to you components/modules providers: providers: [ Utf8EmojisToImagesPipe ]
Simply inject it in the component's constructor - e.g.:

constructor(pipe: Utf8EmojisToImagesPipe) {
  const convertedHTML = pipe.emojisToImages('<a title="Ang🧛‍♀️ular">Hello</a> 👌 Ang🧛‍♀️ular 👌!');
  console.log('Converted HTML: ', convertedHTML);
}

Parameters explained

parameter	meaning
set	emoji mart set to use for image representation
size	size of an emoji image in px
sheetSize	size of each original image - will be resized to size
backgroundImageFn	function to retrieve bg URL or path (see docs at https://github.com/TypeCtrl/ngx-emoji-mart)
sheetRows	number of emoji rows in image provided by `backgroundImageFn`
sheetColumns	number of emoji columns in image provided by `backgroundImageFn`

Alternatively you can pass a callback function for emoji replacement as single paramerter:

<div [innerHTML]="html | utf8EmojisToImages:replaceFn"></div>

... and in the component:

replaceFn = (unicodeEmoji: string, element: CharacterData, position: number): HTMLElement =>  {
  // Create and return a HTMLElement that should substitute the unicode emoji
  // Parameters passed to this function:
  // `unicodeEmoji` -> the emoji
  // `element` -> the text node element in which the emoji is contained
  // `position` -> the offset within the text element
}

Build & publish on npm

In case you want to contribute/fork:

Adept version and author in ./projects/ng-utf8-emojis-to-images/package.json and commit to your forked repository.
Run npm install.
Run npm run build-lib which outputs the build to ./dist/ng-utf8-emojis-to-images.
Copy README.md to ./dist/ng-utf8-emojis-to-images and modify it accordingly.
Run cd ./dist/ng-utf8-emojis-to-images && npm publish.

Thank you...

... Scott Cooper for writing the ngx-emoji-mart package which is internally used by this module.
... Etienne Lemay for writing the emoji-mart package which provides the base of ngx-emoji-mart.

License

MIT

lentschi/ng-utf8-emojis-to-images