reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/utils/line-height.ts

@@ -0,0 +1,109 @@
+import type { Command } from '@tiptap/core';
+import type { NodeType, Node as ProsemirrorNode } from '@tiptap/pm/model';
+import type { EditorState, Transaction } from '@tiptap/pm/state';
+import { AllSelection, TextSelection } from '@tiptap/pm/state';
+
+import { DEFAULT_LINE_HEIGHT } from '@/constants';
+
+export const ALLOWED_NODE_TYPES = ['paragraph', 'heading', 'list_item', 'todo_item'];
+
+export function isLineHeightActive(state: EditorState, lineHeight: string): boolean {
+  const { selection, doc } = state;
+  const { from, to } = selection;
+
+  let keepLooking = true;
+  let active = false;
+
+  doc.nodesBetween(from, to, (node) => {
+    const nodeType = node.type;
+    const lineHeightValue = node.attrs.lineHeight || DEFAULT_LINE_HEIGHT;
+
+    if (ALLOWED_NODE_TYPES.includes(nodeType.name)) {
+      if (keepLooking && lineHeight === lineHeightValue) {
+        keepLooking = false;
+        active = true;
+
+        return false;
+      }
+      return nodeType.name !== 'list_item' && nodeType.name !== 'todo_item';
+    }
+    return keepLooking;
+  });
+
+  return active;
+}
+
+interface SetLineHeightTask {
+  node: ProsemirrorNode
+  nodeType: NodeType
+  pos: number
+}
+
+export function setTextLineHeight(tr: Transaction, lineHeight: string | null): Transaction {
+  const { selection, doc } = tr;
+
+  if (!selection || !doc) {
+    return tr;
+  }
+
+  if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+    return tr;
+  }
+
+  const { from, to } = selection;
+
+  const tasks: Array<SetLineHeightTask> = [];
+  const lineHeightValue = lineHeight && lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : null;
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    const nodeType = node.type;
+    if (ALLOWED_NODE_TYPES.includes(nodeType.name)) {
+      const lineHeight = node.attrs.lineHeight || null;
+      if (lineHeight !== lineHeightValue) {
+        tasks.push({
+          node,
+          pos,
+          nodeType,
+        });
+      }
+      return nodeType.name !== 'list_item' && nodeType.name !== 'todo_item';
+    }
+    return true;
+  });
+
+  if (tasks.length === 0) {
+    return tr;
+  }
+
+  for (const task of tasks) {
+    const { node, pos, nodeType } = task;
+    let { attrs } = node;
+
+    attrs = {
+      ...attrs,
+      lineHeight: lineHeightValue,
+    };
+
+    tr = tr.setNodeMarkup(pos, nodeType, attrs, node.marks);
+  }
+
+  return tr;
+}
+
+export function createLineHeightCommand(lineHeight: string): Command {
+  return ({ state, dispatch }) => {
+    const { selection } = state;
+    let { tr } = state;
+    tr = tr.setSelection(selection);
+
+    tr = setTextLineHeight(tr, lineHeight);
+
+    if (tr.docChanged) {
+      if (dispatch)
+        dispatch(tr);
+      return true;
+    }
+
+    return false;
+  };
+}

package/src/utils/lru-cache.ts

