@tiptap/extension-bubble-menu - npm Package Compare versions

Comparing version 3.0.0-next.3 to 3.0.0-next.4

dist/index.d.ts

 import { Editor, Extension } from '@tiptap/core';
-import * as _floating_ui_core from '@floating-ui/core';
 import * as _floating_ui_dom from '@floating-ui/dom';
-import { Strategy, Placement, OffsetOptions, FlipOptions, ShiftOptions, ArrowOptions, SizeOptions, AutoPlacementOptions, HideOptions, InlineOptions } from '@floating-ui/dom';
+import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
 import { PluginKey, EditorState, PluginView, Plugin } from '@tiptap/pm/state';
@@ -56,12 +55,12 @@ import { EditorView } from '@tiptap/pm/view';
     options?: {
-        strategy?: Strategy;
-        placement?: Placement;
-        offset?: OffsetOptions | boolean;
-        flip?: FlipOptions | boolean;
-        shift?: ShiftOptions | boolean;
-        arrow?: ArrowOptions | false;
-        size?: SizeOptions | boolean;
-        autoPlacement?: AutoPlacementOptions | boolean;
-        hide?: HideOptions | boolean;
-        inline?: InlineOptions | boolean;
+        strategy?: 'absolute' | 'fixed';
+        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+        offset?: Parameters<typeof offset>[0] | boolean;
+        flip?: Parameters<typeof flip>[0] | boolean;
+        shift?: Parameters<typeof shift>[0] | boolean;
+        arrow?: Parameters<typeof arrow>[0] | false;
+        size?: Parameters<typeof size>[0] | boolean;
+        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
+        hide?: Parameters<typeof hide>[0] | boolean;
+        inline?: Parameters<typeof inline>[0] | boolean;
     };
@@ -86,3 +85,3 @@ }
         name: string;
-        fn: (state: _floating_ui_dom.MiddlewareState) => _floating_ui_core.MiddlewareReturn | Promise<_floating_ui_core.MiddlewareReturn>;
+        fn: (state: _floating_ui_dom.MiddlewareState) => _floating_ui_dom.MiddlewareReturn | Promise<_floating_ui_dom.MiddlewareReturn>;
     }[];
@@ -89,0 +88,0 @@ constructor({ editor, element, view, updateDelay, resizeDelay, shouldShow, options, }: BubbleMenuViewProps);

dist/index.js

@@ -16,10 +16,4 @@ // src/bubble-menu.ts
 } from "@floating-ui/dom";
