├── .browserslistrc
├── images
    └── sample.png
├── src
    ├── plugins
    │   ├── vuetify.ts
    │   ├── video.ts
    │   └── tiptap-kit.ts
    ├── types
    │   └── options.ts
    ├── constants
    │   ├── toolbarItems.ts
    │   ├── testHtml.ts
    │   ├── xssRules.ts
    │   ├── suggestion.ts
    │   ├── icons.ts
    │   └── toolbarDefinitions.ts
    ├── entry.esm.ts
    ├── utils
    │   └── options
    │   │   └── index.ts
    ├── entry.ts
    ├── components
    │   ├── components.ts
    │   ├── VideoDialog.vue
    │   ├── LinkDialog.vue
    │   ├── EmojiPicker.vue
    │   ├── ImageDialog.vue
    │   ├── ColorPicker.vue
    │   └── VTiptap.vue
    └── stories
    │   └── VTiptap.stories.js
├── shims-img.d.ts
├── shims-vue.d.ts
├── dev
    ├── utils.ts
    ├── serve.ts
    ├── plugins
    │   └── vuetify.ts
    ├── index.html
    └── App.vue
├── .prettierrc
├── upgrade.txt
├── .editorconfig
├── vue.config.js
├── shims-tsx.d.ts
├── .gitignore
├── babel.config.js
├── .eslintrc.js
├── .storybook
    ├── util
    │   └── helpers.js
    ├── main.js
    └── preview.js
├── tsconfig.json
├── .github
    └── workflows
    │   ├── chromatic.yml
    │   └── create-release.yml
├── LICENSE.md
├── package.json
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/images/sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peepi-com-br/vuetify-tiptap/HEAD/images/sample.png


--------------------------------------------------------------------------------
/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 | import Vuetify from "vuetify";
2 | 
3 | export default new Vuetify();
4 | 


--------------------------------------------------------------------------------
/shims-img.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.png" {
2 |   const value: string;
3 |   export default value;
4 | }
5 | 


--------------------------------------------------------------------------------
/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import Vue from "vue";
3 |   export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/types/options.ts:
--------------------------------------------------------------------------------
1 | export interface PluginOptions {
2 |   uploadImage: (file: File) => Promise<string> | null;
3 |   mentionItems: (query: string) => Promise<object[]> | null;
4 | }
5 | 


--------------------------------------------------------------------------------
/dev/utils.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/prefer-default-export
2 | export function titleCase(text: string) {
3 |   const result = text.replace(/([A-Z])/g, " $1");
4 | 
5 |   return result.charAt(0).toUpperCase() + result.slice(1);
6 | }
7 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "semi": true,
 3 |   "tabWidth": 2,
 4 |   "singleQuote": false,
 5 |   "quoteProps": "as-needed",
 6 |   "printWidth": 80,
 7 |   "trailingComma": "es5",
 8 |   "jsxBracketSameLine": false,
 9 |   "arrowParens": "avoid",
10 |   "bracketSameLine": false
11 | }
12 | 


--------------------------------------------------------------------------------
/upgrade.txt:
--------------------------------------------------------------------------------
1 | # Commands to update version :)
2 | 
3 | npm version minor
4 | git commit -a -m "Version bump to v`node -p -e \"require('./package.json').version\"`"
5 | git push origin main
6 | git tag v`node -p -e \"require('./package.json').version\"`
7 | git push origin main --tags
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # https://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   publicPath: process.env.NODE_ENV === "production" ? "/v-tiptap/" : "/",
 3 |   outputDir: "dist_demo",
 4 |   pages: {
 5 |     index: {
 6 |       entry: "dev/serve.ts",
 7 |       template: "dev/index.html",
 8 |       title: "VTiptap",
 9 |     },
10 |   },
11 |   transpileDependencies: ["vuetify"],
12 | };
13 | 


--------------------------------------------------------------------------------
/dev/serve.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import vuetify from "./plugins/vuetify";
 4 | import "roboto-fontface/css/roboto/roboto-fontface.css";
 5 | import "@mdi/font/css/materialdesignicons.css";
 6 | 
 7 | Vue.config.productionTip = false;
 8 | 
 9 | new Vue({
10 |   vuetify,
11 |   render: h => h(App),
12 | }).$mount("#app");
13 | 


--------------------------------------------------------------------------------
/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from "vue";
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/constants/toolbarItems.ts:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   "bold",
 3 |   "italic",
 4 |   "underline",
 5 |   "strike",
 6 |   "color",
 7 |   "|",
 8 |   "headings",
 9 |   "|",
10 |   "left",
11 |   "center",
12 |   "right",
13 |   "justify",
14 |   "|",
15 |   "bulletList",
16 |   "orderedList",
17 |   "|",
18 |   "link",
19 |   "image",
20 |   "video",
21 |   "emoji",
22 |   "|",
23 |   "clear",
24 | ];
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | storybook-static
 5 | 
 6 | /tests/e2e/videos/
 7 | /tests/e2e/screenshots/
 8 | 
 9 | 
10 | # local env files
11 | .env.local
12 | .env.*.local
13 | 
14 | # Log files
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | pnpm-debug.log*
19 | 
20 | # Editor directories and files
21 | .idea
22 | .vscode
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw?
28 | 
29 | stats.html
30 | 


--------------------------------------------------------------------------------
/dev/plugins/vuetify.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuetify from "vuetify/lib";
 3 | import colors from "vuetify/lib/util/colors";
 4 | 
 5 | Vue.use(Vuetify);
 6 | 
 7 | export default new Vuetify({
 8 |   theme: {
 9 |     themes: {
10 |       light: { background: { base: colors.teal.lighten5 } },
11 |       dark: { background: { base: colors.blueGrey.darken4 } },
12 |     },
13 |   },
14 |   icons: {
15 |     iconfont: "mdi",
16 |   },
17 | });
18 | 


--------------------------------------------------------------------------------
/src/entry.esm.ts:
--------------------------------------------------------------------------------
 1 | import { PluginOptions } from "@/types/options";
 2 | import { mergeOptions } from "@/utils/options";
 3 | import { PluginFunction } from "vue";
 4 | 
 5 | import VTiptap from "@/components/VTiptap.vue";
 6 | 
 7 | const install: PluginFunction<PluginOptions> = (Vue, options?) => {
 8 |   mergeOptions(options || {});
 9 | 
10 |   Vue.component("VTiptap", VTiptap);
11 | };
12 | 
13 | export { VTiptap };
14 | 
15 | export default install;
16 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | let presets = ["@vue/babel-preset-app"];
 2 | if (process.env.NODE_ENV === "production") {
 3 |   presets = [["@babel/preset-env"], "@babel/preset-typescript"];
 4 |   if (process.env.DEMO_ENV === "production") {
 5 |     presets[0].push({ useBuiltIns: "usage", corejs: 3 });
 6 |   }
 7 | }
 8 | 
 9 | const plugins = [];
10 | 
11 | plugins.push(["@babel/plugin-proposal-decorators", { legacy: true }]);
12 | 
13 | module.exports = {
14 |   presets,
15 |   plugins,
16 | };
17 | 


--------------------------------------------------------------------------------
/src/utils/options/index.ts:
--------------------------------------------------------------------------------
 1 | import { PluginOptions } from "@/types/options";
 2 | 
 3 | export const DEFAULT_OPTIONS: PluginOptions = {
 4 |   uploadImage: null,
 5 |   mentionItems: null,
 6 | };
 7 | 
 8 | export const options = { ...DEFAULT_OPTIONS };
 9 | 
10 | export function mergeOptions(newOptions: Partial<PluginOptions>) {
11 |   Object.assign(options, newOptions);
12 | }
13 | 
14 | export function getOption<T extends keyof PluginOptions>(
15 |   key: T
16 | ): PluginOptions[T] {
17 |   return options[key];
18 | }
19 | 


--------------------------------------------------------------------------------
/src/entry.ts:
--------------------------------------------------------------------------------
 1 | import plugin, * as elements from "@/entry.esm";
 2 | 
 3 | type NamedExports = Exclude<typeof elements, "default">;
 4 | type ExtendedPlugin = typeof plugin & NamedExports;
 5 | 
 6 | Object.entries(elements).forEach(([elementName, element]) => {
 7 |   if (elementName !== "default") {
 8 |     const key = elementName as Exclude<keyof NamedExports, "default">;
 9 |     (plugin as ExtendedPlugin)[key] = element as Exclude<
10 |       ExtendedPlugin,
11 |       typeof plugin
12 |     >;
13 |   }
14 | });
15 | 
16 | export default plugin;
17 | 


--------------------------------------------------------------------------------
/src/components/components.ts:
--------------------------------------------------------------------------------
 1 | export { default as ImageDialog } from "./ImageDialog.vue";
 2 | export { default as LinkDialog } from "./LinkDialog.vue";
 3 | export { default as VideoDialog } from "./VideoDialog.vue";
 4 | export { default as EmojiPicker } from "./EmojiPicker.vue";
 5 | export { default as ColorPicker } from "./ColorPicker.vue";
 6 | 
 7 | export {
 8 |   VAvatar,
 9 |   VInput,
10 |   VCard,
11 |   VBtn,
12 |   VImg,
13 |   VIcon,
14 |   VFileInput,
15 |   VList,
16 |   VListItem,
17 |   VListItemContent,
18 |   VListItemAvatar,
19 |   VListItemTitle,
20 |   VMenu,
21 |   VProgressLinear,
22 |   VSelect,
23 |   VSpacer,
24 |   VToolbar,
25 |   VTooltip,
26 | } from "vuetify/lib";
27 | 


--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link
 8 |       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css"
 9 |       rel="stylesheet"
10 |     />
11 |     <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
12 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
13 |     <title>VTiptap</title>
14 |   </head>
15 |   <body>
16 |     <div id="app"></div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     jest: true,
 6 |   },
 7 |   extends: [
 8 |     "plugin:vue/essential",
 9 |     "eslint:recommended",
10 |     "@vue/typescript/recommended",
11 |   ],
12 |   parser: "vue-eslint-parser",
13 |   parserOptions: {
14 |     parser: "@typescript-eslint/parser",
15 |   },
16 |   rules: {
17 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
18 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
19 |     "import/order": ["off"], // See https://youtrack.jetbrains.com/issue/WEB-21182
20 |     "object-curly-newline": ["off"],
21 |     "@typescript-eslint/ban-ts-comment": "off",
22 |     "prefer-const": "off",
23 |   },
24 | };
25 | 


--------------------------------------------------------------------------------
/src/constants/testHtml.ts:
--------------------------------------------------------------------------------
1 | export default '<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p><strong>Bold</strong> <em>Italic</em> <s>Strike</s> <u>Underline</u> <span style="color: #f44336">Colored</span></p><p>Left</p><p style="text-align: center">Center</p><p style="text-align: right">Right</p><p style="text-align: justify">Justify</p><ul><li><p>Unordered A</p></li><li><p>Unordered B</p></li></ul><ol><li><p>Ordered A</p></li><li><p>Ordered B</p></li></ol><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=vAP5kakbcQg">Link</a></p><img src="https://fakeimg.pl/550x100/ff0000"><div class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/NRZ6N4e-Mko" frameborder="0" allowfullscreen="true"></iframe></div><p>😄😄😄</p>';
2 | 


--------------------------------------------------------------------------------
/src/constants/xssRules.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   a: ["href", "title", "target"],
 3 |   span: ["style", "data-type", "class", "data-label", "data-id"],
 4 |   blockquote: ["style"],
 5 |   p: ["style"],
 6 |   hr: [],
 7 |   pre: [],
 8 |   code: [],
 9 |   strong: [],
10 |   img: ["src", "alt", "title"],
11 |   label: ["contenteditable"],
12 |   input: ["type", "value"],
13 |   div: ["class"],
14 |   iframe: ["src", "allowfullscreen"],
15 |   em: [],
16 |   s: [],
17 |   mark: [],
18 |   h1: ["style"],
19 |   h2: ["style"],
20 |   h3: ["style"],
21 |   ul: ["class", "data-type"],
22 |   li: ["data-checked"],
23 |   ol: [],
24 |   u: [],
25 |   tr: ["class", "style"],
26 |   td: ["class", "style"],
27 |   th: ["class", "style"],
28 |   tbody: ["class", "style"],
29 |   table: ["class", "style"],
30 |   br: [],
31 | };
32 | 


--------------------------------------------------------------------------------
/.storybook/util/helpers.js:
--------------------------------------------------------------------------------
 1 | // Returns a function to generate stories
 2 | export const storyFactory = options => {
 3 |   const { title, component, args, argTypes, description } = options;
 4 |   return {
 5 |     title,
 6 |     component,
 7 |     args: {
 8 |       ...args,
 9 |     },
10 |     argTypes: {
11 |       locale: {
12 |         defaultValue: "en",
13 |         control: {
14 |           type: "inline-radio",
15 |           options: { English: "en", Español: "es" },
16 |         },
17 |       },
18 | 
19 |       onClick: {
20 |         action: "clicked",
21 |         table: {
22 |           type: {
23 |             summary: null,
24 |           },
25 |         },
26 |       },
27 |     },
28 |     parameters: {
29 |       docs: {
30 |         description: {
31 |           component: description,
32 |         },
33 |       },
34 |     },
35 |   };
36 | };
37 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": false,
 6 |     "declaration": true,
 7 |     "declarationDir": "dist/types",
 8 |     "importHelpers": true,
 9 |     "moduleResolution": "node",
10 |     "experimentalDecorators": true,
11 |     "useDefineForClassFields": false,
12 |     "esModuleInterop": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "sourceMap": true,
15 |     "baseUrl": ".",
16 |     "newLine": "lf",
17 |     "types": ["node", "vue", "vuetify"],
18 |     "paths": {
19 |       "@/*": ["src/*"]
20 |     },
21 |     "plugins": [
22 |       {
23 |         "transform": "@zerollup/ts-transform-paths",
24 |         "exclude": ["*"]
25 |       }
26 |     ],
27 |     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
28 |   },
29 |   "exclude": ["node_modules", "dist"]
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/workflows/chromatic.yml:
--------------------------------------------------------------------------------
 1 | # .github/workflows/chromatic.yml
 2 | 
 3 | # Workflow name
 4 | name: "Chromatic"
 5 | 
 6 | # Event for the workflow
 7 | on:
 8 |   push:
 9 |     paths:
