reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/constants/index.ts

@@ -1,223 +0,0 @@
-/** Default lang */
-export const DEFAULT_LANG_VALUE = 'en' as const;
-
-/** Throttle time for editor input (milliseconds) */
-export const EDITOR_UPDATE_THROTTLE_WAIT_TIME = 200 as const;
-
-/**
- * watch throttling time must be less than the update time
- * otherwise the cursor position will reach the end
- */
-export const EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME = EDITOR_UPDATE_THROTTLE_WAIT_TIME - 80;
-
-/** Minimum size for image adjustments */
-export const IMAGE_MIN_SIZE = 20 as const;
-/** Maximum size for image adjustments */
-export const IMAGE_MAX_SIZE = 100_000 as const;
-/** Throttle time during adjustments for images (milliseconds) */
-export const IMAGE_THROTTLE_WAIT_TIME = 16 as const;
-
-/** Default number of rows and columns for grids when creating a table */
-export const TABLE_INIT_GRID_SIZE = 10 as const;
-/** Maximum number of rows and columns for grids when creating a table */
-export const TABLE_MAX_GRID_SIZE = 10 as const;
-/** Minimum number of rows and columns for grids when creating a table */
-export const TABLE_DEFAULT_SELECTED_GRID_SIZE = 2 as const;
-
-export const DEFAULT_COLOR = '#262626';
-/** Default color list for text color and text highlight */
-export const COLORS_LIST = [
-  '#000000',
-  '#262626',
-  '#595959',
-  '#8C8C8C',
-  '#BFBFBF',
-  '#D9D9D9',
-  '#E9E9E9',
-  '#F5F5F5',
-  '#FAFAFA',
-  '#FFFFFF',
-  '#F5222D',
-  '#FA541C',
-  '#FA8C16',
-  '#FADB14',
-  '#52C41A',
-  '#13C2C2',
-  '#1890FF',
-  '#2F54EB',
-  '#722ED1',
-  '#EB2F96',
-  '#FFE8E6',
-  '#FFECE0',
-  '#FFEFD1',
-  '#FCFCCA',
-  '#E4F7D2',
-  '#D3F5F0',
-  '#D4EEFC',
-  '#DEE8FC',
-  '#EFE1FA',
-  '#FAE1EB',
-  '#FFA39E',
-  '#FFBB96',
-  '#FFD591',
-  '#FFFB8F',
-  '#B7EB8F',
-  '#87E8DE',
-  '#91D5FF',
-  '#ADC6FF',
-  '#D3ADF7',
-  '#FFADD2',
-  '#FF4D4F',
-  '#FF7A45',
-  '#FFA940',
-  '#FFEC3D',
-  '#73D13D',
-  '#36CFC9',
-  '#40A9FF',
-  '#597EF7',
-  '#9254DE',
-  '#F759AB',
-  '#CF1322',
-  '#D4380D',
-  '#D46B08',
-  '#D4B106',
-  '#389E0D',
-  '#08979C',
-  '#096DD9',
-  '#1D39C4',
-  '#531DAB',
-  '#C41D7F',
-  '#820014',
-  '#871400',
-  '#873800',
-  '#614700',
-  '#135200',
-  '#00474F',
-  '#003A8C',
-  '#061178',
-  '#22075E',
-  '#780650',
-] as const;
-
-/** Default font family list */
-export const DEFAULT_FONT_FAMILY_LIST = [
-  'Inter',
-  'Comic Sans MS, Comic Sans',
-  'serif',
-  'cursive',
-  'Arial',
-  'Arial Black',
-  'Georgia',
-  'Impact',
-  'Tahoma',
-  'Times New Roman',
-  'Verdana',
-  'Courier New',
-  'Lucida Console',
-  'Monaco',
-  'monospace',
-];
-
-export const DEFAULT_LANGUAGE_CODE_BLOCK = [
-  'html',
-  'css',
-  'js',
-  'ts',
-  'bash',
-];
-
-export const MAP_LANGUAGE_CODE_LABELS = {
-  html: 'HTML',
-  css: 'CSS',
-  js: 'JavaScript',
-  ts: 'TypeScript',
-  bash: 'Bash',
-} as any;
-
-/** Default font size list */
-export const DEFAULT_FONT_SIZE_LIST = [
-  '10px',
-  '11px',
-  '12px',
-  '14px',
-  '16px',
-  '18px',
-  '20px',
-  '22px',
-  '24px',
-  '26px',
-  '28px',
-  '36px',
-  '48px',
-  '72px',
-] as const;
-
-/** Default font size value */
-export const DEFAULT_FONT_SIZE_VALUE = 'default';
-
-/** Options for setting image size in the bubble menu */
-export enum IMAGE_SIZE {
-  'size-small' = 200,
-  'size-medium' = 500,
-  'size-large' = '100%',
-}
-
-/** Options for setting video size in the bubble menu */
-export enum VIDEO_SIZE {
-  'size-small' = 480,
-  'size-medium' = 640,
-  'size-large' = '100%',
-}
-
-/** Line Height List */
-export const DEFAULT_LINE_HEIGHT_LIST = ['100%', '115%', '150%', '200%', '250%', '300%'];
-export const LINE_HEIGHT_100 = 1.7;
-export const DEFAULT_LINE_HEIGHT = '1';
-
-/** display in menus */
-export const NODE_TYPE_MENU: any = {
-  image: [
-    'divider',
-    'image-size-small',
-    'image-size-medium',
-    'image-size-large',
-    'divider',
-    'image-left',
-    'image-center',
-    'image-right',
-    'divider',
-    'image-aspect-ratio',
-    'remove',
-  ],
-  text: [
-    'divider',
-    'text-bubble',
-    'divider',
-    'bold',
-    'italic',
-    'underline',
-    'strike',
-    'code',
-    'link',
-    'divider',
-    'color',
-    'highlight',
-    'textAlign',
-  ],
-  video: ['video-size-small', 'video-size-medium', 'video-size-large', 'divider', 'remove'],
-  table: ['removeTable'],
-};
-
-/** display in bubble text menu */
-export const BUBBLE_TEXT_LIST = [
-  'bold',
-  'italic',
-  'underline',
-  'strike',
-  'code',
-  'link',
-  'divider',
-  'color',
-  'highlight',
-  'textAlign',
-];

