{"_rev":"3-bef54c4473cf415ba9b126d912bd42f5","time":{"created":"2024-07-04T10:23:34.369Z","modified":"2024-07-04T10:23:35.027Z","1.0.0":"2024-07-04T08:13:44.820Z","1.0.1":"2024-07-04T10:23:34.759Z"},"_id":"@167pluto/rte","name":"@167pluto/rte","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@167pluto/rte","version":"1.0.1","description":"Pluto Rich Text Editor","scripts":{"build":"tsup","lint":"eslint ./src --fix"},"repository":{"type":"git","url":"git+https://github.com/167Pluto/rich-text-editor.git"},"author":{"name":"167Pluto"},"license":"ISC","bugs":{"url":"https://github.com/167Pluto/rich-text-editor.git/issues"},"homepage":"https://github.com/167Pluto/rich-text-editor.git#readme","devDependencies":{"@swc/core":"^1.6.5","@types/fs-extra":"^11.0.4","@types/lodash":"^4.17.6","@types/prettier":"^2.7.1","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","copyfiles":"^2.4.1","fs-extra":"^11.2.0","lodash":"^4.17.21","prettier":"^2.7.1","react":"^18.3.1","tsup":"^8.1.0","typescript":"^5.5.2"},"dependencies":{"@lexical/react":"^0.16.0","axios":"^1.7.2","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.1.3","eslint-plugin-react":"^7.34.3","prettier-eslint-cli":"^8.0.1"},"main":"./dist/index.js","module":"./dist/index.mjs","typings":"./dist/index.d.ts","packageManager":"yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447","gitHead":"7dd9f99e0e02e9fdf81584e3d2a4e49f99b5ba49","_id":"@167pluto/rte@1.0.1","_nodeVersion":"20.14.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-HBbKRw/mcgkwaAOXJ85xdXnsrNNNzinssY9IM3Do5XGndYy9OQN0NPE/0PNu68oE7zIpp+drRpiKzQYZzz1EIg==","shasum":"1dd7990e6d2475a29fcd6e59fae02ee4cc921a6b","tarball":"https://registry.npmjs.org/@167pluto/rte/-/rte-1.0.1.tgz","fileCount":109,"unpackedSize":1905687,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8MQds7Y69LiUBiqAahUuC3Uj1h8/jueg9LZK8vau68wIhAK3zF1iGbEh7TdJoXiYV0w7v+E9xoI2SeEclGolwbFUV"}]},"_npmUser":{"name":"167pluto","email":"business@167pluto.com"},"directories":{},"maintainers":[{"name":"167pluto","email":"business@167pluto.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rte_1.0.1_1720088614459_0.8595173088394803"},"_hasShrinkwrap":false}},"maintainers":[{"name":"167pluto","email":"business@167pluto.com"}],"description":"Pluto Rich Text Editor","homepage":"https://github.com/167Pluto/rich-text-editor.git#readme","repository":{"type":"git","url":"git+https://github.com/167Pluto/rich-text-editor.git"},"author":{"name":"167Pluto"},"bugs":{"url":"https://github.com/167Pluto/rich-text-editor.git/issues"},"license":"ISC","readme":"### Creating an editor and using it\r\n\r\nTo create and use the editor, import PlutoRTE and DEFAULT_EDITOR_STATE, and provide the necessary props:\r\n\r\n```js\r\nimport { PlutoRTE, DEFAULT_EDITOR_STATE } from '@167pluto/rte';\r\nimport axios from '~/utils/axios';\r\n\r\nconst SomeComponent = () => {\r\n  const editorRef = useRef < null > null;\r\n\r\n  return <PlutoRTE editorRef={editorRef} initialEditorState={DEFAULT_EDITOR_STATE} axiosInstance={axios} mediaUploadEndpoint={'/media'} />;\r\n};\r\n```\r\n\r\n### Generating rich text editor's JSON\r\n\r\nTo generate the editor's JSON representation, use the generateJSON function:\r\n\r\n```js\r\nimport { generateJSON } from '@167pluto/rte';\r\n\r\nconst SomeComponent = () => {\r\n  const editorRef = useRef < null > null;\r\n\r\n  const json = generateJSON(editorRef);\r\n\r\n  return <PlutoRTE editorRef={editorRef} initialEditorState={DEFAULT_EDITOR_STATE} axiosInstance={axios} mediaUploadEndpoint={'/media'} />;\r\n};\r\n```\r\n\r\n### Converting Editor JSON to HTML\r\n\r\nTo convert the editor's JSON output to HTML, use the convertToHTML function:\r\n\r\n```js\r\nimport { convertToHTML } from '@167pluto/rte';\r\n\r\nconst SomeComponent = () => {\r\n  const htmlString = convertToHTML(editorJSON);\r\n\r\n  return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>;\r\n};\r\n```\r\n\r\n### Displaying Embedded Tweets\r\n\r\nTo display embedded Twitter posts, add the following useEffect hook to your component:\r\n\r\n```js\r\nimport { convertToHTML } from '@167pluto/rte';\r\n\r\nconst SomeComponent = () => {\r\n  const htmlString = convertToHTML(editorJSON);\r\n\r\n  useEffect(() => {\r\n    const script = document.createElement('script');\r\n    script.src = 'https://platform.twitter.com/widgets.js';\r\n    script.async = true;\r\n    document.body.appendChild(script);\r\n\r\n    return () => {\r\n      document.body.removeChild(script);\r\n    };\r\n  }, [htmlString]);\r\n\r\n  return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>;\r\n};\r\n```\r\n\r\n### Toolbar options\r\n\r\nThe toolbar in Pluto Rich Text Editor is fully customizable. Here's the default configuration:\r\n\r\n```javascript\r\nconst toolbarOptions = {\r\n  normal: true,\r\n  heading1: true,\r\n  heading2: true,\r\n  heading3: true,\r\n  heading4: true,\r\n  heading5: true,\r\n  heading6: true,\r\n  bulletList: true,\r\n  numberedList: true,\r\n  bold: true,\r\n  italic: true,\r\n  underline: true,\r\n  strikethrough: true,\r\n  link: true,\r\n  subscript: true,\r\n  superscript: true,\r\n  image: true,\r\n  leftAlign: true,\r\n  rightAlign: true,\r\n  centerAlign: true,\r\n  justifyAlign: true,\r\n  startAlign: true,\r\n  outdent: true,\r\n  indent: true,\r\n  endAlign: true,\r\n  twitter: true,\r\n  youtube: true\r\n};\r\n```\r\n\r\nBy default, all tools are enabled. To exclude specific tools, set their values to false in the toolbarOptions prop:\r\n\r\n```js\r\nimport { PlutoRTE, DEFAULT_EDITOR_STATE } from '@167pluto/rte';\r\nimport axios from '~/utils/axios';\r\n\r\nconst SomeComponent = () => {\r\n  const editorRef = useRef < null > null;\r\n\r\n  return (\r\n    <PlutoRTE\r\n      editorRef={editorRef}\r\n      initialEditorState={DEFAULT_EDITOR_STATE}\r\n      axiosInstance={axios}\r\n      mediaUploadEndpoint={'/media'}\r\n      toolbarOptions={{\r\n        header1: false,\r\n        twitter: false\r\n      }}\r\n    />\r\n  );\r\n};\r\n```\r\n\r\nIn toolbarOptions prop just send tools that you want to be excluded.\r\nMore tools are on the way.\r\n","readmeFilename":"README.md"}