10 |       - ".storybook/**/*"
11 |       - "src/**/*"
12 |       - "package*"
13 | 
14 | # List of jobs
15 | jobs:
16 |   chromatic-deployment:
17 |     # Operating System
18 |     runs-on: ubuntu-latest
19 |     # Job steps
20 |     steps:
21 |       - uses: actions/checkout@v3
22 |         with:
23 |           fetch-depth: 0
24 |       - uses: actions/setup-node@v3
25 |         with:
26 |           node-version: "16"
27 |           cache: "npm"
28 |       - run: npm ci --no-audit --ignore-scripts
29 |       - name: Publish to Chromatic
30 |         uses: chromaui/action@v1
31 |         with:
32 |           buildScriptName: "storybook:build"
33 |           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
34 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Peepi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/create-release.yml:
--------------------------------------------------------------------------------
 1 | name: Create Release
 2 | on:
 3 |   push:
 4 |     tags:
 5 |       - "v*"
 6 | 
 7 | jobs:
 8 |   create:
 9 |     if: startsWith(github.ref, 'refs/tags/')
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Build Changelog
13 |         id: github_release
14 |         uses: mikepenz/release-changelog-builder-action@v1
15 |         env:
16 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
17 |       - name: Create Release
18 |         uses: actions/create-release@v1
19 |         with:
20 |           tag_name: ${{ github.ref }}
21 |           release_name: ${{ github.ref }}
22 |           body: ${{steps.github_release.outputs.changelog}}
23 |         env:
24 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25 | 
26 |   publish:
27 |     runs-on: ubuntu-latest
28 |     needs: [create]
29 |     steps:
30 |       - name: Checkout code
31 |         uses: actions/checkout@v3
32 |         with:
33 |           depth: 1
34 |       - uses: actions/setup-node@v3
35 |         with:
36 |           node-version: "16"
37 |           cache: "npm"
38 |           registry-url: "https://registry.npmjs.org"
39 |       - name: Install dependencies
40 |         run: npm ci --no-audit --ignore-scripts
41 |       - name: Publish to NPM
42 |         run: npm publish
43 |         env:
44 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
45 | 


--------------------------------------------------------------------------------
/src/components/VideoDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog
 3 |     :dark="dark"
 4 |     :value="show"
 5 |     @input="$emit('close', $event)"
 6 |     max-width="500"
 7 |   >
 8 |     <v-card>
 9 |       <v-card-title>
10 |         <span class="headline">{{ "Edit Video" }}</span>
11 | 
12 |         <v-spacer />
13 | 
14 |         <v-btn icon @click="close">
15 |           <v-icon>mdi-close</v-icon>
16 |         </v-btn>
17 |       </v-card-title>
18 | 
19 |       <v-card-text>
20 |         <v-text-field
21 |           :value="value"
22 |           @input="url = $event"
23 |           name="video-url"
24 |           label="URL"
25 |           hide-details
26 |         />
27 |       </v-card-text>
28 | 
29 |       <v-card-actions>
30 |         <v-btn text @click="apply">
31 |           {{ "Apply" }}
32 |         </v-btn>
33 |       </v-card-actions>
34 |     </v-card>
35 |   </v-dialog>
36 | </template>
37 | 
38 | <script lang="ts">
39 | import { Vue, Component, Prop } from "vue-property-decorator";
40 | 
41 | @Component
42 | export default class extends Vue {
43 |   @Prop() readonly value: string | null;
44 | 
45 |   @Prop({ default: false }) show: boolean;
46 | 
47 |   @Prop({ default: false }) dark: boolean;
48 | 
49 |   url = "";
50 | 
51 |   apply() {
52 |     this.$emit("apply", this.url);
53 |     this.$emit("close");
54 |   }
55 | 
56 |   close() {
57 |     this.$emit("close");
58 |   }
59 | }
60 | </script>
61 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | module.exports = {
 4 |   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
 5 |   addons: [
 6 |     "@storybook/addon-essentials",
 7 |     "@storybook/addon-links",
 8 |     // "@storybook/addon-storysource",
 9 |     "@storybook/addon-interactions",
10 |   ],
11 |   core: {
12 |     // builder: "webpack5",
13 |     //
14 |   },
15 |   webpackFinal: async (config, { configType }) => {
16 |     // so I can import { storyFactory } from '~storybook/util/helpers'
17 |     config.resolve.alias["~storybook"] = path.resolve(__dirname);
18 |     // the @ alias points to the `src/` directory, a common alias
19 |     // used in the Vue community
20 |     config.resolve.alias["@"] = path.resolve(__dirname, "..", "src");
21 | 
22 |     // THIS is the tricky stuff!
23 |     // config.module.rules.push({
24 |     //   test: /\.sass$/,
25 |     //   use: [
26 |     //     "style-loader",
27 |     //     "css-loader",
28 |     //     {
29 |     //       loader: "sass-loader",
30 |     //       options: {
31 |     //         sassOptions: {
32 |     //           indentedSyntax: true,
33 |     //         },
34 |     //         prependData: "@import '@/sass/variables.sass'",
35 |     //       },
36 |     //     },
37 |     //   ],
38 |     //   include: path.resolve(__dirname, "../"),
39 |     // });
40 | 
41 |     // return the updated Storybook configuration
42 |     return config;
43 |   },
44 | };
45 | 


