Code Block

'use client';
 
import { DiffMatchPatch, DiffOp } from 'diff-match-patch-ts';
import { BracesIcon, Check, CheckIcon, CopyIcon } from 'lucide-react';
import { CodeBlockRules, type Element, ElementApi, NodeApi } from 'platejs';
import {
  CodeBlockPlugin,
  CodeHighlightPlugin,
  type Editor,
  EditorElement,
  type EditorElementProps,
  useEditor,
  useEditorReadOnly,
  useElement,
} from 'platejs/react';
import * as React from 'react';
 
import { Button } from '@/components/ui/button';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import { cn } from '@/lib/utils';
import { createCodeBlockLowlight } from '@/components/editor/code-block-lowlight';
import {
  FloatingPopover,
  FloatingPopoverContent,
  FloatingPopoverTrigger,
} from '@/components/editor/floating-popover';
 
const codeBlockLanguages: Array<{ label: string; value: string }> = [
  { label: 'Auto', value: 'auto' },
  { label: 'Plain Text', value: 'plaintext' },
  { label: 'ABAP', value: 'abap' },
  { label: 'Agda', value: 'agda' },
  { label: 'Arduino', value: 'arduino' },
  { label: 'ASCII Art', value: 'ascii' },
  { label: 'Assembly', value: 'x86asm' },
  { label: 'Bash', value: 'bash' },
  { label: 'BASIC', value: 'basic' },
  { label: 'BNF', value: 'bnf' },
  { label: 'C', value: 'c' },
  { label: 'C#', value: 'csharp' },
  { label: 'C++', value: 'cpp' },
  { label: 'Clojure', value: 'clojure' },
  { label: 'CoffeeScript', value: 'coffeescript' },
  { label: 'Coq', value: 'coq' },
  { label: 'CSS', value: 'css' },
  { label: 'Dart', value: 'dart' },
  { label: 'Dhall', value: 'dhall' },
  { label: 'Diff', value: 'diff' },
  { label: 'Docker', value: 'dockerfile' },
  { label: 'EBNF', value: 'ebnf' },
  { label: 'Elixir', value: 'elixir' },
  { label: 'Elm', value: 'elm' },
  { label: 'Erlang', value: 'erlang' },
  { label: 'F#', value: 'fsharp' },
  { label: 'Flow', value: 'flow' },
  { label: 'Fortran', value: 'fortran' },
  { label: 'Gherkin', value: 'gherkin' },
  { label: 'GLSL', value: 'glsl' },
  { label: 'Go', value: 'go' },
  { label: 'GraphQL', value: 'graphql' },
  { label: 'Groovy', value: 'groovy' },
  { label: 'Haskell', value: 'haskell' },
  { label: 'HCL', value: 'hcl' },
  { label: 'HTML', value: 'html' },
  { label: 'Idris', value: 'idris' },
  { label: 'Java', value: 'java' },
  { label: 'JavaScript', value: 'javascript' },
  { label: 'JSON', value: 'json' },
  { label: 'Julia', value: 'julia' },
  { label: 'Kotlin', value: 'kotlin' },
  { label: 'LaTeX', value: 'latex' },
  { label: 'Less', value: 'less' },
  { label: 'Lisp', value: 'lisp' },
  { label: 'LiveScript', value: 'livescript' },
  { label: 'LLVM IR', value: 'llvm' },
  { label: 'Lua', value: 'lua' },
  { label: 'Makefile', value: 'makefile' },
  { label: 'Markdown', value: 'markdown' },
  { label: 'Markup', value: 'markup' },
  { label: 'MATLAB', value: 'matlab' },
  { label: 'Mathematica', value: 'mathematica' },
  { label: 'Mermaid', value: 'mermaid' },
  { label: 'Nix', value: 'nix' },
  { label: 'Notion Formula', value: 'notion' },
  { label: 'Objective-C', value: 'objectivec' },
  { label: 'OCaml', value: 'ocaml' },
  { label: 'Pascal', value: 'pascal' },
  { label: 'Perl', value: 'perl' },
  { label: 'PHP', value: 'php' },
  { label: 'PowerShell', value: 'powershell' },
  { label: 'Prolog', value: 'prolog' },
  { label: 'Protocol Buffers', value: 'protobuf' },
  { label: 'PureScript', value: 'purescript' },
  { label: 'Python', value: 'python' },
  { label: 'R', value: 'r' },
  { label: 'Racket', value: 'racket' },
  { label: 'Reason', value: 'reasonml' },
  { label: 'Ruby', value: 'ruby' },
  { label: 'Rust', value: 'rust' },
  { label: 'Sass', value: 'scss' },
  { label: 'Scala', value: 'scala' },
  { label: 'Scheme', value: 'scheme' },
  { label: 'SCSS', value: 'scss' },
  { label: 'Shell', value: 'shell' },
  { label: 'Smalltalk', value: 'smalltalk' },
  { label: 'Solidity', value: 'solidity' },
  { label: 'SQL', value: 'sql' },
  { label: 'Swift', value: 'swift' },
  { label: 'TOML', value: 'toml' },
  { label: 'TypeScript', value: 'typescript' },
  { label: 'VB.Net', value: 'vbnet' },
  { label: 'Verilog', value: 'verilog' },
  { label: 'VHDL', value: 'vhdl' },
  { label: 'Visual Basic', value: 'vbnet' },
  { label: 'WebAssembly', value: 'wasm' },
  { label: 'XML', value: 'xml' },
  { label: 'YAML', value: 'yaml' },
];
 
