#538 - encodeEmoji property support

CHANGELOG.md

@@ -30,6 +30,7 @@
 - [#523](https://github.com/estruyf/vscode-front-matter/issues/523): Added support for `floating`/`decimal` numbers with a new number field property called `numberOptions`
 - [#524](https://github.com/estruyf/vscode-front-matter/issues/524): Removed the **Global settings** view from the panel. You can still get it back by configuring a [custom view mode](https://frontmatter.codes/docs/panel#view-modes).
 - [#535](https://github.com/estruyf/vscode-front-matter/issues/535): Retain the scroll position after selecting a media file
+- [#538](https://github.com/estruyf/vscode-front-matter/issues/538): Added support to encode emojis in the string field
 
 ### ⚡️ Optimizations
 

package.json

@@ -1154,6 +1154,11 @@
                       "default": true,
                       "description": "Specify if the field is editable"
                     },
+                    "encodeEmoji": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "Specify if the field should encode emoji"
+                    },
                     "required": {
                       "type": "boolean",
                       "default": false,

src/helpers/ContentType.ts

@@ -28,7 +28,7 @@ import { Telemetry } from './Telemetry';
 import { processKnownPlaceholders } from './PlaceholderHelper';
 import { basename } from 'path';
 import { ParsedFrontMatter } from '../parsers';
-import { existsAsync, writeFileAsync } from '../utils';
+import { encodeEmoji, existsAsync, writeFileAsync } from '../utils';
 
 export class ContentType {
   /**
@@ -614,10 +614,11 @@ export class ContentType {
           return;
         }
 
-        // Check if the title needs to be encoded
+        titleValue = titleValue.trim();
+        // Check if the title needs to encode the emoji's used in it
         const titleField = contentType.fields.find((f) => f.name === 'title');
-        if (titleField && titleField.encode) {
-          titleValue = encodeURIComponent(titleValue);
+        if (titleField && titleField.encodeEmoji) {
+          titleValue = encodeEmoji(titleValue);
         }
 
         let templatePath = contentType.template;

src/listeners/panel/DataListener.ts

@@ -18,6 +18,7 @@ import { Article } from '../../commands';
 import { ParsedFrontMatter } from '../../parsers';
 import { processKnownPlaceholders } from '../../helpers/PlaceholderHelper';
 import { PostMessageData } from '../../models';
+import { encodeEmoji } from '../../utils';
 
 const FILE_LIMIT = 10;
 
@@ -173,6 +174,7 @@ export class DataListener extends BaseListener {
     const dateFields = contentType.fields.filter((f) => f.type === 'datetime');
     const imageFields = contentType.fields.filter((f) => f.type === 'image' && f.multiple);
     const fileFields = contentType.fields.filter((f) => f.type === 'file' && f.multiple);
+    const fieldsWithEmojiEncoding = contentType.fields.filter((f) => f.encodeEmoji);
 
     // Support multi-level fields
     const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
@@ -208,6 +210,9 @@ export class DataListener extends BaseListener {
         }
       }
     } else {
+      if (fieldsWithEmojiEncoding.some((f) => f.name === field)) {
+        value = encodeEmoji(value);
+      }
       parentObj[field] = value;
     }
 

src/models/PanelSettings.ts

@@ -94,7 +94,7 @@ export interface Field {
   fileExtensions?: string[];
   editable?: boolean;
   required?: boolean;
-  encode?: boolean;
+  encodeEmoji?: boolean;
 
   // Date fields
   isPublishDate?: boolean;

src/utils/encodeEmoji.ts

@@ -0,0 +1,14 @@
+export const encodeEmoji = (text: string) => {
+  if (!text || !/\p{Extended_Pictographic}/u.test(text)) {
+    return text;
+  }
+
+  const characters = [...text].map((el) => {
+    if (/\p{Extended_Pictographic}/u.test(el)) {
+      return `\\u${el.codePointAt(0)?.toString(16).toUpperCase()}`;
+    }
+    return el;
+  });
+
+  return characters.join('');
+};

src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './copyFileAsync';
+export * from './encodeEmoji';
 export * from './existsAsync';
 export * from './fetchWithTimeout';
 export * from './fieldWhenClause';