Feature/26

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
   rules: {
     'no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }],
     'no-restricted-syntax': ['error', 'ObjectPattern > RestElement'],
+    '@typescript-eslint/no-non-null-assertion': 'off',
   },
   overrides: [
     {

HOW.md

@@ -1,21 +1,15 @@
 # How was this made?
 
-This module was developed using the [Official Bionic-Reading API](https://rapidapi.com/bionic-reading-bionic-reading-default/api/bionic-reading1/).
+This module was developed by referring to the official [BR API](https://rapidapi.com/bionic-reading-bionic-reading-default/api/bionic-reading1/). However, there is a difference in that it is implemented with a slightly different logic, such as not highlighting special characters. I'm going to talk about this here.
 
-I composed some example sentences and the API request results for them as [Test Cases](./src/__tests__/conv2IntermediateWord.test.ts), and I also found some Rules together in the process.
+## The Rules
+
+First, I found the rule below through the BR API call result.
 
 - [Rules for the Number of Characters](#char-length-rules)
 - [Rules for Special Characters](#special-chars-rules)
 - [Rules for Numbers](#number-rules)
 
-### Conversion Process
-
-<p align="center">
-  <a href="https://mermaid.live/edit#pako:eNp1kcFugzAQRH_F2nPyAxx6cNJDKiohGYkD5uBgt1g1NjKmLQr59xqwBYrSPe3hzWhn9ga14QIS-LSsa1COqUZ-srzMFJMa5eLXVeh4fJlIp6RD1xGlUosJZWkg05JCxixbDMqKwgNOOlZ7vgh8MfOFsbysnsBn1jcTIoElM0tGpdhViT1_MvpbWIecQRfthG0Fl8wJFNl-Qpf36DJv3mcP_uOFpdGy3rvgaIIXjxV4dtGb8WX9SNesEXCMi4tN95h604SOcCwVZ5vqSbebcP0FzoMsL0OE5W1UwwFaH5pJ7j98myEKrhGtoJD4lTP7RYHqu-eGjvtiXrl0xkLywVQvDsAGZ8ioa0icHUSEznI-qA3U_Q8fWL9T">
-    <img alt="mermaid image" src="https://mermaid.ink/img/pako:eNp1kcFugzAQRH_F2nPyAxx6cNJDKiohGYkD5uBgt1g1NjKmLQr59xqwBYrSPe3hzWhn9ga14QIS-LSsa1COqUZ-srzMFJMa5eLXVeh4fJlIp6RD1xGlUosJZWkg05JCxixbDMqKwgNOOlZ7vgh8MfOFsbysnsBn1jcTIoElM0tGpdhViT1_MvpbWIecQRfthG0Fl8wJFNl-Qpf36DJv3mcP_uOFpdGy3rvgaIIXjxV4dtGb8WX9SNesEXCMi4tN95h604SOcCwVZ5vqSbebcP0FzoMsL0OE5W1UwwFaH5pJ7j98myEKrhGtoJD4lTP7RYHqu-eGjvtiXrl0xkLywVQvDsAGZ8ioa0icHUSEznI-qA3U_Q8fWL9T">
-  </a>
-</p>
-
 ### Rules for the Number of Characters<a id="char-length-rules"></a>
 
 At first, I tried to find a Pattern by adding characters one by one. Below is the result:
@@ -51,63 +45,83 @@ Below are the final rules for character count:
 | 43           | 48           | 5         | 8                        |
 | 49           | infinity     | infinity  | 9                        |
 
-[conv2IntermediateWord.ts](./packages/bionic-reading/src/conv2IntermediateWord.ts)
-
-The above is a description of the `fixationPoint` option value of `1`, and the same is done for other cases. [See here](https://docs.google.com/spreadsheets/d/1nG8OoYUK6rXsWdi-L8pWihx9i_aSn9V0eYfLKy9-B-U/edit?usp=sharing) for a complete list of test results for Fixation Points. (Note: The test results on the sheet are [automatically interlocked](./packages/bionic-reading/src/__tests__/utils/getFixationPointLastLength.ts) with the actual project test case.)
+The above is a description of the `fixationPoint` option value of `1`, and the same is done for other cases. [See here](https://docs.google.com/spreadsheets/d/1nG8OoYUK6rXsWdi-L8pWihx9i_aSn9V0eYfLKy9-B-U/edit?usp=sharing) for a complete list of test results for Fixation Points.
 
 ### Rules for Special Characters<a id="special-chars-rules"></a>
 
 Special characters at the Beginning or End of a word are **not** highlighted.
 
 ```ts
-bionicReading(';apple;'); // ';<b>app</b>le;'
+';apple;' -> ';<b>app</b>le;'
 ```
 
 Special characters placed **inside words** are treated the same as Regular characters.
 
 ```ts
-bionicReading('a;ppl;e'); // '<b>a;ppl</b>;e'
+'a;ppl;e' -> '<b>a;ppl</b>;e'
 ```
 
 However, a Dash (`-`) among special characters located inside a word is treated the same as a Space.
 
 ```ts
-bionicReading('app-le'); // '<b>ap</b>p-<b>l</b>e'
+'app-le' -> '<b>ap</b>p-<b>l</b>e'
 ```
 
+> I thought it was awkward to highlight special characters, so I implemented it to divide them based on special characters.
+>
+> ```ts
+> // Origin
+> 'a;ppl;e' -> '<b>a;ppl</b>;e'
+> 'app-le' -> '<b>ap</b>p-<b>l</b>e'
+>
+> // This module
+> 'a;ppl;e' -> 'a;<b>pp</b>l;e'
+> 'app-le' -> '<b>ap</b>p-<b>l</b>e'
+> ```
+
 ### Rules for numbers<a id="number-rules"></a>
 
 If there are only numbers, highlight nothing.
 
 ```ts
-bionicReading('1234567890'); // '1234567890'
+'1234567890' -> '1234567890'
 ```
 
 If there is a dash between the numbers, it is also not highlighted.
 
 ```ts
-bionicReading('1234-567890'); // '1234-567890'
+'1234-567890' -> '1234-567890'
 ```
 
 When numbers and letters are used together, they are treated as regular characters.
 
 ```ts
-bionicReading('a1234567890'); // '<b>a12345678</b>90'
-bionicReading('1234567890a'); // '<b>123456789</b>0a'
-bionicReading('1234a567890'); // '<b>1234a5678</b>90'
+'a1234567890' -> '<b>a12345678</b>90'
+'1234567890a' -> '<b>123456789</b>0a'
+'1234a567890' -> '<b>1234a5678</b>90'
 ```
 
 If a special character other than a dash is between numbers, treat it like a regular character.
 
 ```ts
-bionicReading('1234!567890'); // '<b>1234!5678</b>90'
+'1234!567890' -> '<b>1234!5678</b>90'
 ```
 
 Otherwise, it doesn't highlight anything.
 
 ```ts
-bionicReading('!1234567890'); // '!1234567890'
-bionicReading('1234567890!'); // '1234567890!'
+'!1234567890' -> '!1234567890'
+'1234567890!' -> '1234567890!'
 ```
 
 Note: Emojis are treated as special characters, not dashes.
+
+> This module does not highlight even if there are special characters between numbers.
+>
+> ```ts
+> // Origin
+> '1234!567890' -> '<b>1234!5678</b>90'
+>
+> // This module
+> '1234!567890' -> '1234!567890'
+> ```

README.md

@@ -67,70 +67,50 @@ console.log(bionicText); // '<b>Bion</b>ic <b>Readi</b>ng ... <b>writt</b>en <b>
 ### `BionicReading(text: string, options?: Options)`
 
 ```ts
-bionicReading('bionic-reading'); // '<b>bion</b>ic-<b>readi</b>ng'
+bionicReading('bionic-reading');
+bionicReading('bionic-reading', {
+  // ... Options
+});
 ```
 
 ### Options
 
 ```ts
 type Options = Partial<{
-  highlightTag: string;
-  markdown: boolean;
-  markdownStyle: string;
+  sep: string | string[];
   fixationPoint: number;
 }>;
 ```
 
-#### `highlightTag`
-
-- Default Value: `'b'`
-
-```ts
-// default highlight tag: `<b>`
-bionicReading('bionic-reading'); // '<b>bion</b>ic-<b>readi</b>ng'
-
-// changed highlight tag: `<strong>`
-bionicReading('bionic-reading', { highlightTag: 'strong' }); // '<strong>bion</strong>ic-<strong>readi</strong>ng'
-```
+#### `sep`
 
-#### `markdown`
+- Default Value: `['<b>', '</b>']`
 
-- Default Value: `false`
+Passing a string allows you to specify the Beginning and End of the highlighted word at once.
 
 ```ts
-bionicReading('bionic-reading', { markdown: true, highlightTag: 'strong' }); // '**bion**ic-**readi**ng'
+bionicReading('bionic-reading', '**'); // '**bion**ic-**readi**ng'
 ```
 
-If true, the `highlightTag` option is ignored.
-
-#### `markdownStyle`
-
-- Default Value: `'**'`
+It can also set them up by passing a list of length 2.
 
 ```ts
-bionicReading('bionic-reading', { markdown: true, markdownStyle: '__' }); // '__bion__ic-__readi__ng'
+bionicReading('bionic-reading', ['<strong>', '</strong>']); // '<strong>bion</strong>ic-<strong>readi</strong>ng'
 ```
 
-If the `markdown` option is false, this option is ignored.
-
 #### `fixationPoint`
 
 - Default Value: `1`
 - Range: `[1, 5]`
 
 ```ts
-// default fixation-point: 1
+// Default fixation-point: 1
 bionicReading('bionic-reading'); // '<b>bion</b>ic-<b>readi</b>ng'
 
-// changed fixation-point: 5
+// Changed fixation-point: 5
 bionicReading('bionic-reading', { fixationPoint: 5 }); // '<b>bi</b>onic-<b>re</b>ading'
 ```
 
-## Motivations
-
-- [bionic-reading.com](https://bionic-reading.com/)
-- [ansh/bionic-reading](https://github.com/ansh/bionic-reading)
-
 ## License
 
 [MIT](./LICENSE) @Gumball12

apps/sandbox/package.json

@@ -11,17 +11,16 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "bionic-reading": "workspace:*",
-    "tsconfig": "workspace:*",
-    "@unocss/reset": "^0.34.1",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@unocss/preset-wind": "^0.34.1",
+    "@unocss/reset": "^0.34.1",
     "@vitejs/plugin-react": "^1.3.0",
+    "bionic-reading": "workspace:*",
+    "tsconfig": "workspace:*",
     "unocss": "^0.34.1"
   }
 }