Skip to content

PUBLISHING.md

Latest commit

 

History

History
193 lines (158 loc) · 4.05 KB

PUBLISHING.md

File metadata and controls

193 lines (158 loc) · 4.05 KB
Raw

Publishing @indoui/react-text-editor to npm

Step 1: Setup Your Library Project

Copy the src/lib/text-editor folder to a new directory:

mkdir react-text-editor
cd react-text-editor

# Copy all files from src/lib/text-editor to this folder

Step 2: Initialize the Package

# Rename package.lib.json to package.json
mv package.lib.json package.json

# Install dependencies
npm install

# Install dev dependencies for building
npm install -D vite @vitejs/plugin-react-swc vite-plugin-dts typescript

Step 3: Update vite.config.ts

Rename vite.config.lib.ts to vite.config.ts and update:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'index.ts'),
      name: 'IndoUITextEditor',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react/jsx-runtime': 'jsxRuntime',
        },
        assetFileNames: 'styles.css',
      },
    },
    cssCodeSplit: false,
    sourcemap: true,
    outDir: 'dist',
  },
});

Step 4: Add Build Scripts to package.json

{
  "scripts": {
    "build": "vite build",
    "prepublishOnly": "npm run build"
  }
}

Step 5: Create tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "declaration": true,
    "declarationDir": "./dist",
    "outDir": "./dist"
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "dist"]
}

Step 6: Build the Library

npm run build

This creates the dist/ folder with:

  • index.mjs (ESM bundle)
  • index.cjs (CommonJS bundle)
  • index.d.ts (TypeScript declarations)
  • styles.css (Stylesheet)

Step 7: Login to npm

npm login

Step 8: Publish

# First time (create the package)
npm publish --access public

# Future updates (bump version first)
npm version patch  # or minor or major
npm publish

Final Directory Structure

react-text-editor/
├── components/
│   ├── TextEditor.tsx
│   ├── Toolbar.tsx
│   └── ToolbarButton.tsx
├── extensions/
│   └── FontSize.ts
├── hooks/
│   └── useTheme.ts
├── styles/
│   └── editor.css
├── index.ts
├── types.ts
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Usage After Publishing

npm install @indoui/react-text-editor
import { TextEditor } from '@indoui/react-text-editor';
import '@indoui/react-text-editor/styles.css';

function App() {
  const [content, setContent] = useState('');
  
  return (
    <TextEditor
      value={content}
      onChange={setContent}
      placeholder="Start typing..."
      resizable={true}
    />
  );
}

Troubleshooting

"Cannot find module" errors

Make sure all Tiptap dependencies are listed in dependencies, not devDependencies.

CSS not loading

Remember to import the styles: import '@indoui/react-text-editor/styles.css';

TypeScript errors

Ensure vite-plugin-dts is installed and configured properly.