{"_id":"@awaydrasil/element-tiptap","_rev":"5-c791966392724deff907f419f887e28f","time":{"1.27.0":"2021-12-05T19:39:10.368Z","1.28.1":"2021-12-05T19:39:10.368Z","created":"2021-12-05T20:14:44.783Z","1.28.0":"2021-12-05T20:14:45.019Z","modified":"2022-04-04T16:49:31.016Z"},"name":"@awaydrasil/element-tiptap","dist-tags":{"latest":"1.28.0"},"versions":{"1.28.0":{"name":"@awaydrasil/element-tiptap","version":"1.28.0","description":"A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue","author":{"name":"kamil-hammouche"},"scripts":{"serve":"vue-cli-service serve --open examples/main.js","lint":"vue-cli-service lint","build:example":"vue-cli-service build --dest dist examples/main.js","build:lib":"rollup -c --environment BUILD:production","semantic-release":"semantic-release"},"main":"lib/element-tiptap.common.js","module":"lib/element-tiptap.esm.js","unpkg":"lib/element-tiptap.min.js","jsdelivr":"lib/element-tiptap.min.js","types":"lib/index.d.ts","dependencies":{"@juggle/resize-observer":"^3.1.2","codemirror":"^5.54.0","core-js":"^3.4.3","prosemirror-utils":"^0.9.6","tiptap":"^1.26.6","tiptap-extensions":"^1.28.6","vue-awesome":"^4.0.2","vue-class-component":"^7.0.2","vue-property-decorator":"^8.3.0"},"devDependencies":{"@babel/core":"^7.7.5","@babel/preset-env":"^7.7.6","@rollup/plugin-alias":"^3.0.1","@semantic-release/changelog":"^5.0.0","@semantic-release/commit-analyzer":"^8.0.1","@semantic-release/git":"^9.0.0","@types/prosemirror-commands":"^1.0.1","@types/prosemirror-model":"^1.7.2","@types/prosemirror-state":"^1.2.3","@types/prosemirror-view":"^1.11.2","@typescript-eslint/eslint-plugin":"^2.18.0","@typescript-eslint/parser":"^2.18.0","@vue/cli-plugin-babel":"~4.4.1","@vue/cli-plugin-eslint":"~4.4.6","@vue/cli-plugin-router":"~4.2.2","@vue/cli-plugin-typescript":"~4.4.1","@vue/cli-service":"~4.4.6","@vue/eslint-config-standard":"^5.1.0","@vue/eslint-config-typescript":"^5.0.1","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-component":"^1.1.1","element-ui":"^2.13.0","eslint":"^6.7.2","eslint-plugin-import":"^2.20.1","eslint-plugin-node":"^11.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.0","eslint-plugin-vue":"^6.1.2","lint-staged":"^10.0.8","node-sass":"^6.0.1","postcss-preset-env":"^6.7.0","rollup":"^2.15.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-dts":"^1.4.7","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-postcss":"^2.0.3","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"^5.1.3","rollup-plugin-typescript2":"^0.27.1","rollup-plugin-vue":"^5.1.4","sass-loader":"^12.0.1","semantic-release":"^17.0.4","typescript":"~3.9.3","vue":"^2.6.10","vue-router":"^3.1.3","vue-template-compiler":"^2.6.10"},"peerDependencies":{"element-ui":"^2.0.0","vue":"^2.0.0"},"resolutions":{"prosemirror-model":"1.9.1"},"bugs":{"url":"https://github.com/kamil-hammouche/element-tiptap/issues"},"gitHooks":{"pre-commit":"lint-staged"},"homepage":"https://github.com/kamil-hammouche/element-tiptapr#readme","keywords":["editor","element","element-ui","tiptap","prosemirror","vue.js","wysiwyg"],"license":"MIT","lint-staged":{"*.{js,vue}":["vue-cli-service lint","git add"]},"repository":{"type":"git","url":"git+https://github.com/kamil-hammouche/element-tiptap.git"},"gitHead":"96bbbdd13ec9823d965c587cb97f1953f4ba9624","_id":"@awaydrasil/element-tiptap@1.28.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.7","dist":{"integrity":"sha512-Ag0WVEuuc/L/RXpyE0+JE842Njws9KEZvU+3B2Z8W45pKdaCAW/mjt1aJMqnyr1wXRKvSkJ0v4o5530Z/BmM3A==","shasum":"56e040a8fe17d99743ba0ca8b67c114e370a7372","tarball":"https://registry.npmjs.org/@awaydrasil/element-tiptap/-/element-tiptap-1.28.0.tgz","fileCount":108,"unpackedSize":1272233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrR21CRA9TVsSAnZWagAACzgP/2HWL7kqW+E9/ixJSLnU\nAxxo8ZZtiwE6woutzl9/fISHvx63GEdVRw6sWRBFw9ZozNxJ3hKBOQL9F2FU\nsvHdZj6f8fMLNTOD8ju9RtMuhjATmSPq5+ocj7m///VxLXj0expdgCXPcXKS\nmsvzbKcnpa9ur0X7ar/UaeaYkQGJvq8vw9CnbHfUQt8EXkuoe5r6ud+eK5La\nYMOYxAEpZsftkHybgNVHJOZAJeXKe4wCdPyemkS1JpXeZtNdfKCPaJgvy0ku\nohuqxTTA6F71uU0r1XNgWT39IPwCaa2O20RO57BdjTjWBgH0JTqBBFUpimjq\nxun39zEkh0/SYq2oOFOK+UMnbd1FGRcnoTstMHGwHPCQCjJbfVA5Iona8Psu\nVKSAxiKO3R3MXl8QOlVS6/1tdh098elW+76mbu2+50Sj+GyL3uOd8PfUXfbU\nP1m3LbnJNUpAuDNyb4LwrZveYvo+CGmnKR6zKxKPUkHWMeQxE7jqsPHA758h\nHOG/EKIYmEvvn9oY5urZjMrW4xStIkFgCE7i8o5lFvgvTWaqh2jwhyPaX3Lo\nJchLTMkeKpslB6EcKi5PMZOnvfCMr3TdcROgbINekBB2zWERioEXDgSJp2c7\ncs3Fcg6SAS9Od1YVh0AcuQc0RktGE6VxoKSI6VB8x/POSSLMLhyV0mkiS6v8\nMDZT\r\n=qlOA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzrSPk3SwFFxrlz/pmhxBvPbLRMNYlWkuEcuon3uuSngIgGqSzTKgBgj4upxjWcYMo5l++O6AxUb3t85HC/CE8SIY="}]},"_npmUser":{"name":"awaydrasil","email":"kamil.hammouche@outlook.fr"},"directories":{},"maintainers":[{"name":"awaydrasil","email":"kamil.hammouche@outlook.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-tiptap_1.28.0_1638735284823_0.005163343705987478"},"_hasShrinkwrap":false}},"maintainers":[{"name":"awaydrasil","email":"kamil.hammouche@outlook.fr"}],"description":"A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue","homepage":"https://github.com/kamil-hammouche/element-tiptapr#readme","keywords":["editor","element","element-ui","tiptap","prosemirror","vue.js","wysiwyg"],"repository":{"type":"git","url":"git+https://github.com/kamil-hammouche/element-tiptap.git"},"author":{"name":"kamil-hammouche"},"bugs":{"url":"https://github.com/kamil-hammouche/element-tiptap/issues"},"license":"MIT","readme":"<p align=\"center\"><a href=\"https://github.com/Leecason/element-tiptap\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"/examples/assets/logo_for_github.png?raw=true\" alt=\"ElTiptap logo\"></a></p>\n\n<p align=\"center\">\n  <img alt=\"npm\" src=\"https://img.shields.io/npm/v/element-tiptap\">\n  <img alt=\"GitHub Release Date\" src=\"https://img.shields.io/github/release-date/Leecason/element-tiptap\">\n  <img alt=\"npm peer dependency version\" src=\"https://img.shields.io/npm/dependency-version/element-tiptap/peer/vue?color=vue\">\n  <img alt=\"semantic-release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\">\n  <img alt=\"GitHub\" src=\"https://img.shields.io/github/license/Leecason/element-tiptap\">\n</p>\n\n<h3 align=\"center\">Element Tiptap Editor</h3>\n\nA WYSIWYG rich-text editor using [tiptap](https://github.com/scrumpy/tiptap) and [Element UI](https://github.com/ElemeFE/element) for Vue.js\n\nthat's easy to use, friendly to developers, fully extensible and clean in design.\n\n## 📔 Languages\n\nEnglish | [简体中文](./README_ZH.md)\n\n## 🎄 Demo\n\n👉[https://leecason.github.io/element-tiptap](https://leecason.github.io/element-tiptap)\n\n👾[Code Sandbox](https://codesandbox.io/s/element-tiptap-bwlnj)\n\n## ✨ Features\n\n- 🎨Use [element-ui](https://github.com/ElemeFE/element) components\n- 💅Many out of box [extensions](https://github.com/Leecason/element-tiptap#extensions) (welcome to submit an issue for feature request👏)\n- 🔖Markdown support\n- 📘TypeScript support\n- 🌐I18n support(`en`, `zh`, `pl`, `ru`, `de`, `ko`, `es`, `zh_tw`, `fr`, `pt_br`, `nl`, `he`). welcome to contribute more languages\n- 🎈Events you might use: `init`, `transaction`, `focus`, `blur`, `paste`, `drop`, `update`\n- 🍀Fully extensible, you can customize editor extension and its menu button view\n- 💻Also can control the behavior of the editor directly, customize the editor for yourself.\n\n## 📦 Installation\n\n### NPM\n\n```shell\nyarn add element-tiptap\n```\n\nOr\n\n```shell\nnpm install --save element-tiptap\n```\n\n#### Install plugin\n\n```js\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport { ElementTiptapPlugin } from 'element-tiptap';\n// import ElementUI's styles\nimport 'element-ui/lib/theme-chalk/index.css';\n// import this package's styles\nimport 'element-tiptap/lib/index.css';\n\n// use ElementUI's plugin\nVue.use(ElementUI);\n// use this package's plugin\nVue.use(ElementTiptapPlugin, { /* plugin options */ });\n// Now you register `'el-tiptap'` component globally.\n```\n\nDefault plugin options:\n\n```js\n{\n  lang: \"en\", // see i18n\n  spellcheck: true, // can be overwritten by editor prop\n}\n```\n\n_Or_\n\n#### Partial import\n\n```vue\n<template>\n  <div>\n    <el-tiptap ...></el-tiptap>\n  </div>\n</template>\n\n<script>\nimport { ElementTiptap } from 'element-tiptap';\n\nexport default {\n  components: {\n    'el-tiptap': ElementTiptap,\n  },\n};\n</script>\n```\n\n## 🌐 I18n\n\nYou can declare when you install the plugin.\n\n```js\nVue.use(ElementTiptapPlugin, {\n  lang: 'zh',\n});\n```\n\nAvailable languages:\n\n- `en`(default)\n- `zh`\n- `pl` by @FurtakM\n- `ru` by @baitkul\n- `de` by @Thesicstar\n- `ko` by @Hotbrains\n- `es` by @koas\n- `zh_tw` by @eric0324\n- `fr` by @LPABelgium\n- `pt_br` by @valterleonardo\n- `nl` by @Arne-Jan\n- `he` by @shovalPMS\n\nWelcome contribution.\n\n## 🚀 Usage\n\n```vue\n<template>\n  <div>\n    <el-tiptap\n      v-model=\"content\"\n      :extensions=\"extensions\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  // necessary extensions\n  Doc,\n  Text,\n  Paragraph,\n  Heading,\n  Bold,\n  Underline,\n  Italic,\n  Strike,\n  ListItem,\n  BulletList,\n  OrderedList,\n} from 'element-tiptap';\n\nexport default {\n  data () {\n    // editor extensions\n    // they will be added to menubar and bubble menu by the order you declare.\n    return {\n      extensions: [\n        new Doc(),\n        new Text(),\n        new Paragraph(),\n        new Heading({ level: 5 }),\n        new Bold({ bubble: true }), // render command-button in bubble menu.\n        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.\n        new Italic(),\n        new Strike(),\n        new ListItem(),\n        new BulletList(),\n        new OrderedList(),\n      ],\n      // editor's content\n      content: `\n        <h1>Heading</h1>\n        <p>This Editor is awesome!</p>\n      `,\n    };\n  },\n},\n</script>\n```\n\n## 📔 Props\n\n### extensions\n\nType: `Array`\n\nYou can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.\n\nAll available extensions:\n- `Doc`\n- `Text`\n- `Paragraph`\n- `Heading`\n- `Bold`\n- `Italic`\n- `Strike`\n- `Underline`\n- `Link`\n- `Image`\n- `Iframe`\n- `CodeBlock`\n- `Blockquote`\n- `ListItem`\n- `BulletList` (use with `ListItem`)\n- `OrderedList` (use with `ListItem`)\n- `TodoItem`\n- `TodoList` (use with `TodoItem`)\n- `TextAlign`\n- `Indent`\n- `LineHeight`\n- `HorizontalRule`\n- `HardBreak`\n- `TrailingNode`\n- `History`\n- `Table` (use with `TableHeader`, `TableCell`, `TableRow`)\n- `TableHeader`\n- `TableCell`\n- `TableRow`\n- `FormatClear`\n- `TextColor`\n- `TextHighlight`\n- `Preview`\n- `Print`\n- `Fullscreen`\n- `SelectAll`\n- `FontType`\n- `FontSize`\n- `CodeView` (🆕)\n\nYou can find all extensions docs [here](https://github.com/Leecason/element-tiptap/issues/107).\n\nYou can customize the extension menu button view\n\n1) create your custom extension.\n\n```js\n// create your extension file\nimport { Bold } from 'element-tiptap';\n\nexport default class CustomBold extends Bold {\n  menuBtnView (editorContext) {\n    // editorContext contains some properties that are useful to you, such as isActive, commands, etc\n    // more detailed docs check this https://github.com/scrumpy/tiptap#editormenubar\n    // this package append editor instance to editorContext\n    return {\n      component: CustomButton, // your component\n      componentProps: { // bind to your component with v-bind\n        ...\n      },\n      componentEvents: { // bind to your component with v-on\n        ...\n      },\n    },\n  }\n}\n```\n\n2) use custom extension in component\n```vue\n<template>\n  <el-tiptap :extensions=\"extensions\" />\n</template>\n\n<script>\nimport CustomBold from '...'; // import your extension\n\nexport default {\n  ...\n  data () {\n    return {\n      extensions: [\n        ...\n        new CustomBold(),\n      ],\n    };\n  },\n};\n</script>\n```\n\n[Here](https://github.com/Leecason/element-tiptap/issues/10#issuecomment-600979545) is the example of how to create your extension button view (an extension can also render multiple menu buttons).\n\n### editorProperties\n\nType: `Object`\n\nDefault: `{}`\n\nTiptap `Editor` properties (passed to the constructor).\n\nsee the full list of properties [here](https://github.com/scrumpy/tiptap#editor-properties).\n\n[`editorProps`](https://prosemirror.net/docs/ref/#view.EditorProps) is a powerful prop in this list, you can use this prop to control the behavior of the editor directly, customize the editor for yourself.\n\n❗not available properties❗(they are used in this package):\n\n- `content`\n- `editable`\n- `useBuiltInExtensions`\n- `extensions`\n- `onInit`\n- `OnFocus`\n- `onBlur`\n- `onUpdate`\n\n### placeholder\n\nType: `string`\n\nDefault: `''`\n\nWhen editor is empty, placeholder will display.\n\n```html\n<el-tiptap\n  placeholder=\"Write something …\"\n/>\n```\n\n### content\n\nType: `string`\n\nDefault: `''`\n\nEditor's content\n\n```html\n<el-tiptap\n  :content=\"content\"\n  @onUpdate=\"onEditorUpdate\"\n/>\n```\n\nor Use `'v-model'`\n\n```html\n<el-tiptap\n  v-model=\"content\"\n/>\n```\n\n### output\n\nType: `string`\n\nDefault: `'html'`\n\nOutput can be defined to `'html'` or `'json'`.\n\n```html\n<el-tiptap\n  output=\"json\"\n/>\n```\n\nfurther reading: [prosemirror data structure](https://prosemirror.net/docs/guide/#doc)\n\n### readonly\n\nType: `boolean`\n\nDefault: `false`\n\n```html\n<el-tiptap\n  :readonly=\"true\"\n/>\n```\n\nwhen `readonly` is `true`, editor is not editable.\n\n### spellcheck\n\nType: `boolean`\n\nDefault: plugin `spellcheck` option value\n\n```html\n<el-tiptap\n  :spellcheck=\"true\"\n>\n</el-tiptap>\n```\n\nWhether the content is spellcheck enabled.\n\n### width, height\n\nType: `string | number`\n\nA string value with unit or a simple value (the default unit is **`px`**)：\n\n```html\n<el-tiptap\n  :width=\"700\"\n  height=\"100%\"\n>\n</el-tiptap>\n```\n\nThe above example will be converted to:\n\n```css\nwidth: 700px;\nheight: 100%;\n```\n\n### showMenubar\n\nType: `boolean`\n\nDefault: `true`\n\nEnables or disables the display of the menubar.\n\n### charCounterCount\n\nType: `boolean`\n\nDefault: `true`\n\nEnables or disables the display of the character counter.\n\n### tooltip\n\nType: `boolean`\n\nDefault: `true`\n\nControl if tooltips are shown when getting with mouse over the buttons from the toolbar.\n\n### lang\n\nType: `string`\n\nDefault: plugin `lang` option value\n\n```html\n<el-tiptap\n  lang=\"zh\"\n>\n</el-tiptap>\n```\n\nSpecifies the editor i18n language.\n\n## 👽 Events\n\n### Init\n\n```vue\n<template>\n  <el-tiptap\n    @onInit=\"onInit\"\n  />\n</template>\n\n<script>\nexport default {\n  ...\n  methods: {\n    /*\n     * the tiptap editor instance\n     * see https://tiptap.scrumpy.io/docs/guide/editor.html\n    */\n    onInit ({ editor }) {\n\n    },\n  },\n},\n</script>\n```\n\n### Transaction, Focus, Blur, Paste, Drop\n\nThe same as `init`\n\n## ⚗️ Slots\n\n### menubar\n\nYou can customize the menubar and will receive some properties through a scoped slot.\n\nproperties: [https://github.com/scrumpy/tiptap#editormenubar](https://github.com/scrumpy/tiptap#editormenubar)\n\n```html\n<el-tiptap\n  v-model=\"content\"\n  :extensions=\"extensions\"\n>\n  <!-- new syntax for slot since Vue 2.6.0\n  see: https://vuejs.org/v2/guide/components-slots.html -->\n  <template #menubar=\"{ commands, isActive }\">\n    <!--You can render custom menu buttons.-->\n    <custom-button\n      :class=\"{ 'is-active': isActive.bold() }\"\n      @click=\"commands.bold\"\n    >\n      Bold\n    </custom-button>\n  </template>\n</el-tiptap>\n```\n\n### menububble\n\nCustomize the bubble menu like menubar.\n\nproperties: [https://github.com/scrumpy/tiptap#editormenububble](https://github.com/scrumpy/tiptap#editormenububble)\n\n```html\n<el-tiptap\n  v-model=\"content\"\n  :extensions=\"extensions\"\n>\n  <template #menububble=\"{ commands, isActive }\">\n    <custom-button\n      :class=\"{ 'is-active': isActive.bold() }\"\n      @click=\"commands.bold\"\n    >\n      Bold\n    </custom-button>\n  </template>\n</el-tiptap>\n```\n\n### footer\n\nFooter of the editor, after the editor content.\n\n## 🏗 Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## 📝 Changelog\n\n[Changelog](https://github.com/Leecason/element-tiptap/blob/master/CHANGELOG.md)\n\n## 📄 License\n\n[MIT](https://github.com/Leecason/element-tiptap/blob/master/LICENSE)\n\n## 💝 Buy Me A Coffee\n\nI am so happy that so many people like this project, and I will do better with your support.\n\n<p>\n  <img alt=\"reward\" src=\"/public/wechat_reward_qrcode.jpg?raw=true\" width=\"300\">\n  <a href=\"https://www.buymeacoffee.com/leecason\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" ></a>\n</p>\n","readmeFilename":"README.md"}