diff --git a/src/es6/attribute_widget/CodeEditorValue.js b/src/es6/attribute_widget/CodeEditorValue.js
index bdfc59ac..572b2aa4 100644
--- a/src/es6/attribute_widget/CodeEditorValue.js
+++ b/src/es6/attribute_widget/CodeEditorValue.js
@@ -46,7 +46,7 @@ class CodeEditorValue extends AbstractValue {
 
     var editor = null;
 
-    var init = false
+    var init = false;
 
     /**
      * jQuery object of DOM node representing the node
@@ -57,9 +57,9 @@ class CodeEditorValue extends AbstractValue {
 
     var bindQuillEditor = function (ytext) {
       if (init) {
-        return
+        return;
       }
-      init = true
+      init = true;
       _ytext = ytext;
       new QuillBinding(_ytext, editor);
 
@@ -74,10 +74,12 @@ class CodeEditorValue extends AbstractValue {
         bindQuillEditor(ytext);
       }
     };
+
     const tagname = getWidgetTagName(CONFIG.WIDGET.NAME.ATTRIBUTE);
     const editorId = "editor-" + rootSubjectEntity.getEntityId();
+
     if (editor) {
-      $(editor.container).parent().show();
+      this.modal.show();
       // $("#wrapper").hide();
     } else {
       var tpl = $(
@@ -86,24 +88,36 @@ class CodeEditorValue extends AbstractValue {
           title: name,
         })
       );
+      this.modal = new bootstrap.Modal(tpl.get(0));
 
       $(tagname).find(".main-wrapper").append(tpl);
       // $("#wrapper").hide();
 
       const domElem = tpl.get(0).querySelector("#" + editorId);
+      if (!domElem) {
+        console.error("domElem not found", domElem);
+      }
+      // editor language is html
       editor = new Quill(domElem, {
         theme: "snow",
         modules: {
           toolbar: false, // Snow includes toolbar by default
         },
         placeholder: "Paste your SVG code here",
+
         syntax: true,
       });
       // editor.getSession().setMode("ace/mode/svg");
     }
 
-    _$node.click(function () {
+    // listen to close button
+    tpl.find(".btn-close").click(() => {
+      this.modal.hide();
+    });
+
+    _$node.click(() => {
       createYText();
+      this.modal.show();
     });
 
     /**
diff --git a/src/templates/attribute_widget/code_edtior_value.html b/src/templates/attribute_widget/code_edtior_value.html
index d72c3d58..91511d0b 100755
--- a/src/templates/attribute_widget/code_edtior_value.html
+++ b/src/templates/attribute_widget/code_edtior_value.html
@@ -1,7 +1,3 @@
-<button
-  class="btn btn-outline-secondary"
-  data-bs-toggle="modal"
-  data-bs-target="#editor-modal"
->
+<button class="btn btn-outline-secondary" data-bs-toggle="modal">
   Open Code Editor
 </button>
diff --git a/src/templates/attribute_widget/editor_modal.html b/src/templates/attribute_widget/editor_modal.html
index 2d15bc4a..b3907b9d 100644
--- a/src/templates/attribute_widget/editor_modal.html
+++ b/src/templates/attribute_widget/editor_modal.html
@@ -1,19 +1,14 @@
 <div
   class="modal"
   tabindex="-1"
-  id="editor-modal"
   style="z-index: 3000000000 !important"
+  id="<%= id %>"
 >
   <div class="modal-dialog modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title"><%= title %></h5>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="modal"
-          aria-label="Close"
-        ></button>
+        <button type="button" class="btn-close" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <div id="<%= id %>"></div>