@yoopta/code 6.0.0-beta.2 → 6.0.0-beta.20

package/README.md

@@ -1,11 +1,53 @@
-# `yoopta-code`
+# @yoopta/code
 
-> TODO: description
+Code block plugin for Yoopta Editor. Renders code blocks with optional language and theme (e.g. for syntax highlighting). Use headless or with theme UI from `@yoopta/themes-shadcn`.
+
+## Installation
+
+```bash
+yarn add @yoopta/code
+```
 
 ## Usage
 
+Pass the plugin to `createYooptaEditor`. Do not pass `plugins` to `<YooptaEditor>`.
+
+```tsx
+import { useMemo } from 'react';
+import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
+import Code from '@yoopta/code';
+
+const plugins = [Code];
+
+export default function Editor() {
+  const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
+  return <YooptaEditor editor={editor} onChange={() => {}} />;
+}
 ```
-const code = require('yoopta-code');
 
-// TODO: DEMONSTRATE API
+## Themed UI
+
+```tsx
+import { applyTheme } from '@yoopta/themes-shadcn';
+const plugins = applyTheme([Paragraph, Code, /* ... */]);
 ```
+
+Or: `Code.extend({ elements: CodeUI })` with `CodeUI` from `@yoopta/themes-shadcn/code`.
+
+## Extend
+
+```tsx
+Code.extend({
+  elements: {
+    code: { render: (props) => <YourCodeBlock {...props} /> },
+  },
+  options: {
+    display: { title: 'Code', description: 'Code block' },
+    shortcuts: ['code', '```'],
+  },
+});
+```
+
+## Docs
+
+See [Code plugin docs](https://docs.yoopta.dev/plugins/code) and [Code group](https://docs.yoopta.dev/plugins/code-group).

package/dist/commands/code-commands.d.ts

@@ -1,5 +1,6 @@
 import type { YooEditor, YooptaPathIndex } from '@yoopta/editor';
 import type { CodeElement, CodeElementProps } from '../types';
+import { type FormatCodeOptions } from '../utils/prettier';
 type CodeElementOptions = {
     text?: string;
     props?: CodeElementProps;
@@ -8,14 +9,27 @@ type InsertCodeOptions = CodeElementOptions & {
     at?: YooptaPathIndex;
     focus?: boolean;
 };
-export type CodeCommands = {
+export type BeautifyCodeResult = {
+    success: boolean;
+    error?: string;
+};
+export type CodeCommandsType = {
     buildCodeElements: (editor: YooEditor, options?: Partial<CodeElementOptions>) => CodeElement;
     insertCode: (editor: YooEditor, options?: Partial<InsertCodeOptions>) => void;
     deleteCode: (editor: YooEditor, blockId: string) => void;
     updateCodeTheme: (editor: YooEditor, blockId: string, theme: CodeElementProps['theme']) => void;
     updateCodeLanguage: (editor: YooEditor, blockId: string, language: CodeElementProps['language']) => void;
-    prettifyCode: (_editor: YooEditor, code: string, language: string) => Promise<string>;
+    /** Formats the code string and returns the result (does not modify editor) */
+    prettifyCode: (editor: YooEditor, code: string, language: string, options?: FormatCodeOptions) => Promise<{
+        formatted: string;
+        success: boolean;
+        error?: string;
+    }>;
+    /** Beautifies the code in the specified block (modifies editor content) */
+    beautifyCode: (editor: YooEditor, blockId: string, options?: FormatCodeOptions) => Promise<BeautifyCodeResult>;
+    /** Checks if a language supports formatting */
+    isLanguageSupported: (language: string) => boolean;
 };
-export declare const CodeCommands: CodeCommands;
+export declare const CodeCommands: CodeCommandsType;
 export {};
 //# sourceMappingURL=code-commands.d.ts.map

package/dist/commands/code-commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-commands.d.ts","sourceRoot":"","sources":["../../src/commands/code-commands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMjE,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,KAAK,iBAAiB,GAAG,kBAAkB,GAAG;IAC5C,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,iBAAiB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,WAAW,CAAC;IAC7F,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9E,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,eAAe,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAChG,kBAAkB,EAAE,CAClB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,KACnC,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACvF,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAqD1B,CAAC"}
+{"version":3,"file":"code-commands.d.ts","sourceRoot":"","sources":["../../src/commands/code-commands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,KAAK,iBAAiB,EAAmC,MAAM,mBAAmB,CAAC;AAE5F,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,KAAK,iBAAiB,GAAG,kBAAkB,GAAG;IAC5C,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,WAAW,CAAC;IAC7F,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9E,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,eAAe,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAChG,kBAAkB,EAAE,CAClB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,KACnC,IAAI,CAAC;IACV,8EAA8E;IAC9E,YAAY,EAAE,CACZ,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,iBAAiB,KACxB,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtE,2EAA2E;IAC3E,YAAY,EAAE,CACZ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,iBAAiB,KACxB,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjC,+CAA+C;IAC/C,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBA4E1B,CAAC"}

package/dist/commands/code-group-commands.d.ts

@@ -1,6 +1,7 @@
 import type { YooEditor } from '@yoopta/editor';
 import type { Location } from 'slate';
 import type { CodeGroupContainerElement } from '../types';
+import { type FormatCodeOptions } from '../utils/prettier';
 export type InsertTabOptions = {
     afterTabId?: string;
     at?: Location;
@@ -8,10 +9,18 @@ export type InsertTabOptions = {
 export type DeleteTabOptions = {
     tabId: string;
 };
-export type CodeGroupCommandsType = {
+export type BeautifyTabResult = {
+    success: boolean;
+    error?: string;
+};
+export type CodeGroupCommands = {
     buildCodeElements: (editor: YooEditor) => CodeGroupContainerElement;
     addTabItem: (editor: YooEditor, blockId: string, options?: InsertTabOptions) => void;
     deleteTabItem: (editor: YooEditor, blockId: string, options: DeleteTabOptions) => void;
+    /** Beautifies the code in the specified tab (modifies editor content) */
+    beautifyTab: (editor: YooEditor, blockId: string, tabId: string, options?: FormatCodeOptions) => Promise<BeautifyTabResult>;
+    /** Checks if a language supports formatting */
+    isLanguageSupported: (language: string) => boolean;
 };
-export declare const CodeGroupCommands: CodeGroupCommandsType;
+export declare const CodeGroupCommands: CodeGroupCommands;
 //# sourceMappingURL=code-group-commands.d.ts.map

package/dist/commands/code-group-commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-group-commands.d.ts","sourceRoot":"","sources":["../../src/commands/code-group-commands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,yBAAyB,CAAC;IACpE,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrF,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACxF,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,qBA0N/B,CAAC"}
+{"version":3,"file":"code-group-commands.d.ts","sourceRoot":"","sources":["../../src/commands/code-group-commands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,yBAAyB,EAA2B,MAAM,UAAU,CAAC;AACnF,OAAO,EAAE,KAAK,iBAAiB,EAAmC,MAAM,mBAAmB,CAAC;AAE5F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iBAAiB,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,yBAAyB,CAAC;IACpE,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrF,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvF,yEAAyE;IACzE,WAAW,EAAE,CACX,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,iBAAiB,KACxB,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAChC,+CAA+C;IAC/C,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBA4R/B,CAAC"}

package/dist/index.d.ts

@@ -2,9 +2,10 @@ import { CodeGroup } from './plugin/code-group-plugin';
 import { Code } from './plugin/code-plugin';
 import { CodeElement, CodeElementProps, CodeGroupElementMap, CodeGroupPluginBlockOptions } from './types';
 export { HighlightedCodeOverlay, useHighlighter } from './components/highlighted-code-overlay';
-export { CodeCommands } from './commands/code-commands';
-export { CodeGroupCommands } from './commands/code-group-commands';
+export { CodeCommands, type BeautifyCodeResult } from './commands/code-commands';
+export { CodeGroupCommands, type BeautifyTabResult } from './commands/code-group-commands';
 export { SHIKI_CODE_LANGUAGES, SHIKI_CODE_THEMES } from './utils/shiki';
+export { isLanguageSupported, type FormatCodeOptions } from './utils/prettier';
 export { CodeElement, CodeElementProps };
 export { CodeGroupElementMap, CodeGroupPluginBlockOptions };
 export { CodeGroup, Code };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,SAAS,CAAC;AAKjB,OAAO,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAE3B,QAAA,MAAM,WAAW;;;CAGhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,SAAS,CAAC;AAKjB,OAAO,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAE3B,QAAA,MAAM,WAAW;;;CAGhB,CAAC;AAEF,eAAe,WAAW,CAAC"}