--------------------------------------------------------------------------------
/src/constants/suggestion.ts:
--------------------------------------------------------------------------------
 1 | export function renderSuggestion(component) {
 2 |   return () => {
 3 |     const { mentionConfig } = component;
 4 | 
 5 |     return {
 6 |       onStart: props => {
 7 |         mentionConfig.show = true;
 8 |         mentionConfig.items = props.items;
 9 |         mentionConfig.command = props.command;
10 |         mentionConfig.selected = 0;
11 | 
12 |         const { x, y } = props.clientRect();
13 |         mentionConfig.x = x;
14 |         mentionConfig.y = y + 24;
15 |       },
16 | 
17 |       onUpdate(props) {
18 |         mentionConfig.items = props.items;
19 |       },
20 | 
21 |       onKeyDown(props) {
22 |         const { event } = props;
23 | 
24 |         if (event.key === "Escape") {
25 |           mentionConfig.show = false;
26 | 
27 |           return true;
28 |         }
29 | 
30 |         if (event.key === "ArrowUp") {
31 |           mentionConfig.selected =
32 |             (mentionConfig.selected + mentionConfig.items.length - 1) %
33 |             mentionConfig.items.length;
34 | 
35 |           return true;
36 |         }
37 | 
38 |         if (event.key === "ArrowDown") {
39 |           mentionConfig.selected = (mentionConfig.selected + 1) % mentionConfig.items.length;
40 | 
41 |           return true;
42 |         }
43 | 
44 |         if (event.key === "Enter") {
45 |           component.selectMention(mentionConfig.selected);
46 | 
47 |           return true;
48 |         }
49 | 
50 |         return false;
51 |       },
52 | 
53 |       onExit() {
54 |         mentionConfig.show = false;
55 |       },
56 |     };
57 |   };
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/LinkDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog
 3 |     :dark="dark"
 4 |     :value="show"
 5 |     @input="$emit('close', $event)"
 6 |     max-width="500"
 7 |   >
 8 |     <v-card>
 9 |       <v-card-title>
10 |         <span class="headline">
11 |           {{ "Edit Link" }}
12 |         </span>
13 | 
14 |         <v-spacer />
15 | 
16 |         <v-btn icon @click="$emit('close', $event)">
17 |           <v-icon>mdi-close</v-icon>
18 |         </v-btn>
19 |       </v-card-title>
20 | 
21 |       <v-card-text>
22 |         <v-text-field
23 |           :value="value"
24 |           @input="url = $event"
25 |           name="link-url"
26 |           label="URL"
27 |           hide-details
28 |         />
29 |       </v-card-text>
30 | 
31 |       <v-card-actions>
32 |         <v-btn :disabled="isDisabled" text @click="apply">
33 |           {{ "apply" }}
34 |         </v-btn>
35 |       </v-card-actions>
36 |     </v-card>
37 |   </v-dialog>
38 | </template>
39 | 
40 | <script lang="ts">
41 | import { Vue, Component, Prop } from "vue-property-decorator";
42 | 
43 | @Component
44 | export default class extends Vue {
45 |   @Prop() readonly value: string | null;
46 | 
47 |   @Prop({ default: false }) show: boolean;
48 | 
49 |   @Prop({ default: false }) dark: boolean;
50 | 
51 |   url = "";
52 | 
53 |   get isDisabled() {
54 |     return this.value === this.url || (!this.value && !this.url);
55 |   }
56 | 
57 |   apply() {
58 |     this.$emit("apply", this.url);
59 |     this.$emit("close");
60 |   }
61 | 
62 |   close() {
63 |     this.$emit("close");
64 |   }
65 | }
66 | </script>
67 | 


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
 1 | // Imports for configuring Vuetify
 2 | import Vue from "vue";
 3 | import Vuetify from "vuetify";
 4 | // import VueI18n from "vue-i18n"; // <== NOTE: I usually use i18n
 5 | // import i18n from "@/i18n";
 6 | 
 7 | // configure Vue to use Vuetify
 8 | Vue.use(Vuetify);
 9 | // Vue.use(VueI18n);
10 | 
11 | // this was the only thing here by default
12 | export const parameters = {
13 |   actions: { argTypesRegex: "^on[A-Z].*" },
14 | };
15 | 
16 | import "@mdi/font/css/materialdesignicons.css";
17 | import "roboto-fontface/css/roboto/roboto-fontface.css";
18 | 
19 | const vuetify = new Vuetify();
20 | 
21 | // THIS is my decorator
22 | export const decorators = [
23 |   (story, context) => {
24 |     // wrap the passed component within the passed context
25 |     const wrapped = story(context);
26 |     // extend Vue to use Vuetify around the wrapped component
27 |     return Vue.extend({
28 |       vuetify,
29 |       //   i18n,
30 |       components: { wrapped },
31 |       props: {
32 |         locale: {
33 |           type: String,
34 |           default: "en",
35 |         },
36 |       },
37 |       watch: {
38 |         dark: {
39 |           immediate: true,
40 |           handler(val) {
41 |             this.$vuetify.theme.dark = val;
42 |           },
43 |         },
44 |         locale: {
45 |           immediate: true,
46 |           handler(val) {
47 |             // this.$i18n.locale = val;
48 |           },
49 |         },
50 |       },
51 |       template: `
52 |         <v-app>
53 |           <v-container>
54 |             <wrapped />
55 |           </v-container>
56 |         </v-app>
57 |       `,
58 |     });
59 |   },
60 | ];
61 | 


--------------------------------------------------------------------------------
/src/plugins/video.ts:
--------------------------------------------------------------------------------
 1 | import { Node } from "@tiptap/core";
 2 | 
 3 | export interface IframeOptions {
 4 |   allowFullscreen: boolean;
 5 |   HTMLAttributes: {
 6 |     [key: string]: any;
 7 |   };
 8 | }
 9 | 
10 | declare module "@tiptap/core" {
11 |   interface Commands<ReturnType> {
12 |     iframe: {
13 |       /**
14 |        * Add an iframe
15 |        */
16 |       setIframe: (options: { src: string }) => ReturnType;
17 |     };
18 |   }
19 | }
20 | 
21 | export default Node.create<IframeOptions>({
22 |   name: "iframe",
23 | 
24 |   group: "block",
25 | 
26 |   atom: true,
27 | 
28 |   addOptions() {
29 |     return {
30 |       allowFullscreen: true,
31 |       HTMLAttributes: {
32 |         class: "iframe-wrapper",
33 |       },
34 |     };
35 |   },
36 | 
37 |   addAttributes() {
38 |     return {
39 |       src: {
40 |         default: null,
41 |       },
42 |       frameborder: {
43 |         default: 0,
44 |       },
45 |       allowfullscreen: {
46 |         default: this.options.allowFullscreen,
47 |         parseHTML: () => this.options.allowFullscreen,
48 |       },
49 |     };
50 |   },
51 | 
52 |   parseHTML() {
53 |     return [
54 |       {
55 |         tag: "iframe",
56 |       },
57 |     ];
58 |   },
59 | 
60 |   renderHTML({ HTMLAttributes }) {
61 |     // Convert youtube links
62 |     HTMLAttributes.src = HTMLAttributes.src
63 |       .replace("https://youtu.be/", "https://www.youtube.com/watch?v=")
64 |       .replace("watch?v=", "embed/");
65 | 
66 |     // Convert vimeo links
67 |     HTMLAttributes.src = HTMLAttributes.src.replace(
68 |       "https://vimeo.com/",
69 |       "https://player.vimeo.com/video/"
70 |     );
71 | 
72 |     // Convert google drive links
73 |     if (HTMLAttributes.src.includes("drive.google.com")) {
74 |       HTMLAttributes.src = HTMLAttributes.src.replace("/view", "/preview");
75 |     }
76 | 
77 |     return ["div", this.options.HTMLAttributes, ["iframe", HTMLAttributes]];
78 |   },
79 | 
80 |   addCommands() {
81 |     return {
82 |       setIframe:
83 |         (options: { src: string }) =>
84 |         ({ tr, dispatch }) => {
85 |           const { selection } = tr;
86 |           const node = this.type.create(options);
87 | 
88 |           if (dispatch) {
89 |             tr.replaceRangeWith(selection.from, selection.to, node);
90 |           }
91 | 
92 |           return true;
93 |         },
94 |     };
95 |   },
96 | });
97 | 


--------------------------------------------------------------------------------
/src/components/EmojiPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-menu
  3 |     v-model="value"
  4 |     top
  5 |     center
  6 |     :nudge-top="18"
  7 |     :nudge-left="160"
  8 |     absolute
  9 |     :close-on-content-click="false"
 10 |     :dark="dark"
 11 |   >
 12 |     <VEmojiPicker
 13 |       :labelSearch="'search'"
 14 |       :dark="dark"
 15 |       emojisByRow="10"
 16 |       emojiSize="25"
 17 |       lang="pt-BR"
 18 |       @select="apply"
 19 |     />
 20 |   </v-menu>
 21 | </template>
 22 | 
 23 | <script lang="ts">
 24 | import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 25 | import { VEmojiPicker } from "v-emoji-picker";
 26 | 
 27 | @Component({
 28 |   components: { VEmojiPicker },
 29 | })
 30 | export default class extends Vue {
 31 |   value = false;
 32 | 
 33 |   @Prop() readonly activator: any;
 34 | 
 35 |   @Prop({ default: false }) readonly dark: boolean;
 36 | 
 37 |   absoluteX = 0;
 38 | 
 39 |   absoluteY = 0;
 40 | 
 41 |   apply(emoji) {
 42 |     this.$emit("emojiSelected", emoji.data);
 43 |   }
 44 | 
 45 |   @Watch("value")
 46 |   async onValueChange() {
 47 |     if (!this.value) {
 48 |       this.$destroy();
 49 |       this.$el.parentNode.removeChild(this.$el);
 50 |     }
 51 |   }
 52 | }
 53 | </script>
 54 | 
 55 | <style lang="scss">
 56 | .emoji-picker {
 57 |   .container-emoji {
 58 |     height: 150px !important;
 59 |     &::after {
 60 |       content: " ";
 61 |       background: linear-gradient(
 62 |         rgba(240, 240, 240, 0),
 63 |         rgb(240, 240, 240, 0.75),
 64 |         rgb(240, 240, 240)
 65 |       );
 66 |       position: absolute;
 67 |       bottom: 0px;
 68 |       height: 24px;
 69 |       left: 0;
 70 |       right: 0;
 71 |     }
 72 | 
 73 |     &::-webkit-scrollbar {
 74 |       width: 8px !important;
 75 |     }
 76 | 
 77 |     /* Handle */
 78 |     &::-webkit-scrollbar-thumb {
 79 |       background: #ccc;
 80 |       border-radius: 4px;
 81 |     }
 82 | 
 83 |     /* Handle on hover */
 84 |     &::-webkit-scrollbar-thumb:hover {
 85 |       background: #888;
 86 |     }
 87 |   }
 88 | 
 89 |   .container-search {
 90 |     padding: 0 4px !important;
 91 |   }
 92 | }
 93 | 
 94 | .dark {
 95 |   .container-emoji {
 96 |     &::after {
 97 |       background: linear-gradient(
 98 |         rgba(0, 0, 0, 0),
 99 |         rgb(0, 0, 0, 0.75),
100 |         rgb(0, 0, 0)
101 |       );
102 |     }
103 |   }
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/components/ImageDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-dialog
  3 |     :dark="dark"
  4 |     :value="show"
  5 |     @input="$emit('close', $event)"
  6 |     max-width="500"
  7 |   >
  8 |     <v-card>
  9 |       <v-card-title>
 10 |         <span class="headline">
 11 |           {{ "Edit Image" }}
 12 |         </span>
 13 | 
 14 |         <v-spacer />
 15 | 
 16 |         <v-btn icon @click="close">
 17 |           <v-icon>mdi-close</v-icon>
 18 |         </v-btn>
 19 |       </v-card-title>
 20 | 
 21 |       <v-card-text>
 22 |         <v-text-field
 23 |           v-model="url"
 24 |           filled
 25 |           name="url"
 26 |           label="Link"
 27 |           hide-details
 28 |           autofocus
 29 |           prepend-icon="mdi-link-variant"
 30 |           class="mb-2"
 31 |           :disabled="Boolean(file) || loading"
 32 |         />
 33 | 
 34 |         <div v-if="uploadImage" class="text-overline text-center my-2">OR</div>
 35 | 
 36 |         <v-file-input
 37 |           v-if="uploadImage"
 38 |           v-model="file"
 39 |           filled
 40 |           label="File"
 41 |           accept="image/png, image/jpeg, image/bmp, image/gif"
 42 |           hide-details
 43 |           @change="onFileSelected"
 44 |           @click:clear="url = ''"
 45 |           :loading="loading"
 46 |           :disabled="loading"
 47 |         />
 48 |       </v-card-text>
 49 | 
 50 |       <v-card-actions>
 51 |         <v-btn text @click="apply" :disabled="url == '' || loading">
 52 |           {{ "apply" }}
 53 |         </v-btn>
 54 |       </v-card-actions>
 55 |     </v-card>
 56 |   </v-dialog>
 57 | </template>
 58 | 
 59 | <script lang="ts">
 60 | import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 61 | 
 62 | @Component
 63 | export default class extends Vue {
 64 |   @Prop() readonly value: string | null;
 65 | 
 66 |   @Prop({ default: false }) show: boolean;
 67 | 
 68 |   @Prop({ default: false }) dark: boolean;
 69 | 
 70 |   @Prop() readonly uploadImage: (file: File) => Promise<string>;
 71 | 
 72 |   url = "";
 73 | 
 74 |   file = null;
 75 | 
 76 |   loading = false;
 77 | 
 78 |   async onFileSelected(file) {
 79 |     if (!file) return;
 80 | 
 81 |     try {
 82 |       this.loading = true;
 83 |       this.url = await this.uploadImage(file);
 84 |     } finally {
 85 |       this.loading = false;
 86 |     }
 87 |   }
 88 | 
 89 |   @Watch("show")
 90 |   onShow(val: boolean) {
 91 |     if (val) {
 92 |       this.url = this.value || "";
 93 |     }
 94 |   }
 95 | 
 96 |   apply() {
 97 |     this.$emit("apply", this.url);
 98 | 
 99 |     this.file = null;
100 |     this.url = "";
101 | 
102 |     this.$emit("close");
103 |   }
104 | 
105 |   close() {
106 |     this.$emit("close");
107 |   }
108 | }
109 | </script>
110 | 
111 | <style lang="scss">
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/constants/icons.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   get(iconName: string, packName = this.pack || "mdi") {
 3 |     return this.packs[packName][iconName];
 4 |   },
 5 | 
 6 |   packs: {
 7 |     md: {
 8 |       bold: "format_bold",
 9 |       italic: "format_italic",
10 |       underline: "format_underlined",
11 |       strike: "format_strikethrough",
12 |       color: "format_color_text",
13 |       highlight: "format_color_fill",
14 |       h1: "mdi-format-header-1",
15 |       h2: "mdi-format-header-2",
16 |       h3: "mdi-format-header-3",
17 |       p: "mdi-format-paragraph",
18 |       left: "format_align_left",
19 |       center: "format_align_center",
20 |       right: "format_align_right",
21 |       justify: "format_align_justify",
22 |       bulletList: "format_list_bulleted",
23 |       orderedList: "format_list_numbered",
24 |       checkbox: "ballot",
25 |       link: "link",
26 |       image: "image",
27 |       video: "videocam",
28 |       emoji: "tag_faces",
29 |       blockquote: "format_quote",
30 |       rule: "horizontal_rule",
31 |       code: "code",
32 |       codeBlock: "terminal",
33 |       clear: "format_clear",
34 |     },
35 |     mdi: {
36 |       bold: "mdi-format-bold",
37 |       italic: "mdi-format-italic",
38 |       underline: "mdi-format-underline",
39 |       strike: "mdi-format-strikethrough",
40 |       color: "mdi-palette",
41 |       highlight: "mdi-grease-pencil",
42 |       h1: "mdi-format-header-1",
43 |       h2: "mdi-format-header-2",
44 |       h3: "mdi-format-header-3",
45 |       p: "mdi-format-paragraph",
46 |       left: "mdi-format-align-left",
47 |       center: "mdi-format-align-center",
48 |       right: "mdi-format-align-right",
49 |       justify: "mdi-format-align-justify",
50 |       bulletList: "mdi-format-list-bulleted",
51 |       orderedList: "mdi-format-list-numbered",
52 |       checkbox: "mdi-format-list-checkbox",
53 |       link: "mdi-link",
54 |       image: "mdi-image",
55 |       video: "mdi-video",
56 |       emoji: "mdi-emoticon-outline",
57 |       blockquote: "mdi-format-quote-open",
58 |       rule: "mdi-minus",
59 |       code: "mdi-code-tags",
60 |       codeBlock: "mdi-code-braces-box",
61 |       clear: "mdi-format-clear",
62 |     },
63 |     fa: {
64 |       bold: "fa-bold",
65 |       italic: "fa-italic",
66 |       underline: "fa-underline",
67 |       strike: "fa-strikethrough",
68 |       color: "fa-paint-brush",
69 |       highlight: "fa-highlighter",
70 |       h1: "mdi-format-header-1",
71 |       h2: "mdi-format-header-2",
72 |       h3: "mdi-format-header-3",
73 |       p: "mdi-format-paragraph",
74 |       left: "fa-align-left",
75 |       center: "fa-align-center",
76 |       right: "fa-align-right",
77 |       justify: "fa-align-justify",
78 |       bulletList: "fa-list-ul",
79 |       orderedList: "fa-list-ol",
80 |       checkbox: "fa-check",
81 |       link: "fa-link",
82 |       image: "fa-image",
83 |       video: "fa-video",
84 |       emoji: "fa-regular fa-face-grin",
85 |       blockquote: "fa-quote-left",
86 |       rule: "fa-minus",
87 |       code: "fa-code",
88 |       codeBlock: "fa-code",
89 |       clear: "fa-text-slash",
90 |     },
91 |   },
92 | };
93 | 


--------------------------------------------------------------------------------
/src/components/ColorPicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-menu
  3 |     v-model="menu"
  4 |     offset-y
  5 |     :dark="dark"
  6 |     :nudge-left="nudgeLeft || 255"
  7 |     :nudge-top="nudgeTop || 42"
  8 |     :close-on-content-click="false"
  9 |     transition="scale-transition"
 10 |     :origin="!nudgeLeft ? 'top right' : 'top left'"
 11 |   >
 12 |     <template #activator="{ on }">
 13 |       <slot name="button" v-bind="{ on }">
 14 |         <v-btn
 15 |           :color="value"
 16 |           v-on="on"
 17 |           icon
 18 |           small
 19 |           style="border: 1px solid rgba(0, 0, 0, 0.25) !important; top: -2px"
 20 |         >
 21 |           <v-icon>mdi-circle</v-icon>
 22 |         </v-btn>
 23 |       </slot>
 24 |     </template>
 25 |     <v-list class="pb-0 pl-2">
 26 |       <v-container fluid style="padding-bottom: 0">
 27 |         <div class="d-flex flex-wrap" style="max-width: 230px">
 28 |           <div v-for="color in colors" :key="color" class="text-center">
 29 |             <v-btn icon small @click="setColor(color)">
 30 |               <v-icon :color="color">mdi-circle</v-icon>
 31 |             </v-btn>
 32 |           </div>
 33 |         </div>
 34 |       </v-container>
 35 | 
 36 |       <v-divider horizontal class="mt-2" />
 37 |       <template v-if="more">
 38 |         <v-btn
 39 |           v-if="!picker"
 40 |           style="margin: 1rem 0 0 0; height: auto"
 41 |           x-small
 42 |           block
 43 |           text
 44 |           @click.stop.prevent="picker = true"
 45 |           class="ma-0 py-3"
 46 |         >
 47 |           {{ __("words.show-more") }}
 48 |         </v-btn>
 49 |         <v-btn
 50 |           v-else
 51 |           style="margin: 1rem 0 0 0; height: auto"
 52 |           x-small
 53 |           block
 54 |           text
 55 |           @click.stop.prevent="picker = false"
 56 |           class="ma-0 py-3"
 57 |         >
 58 |           {{ __("words.show-less") }}
 59 |         </v-btn>
 60 | 
 61 |         <v-expand-transition>
 62 |           <div v-if="picker" class="text-center">
 63 |             <v-divider />
 64 |             <v-color-picker
 65 |               :value="value"
 66 |               @input="$emit('input', $event)"
 67 |               width="300"
 68 |             />
 69 |           </div>
 70 |         </v-expand-transition>
 71 |       </template>
 72 |     </v-list>
 73 |   </v-menu>
 74 | </template>
 75 | 
 76 | <script lang="ts">
 77 | import { Component, Prop, Vue } from "vue-property-decorator";
 78 | 
 79 | @Component
 80 | export default class extends Vue {
 81 |   @Prop() readonly value;
 82 | 
 83 |   @Prop({ default: 0 }) readonly nudgeLeft: string | number;
 84 | 
 85 |   @Prop({ default: 0 }) readonly nudgeTop: string | number;
 86 | 
 87 |   @Prop({ default: true }) readonly more: boolean;
 88 | 
 89 |   @Prop({ default: false }) readonly dark: boolean;
 90 | 
 91 |   menu = false;
 92 | 
 93 |   colors = [
 94 |     "#f44336",
 95 |     "#e91e63",
 96 |     "#9c27b0",
 97 |     "#673ab7",
 98 |     "#3f51b5",
 99 |     "#2196f3",
100 |     "#03a9f4",
101 |     "#00bcd4",
102 |     "#009688",
103 |     "#4caf50",
104 |     "#8bc34a",
105 |     "#cddc39",
106 |     "#ffeb3b",
107 |     "#ffc107",
108 |     "#ff9800",
109 |     "#ff5722",
110 |     "#000000",
111 |     "#333333",
112 |     "#666666",
113 |     "#999999",
114 |     "#CCCCCC",
115 |     "#D5D5D4",
116 |     "#E8E8E8",
117 |     "#EEEEEE",
118 |   ];
119 | 
120 |   picker = false;
121 | 
122 |   setColor(color) {
123 |     this.$emit("input", color);
124 |     this.menu = false;
125 |   }
126 | }
127 | </script>
128 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@peepi/vuetify-tiptap",
  3 |   "version": "1.5.0",
  4 |   "license": "MIT",
  5 |   "description": "Awesome and extendable rich text editor component for Vuetify projects using tiptap",
  6 |   "homepage": "https://github.com/peepi-com-br/vuetify-tiptap",
  7 |   "repository": {
  8 |     "type": "git",
  9 |     "url": "https://github.com/peepi-com-br/vuetify-tiptap.git"
 10 |   },
 11 |   "bugs": {
 12 |     "url": "https://github.com/peepi-com-br/vuetify-tiptap/issues"
 13 |   },
 14 |   "keywords": [
 15 |     "vue",
 16 |     "vuetify",
 17 |     "tiptap",
 18 |     "richtext",
 19 |     "wysiwyg"
 20 |   ],
 21 |   "main": "dist/v-tiptap.ssr.js",
 22 |   "browser": "dist/v-tiptap.esm.js",
 23 |   "module": "dist/v-tiptap.esm.js",
 24 |   "unpkg": "dist/v-tiptap.min.js",
 25 |   "types": "dist/types/src/entry.esm.d.ts",
 26 |   "files": [
 27 |     "dist/*",
 28 |     "src/**/*.vue"
 29 |   ],
 30 |   "sideEffects": [
 31 |     "*.vue"
 32 |   ],
 33 |   "scripts": {
 34 |     "serve": "cross-env DEMO_ENV=development vue-cli-service serve",
 35 |     "build:demo": "cross-env DEMO_ENV=production vue-cli-service build",
 36 |     "prebuild": "rimraf ./dist",
 37 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
 38 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
 39 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
 40 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
 41 |     "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts",
 42 |     "prepublishOnly": "npm run build",
 43 |     "storybook:build": "vue-cli-service storybook:build -c .storybook",
 44 |     "storybook:serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service storybook:serve -p 6006 -c .storybook",
 45 |     "pretty": "prettier --write \"./**/*.{js,ts,jsx,json,vue}\""
 46 |   },
 47 |   "dependencies": {
 48 |     "@tiptap/vue-2": "^2.1.12",
 49 |     "debounce": "^1.0.1",
 50 |     "v-emoji-picker": "^2.3.3",
 51 |     "xss": "^1.0.11"
 52 |   },
 53 |   "devDependencies": {
 54 |     "@babel/core": "^7.14.6",
 55 |     "@babel/plugin-proposal-class-properties": "^7.16.7",
 56 |     "@babel/plugin-proposal-decorators": "^7.17.9",
 57 |     "@babel/preset-env": "^7.14.7",
 58 |     "@babel/preset-typescript": "^7.14.5",
 59 |     "@mdi/font": "^6.6.96",
 60 |     "@rollup/plugin-alias": "^3.1.2",
 61 |     "@rollup/plugin-babel": "^5.3.0",
 62 |     "@rollup/plugin-commonjs": "^14.0.0",
 63 |     "@rollup/plugin-node-resolve": "^9.0.0",
 64 |     "@rollup/plugin-replace": "^2.4.2",
 65 |     "@storybook/addon-essentials": "^6.0.26",
 66 |     "@storybook/addon-interactions": "^6.4.21",
 67 |     "@storybook/addon-links": "^6.0.26",
 68 |     "@storybook/addon-storysource": "^7.0.24",
 69 |     "@storybook/jest": "^0.0.10",
 70 |     "@storybook/testing-library": "^0.0.9",
 71 |     "@storybook/vue": "^6.0.26",
 72 |     "@tiptap/extension-character-count": "^2.1.12",
 73 |     "@tiptap/extension-color": "^2.1.12",
 74 |     "@tiptap/extension-focus": "^2.1.12",
 75 |     "@tiptap/extension-highlight": "^2.1.12",
 76 |     "@tiptap/extension-image": "^2.1.12",
 77 |     "@tiptap/extension-link": "^2.1.12",
 78 |     "@tiptap/extension-mention": "^2.1.12",
 79 |     "@tiptap/extension-placeholder": "^2.1.12",
 80 |     "@tiptap/extension-task-item": "^2.1.12",
 81 |     "@tiptap/extension-task-list": "^2.1.12",
 82 |     "@tiptap/extension-text-align": "^2.1.12",
 83 |     "@tiptap/extension-text-style": "^2.1.12",
 84 |     "@tiptap/extension-underline": "^2.1.12",
 85 |     "@tiptap/pm": "^2.1.12",
 86 |     "@tiptap/starter-kit": "^2.1.12",
 87 |     "@tiptap/suggestion": "^2.1.12",
 88 |     "@typescript-eslint/eslint-plugin": "^5.12.1",
 89 |     "@typescript-eslint/parser": "^5.12.1",
 90 |     "@vue/cli-plugin-babel": "^4.5.13",
 91 |     "@vue/cli-plugin-eslint": "^5.0.1",
 92 |     "@vue/cli-plugin-typescript": "^4.5.13",
 93 |     "@vue/cli-service": "^4.5.13",
 94 |     "@vue/eslint-config-airbnb": "^6.0.0",
 95 |     "@vue/eslint-config-typescript": "^10.0.0",
 96 |     "@zerollup/ts-transform-paths": "^1.7.18",
 97 |     "cache-loader": "^4.1.0",
 98 |     "core-js": "^3.21.1",
 99 |     "cross-env": "^7.0.3",
100 |     "css-loader": "^5.0.0",
101 |     "delay": "^5.0.0",
102 |     "eslint": "^8.10.0",
103 |     "eslint-import-resolver-typescript": "^2.5.0",
104 |     "eslint-plugin-import": "^2.25.4",
105 |     "eslint-plugin-prettier": "^4.0.0",
106 |     "eslint-plugin-vue": "^8.5.0",
107 |     "eslint-plugin-vuejs-accessibility": "^1.1.1",
108 |     "jsdom-global": "^3.0.2",
109 |     "minimist": "^1.2.5",
110 |     "regenerator-runtime": "^0.13.9",
111 |     "rimraf": "^3.0.2",
112 |     "roboto-fontface": "^0.10.0",
113 |     "rollup": "^2.52.8",
114 |     "rollup-plugin-terser": "^7.0.2",
115 |     "rollup-plugin-typescript2": "^0.30.0",
116 |     "rollup-plugin-visualizer": "^5.6.0",
117 |     "rollup-plugin-vue": "^5.1.9",
118 |     "rollup-plugin-vuetify": "^0.2.4",
119 |     "sass": "~1.32",
120 |     "sass-loader": "^10.0.0",
121 |     "ttypescript": "^1.5.12",
122 |     "typescript": "~4.7",
123 |     "vue": "^2.6.14",
124 |     "vue-cli-plugin-storybook": "~2.1.0",
125 |     "vue-cli-plugin-vuetify": "~2.4.6",
126 |     "vue-property-decorator": "^9.1.2",
127 |     "vue-template-compiler": "^2.6.14",
128 |     "vuetify": "^2.6.3",
129 |     "vuetify-loader": "^1.7.3",
130 |     "webpack": "^4.45.0"
131 |   },
132 |   "peerDependencies": {
133 |     "vue": "^2.6.14",
134 |     "vuetify": "^2.6.3"
135 |   },
136 |   "engines": {
137 |     "node": ">=12"
138 |   }
139 | }
140 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![Stargazers][stars-shield]][stars-url]
  2 | [![Contributors][contributors-shield]][contributors-url]
  3 | [![Forks][forks-shield]][forks-url]
  4 | [![Issues][issues-shield]][issues-url]
  5 | [![MIT License][license-shield]][license-url]
  6 | [![LinkedIn][linkedin-shield]][linkedin-url]
  7 | 
  8 | ## vuetify-tiptap
  9 | 
 10 | > 🚀 Awesome and extendable rich text editor component for Vuetify projects using tiptap
 11 | 
 12 | ![Sample](images/sample.png)
 13 | 
 14 | <p align="center">
 15 |     <a href="https://main--62508045836c88003a1f61fa.chromatic.com"><strong>View Demo</strong></a>
 16 |     ·
 17 |     <a href="#usage">Usage</a>
 18 |     ·
 19 |     <a href="#installation">Installation</a>
 20 |     ·
 21 |     <a href="#api">API</a>
 22 |     ·
 23 |     <a href="#license">License</a>
 24 |     ·
 25 |     <a href="#license">Maintainers</a>
 26 | </p>
 27 | 
 28 | ## Usage
 29 | 
 30 | ```vue
 31 | <v-tiptap v-model="value" />
 32 | ```
 33 | 
 34 | To ensure full consistency between whats is seen in the editor and what you see when you render the HTML value, the component also has a view mode.
 35 | 
 36 | ```vue
 37 | <v-tiptap v-model="value" view />
 38 | ```
 39 | 
 40 | The toolbar is fully customizable and you can add, remove or reorder buttons. You can also use slots to add custom buttons with your own functionality.
 41 | 
 42 | ```vue
 43 | <v-tiptap
 44 |   v-model="value"
 45 |   :toolbar="['bold', 'italic', '|', 'h1', 'p', '>', '#mybutton']"
 46 | >
 47 |     <template #mybutton="{ editor }">
 48 |         <v-btn icon small title="Clear Content" @click="editor.commands.clearContent()">
 49 |             <v-icon>mdi-delete-circle-outline</v-icon>
 50 |         </v-btn>
 51 |     </template>
 52 | </v-tiptap>
 53 | ```
 54 | 
 55 | > ⚠️ This project uses Vue 2 and Vuetify 2. We plan to upgrade to Vue 3 as soon as Vuetify supports it.
 56 | 
 57 | ## Instalation
 58 | 
 59 | First, install the package using npm or yarn.
 60 | 
 61 | ```bash
 62 | npm i -S @peepi/vuetify-tiptap
 63 | ```
 64 | 
 65 | Then add the package to the `transpileDependencies` config on `vue.config.js`
 66 | 
 67 | ```js
 68 | module.exports = {
 69 |   transpileDependencies: ["vuetify", "@peepi/vuetify-tiptap"],
 70 | };
 71 | ```
 72 | 
 73 | Finally, register the plugin on your main.ts.
 74 | 
 75 | ```js
 76 | import VTiptap from "@peepi/vuetify-tiptap";
 77 | 
 78 | Vue.use(VTiptap);
 79 | ```
 80 | 
 81 | ### Uploading Images
 82 | 
 83 | In order to use the upload image feature, pass down a prop `uploadImage` to the component with a function that receives a File and returns a Promise to an URL.
 84 | 
 85 | ```vue
 86 | <template>
 87 |   <v-tiptap :uploadImage="uploadImage" />
 88 | </template>
 89 | 
 90 | <script>
 91 | async function uploadImage(file) {
 92 |   const url = (await myApi.upload(file)).url;
 93 |   return url;
 94 | }
 95 | </script>
 96 | ```
 97 | 
 98 | You can also pass this function as a global option to the plugin.
 99 | 
