Merge pull request #4043 from patrick-hertling/feature/code-block-jso…

…n-format

json formatting in code-block plugin

.changeset/flat-parrots-trade.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-code-block': minor
+---
+
+Ability to format a valid JSON string in a code block.

apps/www/src/registry/default/plate-ui/code-block-element.tsx

@@ -2,9 +2,14 @@
 
 import React from 'react';
 
+import type { Editor, TElement } from '@udecode/plate';
+
 import { cn, withRef } from '@udecode/cn';
+import { formatCodeBlock, isLangSupported } from '@udecode/plate-code-block';
 import { useCodeBlockElementState } from '@udecode/plate-code-block/react';
+import { BracesIcon } from 'lucide-react';
 
+import { Button } from './button';
 import { CodeBlockCombobox } from './code-block-combobox';
 import { PlateElement } from './plate-element';
 
@@ -28,13 +33,38 @@ export const CodeBlockElement = withRef<typeof PlateElement>(
 
         {state.syntax && (
           <div
-            className="absolute right-2 top-2 z-10 select-none"
+            className="absolute right-2 top-2 z-10 flex select-none items-center gap-1"
             contentEditable={false}
           >
+            <CodeBlockFormatButton {...props} />
             <CodeBlockCombobox />
           </div>
         )}
       </PlateElement>
     );
   }
 );
+
+export function CodeBlockFormatButton({
+  editor,
+  element,
+}: {
+  editor: Editor;
+  element: TElement;
+}) {
+  if (!isLangSupported(element.lang as string)) {
+    return null;
+  }
+
+  return (
+    <Button
+      size="xs"
+      variant="ghost"
+      className="h-5 justify-between px-1 text-xs"
+      onClick={() => formatCodeBlock(editor, { element })}
+      title="Format code"
+    >
+      <BracesIcon className="text-gray-500" />
+    </Button>
+  );
+}

packages/code-block/src/lib/formatter/formatter.ts

@@ -0,0 +1,58 @@
+import type { Editor } from '@udecode/plate';
+
+import type { TCodeBlockElement } from '../types';
+
+import { formatJson, isValidJson } from './jsonFormatter';
+
+const supportedLanguages = new Set(['json']);
+
+export const isLangSupported = (lang?: string): boolean =>
+  Boolean(lang && supportedLanguages.has(lang));
+
+export const isValidSyntax = (code: string, lang?: string): boolean => {
+  if (!isLangSupported(lang)) {
+    return false;
+  }
+
+  switch (lang) {
+    case 'json': {
+      return isValidJson(code);
+    }
+    default: {
+      return false;
+    }
+  }
+};
+
+export const formatCodeBlock = (
+  editor: Editor,
+  {
+    element,
+  }: {
+    element: TCodeBlockElement;
+  }
+) => {
+  const { lang } = element;
+
+  if (!lang || !isLangSupported(lang)) {
+    return;
+  }
+
+  const code = editor.api.string(element);
+
+  if (isValidSyntax(code, lang)) {
+    const formattedCode = formatCode(code, lang);
+    editor.tf.insertText(formattedCode, { at: element });
+  }
+};
+
+const formatCode = (code: string, lang?: string): string => {
+  switch (lang) {
+    case 'json': {
+      return formatJson(code);
+    }
+    default: {
+      return code;
+    }
+  }
+};

packages/code-block/src/lib/formatter/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './formatter';
+export * from './jsonFormatter';

packages/code-block/src/lib/formatter/jsonFormatter.spec.tsx

@@ -0,0 +1,31 @@
+import { formatJson, isValidJson } from './jsonFormatter';
+
+describe('JsonFormatter', () => {
+  it('should detect valid JSON', () => {
+    const json = '{ "name": "ChatGPT", "type": "AI" }';
+    const isValid = isValidJson(json);
+    expect(isValid).toBe(true);
+  });
+
+  it('should detect invalid JSON', () => {
+    const json = '{ name: "ChatGPT", type: AI }';
+    const isValid = isValidJson(json);
+    expect(isValid).toBe(false);
+  });
+
+  it('should format JSON', () => {
+    const json = '{"name":"ChatGPT","type":"AI"}';
+    const formattedJson = formatJson(json);
+    const expected = `{
+  "name": "ChatGPT",
+  "type": "AI"
+}`;
+    expect(formattedJson).toBe(expected);
+  });
+
+  it('should not format invalid JSON', () => {
+    const json = '{ name: "ChatGPT", type: AI }';
+    const formattedJson = formatJson(json);
+    expect(formattedJson).toBe(json);
+  });
+});

packages/code-block/src/lib/formatter/jsonFormatter.ts

@@ -0,0 +1,17 @@
+export const formatJson = (code: string): string => {
+  try {
+    return JSON.stringify(JSON.parse(code), null, 2);
+  } catch (error) {
+    return code;
+  }
+};
+
+export const isValidJson = (code: string): boolean => {
+  try {
+    JSON.parse(code);
+
+    return true;
+  } catch (error) {
+    return false;
+  }
+};

packages/code-block/src/lib/index.ts

@@ -10,5 +10,6 @@ export * from './withInsertDataCodeBlock';
 export * from './withInsertFragmentCodeBlock';
 export * from './withNormalizeCodeBlock';
 export * from './deserializer/index';
+export * from './formatter/index';
 export * from './queries/index';
 export * from './transforms/index';

packages/code-block/src/react/hooks/index.ts

@@ -1,6 +1,4 @@
-/**
- * @file Automatically generated by barrelsby.
- */
+/** @file Automatically generated by barrelsby. */
 
 export * from './useCodeBlockCombobox';
 export * from './useCodeBlockElement';