Merge pull request #27 from sereneinserenade/24-ƒeat-use-the-nextui-d…

…ropdown-component-to-choose-the-language-in-codeblock

feat(CodeBlock): Added NextUi Dropdown for Selecting Language

src/components/editor/extensions/CodeBlockComponents/CodeBlock.tsx

@@ -1,35 +1,114 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { NodeViewWrapper, NodeViewContent, NodeViewProps } from '@tiptap/react'
+import { Dropdown } from '@nextui-org/react'
+import {
+  SiArduino,
+  SiGnubash,
+  SiC,
+  SiCplusplus,
+  SiCsharp,
+  SiCss3,
+  SiGo,
+  SiJava,
+  SiJavascript,
+  SiJson,
+  SiKotlin,
+  SiLess,
+  SiLua,
+  SiMarkdown,
+  SiPerl,
+  SiPhp,
+  SiPython,
+  SiR,
+  SiRuby,
+  SiRust,
+  SiSass,
+  SiShell,
+  SiSqlite,
+  SiSwift,
+  SiTypescript,
+} from 'react-icons/si'
+import { BiCodeAlt } from 'react-icons/bi'
+import { BsFileText } from 'react-icons/bs'
+import { VscDiff } from 'react-icons/vsc'
 
-import { lowlight } from 'lowlight/lib/common.js';
 import { getReverseLangAlias } from '../CodeBlockLowLight';
 
 import './styles/CodeBlock.scss'
 
+const langsIconsMap = {
+  "arduino": SiArduino,
+  "bash": SiGnubash,
+  "c": SiC,
+  "cpp": SiCplusplus,
+  "csharp": SiCsharp,
+  "css": SiCss3,
+  "diff": VscDiff,
+  "go": SiGo,
+  "ini": null,
+  "java": SiJava,
+  "javascript": SiJavascript,
+  "json": SiJson,
+  "kotlin": SiKotlin,
+  "less": SiLess,
+  "lua": SiLua,
+  "makefile": null,
+  "markdown": SiMarkdown,
+  "objectivec": SiC,
+  "perl": SiPerl,
+  "php": SiPhp,
+  "php-template": SiPhp,
+  "plaintext": BsFileText,
+  "python": SiPython,
+  "python-repl": SiPython,
+  "r": SiR,
+  "ruby": SiRuby,
+  "rust": SiRust,
+  "scss": SiSass,
+  "shell": SiShell,
+  "sql": SiSqlite,
+  "swift": SiSwift,
+  "typescript": SiTypescript,
+  "vbnet": null,
+  "xml": null,
+  "yaml": null
+}
+
 const CodeBlock: React.FC<NodeViewProps> = ({ node: { attrs: { language } }, updateAttributes, editor }) => {
   const reverseLangAlias = useMemo(getReverseLangAlias, [])
 
-  const langs = useMemo(() => lowlight.listLanguages() || [], [])
-
   const [val, setVal] = useState<string>('')
 
   useEffect(() => { setVal(reverseLangAlias[language] || language) }, [language])
 
   return (
     <NodeViewWrapper className="code-block">
-
       <pre>
-        <select contentEditable={false} value={val} onChange={event => updateAttributes({ language: event.target.value })}>
-          <option value="null">
-            auto
-          </option>
-
-          <option disabled>
-            —
-          </option>
+        <Dropdown >
+          <Dropdown.Button size='xs' className='dropdown' flat color='primary' css={{ textTransform: 'capitalize' }}>
+            {val || 'Select Language'}
+          </Dropdown.Button>
 
-          {langs.map((lang, index) => (<option key={index} value={lang}> {lang} </option>))}
-        </select>
+          <Dropdown.Menu
+            color="primary"
+            aria-label="Actions"
+            selectionMode="single"
+            selectedKeys={[val]}
+            onSelectionChange={(keys) => updateAttributes({ language: [...keys][0] || '' })}
+          >
+            {
+              Object.entries(langsIconsMap)
+                .map(([lang, icon]) => (
+                  <Dropdown.Item
+                    key={lang}
+                    icon={icon && icon({ size: 22, fill: 'var(--nextui-colors-primary)' }) || BiCodeAlt({ size: 22, fill: 'var(--nextui-colors-primary)' })}
+                  >
+                    {lang}
+                  </Dropdown.Item>
+                ))
+            }
+          </Dropdown.Menu>
+        </Dropdown>
         <NodeViewContent as="code" />
       </pre>
     </NodeViewWrapper>

src/components/editor/extensions/CodeBlockComponents/styles/CodeBlock.scss

@@ -1,17 +1,10 @@
 .code-block {
   position: relative;
 
-  select {
-    appearance: none;
-    background-color: var(--nextui-colors-background);
-    border-radius: var(--nextui-radii-sm);
+  .dropdown {
     padding-left: 10px;
-    justify-content: center;
     position: absolute;
-    right: 1rem;
-    top: 8px;
-    z-index: 100;
-    transform: translateY(-100%);
-    width: fit-content;
+    right: 4px;
+    top: 4px;
   }
 }