@@ -0,0 +1,145 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { safeJSONStringify } from './json';
+import { getStorage, setStorage } from './storage';
+
+class Node {
+  public key: string;
+  public value: string | number;
+  public prev: Node | null;
+  public next: Node | null;
+
+  constructor(key: any, value: any) {
+    this.key = key;
+    this.value = value;
+    this.prev = null;
+    this.next = null;
+  }
+}
+
+export class LRUCache {
+  private capacity: number;
+  private usedCapacity: number;
+  private head: Node;
+  private tail: Node;
+  private store: Record<string, Node>;
+
+  constructor(capacity: any) {
+    this.capacity = capacity || 20;
+    this.usedCapacity = 0;
+    this.store = {};
+    this.head = new Node('fakeHeadNode', 'fakeHeadNode');
+    this.tail = new Node('fakeTailNode', 'fakeTailNode');
+
+    this.head.next = this.tail;
+    this.tail.prev = this.head;
+  }
+
+  private removeNode(node: any) {
+    node.prev.next = node.next;
+    node.next.prev = node.prev;
+  }
+
+  private addToHead(node: any) {
+    node.prev = this.head;
+    node.next = this.head.next;
+    // @ts-expect-error
+    this.head.next.prev = node;
+    this.head.next = node;
+  }
+
+  private moveToHead(node: any) {
+    this.removeNode(node);
+    this.addToHead(node);
+  }
+
+  private removeTail() {
+    const node = this.tail.prev;
+    this.removeNode(node);
+    return node;
+  }
+
+  get(key: any) {
+    if (key in this.store) {
+      const node = this.store[key];
+      this.moveToHead(node);
+      return node.value;
+    }
+
+    return -1;
+  }
+
+  put(key: any, value: any) {
+    if (key in this.store) {
+      const node = this.store[key];
+      node.value = value;
+      this.moveToHead(node);
+    } else {
+      const node = new Node(key, value);
+      this.addToHead(node);
+      this.store[key] = node;
+      this.usedCapacity += 1;
+
+      if (this.usedCapacity > this.capacity) {
+        const tailNode = this.removeTail() as any;
+        delete this.store[tailNode.key];
+        this.usedCapacity -= 1;
+      }
+    }
+  }
+
+  keys() {
+    const res = [];
+    let node = this.head as any;
+
+    while (node) {
+      res.push(node.key);
+      node = node.next;
+    }
+
+    return res.slice(1, -1);
+  }
+
+  values() {
+    const res = [];
+    let node = this.head as any;
+
+    while (node) {
+      res.push(node.value);
+      node = node.next;
+    }
+
+    return res.slice(1, -1);
+  }
+
+  toJSON() {
+    return this.store;
+  }
+}
+
+export function createKeysLocalStorageLRUCache(storageKey: any, capacity: any) {
+  const lruCache = new LRUCache(capacity);
+
+  const manager = {
+    syncFromStorage() {
+      const data = getStorage(storageKey) || [];
+      data
+        .slice()
+        .reverse()
+        .forEach((key: any) => {
+          lruCache.put(key, key);
+        });
+    },
+    syncToStorage() {
+      setStorage(storageKey, safeJSONStringify(lruCache.keys()));
+    },
+    put(key: any) {
+      lruCache.put(key, key);
+      this.syncToStorage();
+    },
+    get(key?: string) {
+      return key ? lruCache.get(key) : lruCache.keys();
+    },
+  };
+
+  return manager;
+}

package/src/utils/mitt.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/**
+ * copy to https://github.com/developit/mitt
+ */
+
+export type EventType = string | symbol;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = unknown> = (event: T) => void;
+export type WildcardHandler<T = Record<string, unknown>> = (
+  type: keyof T,
+  event: T[keyof T],
+) => void;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList<T = unknown> = Array<Handler<T>>;
+export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
+  keyof Events | '*',
+  EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
+>;
+
+export interface Emitter<Events extends Record<EventType, unknown>> {
+  all: EventHandlerMap<Events>
+
+  on: (<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>) => void) & ((type: '*', handler: WildcardHandler<Events>) => void)
+
+  off: (<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>) => void) & ((type: '*', handler: WildcardHandler<Events>) => void)
+
+  emit: (<Key extends keyof Events>(type: Key, event: Events[Key]) => void) & (<Key extends keyof Events>(type: undefined extends Events[Key] ? Key : never) => void)
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name mitt
+ * @returns {Mitt}
+ */
+export default function mitt<Events extends Record<EventType, unknown>>(
+  all?: EventHandlerMap<Events>,
+): Emitter<Events> {
+  type GenericEventHandler = Handler<Events[keyof Events]> | WildcardHandler<Events>;
+  all = all || new Map();
+
+  return {
+    /**
+     * A Map of event names to registered handler functions.
+     */
+    all,
+
+    /**
+     * Register an event handler for the given type.
+     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
+     * @param {Function} handler Function to call in response to given event
+     * @memberOf mitt
+     */
+    //@ts-expect-error
+    on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
+      const handlers: Array<GenericEventHandler> | undefined = all.get(type);
+      if (handlers) {
+        handlers.push(handler);
+      } else {
+        all.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+      }
+    },
+
+    /**
+     * Remove an event handler for the given type.
+     * If `handler` is omitted, all handlers of the given type are removed.
+     * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
+     * @param {Function} [handler] Handler function to remove
+     * @memberOf mitt
+     */
+    //@ts-expect-error
+    off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
+      const handlers: Array<GenericEventHandler> | undefined = all.get(type);
+      if (handlers) {
+        if (handler) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+        } else {
+          all.set(type, []);
+        }
+      }
+    },
+
+    /**
+     * Invoke all handlers for the given type.
+     * If present, `'*'` handlers are invoked after type-matched handlers.
+     *
+     * Note: Manually firing '*' handlers is not supported.
+     *
+     * @param {string|symbol} type The event type to invoke
+     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+     * @memberOf mitt
+     */
+    emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
+      let handlers = all.get(type);
+      if (handlers) {
+        [...(handlers as EventHandlerList<Events[keyof Events]>)].map((handler) => {
+          handler(evt!);
+        });
+      }
+
+      handlers = all.get('*');
+      if (handlers) {
+        [...(handlers as WildCardEventHandlerList<Events>)].map((handler) => {
+          handler(type, evt!);
+        });
+      }
+    },
+  };
+}

