reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/src/constants/index.ts

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

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

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

package/src/extensions/Attachment/Attachment.ts

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

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

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