Codice 1.6.0

The Editor component is the primary entrypoint for the codice editor package. It is exported from the package root and can be imported to integrate the editor into your application.

import { Editor } from './editor';

// Usage of the Editor component
function MyComponent() {
  return <Editor />;
}

The Code component is the primary entrypoint for the codice package. It is used to render code blocks within your application. Import it from the package root to access its functionality.

import { Code } from 'codice';

// Usage of the Code component

The CodeHeader component renders a header for a code block, which can include a title and control placeholders. It is typically used as a child or companion to the Code component.

• If controls is true, it renders placeholder spans for UI controls (e.g., copy, expand).
• If onChangeTitle is provided, the title becomes an editable input field.

import { CodeHeader } from 'codice/code';

<CodeHeader 
  title="example.ts" 
  controls={true} 
  onChangeTitle={(newTitle) => console.log(newTitle)} 
/>

The Code component is the primary way to render syntax-highlighted code blocks in React. It supports line highlighting, line numbers, and custom styling via props. It uses sugar-high for tokenization and automatically detects language presets based on the file extension provided in the title or the extension prop.

Supported language extensions for automatic preset selection include:

• CSS: sass, scss, less, css
• Python: py
• Rust: rs

If the extension is not recognized, it falls back to default tokenization.

import { Code } from 'codice/code';

function MyComponent() {
  return (
    <Code
      title="script.py"
      highlightLines={[2, 4, [6, 8]]}
      lineNumbers
      fontSize="14px"
    >
      def hello():\n    print("world")\n    # This is line 3\n    return True\n\n    # Lines 6 to 8\n    x = 1\n    y = 2\n    z = x + y
    </Code>
  );
}

The Editor component renders with specific data-* attributes to facilitate easy selection and state inspection in the DOM or via testing libraries.

• data-codice="editor": Identifies the main editor container.
• data-codice-editor: A secondary identifier for the editor.
• data-codice-title="[title]": The current title of the editor.
• data-codice-controls="true|false": Indicates if controls are visible.
• data-codice-line-numbers="true|false": Indicates if line numbers are enabled.
• data-codice-content: Identifies the container holding the Code display and the textarea.

<!-- Example DOM structure -->
<div data-codice="editor" data-codice-title="script.js" data-codice-controls="true" data-codice-line-numbers="true">
  <div data-codice-content>
    <!-- Code display and textarea reside here -->
  </div>
</div>

The getExtension utility function extracts the file extension from a given title string. If the title is undefined or has no extension, it returns an empty string.

import { getExtension } from 'codice/code';

const ext = getExtension('main.py'); // returns 'py'
const none = getExtension('README'); // returns ''

The Code class is exported from the main package entrypoint and is used to represent or manage code segments within the Codice ecosystem.

import { Code } from 'codice';

The Editor class is the primary entrypoint for interacting with the Codice editor. It is exported from the main package entrypoint.

import { Editor } from 'codice';