type CodeBlockLanguageOption = Readonly<{ label: string; value: string }>;
 
/** What a wrapper such as `withDiagrams` adds to either code-block variant. */
export type CodeBlockAddon = Readonly<{
  languageOptions?: readonly CodeBlockLanguageOption[];
  toolbar?: React.ReactNode;
  wrapSource?: (source: React.ReactNode) => React.ReactNode;
}>;
 
export type CodeBlockElementProps = EditorElementProps<
  typeof CodeBlockPlugin
> & {
  addon?: CodeBlockAddon;
  showLanguageLabel?: boolean;
};
 
/** What `createCodeBlockPlugin` takes: `CodeBlockElement`, `CodeBlockCodeMirrorElement` or a wrapped one. */
export type CodeBlockComponent = (
  props: CodeBlockElementProps
) => React.ReactElement;
 
function getCodeBlockLanguageLabel(
  lang: string | null | undefined,
  addedOptions: readonly CodeBlockLanguageOption[] = []
) {
  const value = lang?.trim();
 
  if (!value) return null;
 
  return (
    [...codeBlockLanguages, ...addedOptions].find(
      (language) => language.value === value
    )?.label ?? value
  );
}
 
export function CodeBlockElement({
  addon,
  showLanguageLabel = true,
  ...props
}: CodeBlockElementProps) {
  return (
    <CodeBlockContainer
      addon={addon}
      elementProps={props}
      showLanguageLabel={showLanguageLabel}
    >
      <pre className="overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
        <code className="[&>[data-editor-node=text]]:contents">
          {props.children}
        </code>
      </pre>
    </CodeBlockContainer>
  );
}
 
export function CodeBlockContainer({
  addon,
  children,
  elementProps,
  languageOptions = codeBlockLanguages,
  showLanguageLabel = true,
}: {
  children: React.ReactNode;
  elementProps: EditorElementProps<typeof CodeBlockPlugin>;
  addon?: CodeBlockAddon;
  languageOptions?: readonly CodeBlockLanguageOption[];
  showLanguageLabel?: boolean;
}) {
  const { editor, element, attributes, plugin, ref, slots } = elementProps;
  const readOnly = useEditorReadOnly();
  const addedOptions = addon?.languageOptions;
  const options = React.useMemo(
    () =>
      addedOptions
        ? [
            ...languageOptions,
            ...addedOptions.filter(
              (added) =>
                !languageOptions.some((own) => own.value === added.value)
            ),
          ]
        : languageOptions,
    [addedOptions, languageOptions]
  );
 
  return (
    <EditorElement
      className="py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-temeditor-tag,.hljs-temeditor-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-temeditor-tag,.hljs-temeditor-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#a77bfa]"
      attributes={attributes}
      element={element}
      plugin={plugin}
      ref={ref}
      slots={slots}
    >
      <div className="relative rounded-md bg-muted/50">
        {addon?.wrapSource ? addon.wrapSource(children) : children}
 
        <div
          className="absolute top-1 right-1 z-10 flex gap-0.5 select-none"
          contentEditable={false}
        >
          {addon?.toolbar}
 
          {!readOnly && element.language === 'json' && (
            <Button
              size="icon"
              variant="ghost"
              className="size-6 text-xs"
              onClick={() => formatJsonCodeBlock(editor, element)}
              title="Format code"
            >
              <BracesIcon className="!size-3.5 text-muted-foreground" />
            </Button>
          )}
 
          <CodeBlockCombobox
            addedOptions={addedOptions}
            languageOptions={options}
            showLanguageLabel={showLanguageLabel}
          />
 
          <CodeBlockCopyButton />
        </div>
      </div>
    </EditorElement>
  );
}
 
