reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/utils/dom-dataset.ts

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+ 
+import { safeJSONParse } from '@/utils/json';
+
+/**
+ * @param json
+ */
+export function jsonToStr(json: Record<string, unknown>) {
+  try {
+    return JSON.stringify(json);
+  } catch {
+    return JSON.stringify({});
+  }
+}
+
+/**
+ * @param str
+ */
+export function strToJSON(str: string) {
+  return safeJSONParse(str);
+}
+
+/**
+ * @param element
+ * @param json
+ */
+export function jsonToDOMDataset(json: Record<string, unknown>) {
+  return Object.keys(json).map((key) => {
+    let value = json[key];
+
+    if (typeof value === 'object') {
+      value = JSON.stringify(value);
+    }
+
+    return {
+      key: `data-${key}`,
+      value: encodeURIComponent(value as string),
+    };
+  });
+}
+
+/**
+ * @param element
+ * @param attribute
+ * @param transformToJSON
+ */
+export function getDatasetAttribute(attribute: string, transformToJSON = false) {
+  return (element: HTMLElement) => {
+    const dataKey = attribute.startsWith('data-') ? attribute : `data-${attribute}`;
+    // @ts-ignore
+    let value = decodeURIComponent(element.getAttribute(dataKey));
+
+    if (value == null || (typeof value === 'string' && value === 'null')) {
+      try {
+        const html = element.outerHTML;
+
+        const texts = html.match(/([\S\s])+?="([\S\s])+?"/g);
+        if (texts && texts.length > 0) {
+          const params = texts
+            .map(str => str.trim())
+            .reduce((accu, item) => {
+              const i = item.indexOf('=');
+              const arr = [item.slice(0, i), item.slice(i + 1).slice(1, -1)];
+              // @ts-expect-error
+              accu[arr[0]] = arr[1];
+              return accu;
+            }, {});
+
+          // @ts-expect-error
+          value = (params[attribute.toLowerCase()] || '').replaceAll('&quot;', '"');
+        }
+      } catch (e: any) {
+        console.error('Error getDatasetAttribute ', e.message, element);
+      }
+    }
+
+    if (transformToJSON) {
+      try {
+        return JSON.parse(value);
+      } catch {
+        return {};
+      }
+    }
+
+    if (value.includes('%') || value.includes('auto')) {
+      return value;
+    }
+
+    const toNumber = Number.parseInt(value);
+    return toNumber !== toNumber ? value : toNumber;
+  };
+}
+
+/**
+ * 将节点属性转换为 dataset
+ * @param node
+ * @returns
+ */
+export function nodeAttrsToDataset(node: Node) {
+  const { attrs } = node as any;
+
+  return Object.keys(attrs).reduce((accu, key) => {
+    const value = attrs[key];
+
+    if (value == null) {
+      return accu;
+    }
+
+    let encodeValue = '';
+
+    if (typeof value === 'object') {
+      encodeValue = jsonToStr(value);
+    } else {
+      encodeValue = value;
+    }
+
+    accu[key] = encodeValue;
+
+    return accu;
+  }, Object.create(null));
+}

package/src/utils/download.ts

@@ -0,0 +1,17 @@
+const isBrowser = typeof window !== 'undefined';
+
+export function downloadFromBlob(blob: Blob, filename: string) {
+  if (isBrowser) {
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    window.URL.revokeObjectURL(url);
+    return Promise.resolve();
+  }
+
+  console.error('Download is not supported in Node.js');
+
+  return Promise.resolve();
+}

package/src/utils/dynamicCSS.ts