100 | ```js
101 | Vue.use(VTiptap, { uploadImage: async file => (await myApi.upload(file)).url });
102 | ```
103 | 
104 | ### Mentions
105 | 
106 | You just need set `:mention="true"` and pass the `mentionItems` prop to the component. It accepts an array or a function that returns an array of items like:
107 | 
108 | ```js
109 |   mentionItems = [{text: 'User', value: 1, avatar: 'http://image.png'}]
110 | ```
111 | 
112 | ```vue
113 | <template>
114 |   <v-tiptap :mention="true" :mentionItems="mentionItems" />
115 | </template>
116 | 
117 | <script>
118 | async function mentionItems(query: string) {
119 |   const items = (await myApi.users(query)).data;
120 |   return items;
121 | }
122 | </script>
123 | ```
124 | 
125 | You can also pass this function as a global option to the plugin and add .
126 | 
127 | ```js
128 | Vue.use(VTiptap, { mentionItems: async query => (await myApi.users(query)).data });
129 | ```
130 | 
131 | ## Documentation
132 | 
133 | Check the <a href="https://main--62508045836c88003a1f61fa.chromatic.com">live demo</a> for documentation.
134 | 
135 | ## Changelog
136 | 
137 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
138 | 
139 | ## Contributing
140 | 
141 | Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
142 | 
143 | ## Credits
144 | 
145 | This package was developed at [Peepi](https://www.peepi.com.br), a SaaS platform to engage customers and employees.
146 | 
147 | - [Atila Silva](https://github.com/a2insights)
148 | - [Ricardo Faust](https://github.com/alkin)
149 | - [All Contributors](../../contributors)
150 | 
151 | ## License
152 | 
153 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
154 | 
155 | <!-- MARKDOWN LINKS & IMAGES -->
156 | <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
157 | 
158 | [contributors-shield]: https://img.shields.io/github/contributors/peepi-com-br/vuetify-tiptap.svg?style=for-the-badge
159 | [contributors-url]: https://github.com/peepi-com-br/vuetify-tiptap/graphs/contributors
160 | [forks-shield]: https://img.shields.io/github/forks/peepi-com-br/vuetify-tiptap.svg?style=for-the-badge
161 | [forks-url]: https://github.com/peepi-com-br/vuetify-tiptap/network/members
162 | [stars-shield]: https://img.shields.io/github/stars/peepi-com-br/vuetify-tiptap.svg?style=for-the-badge
163 | [stars-url]: https://github.com/peepi-com-br/vuetify-tiptap/stargazers
164 | [issues-shield]: https://img.shields.io/github/issues/peepi-com-br/vuetify-tiptap.svg?style=for-the-badge
165 | [issues-url]: https://github.com/peepi-com-br/vuetify-tiptap/issues
166 | [license-shield]: https://img.shields.io/github/license/peepi-com-br/vuetify-tiptap.svg?style=for-the-badge
167 | [license-url]: https://github.com/peepi-com-br/vuetify-tiptap/blob/master/LICENSE.txt
168 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
169 | [linkedin-url]: https://linkedin.com/company/peepi
170 | [product-screenshot]: images/screenshot.png
171 | 


--------------------------------------------------------------------------------
/src/constants/toolbarDefinitions.ts:
--------------------------------------------------------------------------------
  1 | import icons from "./icons";
  2 | 
  3 | export default function makeToolbarDefinitions(context) {
  4 |   const definitions = {
  5 |     // Special items
  6 |     "|": { type: "divider" },
  7 |     divider: { type: "divider" },
  8 |     ">": { type: "spacer" },
  9 |     spacer: { type: "spacer" },
 10 |     // Standard buttons
 11 |     bold: {
 12 |       title: "Bold",
 13 |       icon: "bold",
 14 |       action: () => context.editor.chain().focus().toggleBold().run(),
 15 |       isActive: () => context.editor.isActive("bold"),
 16 |     },
 17 |     italic: {
 18 |       title: "Italic",
 19 |       icon: "italic",
 20 |       action: () => context.editor.chain().focus().toggleItalic().run(),
 21 |       isActive: () => context.editor.isActive("italic"),
 22 |     },
 23 |     underline: {
 24 |       title: "Underline",
 25 |       icon: "underline",
 26 |       action: () => context.editor.chain().focus().toggleUnderline().run(),
 27 |       isActive: () => context.editor.isActive("underline"),
 28 |     },
 29 |     strike: {
 30 |       title: "Strike",
 31 |       icon: "strike",
 32 |       action: () => context.editor.chain().focus().toggleStrike().run(),
 33 |       isActive: () => context.editor.isActive("strike"),
 34 |     },
 35 |     color: {
 36 |       title: "Color",
 37 |       icon: "color",
 38 |       action: color => context.editor.chain().focus().setColor(color).run(),
 39 |       isActive: () => context.editor.isActive("textStyle"),
 40 |     },
 41 |     highlight: {
 42 |       title: "Highlight",
 43 |       icon: "highlight",
 44 |       action: () => context.editor.chain().focus().toggleHighlight().run(),
 45 |       isActive: () => context.editor.isActive("highlight"),
 46 |     },
 47 |     headings: { type: "headings" },
 48 |     h1: {
 49 |       title: "Heading 1",
 50 |       icon: "h1",
 51 |       action: () =>
 52 |         context.editor.chain().focus().toggleHeading({ level: 1 }).run(),
 53 |       isActive: () => context.editor.isActive("heading", { level: 1 }),
 54 |     },
 55 |     h2: {
 56 |       title: "Heading 2",
 57 |       icon: "h2",
 58 |       action: () =>
 59 |         context.editor.chain().focus().toggleHeading({ level: 2 }).run(),
 60 |       isActive: () => context.editor.isActive("heading", { level: 2 }),
 61 |     },
 62 |     h3: {
 63 |       title: "Heading 3",
 64 |       icon: "h3",
 65 |       action: () =>
 66 |         context.editor.chain().focus().toggleHeading({ level: 3 }).run(),
 67 |       isActive: () => context.editor.isActive("heading", { level: 3 }),
 68 |     },
 69 |     p: {
 70 |       title: "Paragraph",
 71 |       icon: "p",
 72 |       action: () => context.editor.chain().focus().setParagraph().run(),
 73 |       isActive: () => context.editor.isActive("paragraph"),
 74 |     },
 75 |     left: {
 76 |       title: "left",
 77 |       icon: "left",
 78 |       action: () => context.editor.chain().focus().setTextAlign("left").run(),
 79 |       isActive: () => context.editor.isActive({ textAlign: "left" }),
 80 |     },
 81 |     center: {
 82 |       title: "center",
 83 |       icon: "center",
 84 |       action: () => context.editor.chain().focus().setTextAlign("center").run(),
 85 |       isActive: () => context.editor.isActive({ textAlign: "center" }),
 86 |     },
 87 |     right: {
 88 |       title: "right",
 89 |       icon: "right",
 90 |       action: () => context.editor.chain().focus().setTextAlign("right").run(),
 91 |       isActive: () => context.editor.isActive({ textAlign: "right" }),
 92 |     },
 93 |     justify: {
 94 |       title: "justify",
 95 |       icon: "justify",
 96 |       action: () =>
 97 |         context.editor.chain().focus().setTextAlign("justify").run(),
 98 |       isActive: () => context.editor.isActive({ textAlign: "justify" }),
 99 |     },
100 |     bulletList: {
101 |       title: "Bullet List",
102 |       icon: "bulletList",
103 |       action: () => context.editor.chain().focus().toggleBulletList().run(),
104 |       isActive: () => context.editor.isActive("bulletList"),
105 |     },
106 |     orderedList: {
107 |       title: "Ordered List",
108 |       icon: "orderedList",
109 |       action: () => context.editor.chain().focus().toggleOrderedList().run(),
110 |       isActive: () => context.editor.isActive("orderedList"),
111 |     },
112 |     checkbox: {
113 |       title: "Task List",
114 |       icon: "checkbox",
115 |       action: () => context.editor.chain().focus().toggleTaskList().run(),
116 |       isActive: () => context.editor.isActive("taskList"),
117 |     },
118 |     link: {
119 |       title: "Link",
120 |       icon: "link",
121 |       action: () => (context.linkDialog = true),
122 |       isActive: () => context.editor.isActive("link"),
123 |     },
124 |     image: {
125 |       title: "Image",
126 |       icon: "image",
127 |       action: () => (context.imageDialog = true),
128 |       isActive: () => context.editor.isActive("image"),
129 |     },
130 |     video: {
131 |       title: "Video",
132 |       icon: "video",
133 |       action: () => (context.videoDialog = true),
134 |       isActive: () => context.editor.isActive("iframe"),
135 |     },
136 |     emoji: {
137 |       title: "Emoji",
138 |       icon: "emoji",
139 |       action: context.setEmoji,
140 |     },
141 |     blockquote: {
142 |       title: "Blockquote",
143 |       icon: "blockquote",
144 |       action: () => context.editor.chain().focus().toggleBlockquote().run(),
145 |       isActive: () => context.editor.isActive("blockquote"),
146 |     },
147 |     rule: {
148 |       title: "Horizontal Rule",
149 |       icon: "rule",
150 |       action: () => context.editor.chain().focus().setHorizontalRule().run(),
151 |     },
152 |     code: {
153 |       title: "Code",
154 |       icon: "code",
155 |       action: () => context.editor.chain().focus().toggleCode().run(),
156 |       isActive: () => context.editor.isActive("code"),
157 |     },
158 |     codeBlock: {
159 |       title: "Code Block",
160 |       icon: "codeBlock",
161 |       action: () => context.editor.chain().focus().toggleCodeBlock().run(),
162 |       isActive: () => context.editor.isActive("codeBlock"),
163 |     },
164 |     clear: {
165 |       title: "Clear Format",
166 |       icon: "clear",
167 |       /* eslint newline-per-chained-call: "off" */
168 |       action: () =>
169 |         context.editor.chain().focus().clearNodes().unsetAllMarks().run(),
170 |     },
171 |   };
172 | 
173 |   let toolbarItems = [];
174 | 
175 |   const toolbar = context.toolbar.concat(context.append);
176 | 
177 |   for (let i of toolbar) {
178 |     if (definitions[i]) {
179 |       definitions[i].icon = icons.get(
180 |         definitions[i].icon,
181 |         context.$vuetify.icons.iconfont
182 |       );
183 |       definitions[i].type = definitions[i].type || i;
184 |       toolbarItems.push(definitions[i]);
185 |     } else if (i[0] === "#") {
186 |       toolbarItems.push({ type: "slot", slot: i.substring(1) });
187 |     }
188 |   }
189 | 
190 |   return toolbarItems;
191 | }
192 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <v-row class="my-3 px-4">
  4 |       <v-col cols="4">
  5 |         <v-toolbar
  6 |           :color="$vuetify.theme.dark ? undefined : 'grey lighten-4'"
  7 |           dense
  8 |           flat
  9 |         >
 10 |           <v-toolbar-title>vuetify-tiptap</v-toolbar-title>
 11 |         </v-toolbar>
 12 | 
 13 |         <v-list
 14 |           :color="$vuetify.theme.dark ? undefined : 'grey lighten-5'"
 15 |           subheader
 16 |           two-line
 17 |           flat
 18 |         >
 19 |           <v-subheader>Props</v-subheader>
 20 | 
 21 |           <v-list-item>
 22 |             <v-switch v-model="$vuetify.theme.dark" label="dark" inset />
 23 |           </v-list-item>
 24 | 
 25 |           <v-list-item>
 26 |             <v-switch v-model="hideToolbar" label="hideToolbar" inset />
 27 |           </v-list-item>
 28 | 
 29 |           <v-list-item>
 30 |             <v-switch v-model="disableToolbar" label="disableToolbar" inset />
 31 |           </v-list-item>
 32 | 
 33 |           <v-list-item>
 34 |             <v-switch v-model="view" label="view" inset />
 35 |           </v-list-item>
 36 | 
 37 |           <v-list-item>
 38 |             <v-switch v-model="mention" label="mention" inset />
 39 |           </v-list-item>
 40 | 
 41 |           <v-list-item>
 42 |             <v-switch v-model="outlined" label="outlined" inset />
 43 |           </v-list-item>
 44 | 
 45 |           <v-list-item>
 46 |             <v-switch v-model="dense" label="dense" inset />
 47 |           </v-list-item>
 48 | 
 49 |           <v-list-item>
 50 |             <v-switch v-model="slotPrepend" label="slotPrepend" inset />
 51 |           </v-list-item>
 52 | 
 53 |           <v-list-item>
 54 |             <v-switch v-model="slotAppend" label="slotAppend" inset />
 55 |           </v-list-item>
 56 | 
 57 |           <v-list-item>
 58 |             <v-switch v-model="slotBottom" label="slotBottom" inset />
 59 |           </v-list-item>
 60 | 
 61 |           <v-list-item>
 62 |             <v-switch
 63 |               v-model="errorMessages"
 64 |               :false-value="null"
 65 |               true-value="Error messages"
 66 |               label="errorMessages"
 67 |               inset
 68 |             />
 69 |           </v-list-item>
 70 | 
 71 |           <v-list-item>
 72 |             <v-select
 73 |               v-model="$vuetify.icons.iconfont"
 74 |               :items="['mdi', 'fa', 'md']"
 75 |               label="icons"
 76 |               persisten
 77 |             />
 78 |           </v-list-item>
 79 | 
 80 |           <v-list-item>
 81 |             <v-select
 82 |               v-model="toolbar"
 83 |               :items="toolbarItems"
 84 |               label="toolbar"
 85 |               multiple
 86 |               persisten
 87 |             />
 88 |           </v-list-item>
 89 |         </v-list>
 90 |       </v-col>
 91 | 
 92 |       <v-col cols="8">
 93 |         <VTiptap
 94 |           v-model="content"
 95 |           :hide-toolbar="hideToolbar"
 96 |           :disable-toolbar="disableToolbar"
 97 |           :toolbar="toolbar"
 98 |           :outlined="outlined"
 99 |           :dense="dense"
100 |           :mention="mention"
101 |           :view="view"
102 |           :mention-items="mentionItems"
103 |           :dark="$vuetify.theme.dark"
104 |           placeholder="Enter some text..."
105 |           :error-messages="errorMessages"
106 |           rounded
107 |         >
108 |           <template #editor="{}" v-if="editHtml">
109 |             <v-textarea
110 |               height="auto"
111 |               hide-details
112 |               v-model="content"
113 |               flat
114 |               solo
115 |             />
116 |           </template>
117 | 
118 |           <template #edit-html-btn="{}">
119 |             <v-btn
120 |               @click="
121 |                 editHtml = !editHtml;
122 |                 disableToolbar = !disableToolbar;
123 |               "
124 |               class="elevation-0"
125 |               small
126 |               :color="editHtml ? 'primary' : undefined"
127 |               text
128 |             >
129 |               HTML
130 |             </v-btn>
131 |           </template>
132 | 
133 |           <template #clean-btn="{ editor }">
134 |             <v-btn
135 |               icon
136 |               small
137 |               @click="
138 |                 editor.commands.setContent('');
139 |                 content = '';
140 |               "
141 |             >
142 |               <v-icon>mdi-delete-circle-outline</v-icon>
143 |             </v-btn>
144 |           </template>
145 | 
146 |           <template v-if="slotPrepend" #prepend>🔜</template>
147 |           <template v-if="slotAppend" #append>🔚</template>
148 |           <template v-if="slotBottom" #bottom="{ editor }">
149 |             <v-toolbar
150 |               dense
151 |               flat
152 |               height="48px"
153 |               color="grey lighten-4"
154 |               class="px-2"
155 |               style="border-top: 1px solid #ddd"
156 |             >
157 |               <v-spacer />
158 |               <v-btn
159 |                 @click="
160 |                   editor.commands.setContent('');
161 |                   content = '';
162 |                 "
163 |                 icon
164 |                 small
165 |               >
166 |                 <v-icon>mdi-send</v-icon>
167 |               </v-btn>
168 |             </v-toolbar>
169 |           </template>
170 | 
171 |           <!-- <template #image="{ editor, imageSrc }">
172 |             <v-text-field
173 |               :value="imageSrc"
174 |               name="src"
175 |               @input="editor.chain().focus().setImage({ src: $event }).run()"
176 |               label="Link URL"
177 |               :placeholder="'image'"
178 |               hide-details
179 |             />
180 |           </template> -->
181 |         </VTiptap>
182 |       </v-col>
183 |     </v-row>
184 |   </v-app>
185 | </template>
186 | 
187 | <script>
188 | import VTiptap from "../src/components/VTiptap.vue";
189 | import fetch from "node-fetch";
190 | import testHtml from "@/constants/testHtml";
191 | import toolbarItems from "@/constants/toolbarItems";
192 | 
193 | export default {
194 |   name: "App",
195 |   components: {
196 |     VTiptap,
197 |   },
198 | 
199 |   data: () => ({
200 |     content: testHtml,
201 |     view: false,
202 |     mention: true,
203 |     outlined: true,
204 |     dense: false,
205 |     editHtml: false,
206 |     hideToolbar: false,
207 |     disableToolbar: false,
208 |     errorMessages: null,
209 |     toolbar: undefined,
210 |     slotPrepend: false,
211 |     slotAppend: false,
212 |     slotBottom: false,
213 |   }),
214 | 
215 |   computed: {
216 |     toolbarItems() {
217 |       return toolbarItems;
218 |     },
219 |   },
220 | 
221 |   methods: {
222 |     mentionItems: async function (query) {
223 |       const response = await fetch(
224 |         `https://dummyjson.com/users/search?q=${query}`,
225 |         {}
226 |       ).then(res => res.json());
227 | 
228 |       return response.users
229 |         .map(u => ({
230 |           value: u.id,
231 |           text: u.username,
232 |           avatar: u.image,
233 |         }))
234 |         .slice(0, 5);
235 |     },
236 |   },
237 | };
238 | </script>
239 | 


--------------------------------------------------------------------------------
/src/stories/VTiptap.stories.js:
--------------------------------------------------------------------------------
  1 | import { storyFactory } from "~storybook/util/helpers";
  2 | import { userEvent, screen } from "@storybook/testing-library";
  3 | import { expect } from "@storybook/jest";
  4 | import delay from "delay";
  5 | 
  6 | import VTiptap from "../components/VTiptap.vue";
  7 | import testHtml from "../constants/testHtml";
  8 | import CharacterCount from "@tiptap/extension-character-count";
  9 | 
 10 | // set the default properties
 11 | export default storyFactory({
 12 |   title: "VTiptap",
 13 |   component: VTiptap,
 14 |   description: "This can be **markdown**!",
 15 |   argTypes: {
 16 |     toolbar: { control: "array" },
 17 |     value: { control: "color" },
 18 |   },
 19 |   args: {
 20 |     toolbar: undefined,
 21 |     value: "",
 22 |   },
 23 | });
 24 | 
 25 | function makeSlots(args) {
 26 |   return Object.entries(args.slots || {}).map(
 27 |     ([key, value]) =>
 28 |       `<template #${key}="{ editor, disabled }">${value}</template>\n`
 29 |   );
 30 | }
 31 | 
 32 | // create a base template to share
 33 | const Template = (args, { argTypes }) => ({
 34 |   components: { VTiptap },
 35 |   props: Object.keys(argTypes).filter(key => key !== "slots"),
 36 | 
 37 |   template: `
 38 |   <v-tiptap v-bind="$props" style="max-width:800px">
 39 |     ${makeSlots(args)}
 40 |   </v-tiptap>`,
 41 | });
 42 | 
 43 | // now the stories, you need at least one
 44 | export const BasicUsage = Template.bind({});
 45 | BasicUsage.args = {
 46 |   placeholder: "Type anything here",
 47 | };
 48 | 
 49 | export const BasicUsageWithText = Template.bind({});
 50 | BasicUsageWithText.storyName = "Basic Usage (Value)";
 51 | BasicUsageWithText.args = {
 52 |   value: testHtml,
 53 |   label: "Basic Usage (Value)",
 54 | };
 55 | 
 56 | export const BasicUsageWithView = Template.bind({});
 57 | BasicUsageWithView.storyName = "Basic Usage (View Mode)";
 58 | BasicUsageWithView.args = { value: testHtml, view: true };
 59 | 
 60 | // Toolbard
 61 | export const CustomToolbar = Template.bind({});
 62 | CustomToolbar.args = {
 63 |   toolbar: [
 64 |     "h1",
 65 |     "h2",
 66 |     "h3",
 67 |     "|",
 68 |     "bold",
 69 |     "color",
 70 |     "|",
 71 |     "left",
 72 |     "right",
 73 |     ">",
 74 |     "clear",
 75 |   ],
 76 | };
 77 | 
 78 | export const CustomButtons = Template.bind({});
 79 | CustomButtons.args = {
 80 |   toolbar: ["#emoji", "#clear"],
 81 |   slots: {
 82 |     emoji: `<v-btn icon small @click="editor.commands.insertContent('😀')"><v-icon>mdi-emoticon-outline</v-icon></v-btn>`,
 83 |     clear: `<v-btn text small @click="editor.commands.clearContent()">Clear</v-btn>`,
 84 |   },
 85 | };
 86 | 
 87 | export const DisabledToolbar = Template.bind({});
 88 | DisabledToolbar.args = {
 89 |   toolbar: ["bold", "color", "headings", "#emoji"],
 90 |   disableToolbar: true,
 91 |   slots: {
 92 |     emoji: `<v-btn icon small @click="editor.commands.insertContent('😀')" :disabled="disabled"><v-icon>mdi-emoticon-outline</v-icon></v-btn>`,
 93 |   },
 94 | };
 95 | 
 96 | export const Mentions = Template.bind({});
 97 | Mentions.args = {
 98 |   value: `<p>Type @ to start mentioning people: <span data-type="mention" class="mention" data-id="1" data-label="Cyndi Lauper" contenteditable="false">@Cyndi Lauper</span> </p>`,
 99 |   mention: true,
100 |   mentionItems: async function (query) {
101 |     await delay(2000);
102 | 
103 |     const response = await fetch(
104 |       `https://dummyjson.com/users/search?q=${query}`,
105 |       {}
106 |     ).then(res => res.json());
107 | 
108 |     return response.users
109 |       .map(u => ({
110 |         value: u.id,
111 |         text: u.username,
112 |         avatar: u.image,
113 |       }))
114 |       .slice(0, 5);
115 |   },
116 |   // mentionItems: () =>
117 |   //   new Promise(resolve =>
118 |   //     setTimeout(
119 |   //       () =>
120 |   //         resolve([
121 |   //           { text: "Cyndi Lauper", value: 1 },
122 |   //           { text: "Tom Cruise", value: 1 },
123 |   //           { text: "Madonna", value: 1 },
124 |   //           { text: "Jerry Hall", value: 1 },
125 |   //           { text: "Joan Collins", value: 1 },
126 |   //           { text: "Winona Ryder", value: 1 },
127 |   //           { text: "Christina Applegate", value: 1 },
128 |   //           { text: "Alyssa Milano", value: 1 },
129 |   //           { text: "Molly Ringwald", value: 1 },
130 |   //           { text: "Ally Sheedy", value: 1 },
131 |   //           { text: "Debbie Harry", value: 1 },
132 |   //           { text: "Olivia Newton-John", value: 1 },
133 |   //           { text: "Elton John", value: 1 },
134 |   //           { text: "Michael J. Fox", value: 1 },
135 |   //           { text: "Axl Rose", value: 1 },
136 |   //           { text: "Emilio Estevez", value: 1 },
137 |   //           { text: "Ralph Macchio", value: 1 },
138 |   //           { text: "Rob Lowe", value: 1 },
139 |   //           { text: "Jennifer Grey", value: 1 },
140 |   //           { text: "Mickey Rourke", value: 1 },
141 |   //           { text: "John Cusack", value: 1 },
142 |   //           { text: "Matthew Broderick", value: 1 },
143 |   //           { text: "Justine Bateman", value: 1 },
144 |   //           { text: "Lisa Bonet", value: 1 },
145 |   //         ]),
146 |   //       5000
147 |   //     )
148 |   //   ),
149 | };
150 | 
151 | export const UploadImage = Template.bind({});
152 | UploadImage.args = {
153 |   uploadImage: async file => {
154 |     await delay(2000);
155 |     return "https://fakeimg.pl/360x240/25a7fd";
156 |   },
157 | };
158 | 
159 | // Slots
160 | export const SlotsBottom = Template.bind({});
161 | SlotsBottom.storyName = "Slots: Bottom";
162 | SlotsBottom.args = {
163 |   extensions: [CharacterCount],
164 |   slots: {
165 |     bottom: `
166 |     <v-toolbar dense elevation="0" class="px-4"  style="border-top: 1px solid #DDD">
167 |       <v-btn icon small @click="onClick"><v-icon>mdi-home</v-icon></v-btn>
168 |       <v-spacer/>
169 |       <small class="text-uppercase" style="opacity: 0.5;">{{ editor.storage.characterCount.characters() }} characters</small>
170 |       <v-spacer/>
171 |       <v-btn icon small @click="onClick"><v-icon>mdi-send</v-icon></v-btn>
172 |     </v-toolbar>`,
173 |   },
174 | };
175 | 
176 | export const SlotsPrepend = Template.bind({});
177 | SlotsPrepend.storyName = "Slots: Prepend and Append";
178 | SlotsPrepend.args = {
179 |   hideToolbar: true,
180 |   editorClass: "py-1",
181 |   dense: true,
182 |   placeholder: "Insert your comment here... (Use CTRL + B to make it bold)",
183 | 
184 |   slots: {
185 |     prepend: `<v-avatar color="indigo" size="26" class="ma-2" title="Prepend Slot"><v-icon dark>mdi-account-circle</v-icon></v-avatar>`,
186 |     append: `<v-btn icon small class="ma-2" title="Append Slot"><v-icon>mdi-send</v-icon></v-avatar>`,
187 |   },
188 | };
189 | 
190 | export const TestBasic = Template.bind({});
191 | TestBasic.args = {};
192 | TestBasic.play = async () => {
193 |   await userEvent.click(screen.getByTestId("value").children[0].children[0]);
194 | 
195 |   await userEvent.keyboard("Testing", { delay: 100 });
196 |   await userEvent.keyboard("a", {
197 |     keyboardState: userEvent.keyboard("[ControlLeft>]"),
198 |   });
199 | 
200 |   await userEvent.click(screen.getByTestId("bold"));
201 |   await userEvent.click(screen.getByTestId("center"));
202 | 
203 |   await userEvent.click(screen.getByTestId("value").children[0].children[0]);
204 |   await userEvent.keyboard("{home}");
205 | 
206 |   await expect(screen.getByTestId("value").children[0].innerHTML).toBe(
207 |     '<p style="text-align: center" class="focus"><strong>Testing</strong></p>'
208 |   );
209 | };
210 | 


--------------------------------------------------------------------------------
/src/plugins/tiptap-kit.ts:
--------------------------------------------------------------------------------
  1 | // StarterKit
  2 | import { Extension } from "@tiptap/core";
  3 | import Blockquote, { BlockquoteOptions } from "@tiptap/extension-blockquote";
  4 | import Bold, { BoldOptions } from "@tiptap/extension-bold";
  5 | import BulletList, { BulletListOptions } from "@tiptap/extension-bullet-list";
  6 | import Code, { CodeOptions } from "@tiptap/extension-code";
  7 | import CodeBlock, { CodeBlockOptions } from "@tiptap/extension-code-block";
  8 | import Document from "@tiptap/extension-document";
  9 | import Dropcursor, { DropcursorOptions } from "@tiptap/extension-dropcursor";
 10 | import Gapcursor from "@tiptap/extension-gapcursor";
 11 | import HardBreak, { HardBreakOptions } from "@tiptap/extension-hard-break";
 12 | import Heading, { HeadingOptions } from "@tiptap/extension-heading";
 13 | import History, { HistoryOptions } from "@tiptap/extension-history";
 14 | import HorizontalRule, {
 15 |   HorizontalRuleOptions,
 16 | } from "@tiptap/extension-horizontal-rule";
 17 | import Italic, { ItalicOptions } from "@tiptap/extension-italic";
 18 | import ListItem, { ListItemOptions } from "@tiptap/extension-list-item";
 19 | import OrderedList, {
 20 |   OrderedListOptions,
 21 | } from "@tiptap/extension-ordered-list";
 22 | import Paragraph, { ParagraphOptions } from "@tiptap/extension-paragraph";
 23 | import Strike, { StrikeOptions } from "@tiptap/extension-strike";
 24 | import Text from "@tiptap/extension-text";
 25 | 
 26 | // Extensions
 27 | import Placeholder, { PlaceholderOptions } from "@tiptap/extension-placeholder";
 28 | import TextAlign, { TextAlignOptions } from "@tiptap/extension-text-align";
 29 | import Focus, { FocusOptions } from "@tiptap/extension-focus";
 30 | import Color, { ColorOptions } from "@tiptap/extension-color";
 31 | import Highlight, { HighlightOptions } from "@tiptap/extension-highlight";
 32 | import Image, { ImageOptions } from "@tiptap/extension-image";
 33 | import Link, { LinkOptions } from "@tiptap/extension-link";
 34 | import TaskList, { TaskListOptions } from "@tiptap/extension-task-list";
 35 | import TaskItem, { TaskItemOptions } from "@tiptap/extension-task-item";
 36 | import TextStyle, { TextStyleOptions } from "@tiptap/extension-text-style";
 37 | import Underline, { UnderlineOptions } from "@tiptap/extension-underline";
 38 | import Mention from "@tiptap/extension-mention";
 39 | import Video from "@/plugins/video";
 40 | 
 41 | export interface StarterKitOptions {
 42 |   blockquote: Partial<BlockquoteOptions> | false;
 43 |   bold: Partial<BoldOptions> | false;
 44 |   bulletList: Partial<BulletListOptions> | false;
 45 |   code: Partial<CodeOptions> | false;
 46 |   codeBlock: Partial<CodeBlockOptions> | false;
 47 |   document: false;
 48 |   dropcursor: Partial<DropcursorOptions> | false;
 49 |   gapcursor: false;
 50 |   hardBreak: Partial<HardBreakOptions> | false;
 51 |   heading: Partial<HeadingOptions> | false;
 52 |   history: Partial<HistoryOptions> | false;
 53 |   horizontalRule: Partial<HorizontalRuleOptions> | false;
 54 |   italic: Partial<ItalicOptions> | false;
 55 |   listItem: Partial<ListItemOptions> | false;
 56 |   orderedList: Partial<OrderedListOptions> | false;
 57 |   paragraph: Partial<ParagraphOptions> | false;
 58 |   strike: Partial<StrikeOptions> | false;
 59 |   text: any;
 60 |   placeholder: Partial<PlaceholderOptions> | false;
 61 |   textAlign: Partial<TextAlignOptions> | false;
 62 |   focus: Partial<FocusOptions> | false;
 63 |   color: Partial<ColorOptions> | false;
 64 |   highlight: Partial<HighlightOptions> | false;
 65 |   image: Partial<ImageOptions> | false;
 66 |   link: Partial<LinkOptions> | false;
 67 |   taskList: Partial<TaskListOptions> | false;
 68 |   taskItem: Partial<TaskItemOptions> | false;
 69 |   textStyle: Partial<TextStyleOptions> | false;
 70 |   underline: Partial<UnderlineOptions> | false;
 71 |   video: any;
 72 |   mention: any;
 73 | }
 74 | 
 75 | export default Extension.create<StarterKitOptions>({
 76 |   name: "tiptap-kit",
 77 | 
 78 |   addExtensions() {
 79 |     const extensions = [];
 80 | 
 81 |     if (this.options.placeholder !== false) {
 82 |       extensions.push(Placeholder.configure(this.options.placeholder));
 83 |     }
 84 | 
 85 |     if (this.options.textAlign !== false) {
 86 |       extensions.push(TextAlign.configure(this.options.textAlign));
 87 |     }
 88 | 
 89 |     if (this.options.focus !== false) {
 90 |       extensions.push(Focus.configure(this.options.focus));
 91 |     }
 92 | 
 93 |     if (this.options.color !== false) {
 94 |       extensions.push(Color.configure(this.options.color));
 95 |     }
 96 | 
 97 |     if (this.options.highlight !== false) {
 98 |       extensions.push(Highlight.configure(this.options.highlight));
 99 |     }
100 | 
101 |     if (this.options.image !== false) {
102 |       extensions.push(Image.configure(this.options.image));
103 |     }
104 | 
105 |     if (this.options.link !== false) {
106 |       extensions.push(Link.configure(this.options.link));
107 |     }
108 | 
109 |     if (this.options.taskList !== false) {
110 |       extensions.push(TaskList.configure(this.options.taskList));
111 |     }
112 | 
113 |     if (this.options.taskItem !== false) {
114 |       extensions.push(TaskItem.configure(this.options.taskItem));
115 |     }
116 | 
117 |     if (this.options.textStyle !== false) {
118 |       extensions.push(TextStyle.configure(this.options.textStyle));
119 |     }
120 | 
121 |     if (this.options.underline !== false) {
122 |       extensions.push(Underline.configure(this.options.underline));
123 |     }
124 | 
125 |     if (this.options.video !== false) {
126 |       extensions.push(Video.configure(this.options.video));
127 |     }
128 | 
129 |     if (this.options.blockquote !== false) {
130 |       extensions.push(Blockquote.configure(this.options.blockquote));
131 |     }
132 | 
133 |     if (this.options.bold !== false) {
134 |       extensions.push(Bold.configure(this.options.bold));
135 |     }
136 | 
137 |     if (this.options.bulletList !== false) {
138 |       extensions.push(BulletList.configure(this.options.bulletList));
139 |     }
140 | 
141 |     if (this.options.code !== false) {
142 |       extensions.push(Code.configure(this.options.code));
143 |     }
144 | 
145 |     if (this.options.codeBlock !== false) {
146 |       extensions.push(CodeBlock.configure(this.options.codeBlock));
147 |     }
148 | 
149 |     if (this.options.document !== false) {
150 |       extensions.push(Document.configure(this.options.document));
151 |     }
152 | 
153 |     if (this.options.dropcursor !== false) {
154 |       extensions.push(Dropcursor.configure(this.options.dropcursor));
155 |     }
156 | 
157 |     if (this.options.gapcursor !== false) {
158 |       extensions.push(Gapcursor.configure(this.options.gapcursor));
159 |     }
160 | 
161 |     if (this.options.hardBreak !== false) {
162 |       extensions.push(HardBreak.configure(this.options.hardBreak));
163 |     }
164 | 
165 |     if (this.options.heading !== false) {
166 |       extensions.push(Heading.configure(this.options.heading));
167 |     }
168 | 
169 |     if (this.options.history !== false) {
170 |       extensions.push(History.configure(this.options.history));
171 |     }
172 | 
173 |     if (this.options.horizontalRule !== false) {
174 |       extensions.push(HorizontalRule.configure(this.options.horizontalRule));
175 |     }
176 | 
177 |     if (this.options.italic !== false) {
178 |       extensions.push(Italic.configure(this.options.italic));
179 |     }
180 | 
181 |     if (this.options.listItem !== false) {
182 |       extensions.push(ListItem.configure(this.options.listItem));
183 |     }
184 | 
185 |     if (this.options.orderedList !== false) {
186 |       extensions.push(OrderedList.configure(this.options.orderedList));
187 |     }
188 | 
189 |     if (this.options.paragraph !== false) {
190 |       extensions.push(Paragraph.configure(this.options.paragraph));
191 |     }
192 | 
193 |     if (this.options.strike !== false) {
194 |       extensions.push(Strike.configure(this.options.strike));
195 |     }
196 | 
197 |     if (this.options.text !== false) {
198 |       extensions.push(Text.configure(this.options.text));
199 |     }
200 | 
201 |     if (this.options.mention !== false) {
202 |       extensions.push(Mention.configure(this.options.mention));
203 |     }
204 | 
205 |     return extensions;
206 |   },
207 | });
208 | 


--------------------------------------------------------------------------------
/src/components/VTiptap.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="v-tiptap" :class="{ dense, view }">
  3 |     <!-- View mode -->
  4 |     <div v-if="view !== false" v-html="cleanValue" style="width: 100%" />
  5 |     <!-- Edit Mode -->
  6 |     <template v-else>
  7 |       <label v-if="label" class="v-label">{{ label }}</label>
  8 |       <v-input
  9 |         class="simple outside-label"
 10 |         style="padding-top: 0px !important"
 11 |         v-bind="$attrs"
 12 |         hide-details="auto"
 13 |       >
 14 |         <v-card
 15 |           flat
 16 |           :outlined="outlined"
 17 |           :dark="dark"
 18 |           style="width: 100%"
 19 |           v-bind="$attrs"
 20 |           :style="{
 21 |             borderColor: $attrs['error-messages'] ? '#ff5252' : undefined,
 22 |           }"
 23 |         >
 24 |           <!-- Toolbar -->
 25 |           <v-toolbar
 26 |             v-if="!hideToolbar && toolbar && toolbar.length"
 27 |             dense
 28 |             flat
 29 |             :color="dark ? undefined : 'grey lighten-4'"
 30 |             height="auto"
 31 |             class="py-1"
 32 |           >
 33 |             <template v-for="(item, key) in items">
 34 |               <!-- Spacer -->
 35 |               <v-spacer v-if="item.type === 'spacer'" :key="`spacer-${key}`" />
 36 |               <!-- Divider -->
 37 |               <div
 38 |                 v-else-if="item.type === 'divider'"
 39 |                 class="divider"
 40 |                 :key="`divider-${key}`"
 41 |               />
 42 |               <!-- Slot -->
 43 |               <div v-else-if="item.type === 'slot'" :key="`slot-${key}`">
 44 |                 <slot
 45 |                   :name="item.slot"
 46 |                   v-bind="{ editor, disabled: disableToolbar }"
 47 |                 />
 48 |               </div>
 49 |               <!-- Buttons -->
 50 |               <div v-else :key="`button-${key}`">
 51 |                 <v-tooltip :open-delay="500" top>
 52 |                   <span>{{ item.title }}</span>
 53 |                   <template v-slot:activator="{ on, attrs }">
 54 |                     <!-- Headings -->
 55 |                     <div v-if="item.type === 'headings'" class="ml-n1">
 56 |                       <v-select
 57 |                         v-model="selectedHeading"
 58 |                         :disabled="disableToolbar"
 59 |                         :items="headingsItems"
 60 |                         :menu-props="{ dark: dark }"
 61 |                         :dark="dark"
 62 |                         dense
 63 |                         hide-details="auto"
 64 |                         style="width: 104px"
 65 |                         :data-testid="item.type"
 66 |                       />
 67 |                     </div>
 68 | 
 69 |                     <!-- Color Button -->
 70 |                     <div v-else-if="item.title === 'Color'" class="mr-1">
 71 |                       <ColorPicker
 72 |                         v-model="selectedColor"
 73 |                         @input="item.action(selectedColor)"
 74 |                         v-bind="attrs"
 75 |                         v-on="on"
 76 |                         :dark="dark"
 77 |                         :more="false"
 78 |                         :nudge-top="-4"
 79 |                         :nudge-left="8"
 80 |                       >
 81 |                         <template #button="{ on }">
 82 |                           <v-btn
 83 |                             v-on="on"
 84 |                             :disabled="disableToolbar"
 85 |                             icon
 86 |                             small
 87 |                             style=""
 88 |                             :data-testid="item.type"
 89 |                           >
 90 |                             <v-icon
 91 |                               :style="{
 92 |                                 'border-bottom': selectedColorBorder,
 93 |                                 height: '18px',
 94 |                                 top: '2px',
 95 |                                 width: '20px',
 96 |                               }"
 97 |                             >
 98 |                               mdi-format-color-text
 99 |                             </v-icon>
100 |                           </v-btn>
101 |                         </template>
102 |                       </ColorPicker>
103 |                     </div>
104 | 
105 |                     <!-- Standard Button -->
106 |                     <v-btn
107 |                       v-else
108 |                       :disabled="disableToolbar"
109 |                       :class="{
110 |                         'v-btn--active': item.isActive && item.isActive(),
111 |                       }"
112 |                       :color="
113 |                         item.isActive && item.isActive() ? 'primary' : undefined
114 |                       "
115 |                       v-bind="attrs"
116 |                       v-on="on"
117 |                       @click="item.action"
118 |                       class="mr-1"
119 |                       icon
120 |                       small
121 |                       :data-testid="item.type"
122 |                     >
123 |                       <v-icon>{{ item.icon }}</v-icon>
124 |                     </v-btn>
125 |                   </template>
126 |                 </v-tooltip>
127 |               </div>
128 |             </template>
129 |           </v-toolbar>
130 | 
131 |           <div class="d-flex">
132 |             <!-- Slot Prepend -->
133 |             <slot name="prepend" v-bind="{ editor }" />
134 |             <!-- Tiptap Editor -->
135 |             <slot name="editor" v-bind="{ editor }">
136 |               <editor-content
137 |                 :editor="editor"
138 |                 class="flex-grow-1"
139 |                 :class="editorClass"
140 |                 data-testid="value"
141 |               />
142 |             </slot>
143 |             <!-- Slot Append -->
144 |             <slot name="append" v-bind="{ editor }" />
145 |           </div>
146 | 
147 |           <slot name="bottom" v-bind="{ editor }" />
148 |         </v-card>
149 | 
150 |         <!-- Dialogs -->
151 |         <ImageDialog
152 |           :value="selectedImage"
153 |           :show="imageDialog"
154 |           :dark="dark"
155 |           @close="imageDialog = false"
156 |           :uploadImage="defaultUploadImage"
157 |           @apply="editor.chain().focus().setImage({ src: $event }).run()"
158 |         />
159 | 
160 |         <LinkDialog
161 |           :value="selectedLink"
162 |           :show="linkDialog"
163 |           :dark="dark"
164 |           @close="linkDialog = false"
165 |           @apply="
166 |             editor
167 |               .chain()
168 |               .focus()
169 |               .extendMarkRange('link')
170 |               .setLink({ href: $event })
171 |               .run()
172 |           "
173 |         />
174 | 
175 |         <VideoDialog
176 |           :value="selectedVideo"
177 |           :show="videoDialog"
178 |           :dark="dark"
179 |           @close="videoDialog = false"
180 |           @apply="editor.chain().focus().setIframe({ src: $event }).run()"
181 |         />
182 | 
183 |         <!-- Mention -->
184 |         <v-menu
185 |           :value="
186 |             mentionConfig.show &&
187 |             (mentionConfig.loading || mentionConfig.items.length)
188 |           "
189 |           dense
190 |           absolute
191 |           :position-x="mentionConfig.x"
192 |           :position-y="mentionConfig.y"
193 |           offset-y
194 |           max-height="230px"
195 |         >
196 |           <v-progress-linear
197 |             v-if="mentionConfig.loading"
198 |             color="primary"
199 |             indeterminate
200 |             height="6"
201 |             style="min-width: 120px"
202 |             :style="{
203 |               marginBottom: mentionConfig.items.length != 0 ? '-6px' : '0px',
204 |               zIndex: 9,
205 |             }"
206 |           />
207 | 
208 |           <v-list
209 |             v-if="mentionConfig.items.length > 0"
210 |             dense
211 |             class="py-0 v-tiptap-mentions"
212 |           >
213 |             <v-list-item
214 |               class="item"
215 |               :style="{
216 |                 background:
217 |                   index === mentionConfig.selected ? '#EEE' : undefined,
218 |               }"
219 |               v-for="(item, index) in mentionConfig.items"
220 |               :key="item.text"
221 |               @click="selectMention(index)"
222 |             >
223 |               <v-list-item-avatar size="20" v-if="item.avatar">
224 |                 <v-img :alt="`${item.text} avatar`" :src="item.avatar" />
225 |               </v-list-item-avatar>
226 | 
227 |               <v-list-item-content>
228 |                 <v-list-item-title>{{ item.text }}</v-list-item-title>
229 |               </v-list-item-content>
230 |             </v-list-item>
231 |           </v-list>
232 |         </v-menu>
233 |       </v-input>
234 |     </template>
235 |   </div>
236 | </template>
237 | 
238 | <script lang="ts">
239 | import { Component, Vue, Prop, Watch } from "vue-property-decorator";
240 | 
241 | import { Editor, EditorContent, AnyExtension } from "@tiptap/vue-2";
242 | import TiptapKit from "../plugins/tiptap-kit";
243 | import vuetify from "../plugins/vuetify";
244 | 
245 | import debounce from "debounce";
246 | 
247 | import { getOption } from "../utils/options";
248 | 
249 | import * as components from "./components";
250 | import EmojiPicker from "./EmojiPicker.vue";
251 | 
252 | import toolbarItems from "../constants/toolbarItems";
253 | import makeToolbarDefinitions from "../constants/toolbarDefinitions";
254 | import { renderSuggestion } from "../constants/suggestion";
255 | 
256 | import xss from "xss";
257 | import xssRules from "../constants/xssRules";
258 | 
259 | @Component({
260 |   components: {
261 |     EditorContent,
262 |     ...components,
263 |   },
264 | })
265 | export default class extends Vue {
266 |   @Prop({ default: "" }) readonly value: string | null;
267 | 
268 |   // Appearance
269 |   @Prop({ default: false }) readonly view: boolean;
270 | 
271 |   @Prop({ default: false }) readonly dark: boolean;
272 | 
273 |   @Prop({ default: false }) readonly dense: boolean;
274 | 
275 |   @Prop({ default: true }) readonly outlined: boolean;
276 | 
277 |   @Prop({ default: false }) readonly disabled: boolean;
278 | 
279 |   @Prop() readonly label: string | null;
280 | 
281 |   @Prop() readonly placeholder: string | null;
282 | 
283 |   // Toolbar
284 |   @Prop({ default: () => toolbarItems }) readonly toolbar: string[];
285 | 
286 |   @Prop({ default: () => [] }) readonly append: string[];
287 | 
288 |   @Prop({ default: false }) readonly hideToolbar: boolean;
289 | 
290 |   @Prop({ default: false }) readonly disableToolbar: boolean;
291 | 
292 |   // xss
293 |   @Prop({ default: true }) readonly xss: boolean | string[];
294 | 
295 |   @Prop({ default: () => xssRules })
296 |   readonly xssOptions: Record<string, string[]>;
297 | 
298 |   // Editor
299 |   @Prop({ default: () => [] }) readonly extensions: AnyExtension[];
300 | 
301 |   @Prop() readonly editorClass: string | string[] | object;
302 | 
303 |   editor: Editor | null = null;
304 | 
305 |   get cleanValue() {
306 |     if (this.xss === false) {
307 |       return this.value;
308 |     }
309 | 
310 |     const value = this.value
311 |       .replace("https://youtu.be/", "https://www.youtube.com/watch?v=")
312 |       .replace("watch?v=", "embed/")
313 |       .replace("https://vimeo.com/", "https://player.vimeo.com/video/");
314 | 
315 |     let whiteList = this.xssOptions;
316 |     if (Array.isArray(this.xssOptions)) {
317 |       whiteList = this.xssOptions.reduce((acc, rule) => {
318 |         acc[rule] = xssRules[rule];
319 |         return acc;
320 |       }, {});
321 |     }
322 | 
323 |     return xss(value, { whiteList });
324 |   }
325 | 
326 |   get items() {
327 |     return makeToolbarDefinitions(this);
328 |   }
329 | 
330 |   created() {
331 |     this.editor = new Editor({
332 |       content: this.value,
333 |       editorProps: {
334 |         handleKeyDown: this.handleKeyDown,
335 |       },
336 |       onSelectionUpdate: this.onSelectionUpdate,
337 |       onUpdate: this.onUpdate,
338 |       extensions: [
339 |         TiptapKit.configure({
340 |           bold: {},
341 |           blockquote: {
342 |             HTMLAttributes: {
343 |               class: "blockquote",
344 |             },
345 |           },
346 |           history: {
347 |             depth: 10,
348 |           },
349 |           heading: {
350 |             levels: [1, 2, 3],
351 |           },
352 |           placeholder: {
353 |             placeholder: () => this.placeholder || "",
354 |           },
355 |           textAlign: {
356 |             types: ["heading", "paragraph"],
357 |           },
358 |           focus: {
359 |             className: "focus",
360 |           },
361 |           color: {},
362 |           highlight: { multicolor: true },
363 |           image: {
364 |             inline: true,
365 |           },
366 |           link: {
367 |             openOnClick: false,
368 |           },
369 |           taskList: {
370 |             HTMLAttributes: {
371 |               class: "task-list",
372 |             },
373 |           },
374 |           taskItem: {
375 |             HTMLAttributes: {
376 |               itemTypeName: "task-list",
377 |             },
378 |           },
379 |           textStyle: {},
380 |           underline: {},
381 |           video: {},
382 |           mention: this.mention
383 |             ? {
384 |                 HTMLAttributes: {
385 |                   class: "mention",
386 |                 },
387 |                 suggestion: {
388 |                   items: async ({ query }) => {
389 |                     this.mentionConfig.query = query;
390 | 
391 |                     if (typeof this.defaultMentionItems === "function") {
392 |                       const config = this.mentionConfig;
393 | 
394 |                       config.loading = true;
395 | 
396 |                       config.fetchMentions =
397 |                         config.fetchMentions ??
398 |                         debounce(async query => {
399 |                           const items = await this.defaultMentionItems(query);
400 | 
401 |                           config.items = items;
402 |                           config.loading = false;
403 |                         }, 1000);
404 | 
405 |                       config.fetchMentions(query);
406 | 
407 |                       return config.items;
408 |                     }
409 | 
410 |                     return this.defaultMentionItems
411 |                       .filter(item =>
412 |                         item.text.toLowerCase().startsWith(query.toLowerCase())
413 |                       )
414 |                       .slice(0, 5);
415 |                   },
416 |                   render: renderSuggestion(this),
417 |                 },
418 |               }
419 |             : false,
420 |         }),
421 |         ...this.extensions,
422 |       ],
423 |       autofocus: false,
424 |       editable: true,
425 |       injectCSS: true,
426 |     });
427 |   }
428 | 
429 |   @Watch("value")
430 |   onValueChanged(value) {
431 |     const code = this.editor.getHTML();
432 |     if (code === value) {
433 |       return;
434 |     }
435 | 
436 |     this.editor.commands.setContent(value);
437 |   }
438 | 
439 |   @Watch("disabled")
440 |   onDisabledChanged(disabled) {
441 |     this.editor.setEditable(!disabled);
442 |   }
443 | 
444 |   beforeDestroy() {
445 |     this.editor.destroy();
446 |   }
447 | 
448 |   //
449 |   handleKeyDown(view, event) {
450 |     if (
451 |       event.key === "Enter" &&
452 |       this.$listeners.enter &&
453 |       !event.shiftKey &&
454 |       !this.mentionConfig.show
455 |     ) {
456 |       this.$emit("enter");
457 | 
458 |       return true;
459 |     }
460 | 
461 |     return false;
462 |   }
463 | 
464 |   onSelectionUpdate({ editor }) {
465 |     // Color
466 |     const { color } = editor.getAttributes("textStyle");
467 |     this.selectedColor = color;
468 | 
469 |     // Heading
470 |     this.selectedHeading = this.getHeading();
471 |   }
472 | 
473 |   onUpdate({ editor }) {
474 |     this.$emit("input", editor.getHTML());
475 |   }
476 | 
477 |   // --- Features --- //
478 | 
479 |   // Alignment
480 |   selectedAlignment = "left";
481 | 
482 |   @Watch("selectedAlignment")
483 |   onAlignmentChanged(newValue, oldValue) {
484 |     if (newValue === oldValue || newValue === this.getAlignment()) {
485 |       return;
486 |     }
487 | 
488 |     this.editor.chain().focus().setTextAlign(newValue).run();
489 |   }
490 | 
491 |   getAlignment() {
492 |     if (this.editor.isActive({ textAlign: "left" })) {
493 |       return "left";
494 |     }
495 | 
496 |     if (this.editor.isActive({ textAlign: "center" })) {
497 |       return "center";
498 |     }
499 | 
500 |     if (this.editor.isActive({ textAlign: "right" })) {
501 |       return "right";
502 |     }
503 | 
504 |     if (this.editor.isActive({ textAlign: "justify" })) {
505 |       return "justify";
506 |     }
507 | 
508 |     return "left";
509 |   }
510 | 
511 |   // Color
512 |   selectedColor = null;
513 | 
514 |   get selectedColorBorder() {
515 |     let opacity = !this.disableToolbar ? "0.67" : "0.2";
516 | 
517 |     if (this.selectedColor) {
518 |       let color = `${this.selectedColor}`;
519 |       if (color[0] === "r") {
520 |         opacity = !this.disableToolbar ? "0.75" : "0.25";
521 |         return `3px solid ${color.replace(")", `, ${opacity})`)}`;
522 |       } else {
523 |         opacity = !this.disableToolbar ? "C0" : "30";
524 |         return `3px solid ${color.concat(opacity)}`;
525 |       }
526 |     }
527 | 
528 |     return `3px solid rgba(0, 0, 0, ${opacity})`;
529 |   }
530 | 
531 |   // Emoji
532 |   setEmoji(e) {
533 |     const activator = e.target;
534 | 
535 |     const EmojiPickerComponent = Vue.extend(EmojiPicker);
536 |     const instance: any = new EmojiPickerComponent({
537 |       vuetify: vuetify,
538 |       propsData: {
539 |         dark: this.dark,
540 |       },
541 |     });
542 | 
543 |     instance.$mount();
544 |     instance.$on("emojiSelected", emoji => {
545 |       this.editor.commands.insertContent(emoji);
546 |     });
547 | 
548 |     document.querySelector("body").appendChild(instance.$el);
549 | 
550 |     // Set Position
551 |     const position = activator.getBoundingClientRect();
552 |     instance.$children[0].absoluteX = position.x + 14;
553 |     instance.$children[0].absoluteY = position.y + 14;
554 | 
555 |     // Display emoji picker
556 |     instance.value = true;
557 |   }
558 | 
559 |   // Headings
560 |   headingsItems = [
561 |     { text: "Heading 1", value: 1 },
562 |     { text: "Heading 2", value: 2 },
563 |     { text: "Heading 3", value: 3 },
564 |     { text: "Text", value: 0 },
565 |   ];
566 | 
567 |   selectedHeading = 0;
568 | 
569 |   @Watch("selectedHeading")
570 |   onHeadingChanged(newValue, oldValue) {
571 |     if (newValue === oldValue || newValue === this.getHeading()) {
572 |       return;
573 |     }
574 | 
575 |     if (newValue > 0) {
576 |       this.editor.chain().focus().toggleHeading({ level: newValue }).run();
577 |     } else {
578 |       this.editor.chain().focus().setParagraph().run();
579 |     }
580 |   }
581 | 
582 |   getHeading() {
583 |     if (this.editor.isActive("heading", { level: 1 })) {
584 |       return 1;
585 |     }
586 | 
587 |     if (this.editor.isActive("heading", { level: 2 })) {
588 |       return 2;
589 |     }
590 | 
591 |     if (this.editor.isActive("heading", { level: 3 })) {
592 |       return 3;
593 |     }
594 | 
595 |     return 0;
596 |   }
597 | 
598 |   // Image
599 |   @Prop() readonly uploadImage: (file: File) => Promise<string>;
600 | 
601 |   get defaultUploadImage() {
602 |     return this.uploadImage || getOption("uploadImage");
603 |   }
604 | 
605 |   imageDialog = false;
606 | 
607 |   get selectedImage() {
608 |     return this.editor.view.state.selection["node"]?.attrs?.src;
609 |   }
610 | 
611 |   // Link
612 |   linkDialog = false;
613 | 
614 |   get selectedLink() {
615 |     return this.editor.getAttributes("link").href;
616 |   }
617 | 
618 |   // Video
619 |   videoDialog = false;
620 | 
621 |   get selectedVideo() {
622 |     return this.editor.getAttributes("iframe").src;
623 |   }
624 | 
625 |   // Mention
626 |   get defaultMentionItems() {
627 |     return this.mentionItems || getOption("mentionItems");
628 |   }
629 | 
630 |   @Prop() readonly mentionItems: any;
631 | 
632 |   @Prop({ default: false }) readonly mention: boolean;
633 | 
634 |   mentionConfig = {
635 |     loading: false,
636 |     items: [],
637 |     selected: 0,
638 |     show: false,
639 |     query: "",
640 |     x: 0,
641 |     y: 0,
642 |     command: _ => 0,
643 |     fetchMentions: null,
644 |   };
645 | 
646 |   selectMention(index) {
647 |     const item = this.mentionConfig.items[index];
648 |     this.mentionConfig.command({ id: item.value, label: item.text });
649 |     this.mentionConfig.show = false;
650 | 
651 |     this.$emit("mention", item);
652 | 
653 |     // Workaround for mention bug
654 |     try {
655 |       const from = this.editor.state.selection.ranges[0].$from.pos;
656 |       const to = from + this.mentionConfig.query.length;
657 |       const text = this.editor.state.doc.textBetween(from, to);
658 | 
659 |       if (text === this.mentionConfig.query) {
660 |         this.editor.commands.setTextSelection({ from, to });
661 |         this.editor.commands.deleteSelection();
662 |       }
663 |     } catch (e) {
664 |       // Ignore
665 |     }
666 |   }
667 | }
668 | </script>
669 | 
670 | <style lang="scss">
671 | .v-tiptap {
672 |   overflow-wrap: anywhere;
673 | 
674 |   .v-btn > .v-btn__content .v-icon.fa {
675 |     font-size: 18px !important;
676 |   }
677 | 
678 |   .ProseMirror {
679 |     padding: 8px 18px;
680 |     min-height: 180px;
681 |     overflow-wrap: anywhere;
682 |   }
683 | 
684 |   &.dense {
685 |     .ProseMirror {
686 |       padding: 6px 12px;
687 |       min-height: 32px;
688 |     }
689 |     p {
690 |       padding: 0 0;
691 |       line-height: 1.2rem;
692 |     }
693 |   }
694 | 
695 |   .ProseMirror p.is-editor-empty:first-child::before {
696 |     content: attr(data-placeholder);
697 |     float: left;
698 |     color: #adb5bd;
699 |     pointer-events: none;
700 |     height: 0;
701 |     font-style: italic;
702 |   }
703 | 
704 |   .v-select__selection--disabled {
705 |     color: rgba(0, 0, 0, 0.26) !important;
706 |   }
707 | 
708 |   .theme--dark {
709 |     .v-select__selection {
710 |       color: #fcfcfc !important;
711 |     }
712 | 
713 |     .v-input__slot:hover {
714 |       background: #1e1e1e !important;
715 |     }
716 | 
717 |     .v-select__selection--disabled {
718 |       color: #fcfcfc71 !important;
719 |     }
720 |   }
721 | 
722 |   .v-toolbar__content {
723 |     flex-wrap: wrap;
724 |     padding: 4px 12px;
725 | 
726 |     .v-select {
727 |       width: min-content;
728 |       margin-bottom: 0px !important;
729 | 
730 |       .v-input__slot:hover {
731 |         background: #fcfcfc;
732 |         border-radius: 4px;
733 |       }
734 |       .v-input__slot::before,
735 |       .v-input__slot::after {
736 |         display: none;
737 |       }
738 |       .v-input__control > div {
739 |         height: 28px;
740 |         min-height: 24px !important;
741 |         padding: 6px !important;
742 |       }
743 |       .v-input__icon {
744 |         min-width: auto;
745 |         width: auto;
746 |         margin-left: -4px;
747 |         margin-right: -4px;
748 |       }
749 |       .v-input__append-inner {
750 |         padding: 0px;
751 |       }
752 |       .v-select__selection {
753 |         margin-top: 0px;
754 |         font-size: 14px;
755 |         margin-right: 8px;
756 |         font-weight: 500;
757 |         color: rgba(0, 0, 0, 0.7);
758 |       }
759 |     }
760 |     .v-btn.v-btn--icon {
761 |       border-radius: 4px;
762 |     }
763 |   }
764 | 
765 |   .divider {
766 |     width: 2px;
767 |     height: 1.25rem;
768 |     background-color: rgba(#000, 0.1);
769 |     margin-left: 0.25rem;
770 |     margin-right: 0.5rem;
771 |   }
772 | 
773 |   :focus-visible {
774 |     outline: -webkit-focus-ring-color auto 0px;
775 |   }
776 | 
777 |   p {
778 |     padding: 0.35em 0;
779 |     margin: 2px 0px;
780 |     margin-bottom: 0;
781 |     line-height: 1.5rem;
782 |   }
783 | 
784 |   h1 {
785 |     font-size: 2.125rem !important;
786 |     line-height: 2.5rem;
787 |     letter-spacing: 0.0073529412em !important;
788 |     font-weight: 400;
789 |     font-family: Roboto, sans-serif !important;
790 |     margin: 0.75em 0 0.5em 0;
791 |     &:first-child {
792 |       margin-top: 0.25em;
793 |     }
794 |   }
795 | 
796 |   h2 {
797 |     line-height: 2rem;
798 |     font-family: Roboto, sans-serif !important;
799 |     font-size: 1.5rem !important;
800 |     font-weight: 400;
801 |     letter-spacing: normal !important;
802 |     margin: 0.75em 0 0.5em 0;
803 |   }
804 | 
805 |   h3 {
806 |     font-size: 1.25rem !important;
807 |     font-weight: 500;
808 |     letter-spacing: 0.0125em !important;
809 |     line-height: 2rem;
810 |     font-family: Roboto, sans-serif !important;
811 |     margin: 0.75em 0 0.5em 0;
812 |   }
813 | 
814 |   blockquote {
815 |     margin-left: 1rem;
816 |     padding-left: 0.75em;
817 |     font-weight: 300;
818 |     border-left: 3px solid rgba(#0d0d0d, 0.2);
819 |   }
820 | 
821 |   img {
822 |     max-width: min(640px, 100%);
823 |     height: auto;
824 | 
825 |     &.focus {
826 |       outline: 4px solid rgb(80, 173, 248);
827 |     }
828 |   }
829 |   .iframe-wrapper {
830 |     iframe {
831 |       width: 640px;
832 |       height: 360px;
833 |     }
834 | 
835 |     &.focus {
836 |       iframe {
837 |         outline: 4px solid rgb(80, 173, 248);
838 |       }
839 |     }
840 |   }
841 | 
842 |   ul,
843 |   ol {
844 |     padding-left: 20px;
845 |   }
846 | 
847 |   ul[data-type="taskList"] {
848 |     list-style: none;
849 |     padding: 0;
850 | 
851 |     p {
852 |       margin: 0;
853 |     }
854 | 
855 |     li {
856 |       display: flex;
857 | 
858 |       > label {
859 |         flex: 0 0 auto;
860 |         margin-right: 0.5rem;
861 |         margin-top: 0.4rem;
862 |         user-select: none;
863 |       }
864 | 
865 |       > div {
866 |         flex: 1 1 auto;
867 |       }
868 |     }
869 |   }
870 | 
871 |   .mention {
872 |     color: #08c;
873 |   }
874 | 
875 |   .v-label {
876 |     color: rgba(0, 0, 0, 0.7) !important;
877 |     font-weight: 500;
878 |     line-height: 2rem;
879 |   }
880 | 
881 |   .v-list {
882 |     padding: 0px 0;
883 |   }
884 | }
885 | 
886 | .v-tiptap-mentions {
887 |   .v-list-item__avatar:first-child {
888 |     margin-right: 8px !important;
889 |     margin-left: -8px !important;
890 |   }
891 |   .v-list-item--dense,
892 |   .v-list--dense .v-list-item {
893 |     min-height: 36px;
894 |   }
895 | }
896 | </style>
897 | 


--------------------------------------------------------------------------------