export function formatJsonCodeBlock(editor: Editor, element: Element) {
  if (editor.read.view.isReadOnly()) return;
 
  const blockPath = editor.read.nodes.path(element);
 
  if (!blockPath) return;
 
  const block = editor.read.nodes.get(blockPath)?.[0];
 
  if (
    block !== element ||
    !ElementApi.isElement(block) ||
    block.type !== editor.plugin(CodeBlockPlugin).schema.type ||
    block.language !== 'json' ||
    block.children.length !== 1
  ) {
    return;
  }
 
  const [child] = block.children;
 
  if (!NodeApi.isText(child)) return;
 
  const { text } = child;
  let formatted: string;
 
  try {
    formatted = JSON.stringify(JSON.parse(text), null, 2);
  } catch {
    return;
  }
 
  if (formatted === text) return;
 
  const diff = new DiffMatchPatch().diff_main(text, formatted, false);
  const edits: Array<{ end: number; start: number; text: string }> = [];
  let oldOffset = 0;
  let start: number | null = null;
  let replacement = '';
 
  for (const [operation, value] of diff) {
    if (operation === DiffOp.Equal) {
      if (start !== null) {
        edits.push({ start, end: oldOffset, text: replacement });
        start = null;
        replacement = '';
      }
      oldOffset += value.length;
    } else if (operation === DiffOp.Delete) {
      start ??= oldOffset;
      oldOffset += value.length;
    } else {
      start ??= oldOffset;
      replacement += value;
    }
  }
 
  if (start !== null) {
    edits.push({ start, end: oldOffset, text: replacement });
  }
 
  editor.update((tx) => {
    for (const edit of edits.reverse()) {
      const at = {
        anchor: { path: [...blockPath, 0], offset: edit.start },
        focus: { path: [...blockPath, 0], offset: edit.end },
      };
 
      if (edit.text) {
        tx.text.insert(edit.text, { at });
      } else {
        tx.text.delete({ at });
      }
    }
  });
}
 
function CodeBlockCopyButton() {
  const editor = useEditor();
  const element = useElement(CodeBlockPlugin);
 
  return (
    <CopyButton
      size="icon"
      variant="ghost"
      className="size-6 gap-1 text-xs text-muted-foreground"
      value={() => {
        const path = editor.read.nodes.path(element);
 
        return path ? editor.read.text.string(path) : '';
      }}
    />
  );
}
 
