Bump to 0.08

Author: HC200ok

README.md

@@ -13,16 +13,16 @@ vue2-text-annotation is an easy-to-use component for text annotation and data ma
 
 # Installation
 ```bash
-npm install --save vue-manual-data-masking
+npm install --save vue2-text-annotation
 ```
 
 # 1. Text annotation
 
 ### Operation
-1. Select or double click the content which you want to add an annotation to, then an input dialog will pop up.
-2. Enter annotation content.
-3. Click "ok" button or just press the enter key to accomplish the annotation.
-4. If you want to remove an annoation, hover on annotation entity and click the delete button.
+1. Select or double click the content which you want to annotate, then an input dialog will pop up.
+2. Enter content of annotation.
+3. Click "ok" button or just press the enter key to annotate.
+4. If you want to remove an annoation, hover on annotation entity and click the delete button to remove.
 
 ### Demo
 
@@ -32,31 +32,31 @@ npm install --save vue-manual-data-masking
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue2-text-annotation-yt6cc?file=/src/App.vue)
 
-### labeled data
+### Labeled data
 
 ```js
 [
   {
-    content:"Vue.js",
-    category:"framework",
+    content: "Vue.js",
+    annotation: "framework",
     start:0,
     end:6,
   },
   {
-    content:"Evan You",
-    category:"name",
+    content: "Evan You",
+    annotation: "name",
     start:521,
     end:529,
   },
   {
-    content:"JavaScript",
-    category:"language",
+    content: "JavaScript",
+    annotation: "language",
     start:24,
     end:34,
   }
 ]
 ```
-The labeled data generated by `vue2-text-annotation` can be used as the training data set of Natural Language Processing (NLP) model.
+The labeled data generated by `vue2-text-annotation` can be used to build a data set of Natural Language Processing (NLP) model.
 
 ### Usage
 ```js
@@ -79,7 +79,7 @@ export default {
       text: "Vue.js is a progressive JavaScript framework, which is used to build UIs (User Interfaces) and SPAs (Single-page Applications). This framework is famous for its fast-paced learning curve. It is such an easy to learn and approachable library that with the knowledge of HTML, CSS, and JavaScript, we can start building web applications in Vue.js. The fast learning curve is kind of a signature of this framework. It is a versatile framework for our need as a library or a full-fledged framework for building huge web apps.\nEvan You have created this framework. The idea of Evan You behind this framework is to build the best framework by combining the best features from already existing Angular and react Frameworks. Before building Vue.js, Evan You was working at Google. Inc and worked on Angular based projects. So, he came up with the idea of building his own framework. He picked the best parts of Angular, like template syntax, easy to use, and picked the best parts of React as well, like two-way data binding, the concept of props, component-based approach, and combined them to make a new framework Vue.js better than both of them.",
       textAnnotations: [{
         content: "Vue.js",
-        category: "framework",
+        annotation: "framework",
         start:0,
         end:6,
       }]
@@ -89,7 +89,7 @@ export default {
 ```
 
 # 2. Data masking
-Data masking mode in `vue2-text-annotation` is used for labeling sensitive data and creating new text that hides (masks) sensitive information. 
+Data masking is used to label and hide sensitive data and create new text that hides (masks) sensitive information. 
 
 ### Demo
 Before data masking: <br/>