package/src/constants/resetCSS.ts

@@ -1,139 +0,0 @@
-export const RESET_CSS = `
-.reactjs-tiptap-editor, 
-.dialog-content {
-  button,
-  input:where([type=button]),
-  input:where([type=reset]),
-  input:where([type=submit]) {
-    -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
-  }
-
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-  }
-
-  button {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-  }
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: hsl(var(--border));
-  }
-
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-    font-feature-settings: normal;
-    font-variation-settings: normal;
-    font-size: 1em;
-  }
-
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
-  input, textarea {
-    border-width: 1px;
-  }
-
-  textarea {
-    resize: vertical;
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: #9ca3af;
-  }
-
-  button, input, textarea {
-    cursor: pointer;
-    color: inherit;
-  }
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block;
-    vertical-align: middle;
-  }
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-}
-
-div[data-radix-popper-content-wrapper],
-div[data-tippy-root] {
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: hsl(var(--border));
-  }
-
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-
-  button, input, textarea {
-    cursor: pointer;
-    color: inherit;
-  }
-}
-`;

package/src/extension-bundle.ts

@@ -1,2 +0,0 @@
-/* eslint-disable import/first */
-export * from 'reactjs-tiptap-editor-pro/extensions';

package/src/extensions/Attachment/Attachment.ts

