A Rich Text Editor (WYSIWYG) for Vue3 with tiptap & Vuetify.
Home Page: https://yikoyu.github.io/vuetify-pro-tiptap/
License: MIT License
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
Hi, love your package! I want to use component props (or methods) inside the custom upload function, but I can't figure out how to do that. Either would be fine, because I have component props that determine the image url.
I'm using Nuxt 2, Vue 2.7 and vuetify-pro-tiptap 1.4.3
Hello community, I'm new to Vuetify-Pro-Tiptap and currently exploring the use case of making specific document portions "uneditable or readonly" with Vuetify-Pro-Tiptap. Our goal is to restrict editing in specific words within a sentence while maintaining the overall functionality. Any insights on achieving this or guidance to relevant materials would be highly valuable. Thanks.
when I use umd.js ,it show a warn: Failed to resolve component: vuetifytiptap
<script src="vue.js"></script>
<v-app id="app">
<vuetifyTiptap></vuetifyTiptap>
</v-app>
<script src="vuetify.min.js"></script>
<script src="vuetify-pro-tiptap.umd.js"></script>
<script>
const { createApp, ref, onMounted, defineComponent,getCurrentInstance } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const { BaseKit,
Blockquote,
Bold,
BulletList,
Clear,
Code,
CodeBlock,
Color,
createVuetifyProTipTap,
FontFamily,
FontSize,
Fullscreen,
Heading,
Highlight,
History,
HorizontalRule,
Image,
Indent,
Italic,
Link,
MarkdownTheme,
OrderedList,
Strike,
SubAndSuperScript,
Table,
TaskList,
TextAlign,
Underline,
Video,
VuetifyTiptap,
VuetifyViewer } = VuetifyProTiptap
let proTipTap = createVuetifyProTipTap({
lang: 'zhHans',
markdownTheme: 'github',
components: {
VuetifyTiptap
},
extensions: [
BaseKit.configure({
placeholder: {
placeholder: 'Enter some text...'
}
}),
Bold,
Italic,
Underline,
Strike,
Code.configure({ divider: true }),
Heading,
TextAlign,
FontFamily,
FontSize,
Color,
Highlight.configure({ divider: true }),
SubAndSuperScript.configure({ divider: true }),
Clear.configure({ divider: true }),
BulletList,
OrderedList,
TaskList,
Indent.configure({ divider: true }),
Link,
Image,
Video,
Table.configure({ divider: true }),
Blockquote,
HorizontalRule,
CodeBlock.configure({ divider: true }),
History.configure({ divider: true }),
MarkdownTheme.configure({
markdownThemes: [
{
title: 'Github',
value: 'github'
},
{
title: 'Maidragon',
value: 'maidragon'
}
]
}),
Fullscreen.configure({
useWindow: true
})
]
});
const app = createApp()
app.use(vuetify)
app.use(proTipTap)
app.mount('#app')
</script>
Currently by default the content is wrapped with <p></p> tags
Is it possible to remove this default <p></p> tags from the content and have just the raw content without any html tags wrapped around them, and only add tags by selecting from the menu?
Thank you for creating this library. Not only me but everyone also wants to see an example/usage of how to use this module in Nuxt 3.
Duplicated "px" on load, which does not happen with VuetifyViewer
Steps:
1.
<VuetifyTiptap
v-else
:modelValue="modelValue"
@update:modelValue="updateModelValue"
/>
<p>sdfsd<span style="font-size: 72px">sdfsd</span></p>
<p>sdfsd<span style="font-size: 72pxpx">sdfsd</span></p>If placeholder text is provided, it is never shown, even if the value is empty
<VuetifyTiptap
value=""
placeholder="Enter some text..."
/>
master branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can fix this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.
Good luck with your project β¨
Your semantic-release bot π¦π
This may be something that could be extended to other extensions, but I find myself with this issue:
There are classes that conflict in my app, causing heading elements to display incorrectly (font-weight: inherit). The simplest way to fix this imo was to simply add some tailwind classes to specific values. Okay, great.
However, there isn't really any way to modify specific elements in heading. For example, text-6xl for an h1 element, but text-1xl for a h6 element. There is no way to dynamically have this added using the extension itself.
My fix was to simply use
const interceptor = computed({
get: () => modelVal.value,
set: (v) => {
// Heading elements need to have specific classes for each variation
modelVal.value = v?.replace(
/(<h([1-6])\s[^>]*class=")([^"]*)(")/g,
(_, p1, p2, p3, p4) => `${p1}${p3} text-${7 - p2}xl${p4}`,
)
},
})But this has the drawback of not displaying correctly in the editor, only when it's updated.
So, the proposal is to create a functional syntax in the extensions, where specific additions could be added under specific circumstances.
For example
Heading.configure((e) => ({ divider: true, HTMLAttributes: { class: `font-bold text-${7 - e.level}xl` } })),What exactly "e" will look like is up for debate. It should likely be an object for future proofing, and other extensions could make use of it
Hey all,
after installing vuetify-pro-tiptap and importing it I get the following error:
Could not find a declaration file for module 'vuetify-pro-tiptap'. 'XXX/node_modules/vuetify-pro-tiptap/lib/vuetify-pro-tiptap.mjs' implicitly has an 'any' type.
There are types at 'XXX/node_modules/vuetify-pro-tiptap/lib/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vuetify-pro-tiptap' library may need to update its package.json or typings.ts(7016)Steps to reproduce:
npm create vue@latestnpm i vuetify-pro-tiptap -Stiptap.ts and try to import from vuetify-pro-tiptapI wanted to hide the bottom toolbar using characterCount: false
reproduction : https://codesandbox.io/p/devbox/broken-fire-mfg45y?file=%2Fsrc%2Ftiptap.ts
Uncaught TypeError: Cannot read properties of undefined (reading 'words') at /_nuxt/node_modules/.cache/vite/client/deps/vuetify-pro-tiptap.js?v=12eabd0b:14502:102 at ...
Hi, can you please make a release ?
Hi, i am trying to install vuetify-pro-tiptap.
I added library with
npm i vuetify-pro-tiptap -S
But get:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ***@0.0.0
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! vue@"^3.2.45" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.0" from [email protected]
npm ERR! node_modules/vuetify-pro-tiptap
npm ERR! vuetify-pro-tiptap@"^1.4.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/***/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/***/.npm/_logs/2023-04-06T13_56_20_821Z-debug-0.log
After i installed with '-f' and started the server i see:
15:49:00 asset_server.1 | β [ERROR] Could not resolve "vuetify/lib"
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | node_modules/vuetify-pro-tiptap/lib/vuetify-pro-tiptap.mjs:4:429:
15:49:00 asset_server.1 | 4 β ...Actions as Ql, VSubheader as Kg, VInput as Ug } from "vuetify/lib";
15:49:00 asset_server.1 | β΅ ~~~~~~~~~~~~~
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | Importing the directory "./lib" is forbidden by this package:
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | node_modules/vuetify/package.json:76:11:
15:49:00 asset_server.1 | 76 β "./*": "./*"
15:49:00 asset_server.1 | β΅ ~~~~~
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | The presence of "exports" here makes importing a directory forbidden:
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | node_modules/vuetify/package.json:53:2:
15:49:00 asset_server.1 | 53 β "exports": {
15:49:00 asset_server.1 | β΅ ~~~~~~~~~
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | You can mark the path "vuetify/lib" as external to exclude it from the bundle, which will remove this error.
15:49:00 asset_server.1 |
15:49:00 asset_server.1 | 3:49:00 PM [vite] error while updating dependencies:
15:49:00 asset_server.1 | Error: Build failed with 1 error:
15:49:00 asset_server.1 | node_modules/vuetify-pro-tiptap/lib/vuetify-pro-tiptap.mjs:4:429: ERROR: Could not resolve "vuetify/lib"
Can you help with it?
Thank you for creating this library. I used this lib for my project but the feature preview not working.
When I checked the demo in Codesanbox and click button 'ε
¨ε±', not happen change and inspect error occurred: ReferenceError: editor is not defined.
After installing and using this package, existing input styles gets overridden.
Styles of this package should be isolated or uniquely named so it won't interfere with other styles.
want to add tiptap extensions (tiptap ) but I can't.
How do I add them?
Edit: i'm trying in @1.4.3
Thank you very much for creating this package.
I am trying to use this and found some issues, like:
1. can create links but no unlinks. (can use Clear to unlink)
2. create multiple editors, click fullscreen always opens the fullscreen of the last editor.
3. I want to style the dialogs, for example ImageDialog but there is no way. Is it possible to add classes to dialogs (ImageDialog, LinkDialog, VideoDialog, ...) for easy styling?
My version: 2.3.0
Hi @yikoyu , thanks for this fancy project.
I got these errors when I used your example. Does typescript cause it? Do you have any idea how to fix it?
Could not resolve "vuetify"
../../node_modules/vuetify-pro-tiptap/lib/vuetify-pro-tiptap.mjs:6:31:
6 β import { useTheme as nu } from "vuetify";
β΅ ~~~~~~~~~
You can mark the path "vuetify" as external to exclude it from the bundle, which will remove this
error.
Some information about my env:
"vue": "^3.2.0"
"vuetify": "^3.0.0"
"vite": "^4.2.0"
"vite-plugin-vuetify": "^1.0.0"
"typescript": "^5.0.0"
Creating tables is based on hover interactions which are not possible on mobile, so making them clicky would be nice :)
Hey everyone, I'm really impressed with this package! However, I could use some help with the 'TextAlign' extension. Unfortunately, its button is always disabled, preventing me from aligning the text properly.
Here is my tiptap.js file:
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap } from 'vuetify-pro-tiptap'
import { locale, BaseKit, Bold, Italic, Underline, Strike, Color, Highlight, Heading, TextAlign, FontFamily, FontSize, SubAndSuperScript, BulletList, OrderedList, TaskList, Indent, Link, Image, Video, Table, Blockquote, HorizontalRule, Code, CodeBlock, Clear, History } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
export default createVuetifyProTipTap({
lang: 'pt_BR',
components: {
VuetifyTiptap,
VuetifyViewer
},
extensions: [
BaseKit.configure({
placeholder: {
placeholder: 'Insira o texto...'
},
bubble: {
list: {
text: ['bold', 'italic', 'underline', 'strike', 'divider', 'color', 'highlight', 'textAlign', 'divider', 'link', 'heading'],
},
}
}),
Bold,
Italic,
Underline,
Strike,
Code.configure({ divider: true }),
Heading,
TextAlign,
FontFamily,
FontSize,
Color,
Highlight.configure({ divider: true }),
SubAndSuperScript.configure({ divider: true }),
Clear.configure({ divider: true }),
BulletList,
OrderedList,
Indent.configure({ divider: true }),
Link,
Video,
Table.configure({ divider: true }),
Blockquote,
HorizontalRule,
CodeBlock.configure({ divider: true }),
History.configure({ divider: true }),
]
})Thanks in advance!
I built your project locally and tried to use in my projects. My in both vue-cli and vite projects have Vue warn as follow:
By the way, due to useAttrs there is error setupContext of undefined (both vue cli and vite). But first error in my opinion critical, though I can't use your package.
Hi @yikoyu
Thank you for this package saved me a lot of time.
I think Link is missing some functionily:
Based on this:
I see only href is used, is ok to create a PR to add more to link?
Note: I didn't figured out how to add Unlink functionility
From what I see this pacakge was heavily inspired by https://github.com/Leecason/element-tiptap
In element-tiptap they have used a different aproach to bubble menu, are you planning anything like that?
Lighthouse testing on SSR environment shows a performance drop from 100% to 53%.
This is a testing link: https://egab-nuxt3-poc-pr-1.onrender.com/en
The link for test: https://pagespeed.web.dev/analysis/https-egab-nuxt3-poc-pr-1-onrender-com-en/fgjkq0oln9?form_factor=mobile
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@vueuse/core, vuetify)@tiptap/core, @tiptap/extension-blockquote, @tiptap/extension-bold, @tiptap/extension-bullet-list, @tiptap/extension-character-count, @tiptap/extension-code, @tiptap/extension-code-block, @tiptap/extension-color, @tiptap/extension-document, @tiptap/extension-dropcursor, @tiptap/extension-focus, @tiptap/extension-font-family, @tiptap/extension-gapcursor, @tiptap/extension-hard-break, @tiptap/extension-heading, @tiptap/extension-highlight, @tiptap/extension-history, @tiptap/extension-horizontal-rule, @tiptap/extension-image, @tiptap/extension-italic, @tiptap/extension-link, @tiptap/extension-list-item, @tiptap/extension-mention, @tiptap/extension-ordered-list, @tiptap/extension-paragraph, @tiptap/extension-placeholder, @tiptap/extension-strike, @tiptap/extension-subscript, @tiptap/extension-superscript, @tiptap/extension-table, @tiptap/extension-table-cell, @tiptap/extension-table-header, @tiptap/extension-table-row, @tiptap/extension-task-item, @tiptap/extension-task-list, @tiptap/extension-text, @tiptap/extension-text-align, @tiptap/extension-text-style, @tiptap/extension-underline, @tiptap/html, @tiptap/pm, @tiptap/vue-3)@semantic-release/commit-analyzer, @semantic-release/github, @semantic-release/npm, @semantic-release/release-notes-generator, semantic-release)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@vitejs/plugin-vue, vite).github/workflows/gh-pages.yml
.github/workflows/release.yml
.github/workflows/semantic_pr.yml
.github/workflows/test.yml
package.json
@tiptap/core ^2.3.2@tiptap/extension-blockquote ^2.3.2@tiptap/extension-bold ^2.3.2@tiptap/extension-bullet-list ^2.3.2@tiptap/extension-character-count ^2.3.2@tiptap/extension-code ^2.3.2@tiptap/extension-code-block ^2.3.2@tiptap/extension-color ^2.3.2@tiptap/extension-document ^2.3.2@tiptap/extension-dropcursor ^2.3.2@tiptap/extension-focus ^2.3.2@tiptap/extension-font-family ^2.3.2@tiptap/extension-gapcursor ^2.3.2@tiptap/extension-hard-break ^2.3.2@tiptap/extension-heading ^2.3.2@tiptap/extension-highlight ^2.3.2@tiptap/extension-history ^2.3.2@tiptap/extension-horizontal-rule ^2.3.2@tiptap/extension-image ^2.3.2@tiptap/extension-italic ^2.3.2@tiptap/extension-link ^2.3.2@tiptap/extension-list-item ^2.3.2@tiptap/extension-mention ^2.3.2@tiptap/extension-ordered-list ^2.3.2@tiptap/extension-paragraph ^2.3.2@tiptap/extension-placeholder ^2.3.2@tiptap/extension-strike ^2.3.2@tiptap/extension-subscript ^2.3.2@tiptap/extension-superscript ^2.3.2@tiptap/extension-table ^2.3.2@tiptap/extension-table-cell ^2.3.2@tiptap/extension-table-header ^2.3.2@tiptap/extension-table-row ^2.3.2@tiptap/extension-task-item ^2.3.2@tiptap/extension-task-list ^2.3.2@tiptap/extension-text ^2.3.2@tiptap/extension-text-align ^2.3.2@tiptap/extension-text-style ^2.3.2@tiptap/extension-underline ^2.3.2@tiptap/html ^2.3.2@tiptap/pm ^2.3.2@tiptap/vue-3 ^2.3.2@commitlint/cli ^19.3.0@commitlint/config-conventional ^19.2.2@commitlint/cz-commitlint ^19.2.0@mdi/js ^7.4.47@semantic-release/changelog ^6.0.3@semantic-release/commit-analyzer ^11.1.0@semantic-release/git ^10.0.1@semantic-release/github ^9.2.6@semantic-release/npm ^11.0.3@semantic-release/release-notes-generator ^12.1.0@types/lodash ^4.17.4@types/lodash-es ^4.17.12@vitejs/plugin-vue ^4.6.2@vueuse/core ^10.9.0@yikoyu/eslint-config-prettier ^1.3.1commitizen ^4.3.0conventional-changelog-conventionalcommits ^7.0.2husky ^9.0.11lint-staged ^15.2.5lodash ^4.17.21lodash-es ^4.17.21lodash-unified ^1.0.3rollup-plugin-pure ^0.2.1semantic-release ^23.1.1typescript ^5.4.5unplugin-vue-components ^0.27.0vite ^4.5.3vite-plugin-checker ^0.6.4vite-plugin-dts ^3.9.1vuetify ^3.6.7xss ^1.0.15
Hi
Id like to know if this is able to generate a simple component, for example, v-btn, show it as is and also in the generated HTML one could get the source of such components.
Thanks.
Features to be developed
TODO:
When a selection is bold or italicized it does not respect the current color. It chooses a cyan-ish color.
I suggest to add disable to bubble-menu and customize bubble-menu items
Is there a way to use custom colors in highlight and text color ?
It would be nice to allow JSON output in the VuetifyViewer. Currently only the VuetifyTiptap component accepts JSON input.
Example code of what is not working:
<script setup lang="ts">
import { ref } from 'vue'
import { VuetifyTiptap, VuetifyViewer } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import { BaseKit, Bold, Italic, Underline, Strike, Color, Highlight, Heading, Link, Image, Video, Table, Fullscreen, History } from 'vuetify-pro-tiptap'
const extensions = [
BaseKit.configure({
placeholder: {
placeholder: 'Enter some text...'
}
}),
Bold,
Italic,
Underline,
Strike,
Color,
Highlight,
Heading,
Link,
Image,
Video,
Table,
Fullscreen,
History
]
const content = ref('')
</script>
<template>
<VApp id="app">
<VContainer>
<VuetifyTiptap v-model="content" output="json" />
<VuetifyViewer :value="content" />
</VContainer>
</VApp>
</template>
Hi, i need the useContext to access the store
I decided to make some noise to see if we can add dynamic comments
Do you know whether TipTap can support a feature similar to handlebars? The use case being the population of a template with dynamic data. Thanks!
First off, this package is awesome! I've been using it for a while now and it's saved me so much time with all the defaults built in.
I've come across a bug where characters are being dropped. You can see this here:
https://streamable.com/qm4lvt?src=player-page-share
At 20 seconds it drops the βhβ in what should have been βtheβ
At 50 seconds it drops a βdβ in what should have been βperiodβ
I've tried debugging this, but am a bit lost at what it could be.
How can I configure my own file upload using Paste or Drop, like the original tiptap FileHandler
Is there a way to change the default image size when an image is inserted into the DOM? I found that the default image size is set to large on this line.
I am developing a local code snippet management tool and have been doing research because my project uses a combination of Electorn+Vuetity+Vue3. So I looked for a lot of code-related editors and rich text editors, but I never found a suitable one, but I accidentally saw your project today. It not only supports vue3 but also uses the Vuetity framework. I think it is very suitable, but after reading the website Introduction, I did not find that the code has a highlighted part, so I would like to ask, can our project support code highlighting, or can we integrate some other plug-ins to achieve code highlighting?
Hi. First of all, I want to say thank you for the wonderful package.
In general, there is a problem that when I write some text in https://yikoyu .github.io/vuetify-pro-tiptap / ,
then in the process of writing , the cursor throws down
I would like you to comment on this behavior
for Semitic languages
Hi,
As title please check indent/outdent not working in version 2.1.0
Hello, package creator!
I immediately apologize that I am not writing according to the format (because this is my first issue on Github) (I would appreciate if you would give a link to some general issue format).
I found two problems that are present in the general demo booth https://yikoyu.github.io/vuetify-pro-tiptap
P.S. Thank you so much for creating the package. I see that a lot of time has been spent studying complex tools such as Tiptap and ProseMirror.
Hi,
I have just installed the latest version (2.3.0) with extension-image: 2.1.10. I can add images by URL, but I can't add images from filesystem since the button "Apply" is locked when I have "Upload" open.
"Apply" only unlocks when under "URL" a link is inserted. In this case the image from the link is shown.
Thanks!
Hi everyone! Very nice package, text alignment attracted me tbh., and I'd like to use it with nuxt@^2.15.8. Has anyone managed to install a package on Nuxt?
I'm just learning of resolving npm conflicts and managed to get it install, but not unsure how to make it work with Nuxt. It would be great to see installation process manual from someone who did it if it's possible.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google β€οΈ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.