package/src/utils/node.ts

@@ -0,0 +1,92 @@
+import type { Editor } from '@tiptap/core';
+import type { Node } from '@tiptap/pm/model';
+import type { EditorState } from '@tiptap/pm/state';
+
+export function isTitleNode(node: Node): boolean {
+  return node && node.type.name === 'title';
+}
+
+export function isBulletListNode(node: Node): boolean {
+  return node && node.type.name === 'bulletList';
+}
+
+export function isOrderedListNode(node: Node): boolean {
+  return node && node.type.name === 'orderedList';
+}
+
+export function isTodoListNode(node: Node): boolean {
+  return node && node.type.name === 'taskList';
+}
+
+export function isListNode(node: Node): boolean {
+  return isBulletListNode(node) || isOrderedListNode(node) || isTodoListNode(node);
+}
+
+export function getCurrentNode(state: EditorState): any {
+  const $head = state.selection.$head;
+  let node = null;
+
+  for (let d = $head.depth; d > 0; d--) {
+    node = $head.node(d);
+  }
+
+  return node;
+}
+
+export function getNodeAtPos(state: EditorState, pos: number): any {
+  const $head = state.doc.resolve(pos);
+  let node = null;
+
+  for (let d = $head.depth; d > 0; d--) {
+    node = $head.node(d);
+  }
+
+  return node;
+}
+
+export function isInCustomNode(state: EditorState, nodeName: string): boolean {
+  if (!state.schema.nodes[nodeName])
+    return false;
+
+  const $head = state.selection.$head;
+  for (let d = $head.depth; d > 0; d--) {
+    if ($head.node(d).type === state.schema.nodes[nodeName]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function isInCodeBlock(state: EditorState): boolean {
+  return isInCustomNode(state, 'codeBlock');
+}
+
+export function isInTitle(state: EditorState): boolean {
+  if (state?.selection?.$head?.pos === 0)
+    return true;
+  return isInCustomNode(state, 'title');
+}
+
+export function isInCallout(state: EditorState): boolean {
+  return isInCustomNode(state, 'callout');
+}
+
+export function findNode(editor: Editor, name: string) {
+  const content = editor.getJSON();
+  const queue = [content];
+  const res = [];
+
+  while (queue.length > 0) {
+    const node = queue.shift() as any;
+
+    if (node.type === name) {
+      res.push(node);
+    }
+
+    if (node.content && node.content.length > 0) {
+      queue.push(...node.content);
+    }
+  }
+
+  return res;
+}

package/src/utils/pdf.ts

@@ -0,0 +1,72 @@
+import type { Editor } from '@tiptap/core';
+
+function printHtml(content: string) {
+  const iframe: HTMLIFrameElement = document.createElement('iframe');
+  iframe.setAttribute('style', 'position: absolute; width: 0; height: 0; top: 0; left: 0;');
+  document.body.appendChild(iframe);
+
+  iframe.textContent = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <title>Echo Editor</title>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body class="is-print">
+      <div class="tiptap ProseMirror" translate="no" aria-expanded="false">
+          ${content}
+      </div>
+    </body>
+    </html>
+  `;
+
+  const frameWindow = iframe.contentWindow;
+  const doc: any = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document);
+
+  // load style from CDN to iframe
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = 'https://cdn.jsdelivr.net/npm/reactjs-tiptap-editor@latest/lib/style.css';
+  doc.head.appendChild(link);
+
+  if (doc) {
+    doc.open();
+    doc.write(content);
+    doc.close();
+  }
+
+  if (frameWindow) {
+    iframe.addEventListener('load', function () {
+      try {
+        setTimeout(() => {
+          frameWindow.focus();
+          try {
+            if (!frameWindow.document.execCommand('print', false)) {
+              frameWindow.print();
+            }
+          } catch {
+            frameWindow.print();
+          }
+          frameWindow.close();
+        }, 10);
+      } catch (err) {
+        console.error(err);
+      }
+
+      setTimeout(() => {
+        document.body.removeChild(iframe);
+      }, 100);
+    });
+  }
+}
+
+export function printEditorContent(editor: Editor) {
+  const content = editor.getHTML();
+
+  if (content) {
+    printHtml(content);
+    return true;
+  }
+  return false;
+}

package/src/utils/plateform.ts

@@ -0,0 +1,49 @@
+// We'll cache the result of isMac() and isTouchDevice(), since they shouldn't
+// change during a session. That way repeated calls don't require any logic and
+// are rapid.
+let isMacResult: boolean | undefined;
+let isTouchDeviceResult: boolean | undefined;
+
+/**
+ * Return true if the user is using a Mac (as opposed to Windows, etc.) device.
+ */
+export function isMac(): boolean {
+  if (isMacResult === undefined) {
+    isMacResult = navigator.platform.includes('Mac');
+  }
+  return isMacResult;
+}
+
+/**
+ * 根据 Mac 和非 Mac 平台，返回应该用于键盘快捷键的修饰键的可读版本。用于直观地指示应该按哪个键。
+ */
+export function getShortcutKey(key: string): string {
+  if (`${key}`.toLowerCase() === 'mod') {
+    return isMac() ? '⌘' : 'Ctrl';
+  } else if (`${key}`.toLowerCase() === 'alt') {
+    return isMac() ? '⌥' : 'Alt';
+  } else if (`${key}`.toLowerCase() === 'shift') {
+    return isMac() ? '⇧' : 'Shift';
+  } else {
+    return key;
+  }
+}
+export function getShortcutKeys(keys: string[]): string {
+  return keys.map(getShortcutKey).join(' ');
+}
+
+/** Return true if the user is using a touch-based device. */
+export function isTouchDevice(): boolean {
+  if (isTouchDeviceResult === undefined) {
+    // This technique is taken from
+    // https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
+    // (and https://stackoverflow.com/a/4819886/4543977)
+    isTouchDeviceResult
+      = (window && 'ontouchstart' in window)
+        || navigator.maxTouchPoints > 0
+      // @ts-expect-error: msMaxTouchPoints is IE-specific, so needs to be ignored
+        || navigator.msMaxTouchPoints > 0;
+  }
+
+  return isTouchDeviceResult;
+}

package/src/utils/shortId.ts

@@ -0,0 +1,5 @@
+export function shortId(length = 8) {
+  return Math.random()
+    .toString(36)
+    .substring(2, length + 2);
+}

package/src/utils/storage.ts

@@ -0,0 +1,18 @@
+export function getStorage(key: any, defaultValue = null) {
+  if (typeof window === 'undefined')
+    // eslint-disable-next-line unicorn/error-message
+    throw new Error();
+
+  const value = localStorage.getItem(key);
+  if (!value)
+    return defaultValue;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+export function setStorage(key: any, value: any) {
+  window.localStorage.setItem(key, `${value}`);
+}

package/src/utils/utils.ts

@@ -0,0 +1,71 @@
+import type { Editor } from '@tiptap/core';
+
+import type { NameValueOption } from '@/types';
+
+export function clamp(val: number, min: number, max: number) {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+
+export const isNumber = (value: unknown): value is number => typeof value === 'number';
+
+export const isString = (value: unknown): value is string => typeof value === 'string';
+
+export const isBoolean = (value: unknown): value is boolean => typeof value === 'boolean';
+
+export const isFunction = (value: unknown): boolean => typeof value === 'function';
+
+export function getCssUnitWithDefault(value?: string | number, defaultUnit = 'px') {
+  if (!value)
+    return value;
+
+  const stringValue = isNumber(value) ? String(value) : value;
+
+  const num = Number.parseFloat(stringValue);
+  const unitMatch = stringValue.match(/[%a-z]+$/i);
+  const unit = unitMatch ? unitMatch[0] : defaultUnit;
+
+  return Number.isNaN(num) ? value : num + unit;
+}
+
+/**
+ * Checks if the editor has a specific extension method with the given name.
+ *
+ * @param {Editor} editor - An instance of the editor.
+ * @param {string} name - The name of the extension method.
+ * @returns {boolean} - Returns true if the specified extension method is present, otherwise returns false.
+ */
+export function hasExtension(editor: Editor, name: string): boolean {
+  if (!editor) {
+    return false;
+  }
+
+  // Retrieve the extension manager of the editor, defaulting to an empty array if it doesn't exist
+  const { extensions = [] } = editor?.extensionManager ?? {};
+
+  // Check if the extension method with the specified name is present in the extension manager
+  const find = extensions.find(i => i.name === name);
+
+  // Return false if the extension method with the specified name is not found, otherwise return true
+  if (!find) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Normalizes an array of strings or objects to an array of objects with 'value' and 'name' properties.
+ */
+export function ensureNameValueOptions(arr: (string | NameValueOption)[]) {
+  return arr.map((item) => {
+    if (isString(item)) {
+      return { value: item, name: item };
+    }
+    return item;
+  });
+}

package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const process;