@@ -1,144 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Node, mergeAttributes } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import { getFileTypeIcon } from 'reactjs-tiptap-editor-pro/extensions/Attachment/components/NodeViewAttachment/FileIcon';
-import { NodeViewAttachment } from 'reactjs-tiptap-editor-pro/extensions/Attachment/components/NodeViewAttachment/NodeViewAttachment';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-import { getDatasetAttribute } from 'reactjs-tiptap-editor-pro/utils/dom-dataset';
-import { normalizeFileSize } from 'reactjs-tiptap-editor-pro/utils/file';
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    attachment: {
-      setAttachment: (attrs?: unknown) => ReturnType
-    }
-  }
-}
-
-export interface AttachmentOptions extends GeneralOptions<AttachmentOptions> {
-  /** Function for uploading files */
-  upload?: (file: File) => Promise<string>
-}
-
-export const Attachment = Node.create<AttachmentOptions>({
-  name: 'attachment',
-  content: '',
-  marks: '',
-  group: 'block',
-  selectable: true,
-  atom: true,
-  draggable: true,
-
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      HTMLAttributes: {
-        class: 'attachment',
-      },
-      button: ({ editor, t }: any) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.chain().focus().setAttachment().run(),
-          isActive: () => false,
-          disabled: false,
-          icon: 'Attachment',
-          tooltip: t('editor.attachment.tooltip'),
-        },
-      }),
-    };
-  },
-
-  parseHTML() {
-    return [{ tag: 'div[class=attachment]' }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    // Destructure and provide fallback defaults
-    const {
-      url = '',
-      fileName = '',
-      fileSize = '',
-      fileType = '',
-      fileExt = '',
-    } = HTMLAttributes || {};
-
-    // Validate attributes and merge safely
-    const mergedAttributes = mergeAttributes(
-      // @ts-expect-error
-      this.options.HTMLAttributes || {},
-      HTMLAttributes || {},
-    );
-
-    // Return the structured array
-    return [
-      'div',
-      mergedAttributes,
-      url
-        ? [
-          'a',
-          { href: url || '#' },
-          [
-            'span',
-            { class: 'attachment__icon' },
-            getFileTypeIcon(fileType, true),
-          ],
-          [
-            'span',
-            { class: 'attachment__text' },
-            `${fileName}.${fileExt} (${normalizeFileSize(fileSize)})`,
-          ],
-        ]
-        : ['div', { class: 'attachment__placeholder' }],
-    ];
-  },
-
-  addAttributes() {
-    return {
-      fileName: {
-        default: null,
-        parseHTML: getDatasetAttribute('filename'),
-      },
-      fileSize: {
-        default: null,
-        parseHTML: getDatasetAttribute('filesize'),
-      },
-      fileType: {
-        default: null,
-        parseHTML: getDatasetAttribute('filetype'),
-      },
-      fileExt: {
-        default: null,
-        parseHTML: getDatasetAttribute('fileext'),
-      },
-      url: {
-        default: null,
-        parseHTML: getDatasetAttribute('url'),
-      },
-      hasTrigger: {
-        default: false,
-        parseHTML: element => getDatasetAttribute('hastrigger')(element) === 'true',
-      },
-      error: {
-        default: null,
-        parseHTML: getDatasetAttribute('error'),
-      },
-    };
-  },
-
-  addCommands() {
-    return {
-      setAttachment:
-        (attrs = {}) =>
-          ({ chain }) => {
-            // @ts-expect-error
-            return chain().insertContent({ type: this.name, attrs }).run();
-          },
-    };
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(NodeViewAttachment);
-  },
-});

package/src/extensions/Attachment/components/NodeViewAttachment/FileIcon.tsx

@@ -1,69 +0,0 @@
-import { LucideAudioLines, LucideFile, LucideImage, LucideSheet, LucideTableProperties, LucideVideo } from 'lucide-react';
-// import ReactDOMServer from 'react-dom/server';
-
-import { ExportPdf } from 'reactjs-tiptap-editor-pro/components/icons/ExportPdf';
-import ExportWord from 'reactjs-tiptap-editor-pro/components/icons/ExportWord';
-import { FileIconString } from 'reactjs-tiptap-editor-pro/extensions/Attachment/components/NodeViewAttachment/FileIconString';
-import { normalizeFileType } from 'reactjs-tiptap-editor-pro/utils/file';
-
-function iconToProseMirror(typeIcon: any) {
-  // Render SVG as a static string
-  const svgString = FileIconString[typeIcon];
-
-  // Parse the string into ProseMirror-compatible structure
-  const parser = new DOMParser();
-  const svgDocument = parser.parseFromString(svgString, 'image/svg+xml');
-  const svgElement = svgDocument.documentElement;
-
-  const iconToReturn = [
-    'svg',
-    {
-      ...Array.from(svgElement.attributes).reduce((acc: any, attr: any) => {
-        acc[attr.name] = attr.value;
-        return acc;
-      }, {}),
-    },
-  ];
-
-  Array.from(svgElement.childNodes).forEach((child: any) => {
-    if (child.nodeType === 1) {
-      // Element node
-      const childElement = [
-        child.tagName.toLowerCase(),
-        Array.from(child.attributes).reduce((acc: any, attr: any) => {
-          acc[attr.name] = attr.value;
-          return acc;
-        }, {}),
-      ];
-
-      if (child.textContent) {
-        childElement.push(child.textContent);
-      }
-
-      iconToReturn.push(childElement);
-    }
-  });
-
-  return iconToReturn;
-}
-
-// React components for rendering directly in JSX
-const icons = {
-  audio: <LucideAudioLines />,
-  video: <LucideVideo />,
-  file: <LucideFile />,
-  image: <LucideImage />,
-  pdf: <ExportPdf />,
-  word: <ExportWord />,
-  excel: <LucideSheet />,
-  ppt: <LucideTableProperties />,
-};
-
-export function getFileTypeIcon(fileType: string, forProseMirror = false) {
-  const type = normalizeFileType(fileType);
-
-  const icon = icons[type] || <></>;
-
-  // Return ProseMirror-compatible structure or React component
-  return forProseMirror ? iconToProseMirror(type) : icon;
-}

