CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-code

Inline code mark extension for the Tiptap rich text editor framework

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Tiptap Extension Code

The @tiptap/extension-code package provides an inline code mark extension for the Tiptap rich text editor framework. It enables users to mark text as inline code using backticks (`code`) with keyboard shortcuts (Mod-e), automatically parses inline code blocks from input and paste operations, and renders them as HTML <code> elements.

Package Information

  • Package Name: @tiptap/extension-code
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-code

Core Imports

import { Code } from "@tiptap/extension-code";

For default import:

import Code from "@tiptap/extension-code";

For importing specific components:

import { Code, CodeOptions, inputRegex, pasteRegex } from "@tiptap/extension-code";

CommonJS:

const { Code } = require("@tiptap/extension-code");

Basic Usage

import { Editor } from "@tiptap/core";
import { Code } from "@tiptap/extension-code";

// Initialize editor with Code extension
const editor = new Editor({
  extensions: [
    Code.configure({
      HTMLAttributes: {
        class: "my-custom-code",
      },
    }),
  ],
  content: "<p>Here is some <code>inline code</code> in the text.</p>",
});

// Programmatically toggle code mark
editor.commands.toggleCode();

// Set code mark on selected text
editor.commands.setCode();

// Remove code mark from selected text
editor.commands.unsetCode();

Architecture

The extension integrates with Tiptap's mark system and provides:

  • Mark Extension: Extends Tiptap's Mark class to create inline code marks
  • Input Rules: Automatic parsing of backtick syntax while typing
  • Paste Rules: Recognition of backtick syntax when pasting content
  • Commands: Programmatic control through editor commands
  • Keyboard Shortcuts: Built-in shortcuts for quick formatting

Capabilities

Code Extension Class

Main extension class that creates inline code marks in the Tiptap editor.

/**
 * This extension allows you to mark text as inline code.
 * @see https://tiptap.dev/api/marks/code
 */
declare const Code: Mark<CodeOptions>;

Extension Configuration

Configure the Code extension with custom options.

interface CodeOptions {
  /**
   * The HTML attributes applied to the code element.
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>;
}

Usage Example:

import { Editor } from "@tiptap/core";
import { Code } from "@tiptap/extension-code";

const editor = new Editor({
  extensions: [
    Code.configure({
      HTMLAttributes: {
        class: "inline-code",
        spellcheck: "false",
      },
    }),
  ],
});

Commands Interface

The Code extension adds three commands to the editor's command interface.

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    code: {
      /**
       * Set a code mark
       */
      setCode: () => ReturnType;
      /**
       * Toggle inline code
       */
      toggleCode: () => ReturnType;
      /**
       * Unset a code mark
       */
      unsetCode: () => ReturnType;
    };
  }
}

Usage Examples:

// Toggle code formatting (most common usage)
editor.commands.toggleCode();

// Apply code formatting to selected text
editor.commands.setCode();

// Remove code formatting from selected text
editor.commands.unsetCode();

// Check if current selection has code formatting
const isActive = editor.isActive('code');

Keyboard Shortcuts

Built-in keyboard shortcuts for quick code formatting.

  • Mod-e: Toggle inline code formatting (Cmd+e on Mac, Ctrl+e on Windows/Linux)

Input Rules

Automatic parsing of backtick syntax while typing, powered by regular expressions.

/**
 * Regular expression to match inline code blocks enclosed in backticks.
 * Matches an opening backtick, followed by any text that doesn't include
 * a backtick (captured for marking), followed by a closing backtick.
 */
declare const inputRegex: RegExp;

Pattern: /(^|[^])([^]+)(?!)$/`

Usage: Type `text` and it will automatically be converted to inline code formatting.

Paste Rules

Recognition of backtick syntax when pasting content from external sources.

/**
 * Regular expression to match inline code while pasting content.
 */
declare const pasteRegex: RegExp;

Pattern: /(^|[^])([^]+)(?!)/g`

Usage: Paste text containing `code` syntax and it will be automatically formatted as inline code.

HTML Integration

The extension handles HTML parsing and rendering for <code> elements.

HTML Parsing: Recognizes existing <code> elements when loading content HTML Rendering: Outputs semantic <code> HTML elements with customizable attributes

<!-- Input HTML -->
<p>This is <code>inline code</code> text.</p>

<!-- Rendered with custom attributes -->
<p>This is <code class="my-custom-code">inline code</code> text.</p>

Mark Properties

The Code extension has specific mark properties that control its behavior:

  • excludes: '_' - Excludes other marks with underscore notation
  • code: true - Identifies this as a code mark for editor logic
  • exitable: true - Allows cursor to exit the mark boundaries

Types

interface CodeOptions {
  HTMLAttributes: Record<string, any>;
}

// Regular expression constants
declare const inputRegex: RegExp;
declare const pasteRegex: RegExp;

// Extension class
declare const Code: Mark<CodeOptions>;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-code@3.4.x
Publish Source
CLI
Badge
tessl/npm-tiptap--extension-code badge