@@ -107,7 +107,7 @@ After data masking: <br/>
 ```js
 <template>
   <TextAnnotation
-    v-model="dataSet"
+    v-model="textAnnotations"
     data-masking="true"
     :text="text"
     @afterDataMasking="updateTextAfterDataMasking"
@@ -123,7 +123,7 @@ export default {
   },
   data() {
     return {
-      dataSet: [],
+      textAnnotations: [],
       text:
         "James lives at 4 Chome-2-8 Shibakoen, his phone number is 080080080, His full name is Lebron James",
       textAfterDataMasking: "",
@@ -143,14 +143,14 @@ export default {
 
 | Property | Description | Type | Required | Default |
 | -------- | ----------- | ---- | -------- | ------- |
-| v-model | Bind to text annotations<br>e.g. <br>[{ content: "080080080", category: "phone number", start: 0, end: 5 }] | Annotation: <br>{<br>  content: string, <br>  category: string, <br>  start: number,<br>  end: number<br>} | true | [] |
+| v-model | Bind to text annotations<br>e.g. <br>[{ content: "080080080", annotation: "phone number", start: 0, end: 5 }] | Annotation: <br>{<br>  content: string, <br>  annotation: string, <br>  start: number,<br>  end: number<br>} | true | [] |
 | annotation-text-color | Font color of annotation entity | string | false |"#35495e" |
 | annotation-bg-color | Background color of annotation entity | string | false | "#41b883"|
 | data-masking | Set to `true` to start data masking mode | boolean | false | false |
 | data-masking-charactor | Charactor in data masking entity| string | false | '●' |
 | maxHeight | Max height of data masking container | Number or Null | false | null | |
-| text | Text | String | true | '' |
-| text-replace-charactor | Charactor be used to replace the sensitive data | string | false | '*" |
+| replace-charactor | Charactor be used to replace the sensitive data | string | false | '*" |
+| text | Text (Notice: please use `\n` in where you want to wrap a new line) | String | true | '' |
 
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue2-text-annotation",
   "description": "A vue2 component for text annotation",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "author": "HC200ok",
   "license": "MIT",

src/App.vue

@@ -4,12 +4,16 @@
       class="text-container"
       v-model="labeledData"
       :text="text"
-      :data-masking="false"
-      @afterDataMasking="afterMasking"
+      :data-masking="true"
+      @afterDataMasking="updateTextAfterDataMasking"
     />
-    <div class="annotations">
-      data set: {{ labeledData }}
-    </div>
+    <br />
+    labeled data: <br />
+    {{ labeledData }}
+    <br />
+    <br />
+    text after data masking:<br />
+    {{ textAfterMasking }}
   </div>
 </template>
 
@@ -19,7 +23,7 @@ import TextContainer from "./components/TextContainer.vue";
 
 @Component({
   components: {
-    TextContainer
+    TextContainer,
   },
 })
 export default class App extends Vue {
@@ -29,20 +33,16 @@ export default class App extends Vue {
   labeledData = [
     {
       content: "Vue.js",
-      category: "framework",
-      start:0,
-      end:6,
+      annotation: "framework",
+      start: 0,
+      end: 6,
     },
   ];
 
   textAfterMasking = this.text;
 
-  afterMasking(textAfterMasking: string): void {
+  updateTextAfterDataMasking(textAfterMasking: string): void {
     this.textAfterMasking = textAfterMasking;
   }
 }
 </script>
-
-<style>
-
-</style>

src/components/InputDialog.vue

@@ -9,7 +9,7 @@
         id="input-dialog"
         class="input-dialog"
         autocomplete="off"
-        v-model="category"
+        v-model="annotation"
         ref="input"
         type="text"
         v-on:mouseup.stop
@@ -41,11 +41,11 @@ export default class InputDialog extends Vue {
   @Prop({ required: true }) align!: string;
   @Prop({ required: true }) inputDialogWidth!: number;
 
-  category = "";
+  annotation = "";
 
   @Emit()
   addAnnotation(): string {
-    return this.category;
+    return this.annotation;
   }
 }
 </script>

src/components/TextAnnotation.vue

@@ -20,10 +20,10 @@
       </span>
     </span>
     <span
-      class="text-annotation__category"
+      class="text-annotation__annotation"
       :style="{ backgroundColor: annotationBgColor }"
     >
-      {{ textAnnotation.category }}
+      {{ textAnnotation.annotation }}
     </span>
     <button class="text-annotation__delete" @click="deleteAnnotation">x</button>
   </span>
@@ -75,7 +75,7 @@ export default class TextAnnotation extends Vue {
       }
     }
   }
-  &__category {
+  &__annotation {
     display: inline-block;
     font-weight: 700;
     height: 1.3em;

src/components/TextContainer.vue

@@ -54,7 +54,7 @@ export default class TextContainer extends Vue {
   @Prop({ default: "#41b883" }) readonly annotationBgColor!: string;
   @Prop({ default: false }) readonly dataMasking!: boolean;
   @Prop({ default: "●" }) readonly dataMaskingCharactor!: string;
-  @Prop({ default: "*" }) readonly textReplaceCharactor!: string;
+  @Prop({ default: "*" }) readonly replaceCharactor!: string;
   @Prop({ default: null }) readonly maxHeight!: string | null;
 
   textAnnotations: Array<Annotation> = [];
@@ -91,7 +91,7 @@ export default class TextContainer extends Vue {
     this.showInputDialog = !(newVal === "" || newVal === null);
   }
 
-  isTextIndent(index: number, isText = true): boolean {
+  isTextIndent(index: number): boolean {
     if (index === 0) return true;
     const previousChunk = this.chunks[index - 1];
     if (previousChunk.type === "wrap") {
@@ -105,7 +105,7 @@ export default class TextContainer extends Vue {
     textAnnotations.forEach((item) => {
       afterMasking =
         afterMasking.substr(0, item.start) +
-        this.textReplaceCharactor.repeat(item.content.length) +
+        this.replaceCharactor.repeat(item.content.length) +
         afterMasking.substr(item.start + item.content.length);
     });
     return afterMasking;
@@ -149,7 +149,7 @@ export default class TextContainer extends Vue {
         type: "annotation",
         content: piece,
         start: entity.start,
-        category: entity.category,
+        annotation: entity.annotation,
       });
     }
     // add the rest of text.
@@ -179,7 +179,10 @@ export default class TextContainer extends Vue {
     // if click on `ok` button, pass
     if (target.classList.contains("add-annotation-button")) return;
     // effective when mouseover on class `text-for-annotation`, expecially unavailable on `annotation` 
-    if (target.classList.contains("text-for-annotation") || target.classList.contains("text-annotation-container")) {
+    if (
+      target.classList.contains("text-for-annotation") ||
+      target.classList.contains("text-annotation-container")
+    ) {
       const selection = window.getSelection();
       if (selection !== null && selection.toString().length) {
         const range = selection.getRangeAt(0).cloneRange();
@@ -231,16 +234,16 @@ export default class TextContainer extends Vue {
     );
   }
 
-  addAnnotation(category: string): void {
+  addAnnotation(annotation: string): void {
     if (
-      category.length &&
+      annotation.length &&
       typeof this.selectingContent == "string" &&
       this.selectingContent.length &&
       this.selectingContentStartIndex !== null
     ) {
       this.textAnnotations = this.textAnnotations.concat({
         content: this.selectingContent,
-        category,
+        annotation,
         start: this.selectingContentStartIndex,
         end: this.selectingContentStartIndex + this.selectingContent.length,
       });

src/type.d.ts

@@ -1,12 +1,12 @@
 export interface Annotation {
   content: string;
-  category: string;
+  annotation: string;
   start: number;
   end: number;
 }
 export interface Chunk {
   type: string;
-  category?: string;
+  annotation?: string;
   content: string;
   start?: number;
   end?: number;