Hey fellow Wapplers! I want to create a better editor for us to use and could use your help. I have a really rough initial custom extension for tiptap working, but I'm not experienced in creating custom app connect extensions, and I'm having a difficult time understanding how to build it properly. Right now, the buttons do not update the text when clicked, but the editor itself will update the text using hotkeys (e.g., CTRL B).
If anyone more experienced wants to help, let me know. I've packaged what I have so far, but it's far from usable.
I've added rollup to help bundle the tiptap files. This means you have to use the terminal, change the directory to @brightyard/wappler-tiptap, and then npm run build each time you make modifications to /src/index.js or /app_connect/components.hjson.
After that you need to click the Check for Updates to Project Frameworks and then click the Update button.
Just to be sure where we are at, @George, where are you on TinyMce or Lexical which i think you prefer?
Anything in the pipeline so we dont reinvent the wheel!
It works ok, but not the most robust. You could try pasting in one of the demo editors here. Just be aware that not all extensions are loaded in each of the demos, so if you're testing pasting from excel/csv you'll want to try in the table demo. Tables example | Tiptap Editor Docs.
That said, it has collaborative features, so you could eventually have documents being edited by multiple people at the same time.
I know there's a ton to add, but version 1.0.7 has some basics stubbed out. All of the toolbar buttons are selectable, and there's a read-only property, once you add the component to a page in Wappler.
The plugin is further along at version 1.0.11. I added most of the free extensions and support for the pro extensions if you add your key to their private repository using the CI/CD steps outlined in the pro dashboard. I also added a couple of the pro extension's functionality and will continue adding more.
You can enable pasting images on the editor, but it's only converting to base64. I would like to be able to connect the extension to a server action to upload to S3, but it doesn't look like that functionally is exposed for us to use in custom app connect extensions. I have a separate post asking about this, but it's been crickets so far.
I haven't added any CSS and not sure if that's something to even include to allow maximum flexibility in styling.
npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/@tiptap-pro%2fextension-emoji - Not found
npm error 404
npm error 404 '@tiptap-pro/extension-emoji@^2.11.2' is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.```
@kabir.slashash@Hyperbytes, could you try with version 1.0.17? I made an update to the package.json to hopefully ensure the pro extensions do not cause the error if you haven't connected to the private repo for them.
can you fix faster we are trying to use this module in our project but i can't install it
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @brightyard/wappler_tiptap@1.0.17
npm warn Found: @tiptap-pro/extension-drag-handle@undefined
npm warn node_modules/@tiptap-pro/extension-drag-handle
npm warn
npm warn Could not resolve dependency:
npm warn peer @tiptap-pro/extension-drag-handle@"^2.11.2" from @brightyard/wappler_tiptap@1.0.17
npm warn node_modules/@brightyard/wappler_tiptap
npm warn @brightyard/wappler_tiptap@"*" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @brightyard/wappler_tiptap@1.0.17
npm warn Found: @tiptap-pro/extension-emoji@undefined
npm warn node_modules/@tiptap-pro/extension-emoji
npm warn
npm warn Could not resolve dependency:
npm warn peer @tiptap-pro/extension-emoji@"^2.11.2" from @brightyard/wappler_tiptap@1.0.17
npm warn node_modules/@brightyard/wappler_tiptap
npm warn @brightyard/wappler_tiptap@"*" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @brightyard/wappler_tiptap@1.0.17
npm warn Found: @tiptap-pro/extension-file-handler@undefined
npm warn node_modules/@tiptap-pro/extension-file-handler
npm warn
npm warn Could not resolve dependency:
npm warn peer @tiptap-pro/extension-file-handler@"^2.11.2" from @brightyard/wappler_tiptap@1.0.17
npm warn node_modules/@brightyard/wappler_tiptap
npm warn @brightyard/wappler_tiptap@"*" from the root project
npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/@tiptap-pro%2fextension-drag-handle - Not found
npm error 404
npm error 404 '@tiptap-pro/extension-drag-handle@^2.11.2' is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.
npm error A complete log of this run can be found in: C:\Users\Slashash\AppData\Local\npm-cache\_logs\2024-09-19T11_30_00_248Z-debug-0.log
Error Installing@brightyard/wappler_tiptap!
Buttons are less and also there should be a option like if user want to use this toolbar or create own and i added many buttons like heading and all but its not showing here in toolbar
Hey Kabir, thanks for the feedback. As mentioned in the README,
Note : This extension is not ready for production and is exposed for other Wapplers to review and suggest improvements.
I am slowly making updates and may break things along the way.
An easy way to get past the pro extensions error is to sign up for pro (it's free) and add your key using the CI/CD method in the tiptap pro documentation.
