@tiptap/extension-invisible-characters 2.24.2 → 3.0.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-invisible-characters",
   "description": "invisible characters extension for tiptap",
-  "version": "2.24.2",
+  "version": "3.0.0-beta.10",
   "homepage": "https://tiptap.dev/docs/editor/extensions/functionality/invisiblecharacters",
   "keywords": [
     "tiptap",
@@ -15,26 +15,30 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "main": "dist/index.cjs",
   "module": "dist/index.js",
-  "umd": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/core": "^2.24.2",
-    "@tiptap/extension-text-style": "^2.24.2"
+    "@tiptap/core": "3.0.0-beta.10",
+    "@tiptap/extension-text-style": "3.0.0-beta.10",
+    "@tiptap/pm": "3.0.0-beta.10"
   },
   "peerDependencies": {
-    "@tiptap/core": "^2.7.0",
-    "@tiptap/extension-text-style": "^2.7.0"
+    "@tiptap/core": "3.0.0-beta.10",
+    "@tiptap/extension-text-style": "3.0.0-beta.10",
+    "@tiptap/pm": "3.0.0-beta.10"
   },
   "repository": {
     "type": "git",
@@ -42,7 +46,7 @@
     "directory": "packages/extension-invisible-characters"
   },
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && rollup -c"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
 }

package/src/invisible-characters.ts

@@ -4,30 +4,26 @@ import { InvisibleCharactersPlugin, InvisibleCharactersPluginKey } from './plugi
 import { HardBreakNode } from './plugin/invisible-characters/hardBreak.js'
 import { ParagraphNode } from './plugin/invisible-characters/paragraph.js'
 import { SpaceCharacter } from './plugin/invisible-characters/space.js'
-import { InvisibleCharactersOptions } from './types.js'
+import type { InvisibleCharactersOptions } from './types.js'
 
-export {
-  HardBreakNode,
-  ParagraphNode,
-  SpaceCharacter,
-}
+export { HardBreakNode, ParagraphNode, SpaceCharacter }
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     invisibleCharacters: {
       /**
-      * Show invisible characters
-      */
+       * Show invisible characters
+       */
       showInvisibleCharacters: (show?: boolean) => ReturnType
 
       /**
-      * Hide invisible characters
-      */
+       * Hide invisible characters
+       */
       hideInvisibleCharacters: () => ReturnType
 
       /**
-      * Toggle invisible characters
-      */
+       * Toggle invisible characters
+       */
       toggleInvisibleCharacters: () => ReturnType
     }
   }
