chore(codeblock): update node view

package.json

@@ -60,6 +60,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",

src/components/ui/select.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'richtext-flex richtext-h-10 richtext-w-full richtext-items-center richtext-justify-between richtext-rounded-md richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background placeholder:richtext-text-muted-foreground focus:richtext-outline-none focus:richtext-ring-2 focus:richtext-ring-ring focus:richtext-ring-offset-2 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50 [&>span]:richtext-line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="richtext-h-4 richtext-w-4 richtext-opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="richtext-h-4 richtext-w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="richtext-h-4 richtext-w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName
+  = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'richtext-relative richtext-z-50 richtext-max-h-96 richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
+        position === 'popper'
+        && 'data-[side=bottom]:richtext-translate-y-1 data-[side=left]:richtext--translate-x-1 data-[side=right]:richtext-translate-x-1 data-[side=top]:richtext--translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'richtext-p-1',
+          position === 'popper'
+          && 'richtext-h-[var(--radix-select-trigger-height)] richtext-w-full richtext-min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'richtext-relative richtext-flex richtext-w-full richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="richtext-absolute richtext-left-2 richtext-flex richtext-h-3.5 richtext-w-3.5 richtext-items-center richtext-justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="richtext-h-4 richtext-w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/constants/index.ts

@@ -113,13 +113,15 @@ export const DEFAULT_LANGUAGE_CODE_BLOCK = [
   'css',
   'js',
   'ts',
+  'bash',
 ]
 
 export const MAP_LANGUAGE_CODE_LABELS = {
   html: 'HTML',
   css: 'CSS',
   js: 'JavaScript',
   ts: 'TypeScript',
+  bash: 'Bash',
 } as any
 
 /** Default font size list */

src/extensions/CodeBlock/CodeBlock.ts

@@ -1,10 +1,12 @@
 import type { BundledLanguage, BundledTheme } from 'shiki'
 import type { CodeBlockOptions as CodeBlockExtOptions } from '@tiptap/extension-code-block'
 import CodeBlockExt from '@tiptap/extension-code-block'
+import { ReactNodeViewRenderer } from '@tiptap/react'
 import type { GeneralOptions } from '@/types'
 import { ShikiPlugin } from '@/extensions/CodeBlock/shiki-plugin'
 import CodeBlockActiveButton from '@/extensions/CodeBlock/components/CodeBlockActiveButton'
 import { DEFAULT_LANGUAGE_CODE_BLOCK } from '@/constants'
+import { NodeViewCodeBlock } from '@/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock'
 
 export interface CodeBlockOptions
   extends GeneralOptions<CodeBlockExtOptions> {
@@ -36,6 +38,9 @@ export const CodeBlock = CodeBlockExt.extend<CodeBlockOptions>({
       },
     }
   },
+  addNodeView() {
+    return ReactNodeViewRenderer(NodeViewCodeBlock)
+  },
   addProseMirrorPlugins() {
     return [
       ...(this.parent?.() || []),

src/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable unicorn/prefer-dom-node-text-content */
+/* eslint-disable react/no-duplicate-key */
+import React, { useCallback, useMemo, useRef } from 'react'
+
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
+
+import { Copy, CopyCheck } from 'lucide-react'
+import clsx from 'clsx'
+import styles from './index.module.scss'
+import { ActionButton } from '@/components/ActionButton'
+import { CodeBlock } from '@/extensions'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import useCopy from '@/hooks/useCopy'
+import { deleteNode } from '@/utils/delete-node'
+import { DEFAULT_LANGUAGE_CODE_BLOCK } from '@/constants'
+
+export function NodeViewCodeBlock({ editor, node: { attrs }, updateAttributes, extension }: any) {
+  const { isCopied, copyToClipboard } = useCopy()
+
+  const listLang = useMemo(() => {
+    return extension.options.languages?.length ? extension.options.languages : DEFAULT_LANGUAGE_CODE_BLOCK
+  }, [extension.options.languages])
+
+  const isEditable = editor.isEditable
+  const isPrint = editor?.options?.editorProps?.print
+  const { language: defaultLanguage } = attrs
+  const $container: any = useRef<HTMLPreElement>()
+
+  const deleteMe = useCallback(() => deleteNode(CodeBlock.name, editor), [editor])
+
+  return (
+    <NodeViewWrapper className={clsx(styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}>
+      <div className={styles.handleWrap}>
+        <Select
+          defaultValue={defaultLanguage || 'auto'}
+          disabled={!isEditable}
+          onValueChange={value => updateAttributes({ language: value })}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Language" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="auto">Auto</SelectItem>
+
+            {listLang.map((lang: any, index: any) => (
+              <SelectItem key={`code-lang-${index}`} value={lang}>
+                {lang.charAt(0).toUpperCase() + lang.slice(1)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <ActionButton
+          action={() => copyToClipboard($container.current.innerText)}
+        >
+          {!isCopied ? <Copy size={16} /> : <CopyCheck size={16} />}
+        </ActionButton>
+
+        <ActionButton
+          action={deleteMe}
+          icon="Trash2"
+        />
+      </div>
+      <pre ref={$container}>
+        <NodeViewContent as="code" />
+      </pre>
+    </NodeViewWrapper>
+  )
+}

src/extensions/CodeBlock/components/NodeViewCodeBlock/index.module.scss

@@ -0,0 +1,32 @@
+.wrap {
+  position: relative;
+
+  .handleWrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+
+    .selectorWrap {
+      margin-right: 8px;
+    }
+
+    button {
+      border: 1px solid hsl(var(--border)) !important;
+    }
+  }
+
+  code {
+    margin: 0 !important;
+  }
+
+  pre {
+    margin: 10px 0 !important;
+  }
+
+  &.maxHeight {
+    code {
+      max-height: 370px;
+    }
+  }
+}