chore: try full bundle

Author: hunghg255

docs/guide/getting-started.md

@@ -68,6 +68,14 @@ const App = () => {
 };
 ```
 
+## Import full bundle
+
+- There are error when install by yarn, you can import full bundle by using `bundle/full` path
+
+```tsx
+import RichTextEditor from 'reactjs-tiptap-editor/bundle/full'
+```
+
 ## Props
 
 ```ts

package.json

@@ -2,20 +2,30 @@
   "name": "reactjs-tiptap-editor",
   "type": "module",
   "version": "0.1.11",
-  "main": "./lib/reactjs-tiptap-editor.cjs",
-  "module": "./lib/reactjs-tiptap-editor.js",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "description": "A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React",
   "packageManager": "[email protected]",
   "exports": {
     ".": {
       "import": {
         "types": "./lib/index.d.ts",
-        "default": "./lib/reactjs-tiptap-editor.js"
+        "default": "./lib/index.js"
       },
       "require": {
         "types": "./lib/index.d.cts",
-        "default": "./lib/reactjs-tiptap-editor.cjs"
+        "default": "./lib/index.cjs"
+      }
+    },
+    "./bundle/full": {
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/bundle-full.js"
+      },
+      "require": {
+        "types": "./lib/index.d.cts",
+        "default": "./lib/bundle-full.cjs"
       }
     },
     "./style.css": {
@@ -35,7 +45,7 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "build:lib": "vite build && pnpm modify-css",
+    "build:lib": "esno ./scripts/build.ts && pnpm modify-css",
     "build:lib:dev": "vite build  --mode development --watch",
     "build:playground": "pnpm build:lib && pnpm --dir ./playground run build",
     "docs:dev": "pnpm --parallel --filter docs... dev",

scripts/build.ts

@@ -0,0 +1,101 @@
+import * as path from 'node:path'
+import fs from 'node:fs'
+import { cwd } from 'node:process'
+import { build } from 'vite'
+
+import react from '@vitejs/plugin-react'
+import dts from 'vite-plugin-dts'
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import postcssReplace from 'postcss-replace'
+
+const imports = [
+  {
+    entry: 'src/index.ts',
+    fileName: 'index',
+  },
+  {
+    entry: 'src/bundle-full.ts',
+    fileName: 'bundle-full',
+  },
+]
+
+const __dirname = cwd()
+
+imports.forEach(async ({ entry, fileName }) => {
+  const plugins: any = [react(), dts({
+    rollupTypes: true,
+    afterBuild: (emittedFiles) => {
+      emittedFiles.forEach((content, filePath) => {
+        if (filePath.endsWith('.d.ts')) {
+          const newFilePath = filePath.replace('.d.ts', '.d.cts')
+
+          fs.writeFileSync(newFilePath, content)
+        }
+      })
+    },
+  })]
+
+  await build({
+    configFile: false,
+    plugins,
+    resolve: {
+      alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+    },
+    css: {
+      postcss: {
+        plugins: [
+          tailwind(),
+          autoprefixer(),
+          postcssReplace({
+            pattern: /(--tw|\*, ::before, ::after)/g,
+            data: {
+              '--tw': '--richtext', // Prefixing
+              '*, ::before, ::after': ':root', // So variables does not pollute every element
+            },
+          }),
+        ],
+      },
+      preprocessorOptions: {
+        scss: {
+          charset: false,
+          api: 'modern-compiler', // or 'modern'
+        },
+      },
+    },
+    build: {
+      cssMinify: 'esbuild',
+      minify: 'esbuild',
+      outDir: 'lib',
+      lib: {
+        entry: path.resolve(__dirname, entry),
+        formats: ['es', 'cjs'],
+        fileName,
+      },
+      rollupOptions: {
+        input: {
+          index: path.resolve(__dirname, entry),
+        },
+        output: entry === 'src/index.ts'
+          ? {
+              manualChunks(id) {
+                if (id.includes('@tiptap')) {
+                  return 'tiptap'
+                }
+                if (id.includes('node_modules')) {
+                  return 'vendor'
+                }
+                if (id.includes('src/utils')) {
+                  return 'utils'
+                }
+                if (id.includes('src/locales')) {
+                  return 'locales'
+                }
+              },
+            }
+          : {},
+        external: entry === 'src/index.ts' ? ['react', 'react-dom', 'react/jsx-runtime', 'katex', 'shiki', 'docx', '@radix-ui/react-dropdown-menu', '@radix-ui/react-icons', '@radix-ui/react-label', '@radix-ui/react-popover', '@radix-ui/react-separator', '@radix-ui/react-slot', '@radix-ui/react-switch', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-toggle', '@radix-ui/react-tooltip', '@radix-ui/react-select', '@radix-ui/react-checkbox', 'react-colorful', 'scroll-into-view-if-needed', 'tippy.js', 'lucide-react', 'prosemirror-docx', 're-resizable', '@excalidraw/excalidraw', '@radix-ui/react-dialog', 'react-image-crop', 'mermaid', 'react-tweet', 'reactjs-signal'] : ['react', 'react-dom', 'react/jsx-runtime', 'katex', 'shiki', '@radix-ui/react-dropdown-menu', '@radix-ui/react-icons', '@radix-ui/react-label', '@radix-ui/react-popover', '@radix-ui/react-separator', '@radix-ui/react-slot', '@radix-ui/react-switch', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-toggle', '@radix-ui/react-tooltip', '@radix-ui/react-select', '@radix-ui/react-checkbox', 'react-colorful', 'scroll-into-view-if-needed', 'tippy.js', 'lucide-react', 're-resizable', '@excalidraw/excalidraw', '@radix-ui/react-dialog', 'react-image-crop', 'mermaid', 'react-tweet', 'reactjs-signal'],
+      },
+    },
+  })
+})

src/bundle-full.ts

@@ -0,0 +1,14 @@
+/* eslint-disable import/first */
+export * from '@/extensions'
+
+export { default } from '@/components/RichTextEditor'
+
+import locale, { en, hu_HU, pt_BR, vi, zh_CN } from './locales'
+import { useEditorState } from '@/hooks/useEditorState'
+
+export { locale, en, hu_HU, vi, zh_CN, pt_BR }
+
+export type { UseEditorStateReturn } from '@/hooks/useEditorState'
+export { useEditorState }
+export type { Editor, UseEditorOptions } from '@tiptap/react'
+export { BubbleMenu } from '@tiptap/react'

src/index.ts

@@ -10,5 +10,5 @@ export { locale, en, hu_HU, vi, zh_CN, pt_BR }
 
 export type { UseEditorStateReturn } from '@/hooks/useEditorState'
 export { useEditorState }
-export type { Editor, UseEditorOptions } from '@tiptap/react'
 export { BubbleMenu } from '@tiptap/react'
+export type { Editor, UseEditorOptions } from '@tiptap/react'

vite.config.ts

@@ -59,6 +59,7 @@ export default defineConfig(({ mode }) => {
       lib: {
         entry: path.resolve(__dirname, 'src/index.ts'),
         formats: ['es', 'cjs'],
+        fileName: 'index',
       },
       rollupOptions: {
         output: {