@@ -0,0 +1,192 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const APPEND_ORDER = 'data-rc-order';
+const APPEND_PRIORITY = 'data-rc-priority';
+const MARK_KEY = 'rc-util-key';
+
+const containerCache = new Map<ContainerType, Node & ParentNode>();
+
+export type ContainerType = Element | ShadowRoot;
+export type Prepend = boolean | 'queue';
+export type AppendType = 'prependQueue' | 'append' | 'prepend';
+
+export default function contains(root: Node | null | undefined, n?: Node) {
+  if (!root) {
+    return false;
+  }
+
+  // Use native if support
+  if (root.contains) {
+    return root.contains(n as any);
+  }
+
+  // `document.contains` not support with IE11
+  let node = n;
+  while (node) {
+    if (node === root) {
+      return true;
+    }
+    // @ts-ignore
+    node = node.parentNode;
+  }
+
+  return false;
+}
+
+interface Options {
+  attachTo?: ContainerType
+  csp?: { nonce?: string }
+  prepend?: Prepend
+  /**
+   * Config the `priority` of `prependQueue`. Default is `0`.
+   * It's useful if you need to insert style before other style.
+   */
+  priority?: number
+  mark?: string
+}
+
+function getMark({ mark }: Options = {}) {
+  if (mark) {
+    return mark.startsWith('data-') ? mark : `data-${mark}`;
+  }
+  return MARK_KEY;
+}
+
+function getContainer(option: Options) {
+  if (option.attachTo) {
+    return option.attachTo;
+  }
+
+  const head = document.querySelector('head');
+  return head || document.body;
+}
+
+function getOrder(prepend?: Prepend): AppendType {
+  if (prepend === 'queue') {
+    return 'prependQueue';
+  }
+
+  return prepend ? 'prepend' : 'append';
+}
+
+/**
+ * Find style which inject by rc-util
+ */
+function findStyles(container: ContainerType) {
+  return [...(containerCache.get(container) || container).children].filter(
+    node => node.tagName === 'STYLE',
+  ) as HTMLStyleElement[];
+}
+
+export function injectCSS(css: string, option: Options = {}) {
+  const { csp, prepend, priority = 0 } = option;
+  const mergedOrder = getOrder(prepend);
+  const isPrependQueue = mergedOrder === 'prependQueue';
+
+  const styleNode = document.createElement('style');
+  styleNode.setAttribute(APPEND_ORDER, mergedOrder);
+
+  if (isPrependQueue && priority) {
+    styleNode.setAttribute(APPEND_PRIORITY, `${priority}`);
+  }
+
+  if (csp?.nonce) {
+    styleNode.nonce = csp?.nonce;
+  }
+  styleNode.innerHTML = css;
+
+  const container = getContainer(option);
+  const { firstChild } = container as any;
+
+  if (prepend) {
+    // If is queue `prepend`, it will prepend first style and then append rest style
+    if (isPrependQueue) {
+      const existStyle = findStyles(container).filter((node) => {
+        // Ignore style which not injected by rc-util with prepend
+        // @ts-ignore
+        if (!['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))) {
+          return false;
+        }
+
+        // Ignore style which priority less then new style
+        const nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
+        return priority >= nodePriority;
+      });
+
+      if (existStyle.length > 0) {
+        // @ts-ignore
+        container.insertBefore(styleNode, existStyle.at(-1).nextSibling);
+
+        return styleNode;
+      }
+    }
+
+    // Use `insertBefore` as `prepend`
+    firstChild.before(styleNode);
+  } else {
+    container.append(styleNode);
+  }
+
+  return styleNode;
+}
+
+function findExistNode(key: string, option: Options = {}) {
+  const container = getContainer(option);
+
+  return findStyles(container).find(node => node.getAttribute(getMark(option)) === key);
+}
+
+export function removeCSS(key: string, option: Options = {}) {
+  const existNode = findExistNode(key, option);
+  if (existNode) {
+    // const container = getContainer(option);
+    existNode.remove();
+  }
+}
+
+/**
+ * qiankun will inject `appendChild` to insert into other
+ */
+function syncRealContainer(container: ContainerType, option: Options) {
+  const cachedRealContainer = containerCache.get(container);
+
+  // Find real container when not cached or cached container removed
+  if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
+    const placeholderStyle = injectCSS('', option);
+    const { parentNode } = placeholderStyle;
+    // @ts-ignore
+    containerCache.set(container, parentNode);
+    placeholderStyle.remove();
+  }
+}
+
+/**
+ * manually clear container cache to avoid global cache in unit testes
+ */
+export function clearContainerCache() {
+  containerCache.clear();
+}
+
+export function updateCSS(css: string, key: string, option: Options = {}) {
+  const container = getContainer(option);
+
+  // Sync real parent
+  syncRealContainer(container, option);
+
+  const existNode = findExistNode(key, option);
+
+  if (existNode) {
+    if (option.csp?.nonce && existNode.nonce !== option.csp?.nonce) {
+      existNode.nonce = option.csp?.nonce;
+    }
+
+    if (existNode.innerHTML !== css) {
+      existNode.innerHTML = css;
+    }
+
+    return existNode;
+  }
+
+  const newNode = injectCSS(css, option);
+  newNode.setAttribute(getMark(option), key);
+  return newNode;
+}

package/src/utils/editor-container-size.ts

