diff --git a/index.html b/index.html
index c326f6b..59d6159 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
     <title>Editor</title>
     <link rel="stylesheet" href="styles.css" />
     <script src="online-editor.js"></script>
-    <script src="popup.js"></script>
   </head>
   <body>
     <!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
diff --git a/online-editor.js b/online-editor.js
index 811ce53..05a22ff 100644
--- a/online-editor.js
+++ b/online-editor.js
@@ -413,3 +413,129 @@ window.onresize = () => {
     })
   })
 }
+
+// This is popup element
+class BesPopupEl extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: relative;
+          display: inline-block;
+          z-index: -1
+        }
+        :host(.show){
+          z-index: 10;
+        }
+        .popup-text {
+          max-width: 160px;
+          color: black;
+          text-align: center;
+          padding: 8px 0;
+          z-index: 1;
+        }
+        .bes-popup-container {
+          visibility: hidden;
+          max-width: 300px;
+          background-color: rgb(241, 243, 249);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+          border-radius: 5px;
+          padding: 8px;
+          z-index: 1;
+        }
+        .bes-toolbar {
+          display: flex;
+          justify-content: end;
+          padding: 5px 2px;
+        }
+        .bes-toolbar button {
+          margin-right: 2px;
+        }
+        .bes-text-div{
+          background-color: white;
+          padding: 10px;
+          border-radius: 5px;
+        }
+        .bes-replacement-btn{
+          margin: 5px 0;
+          padding: 5px;
+          border: none;
+          border-radius: 5px;
+          background-color: #239aff;
+          color: white;
+          cursor: pointer;
+        }
+        .bes-replacement-btn:hover{
+          background-color: #1976f0;
+        }
+        :host(.show) .bes-popup-container {
+          visibility: visible;
+          animation: fadeIn 1s;
+        }
+        @keyframes fadeIn {
+          from {opacity: 0;}
+          to {opacity:1 ;}
+        }
+      </style>
+      <div class="bes-popup-container">
+        <div class="bes-toolbar">
+          <button class="bes-close-btn">X</button>
+        </div>
+        <div class="bes-text-div">
+          <span class="popup-text">
+          </span>
+          <div class="bes-replacement-div">
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  show(x, y) {
+    y = y + 20
+    this.style.position = 'fixed'
+    this.style.left = `${x}px`
+    this.style.top = `${y}px`
+    this.clear()
+    this.classList.add('show')
+  }
+
+  clear() {
+    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
+    const replacements = replacementDiv.childNodes
+    if (!replacements.length) return
+    replacements.forEach(replacement => {
+      replacementDiv.removeChild(replacement)
+    })
+  }
+
+  hide() {
+    this.classList.remove('show')
+  }
+
+  changeText(text) {
+    this.shadowRoot.querySelector('.popup-text').textContent = text
+  }
+
+  appendReplacements(replacement, offset, length) {
+    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
+    const replacementBtn = document.createElement('button')
+    replacementBtn.classList.add('bes-replacement-btn')
+    replacementBtn.dataset.length = length
+    replacementBtn.dataset.offset = offset
+    replacementBtn.textContent = replacement
+    replacementBtn.classList.add('bes-replacement')
+    replacementDiv.appendChild(replacementBtn)
+  }
+}
+
+customElements.define('bes-popup-el', BesPopupEl)
diff --git a/popup.js b/popup.js
deleted file mode 100644
index c1663a0..0000000
--- a/popup.js
+++ /dev/null
@@ -1,124 +0,0 @@
-class BesPopupEl extends HTMLElement {
-  constructor() {
-    super()
-    this.attachShadow({ mode: 'open' })
-  }
-
-  connectedCallback() {
-    this.render()
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          position: relative;
-          display: inline-block;
-          z-index: -1
-        }
-        :host(.show){
-          z-index: 10;
-        }
-        .popup-text {
-          max-width: 160px;
-          color: black;
-          text-align: center;
-          padding: 8px 0;
-          z-index: 1;
-        }
-        .bes-popup-container {
-          visibility: hidden;
-          max-width: 300px;
-          background-color: rgb(241, 243, 249);
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-          border-radius: 5px;
-          padding: 8px;
-          z-index: 1;
-        }
-        .bes-toolbar {
-          display: flex;
-          justify-content: end;
-          padding: 5px 2px;
-        }
-        .bes-toolbar button {
-          margin-right: 2px;
-        }
-        .bes-text-div{
-          background-color: white;
-          padding: 10px;
-          border-radius: 5px;
-        }
-        .bes-replacement-btn{
-          margin: 5px 0;
-          padding: 5px;
-          border: none;
-          border-radius: 5px;
-          background-color: #239aff;
-          color: white;
-          cursor: pointer;
-        }
-        .bes-replacement-btn:hover{
-          background-color: #1976f0;
-        }
-        :host(.show) .bes-popup-container {
-          visibility: visible;
-          animation: fadeIn 1s;
-        }
-        @keyframes fadeIn {
-          from {opacity: 0;}
-          to {opacity:1 ;}
-        }
-      </style>
-      <div class="bes-popup-container">
-        <div class="bes-toolbar">
-          <button class="bes-close-btn">X</button>
-        </div>
-        <div class="bes-text-div">
-          <span class="popup-text">
-          </span>
-          <div class="bes-replacement-div">
-          </div>
-        </div>
-      </div>
-    `
-  }
-
-  show(x, y) {
-    y = y + 20
-    this.style.position = 'fixed'
-    this.style.left = `${x}px`
-    this.style.top = `${y}px`
-    this.clear()
-    this.classList.add('show')
-  }
-
-  clear() {
-    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
-    const replacements = replacementDiv.childNodes
-    if (!replacements.length) return
-    replacements.forEach(replacement => {
-      replacementDiv.removeChild(replacement)
-    })
-  }
-
-  hide() {
-    this.classList.remove('show')
-  }
-
-  changeText(text) {
-    this.shadowRoot.querySelector('.popup-text').textContent = text
-  }
-
-  appendReplacements(replacement, offset, length) {
-    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
-    const replacementBtn = document.createElement('button')
-    replacementBtn.classList.add('bes-replacement-btn')
-    replacementBtn.dataset.length = length
-    replacementBtn.dataset.offset = offset
-    replacementBtn.textContent = replacement
-    replacementBtn.classList.add('bes-replacement')
-    replacementDiv.appendChild(replacementBtn)
-  }
-}
-
-customElements.define('bes-popup-el', BesPopupEl)
