Updated accesibility of codeblocks (#1064)

Author: gaagul

src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import classNames from "classnames";
 import { Down } from "neetoicons";
 import CopyToClipboardButton from "neetomolecules/CopyToClipboardButton";
 import { Dropdown, Input } from "neetoui";
@@ -14,7 +13,6 @@ const { Menu, MenuItem } = Dropdown;
 
 const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   const [keyword, setKeyword] = useState("");
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const { t } = useTranslation();
 
@@ -37,21 +35,15 @@ const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   return (
     <NodeViewWrapper data-cy="neeto-editor-code-block">
       <pre>
-        <div
-          className={classNames("neeto-editor-codeblock-options", {
-            "neeto-editor-codeblock-options--open": isDropdownOpen,
-          })}
-        >
+        <div className="neeto-editor-codeblock-options" contentEditable={false}>
           <Dropdown
             appendTo={() => document.body}
             buttonSize="small"
             buttonStyle="secondary"
             icon={Down}
-            isOpen={isDropdownOpen}
             label={node.attrs?.language || t("neetoEditor.common.auto")}
             strategy="fixed"
-            onClick={() => setIsDropdownOpen(isOpen => !isOpen)}
-            onClose={() => setIsDropdownOpen(false)}
+            zIndex={99999}
           >
             <Input
               autoFocus

src/styles/editor/_editor-content.scss

@@ -135,15 +135,12 @@
     padding: 32px 12px 12px 12px;
 
     .neeto-editor-codeblock-options {
+      display: flex;
       position: absolute;
-      display: none;
       gap: 4px;
       align-items: center;
       top: 4px;
       right: 4px;
-      transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
-      transform: scale(0);
-      transition-delay: 50ms;
 
       &__menu {
         display: flex;
@@ -154,20 +151,6 @@
       &__input {
         margin: 4px 4px;
       }
-
-      &--open {
-      display: flex;
-      opacity: 1;
-      transform: scale(1);
-      }
-    }
-
-    &:hover {
-      .neeto-editor-codeblock-options {
-        display: flex;
-        opacity: 1;
-        transform: scale(1);
-      }
     }
   }