Fixed minor bugs and updated stories (#1030)

* Fixed minor bugs and updated stories

* Updated text-formatting story

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

@@ -1,6 +1,7 @@
 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";
@@ -13,6 +14,7 @@ const { Menu, MenuItem } = Dropdown;
 
 const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   const [keyword, setKeyword] = useState("");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const { t } = useTranslation();
 
@@ -35,14 +37,21 @@ const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   return (
     <NodeViewWrapper data-cy="neeto-editor-code-block">
       <pre>
-        <div className="neeto-editor-codeblock-options">
+        <div
+          className={classNames("neeto-editor-codeblock-options", {
+            "neeto-editor-codeblock-options--open": isDropdownOpen,
+          })}
+        >
           <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)}
           >
             <Input
               autoFocus

src/components/Editor/CustomExtensions/CodeBlock/constants.js

@@ -1,3 +1,6 @@
 import { lowlight } from "lowlight";
 
-export const SORTED_LANGUAGE_LIST = lowlight.listLanguages().sort();
+export const SORTED_LANGUAGE_LIST = [
+  ...lowlight.listLanguages(),
+  "html",
+].sort();

src/components/EditorContent/constants.js

@@ -13,4 +13,4 @@ export const CODE_BLOCK_REGEX =
 export const VARIABLE_SPAN_REGEX =
   /<span data-variable="" [^>]*data-label="([^"]+)">{{([^}]+)}}<\/span>/g;
 
-export const LANGUAGE_LIST = lowlight.listLanguages();
+export const LANGUAGE_LIST = [...lowlight.listLanguages(), "html"];

src/styles/editor/_editor-content.scss

@@ -154,6 +154,12 @@
       &__input {
         margin: 4px 4px;
       }
+
+      &--open {
+      display: flex;
+      opacity: 1;
+      transform: scale(1);
+      }
     }
 
     &:hover {

src/translations/en.json

@@ -94,7 +94,7 @@
     },
     "localUploader": {
       "dropFilesHere": "Drop your file(s) here or Browse.",
-      "maxFileSize": "Max. File Size: {{entity}}",
+      "maxFileSize": "Max. File Size: {{entity, anyCase}}",
       "completed": "Completed"
     }
   }

stories/Walkthroughs/Text-formatting.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta
+  title="Walkthroughs/Text formatting"
+  parameters={{
+    layout: "padded",
+    viewMode: "docs",
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+# Formatting text in rich text editor
+
+<br />
+
+neetoEditor offers a diverse range of features beyond basic text formatting. In addition to various formatting options
+such as bold, italic, inline code, and strikethrough text, you can seamlessly integrate links and embedded content,
+as well as include images, videos, and other attachments, providing a comprehensive set of tools for various types of
+content and formatting.
+
+[Learn more about formatting text](https://help.neetocal.com/articles/formatting-text-in-rich-text-editors).