@@ -39,20 +35,14 @@ export const InvisibleCharacters = Extension.create<InvisibleCharactersOptions>(
   addOptions() {
     return {
       visible: true,
-      builders: [
-        new SpaceCharacter(),
-        new ParagraphNode(),
-        new HardBreakNode(),
-      ],
+      builders: [new SpaceCharacter(), new ParagraphNode(), new HardBreakNode()],
       injectCSS: true,
       injectNonce: undefined,
     }
   },
 
   addProseMirrorPlugins() {
-    return [
-      InvisibleCharactersPlugin(this.editor.state, this.options),
-    ]
+    return [InvisibleCharactersPlugin(this.editor.state, this.options)]
   },
 
   addStorage() {
@@ -69,29 +59,35 @@ export const InvisibleCharacters = Extension.create<InvisibleCharactersOptions>(
 
   addCommands() {
     return {
-      showInvisibleCharacters: (visibility = true) => ({ dispatch, tr }) => {
-        if (dispatch) {
-          tr.setMeta('setInvisibleCharactersVisible', visibility)
-        }
-
-        return true
-      },
-      hideInvisibleCharacters: () => ({ dispatch, tr }) => {
-        if (dispatch) {
-          tr.setMeta('setInvisibleCharactersVisible', false)
-        }
-
-        return true
-      },
-      toggleInvisibleCharacters: () => ({ dispatch, tr, state }) => {
-        const visibility = !InvisibleCharactersPluginKey.getState(state)?.visible
-
-        if (dispatch) {
-          tr.setMeta('setInvisibleCharactersVisible', visibility)
-        }
-
-        return true
-      },
+      showInvisibleCharacters:
+        (visibility = true) =>
+        ({ dispatch, tr }) => {
+          if (dispatch) {
+            tr.setMeta('setInvisibleCharactersVisible', visibility)
+          }
+
+          return true
+        },
+      hideInvisibleCharacters:
+        () =>
+        ({ dispatch, tr }) => {
+          if (dispatch) {
+            tr.setMeta('setInvisibleCharactersVisible', false)
+          }
+
+          return true
+        },
+      toggleInvisibleCharacters:
+        () =>
+        ({ dispatch, tr, state }) => {
+          const visibility = !InvisibleCharactersPluginKey.getState(state)?.visible
+
+          if (dispatch) {
+            tr.setMeta('setInvisibleCharactersVisible', visibility)
+          }
+
+          return true
+        },
     }
   },
 })

package/src/plugin/InvisibleCharacter.ts

@@ -1,11 +1,11 @@
-import { Node } from '@tiptap/pm/model'
-import { DecorationSet } from '@tiptap/pm/view'
+import type { Node } from '@tiptap/pm/model'
+import type { DecorationSet } from '@tiptap/pm/view'
 
 import { createDecorationWidget } from './utils/create-decoration-widget.js'
 import { textBetween } from './utils/text-between.js'
 
 export interface InvisibleCharacterOptions {
-  type: string;
+  type: string
   predicate: (value: string) => boolean
   priority?: number
   content?: string

package/src/plugin/InvisibleCharactersPlugin.ts

@@ -1,9 +1,8 @@
-import {
-  AllSelection, EditorState, Plugin, PluginKey,
-} from '@tiptap/pm/state'
+import type { EditorState } from '@tiptap/pm/state'
+import { AllSelection, Plugin, PluginKey } from '@tiptap/pm/state'
 import { DecorationSet } from '@tiptap/pm/view'
 
-import { InvisibleCharactersOptions, PluginState } from '../types.js'
+import type { InvisibleCharactersOptions, PluginState } from '../types.js'
 import { stateReducer } from './reducers.js'
 import { style } from './style.js'
 import { createStyleTag } from './utils/create-style-tag.js'
@@ -21,15 +20,17 @@ export const InvisibleCharactersPlugin = (state: EditorState, options: Invisible
     editorState: EditorState,
     decorations: DecorationSet,
   ) => {
-    return options.builders.sort((builderA, builderB) => {
-      if (builderA.priority > builderB.priority) {
-        return 1
-      }
+    return options.builders
+      .sort((builderA, builderB) => {
+        if (builderA.priority > builderB.priority) {
+          return 1
+        }
 
-      return -1
-    }).reduce((newDecos, builder) => {
-      return builder.createDecoration(from, to, editorState.doc, newDecos)
-    }, decorations)
+        return -1
+      })
+      .reduce((newDecos, builder) => {
+        return builder.createDecoration(from, to, editorState.doc, newDecos)
+      }, decorations)
   }
 
   return new Plugin({
@@ -51,9 +52,12 @@ export const InvisibleCharactersPlugin = (state: EditorState, options: Invisible
       apply: (tr, pluginState, _, currentState) => {
         const newPluginState = stateReducer(pluginState, tr.getMeta('setInvisibleCharactersVisible'))
 
-        const decorations = getUpdatedRanges(tr).reduce((nextDecorations, [from, to]) => {
-          return addDecorationsBetweenPositions(from, to, currentState, nextDecorations)
-        }, newPluginState.decorations.map(tr.mapping, tr.doc))
+        const decorations = getUpdatedRanges(tr).reduce(
+          (nextDecorations, [from, to]) => {
+            return addDecorationsBetweenPositions(from, to, currentState, nextDecorations)
+          },
+          newPluginState.decorations.map(tr.mapping, tr.doc),
+        )
 
         return {
           ...newPluginState,
@@ -72,7 +76,6 @@ export const InvisibleCharactersPlugin = (state: EditorState, options: Invisible
         return visible ? decorations : emptyDecorationSet
       },
     },
-
   })
 }
 

package/src/plugin/InvisibleNode.ts

@@ -1,14 +1,14 @@
-import { Node } from '@tiptap/pm/model'
-import { DecorationSet } from '@tiptap/pm/view'
+import type { Node } from '@tiptap/pm/model'
+import type { DecorationSet } from '@tiptap/pm/view'
 
 import { createDecorationWidget } from './utils/create-decoration-widget.js'
 
 export interface InvisibleNodeOptions {
   content?: string
-  position?: (node: Node, pos: number) => number;
+  position?: (node: Node, pos: number) => number
   predicate: (value: Node) => boolean
   priority?: number
-  type: string;
+  type: string
 }
 
 /** Default position for nodes is always at the end of the node */
@@ -19,7 +19,7 @@ export class InvisibleNode {
 
   position: (node: Node, pos: number) => number
 
-  content ?: string
+  content?: string
 
   type: string
 

package/src/plugin/reducers.ts

@@ -1,9 +1,6 @@
-import { PluginState } from '../types.js'
+import type { PluginState } from '../types.js'
 
-export const stateReducer = (
-  state: PluginState,
-  visible: boolean,
-): PluginState => {
+export const stateReducer = (state: PluginState, visible: boolean): PluginState => {
   if (visible === undefined) {
     return state
   }

package/src/plugin/utils/create-style-tag.ts

@@ -1,5 +1,7 @@
 export const createStyleTag = (style: string, nonce?: string): HTMLStyleElement => {
-  const tiptapStyleTag = (<HTMLStyleElement>document.querySelector('style[data-tiptap-extension-invisible-characters-style]'))
+  const tiptapStyleTag = <HTMLStyleElement>(
+    document.querySelector('style[data-tiptap-extension-invisible-characters-style]')
+  )
 
   if (tiptapStyleTag !== null) {
     return tiptapStyleTag

package/src/plugin/utils/get-updated-ranges.ts

@@ -1,16 +1,13 @@
-import { Transaction } from '@tiptap/pm/state'
+import type { Transaction } from '@tiptap/pm/state'
 
-type StepRange = [from: number, to: number];
+type StepRange = [from: number, to: number]
 
 export const getUpdatedRanges = ({ mapping }: Transaction): StepRange[] => {
   const ranges: StepRange[] = []
 
   mapping.maps.forEach((stepMap, i) => {
     stepMap.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
-      ranges.push([
-        mapping.slice(i + 1).map(newStart),
-        mapping.slice(i + 1).map(newEnd),
-      ])
+      ranges.push([mapping.slice(i + 1).map(newStart), mapping.slice(i + 1).map(newEnd)])
     })
   })
 

package/src/plugin/utils/text-between.ts

@@ -1,6 +1,6 @@
-import { Node } from '@tiptap/pm/model'
+import type { Node } from '@tiptap/pm/model'
 
-import { Position } from '../../types.js'
+import type { Position } from '../../types.js'
 
 export const textBetween = (from: number, to: number, doc: Node) => {
   const positions: Position[] = []

package/src/types.ts

@@ -1,21 +1,21 @@
-import { DecorationSet } from '@tiptap/pm/view'
+import type { DecorationSet } from '@tiptap/pm/view'
 
-import { InvisibleCharacter } from './plugin/InvisibleCharacter.js'
-import { InvisibleNode } from './plugin/InvisibleNode.js'
+import type { InvisibleCharacter } from './plugin/InvisibleCharacter.js'
+import type { InvisibleNode } from './plugin/InvisibleNode.js'
 
 export interface InvisibleCharactersOptions {
-  visible: boolean,
-  builders: Array<InvisibleCharacter | InvisibleNode>,
-  injectCSS: boolean,
-  injectNonce: string | undefined,
+  visible: boolean
+  builders: Array<InvisibleCharacter | InvisibleNode>
+  injectCSS: boolean
+  injectNonce: string | undefined
 }
 
 export interface Position {
-  pos: number,
-  text: string,
+  pos: number
+  text: string
 }
 
 export interface PluginState {
-  visible: boolean,
-  decorations: DecorationSet,
+  visible: boolean
+  decorations: DecorationSet
 }

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAE/D,cAAc,2BAA2B,CAAA;AACzC,cAAc,4CAA4C,CAAA;AAC1D,cAAc,4CAA4C,CAAA;AAC1D,cAAc,wCAAwC,CAAA;AACtD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,YAAY,CAAA;AAE1B,eAAe,mBAAmB,CAAA"}