package/src/extensions/Attachment/components/NodeViewAttachment/FileIconString.ts

@@ -1,28 +0,0 @@
-export const FileIconString = {
-  audio: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-audio-lines"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>',
-  video: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>',
-  file: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',
-  image: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
-  pdf: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
-      <path fill="currentColor" d="M30 18v-2h-6v10h2v-4h3v-2h-3v-2zm-11 8h-4V16h4a3.003 3.003 0 0 1 3 3v4a3.003 3.003 0 0 1-3 3m-2-2h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2zm-6-8H6v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2 2 0 0 0-2-2m-3 5v-3h3l.001 3z"></path>
-      <path fill="currentColor" d="M22 14v-4a.91.91 0 0 0-.3-.7l-7-7A.9.9 0 0 0 14 2H4a2.006 2.006 0 0 0-2 2v24a2 2 0 0 0 2 2h16v-2H4V4h8v6a2.006 2.006 0 0 0 2 2h6v2Zm-8-4V4.4l5.6 5.6Z"></path>
-    </svg>`,
-  word: `<svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      className="icon"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        fill="currentColor"
-        d="M679.253 402.364 618.77 561.015l-60.348-158.651a30.04 30.04 0 0 0-30.447-18.637 29.76 29.76 0 0 0-30.447 18.637l-60.416 158.651-60.416-158.651a30.515 30.515 0 0 0-38.843-17.272 28.945 28.945 0 0 0-17.954 37.547l88.815 233.267c4.369 11.469 15.7 19.115 28.398 19.115a30.31 30.31 0 0 0 28.468-19.115l62.395-163.908 62.396 163.84c4.437 11.605 15.701 19.183 28.4 19.183a30.31 30.31 0 0 0 28.466-19.115l88.747-233.267a28.945 28.945 0 0 0-17.886-37.547 30.447 30.447 0 0 0-38.912 17.272zm219.478 395.605-51.883-29.218c-28.672-16.18-52.224-3.072-52.224 29.082v.273H643.209a29.833 29.833 0 0 0-30.31 29.354c0 16.18 13.584 29.218 30.31 29.218h151.825c1.092 30.516 24.03 43.077 52.224 27.648l51.063-27.989c29.013-15.906 29.15-42.189.41-58.368"
-      />
-      <path
-        fill="currentColor"
-        d="m810.667 913.135-.478.068H201.796c-19.865 0-36.727-11.673-36.727-25.6v-618.36h154.965c51.268 0 92.911-39.39 92.911-87.858v-87.86H810.19c19.797 0 36.522 11.742 36.522 25.669V739.26h61.987V119.262c0-46.421-44.169-84.241-98.51-84.241H328.364l-225.28 194.56v658.09c0 46.285 44.236 84.105 98.713 84.105H810.19c43.759 0 80.554-24.713 93.32-58.573h-92.842zM350.89 94.89v86.562c0 16.11-13.858 29.286-30.925 29.286H216.815L350.959 94.891z"
-      />
-    </svg>`,
-  excel: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sheet"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><line x1="3" x2="21" y1="9" y2="9"/><line x1="3" x2="21" y1="15" y2="15"/><line x1="9" x2="9" y1="9" y2="21"/><line x1="15" x2="15" y1="9" y2="21"/></svg>',
-  ppt: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table-properties"><path d="M15 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M21 9H3"/><path d="M21 15H3"/></svg>'
-} as any;