Fixed issues with cursor navigation in codeblocks (#915)

* Fixed issues with cursor navigation in codeblocks * Updated styles * Updated styles
bigbinary · Oct 25, 2023 · 147701d · 147701d
1 parent bbc2f57
commit 147701d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx b/src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx
@@ -11,7 +11,7 @@ import { SORTED_LANGUAGE_LIST } from "./constants";
 
 const { Menu, MenuItem } = Dropdown;
 
-const CodeBlockComponent = ({ node, updateAttributes }) => {
+const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   const [keyword, setKeyword] = useState("");
 
   const { t } = useTranslation();
@@ -23,6 +23,7 @@ const CodeBlockComponent = ({ node, updateAttributes }) => {
   const handleLanguageSelect = language => {
     updateAttributes({ language });
     setKeyword("");
+    editor?.commands?.focus();
   };
 
   useEffect(() => {

diff --git a/src/components/Editor/CustomExtensions/CodeBlock/ExtensionConfig.js b/src/components/Editor/CustomExtensions/CodeBlock/ExtensionConfig.js
@@ -6,6 +6,6 @@ import CodeBlockComponent from "./CodeBlockComponent";
 
 export default CodeBlockLowlight.extend({
   addNodeView() {
-    return new ReactNodeViewRenderer(CodeBlockComponent);
+    return ReactNodeViewRenderer(CodeBlockComponent);
   },
 }).configure({ lowlight });
diff --git a/src/styles/editor/_editor-content.scss b/src/styles/editor/_editor-content.scss
@@ -94,11 +94,14 @@
 
     .neeto-editor-codeblock-options {
       position: absolute;
-      display: flex;
+      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;
@@ -110,6 +113,14 @@
         margin: 4px 4px;
       }
     }
+
+    &:hover {
+      .neeto-editor-codeblock-options {
+        display: flex;
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
   }
 
   pre > code {