Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@tiptap/extension-floating-menu

Package Overview
Dependencies
Maintainers
5
Versions
183
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tiptap/extension-floating-menu

floating-menu extension for tiptap

  • 2.10.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.1M
increased by6.19%
Maintainers
5
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 26 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc