@tiptap/extension-highlight 3.0.0 → 3.0.1

package/src/highlight.ts

@@ -1,9 +1,4 @@
-import {
-  Mark,
-  markInputRule,
-  markPasteRule,
-  mergeAttributes,
-} from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
 
 export interface HighlightOptions {
   /**
@@ -11,14 +6,14 @@ export interface HighlightOptions {
    * @default false
    * @example true
    */
-  multicolor: boolean,
+  multicolor: boolean
 
   /**
    * HTML attributes to add to the highlight element.
    * @default {}
    * @example { class: 'foo' }
    */
-  HTMLAttributes: Record<string, any>,
+  HTMLAttributes: Record<string, any>
 }
 
 declare module '@tiptap/core' {
@@ -29,18 +24,18 @@ declare module '@tiptap/core' {
        * @param attributes The highlight attributes
        * @example editor.commands.setHighlight({ color: 'red' })
        */
-      setHighlight: (attributes?: { color: string }) => ReturnType,
+      setHighlight: (attributes?: { color: string }) => ReturnType
       /**
        * Toggle a highlight mark
        * @param attributes The highlight attributes
        * @example editor.commands.toggleHighlight({ color: 'red' })
        */
-      toggleHighlight: (attributes?: { color: string }) => ReturnType,
+      toggleHighlight: (attributes?: { color: string }) => ReturnType
       /**
        * Unset a highlight mark
        * @example editor.commands.unsetHighlight()
        */
-      unsetHighlight: () => ReturnType,
+      unsetHighlight: () => ReturnType
     }
   }
 }
@@ -106,15 +101,21 @@ export const Highlight = Mark.create<HighlightOptions>({
 
   addCommands() {
     return {
-      setHighlight: attributes => ({ commands }) => {
-        return commands.setMark(this.name, attributes)
-      },
-      toggleHighlight: attributes => ({ commands }) => {
-        return commands.toggleMark(this.name, attributes)
-      },
-      unsetHighlight: () => ({ commands }) => {
-        return commands.unsetMark(this.name)
-      },
+      setHighlight:
+        attributes =>
+        ({ commands }) => {
+          return commands.setMark(this.name, attributes)
+        },
+      toggleHighlight:
+        attributes =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name, attributes)
+        },
+      unsetHighlight:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name)
+        },
     }
   },
 

package/dist/index.umd.js

