{"_id":"@aponahmed/blockeditor-js-client","_rev":"1-bae2d440d3775abceb441c7313121995","name":"@aponahmed/blockeditor-js-client","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aponahmed/blockeditor-js-client","version":"1.0.0","description":"Generated JSON to Build HTML","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/AponAhmed/JS-Client-for-Block-Editor.git"},"author":{"name":"Md. Muhiminul Haque Apon"},"license":"ISC","bugs":{"url":"https://github.com/AponAhmed/JS-Client-for-Block-Editor/issues"},"homepage":"https://github.com/AponAhmed/JS-Client-for-Block-Editor#readme","gitHead":"e4c183f757cf634b68b1db89f799587b706afa44","_id":"@aponahmed/blockeditor-js-client@1.0.0","_nodeVersion":"18.18.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-HlQtcZgmZx0aDJ8qQwkRx1u64oKP79rQMAd+rqw1aHYgm1JjqbGwUVonImJKMkrEilu41lCAgC2wHlJbWpMcZA==","shasum":"3d34e3d0e10f71f28ce271575f119c4aecfe08dd","tarball":"https://registry.npmjs.org/@aponahmed/blockeditor-js-client/-/blockeditor-js-client-1.0.0.tgz","fileCount":13,"unpackedSize":21422,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC72B6DMfaPp91LN+LeXWYwiSamRkRPMRsA1nsgLONpqwIgCfx/E6MT+PHVpUFfqJr6FqOEYPhrSBiFgZ8qzIw7H+U="}]},"_npmUser":{"name":"m2766","email":"apon2041@gmail.com"},"directories":{},"maintainers":[{"name":"m2766","email":"apon2041@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blockeditor-js-client_1.0.0_1704272525945_0.535220224457154"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aponahmed/blockeditor-js-client","version":"1.0.1","description":"Generated JSON to Build HTML","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["block editor","JSON to HTML","HTML Builder"],"repository":{"type":"git","url":"git+https://github.com/AponAhmed/JS-Client-for-Block-Editor.git"},"author":{"name":"Md. Muhiminul Haque Apon"},"license":"ISC","bugs":{"url":"https://github.com/AponAhmed/JS-Client-for-Block-Editor/issues"},"homepage":"https://github.com/AponAhmed/JS-Client-for-Block-Editor#readme","gitHead":"2a586ee3cf455ceffe359aa6edd2269ec753cbc9","_id":"@aponahmed/blockeditor-js-client@1.0.1","_nodeVersion":"18.18.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-H0BsdcSsyD5RDTOb6JWZmUN/FRE3yCPoLPtn57DHR6DzN5+BIxVrMqV/6UfYA2Xoy5AkbVLDi+cOER7Y/vCpJw==","shasum":"70f362764236eb1337540b924e709c81999d3216","tarball":"https://registry.npmjs.org/@aponahmed/blockeditor-js-client/-/blockeditor-js-client-1.0.1.tgz","fileCount":13,"unpackedSize":21502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDz/0Lv6FQogSPRhTXntjqgdPwK9xtoyg3pYfiPfKDhLwIhAKP/mdnEVHE2Kx9KZJpwNvyjMhKDBgDA2kDYFWqETqJG"}]},"_npmUser":{"name":"m2766","email":"apon2041@gmail.com"},"directories":{},"maintainers":[{"name":"m2766","email":"apon2041@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blockeditor-js-client_1.0.1_1704274762038_0.14129493031114193"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-03T09:02:05.836Z","1.0.0":"2024-01-03T09:02:06.111Z","modified":"2024-01-03T09:39:22.533Z","1.0.1":"2024-01-03T09:39:22.354Z"},"maintainers":[{"name":"m2766","email":"apon2041@gmail.com"}],"description":"Generated JSON to Build HTML","homepage":"https://github.com/AponAhmed/JS-Client-for-Block-Editor#readme","repository":{"type":"git","url":"git+https://github.com/AponAhmed/JS-Client-for-Block-Editor.git"},"author":{"name":"Md. Muhiminul Haque Apon"},"bugs":{"url":"https://github.com/AponAhmed/JS-Client-for-Block-Editor/issues"},"license":"ISC","readme":"# JS-Client-for-Block-Editor\r\n The Block Editor JS Client is a JS Module that facilitate the creation and rendering of HTML elements for a block editor(From JSON data). Json Data generate by a JavaScript App linked Below. It provides an object-oriented approach to building dynamic and customizable layouts.\r\n\r\n\r\n## JSON Builder\r\n   Here is the JSON builder for a block editor : [BlockEditor](https://github.com/AponAhmed/BlockEditor)<br>\r\n   A quick preview of JSON Builder [Codepen](https://codepen.io/apon22/full/abXPPyB)\r\n\r\n\r\n## ElementFactory Class\r\n\r\nThe `ElementFactory` class is part of the Aponahmed HtmlBuilder library, providing a convenient way to create HTML elements from JSON data.\r\n\r\n## Usage\r\n\r\n### Installation\r\n\r\nInclude the `ElementFactory` class in your project by importing it.\r\n\r\n```javascript\r\nimport ElementFactory from \"./path/to/ElementFactory.js\";\r\n```\r\n\r\n### Methods\r\n\r\n#### `createElement(elementData: object): Element`\r\n\r\nThis method creates an HTML element based on the provided `elementData`. It supports various element types such as 'Area', 'Column', 'Editor', 'Image', 'H', 'P', 'li', and 'List'.\r\n\r\n```javascript\r\nconst element = ElementFactory.createElement({ type: 'H', content: 'Hello', tag: 'h1' });\r\n```\r\n\r\n#### `json2html(string: string): string`\r\n\r\nThis method converts a JSON string to HTML by creating elements using `createElement` for each item in the JSON array.\r\n\r\n```javascript\r\nconst jsonData = '[{\"type\":\"Area\",\"direction\":\"column\",\"childs\":[{\"type\":\"H\",\"content\":\"Hello\",\"tag\":\"h1\"}]}]';\r\nconst htmlOutput = ElementFactory.json2html(jsonData);\r\nconsole.log(htmlOutput);\r\n```\r\n\r\n### Classes\r\n\r\n#### `Element`\r\n\r\nThis is an abstract class representing a generic HTML element. Other classes, such as `Area`, `TextElement`, `Content`, `Image`, `ImageWP`, and `ListElement`, extend this class to provide specialized functionality.\r\n\r\n#### `Area`\r\n\r\nRepresents an HTML `<div>` element with child elements. It supports customization of direction, width, and additional styles.\r\n\r\n#### `TextElement`\r\n\r\nRepresents text-based HTML elements such as headings (`<h1>`, `<h2>`, etc.) and paragraphs (`<p>`).\r\n\r\n#### `Content`\r\n\r\nRepresents a content area with customizable styles and content.\r\n\r\n#### `Image`\r\n\r\nRepresents an HTML `<img>` element with alignment, source, width, height, and custom class options.\r\n\r\n#### `ImageWP`\r\n\r\nAn extension of `Image` specifically designed for WordPress, including support for attachment ID and `src-set`.\r\n\r\n#### `ListElement`\r\n\r\nRepresents HTML list elements (`<ul>` and  `<ol>`) with child items.\r\n","readmeFilename":"README.md","keywords":["block editor","JSON to HTML","HTML Builder"]}