{"_id":"@drenso-toast-ui/editor-plugin-color-syntax","_rev":"3-2dd8f2a15ccffd14e91bdb993731558e","name":"@drenso-toast-ui/editor-plugin-color-syntax","dist-tags":{"latest":"3.4.1"},"versions":{"3.1.0":{"name":"@drenso-toast-ui/editor-plugin-color-syntax","version":"3.1.0","keywords":["nhn","nhn cloud","toast","toastui","toast-ui","editor","plugin","color-syntax","color-picker"],"author":{"name":"NHN Cloud FE Development Lab","email":"dl_javascript@nhn.com"},"license":"MIT","_id":"@drenso-toast-ui/editor-plugin-color-syntax@3.1.0","maintainers":[{"name":"bobvandevijver","email":"bobvandevijver@hotmail.com"}],"homepage":"https://ui.toast.com","bugs":{"url":"https://github.com/nhn/tui.editor/issues"},"dist":{"shasum":"ba47a0a180a79e79aaba1a3bcabb76f6bb2120b1","tarball":"https://registry.npmjs.org/@drenso-toast-ui/editor-plugin-color-syntax/-/editor-plugin-color-syntax-3.1.0.tgz","fileCount":5,"integrity":"sha512-QP+4vGr5+13TuCsdRsPI5CHiVxw+S7TU24DYBmTrMYXeg6CKg6HUGcqzC6tSKFu9ssHG+7gF2gWvzBrUjeeOXg==","signatures":[{"sig":"MEQCIAeVaSrOHG3wzxtHWuaiQSQ0/lTMfPt/RGmYyl3QxQDZAiBHufH+HI9MIxz8edpmsbaXGhe+z9z21N1TXNTrWzjYUA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26795},"main":"dist/toastui-editor-plugin-color-syntax.js","types":"types/index.d.ts","gitHead":"77fa9c23ff727abcde44748ec1e3dad53ca430d9","scripts":{"lint":"eslint .","test":"jest --watch","build":"webpack build && npm run build:cdn","serve":"snowpack dev","test:ci":"jest","serve:ie":"webpack serve","build:cdn":"webpack build --env cdn & webpack build --env cdn minify","test:types":"tsc"},"_npmUser":{"name":"bobvandevijver","email":"bobvandevijver@hotmail.com"},"repository":{"url":"git+https://github.com/nhn/tui.editor.git","type":"git","directory":"plugins/color-syntax"},"_npmVersion":"11.8.0","description":"TOAST UI Editor : Color Syntax Plugin","directories":{},"_nodeVersion":"24.13.1","browserslist":"last 2 versions, not ie <= 10","dependencies":{"tui-color-picker":"^2.2.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/editor-plugin-color-syntax_3.1.0_1773332523786_0.5252047553776569","host":"s3://npm-registry-packages-npm-production"}},"3.4.1":{"name":"@drenso-toast-ui/editor-plugin-color-syntax","version":"3.4.1","keywords":["nhn","nhn cloud","toast","toastui","toast-ui","editor","plugin","color-syntax","color-picker"],"author":{"name":"NHN Cloud FE Development Lab","email":"dl_javascript@nhn.com"},"license":"MIT","_id":"@drenso-toast-ui/editor-plugin-color-syntax@3.4.1","maintainers":[{"name":"bobvandevijver","email":"bobvandevijver@hotmail.com"}],"homepage":"https://ui.toast.com","bugs":{"url":"https://github.com/Drenso/tui.editor/issues"},"dist":{"shasum":"560e5b21422114b8f4e0ce1855c57bd14b8456e6","tarball":"https://registry.npmjs.org/@drenso-toast-ui/editor-plugin-color-syntax/-/editor-plugin-color-syntax-3.4.1.tgz","fileCount":5,"integrity":"sha512-WL4fUdbiEsEzEgeJ0J1oKM/Bt+gS4wdWRevCTnqGMovDpjSXSjYct0gEP8hS/TZ8tftK9vK07n1Xh70Zyata4Q==","signatures":[{"sig":"MEUCID4WuyGrEDG3GMGke/p7J20WfU/k6pQBcZu+sXWI/ieMAiEArhNN9o7t4QUWouFNgTf6fe6Ku2oH1VSphroUZ4oDruA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@drenso-toast-ui%2feditor-plugin-color-syntax@3.4.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":26585},"main":"dist/toastui-editor-plugin-color-syntax.js","types":"types/index.d.ts","gitHead":"5236ae0607fb1dac28c0a47bc25c60af1f25730f","scripts":{"lint":"eslint .","test":"jest --watch","build":"webpack build && npm run build:cdn","serve":"webpack serve","test:ci":"jest","build:cdn":"webpack build --env cdn & webpack build --env cdn minify","test:types":"tsc"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:e8056a48-ede3-4642-8ba2-fa98405fdb36"}},"repository":{"url":"git+https://github.com/Drenso/tui.editor.git","type":"git","directory":"plugins/color-syntax"},"_npmVersion":"11.9.0","description":"TOAST UI Editor : Color Syntax Plugin","directories":{},"_nodeVersion":"24.14.0","browserslist":"last 2 versions, not ie <= 10","dependencies":{"tui-color-picker":"^2.2.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"cross-env":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/editor-plugin-color-syntax_3.4.1_1773337761701_0.7237109009860023","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-03-12T16:22:03.720Z","modified":"2026-03-13T04:07:00.350Z","3.1.0":"2026-03-12T16:22:03.942Z","3.4.1":"2026-03-12T17:49:21.839Z"},"bugs":{"url":"https://github.com/Drenso/tui.editor/issues"},"author":{"name":"NHN Cloud FE Development Lab","email":"dl_javascript@nhn.com"},"license":"MIT","homepage":"https://ui.toast.com","keywords":["nhn","nhn cloud","toast","toastui","toast-ui","editor","plugin","color-syntax","color-picker"],"repository":{"url":"git+https://github.com/Drenso/tui.editor.git","type":"git","directory":"plugins/color-syntax"},"description":"TOAST UI Editor : Color Syntax Plugin","maintainers":[{"email":"bobvandevijver@hotmail.com","name":"bobvandevijver"},{"email":"tobias93@live.nl","name":"tobiasfeijten"}],"readme":"# TOAST UI Editor : Color Syntax Plugin\n\n> This is a plugin of [TOAST UI Editor](https://github.com/Drenso/tui.editor/tree/master/apps/editor) to color editing text.\n\n[![npm version](https://img.shields.io/npm/v/@drenso-toast-ui/editor-plugin-color-syntax.svg)](https://www.npmjs.com/package/@drenso-toast-ui/editor-plugin-color-syntax)\n\n![color-syntax](https://user-images.githubusercontent.com/37766175/121813686-28710680-cca8-11eb-87c6-1dc9625369b0.png)\n\n## 🚩 Table of Contents\n\n- [Bundle File Structure](#-bundle-file-structure)\n- [Usage npm](#-usage-npm)\n- [Usage CDN](#-usage-cdn)\n\n## 📁 Bundle File Structure\n\n### Files Distributed on npm\n\n```\n- node_modules/\n  - @drenso-toast-ui/\n    - editor-plugin-color-syntax/\n      - dist/\n        - toastui-editor-plugin-color-syntax.js\n        - toastui-editor-plugin-color-syntax.css\n```\n\n### Files Distributed on CDN\n\nThe bundle files include all dependencies of this plugin.\n\n```\n- uicdn.toast.com/\n  - editor-plugin-color-syntax/\n    - latest/\n      - toastui-editor-plugin-color-syntax.js\n      - toastui-editor-plugin-color-syntax.min.js\n      - toastui-editor-plugin-color-syntax.css\n      - toastui-editor-plugin-color-syntax.min.css\n```\n\n## 📦 Usage npm\n\nTo use the plugin, [`@drenso-toast-ui/editor`](https://github.com/Drenso/tui.editor/tree/master/apps/editor) must be installed.\n\n> Ref. [Getting Started](https://github.com/Drenso/tui.editor/blob/master/docs/en/getting-started.md)\n\n### Install\n\n```sh\n$ npm install @drenso-toast-ui/editor-plugin-color-syntax\n```\n\n### Import Plugin\n\nAlong with the plugin, the plugin's dependency style must be imported. The `color-syntax` plugin has [TOAST UI Color Picker](https://github.com/nhn/tui.color-picker) as a dependency, and you need to add a CSS file of TOAST UI Color Picker.\n\n#### ES Modules\n\n```js\nimport 'tui-color-picker/dist/tui-color-picker.css';\nimport '@drenso-toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';\n\nimport colorSyntax from '@drenso-toast-ui/editor-plugin-color-syntax';\n```\n\n#### CommonJS\n\n```js\nrequire('tui-color-picker/dist/tui-color-picker.css');\nrequire('@drenso-toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css');\n\nconst colorSyntax = require('@drenso-toast-ui/editor-plugin-color-syntax');\n```\n\n### Create Instance\n\n#### Basic\n\n```js\n// ...\nimport 'tui-color-picker/dist/tui-color-picker.css';\nimport '@drenso-toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';\n\nimport Editor from '@drenso-toast-ui/editor';\nimport colorSyntax from '@drenso-toast-ui/editor-plugin-color-syntax';\n\nconst editor = new Editor({\n  // ...\n  plugins: [colorSyntax]\n});\n```\n\n## 🗂 Usage CDN\n\nTo use the plugin, the CDN files(CSS, Script) of `@drenso-toast-ui/editor` must be included.\n\n### Include Files\n\n```html\n...\n<head>\n  ...\n  <link\n    rel=\"stylesheet\"\n    href=\"https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css\"\n  />\n  <link\n    rel=\"stylesheet\"\n    href=\"https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.css\"\n  />\n  ...\n</head>\n<body>\n  ...\n  <!-- Color Picker -->\n  <script src=\"https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js\"></script>\n  <!-- Editor -->\n  <script src=\"https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js\"></script>\n  <!-- Editor's Plugin -->\n  <script src=\"https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.js\"></script>\n  ...\n</body>\n...\n```\n\n### Create Instance\n\n#### Basic\n\n```js\nconst { Editor } = toastui;\nconst { colorSyntax } = Editor.plugin;\n\nconst editor = new Editor({\n  // ...\n  plugins: [colorSyntax]\n});\n```\n\n### [Optional] Use Plugin with Options\n\nThe `color-syntax` plugin can set options when used. Just add the plugin function and options related to the plugin to the array(`[pluginFn, pluginOptions]`) and push them to the `plugins` option of the editor.\n\nThe following options are available in the `color-syntax` plugin.\n\n| Name              | Type             | Default Value | Description                      |\n| ----------------- | ---------------- | ------------- | -------------------------------- |\n| `preset`          | `Array.<string>` |               | Preset for color palette         |\n\n```js\n// ...\nimport 'tui-color-picker/dist/tui-color-picker.css';\nimport '@drenso-toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';\n\nimport Editor from '@drenso-toast-ui/editor';\nimport colorSyntax from '@drenso-toast-ui/editor-plugin-color-syntax';\n\nconst colorSyntaxOptions = {\n  preset: ['#181818', '#292929', '#393939']\n};\n\nconst editor = new Editor({\n  // ...\n  plugins: [[colorSyntax, colorSyntaxOptions]]\n});\n```\n","readmeFilename":"README.md"}