@@ -1,101 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-highlight"] = {}, global.core));
-})(this, (function (exports, core) { 'use strict';
-
-  /**
-   * Matches a highlight to a ==highlight== on input.
-   */
-  const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
-  /**
-   * Matches a highlight to a ==highlight== on paste.
-   */
-  const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
-  /**
-   * This extension allows you to highlight text.
-   * @see https://www.tiptap.dev/api/marks/highlight
-   */
-  const Highlight = core.Mark.create({
-      name: 'highlight',
-      addOptions() {
-          return {
-              multicolor: false,
-              HTMLAttributes: {},
-          };
-      },
-      addAttributes() {
-          if (!this.options.multicolor) {
-              return {};
-          }
-          return {
-              color: {
-                  default: null,
-                  parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,
-                  renderHTML: attributes => {
-                      if (!attributes.color) {
-                          return {};
-                      }
-                      return {
-                          'data-color': attributes.color,
-                          style: `background-color: ${attributes.color}; color: inherit`,
-                      };
-                  },
-              },
-          };
-      },
-      parseHTML() {
-          return [
-              {
-                  tag: 'mark',
-              },
-          ];
-      },
-      renderHTML({ HTMLAttributes }) {
-          return ['mark', core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-      },
-      addCommands() {
-          return {
-              setHighlight: attributes => ({ commands }) => {
-                  return commands.setMark(this.name, attributes);
-              },
-              toggleHighlight: attributes => ({ commands }) => {
-                  return commands.toggleMark(this.name, attributes);
-              },
-              unsetHighlight: () => ({ commands }) => {
-                  return commands.unsetMark(this.name);
-              },
-          };
-      },
-      addKeyboardShortcuts() {
-          return {
-              'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),
-          };
-      },
-      addInputRules() {
-          return [
-              core.markInputRule({
-                  find: inputRegex,
-                  type: this.type,
-              }),
-          ];
-      },
-      addPasteRules() {
-          return [
-              core.markPasteRule({
-                  find: pasteRegex,
-                  type: this.type,
-              }),
-          ];
-      },
-  });
-
-  exports.Highlight = Highlight;
-  exports.default = Highlight;
-  exports.inputRegex = inputRegex;
-  exports.pasteRegex = pasteRegex;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.umd.js","sources":["../src/highlight.ts"],"sourcesContent":["import {\n  Mark,\n  markInputRule,\n  markPasteRule,\n  mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n  /**\n   * Allow multiple highlight colors\n   * @default false\n   * @example true\n   */\n  multicolor: boolean,\n\n  /**\n   * HTML attributes to add to the highlight element.\n   * @default {}\n   * @example { class: 'foo' }\n   */\n  HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    highlight: {\n      /**\n       * Set a highlight mark\n       * @param attributes The highlight attributes\n       * @example editor.commands.setHighlight({ color: 'red' })\n       */\n      setHighlight: (attributes?: { color: string }) => ReturnType,\n      /**\n       * Toggle a highlight mark\n       * @param attributes The highlight attributes\n       * @example editor.commands.toggleHighlight({ color: 'red' })\n       */\n      toggleHighlight: (attributes?: { color: string }) => ReturnType,\n      /**\n       * Unset a highlight mark\n       * @example editor.commands.unsetHighlight()\n       */\n      unsetHighlight: () => ReturnType,\n    }\n  }\n}\n\n/**\n * Matches a highlight to a ==highlight== on input.\n */\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\n\n/**\n * Matches a highlight to a ==highlight== on paste.\n */\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\n/**\n * This extension allows you to highlight text.\n * @see https://www.tiptap.dev/api/marks/highlight\n */\nexport const Highlight = Mark.create<HighlightOptions>({\n  name: 'highlight',\n\n  addOptions() {\n    return {\n      multicolor: false,\n      HTMLAttributes: {},\n    }\n  },\n\n  addAttributes() {\n    if (!this.options.multicolor) {\n      return {}\n    }\n\n    return {\n      color: {\n        default: null,\n        parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n        renderHTML: attributes => {\n          if (!attributes.color) {\n            return {}\n          }\n\n          return {\n            'data-color': attributes.color,\n            style: `background-color: ${attributes.color}; color: inherit`,\n          }\n        },\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'mark',\n      },\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n  },\n\n  addCommands() {\n    return {\n      setHighlight: attributes => ({ commands }) => {\n        return commands.setMark(this.name, attributes)\n      },\n      toggleHighlight: attributes => ({ commands }) => {\n        return commands.toggleMark(this.name, attributes)\n      },\n      unsetHighlight: () => ({ commands }) => {\n        return commands.unsetMark(this.name)\n      },\n    }\n  },\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n    }\n  },\n\n  addInputRules() {\n    return [\n      markInputRule({\n        find: inputRegex,\n        type: this.type,\n      }),\n    ]\n  },\n\n  addPasteRules() {\n    return [\n      markPasteRule({\n        find: pasteRegex,\n        type: this.type,\n      }),\n    ]\n  },\n})\n"],"names":["Mark","mergeAttributes","markInputRule","markPasteRule"],"mappings":";;;;;;EA+CA;;EAEG;AACI,QAAM,UAAU,GAAG,+CAA8C;EAExE;;EAEG;AACI,QAAM,UAAU,GAAG,+CAA8C;EAExE;;;EAGG;AACU,QAAA,SAAS,GAAGA,SAAI,CAAC,MAAM,CAAmB;EACrD,IAAA,IAAI,EAAE,WAAW;MAEjB,UAAU,GAAA;UACR,OAAO;EACL,YAAA,UAAU,EAAE,KAAK;EACjB,YAAA,cAAc,EAAE,EAAE;WACnB,CAAA;OACF;MAED,aAAa,GAAA;EACX,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;EAC5B,YAAA,OAAO,EAAE,CAAA;WACV;UAED,OAAO;EACL,YAAA,KAAK,EAAE;EACL,gBAAA,OAAO,EAAE,IAAI;EACb,gBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,eAAe;kBACzF,UAAU,EAAE,UAAU,IAAG;EACvB,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;EACrB,wBAAA,OAAO,EAAE,CAAA;uBACV;sBAED,OAAO;0BACL,YAAY,EAAE,UAAU,CAAC,KAAK;EAC9B,wBAAA,KAAK,EAAE,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAkB,gBAAA,CAAA;uBAC/D,CAAA;mBACF;EACF,aAAA;WACF,CAAA;OACF;MAED,SAAS,GAAA;UACP,OAAO;EACL,YAAA;EACE,gBAAA,GAAG,EAAE,MAAM;EACZ,aAAA;WACF,CAAA;OACF;MAED,UAAU,CAAC,EAAE,cAAc,EAAE,EAAA;EAC3B,QAAA,OAAO,CAAC,MAAM,EAAEC,oBAAe,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC,CAAA;OACjF;MAED,WAAW,GAAA;UACT,OAAO;cACL,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;kBAC3C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;eAC/C;cACD,eAAe,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;kBAC9C,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;eAClD;cACD,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;kBACrC,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;eACrC;WACF,CAAA;OACF;MAED,oBAAoB,GAAA;UAClB,OAAO;cACL,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE;WAC5D,CAAA;OACF;MAED,aAAa,GAAA;UACX,OAAO;EACL,YAAAC,kBAAa,CAAC;EACZ,gBAAA,IAAI,EAAE,UAAU;kBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;eAChB,CAAC;WACH,CAAA;OACF;MAED,aAAa,GAAA;UACX,OAAO;EACL,YAAAC,kBAAa,CAAC;EACZ,gBAAA,IAAI,EAAE,UAAU;kBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;eAChB,CAAC;WACH,CAAA;OACF;EACF,CAAA;;;;;;;;;;;;;"}

package/dist/packages/core/src/CommandManager.d.ts

@@ -1,20 +0,0 @@
-import { EditorState, Transaction } from '@tiptap/pm/state';
-import { Editor } from './Editor.js';
-import { AnyCommands, CanCommands, ChainedCommands, CommandProps, SingleCommands } from './types.js';
-export declare class CommandManager {
-    editor: Editor;
-    rawCommands: AnyCommands;
-    customState?: EditorState;
-    constructor(props: {
-        editor: Editor;
-        state?: EditorState;
-    });
-    get hasCustomState(): boolean;
-    get state(): EditorState;
-    get commands(): SingleCommands;
-    get chain(): () => ChainedCommands;
-    get can(): () => CanCommands;
-    createChain(startTr?: Transaction, shouldDispatch?: boolean): ChainedCommands;
-    createCan(startTr?: Transaction): CanCommands;
-    buildProps(tr: Transaction, shouldDispatch?: boolean): CommandProps;
-}

package/dist/packages/core/src/Editor.d.ts

@@ -1,161 +0,0 @@
-import { MarkType, NodeType, Schema } from '@tiptap/pm/model';
-import { EditorState, Plugin, PluginKey, Transaction } from '@tiptap/pm/state';
-import { EditorView } from '@tiptap/pm/view';
-import { EventEmitter } from './EventEmitter.js';
-import { ExtensionManager } from './ExtensionManager.js';
-import { NodePos } from './NodePos.js';
-import { CanCommands, ChainedCommands, EditorEvents, EditorOptions, JSONContent, SingleCommands, TextSerializer } from './types.js';
-export * as extensions from './extensions/index.js';
-declare global {
-    interface HTMLElement {
-        editor?: Editor;
-    }
-}
-export declare class Editor extends EventEmitter<EditorEvents> {
-    private commandManager;
-    extensionManager: ExtensionManager;
-    private css;
-    schema: Schema;
-    view: EditorView;
-    isFocused: boolean;
-    extensionStorage: Record<string, any>;
-    options: EditorOptions;
-    constructor(options?: Partial<EditorOptions>);
-    /**
-     * Returns the editor storage.
-     */
-    get storage(): Record<string, any>;
-    /**
-     * An object of all registered commands.
-     */
-    get commands(): SingleCommands;
-    /**
-     * Create a command chain to call multiple commands at once.
-     */
-    chain(): ChainedCommands;
-    /**
-     * Check if a command or a command chain can be executed. Without executing it.
-     */
-    can(): CanCommands;
-    /**
-     * Inject CSS styles.
-     */
-    private injectCSS;
-    /**
-     * Update editor options.
-     *
-     * @param options A list of options
-     */
-    setOptions(options?: Partial<EditorOptions>): void;
-    /**
-     * Update editable state of the editor.
-     */
-    setEditable(editable: boolean, emitUpdate?: boolean): void;
-    /**
-     * Returns whether the editor is editable.
-     */
-    get isEditable(): boolean;
-    /**
-     * Returns the editor state.
-     */
-    get state(): EditorState;
-    /**
-     * Register a ProseMirror plugin.
-     *
-     * @param plugin A ProseMirror plugin
-     * @param handlePlugins Control how to merge the plugin into the existing plugins.
-     */
-    registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void;
-    /**
-     * Unregister a ProseMirror plugin.
-     *
-     * @param nameOrPluginKey The plugins name
-     */
-    unregisterPlugin(nameOrPluginKey: string | PluginKey): void;
-    /**
-     * Creates an extension manager.
-     */
-    private createExtensionManager;
-    /**
-     * Creates an command manager.
-     */
-    private createCommandManager;
-    /**
-     * Creates a ProseMirror schema.
-     */
-    private createSchema;
-    /**
-     * Creates a ProseMirror view.
-     */
-    private createView;
-    /**
-     * Creates all node views.
-     */
-    createNodeViews(): void;
-    /**
-     * Prepend class name to element.
-     */
-    prependClass(): void;
-    isCapturingTransaction: boolean;
-    private capturedTransaction;
-    captureTransaction(fn: Function): Transaction | null;
-    /**
-     * The callback over which to send transactions (state updates) produced by the view.
-     *
-     * @param transaction An editor state transaction
-     */
-    private dispatchTransaction;
-    /**
-     * Get attributes of the currently selected node or mark.
-     */
-    getAttributes(nameOrType: string | NodeType | MarkType): Record<string, any>;
-    /**
-     * Returns if the currently selected node or mark is active.
-     *
-     * @param name Name of the node or mark
-     * @param attributes Attributes of the node or mark
-     */
-    isActive(name: string, attributes?: {}): boolean;
-    isActive(attributes: {}): boolean;
-    /**
-     * Get the document as JSON.
-     */
-    getJSON(): JSONContent;
-    /**
-     * Get the document as HTML.
-     */
-    getHTML(): string;
-    /**
-     * Get the document as text.
-     */
-    getText(options?: {
-        blockSeparator?: string;
-        textSerializers?: Record<string, TextSerializer>;
-    }): string;
-    /**
-     * Check if there is no content.
-     */
-    get isEmpty(): boolean;
-    /**
-     * Get the number of characters for the current document.
-     *
-     * @deprecated
-     */
-    getCharacterCount(): number;
-    /**
-     * Destroy the editor.
-     */
-    destroy(): void;
-    /**
-     * Check if the editor is already destroyed.
-     */
-    get isDestroyed(): boolean;
-    $node(selector: string, attributes?: {
-        [key: string]: any;
-    }): NodePos | null;
-    $nodes(selector: string, attributes?: {
-        [key: string]: any;
-    }): NodePos[] | null;
-    $pos(pos: number): NodePos;
-    get $doc(): NodePos;
-}

package/dist/packages/core/src/EventEmitter.d.ts

@@ -1,11 +0,0 @@
-type StringKeyOf<T> = Extract<keyof T, string>;
-type CallbackType<T extends Record<string, any>, EventName extends StringKeyOf<T>> = T[EventName] extends any[] ? T[EventName] : [T[EventName]];
-type CallbackFunction<T extends Record<string, any>, EventName extends StringKeyOf<T>> = (...props: CallbackType<T, EventName>) => any;
-export declare class EventEmitter<T extends Record<string, any>> {
-    private callbacks;
-    on<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this;
-    emit<EventName extends StringKeyOf<T>>(event: EventName, ...args: CallbackType<T, EventName>): this;
-    off<EventName extends StringKeyOf<T>>(event: EventName, fn?: CallbackFunction<T, EventName>): this;
-    removeAllListeners(): void;
-}
-export {};