Aki UI

Editor

エディター

A block editor with a slash command menu, a selection bubble menu, task lists, syntax highlighted code blocks and inline tables. Built with Tiptap↗↗, cmdk↗↗ and Tailwind CSS.

Installation

Install the following dependencies:1

npm install @tiptap/react @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/suggestionnpm install @tiptap/extension-code-block-lowlight @tiptap/extension-list @tiptap/extension-table @tiptap/extension-text-style @tiptap/extension-typography @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extensionsnpm install lowlight tippy.js fuse.js cmdk lucide-reactnpm install @radix-ui/react-popover @radix-ui/react-dropdown-menu @base-ui-components/react

Copy and paste the following code into a new component file:2

"use client"

import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"

import * as PopoverPrimitive from "@radix-ui/react-popover"

import { Tooltip as TooltipPrimitive } from "@base-ui-components/react/tooltip"

import type { Editor, Range } from "@tiptap/core"

import { mergeAttributes, Node } from "@tiptap/core"

import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"

import { TaskItem, TaskList } from "@tiptap/extension-list"

import Subscript from "@tiptap/extension-subscript"

How to use it3

"use client"

import { useState } from "react"

import {

EditorBubbleMenu,

EditorCharacterCount,

EditorClearFormatting,

EditorFloatingMenu,

EditorFormatBold,

EditorFormatItalic,

Props

EditorProvider

Name	Default	Description
content	—	string \| JSONContent Initial document, as HTML or tiptap JSON
placeholder	—	string Text shown while the document is empty
limit	—	number Maximum number of characters accepted by the editor
extensions	[]	Extension[] Extra tiptap extensions appended to the defaults
editorContainerProps	{}	HTMLAttributes<HTMLDivElement> Props forwarded to the element wrapping the ProseMirror surface
dark	false	boolean Applies the dark palette to the portalled menus, popovers and tooltips
className	—	string Additional classes on the editor shell
onUpdate	—	(props: { editor: Editor }) => void Called on every document change
children	—	ReactNode Menus and counters rendered inside the editor context

EditorBubbleMenu

Name	Default	Description
children	—	ReactNode Toolbar sections, a vertical divider is inserted between each of them
options	—	FloatingUIOptions Floating UI placement options forwarded to tiptap
shouldShow	—	(props) => boolean Overrides when the menu appears
className	—	string Additional classes on the menu surface

EditorFloatingMenu

Name	Default	Description
children	—	ReactNode Buttons shown at the start of an empty line
shouldShow	—	(props) => boolean Overrides when the menu appears
className	—	string Additional classes on the menu surface

Name

Default

Description

children

—

ReactNode

Buttons shown at the start of an empty line

shouldShow

—

(props) => boolean

Overrides when the menu appears

className

—

string

Additional classes on the menu surface

EditorSelector

Name	Default	Description
title	—	string Label of the dropdown trigger
open	—	boolean Controls the popover
onOpenChange	—	(open: boolean) => void Called when the popover opens or closes
dark	inherited	boolean Overrides the dark flag coming from EditorProvider
children	—	ReactNode Node buttons listed inside the popover

EditorLinkSelector

Name	Default	Description
open	—	boolean Controls the popover
onOpenChange	—	(open: boolean) => void Called when the popover opens or closes
dark	inherited	boolean Overrides the dark flag coming from EditorProvider

Name

Default

Description

open

—

boolean

Controls the popover

onOpenChange

—

(open: boolean) => void

Called when the popover opens or closes

dark

inherited

boolean

Overrides the dark flag coming from EditorProvider

Node buttons

Name	Default	Description
hideName	false	boolean Renders an icon-only square button instead of an icon with a label

Name

Default

Description

hideName

false

boolean

Renders an icon-only square button instead of an icon with a label

Format buttons

Name	Default	Description
hideName	false	boolean Renders an icon-only square button instead of an icon with a label

Name

Default

Description

hideName

false

boolean

Renders an icon-only square button instead of an icon with a label

EditorTableMenu

Name	Default	Description
children	—	ReactNode Table menus, hidden unless the cursor sits inside a table

Name

Default

Description

children

—

ReactNode

Table menus, hidden unless the cursor sits inside a table

EditorTableColumnMenu / EditorTableRowMenu

Name	Default	Description
children	—	ReactNode Dropdown items such as EditorTableColumnBefore or EditorTableRowDelete
dark	inherited	boolean Overrides the dark flag coming from EditorProvider

Name

Default

Description

children

—

ReactNode

Dropdown items such as EditorTableColumnBefore or EditorTableRowDelete

dark

inherited

boolean

Overrides the dark flag coming from EditorProvider

EditorTableGlobalMenu

Name	Default	Description
children	—	ReactNode Icon actions pinned under the table, each one carries a tooltip

Name

Default

Description

children

—

ReactNode

Icon actions pinned under the table, each one carries a tooltip

EditorCharacterCount

Name	Default	Description
children	—	ReactNode Label rendered before the count
className	—	string Additional classes on the counter chip

Name

Default

Description

children

—

ReactNode

Label rendered before the count

className

—

string

Additional classes on the counter chip