├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── build.yaml
├── src
    ├── components
    │   ├── extensions
    │   │   ├── index.ts
    │   │   └── snippet.ts
    │   ├── index.ts
    │   ├── HelloWorld.vue
    │   ├── ThemeSwitchButton.vue
    │   ├── Tiptap.vue
    │   └── SnippetExample.vue
    ├── assets
    │   └── logo.png
    ├── env.d.ts
    ├── main.ts
    ├── App.vue
    └── styles
    │   └── main.scss
├── .vscode
    └── extensions.json
├── public
    └── favicon.ico
├── tsconfig.node.json
├── .gitignore
├── index.html
├── tsconfig.json
├── vite.config.ts
├── package.json
├── components.d.ts
├── LICENSE
└── README.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: sereneinserenade
2 | 


--------------------------------------------------------------------------------
/src/components/extensions/index.ts:
--------------------------------------------------------------------------------
1 | export * from './snippet'
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sereneinserenade/tiptap-snippets-extension/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sereneinserenade/tiptap-snippets-extension/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ThemeSwitchButton } from './ThemeSwitchButton.vue'
2 | export { default as SnippetExample } from './SnippetExample.vue'
3 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import { Inkline, components } from '@inkline/inkline';
 5 | import '@inkline/inkline/inkline.scss';
 6 | 
 7 | import "./styles/main.scss";
 8 | 
 9 | createApp(App).use(Inkline, {
10 |   components,
11 |   colorMode: 'system',
12 |   locale: 'en',
13 | }).mount('#app')
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ThemeSwitchButton, SnippetExample } from './components';
 3 | 
 4 | </script>
 5 | 
 6 | <template>
 7 |   <SnippetExample />
 8 |   <ThemeSwitchButton />
 9 | </template>
