Community Extension: tiptap-codeless drag handle, file upload and code block pro

[namelesserlx]

Description

Hi everyone 👋

I'd like to share a small collection of Tiptap v3 extensions I built, focused on providing "zero-boilerplate" building blocks for common editor features.

All extensions are written in TypeScript, designed for React, and published on npm under the @tiptap-codeless/* scope. Each extension comes with a live demo hosted on GitHub Pages.

---

1. @tiptap-codeless/extension-drag-handle

A global drag handle extension with an insert menu.
It makes it easy to reorder blocks and insert new content blocks from a consistent entry point.

• npm: https://www.npmjs.com/package/@tiptap-codeless/extension-drag-handle
• Demo: https://namelesserlx.github.io/tiptap-codeless/drag-handle/
• Source: https://github.com/namelesserlx/tiptap-codeless/tree/main/packages/extension-drag-handle

PKbdHImc_compressed.mp4

---

2. @tiptap-codeless/extension-file-upload

File upload extension with batteries included:

• drag & drop and paste support

• image preview and resize

• pluggable storage backends (e.g. cloud object storage)

• focuses on giving you a high-level API instead of boilerplate

• npm: https://www.npmjs.com/package/@tiptap-codeless/extension-file-upload

• Demo: https://namelesserlx.github.io/tiptap-codeless/file-upload/

• Source: https://github.com/namelesserlx/tiptap-codeless/tree/main/packages/extension-file-upload

9KTU6KGS_compressed.mp4

---

3. @tiptap-codeless/extension-code-block-pro

A “pro” code block experience:

• macOS-style header with language select and actions

• syntax highlighting via lowlight / highlight.js

• better UX for code-heavy documents

• npm: https://www.npmjs.com/package/@tiptap-codeless/extension-code-block-pro

• Demo: https://namelesserlx.github.io/tiptap-codeless/code-block-pro/

• Source: https://github.com/namelesserlx/tiptap-codeless/tree/main/packages/extension-code-block-pro

CPudxbg8_compressed.mp4

---

Repo and core utilities

All extensions share a small core utilities package:

• Repo: https://github.com/namelesserlx/tiptap-codeless
• Core package: https://www.npmjs.com/package/@tiptap-codeless/core

Feedback, ideas or PRs are very welcome.
Hope this is useful to anyone building richer editors with Tiptap!

Installation

npm i @tiptap-codeless/extension-file-upload
npm i @tiptap-codeless/extension-drag-handle
npm i @tiptap-codeless/extension-code-block-pro lowlight

Usage

1. extension-drag-handle

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { DragHandle } from '@tiptap-codeless/extension-drag-handle';

const editor = useEditor({
    extensions: [
        StarterKit,
        DragHandle.configure({
            insertMenu: { enabled: true, triggerOnSlash: true },
            drag: { enabled: true },
        }),
    ],
});

function App() {
    return <EditorContent editor={editor} />;
}

2. extension-file-upload

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { FileUpload } from '@tiptap-codeless/extension-file-upload';

const editor = useEditor({
    extensions: [
        StarterKit,
        FileUpload.configure({
            storageMode: 'memory', // Default
        }),
    ],
});

function App() {
    return <EditorContent editor={editor} />;
}

3. extension-code-block-pro

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { CodeBlockPro } from '@tiptap-codeless/extension-code-block-pro';
import { createLowlight } from 'lowlight';

// Import languages you actually need
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import python from 'highlight.js/lib/languages/python';

// Create lowlight instance
const lowlight = createLowlight();
lowlight.register('javascript', javascript);
lowlight.register('typescript', typescript);
lowlight.register('python', python);

const editor = useEditor({
    extensions: [
        StarterKit.configure({
            codeBlock: false, // Disable built-in codeBlock if you want to replace it
        }),
        CodeBlockPro.configure({
            lowlight,
            defaultLanguage: 'javascript',
            theme: 'auto', // 'light' | 'dark' | 'auto'
        }),
    ],
});

function App() {
    return <EditorContent editor={editor} />;
}

Type

Prosemirror plugin

Other

No response