@@ -0,0 +1,28 @@
+import type { Editor } from '@tiptap/core';
+
+const cache = new Map();
+
+export function getEditorContainerDOMSize(editor: Editor): { width: number } {
+  const targetNode = editor.options.element as HTMLElement;
+
+  if (!cache.has('width')) {
+    cache.set('width', targetNode.clientWidth);
+  }
+
+  if (cache.has('width') && cache.get('width') <= 0) {
+    cache.set('width', targetNode.clientWidth);
+  }
+
+  const config = { attributes: true, childList: true, subtree: true };
+  const callback = function () {
+    cache.set('width', targetNode.clientWidth);
+  };
+  const observer = new MutationObserver(callback);
+  observer.observe(targetNode, config);
+
+  editor.on('destroy', () => {
+    observer.disconnect();
+  });
+
+  return { width: cache.get('width') };
+}

package/src/utils/file.ts

@@ -0,0 +1,112 @@
+/* eslint-disable unicorn/prefer-add-event-listener */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/**
+ * 获取文件名
+ *
+ * @example
+ *   > extractFilename('https://gitlab.com/images/logo-full.png')
+ *   < 'logo-full'
+ *
+ * @param {string} src The URL to extract filename from
+ * @returns {string}
+ */
+export function extractFilename(src: any) {
+  return src.replace(/^.*\/|\..+$/g, '');
+}
+
+/**
+ * extractFileExtension
+ * @param {string} fileName The file name to extract extension from
+ * @returns  {string}
+ */
+export function extractFileExtension(fileName: any) {
+  return fileName.split('.').pop();
+}
+
+export function normalizeFileSize(size: any) {
+  if (size < 1024) {
+    return `${size} Byte`;
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(2)} KB`;
+  }
+  return `${(size / 1024 / 1024).toFixed(2)} MB`;
+}
+
+export type FileType = 'image' | 'audio' | 'video' | 'pdf' | 'word' | 'excel' | 'ppt' | 'file';
+
+export function normalizeFileType(fileType: any): FileType {
+  if (!fileType)
+    return 'file';
+
+  if (fileType === 'application/pdf')
+    return 'pdf';
+
+  if (fileType.startsWith('application/') && ['.document', 'word'].some(type => fileType.includes(type)))
+    return 'word';
+
+  if (fileType.startsWith('application/') && ['presentation'].some(type => fileType.includes(type)))
+    return 'excel';
+
+  if (fileType.startsWith('application/') && ['sheet'].some(type => fileType.includes(type)))
+    return 'ppt';
+
+  if (fileType.startsWith('image')) {
+    return 'image';
+  }
+
+  if (fileType.startsWith('audio')) {
+    return 'audio';
+  }
+
+  if (fileType.startsWith('video')) {
+    return 'video';
+  }
+
+  return 'file';
+}
+
+export function readImageAsBase64(file: File): Promise<{ alt: string, src: string }> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      'load',
+      () => {
+        resolve({
+          alt: file.name,
+          src: reader.result as string,
+        });
+      },
+      false,
+    );
+    reader.readAsDataURL(file);
+  });
+}
+
+export function getImageWidthHeight(url: string): Promise<{ width: number | string, height: number | string }> {
+  return new Promise((resolve) => {
+    const img = document.createElement('img');
+    img.addEventListener('load', () => {
+      resolve({ width: img.width, height: img.height });
+    });
+    img.onerror = () => {
+      resolve({ width: 'auto', height: 'auto' });
+    };
+    img.src = url;
+  });
+}
+
+export const FILE_CHUNK_SIZE = 2 * 1024 * 1024;
+
+export function dataURLtoFile(dataurl: string, filename: string) {
+  const arr = dataurl.split(',');
+  // @ts-expect-error
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[arr.length - 1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+}

package/src/utils/getRenderContainer.ts

@@ -0,0 +1,41 @@
+import type { Editor } from '@tiptap/react';
+
+export function getRenderContainer(editor: Editor, nodeType: string) {
+  const {
+    view,
+    state: {
+      selection: { from },
+    },
+  } = editor;
+
+  const elements = document.querySelectorAll('.has-focus');
+  const elementCount = elements.length;
+  const innermostNode = elements[elementCount - 1];
+  const element = innermostNode as any;
+
+  if (
+    (element && element.dataset.type && element.dataset.type === nodeType)
+    || (element && element.classList && element.classList.contains(nodeType))
+  ) {
+    return element;
+  }
+
+  const node = view.domAtPos(from).node as HTMLElement;
+  let container: any = node;
+
+  if (!container.tagName) {
+    container = node.parentElement;
+  }
+
+  while (
+    container
+    && !(container.dataset.type && container.dataset.type === nodeType)
+    && !container.classList.contains(nodeType)
+  ) {
+    container = container.parentElement;
+  }
+
+  return container;
+}
+
+export default getRenderContainer;

package/src/utils/indent.ts

@@ -0,0 +1,99 @@
+/* eslint-disable no-restricted-syntax */
+import type { Command, Editor } from '@tiptap/core';
+import { isList } from '@tiptap/core';
+import type { Transaction } from '@tiptap/pm/state';
+import { AllSelection, TextSelection } from '@tiptap/pm/state';
+
+export const enum IndentProps {
+  max = 7,
+  min = 0,
+
+  more = 1,
+  less = -1,
+}
+
+export function clamp(val: number, min: number, max: number): number {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+function updateIndentLevel(
+  tr: Transaction,
+  delta: number,
+  types: string[],
+  editor: Editor,
+): Transaction {
+  const { doc, selection } = tr;
+
+  if (!doc || !selection) {
+    return tr;
+  }
+
+  if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+    return tr;
+  }
+
+  const { from, to } = selection;
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    const nodeType = node.type;
+
+    if (types.includes(nodeType.name)) {
+      tr = setNodeIndentMarkup(tr, pos, delta);
+      return false;
+    } else if (isList(node.type.name, editor.extensionManager.extensions)) {
+      return false;
+    }
+    return true;
+  });
+
+  return tr;
+}
+
+export function setNodeIndentMarkup(tr: Transaction, pos: number, delta: number): Transaction {
+  if (!tr.doc) {
+    return tr;
+  }
+
+  const node = tr.doc.nodeAt(pos);
+  if (!node) {
+    return tr;
+  }
+
+  const minIndent = IndentProps.min;
+  const maxIndent = IndentProps.max;
+
+  const indent = clamp((node.attrs.indent || 0) + delta, minIndent, maxIndent);
+
+  if (indent === node.attrs.indent) {
+    return tr;
+  }
+
+  const nodeAttrs = {
+    ...node.attrs,
+    indent,
+  };
+
+  return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
+}
+
+export function createIndentCommand({ delta, types }: { delta: number, types: string[] }): Command {
+  return ({ state, dispatch, editor }) => {
+    const { selection } = state;
+    let { tr } = state;
+    tr = tr.setSelection(selection);
+    tr = updateIndentLevel(tr, delta, types, editor);
+
+    if (tr.docChanged) {
+      if (dispatch)
+        dispatch(tr);
+      return true;
+    }
+
+    return false;
+  };
+}

package/src/utils/is-mobile.ts

@@ -0,0 +1,57 @@
+interface HttpRequestHeadersInterfaceMock {
+  [id: string]: string | string[] | undefined
+}
+
+interface HttpRequestInterfaceMock {
+  headers: HttpRequestHeadersInterfaceMock
+  [id: string]: any
+}
+
+export interface IsMobileOptions {
+  ua?: string | HttpRequestInterfaceMock
+  tablet?: boolean
+  featureDetect?: boolean
+}
+
+const mobileRE
+  = /(android|bb\d+|meego).+mobile|armv7l|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series[46]0|samsungbrowser.*mobile|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;
+const notMobileRE = /CrOS/;
+const tabletRE = /android|ipad|playbook|silk/i;
+
+/**
+ * Determines if the current device is a mobile or tablet device.
+ * @param opts - Options for the detection.
+ * @returns `true` if the device is mobile or tablet, `false` otherwise.
+ */
+export function isMobile(opts: IsMobileOptions = {}): boolean {
+  let ua = opts.ua || (typeof navigator !== 'undefined' && navigator.userAgent);
+
+  if (ua && typeof ua === 'object' && ua.headers && typeof ua.headers['user-agent'] === 'string') {
+    ua = ua.headers['user-agent'];
+  }
+
+  if (typeof ua !== 'string') {
+    return false;
+  }
+
+  if (mobileRE.test(ua) && !notMobileRE.test(ua)) {
+    return true;
+  }
+
+  if (opts.tablet && tabletRE.test(ua)) {
+    return true;
+  }
+
+  if (
+    opts.tablet
+    && opts.featureDetect
+    && navigator
+    && navigator.maxTouchPoints > 1
+    && ua.includes('Macintosh')
+    && ua.includes('Safari')
+  ) {
+    return true;
+  }
+
+  return false;
+}

package/src/utils/json.ts

@@ -0,0 +1,18 @@
+export function safeJSONParse(str: any, defaultValue = {}) {
+  if (typeof str === 'object')
+    return str;
+
+  try {
+    return JSON.parse(str);
+  } catch {
+    return defaultValue;
+  }
+}
+
+export function safeJSONStringify(obj: any, defaultValue = '{}') {
+  try {
+    return JSON.stringify(obj);
+  } catch {
+    return defaultValue;
+  }
+}