@tiptap/extension-floating-menu

What is @tiptap/extension-floating-menu?

@tiptap/extension-floating-menu is an extension for the Tiptap editor that provides a floating menu interface. This menu appears when the user selects text or performs certain actions, offering a convenient way to access formatting options and other editor functionalities.

What are @tiptap/extension-floating-menu's main functionalities?

Floating Menu Initialization

This code initializes the floating menu with a specified HTML element and configuration options for its placement using Tippy.js.

const floatingMenu = FloatingMenu.configure({
  element: document.querySelector('.floating-menu'),
  tippyOptions: {
    placement: 'right',
  },
});

Custom Menu Items

This code configures the floating menu to include custom menu items such as 'Bold' and 'Italic', which execute corresponding commands when selected.

const floatingMenu = FloatingMenu.configure({
  element: document.querySelector('.floating-menu'),
  items: [
    { command: 'bold', label: 'Bold' },
    { command: 'italic', label: 'Italic' },
  ],
});

Conditional Display

This code sets up the floating menu to only display when there is a text selection, using a conditional function to determine its visibility.

const floatingMenu = FloatingMenu.configure({
  element: document.querySelector('.floating-menu'),
  shouldShow: ({ state }) => {
    return state.selection.empty === false;
  },
});

Other packages similar to @tiptap/extension-floating-menu

prosemirror-menu

ProseMirror-menu is a menu system for the ProseMirror editor. It provides a way to create and manage menus that can be attached to the editor. Compared to @tiptap/extension-floating-menu, ProseMirror-menu is more generic and requires more manual setup for floating behavior.

quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility. It includes a toolbar that can be customized to float. While Quill offers a comprehensive editor experience, it is a full editor rather than an extension like @tiptap/extension-floating-menu.

medium-editor

Medium-Editor is a clone of the inline editor toolbar found on Medium.com. It provides a floating toolbar that appears when text is selected. It is similar in functionality to @tiptap/extension-floating-menu but is designed as a standalone editor.

README

@tiptap/extension-floating-menu

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open sourced software licensed under the MIT license.