allow defining characters to ignore in speech output

README.md

@@ -93,6 +93,7 @@ There are two ways to configure your AWS credentials:
 | `awsCredentials`            | No       | `{ "accessKeyId": process.env.GATSBY_AWS_ACCESS_KEY_ID, "secretAccessKey": process.env.GATSBY_AWS_SECRET_ACCESS_KEY }` |
 | `defaultSsmlTags`           | No       | `"<prosody rate='70%'>$SPEECH_OUTPUT_TEXT</prosody>"`                                                                  |
 | `defaultLexiconNames`       | No       | `["LexA", "LexB"]`                                                                                                     |
+| `ignoredCharactersRegex`    | No       | `/·/`                                                                                                                  |
 | `speechOutputComponentName` | No       | `"CustomComponent"`                                                                                                    |
 
 ##### About `defaultSsmlTags`:
@@ -101,6 +102,10 @@ There are two ways to configure your AWS credentials:
 - The surrounding `<speak>` tag is added automatically.
 - The variable `$SPEECH_OUTPUT_TEXT` will be replaced with the speech output text.
 
+##### About `ignoredCharactersRegex`:
+
+If your text contains special characters that should be ignored while reading (e.g. `fear·ful` should be read as `fearful`) you can use the `ignoredCharactersRegex` to define the characters to be ignored.
+
 ##### About `speechOutputComponentName`:
 
 If you want to use your own component to handle the generated speech output you can specify its name using the `speechOutputComponentName` option. The plugin will then use this instead of `SpeechOutput` to extract the text to be used for TTS generation. Like that you can customize the way speech output is handled. Find more information about this in the [customization chapter](#customize).

src/__tests__/getSsmlFromMdxAst.ts

@@ -13,6 +13,18 @@ it("should correctly extract speech output blocks from MDX AST", async () => {
   );
 });
 
+it("should remove ignored special characters", async () => {
+  const mdxAst = loadMdxAstFromFile("single-block-with-special-characters.mdx");
+  const speechOutputBlock = extractSpeechOutputBlocks(
+    mdxAst,
+    "SpeechOutput",
+    /·/
+  )[0];
+  expect(speechOutputBlock.text).toEqual(
+    "Inside<break time='1s'/>I am a bit fearful that this dot is vocalized. The dot in the word fearful should be filtered out.<break time='1s'/>"
+  );
+});
+
 it("heading should end with a break SSML tag", () => {
   const headingAst = {
     type: "heading",

src/__tests__/single-block-with-special-characters.mdx

@@ -0,0 +1,17 @@
+import SpeechOutput from "gatsby-mdx-tts"
+
+# Outside
+
+This text is outside a single speech output block.
+
+<SpeechOutput id="single-block">
+
+# Inside
+
+I am a bit fear·ful that this dot is vocalized. The dot in the word fear·ful should be filtered out.
+
+<CustomComponent />
+
+</SpeechOutput>
+
+This is again outside the speech output block.

src/index.ts

@@ -170,6 +170,7 @@ interface PluginOptions {
   };
   defaultSsmlTags?: string;
   defaultLexiconNames?: LexiconNameList;
+  ignoredCharactersRegex?: RegExp;
   speechOutputComponentName?: string;
 }
 
@@ -179,7 +180,8 @@ module.exports = async (
 ) => {
   const speechOutputBlocks = extractSpeechOutputBlocks(
     parameters.markdownAST,
-    pluginOptions.speechOutputComponentName || "SpeechOutput"
+    pluginOptions.speechOutputComponentName || "SpeechOutput",
+    pluginOptions.ignoredCharactersRegex
   );
 
   if (speechOutputBlocks.length > 0) {

src/internals/utils/extractSpeechOutputBlocks.ts

@@ -70,7 +70,8 @@ const buildSpeechOutputBlock = (
 
 const extractSpeechOutputBlocks = (
   mdxAst: Node,
-  speechOutputComponentName: string
+  speechOutputComponentName: string,
+  ignoredCharactersRegex?: RegExp
 ): SpeechOutputBlock[] => {
   const speechOutputBlocks: SpeechOutputBlock[] = [];
 
@@ -93,9 +94,12 @@ const extractSpeechOutputBlocks = (
     (startNode: Node, startNodeIndex: number, parent: Node) => {
       const relatedEndNode = findAfter(parent, startNode, isEndNode);
       const nodesToGetTextFrom = between(parent, startNode, relatedEndNode);
-      const text = nodesToGetTextFrom.map(getSsmlFromMdxAst).join("");
+      const unfilteredText = nodesToGetTextFrom.map(getSsmlFromMdxAst).join("");
+      const filteredText = ignoredCharactersRegex
+        ? unfilteredText.replace(new RegExp(ignoredCharactersRegex, "g"), "")
+        : unfilteredText;
       speechOutputBlocks.push(
-        buildSpeechOutputBlock(startNode, text, relatedEndNode)
+        buildSpeechOutputBlock(startNode, filteredText, relatedEndNode)
       );
     }
   );