reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/types.ts

@@ -0,0 +1,271 @@
+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

@@ -0,0 +1,55 @@
+import mitt from '@/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

@@ -0,0 +1,67 @@
+/* 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

@@ -0,0 +1,142 @@
+/* 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 '@/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

@@ -0,0 +1,18 @@
+import { type EventValues } from '@/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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,46 @@
+/* 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;
+}