235 questions
0
votes
0
answers
13
views
Create a custom extension using tiptap
I am currently using (tiptap as for my app's editor. I want to ask is there a way to build a blockquote always have author's tag (this is a custom tag) at the last line of it.
p/s: I am currently ...
0
votes
1
answer
35
views
Can't install any packages stuck over here
What's going wrong over here?
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error ...
- 1
0
votes
0
answers
39
views
Cursor not appearing after pressing Enter in custom Tiptap extension with HardBreak
I have created a custom Tiptap extension to add a line break <br> when pressing the Enter key. The extension works as expected by inserting a <br> tag. However I'm encountering an issue ...
1
vote
0
answers
25
views
Tanstack Infinite Query + Tiptap Mention Extension
I am trying to use tiptap mention extension but with a list of suggestions from infinitequery but I just couldn't do it.
Is it even possible? Please share any ideas you might have
I tried next to ...
- 11
1
vote
0
answers
58
views
Render Tiptap Table from a custom node that renders Vue Component using VueNodeViewRenderer(VueComponent)
I am trying to extend tiptap table extention that renders a vuecomponent as I want to add a button obove the table. I am trying the following code and when I call setTable(), it does not renders a 3 ...
- 11
0
votes
1
answer
21
views
Text content gets removed when a new extension is created for it when the extension tag has textcontent and node element data together with it
Text content gets removed when an extension a new extension is created for it when the extension tag has textcontent and node element data together with it
My extension
export const Tbcaption = Node....
- 115
0
votes
1
answer
68
views
How do I get a table of content with initial content in Tiptap?
I'm so frustrated with Tiptap's table of contents extension. I have initial content. However, the table of contents will be empty on page load.
As I have content in the editor I would expect, that the ...
- 11
0
votes
0
answers
66
views
Best WYSIWYG Editor for document generation and editing (To integrate in Laravel Backpack or Laravel/Inertia/React)
We're currently building a CRM with my company and have trouble choosing between the different WYSIWYG libraries for document generation and editing
For the time being, I've selected CKEditor, TinyMCE,...
- 25
0
votes
0
answers
33
views
tiptap web-socket error in editing Unexpected end of array
I tried to generate live collaboration with Tiptap and HocuspocusProvider in Reactjs
the web socket is working well but when I want to start editing I see a weird error that is stopping me from ...
- 313
0
votes
0
answers
54
views
Tiptap removing hljs spans in code blocks
I am using TipTap with StimulusJS and the extension :
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
That I initialize this way :
CodeBlockLowlight.configure({
lowlight,
}),
...
- 2,339
0
votes
0
answers
53
views
Tiptap editor, dropped text turns into a link
I am having an issue with my Tiptap configuration.
I have a list of variables that I allow the user to drag into the editor.
At dragStart i transform the variable
variableElement.addEventListener('...
- 1,138
0
votes
0
answers
18
views
Getting rangeerror while resizing image in a custom node view renderer
import React, { useState, useCallback, useEffect, useRef } from 'react'
import { NodeViewWrapper } from '@tiptap/react'
import { Resize } from './resizeIcon'
import { LoadingPlaceholder } from './...
- 84
0
votes
0
answers
77
views
How to maintain line breaks for the pasted text in TipTap editor?
Even a TipTap editor playground does that - when you paste a text with line breaks, it will remove line breaks and will display text without them.
How can I make editor to retain the line breaks when ...
- 37
1
vote
1
answer
49
views
insertContentAt does not work when adding a html video tag
We have the following extension for Tiptap that handles a video node:
import { mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
export interface VideoOptions {
url: string;
...
- 2,260
0
votes
1
answer
213
views
Creating tiptap node for custom HTML
I'd like to extend the tiptap editor with a custom field that would store HTML meant to be directly rendered on the frontend.
So currently the rendering part looks like this:
import { generateHTML } ...
- 3,923
0
votes
0
answers
97
views
How to disable line break because of enter, shift+enter, cntrl+enter in TIp tap editor
I am using Tip tap editor for my project, I am able to disable the action performed by Enter button for my editor, but I need help for disabling the action for my Shift+Enter click
const DisableEnter =...
- 1
0
votes
0
answers
123
views
How to implement image upload in TipTap editor in Vue 3
I'm using Laravel Inertia with Vue 3 and trying to implement something that will help me to upload images to the db with help of TipTap editor.
I found implementation with React: https://gist.github....
1
vote
1
answer
178
views
How to get textContent of link with tiptap editor?
If I'm using tiptap editor and, I have the cursor in the middle of a link, I can use editor.getAttributes('link') to get the link attributes, but how do I get the text contents of that element?
<a ...
- 67
0
votes
0
answers
143
views
How can I upload images via TIptap editor from my computer file system without FileHandler extension?
I want to implement wysiwyg editor in my Nuxt 3 project using TipTap. I want to be able to load images from computer file system (I mean, I click image button and the window with my files opens where ...
0
votes
1
answer
261
views
Upload image using mui-tiptap
I am using the mui-tiptap module in React 18 with Vite, specifically I am trying to upload a local image to my backend, although the problem is only in my frontend where I receive a typescript error ...
- 13
0
votes
0
answers
367
views
react tiptap Editor disable markdown rendering
I am using the tiptap editor in my application, where I am displaying markdown and a custom extension.
When the user is editing die content, the markdown elements should not be "rendered", ...
- 316
1
vote
0
answers
44
views
When using tiptap in react, a routing problem was encountered
When I jump from /editor to /, I get an error:
Unexpected Application Error!
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
I don't know how to fix it. ...
- 11
3
votes
1
answer
529
views
How to Use TipTap <EditorProvider /> with <EditorContent />?
Background
I'm using React, Next.js, and TipTap as part of a project. I have been using TipTap with useEditor initially, but to allow more flexibility and prevent the need to pass the editor to every ...
- 3,063
1
vote
0
answers
102
views
How to Convert a Single Line to Heading in Tiptap React Editor Without Changing the Entire Paragraph?
I'm using the Tiptap editor in a React project and I'm facing an issue with converting a single line of a paragraph to a heading. When I try to convert a single line to a heading, the entire paragraph ...
2
votes
2
answers
1k
views
How to integrate Tiptap Rich Text Editor with ShadCN UI and Next.js?
I'm working on a Next.js project using ShadCN UI for my form components. I want to replace a simple field with a Tiptap rich text editor for the description field in my form.
Here is the current code ...
- 31
1
vote
0
answers
187
views
Converting a Node to a Mark in Tiptap and adding text before and after
I'm currently working on a project where I'm using Tiptap, and I'm trying to convert a Node into a Mark. The goal is to have the ability to write text before and after this node. I've attached the ...
0
votes
0
answers
34
views
Allowing unknown tags inside the editor using a wildcard extension
I am trying to create an extension which will catch all unknown tags pasted into the editor and renders them as they are without modifying anything. Here's the extension I wrote to do this:
import { ...
- 753
0
votes
0
answers
98
views
Tiptap Editor Extend Link for Atom
I was creating a small comment box using tiptap editor and I wanted the link to be directly not editable, the documentation says if the atom for any extension is true, you cannot directly edit it ...
- 11
0
votes
1
answer
363
views
Is there a way to setContent within TipTap editor within a particular element?
I am using setContent, but it replaces everything within the editor. I only want to update the content in a particular location within the editor. Currently I have it hooking into the editor with an ...
- 11
0
votes
0
answers
138
views
How to add serial numbers to custom extensions in Tiptap Editor
I wrote a custom extension for inserting test questions based on tiptap. Now I encounter a problem: how to add an auto-increment serial number to the current custom node when executing insertQuestion
...
- 1
0
votes
2
answers
823
views
In TipTap v.2.4.0, I have the error 'Could not resolve @tiptap/pm' with the extension StarterKit
I installed TipTap v.2.4.0 in my React project following their guide but I get the errors:
Could not resolve "@tiptap/pm/state"
Could not resolve "@tiptap/pm/gapcursor"
Could not ...
- 13
0
votes
4
answers
858
views
BlockNote OnChange Issues in Next JS
After I type in "/" the component re-renders every single time I try to type something, making it unusable.
File A:
const update = useMutation(api.documents.updateDocument);
const ...
- 1
1
vote
1
answer
260
views
Using TipTap version 2, how can I tell if a whole paragraph is selected rather than just some of the text within the paragraph?
I'm experimenting with TipTap v2 and am trying to show a BubbleMenu when the user selects some text. I'd like to mimic the way the Medium editor works, in that when the user selects a whole paragraph ...
- 13.5k
0
votes
0
answers
211
views
How to use react-hook-form with Tiptap editor
I want to validate my Tiptap editor using react-hook-form. The problem is that instead of validating the content length, I want to validate document lenth, i.e. the number of characters typed by user. ...
- 187
2
votes
0
answers
530
views
How to Add a Visual Indicator to a Node in Tiptap During Drag-and-Drop Operations?
I am working on implementing a drag-and-drop feature in a Tiptap editor, similar to the WordPress block editor. My goal is to show a border underline beneath the node where a draggable component (a ...
- 21
0
votes
1
answer
228
views
Setting up YSocketIo with Tiptap Nextjs and hocuspocus/server
I am trying to set up YSocketIo with Nextjs Tiptap and hocuspocus/server. Everything works, until I want to add socket routes and I get nothing back. I don't even get "User connected..." ...
- 143
0
votes
0
answers
82
views
Plugin Duplication Wraning while mapping over Array to render Multiple TipTap Editors (React js)
I'm trying to make a productivity application that requires an editor so I'm using TipTap. On main screen there are 4 divs and when you click on one div it opens a different instance of the editor.
&...
- 1
0
votes
0
answers
45
views
Asynchronous copying
When copying Prosemirror elements, I create new node elements with attributes for resources (images) in the form of base64, but before that I get them asynchronously from storage.
I convert nodes to ...
1
vote
1
answer
302
views
How do I change the size of awcodes TiptapEditor in Laravel Filament?
My problem
I'm looking to expand the field content to be atleast 2 columns wide and 2 columns in height. I'm looking to change the size of the content field in a RelationManager however I attempted ...
- 21
0
votes
0
answers
115
views
Prevent auto HTML tag closure when streaming data into tiptap editor?
I'm working on an application where I'm supposed to render text coming in stream into a Tiptap editor. I'm setting the content as I receive the data from the backend. On setting the data using the ...
- 3,326
1
vote
0
answers
82
views
Tiptap Editor applying marks cancels combination of korean characters when the mark is created for the first time
When I apply marks to Tiptap Editor, it cancels combination of korean characters when the mark is created for the first time.
this video demonstrates the situation. First line, which is without a mark,...
- 11
0
votes
0
answers
405
views
On Tiptap using BulletList and OrderedList with shift+enter
I had to change the behavior of Enter to make it run a function (this not a option, it has to be like this). Because of this, neither the bullet list nor the ordered list are working properly.
What is ...
1
vote
0
answers
314
views
Novel Editor (TipTap Editor) to Pdf Exporter
I am creating a project in which i want to export notes of people(people edit it using novel.sh editor) to a pdf.
I tried using a lot of pdf npm packages but nothing seemed to match my needs. What ...
- 31
0
votes
0
answers
448
views
Text size not changing for h1 and h2 elements in Tiptap editor
I'm using Tiptap for a rich text editor. I have h1 and h2 heading elements, but when I change the text to these headings, the font size doesn't visually change. Inspecting the element in the browser ...
- 68
0
votes
0
answers
285
views
Nuxt 3 Tiptap editor custom components
i'm currently implementing the Tiptap editor in my Nuxt 3 Project.
(with this Module: https://nuxt.com/modules/tiptap)
And i want to have a functionality to add custom components in the content. Like ...
- 183
0
votes
1
answer
628
views
Trying to make buttons active in Tiptap Vue
I'm trying to create buttons for the menu bar on my rich text editor being built with Tiptap Vue 3. I'm having a hard time with the isActive() method because I'm getting an error with the Promise ...
- 354
2
votes
0
answers
660
views
Updating attributes on the image caused the node to be deselected in tiptap
I'm developing an image extension but I've run into an issue that causes nodes to be deselected when I update the image properties
import Image from '@tiptap/extension-image';
...
extensions: [
....
- 21
4
votes
1
answer
4k
views
How to upload inserted images with Image extension in tiptap?
i hope you are well.
I am working on a medium like text editor and i am using tiptap for that and im implementing it with react.
One thing that im stuck in that is uploading images. I want to ...
- 349
0
votes
1
answer
442
views
using insertContentAt, how can i pass attributes along with the content? tiptap react
I intent to be able to click a button in props extension node that will insertContentAt a paragraph that passes attributes, lets say color:blue with it.
I am using tiptap react, with a custom ...
- 3
0
votes
1
answer
296
views
Trying to render Tiptap in React using Astro
I'm trying to render a Tiptap rich text box with React inside of Astro. I was following a tutorial from a guy who was doing it on Next but I figured that I could do the same thing on Astro since it's ...
- 354