function CodeBlockCombobox({
  addedOptions,
  languageOptions,
  showLanguageLabel,
}: {
  languageOptions: readonly CodeBlockLanguageOption[];
  showLanguageLabel: boolean;
  addedOptions?: readonly CodeBlockLanguageOption[];
}) {
  const [open, setOpen] = React.useState(false);
  const readOnly = useEditorReadOnly();
  const editor = useEditor();
  const element = useElement(CodeBlockPlugin);
  const value = element.language || 'plaintext';
  const [searchValue, setSearchValue] = React.useState('');
 
  const items = React.useMemo(
    () =>
      languageOptions.filter(
        (language) =>
          !searchValue ||
          language.label.toLowerCase().includes(searchValue.toLowerCase())
      ),
    [searchValue, languageOptions]
  );
 
  if (readOnly) {
    if (!showLanguageLabel) return null;
 
    return (
      <CodeBlockLanguageLabel
        addedOptions={addedOptions}
        lang={element.language}
      />
    );
  }
 
  return (
    <FloatingPopover open={open} onOpenChange={setOpen}>
      <FloatingPopoverTrigger>
        <Button
          size="sm"
          variant="ghost"
          className="h-6 justify-between gap-1 px-2 text-xs text-muted-foreground select-none"
          aria-controls="code-block-language-options"
          aria-expanded={open}
          role="combobox"
        >
          {getCodeBlockLanguageLabel(value, addedOptions) ?? 'Plain Text'}
        </Button>
      </FloatingPopoverTrigger>
      <FloatingPopoverContent
        className="w-[200px] p-0"
        id="code-block-language-options"
        onFinalFocus={() => {
          setSearchValue('');
        }}
      >
        <Command shouldFilter={false}>
          <CommandInput
            className="h-9"
            value={searchValue}
            onValueChange={(innerValue) => {
              setSearchValue(innerValue);
            }}
            placeholder="Search language..."
          />
          <CommandEmpty>No language found.</CommandEmpty>
 
          <CommandList className="h-[344px] overflow-y-auto">
            <CommandGroup>
              {items.map((language) => (
                <CommandItem
                  key={language.label}
                  className="cursor-pointer"
                  value={language.value}
                  onSelect={(innerValue2) => {
                    const path = editor.read.nodes.path(element);
 
                    if (!path) return;
 
                    editor
                      .plugin(CodeBlockPlugin)
                      .update.set({ language: innerValue2 }, { at: path });
                    setSearchValue(innerValue2);
                    setOpen(false);
                  }}
                >
                  <Check
                    className={cn(
                      value === language.value ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                  {language.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </FloatingPopoverContent>
    </FloatingPopover>
  );
}
 
function CodeBlockLanguageLabel({
  addedOptions,
  lang,
}: {
  addedOptions?: readonly CodeBlockLanguageOption[];
  lang?: string | null;
}) {
  const label = getCodeBlockLanguageLabel(lang, addedOptions);
 
  if (!label) return null;
 
  return (
    <span className="flex h-6 items-center px-2 text-xs text-muted-foreground select-none">
      {label}
    </span>
  );
}
 
function CopyButton({
  value,
  ...props
}: { value: (() => string) | string } & Omit<
  React.ComponentProps<typeof Button>,
  'value'
>) {
  const [status, setStatus] = React.useState<
    'idle' | 'copying' | 'copied' | 'failed'
  >('idle');
 
  React.useEffect(() => {
    if (status !== 'copied') return undefined;
 
    const timeout = setTimeout(() => {
      setStatus('idle');
    }, 2000);
 
    return () => {
      clearTimeout(timeout);
    };
  }, [status]);
 
  return (
    <Button
      disabled={status === 'copying'}
      onClick={async () => {
        setStatus('copying');
        try {
          await navigator.clipboard.writeText(
            typeof value === 'function' ? value() : value
          );
          setStatus('copied');
        } catch {
          setStatus('failed');
        }
      }}
      title={status === 'failed' ? 'Copy failed. Try again.' : 'Copy'}
      {...props}
    >
      <span className="sr-only">
        {status === 'failed' ? 'Copy failed. Try again.' : 'Copy'}
      </span>
      {status === 'copied' ? (
        <CheckIcon className="!size-3" />
      ) : (
        <CopyIcon className="!size-3" />
      )}
    </Button>
  );
}
 
export const createCodeBlockPlugin = (component: CodeBlockComponent) =>
  CodeBlockPlugin.configure({
    component,
    inputRules: [CodeBlockRules.markdown({ on: 'match' })],
    shortcuts: { toggle: { keys: 'mod+alt+8' } },
  });
 
const lowlight = createCodeBlockLowlight();
 
export const CodeBlockKit = [
  createCodeBlockPlugin(CodeBlockElement),
  CodeHighlightPlugin.configure({
    initialState: { lowlight },
  }),
];Copy

'use client';
 
import { DiffMatchPatch, DiffOp } from 'diff-match-patch-ts';
import { BracesIcon, Check, CheckIcon, CopyIcon } from 'lucide-react';
import { CodeBlockRules, type Element, ElementApi, NodeApi } from 'platejs';
import {
  CodeBlockPlugin,
  CodeHighlightPlugin,
  type Editor,
  EditorElement,
  type EditorElementProps,
  useEditor,
  useEditorReadOnly,
  useElement,
} from 'platejs/react';
import * as React from 'react';
 
import { Button } from '@/components/ui/button';