{"_id":"@douganderson444/svelte-html-editor","_rev":"1-2c692f1417e61099e53c1f6dcb983c1d","name":"@douganderson444/svelte-html-editor","dist-tags":{"latest":"2.3.2"},"versions":{"2.3.1":{"name":"@douganderson444/svelte-html-editor","version":"2.3.1","devDependencies":{"@sveltejs/adapter-auto":"next","@sveltejs/kit":"next","prettier":"^2.5.1","prettier-plugin-svelte":"^2.5.0","svelte":"^3.44.0","svelte-check":"^2.2.6","svelte-preprocess":"^4.10.1","svelte2tsx":"^0.5.10","tslib":"^2.3.1","typescript":"~4.6.2"},"type":"module","exports":{"./package.json":"./package.json","./Editor.svelte":"./Editor.svelte",".":"./index.js"},"svelte":"./index.js","types":"./index.d.ts","gitHead":"383675e2236e78dd44492714308985ae8ac46cf8","description":"Edit HTML text. Forked from [https://github.com/nenadpnc/cl-editor](https://github.com/nenadpnc/cl-editor) but using SvelteKit.","_id":"@douganderson444/svelte-html-editor@2.3.1","_nodeVersion":"16.8.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-PO3kWxqbfzlm80kJko+UB3UC70Dk16GMZ1CpU3NeFsXRK24OTM6Qy9UuyKWqUVZXbtgndh5msGmQMg1gwSFQag==","shasum":"403b9efead7305e0afa48b7ed54063a0b3bfc8eb","tarball":"https://registry.npmjs.org/@douganderson444/svelte-html-editor/-/svelte-html-editor-2.3.1.tgz","fileCount":16,"unpackedSize":49952,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjydasMsylObiFS7yzDGlGUg/glwj1/lSS7vHGBqzQEAiEA6NdBHB7kKliTp7uUndlOGMuBgDWQMaU/y92xiR8ikH8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigT1oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoueA/+McMMkn7kueNpiSz2WZIwXMMgSut7Ew0hwBV4q3dis83AeNe1\r\nUBlbVar/6y08l2feFoQOjZ4Tw3Y3vPN53LovWoQlU8PkL55YeNBkaFb4ruci\r\ngEgWlbFrwA9m7T0gLbKlNrfeq9Q1rdsVkKcBVU6aEROZpTlUEW0mx0yqJhQD\r\nIuida/VfOKnpMBbiAnuymWzjP6riD4f9eGB3hG30I9k2dRhzAS0JlJdWG6rZ\r\nbauPm/cLDcUEN0+y8r90WkfRY9h+PgJEAy+TwYeKLHIBrlnSqLJxK6e5bqjN\r\nXtLepj2xED8/tXGQl9KwQMviTjMv6BfUfz12Eah0+yV7sMDrkyCaQl9e6bRA\r\nWT8uGTbOBxYuRVEufMCx6P4y6q0/QVNlpH8MYTxVoETSTzLWjUUYn9Y0y6SJ\r\n3Q0v2LrDe56ggubENClpFif9oquZhIqnfyJHIyv9L1VWzdi3Et+Rxtc73EL+\r\nG6bQevXUoJ46Sl67NuPJkF750fgLUoXxDnIVz4X8PoV1xvLFDzTwFj38L8PR\r\nvtH5eFr0JZBNnU/oxdFyeeDv06LwaxmBYeSODzeL7u71Kb5yqEt5Jf7XOerU\r\nqm7XHNlII0/GbK/PnGH3yycuZvLL7W6SUVBuNX+ooTqsqAxdaL/3zJAo9v6y\r\nae960l82H0rX4E682lO75XwcUnnzbBkb0u0=\r\n=E1ta\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"douganderson444","email":"douganderson444@gmail.com"},"directories":{},"maintainers":[{"name":"douganderson444","email":"douganderson444@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-html-editor_2.3.1_1652637032744_0.3814528030309021"},"_hasShrinkwrap":false},"2.3.2":{"name":"@douganderson444/svelte-html-editor","version":"2.3.2","devDependencies":{"@sveltejs/adapter-auto":"next","@sveltejs/adapter-static":"^1.0.0-next.30","@sveltejs/kit":"1.0.0-next.327","prettier":"^2.5.1","prettier-plugin-svelte":"^2.5.0","svelte":"^3.44.0","svelte-check":"^2.2.6","svelte-preprocess":"^4.10.1","svelte2tsx":"^0.5.10","tslib":"^2.3.1","typescript":"~4.6.2"},"type":"module","exports":{"./package.json":"./package.json","./Editor.svelte":"./Editor.svelte",".":"./index.js"},"svelte":"./index.js","types":"./index.d.ts","gitHead":"a0094f0144122f79dbf849b6bfb7b534920a037b","description":"Edit HTML text. Forked from [https://github.com/nenadpnc/cl-editor](https://github.com/nenadpnc/cl-editor) but using SvelteKit.","_id":"@douganderson444/svelte-html-editor@2.3.2","_nodeVersion":"16.8.0","_npmVersion":"8.6.0","dist":{"integrity":"sha512-2Iq/T6T/788b/01w8akEkJcwlZzeekrs19NQZur/8a0JR2ly6145ZJeLNdOk5is5KLlensalwimd68EygzoIDQ==","shasum":"22ebde00ec5928512cc62c86955953907eb91257","tarball":"https://registry.npmjs.org/@douganderson444/svelte-html-editor/-/svelte-html-editor-2.3.2.tgz","fileCount":16,"unpackedSize":50191,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs1HspJtXLE8Fl/+J4QQkNBjjrFmSq3qXkvTGGeMCtvAIgQ8/jCwVZ9jTzp5nLj/pW63Q7xmfqBYTqt68inAjShdU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigse3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKMBAAib+l5STPGhIP4i2kX+II0N2ZtF+ANlHqNNDh7cMPYjVv9LdE\r\nV1obPSuU5BldN8r6ITD+V7wjoFSHJLEBJOrWconT9sndXFhURffBfdoXQLu3\r\n189W8uovpsZqt57w5mbFj2bI7C7q+Eir0Nwm9q78UGfDroRzn34xu/m5FyJw\r\n+pEdrb+PDstoPfVHseAACKGQ9xt1cY1DAANkLU0louXcNhjUSF+9ABHvmXpf\r\nhUR2hpbROe/haPHm/2VXu0dBKzepItJ6C3L4CEucbTZiq89uGtVlUkE4LvYP\r\n8jRY8kqGFrp4MBJvCnDWGYBFo0dYDtFh53cPcZmJDTt5sgG0VU6LcrpU2jGB\r\nF54WsptTj4G8kgFTpTS+ELq/7B1bJljUfKxR5kUnKtt1IykttvBlEgb7OOBe\r\nyhqzlWZYhznPz7zbwU2zuCXPCz5ldLfVJhmUuakmetwTv40B1UZt/Fu+6cUH\r\nxSwpqLNU3QMox9E1WNhZBdAXvPHhAWWO8LwBHvKPMdHWrpi2GylYOeByM/Lq\r\ntmOTL/JRfHvVaE1547oY71kCKJmgl/iHt+HCKRhZzhnol3ixiZ7ksF26N/Y8\r\nl62+jltrEwTe6IeXPCiq1gt/P2cs8T5sq/FRXkyzj3olmhrPkmGjsXGSzt55\r\nLZtcO+t1K9QO6IsZcT/zwdnBd0aWEOMM6P8=\r\n=1TjJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"douganderson444","email":"douganderson444@gmail.com"},"directories":{},"maintainers":[{"name":"douganderson444","email":"douganderson444@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-html-editor_2.3.2_1652737975610_0.6418066016868513"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-15T17:50:32.664Z","2.3.1":"2022-05-15T17:50:32.930Z","modified":"2022-05-16T21:52:55.869Z","2.3.2":"2022-05-16T21:52:55.792Z"},"maintainers":[{"name":"douganderson444","email":"douganderson444@gmail.com"}],"description":"Edit HTML text. Forked from [https://github.com/nenadpnc/cl-editor](https://github.com/nenadpnc/cl-editor) but using SvelteKit.","readme":"# Svelte Text Editor\n\nEdit HTML text. Forked from [https://github.com/nenadpnc/cl-editor](https://github.com/nenadpnc/cl-editor) but using SvelteKit.\n\n## Lightweight text editor\n\nBuilt with svelte (no external dependencies)\n\n#### File size (bundle includes css, html and js)\n\n- min: 30kb\n- gzip: 10kb\n\n## Installation\n\n#### npm:\n\n```bash\nnpm install --save @douganderson444/svelte-html-editor\n```\n\n#### HTML:\n\n```html\n<head>\n\t...\n</head>\n<body>\n\t...\n\t<div id=\"editor\"></div>\n\t...\n</body>\n```\n\n## Usage\n\n```js\nimport Editor from '@douganderson444/svelte-html-editor/Editor.svelte';\n```\n\n```js\n// Initialize editor\nconst editor = new Editor({\n\t// <HTMLElement> required\n\ttarget: document.getElementById('editor'),\n\t// optional\n\tprops: {\n\t\t// <Array[string | Object]> string if overwriting, object if customizing/creating\n\t\t// available actions:\n\t\t// 'viewHtml', 'undo', 'redo', 'b', 'i', 'u', 'strike', 'sup', 'sub', 'h1', 'h2', 'p', 'blockquote',\n\t\t// 'ol', 'ul', 'hr', 'left', 'right', 'center', 'justify', 'a', 'image', 'forecolor', 'backcolor', 'removeFormat'\n\t\tactions: [\n\t\t\t'b',\n\t\t\t'i',\n\t\t\t'u',\n\t\t\t'strike',\n\t\t\t'ul',\n\t\t\t'ol',\n\t\t\t{\n\t\t\t\tname: 'copy', // required\n\t\t\t\ticon: '<b>C</b>', // string or html string (ex. <svg>...</svg>)\n\t\t\t\ttitle: 'Copy',\n\t\t\t\tresult: () => {\n\t\t\t\t\t// copy current selection or whole editor content\n\t\t\t\t\tconst selection = window.getSelection();\n\t\t\t\t\tif (!selection.toString().length) {\n\t\t\t\t\t\tconst range = document.createRange();\n\t\t\t\t\t\trange.selectNodeContents(editor.refs.editor);\n\t\t\t\t\t\tselection.removeAllRanges();\n\t\t\t\t\t\tselection.addRange(range);\n\t\t\t\t\t}\n\t\t\t\t\teditor.exec('copy');\n\t\t\t\t}\n\t\t\t},\n\t\t\t'h1',\n\t\t\t'h2',\n\t\t\t'p'\n\t\t],\n\t\t// default 300px\n\t\theight: '300px',\n\t\t// initial html\n\t\thtml: '',\n\t\t// remove format action clears formatting, but also removes some html tags.\n\t\t// you can specify which tags you want to be removed.\n\t\tremoveFormatTags: ['h1', 'h2', 'blackquote'] // default\n\t}\n});\n```\n\n### API\n\n```js\n// Methods\neditor.exec(cmd: string, value?: string) // execute document command (document.executeCommand(cmd, false, value))\neditor.getHtml(sanitize?: boolean) // returns html string from editor. if passed true as argument, html will be sanitized before return\neditor.getText() // returns text string from editor\neditor.setHtml(html: string, sanitize?: boolean) // sets html for editor. if second argument is true, html will be sanitized\neditor.saveRange() // saves current editor cursor position or user selection\neditor.restoreRange() // restores cursor position or user selection\n// saveRange and restoreRange are useful when making custom actions\n// that demands that focus is shifted from editor to, for example, modal window.\n```\n\n- For list of available _**exec**_ command visit [https://codepen.io/netsi1964/pen/QbLLG](https://codepen.io/netsi1964/pen/QbLLGW)\n\n```js\n// Events\neditor.$on('change', (event) => console.log(event)); // on every keyup event\neditor.$on('blur', (event) => console.log(event)); // on editor blur event\n```\n\n```js\n// Props\neditor.refs.<editor | raw | modal | colorPicker> // references to editor, raw (textarea), modal and colorPicker HTMLElements\n```\n\n#### Actions\n\nThe `actions` prop lists predefined actions (and/or adds new actions) to be shown in the toolbar.\nIf the prop is not set, all `actions` defined and exported in [actions.js](src/_helpers/actions.js) are made available, in the order in which they are defined.\nTo limit or change the order of predefined actions shown, set it by passing an array of names of actions defined, eg.:\n\n```js\nactions={[\"b\", \"i\", \"u\", \"h2\", \"ul\", \"left\", \"center\", \"justify\", \"forecolor\"]}\n```\n\nThe editor looks up to see if name is already defined, and adds it to the toolbar if it is.\n\nYou can add a custom action by inserting it in the array, like how \"copy\" is defined in example above. Take a look at `actions.js` for more examples.\n\n### Usage in Svelte\n\nIt is easier to import and work directly from the source if you are using Svelte. You can handle `change` events via `on:change`.\n\n```jsx\n<script>\n  import Editor from \"@douganderson444/svelte-html-editor/Editor.svelte\"\n\n  let html = '<h3>hello</h3>'\n  let editor\n\n</script>\n\n{@html html}\n<Editor {html} on:change={(evt)=>html = evt.detail}/>\n```\n\n### Example of customising the color picker palette\n\n```jsx\n<script>\n  import Editor from \"@douganderson444/svelte-html-editor/src/Editor.svelte\"\n\n  let html = '<h3>hello</h3>'\n  let colors = ['#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff',\n        '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff',\n        '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff',\n        '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2',\n        '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466']\n  let editor\n\n</script>\n\n{@html html}\n<Editor {html} {colors} on:change={(evt)=>html = evt.detail}/>\n```\n\nTo limit or define the tools shown in the toolbar, pass in an `actions` prop.\n\nTo easily get the editor content DOM element, pass an `contentId` prop, eg. `contentId='notes-content'`.\n\nThis is useful if you want to listen to resize of the editor and respond accordingly.\n\nTo do so, first enable resize on the editor:\n\n```css\n.cl-content {\n\tresize: both;\n}\n```\n\nNow observe the resize:\n\n```jsx\n<script>\n  const ro = new ResizeObserver(entries => {\n    const contentWd = entries[0].contentRect.width\n    // respond to contentWd ...\n  })\n  let editor\n  $: editor && ro.observe(document.getElementById('notes-content'))\n</script>\n\n<Editor {...otherEditorCfgs} contentId='notes-content' bind:this={editor} />\n```\n\n### Run demo\n\nClone the repo, then:\n\n```bash\nnpm i\nnpm run dev\n```\n\n## References\n\nThis library is inspired by these open source repos:\n\n- [https://github.com/nenadpnc/cl-editor](https://github.com/nenadpnc/cl-editor)\n- [Alex-D/Trumbowyg](https://github.com/Alex-D/Trumbowyg)\n- [jaredreich/pell](https://github.com/jaredreich/pell)\n\n## Licence\n\nMIT License\n","readmeFilename":"README.md"}