-import {
-  isTextSelection,
-  posToDOMRect
-} from "@tiptap/core";
-import {
-  Plugin,
-  PluginKey
-} from "@tiptap/pm/state";
+import { isTextSelection, posToDOMRect } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 var BubbleMenuView = class {
@@ -48,8 +42,3 @@ constructor({
     };
-    this.shouldShow = ({
-      view,
-      state,
-      from,
-      to
-    }) => {
+    this.shouldShow = ({ view, state, from, to }) => {
       const { doc, selection } = state;
@@ -150,6 +139,10 @@ const { empty } = selection;
     if (this.floatingUIOptions.shift) {
-      middlewares.push(shift(typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0));
+      middlewares.push(
+        shift(typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0)
+      );
     }
     if (this.floatingUIOptions.offset) {
-      middlewares.push(offset(typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0));
+      middlewares.push(
+        offset(typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0)
+      );
     }
@@ -163,3 +156,7 @@ if (this.floatingUIOptions.arrow) {
     if (this.floatingUIOptions.autoPlacement) {
-      middlewares.push(autoPlacement(typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0));
+      middlewares.push(
+        autoPlacement(
+          typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0
+        )
+      );
     }
@@ -170,3 +167,5 @@ if (this.floatingUIOptions.hide) {
     if (this.floatingUIOptions.inline) {
-      middlewares.push(inline(typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0));
+      middlewares.push(
+        inline(typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0)
+      );
     }
@@ -180,3 +179,7 @@ return middlewares;
     };
-    computePosition(virtualElement, this.element, { placement: this.floatingUIOptions.placement, strategy: this.floatingUIOptions.strategy, middleware: this.middlewares }).then(({ x, y, strategy }) => {
+    computePosition(virtualElement, this.element, {
+      placement: this.floatingUIOptions.placement,
+      strategy: this.floatingUIOptions.strategy,
+      middleware: this.middlewares
+    }).then(({ x, y, strategy }) => {
       this.element.style.width = "max-content";
@@ -271,3 +274,3 @@ this.element.style.position = strategy;
 // src/index.ts
-var src_default = BubbleMenu;
+var index_default = BubbleMenu;
 export {
@@ -277,4 +280,4 @@ BubbleMenu,
   BubbleMenuView,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@tiptap/extension-bubble-menu",
   "description": "bubble-menu extension for tiptap",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "homepage": "https://tiptap.dev",
@@ -18,3 +18,6 @@ "keywords": [
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
@@ -38,8 +41,9 @@ "require": "./dist/index.cjs"
   "devDependencies": {
-    "@floating-ui/dom": "^1.0.0",
-    "@tiptap/core": "^3.0.0-next.3",
-    "@tiptap/pm": "^3.0.0-next.3"
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4"
   },
+  "dependencies": {
+    "@floating-ui/dom": "^1.0.0"
+  },
   "peerDependencies": {
-    "@floating-ui/dom": "^1.0.0",
     "@tiptap/core": "^3.0.0-next.1",
@@ -49,4 +53,5 @@ "@tiptap/pm": "^3.0.0-next.1"
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

README.md

 # @tiptap/extension-bubble-menu
+
 [![Version](https://img.shields.io/npm/v/@tiptap/extension-bubble-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bubble-menu)
@@ -8,8 +9,11 @@ [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bubble-menu.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
 ## Introduction
-Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – 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*.
 
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – 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_.
+
 ## Official Documentation
+
 Documentation can be found on the [Tiptap website](https://tiptap.dev).
 
 ## License
+
 Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

src/bubble-menu-plugin.ts

 import {
-  type ArrowOptions,
-  type AutoPlacementOptions,
-  type FlipOptions,
-  type HideOptions,
-  type InlineOptions,
-  type Middleware, type OffsetOptions, type Placement, type ShiftOptions, type SizeOptions, type Strategy, arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift,
+  type Middleware,
+  arrow,
+  autoPlacement,
+  computePosition,
+  flip,
+  hide,
+  inline,
+  offset,
+  shift,
   size,
 } from '@floating-ui/dom'
-import {
-  Editor, isTextSelection, posToDOMRect,
-} from '@tiptap/core'
-import {
-  EditorState, Plugin, PluginKey, PluginView,
-} from '@tiptap/pm/state'
+import { Editor, isTextSelection, posToDOMRect } from '@tiptap/core'
+import { EditorState, Plugin, PluginKey, PluginView } from '@tiptap/pm/state'
 import { EditorView } from '@tiptap/pm/view'
@@ -74,12 +73,24 @@
   options?: {
-    strategy?: Strategy
-    placement?: Placement
-    offset?: OffsetOptions | boolean
-    flip?: FlipOptions | boolean
-    shift?: ShiftOptions | boolean
-    arrow?: ArrowOptions | false
-    size?: SizeOptions | boolean
-    autoPlacement?: AutoPlacementOptions | boolean
-    hide?: HideOptions | boolean
-    inline?: InlineOptions | boolean
+    strategy?: 'absolute' | 'fixed'
+    placement?:
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'left'
+      | 'top-start'
+      | 'top-end'
+      | 'right-start'
+      | 'right-end'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left-start'
+      | 'left-end'
+    offset?: Parameters<typeof offset>[0] | boolean
+    flip?: Parameters<typeof flip>[0] | boolean
+    shift?: Parameters<typeof shift>[0] | boolean
+    arrow?: Parameters<typeof arrow>[0] | false
+    size?: Parameters<typeof size>[0] | boolean
+    autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean
+    hide?: Parameters<typeof hide>[0] | boolean
+    inline?: Parameters<typeof inline>[0] | boolean
   }
@@ -109,32 +120,16 @@ }
 
-  private floatingUIOptions: {
-    strategy: Strategy
-    placement: Placement
-    offset: OffsetOptions | boolean
-    flip: FlipOptions | boolean
-    shift: ShiftOptions | boolean
-    arrow: ArrowOptions | false
-    size: SizeOptions | boolean
-    autoPlacement: AutoPlacementOptions | boolean
-    hide: HideOptions | boolean
-    inline: InlineOptions | boolean
-  } = {
-      strategy: 'absolute',
-      placement: 'top',
-      offset: 8,
-      flip: {},
-      shift: {},
-      arrow: false,
-      size: false,
-      autoPlacement: false,
-      hide: false,
-      inline: false,
-    }
+  private floatingUIOptions: NonNullable<BubbleMenuPluginProps['options']> = {
+    strategy: 'absolute',
+    placement: 'top',
+    offset: 8,
+    flip: {},
+    shift: {},
+    arrow: false,
+    size: false,
+    autoPlacement: false,
+    hide: false,
+    inline: false,
+  }
 
-  public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({
-    view,
-    state,
-    from,
-    to,
-  }) => {
+  public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ view, state, from, to }) => {
     const { doc, selection } = state
@@ -170,7 +165,11 @@ const { empty } = selection
     if (this.floatingUIOptions.shift) {
-      middlewares.push(shift(typeof this.floatingUIOptions.shift !== 'boolean' ? this.floatingUIOptions.shift : undefined))
+      middlewares.push(
+        shift(typeof this.floatingUIOptions.shift !== 'boolean' ? this.floatingUIOptions.shift : undefined),
+      )
     }
 
     if (this.floatingUIOptions.offset) {
-      middlewares.push(offset(typeof this.floatingUIOptions.offset !== 'boolean' ? this.floatingUIOptions.offset : undefined))
+      middlewares.push(
+        offset(typeof this.floatingUIOptions.offset !== 'boolean' ? this.floatingUIOptions.offset : undefined),
+      )
     }
@@ -187,3 +186,7 @@
     if (this.floatingUIOptions.autoPlacement) {
-      middlewares.push(autoPlacement(typeof this.floatingUIOptions.autoPlacement !== 'boolean' ? this.floatingUIOptions.autoPlacement : undefined))
+      middlewares.push(
+        autoPlacement(
+          typeof this.floatingUIOptions.autoPlacement !== 'boolean' ? this.floatingUIOptions.autoPlacement : undefined,
+        ),
+      )
     }
@@ -196,3 +199,5 @@
     if (this.floatingUIOptions.inline) {
-      middlewares.push(inline(typeof this.floatingUIOptions.inline !== 'boolean' ? this.floatingUIOptions.inline : undefined))
+      middlewares.push(
+        inline(typeof this.floatingUIOptions.inline !== 'boolean' ? this.floatingUIOptions.inline : undefined),
+      )
     }
@@ -272,5 +277,3 @@
 
-    if (
-      event?.relatedTarget === this.editor.view.dom
-    ) {
+    if (event?.relatedTarget === this.editor.view.dom) {
       return
@@ -289,3 +292,7 @@ }
 
-    computePosition(virtualElement, this.element, { placement: this.floatingUIOptions.placement, strategy: this.floatingUIOptions.strategy, middleware: this.middlewares }).then(({ x, y, strategy }) => {
+    computePosition(virtualElement, this.element, {
+      placement: this.floatingUIOptions.placement,
+      strategy: this.floatingUIOptions.strategy,
+      middleware: this.middlewares,
+    }).then(({ x, y, strategy }) => {
       this.element.style.width = 'max-content'
@@ -398,6 +405,5 @@ this.element.style.position = strategy
   return new Plugin({
-    key:
-      typeof options.pluginKey === 'string' ? new PluginKey(options.pluginKey) : options.pluginKey,
+    key: typeof options.pluginKey === 'string' ? new PluginKey(options.pluginKey) : options.pluginKey,
     view: view => new BubbleMenuView({ view, ...options }),
   })
 }

src/bubble-menu.ts

@@ -11,3 +11,3 @@ import { Extension } from '@tiptap/core'
    */
-  element: HTMLElement | null,
+  element: HTMLElement | null
 }
@@ -14,0 +14,0 @@

New alerts

Unstable ownership

Supply chain risk

A new collaborator has begun publishing package versions. Package stability and security risk may be elevated.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78268

increased by1.98%

Dev dependency count

2

decreased by-33.33%

Number of package files

12

increased by9.09%

Lines of code

1044

increased by1.66%

Number of lines in readme file

19

increased by26.67%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@floating-ui/dom@^1.0.0