Merge branch 'main' into 1015-data-cy-menu

Author: bot-bigbinary

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "1.29.8",
+  "version": "1.29.9",
   "main": "./index.cjs.js",
   "module": "./index.js",
   "types": "./types.d.ts",

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/Editor/MediaUploader/index.jsx

@@ -50,13 +50,16 @@ const MediaUploader = ({ mediaUploader, onClose, editor, unsplashApiKey }) => {
       .run();
   };
 
+  const handleKeydown = event =>
+    not(isUploading) && event.key === "Escape" && handleClose();
+
   return (
     <Modal
       closeButton={false}
       {...{ isOpen }}
-      closeOnEsc={not(isUploading)}
       closeOnOutsideClick={not(isUploading)}
       onClose={handleClose}
+      onKeyDown={handleKeydown}
     >
       <div className="ne-media-uploader">
         {!isNotPresent(tabs) && (

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).