Merge pull request #654 from doccano/bugfix/multiline-display-error

Enable to handle multiline document in sequence labeling

frontend/components/molecules/EntityItem.vue

@@ -31,7 +31,7 @@
       </v-list-item>
     </v-list>
   </v-menu>
-  <span v-else>{{ content }}</span>
+  <span v-else :class="[newline ? 'newline' : '']">{{ content }}</span>
 </template>
 
 <script>
@@ -56,6 +56,9 @@ export default {
       type: Array,
       default: () => [],
       required: true
+    },
+    newline: {
+      type: Boolean
     }
   },
   data() {
@@ -142,4 +145,7 @@ export default {
   -webkit-font-smoothing: subpixel-antialiased;
   letter-spacing: .1em;
 }
+.newline {
+  width: 100%;
+}
 </style>

frontend/components/organisms/annotation/EntityItemBox.vue

@@ -4,6 +4,7 @@
       v-for="(chunk, i) in chunks"
       :key="i"
       :content="chunk.text"
+      :newline="chunk.newline"
       :label="chunk.label"
       :color="chunk.color"
       :labels="labels"
@@ -96,16 +97,12 @@ export default {
     },
 
     chunks() {
-      const chunks = []
+      let chunks = []
       const entities = this.sortedEntities
       let startOffset = 0
       for (const entity of entities) {
         // add non-entities to chunks.
-        chunks.push({
-          label: null,
-          color: null,
-          text: this.text.slice(startOffset, entity.start_offset)
-        })
+        chunks = chunks.concat(this.makeChunks(this.text.slice(startOffset, entity.start_offset)))
         startOffset = entity.end_offset
 
         // add entities to chunks.
@@ -118,11 +115,7 @@ export default {
         })
       }
       // add the rest of text.
-      chunks.push({
-        label: null,
-        color: null,
-        text: this.text.slice(startOffset, this.text.length)
-      })
+      chunks = chunks.concat(this.makeChunks(this.text.slice(startOffset, this.text.length)))
       return chunks
     },
 
@@ -135,6 +128,31 @@ export default {
     }
   },
   methods: {
+    makeChunks(text) {
+      const chunks = []
+      const snippets = text.split('\n')
+      for (const snippet of snippets.slice(0, -1)) {
+        chunks.push({
+          label: null,
+          color: null,
+          text: snippet + '\n',
+          newline: false
+        })
+        chunks.push({
+          label: null,
+          color: null,
+          text: '',
+          newline: true
+        })
+      }
+      chunks.push({
+        label: null,
+        color: null,
+        text: snippets.slice(-1)[0],
+        newline: false
+      })
+      return chunks
+    },
     show(e) {
       e.preventDefault()
       this.showMenu = false