{"_id":"@dooboostore/dom-editor","name":"@dooboostore/dom-editor","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@dooboostore/dom-editor","version":"1.0.1","license":"MIT","type":"module","sideEffects":false,"main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","browser":"./dist/esm-bundle/dooboostore-dom-editor.esm.js","unpkg":"./dist/umd-bundle/dooboostore-dom-editor.umd.js","jsdelivr":"./dist/umd-bundle/dooboostore-dom-editor.umd.js","typesVersions":{"*":{"*":["dist/types/*"]}},"description":"A visual drag-and-drop DOM editor for creating and manipulating HTML structures with real-time preview","keywords":["dom","editor","drag-drop","html","visual-editor","dom-manipulation","html-builder","wysiwyg","typescript","browser","ui-builder","web-editor"],"publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"},"./bundle-entry":{"types":"./dist/types/bundle-entry.d.ts","import":"./dist/esm/bundle-entry.js","require":"./dist/cjs/bundle-entry.js"},"./cjs":{"types":"./dist/types/index.d.ts","require":"./dist/cjs/index.js"},"./esm":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js"},"./umd":"./dist/umd-bundle/dooboostore-dom-editor.umd.js","./esm-bundle":"./dist/esm-bundle/dooboostore-dom-editor.esm.js","./package.json":"./package.json"},"author":{"name":"dooboostore","email":"dooboostore@gmail.com","url":"https://github.com/dooboostore"},"contributors":[{"name":"sewoo","email":"sewooimda@nate.com","url":"https://github.com/sewoo"},{"name":"SeoDH","email":"adonis_84@naver.com","url":"https://github.com/SeoDH"},{"name":"tkyung","url":"https://github.com/tkyungDev"},{"name":"Hoil-Gang","url":"https://github.com/khl1154"},{"name":"hwangsero","url":"https://github.com/hwangsero"}],"homepage":"https://github.com/dooboostore-develop/packages","bugs":{"url":"https://github.com/dooboostore-develop/packages","email":"dooboostore@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/dooboostore-develop/packages.git"},"engines":{"node":">=16.0.0"},"dependencies":{},"devDependencies":{"@types/jest":"^26.0.22","@typescript-eslint/eslint-plugin":"^4.16.1","@typescript-eslint/parser":"^4.16.1","tslib":"^2.8.1","@types/node":"^20","typescript":"^5.9.2","esbuild-plugin-tsc":"^0.5.0","esbuild":"^0.23.0"},"scripts":{"clean":"rm -rf dist","build:esm":"node build.mjs esm","watch:esm":"pnpm run build:esm && node build.mjs esm --watch","build:cjs":"node build.mjs cjs","watch:cjs":"pnpm run build:cjs && node build.mjs cjs --watch","build":"pnpm run clean && node build.mjs all","build:umd-bundle":"node build.mjs umd-bundle","watch:umd-bundle":"pnpm run build:umd-bundle && node build.mjs umd-bundle --watch","build:esm-bundle":"node build.mjs esm-bundle","watch:esm-bundle":"pnpm run build:esm-bundle && node build.mjs esm-bundle --watch","watch":"node build.mjs all --watch","publish:npm":"pnpm run build && cp package.json package.json.back && pnpm pack && TARBALL_NAME=$(ls dooboostore-dom-editor-*.tgz | head -n 1) && tar -xzf \"$TARBALL_NAME\" -C . --strip-components=1 package/package.json && rm \"$TARBALL_NAME\" && (pnpm publish --no-git-checks || true) && cp package.json.back package.json && rm -rf package.json.back","ts:clean":"find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f","typecheck":"pnpm exec tsc --noEmit","test":"echo test"},"_id":"@dooboostore/dom-editor@1.0.1","_integrity":"sha512-qQMtCZTsbK97lUB1dnSsz1Xvos8ZJzYyGdsBom/53ZuLsXC2KWSUyWw0Q2i5uKWT6HMRidQp1ldML9nraderJQ==","_resolved":"/private/var/folders/6t/yzld3lgx5pn574lkf54z29hw0000gn/T/8559a999ab2656145605431aaec4ad33/dooboostore-dom-editor-1.0.1.tgz","_from":"file:dooboostore-dom-editor-1.0.1.tgz","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-qQMtCZTsbK97lUB1dnSsz1Xvos8ZJzYyGdsBom/53ZuLsXC2KWSUyWw0Q2i5uKWT6HMRidQp1ldML9nraderJQ==","shasum":"ca783052e7ab66901fe18e9cb13a6e3cc31349c9","tarball":"https://registry.npmjs.org/@dooboostore/dom-editor/-/dom-editor-1.0.1.tgz","fileCount":44,"unpackedSize":866234,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB9HvZ0duNS2PHEfgGENnJFB/MWOZ4ikh9l5M4jMGPdvAiEA/AJ78qhFUmPdGzewyv2sZqgIscDVC3U2vCuGcs0xGBg="}]},"_npmUser":{"name":"dooboostore","email":"dooboostore@gmail.com"},"directories":{},"maintainers":[{"name":"dooboostore","email":"dooboostore@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dom-editor_1.0.1_1774896023925_0.2665249540155994"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-30T18:40:23.833Z","1.0.1":"2026-03-30T18:40:24.148Z","modified":"2026-03-30T18:40:24.446Z"},"maintainers":[{"name":"dooboostore","email":"dooboostore@gmail.com"}],"description":"A visual drag-and-drop DOM editor for creating and manipulating HTML structures with real-time preview","homepage":"https://github.com/dooboostore-develop/packages","keywords":["dom","editor","drag-drop","html","visual-editor","dom-manipulation","html-builder","wysiwyg","typescript","browser","ui-builder","web-editor"],"repository":{"type":"git","url":"git+https://github.com/dooboostore-develop/packages.git"},"contributors":[{"name":"sewoo","email":"sewooimda@nate.com","url":"https://github.com/sewoo"},{"name":"SeoDH","email":"adonis_84@naver.com","url":"https://github.com/SeoDH"},{"name":"tkyung","url":"https://github.com/tkyungDev"},{"name":"Hoil-Gang","url":"https://github.com/khl1154"},{"name":"hwangsero","url":"https://github.com/hwangsero"}],"author":{"name":"dooboostore","email":"dooboostore@gmail.com","url":"https://github.com/dooboostore"},"bugs":{"url":"https://github.com/dooboostore-develop/packages","email":"dooboostore@gmail.com"},"license":"MIT","readme":"# @dooboostore/dom-editor\n\n[![NPM version](https://img.shields.io/npm/v/@dooboostore/dom-editor.svg?style=flat-square)](https://www.npmjs.com/package/@dooboostore/dom-editor)\n[![Build and Test](https://github.com/dooboostore-develop/packages/actions/workflows/main.yaml/badge.svg?branch=main)](https://github.com/dooboostore-develop/packages/actions/workflows/main.yaml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n\n**Full Documentation:** [https://dooboostore-develop.github.io/@dooboostore/dom-editor](https://dooboostore-develop.github.io/@dooboostore/dom-editor)\n\nA visual drag-and-drop DOM editor for building, editing, and exporting HTML structures in real time.\n\n## Features\n\n- Visual drag and drop editing for element trees.\n- Structured JSON export/import (`NodeData`) for persistence.\n- Runtime property panel for attributes and content editing.\n- Mobile-friendly interaction with drag delay control.\n- Root-first API usage plus `bundle-entry` support.\n- ESM/CJS/UMD/ESM-bundle outputs.\n\n## Installation\n\n```bash\nnpm install @dooboostore/dom-editor\n```\n\n```bash\nyarn add @dooboostore/dom-editor\n```\n\n```bash\npnpm add @dooboostore/dom-editor\n```\n\n## Import Guide\n\n### Root import (recommended)\n\n```typescript\nimport { DomEditor } from '@dooboostore/dom-editor';\n```\n\n### Bundle entry import\n\n```typescript\nimport { DomEditor } from '@dooboostore/dom-editor/bundle-entry';\n```\n\n## Quick Start\n\n### Basic Usage\n\n```typescript\nimport { DomEditor } from '@dooboostore/dom-editor';\n\nconst editor = new DomEditor('#editor-container', {\n  debug: true,\n  enableMobileSupport: true\n});\n\n// Get the generated HTML\nconst html = editor.getContent();\nconsole.log(html);\n```\n\n### With Custom Options\n\n```typescript\nimport { DomEditor, DomEditorOptions } from '@dooboostore/dom-editor';\n\nconst options: DomEditorOptions = {\n  initialContent: '<section class=\"hero\"><h1>Hello</h1></section>',\n  debug: false,\n  dragDelay: 500, // milliseconds\n  enableMobileSupport: true,\n  customStyles: `\n    .my-custom-element {\n      background: linear-gradient(45deg, #ff6b35, #f7931e);\n      color: white;\n    }\n  `\n};\n\nconst editor = new DomEditor(document.getElementById('editor-container')!, options);\n```\n\n### Structured Data Import\n\n```typescript\nimport { DomEditor, NodeData } from '@dooboostore/dom-editor';\n\nconst initialTree: NodeData = {\n  nodeType: 'element',\n  tagName: 'div',\n  className: 'container',\n  children: [\n    {\n      nodeType: 'element',\n      tagName: 'h2',\n      children: [{ nodeType: 'text', textContent: 'Welcome' }]\n    }\n  ]\n};\n\nconst editor = new DomEditor('#editor', { initialContent: initialTree });\n```\n\n### HTML Usage (UMD Bundle)\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <title>DOM Editor Example</title>\n</head>\n<body>\n  <div id=\"editor-container\"></div>\n  \n  <script src=\"https://unpkg.com/@dooboostore/dom-editor/dist/umd-bundle/dooboostore-dom-editor.umd.js\"></script>\n  <script>\n    const editor = new dooboostoreDomEditor.DomEditor('#editor-container', {\n      debug: true\n    });\n  </script>\n</body>\n</html>\n```\n\n## API Reference\n\n### DomEditor Class\n\n#### Constructor\n\n```typescript\nnew DomEditor(target: string | HTMLElement, options?: DomEditorOptions)\n```\n\n#### Options\n\n```typescript\ninterface DomEditorOptions {\n  /** Initial content: HTML string or structured NodeData */\n  initialContent?: string | NodeData;\n  /** Enable debug mode */\n  debug?: boolean;\n  /** Custom CSS styles to inject */\n  customStyles?: string;\n  /** Drag activation delay in milliseconds (default: 500) */\n  dragDelay?: number;\n  /** Enable mobile touch support */\n  enableMobileSupport?: boolean;\n}\n```\n\n#### Methods\n\n##### Content I/O\n\n```typescript\n// Load HTML string or structured NodeData\neditor.loadContent('<div>New content</div>');\neditor.loadContent(nodeData);\n\n// Get current HTML content\nconst html = editor.getContent();\n\n// Export structured root element data\nconst data = editor.exportData(); // ElementNodeData\n\n// Import structured data\neditor.importData(data);\n```\n\n##### Lifecycle\n\n```typescript\n// Destroy editor and clean up\neditor.destroy();\n```\n\n### Data Types\n\n#### ElementData\n\n```typescript\ninterface ElementData {\n  nodeType: 'element';\n  tagName: string;\n  id?: string;\n  className?: string;\n  attributes?: Record<string, string>;\n  children?: NodeData[];\n}\n\ninterface TextNodeData {\n  nodeType: 'text';\n  textContent: string;\n}\n\ntype NodeData = ElementData | TextNodeData;\n```\n\n## Features in Detail\n\n### Drag & Drop System\n\n- **Smart Activation**: 500ms hold delay prevents accidental drags\n- **Visual Feedback**: Clear indicators for drop zones and positions\n- **Mobile Optimized**: Touch-friendly with scroll detection\n- **Nested Support**: Drag elements into other elements as children\n\n### Property Editor\n\n- **Live Editing**: Change tag names, attributes, and content in real-time\n- **Attribute Management**: Add, edit, and remove HTML attributes\n- **Visual Interface**: User-friendly forms for all editing operations\n\n### Content Export/Import\n\n- Export current edited tree as JSON.\n- Import JSON into editor and resume editing flow.\n- Export HTML string for direct embedding.\n\n### Mobile Support\n\n- **Touch Events**: Full touch event handling for mobile devices\n- **Scroll Detection**: Smart detection between scroll and drag intentions\n- **Responsive Design**: Works on all screen sizes\n\n### Animation System\n\n- **Smooth Transitions**: CSS-based animations for all interactions\n- **Visual Feedback**: Hover effects, selection indicators, and drag previews\n- **Performance Optimized**: Hardware-accelerated transforms\n\n## Browser Support\n\n- Chrome 80+\n- Firefox 75+\n- Safari 13+\n- Edge 80+\n\n## Examples\n\n### Basic HTML Builder\n\n```typescript\nimport { DomEditor } from '@dooboostore/dom-editor';\n\nconst editor = new DomEditor('#builder');\n\n// Add event listener for content changes\ndocument.getElementById('export-btn')?.addEventListener('click', () => {\n  const html = editor.getContent();\n  console.log('Generated HTML:', html);\n});\n```\n\n### Persist and Restore\n\n```typescript\nconst saved = editor.exportData();\nlocalStorage.setItem('dom-editor:data', JSON.stringify(saved));\n\nconst raw = localStorage.getItem('dom-editor:data');\nif (raw) {\n  editor.importData(JSON.parse(raw));\n}\n```\n\n### Form Builder\n\n```typescript\nimport { DomEditor } from '@dooboostore/dom-editor';\n\nconst formBuilder = new DomEditor('#form-builder', {\n  initialContent: `\n    <form>\n      <div class=\"form-group\">\n        <label>Name:</label>\n        <input type=\"text\" name=\"name\" />\n      </div>\n    </form>\n  `\n});\n```\n\n### Page Layout Designer\n\n```typescript\nimport { DomEditor } from '@dooboostore/dom-editor';\n\nconst layoutDesigner = new DomEditor('#layout-designer', {\n  customStyles: `\n    .layout-section {\n      min-height: 200px;\n      border: 2px dashed #ccc;\n      padding: 20px;\n    }\n    .layout-header {\n      background: #f8f9fa;\n      padding: 20px;\n    }\n  `\n});\n```\n\n## Development\n\n### Building from Source\n\n```bash\n# Clone the repository\ngit clone https://github.com/dooboostore-develop/packages.git\ncd packages/source/packages/@dooboostore/dom-editor\n\n# Install dependencies\npnpm install\n\n# Build all formats\npnpm run build\n\n# Watch mode for development\npnpm run watch\n```\n\n### Available Scripts\n\n- `pnpm run build` - Build all formats (ESM, CJS, UMD)\n- `pnpm run build:esm` - Build ES modules\n- `pnpm run build:cjs` - Build CommonJS modules\n- `pnpm run build:umd-bundle` - Build UMD bundle\n- `pnpm run watch` - Watch mode for development\n- `pnpm run typecheck` - Type checking\n\n## Best Practices\n\n- Initialize the editor with a stable container element size.\n- Use structured `NodeData` for long-term persistence or server sync.\n- Sanitize untrusted HTML before passing it into `loadContent`.\n- Call `destroy()` when unmounting to clean up editor resources.\n\n## Troubleshooting\n\n**Issue:** `Element not found: #selector` in constructor  \n**Solution:** ensure target element exists before creating `DomEditor`.\n\n**Issue:** Dragging feels too sensitive on touch devices  \n**Solution:** increase `dragDelay` in options.\n\n**Issue:** Imported JSON fails  \n**Solution:** root object must be `nodeType: 'element'` and follow `NodeData` schema.\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](https://github.com/dooboostore-develop/packages/blob/main/CONTRIBUTING.md) for details.\n\n## License\n\nMIT © [dooboostore](https://github.com/dooboostore)\n\n## Support\n\n- 📧 Email: dooboostore@gmail.com\n- 🐛 Issues: [GitHub Issues](https://github.com/dooboostore-develop/packages/issues)\n- 💬 Discussions: [GitHub Discussions](https://github.com/dooboostore-develop/packages/discussions)\n","readmeFilename":"README.MD","_rev":"1-4632a7e3174f15089582376a2b613ee5"}