reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/types.ts

@@ -1,271 +0,0 @@
-import type { Editor as CoreEditor, Extension, JSONContent } from '@tiptap/core';
-import type { Editor } from '@tiptap/react';
-
-import { type ActionButtonProps } from './components';
-import { EditorView } from '@tiptap/pm/view';
-import { EditorState } from '@tiptap/pm/state';
-
-export type { Editor, JSONContent } from '@tiptap/core';
-
-/**
- * Represents the onChange event for EchoEditor.
- */
-export interface EchoEditorOnChange {
-  /** Editor object */
-  editor: CoreEditor
-  /** Output content, can be a string or JSON content */
-  output: string | JSONContent
-}
-
-/**
- * Represents the keys for different extensions.
- */
-export type ExtensionNameKeys =
-  | 'bold'
-  | 'italic'
-  | 'underline'
-  | 'strike'
-  | 'color'
-  | 'highlight'
-  | 'heading'
-  | 'textAlign'
-  | 'bulletList'
-  | 'orderedList'
-  | 'taskList'
-  | 'indent'
-  | 'link'
-  | 'image'
-  | 'video'
-  | 'table'
-  | 'blockquote'
-  | 'horizontalRule'
-  | 'code'
-  | 'codeBlock'
-  | 'clear'
-  | 'history';
-
-/**
- * Represents the general options for Tiptap extensions.
- */
-export interface GeneralOptions<T> {
-  /** Enabled divider */
-  divider: boolean
-  /** Enabled spacer */
-  spacer: boolean
-  /** Button view function */
-  button: ButtonView<T>
-  /** Show on Toolbar */
-  toolbar?: boolean
-}
-
-/**
- * Represents the props for the ButtonView component.
- */
-export interface ButtonViewReturnComponentProps {
-  /** Method triggered when action is performed */
-  action?: (value?: any) => void
-  /** Whether it is in the active state */
-  isActive?: () => boolean
-  /** Button icon */
-  icon?: any
-  /** Text displayed on hover */
-  tooltip?: string
-  [x: string]: any
-}
-
-/**
- * Represents the slots for the ButtonView component.
- */
-export interface ButtonViewReturnComponentSlots {
-  /** Dialog slot */
-  dialog: () => any
-  [x: string]: () => any
-}
-
-/**
- * Represents the return value for the ButtonView component.
- */
-export interface ButtonViewReturn {
-  /** Component */
-  component: unknown
-  /** Component props */
-  componentProps: ButtonViewReturnComponentProps
-  /** Component slots */
-  componentSlots?: ButtonViewReturnComponentSlots
-}
-
-/**
- * Represents the parameters for the ButtonView function.
- */
-export interface ButtonViewParams<T = any> {
-  /** Editor object */
-  editor: Editor
-  /** Extension object */
-  extension: Extension<T>
-  /** Translation function */
-  t: (path: string) => string
-}
-
-/**
- * Represents the ButtonView function.
- */
-export type ButtonView<T = any> = (options: ButtonViewParams<T>) => ButtonViewReturn | ButtonViewReturn[];
-
-/**
- * Represents the BubbleMenuRenderProps.
- */
-export interface BubbleMenuRenderProps {
-  editor: Editor
-  disabled: boolean
-  bubbleMenu: BubbleMenuProps
-}
-
-export interface BubbleMenuConfig {
-  /**
-     * @description Column menu hidden
-     * @default false
-     */
-  hidden?: boolean
-  /**
-   * custom menu actions
-   */
-  actions?: ActionButtonProps[]
-  items?: string[]
-  
-}
-
-/**
- * Represents the BubbleMenuProps.
- */
-export interface BubbleMenuProps {
-  columnConfig?: {
-    /**
-     * @description Column menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  tableConfig?: BubbleMenuConfig
-  floatingMenuConfig?: {
-    /**
-     * @description Floating menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  linkConfig?: {
-    /**
-     * @description Link menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  textConfig?: {
-    /**
-     * @description Text menu hidden
-     * @default false
-     */
-    hidden?: boolean
-    items?: string[]
-  }
-  imageConfig?: {
-    /**
-     * @description Image menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  imageGifConfig?: {
-    /**
-     * @description Image menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  videoConfig?: {
-    /**
-     * @description Video menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  katexConfig?: {
-    /**
-     * @description katex menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  excalidrawConfig?: {
-    /**
-     * @description excalidraw menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  iframeConfig?: {
-    /**
-     * @description iframe menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  mermaidConfig?: {
-    /**
-     * @description mermaid menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  twitterConfig?: {
-    /**
-     * @description twitter menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  drawerConfig?: {
-    /**
-     * @description twitter menu hidden
-     * @default false
-     */
-    hidden?: boolean
-  }
-  render?: (props: BubbleMenuRenderProps, dom: React.ReactNode) => React.ReactNode
-}
-
-/**
- * Represents the ToolbarItemProps.
- */
-export interface ToolbarItemProps {
-  button: {
-    component: React.ComponentType<any>
-    componentProps: Record<string, any>
-  }
-  divider: boolean
-  spacer: boolean
-  type: string
-  name: string
-}
-
-export interface ToolbarRenderProps {
-  editor: Editor
-  disabled: boolean
-}
-export interface ToolbarProps {
-  render?: (props: ToolbarRenderProps, toolbarItems: ToolbarItemProps[], dom: any[], containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode
-}
-
-export interface NameValueOption<T = string> {
-  name: string
-  value: T
-}
-
-export interface ShouldShowProps {
-  editor: Editor;
-  view: EditorView;
-  state?: EditorState;
-  oldState?: EditorState;
-  from?: number;
-  to?: number;
-}

package/src/utils/_event.ts

@@ -1,55 +0,0 @@
-import mitt from 'reactjs-tiptap-editor-pro/utils/mitt';
-
-let event: any;
-function getEventEmitter() {
-  try {
-    if (!event) {
-      event = mitt();
-    }
-    return event;
-  } catch {
-    throw new Error('Error EventEmitter');
-  }
-}
-
-export const OPEN_COUNT_SETTING_MODAL = 'OPEN_COUNT_SETTING_MODAL';
-export const OPEN_LINK_SETTING_MODAL = 'OPEN_LINK_SETTING_MODAL';
-export const OPEN_FLOW_SETTING_MODAL = 'OPEN_FLOW_SETTING_MODAL';
-export const OPEN_MIND_SETTING_MODAL = 'OPEN_MIND_SETTING_MODAL';
-export const OPEN_EXCALIDRAW_SETTING_MODAL = 'OPEN_EXCALIDRAW_SETTING_MODAL';
-export const OPEN_DRAWER_SETTING_MODAL = 'OPEN_DRAWER_SETTING_MODAL';
-
-export function subject(eventName: any, handler: any) {
-  const event = getEventEmitter();
-  event.on(eventName, handler);
-}
-
-export function cancelSubject(eventName: any, handler: any) {
-  const event = getEventEmitter();
-  event.off(eventName, handler);
-}
-
-export function triggerOpenCountSettingModal(data: any) {
-  const event = getEventEmitter();
-  event.emit(OPEN_COUNT_SETTING_MODAL, data);
-}
-
-export function triggerOpenLinkSettingModal(data: any) {
-  const event = getEventEmitter();
-  event.emit(OPEN_LINK_SETTING_MODAL, data);
-}
-
-export function triggerOpenFlowSettingModal(data: any) {
-  const event = getEventEmitter();
-  event.emit(OPEN_FLOW_SETTING_MODAL, data);
-}
-
-export function triggerOpenMindSettingModal(data: any) {
-  const event = getEventEmitter();
-  event.emit(OPEN_MIND_SETTING_MODAL, data);
-}
-
-export function triggerOpenExcalidrawSettingModal(data: any) {
-  const event = getEventEmitter();
-  event.emit(OPEN_EXCALIDRAW_SETTING_MODAL, data);
-}

package/src/utils/color.ts

@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const colors = [
-  '#47A1FF',
-  '#59CB74',
-  '#FFB952',
-  '#FC6980',
-  '#6367EC',
-  '#DA65CC',
-  '#FBD54A',
-  '#ADDF84',
-  '#6CD3FF',
-  '#659AEC',
-  '#9F8CF1',
-  '#ED8CCE',
-  '#A2E5FF',
-  '#4DCCCB',
-  '#F79452',
-  '#84E0BE',
-  '#5982F6',
-  '#E37474',
-  '#3FDDC7',
-  '#9861E5',
-];
-
-const total = colors.length;
-export const getRandomColor = () => colors[Math.trunc(Math.random() * total)];
-
-/**
- * @param hexCode
- * @param opacity
- * @returns
- */
-export function convertColorToRGBA(hexCode: string, opacity = 1) {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-
-  if (hexCode.startsWith('rgb')) {
-    // @ts-expect-error
-    const rgb = hexCode
-      .replace(/\s/g, '')
-      .match(/rgb\((.*)\)$/)[1]
-      .split(',');
-
-    r = +rgb[0];
-    g = +rgb[1];
-    b = +rgb[2];
-  } else if (hexCode.startsWith('#')) {
-    let hex = hexCode.replace('#', '');
-
-    if (hex.length === 3) {
-      hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
-    }
-
-    r = Number.parseInt(hex.substring(0, 2), 16);
-    g = Number.parseInt(hex.substring(2, 4), 16);
-    b = Number.parseInt(hex.substring(4, 6), 16);
-  } else {
-    return hexCode;
-  }
-
-  if (opacity > 1 && opacity <= 100) {
-    opacity = opacity / 100;
-  }
-
-  return `rgba(${r},${g},${b},${opacity})`;
-}

package/src/utils/columns.ts

@@ -1,142 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { findParentNode } from '@tiptap/core';
-import { Node } from '@tiptap/pm/model';
-import { type EditorState, TextSelection } from '@tiptap/pm/state';
-
-import { Column, MultiColumn } from 'reactjs-tiptap-editor-pro/extensions/MultiColumn';
-
-export function createColumn(colType: any, index: any, colContent = null) {
-  if (colContent) {
-    return colType.createChecked({ index }, colContent);
-  }
-
-  return colType.createAndFill({ index });
-}
-
-export function getColumnsNodeTypes(schema: any) {
-  if (schema.cached.columnsNodeTypes) {
-    return schema.cached.columnsNodeTypes;
-  }
-
-  const roles = {
-    columns: schema.nodes.columns,
-    column: schema.nodes.column,
-  };
-
-  schema.cached.columnsNodeTypes = roles;
-
-  return roles;
-}
-
-export function createColumns(schema: any, colsCount: any, colContent = null) {
-  const types = getColumnsNodeTypes(schema);
-  const cols = [];
-
-  for (let index = 0; index < colsCount; index += 1) {
-    const col = createColumn(types.column, index, colContent);
-
-    if (col) {
-      // @ts-ignore
-      cols.push(col);
-    }
-  }
-
-  return types.columns.createChecked({ cols: colsCount }, cols);
-}
-
-export function addOrDeleteCol({
-  state,
-  dispatch,
-  type,
-}: {
-  state: EditorState
-  dispatch: any
-  type: 'addBefore' | 'addAfter' | 'delete'
-}) {
-  const maybeColumns = findParentNode((node: Node) => node.type.name === MultiColumn.name)(state.selection);
-  const maybeColumn = findParentNode((node: Node) => node.type.name === Column.name)(state.selection);
-
-  if (dispatch && maybeColumns && maybeColumn) {
-    const cols = maybeColumns.node;
-    const colIndex = maybeColumn.node.attrs.index;
-    const colsJSON = cols.toJSON();
-
-    let nextIndex = colIndex;
-
-    if (type === 'delete') {
-      nextIndex = colIndex - 1;
-      colsJSON.content.splice(colIndex, 1);
-    } else {
-      nextIndex = type === 'addBefore' ? colIndex : colIndex + 1;
-      colsJSON.content.splice(nextIndex, 0, {
-        type: 'column',
-        attrs: {
-          index: colIndex,
-        },
-        content: [
-          {
-            type: 'paragraph',
-          },
-        ],
-      });
-    }
-
-    colsJSON.attrs.cols = colsJSON.content.length;
-
-    colsJSON.content.forEach((colJSON: any, index: any) => {
-      colJSON.attrs.index = index;
-    });
-
-    const nextCols = Node.fromJSON(state.schema, colsJSON);
-
-    let nextSelectPos = maybeColumns.pos;
-    nextCols.content.forEach((col, pos, index) => {
-      if (index < nextIndex) {
-        nextSelectPos += col.nodeSize;
-      }
-    });
-
-    const tr = state.tr.setTime(Date.now());
-
-    tr.replaceWith(maybeColumns.pos, maybeColumns.pos + maybeColumns.node.nodeSize, nextCols).setSelection(
-      TextSelection.near(tr.doc.resolve(nextSelectPos)),
-    );
-
-    dispatch(tr);
-  }
-
-  return true;
-}
-
-export function gotoCol({ state, dispatch, type }: { state: EditorState, dispatch: any, type: 'before' | 'after' }) {
-  const maybeColumns = findParentNode((node: Node) => node.type.name === MultiColumn.name)(state.selection);
-  const maybeColumn = findParentNode((node: Node) => node.type.name === Column.name)(state.selection);
-
-  if (dispatch && maybeColumns && maybeColumn) {
-    const cols = maybeColumns.node;
-    const colIndex = maybeColumn.node.attrs.index;
-
-    let nextIndex = 0;
-
-    if (type === 'before') {
-      nextIndex = (colIndex - 1 + cols.attrs.cols) % cols.attrs.cols;
-    } else {
-      nextIndex = (colIndex + 1) % cols.attrs.cols;
-    }
-
-    let nextSelectPos = maybeColumns.pos;
-    cols.content.forEach((col, pos, index) => {
-      if (index < nextIndex) {
-        nextSelectPos += col.nodeSize;
-      }
-    });
-
-    const tr = state.tr.setTime(Date.now());
-
-    tr.setSelection(TextSelection.near(tr.doc.resolve(nextSelectPos)));
-    dispatch(tr);
-    return true;
-  }
-
-  return false;
-}

package/src/utils/customEvents/customEvents.ts

@@ -1,18 +0,0 @@
-import { type EventValues } from 'reactjs-tiptap-editor-pro/utils/customEvents/events.constant';
-
-export function listenEvent (eventName: EventValues, callback: any) {
-  window.addEventListener(eventName, callback);
-
-  return () => {
-    window.removeEventListener(eventName, callback);
-  };
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function dispatchEvent (eventName: EventValues, detail?: any) {
-  window.dispatchEvent(
-    new CustomEvent(eventName, {
-      detail,
-    }),
-  );
-}

package/src/utils/customEvents/events.constant.ts

@@ -1,11 +0,0 @@
-export const EVENTS = {
-  UPLOAD_IMAGE: (id: any) => `UPLOAD_IMAGE-${id}`,
-  UPLOAD_VIDEO: (id: string) => `UPLOAD_VIDEO-${id}`,
-  EDIT: (id: string) => `EDIT-${id}`,
-  UPDATE_THEME: (id: string) => `UPDATE_THEME-${id}`,
-
-  SEARCH_REPLCE:  'SEARCH_REPLACE',
-} as const;
-
-// type EventsType = typeof EVENTS;
-export type EventValues = any;

package/src/utils/delete-node.ts

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import type { Editor } from '@tiptap/core';
-
-export function deleteNode(nodeType: string, editor: Editor) {
-  const { state } = editor;
-  const $pos = state.selection.$anchor;
-  let done = false;
-
-  if ($pos.depth) {
-    for (let d = $pos.depth; d > 0; d--) {
-      const node = $pos.node(d);
-      if (node.type.name === nodeType) {
-        // @ts-ignore
-        if (editor.dispatchTransaction)
-          // @ts-ignore
-          editor.dispatchTransaction(state.tr.delete($pos.before(d), $pos.after(d)).scrollIntoView());
-        done = true;
-      }
-    }
-  } else {
-    // @ts-ignore
-    const node = state.selection.node;
-    if (node && node.type.name === nodeType) {
-      editor.chain().deleteSelection().run();
-      done = true;
-    }
-  }
-
-  if (!done) {
-    const pos = $pos.pos;
-
-    if (pos) {
-      const node = state.tr.doc.nodeAt(pos);
-
-      if (node && node.type.name === nodeType) {
-        // @ts-ignore
-        if (editor.dispatchTransaction)
-          // @ts-ignore
-          editor.dispatchTransaction(state.tr.delete(pos, pos + node.nodeSize));
-        done = true;
-      }
-    }
-  }
-
-  return done;
-}