forms-wysiwyg

Standalone React WYSIWYG editor package extracted from the Forms workspace and prepared for npm-style distribution.

It ships:

• a reusable React editor component
• generated TypeScript declarations for TS consumers
• CommonJS and ESM builds
• a hidden form field option via the name prop for traditional form posts
• image, table, emoji, source-code, fullscreen, and PDF export support

Package location

This standalone package lives at /Users/muhammadfirdaus/Sites/wysiwyg.

It is intentionally outside the Laravel app so it can be built and published independently.

Install

From the package folder:

npm install
npm run typecheck
npm run build
npm run pack:preview

Usage in TypeScript

import { WysiwygEditor, type WysiwygEditorProps } from 'forms-wysiwyg';

export function ArticleEditor() {
  const [content, setContent] = React.useState('<p>Hello world</p>');

  return (
    <WysiwygEditor
      value={content}
      onChange={setContent}
      placeholder="Write something lovely..."
      minHeight="320px"
    />
  );
}

Usage in JavaScript

import { WysiwygEditor } from 'forms-wysiwyg';

export function ArticleEditor() {
  const [content, setContent] = React.useState('<p>Hello world</p>');

  return (
    <WysiwygEditor
      value={content}
      onChange={setContent}
      placeholder="Write something lovely..."
    />
  );
}

Controlled and uncontrolled usage

• Use value + onChange for a controlled editor.
• Use defaultValue or initialContent for uncontrolled usage.
• Use name if you want the current HTML mirrored into a hidden <textarea> for form submission.

Image uploads

Pass an async imagesUploadHandler(file) prop to upload images to your own API/storage service. If you do not provide one, pasted or dropped images fall back to data URLs.

Exports

The package exports:

• WysiwygEditor
• WysiwygEditorField
• defaultImageProperties
• all public TypeScript types used by the editor

Release checks

npm run typecheck
npm run build
npm run pack:preview
npm run publish:dry-run

Publish checklist

1. Pick a unique npm package name or scope in package.json.
2. Update version and license in package.json as needed.
3. Run npm login.
4. Run npm run check.
5. For an unscoped package, publish with npm publish.
6. For a scoped public package, publish with npm publish --access public.
7. Verify the release with npm view <your-package-name> version.

If your npm account uses 2FA, npm will prompt for the OTP directly in the terminal during publish.

Notes

• React and ReactDOM are peer dependencies.
• The editor relies on the browser contenteditable API and document.execCommand, so it should be rendered on the client in SSR apps.
• html2canvas and jspdf are runtime dependencies used only when exporting to PDF.
• The component styles are self-contained via inline styles and an internal <style> block, so there is no separate CSS file to import.