10 | 
11 | <style>
12 | /* #app {
13 |   font-family: Avenir, Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 |   margin-top: 60px;
19 | } */
20 | </style>
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["esnext", "dom"],
14 |     "skipLibCheck": true
15 |   },
16 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | import Icons from 'unplugin-icons/vite'
 5 | import IconsResolver from 'unplugin-icons/resolver'
 6 | import Components from 'unplugin-vue-components/vite'
 7 | 
 8 | export default defineConfig(({ mode }) => {
 9 |   return {
10 |     plugins: [
11 |       vue(),
12 |       Components({
13 |         resolvers: [
14 |           IconsResolver({
15 |             prefix: 'icon'
16 |           }),
17 |         ],
18 |       }),
19 |       Icons(),
20 |     ],
21 |     base: mode === 'production' ? '/tiptap-snippets-extension/' : '/'
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tiptap-snippets-extension",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vue-tsc --noEmit && vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@inkline/inkline": "^3.0.9",
12 |     "@tiptap/starter-kit": "^2.0.0-beta.185",
13 |     "@tiptap/vue-3": "^2.0.0-beta.91",
14 |     "vue": "^3.2.25"
15 |   },
16 |   "devDependencies": {
17 |     "@iconify-json/mdi": "^1.1.19",
18 |     "@vitejs/plugin-vue": "^2.3.3",
19 |     "sass": "^1.52.3",
20 |     "typescript": "^4.5.4",
21 |     "unplugin-icons": "^0.14.3",
22 |     "unplugin-vue-components": "^0.19.6",
23 |     "vite": "^2.9.9",
24 |     "vue-tsc": "^0.34.7"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
 1 | // generated by unplugin-vue-components
 2 | // We suggest you to commit this file into source control
 3 | // Read more: https://github.com/vuejs/vue-next/pull/3399
 4 | import '@vue/runtime-core'
 5 | 
 6 | declare module '@vue/runtime-core' {
 7 |   export interface GlobalComponents {
 8 |     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
 9 |     IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
10 |     IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
11 |     SnippetExample: typeof import('./src/components/SnippetExample.vue')['default']
12 |     ThemeSwitchButton: typeof import('./src/components/ThemeSwitchButton.vue')['default']
13 |     Tiptap: typeof import('./src/components/Tiptap.vue')['default']
14 |   }
15 | }
16 | 
17 | export {}
18 | 


--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
 1 | .container, .container-fluid {
 2 |   padding-right: 15px;
 3 |   padding-left: 15px;
 4 |   margin-right: auto;
 5 |   margin-left: auto;
 6 | }
 7 | 
 8 | @media (min-width: 768px) {
 9 |   .container {
10 |     width: 750px;
11 |   }
12 | }
13 | 
14 | @media (min-width: 992px) {
15 |   .container {
16 |     width: 970px;
17 |   }
18 | }
19 | 
20 | @media (min-width: 1200px) {
21 |   .container {
22 |     width: 1170px;
23 |   }
24 | }
25 | 
26 | .container {
27 |   &::before, &::after {
28 |     display: table;
29 |     content: " ";
30 |   }
31 | }
32 | 
33 | .container-fluid {
34 |   &::before, &::after {
35 |     display: table;
36 |     content: " ";
37 |   }
38 | }
39 | 
40 | .container:after, .container-fluid:after {
41 |   clear: both;
42 | }
43 | 
44 | .flex {
45 |   display: flex;
46 | }
47 | 
48 | .gap-1rem {
49 |   gap: 1rem;
50 | }
51 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Jeet Mandaliya
 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/build.yaml:
--------------------------------------------------------------------------------
 1 | name: Shipp it baby 
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   build-and-deploy:
10 |     concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout 🛎️
14 |         uses: actions/checkout@v3
15 | 
16 |       - name: Setup Node 16
17 |         uses: actions/setup-node@v3
18 |         with:
19 |           node-version: '16'
20 | 
21 |       - name: Gimme node_modules Cache
22 |         uses: actions/cache@v3
23 |         id: gimme_cache
24 |         with:
25 |           path: '**/node_modules'
26 |           key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
27 | 
28 |       - name: Install dependencies
29 |         if: steps.gimme_cache.outputs.cache-hit == false
30 |         run: npm install
31 | 
32 |       - name: Build 🔧
33 |         run: npm run build
34 | 
35 |       - name: Deploy 🚀
36 |         uses: JamesIves/github-pages-deploy-action@v4.3.3
37 |         with:
38 |           branch: gh-pages # The branch the action should deploy to.
39 |           folder: dist # The folder the action should deploy.
40 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | defineProps<{ msg: string }>()
 5 | 
 6 | const count = ref(0)
 7 | </script>
 8 | 
 9 | <template>
10 |   <h1>{{ msg }}</h1>
11 | 
12 |   <p>
13 |     Recommended IDE setup:
14 |     <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
15 |     +
16 |     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
17 |   </p>
18 | 
19 |   <p>See <code>README.md</code> for more information.</p>
20 | 
21 |   <p>
22 |     <a href="https://vitejs.dev/guide/features.html" target="_blank">
23 |       Vite Docs
24 |     </a>
25 |     |
26 |     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
27 |   </p>
28 | 
29 |   <button type="button" @click="count++">count is: {{ count }}</button>
30 |   <p>
31 |     Edit
32 |     <code>components/HelloWorld.vue</code> to test hot module replacement.
33 |   </p>
34 | </template>
35 | 
36 | <style scoped>
37 | a {
38 |   color: #42b983;
39 | }
40 | 
41 | label {
42 |   margin: 0 0.5em;
43 |   font-weight: bold;
44 | }
45 | 
46 | code {
47 |   background-color: #eee;
48 |   padding: 2px 4px;
49 |   border-radius: 4px;
50 |   color: #304455;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/components/ThemeSwitchButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Prototype } from '@inkline/inkline';
 3 | import { inject, ref } from 'vue';
 4 | 
 5 | const inkline = inject<Prototype>('inkline', {} as any);
 6 | const colorMode = ref(inkline.options.colorMode);
 7 | 
 8 | // Set the initial color mode value to determine the icon to be displayed
 9 | if (colorMode.value === 'system' && typeof window !== 'undefined') {
10 |   colorMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
11 | }
12 | 
13 | // Toggle between light and dark mode
14 | const setColorMode = () => {
15 |   const mode = colorMode.value === 'dark' ? 'light' : 'dark';
16 | 
17 |   inkline.options.colorMode = mode;
18 |   colorMode.value = mode;
19 | };
20 | </script>
21 | 
22 | <template>
23 |   <i-button @click="setColorMode" class="color-switch">
24 |     <icon-mdi-white-balance-sunny v-if="colorMode === 'dark'" />
25 |     <icon-mdi-moon-waning-crescent v-else />
26 |     <span class="_visually-hidden">
27 |       <span>Toggle color mode</span>
28 |     </span>
29 |   </i-button>
30 | </template>
31 | 
32 | <style lang="scss">
33 | .color-switch {
34 |   position: fixed;
35 |   right: 1rem;
36 |   top: 1rem;
37 |   cursor: pointer;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/extensions/snippet.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-extraneous-dependencies */
 2 | import { Extension } from '@tiptap/core'
 3 | import { Plugin } from 'prosemirror-state'
 4 | import { DOMParser } from 'prosemirror-model'
 5 | 
 6 | function wrapHtmlInTemplate(value: string): HTMLSpanElement {
 7 |   const element = document.createElement('span')
 8 |   element.innerHTML = `${value.trim()}`
 9 |   return element
10 | }
11 | 
12 | export const SnippetExtension = Extension.create({
13 |   name: 'snippet',
14 |   addProseMirrorPlugins() {
15 |     return [
16 |       new Plugin({
17 |         props: {
18 |           handleDrop(view, event: DragEvent | any): boolean {
19 |             if (!event) return false
20 | 
21 |             event.preventDefault()
22 | 
23 |             const coordinates = view.posAtCoords({
24 |               left: event.clientX,
25 |               top: event.clientY,
26 |             })
27 | 
28 |             const snippetContent = event.dataTransfer.getData('snippet')
29 | 
30 |             const parsedContent = DOMParser
31 |               .fromSchema(view.state.schema)
32 |               .parseSlice(wrapHtmlInTemplate(snippetContent))
33 | 
34 |             if (coordinates) {
35 |               const dropTransaction = view.state.tr.insert(coordinates.pos, parsedContent.content)
36 | 
37 |               dropTransaction.setMeta('isSnippetDropTransaction', true)
38 | 
39 |               view.dispatch(dropTransaction)
40 |             }
41 | 
42 |             return false
43 |           },
44 |         },
45 |       }),
46 |     ]
47 |   },
48 | })
49 | 


--------------------------------------------------------------------------------
/src/components/Tiptap.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue';
 3 | 
 4 | import StarterKit from '@tiptap/starter-kit';
 5 | import { EditorContent, useEditor } from '@tiptap/vue-3';
 6 | 
 7 | import { SnippetExtension } from './extensions';
 8 | 
 9 | const emit = defineEmits(['newSnippet'])
10 | 
11 | interface Snippet {
12 |   name: string
13 |   content: string
14 | }
15 | 
16 | 
17 | const snippetName = ref("")
18 | 
19 | const editor = useEditor({
20 |   content: '<p>Example of Snippets with tiptap. 🎉 If you 👍 / ❤️ what I\'m doing, consider 🌟ing the repo, I and the Open-Source-Community appreciate it very much ❤️. </p><p></p><p>Drag a snippet from right and drop it in the line above and see the magic!</p><p>PS: you can create a new snippet from current editor content by giving it a name and pressing "create snippet" button</p>',
21 |   extensions: [StarterKit, SnippetExtension],
22 | })
23 | 
24 | const logHtml = () => {
25 |   const snippet: Snippet = {
26 |     name: snippetName.value,
27 |     content: editor.value?.getHTML() || "<p> Snippet failed </p>"
28 |   }
29 | 
30 |   emit('newSnippet', snippet)
31 | }
32 | 
33 | </script>
34 | 
35 | <template>
36 |   <section class="flex gap-1rem">
37 |     <i-input v-model="snippetName" placeholder="New snippet name...">
38 |       <template #prepend>
39 |         <b>Create new snippet from current editor content.</b>
40 |       </template>
41 |     </i-input>
42 | 
43 |     <i-button @click="logHtml"> Create </i-button>
44 |   </section>
45 | 
46 |   <editor-content :editor="editor" />
47 | </template>
48 | 
49 | <style lang="scss">
50 | .ProseMirror {
51 |   &:focus {
52 |     outline: none !important;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/components/SnippetExample.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue';
 3 | import Tiptap from './Tiptap.vue'
 4 | 
 5 | interface Snippet {
 6 |   name: string
 7 |   content: string
 8 | }
 9 | 
10 | const snippets = ref<Snippet[]>(
11 |   [
12 |     {
13 |       name: "Test",
14 |       content: "<p> This is a test. </p>"
15 |     },
16 |     {
17 |       name: "Some demo",
18 |       content: "<p><strong>This is bold.</strong> <em>This is italic. </em><code>This is code</code> chill it out bro!</p>"
19 |     }
20 |   ]
21 |   )
22 | 
23 | const onDragStart = (event: DragEvent, snippet: Snippet) => {
24 |   event?.dataTransfer?.setData('text/html', snippet.content)
25 | }
26 | 
27 | const addSnippet = (s: Snippet) => {
28 |   snippets.value = [...snippets.value, s]
29 | }
30 | </script>
31 | 
32 | <template>
33 |   <main class="snippet-example-container container flex">
34 |     <section class="editor-section">
35 |       <tiptap @newSnippet="addSnippet" />
36 |     </section>
37 | 
38 |     <section class="snippet-section gap-1rem">
39 |       <article v-for="snippet in snippets" draggable="true" class="snippet" @dragstart="onDragStart($event, snippet)"
40 |         key="snippet.name">
41 |         <i-tooltip placement="right" size="md">
42 |           <b> {{ snippet.name }} </b>
43 |           <template #body>
44 |             <div v-html="snippet.content" />
45 |           </template>
46 |         </i-tooltip>
47 |       </article>
48 |     </section>
49 |   </main>
50 | </template>
51 | 
52 | <style lang="scss">
53 | .snippet-example-container {
54 |   margin: 2rem 0 0 0;
55 |   gap: 1em;
56 | 
57 |   .editor-section {
58 |     width: 70%;
59 |     padding: 1rem;
60 |     border: 1px dashed gray;
61 |     border-radius: 8px;
62 |   }
63 | 
64 |   .snippet-section {
65 |     padding: 1rem;
66 |     display: flex;
67 |     flex-direction: column;
68 |     border: 1px dashed gray;
69 |     border-radius: 8px;
70 | 
71 |     .snippet {
72 |       padding: 8px 1rem;
73 |       border: 1px solid gray;
74 |       border-radius: 8px;
75 |       cursor: pointer;
76 |     }
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tiptap-snippets-extension
 2 | 
 3 | [Tiptap 2 Extension](https://tiptap.dev) for adding snippets.
 4 | 
 5 | A ⭐️ to the repo if you 👍 / ❤️  what I'm doing would be much appreciated. If you're using this extension and making money from it, it'd be very kind of you to [:heart: Sponsor me](https://github.com/sponsors/sereneinserenade). If you're looking for a **dev to work you on your project's Rich Text Editor** with or as **a frontend developer, [DM me on Discord/Twitter/LinkedIn](https://github.com/sereneinserenade)👨‍💻🤩**.
 6 | 
 7 | I've made a bunch of extensions for Tiptap 2, some of them are **Google Docs like Commenting**, **Search and Replace**, **LanguageTool integration** with tiptap. You can check it our here https://github.com/sereneinserenade#a-glance-of-my-projects.
 8 | 
 9 | # Live Demo
10 | 
11 | Try it out live at https://sereneinserenade.github.io/tiptap-snippets-extension, and/or take a look at a demo-video below.
12 | 
13 | https://user-images.githubusercontent.com/45892659/173204796-0743a2c9-4465-46a2-bf57-8f1696d4353f.mov
14 | 
15 | 
16 | ## How to use
17 | 
18 | Copy-paste [`snippet.ts`](src/components/extensions/snippet.ts) file in your own repo and import `SnippetExtension` from that file and use that as an extension. For more details see [`Tiptap.vue`](src/components/Tiptap.vue) or the example implementations below. If you have any question, feel free to [open an issue](https://github.com/sereneinserenade/tiptap-snippets-extension/issues).
19 | 
20 | ## Contributing
21 | 
22 | Show your ❤️ by ⭐️ing this repository! It means a lot.
23 | 
24 | Clone the repo, do something, make a PR(or not). You know what's the drill. Looking forward to your PRs, you amazing devs.
25 | 
26 | ## Awesome peeps, who've starred this repo 🚀! Thank you!
27 | [![Stargazers repo roster for @sereneinserenade/tiptap-snippets-extension](https://reporoster.com/stars/dark/sereneinserenade/tiptap-snippets-extension)](https://github.com/sereneinserenade/tiptap-snippets-extension/stargazers)
28 | 
29 | 
30 | ---
31 | 
32 | <details>
33 |   <summary> Project Setup </summary>
34 | 
35 | # Vue 3 + TypeScript + Vite
36 | 
37 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
38 | 
39 | ## Recommended IDE Setup
40 | 
41 | - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
42 | 
43 | ## Type Support For `.vue` Imports in TS
44 | 
45 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
46 | 
47 | 1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
48 | 2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
49 | 
50 | You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
51 | 
52 | </details>
53 | 


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