sibiraj-s/ngx-tiptap

Angular bindings for tiptap v2

ngx-tiptap's Issues

Support NodeViewWrapper, NodeViewContent, nodeViewProps

Hello,

In this guide at the Tiptap documentation they show how to use content editable in a custom view node. But these files seems to be missing in this library.

These are the files that Vue uses:

import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'

This is the documentation page:

https://www.tiptap.dev/guide/node-views/vue

Is there already supported in Ngx-tiptap?

Thanks!

Cannot display tiptapNodeViewContent when editor is disabled

Hello @sibiraj-s!

I have created a custom node view that is editable (using tiptapNodeViewContent).
It works very good but I have one issue. How can I show the data from the editble field when viewing the editor in none editable state (editor is not in editable mode).

Using this does not output the content of the editable field.

Strange thing is if I click into the editor area it appears. So tiptapNodeViewContent is only filled when clicking on it.

[FEAT] How to use the @Mention extension of tiptap v2 with ngx-tiptap?

I'm looking at how to use the @Mention extension from Tiptap v2 native extensions but I see that in their doc they have an explicit reference to VueRenderer (from Vuejs) and a reference to the Tippy library for popover. The dependency on Tippy.js is not a problem, but on the other hand I don't see well how to replace the VueJS part by the Angular equivalent. Any idea ? Thanks and very good work it's very cool ! I see a lot of things possible with this library.

Update to angular v16

Just released with several performance improvements.

Should be able to just run ng update bump version and publish.

Components not rendering inside the editor

Here's a minimal reproduction link:
https://stackblitz.com/edit/stackblitz-starters-ssgbis?file=src%2Fmain.ts

The only difference here is that standalone components are used but module-based components had similar issues. The component is simply not rendered in the template.

It is also interesting why the component to be displayed in the editor doesn't have a template in the documentation.

I might be missing something here, or this is possibly a bug.

How to solve 'Duplicate use of selection JSON ID cell'?

Help wanted: Help with creating a menu

Hello,
thank you for creating ngx-tiptap. We would very much like to start with this, but are not yet quite comfortable with the configuration of a menu and the documentation on TipTap's homepage.
We would like to create a very simple menu, as can be seen on the collaborative editing demo of Tiptap:

Could you give us a short excerpt or an example of how to insert such a menu button above the editor?

Many thanks in advance

Problem with compilation when running Angular v17 SSR

hello!

i've been trying to get this package working with Angular 17 with SSR enabled (a requirement for my needs), but adding NgxTiptapModule to importProvidersFrom in the app config leads to the following errors:

12:16:42 PM [vite] Error when evaluating SSR module /main.server.mjs:
|- SyntaxError: Unexpected token ':'
    at new AsyncFunction (<anonymous>)
    at instantiateModule 

12:16:42 PM [vite] Internal server error: Unexpected token ':'
      at new AsyncFunction (<anonymous>)
      at instantiateModule 

removing NgxTiptapModule from the importProvidersFrom function restores proper compilation. this is also true if i import NgxTiptapModule directly in the imports array of any standalone component—the moment said component gets used, the entire app stops compiling and produces the same errors.

i've also tried removing all of the @tiptap/* packages i've installed and recompiling with just ngx-tiptap, but it only ever produces the same issue.

TypeError: Cannot read property 'matchesNode' of null

Hello, i found that this error is trigerrd when you destroy then you create the editor. It seems to have been solved in other farmework like react etc, but i guess in angular is not fixed yet

applicationRef.injector vs hierarchical injector in AngularRenderer

Hi,

is there a reason why you used the applicationRef.injector and not the passed hierarchical injector for the component in the AngularRenderer?
This way we can't pass any hierarchical injection data to the component.

tiptap-floating-menu is visible at all time

Hello,

The tiptap-floating-menu component is visible at all time and does not appear within the editor (no matter what I put inside of the component). The tiptap-bubble-menu works fine with the same content. I even tried the code from the demo project.

This is how I use it:

<div class="component-editor editor-bordered">
  <tiptap [editor]="editor"></tiptap>
</div>

<tiptap-bubble-menu [editor]="editor">
  <div class="component-editor-toolbar-inline">
    <div class="toolbar-button" (click)="editor?.chain().focus().toggleHeading({ level: 1 }).run()"><img src="assets/images/editor/h1.svg"></div>
    <div class="toolbar-button" (click)="editor?.chain().focus().toggleHeading({ level: 2 }).run()"><img src="assets/images/editor/h2.svg"></div>
    <div class="toolbar-button" [ngClass]="{active: editor?.isActive('bold')}" (click)="editor.chain().focus().toggleBold().run()"><img src="assets/images/editor/text--bold.svg"></div>
    <div class="toolbar-button" [ngClass]="{active: editor?.isActive('italic')}" (click)="editor.chain().focus().toggleItalic().run()"><img src="assets/images/editor/text--italic.svg"></div>
    <div class="toolbar-button" (click)="editor?.chain().focus().setTextAlign('left').run()"><img src="assets/images/editor/text--align--left.svg"></div>
    <div class="toolbar-button" (click)="editor?.chain().focus().setTextAlign('right').run()"><img src="assets/images/editor/text--align--right.svg"></div>
  </div>
</tiptap-bubble-menu>

<tiptap-floating-menu [editor]="editor">
  <div class="component-editor-toolbar-floating">
    <div class="toolbar-button" (click)="editor?.chain().focus().toggleHeading({ level: 1 }).run()"><img src="assets/images/editor/h1.svg"></div>
    <div class="toolbar-button" (click)="editor?.chain().focus().toggleHeading({ level: 2 }).run()"><img src="assets/images/editor/h2.svg"></div>
    <div class="toolbar-button" (click)="editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"><img src="assets/images/editor/table.svg"></div>
    <div class="toolbar-button" (click)="openPopup()"><img src="assets/images/editor/image.svg"></div>
    <div class="toolbar-button" (click)="editor?.chain().focus().toggleBulletList().run()"><img src="assets/images/editor/list.svg"></div>
  </div>
</tiptap-floating-menu>

Editor selected node doesn't update with onPush change detection.

When using changeDetection: ChangeDetectionStrategy.OnPush, the component doesn't get notified when the selected node changes, braking tool buttons reactivity.

Stackblitz with reproduction: https://stackblitz.com/edit/stackblitz-starters-zv63i5?file=src%2Fmain.ts

In the demo, app-menu component has OnPush CD.

1. Toggle some text to bold or italic. The button will apply their active class.
2. Change cursor position. The tool button remains active.

Only workaround is removing all OnPush CD all the way to the root component, which could worse the app performance.

No content displayed when it is JSON

Hello, while updating Tiptap and ngx tiptap I noticed a bug. When the editor is initialized and the input is in JSON no content is displayed. However there is no error. I could reproduce my case on this example:

stackblitz demo

Angular compatibility

Hi there, Is this compatible with angular 11? or rather, what is the lowest supported angular version? It appears you used 12 in the example and I am getting the following error using Agular CLI with angular 11 when importing it into my module (Tried with angular 8 origionally too):

Property '"editor"' is incompatible with index signature

Having trouble with the following error:

node_modules/ngx-tiptap/lib/node-view.component.d.ts:13:93 - error TS2344: 
Type '{ editor: { alias: "editor"; required: false; }; node: { alias: "node"; required: false; }; decorations: { alias: "decorations"; required: false; }; selected: { alias: "selected"; required: false; }; extension: { ...; }; getPos: { ...; }; updateAttributes: { ...; }; deleteNode: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.

Property '"editor"' is incompatible with index signature.
Type '{ alias: "editor"; required: false; }' is not assignable to type 'string'.

I'm using angular 15.2.9

[Question] slash command

Hi

I was wondering do anyone here have an angular package for slash command?

[FEAT] How to create a viewer to display HTML rendering from JSON while using the extension system with Angular components?

My question is I think not obvious. I tried to create a dedicated component to display the content generated by the editor. The component receives the JSON previously extracted by the editor which has been saved in the database. This component allows to display the HTML rendering according to the JSON. So I used the generateHTML() method of tiptap/html by passing it the model and the schema according to the extensions. But it doesn't allow me to display my nodeviews which use an Angular component. Do you have an idea? I think adding a viewer to display this rendering would be very useful for Ngx-Tiptap. I had this system when I was using Ngx-Quill.

const extensions = [
      Document,
      Dropcursor,
      Gapcursor,
      History,
      Text,
      HardBreak,
      Paragraph
];

const schema = getSchema(extensions);
const html = generateHTML(this.content, extensions);

this.elementRef.nativeElement.innerHTML = html;

You can't no longer add nodes to the editor, if it's provided from a service

Hey, I found the next bug with the latest update (4.0.2).

Now you aren't able to add nodes to the editor if you provide the Editor via a service, if you try to add the nodes to the editor you get an error like this:

ERROR Error: R3InjectorError(AppModule)[ViewContainerRef -> ViewContainerRef -> ViewContainerRef]: NullInjectorError: No provider for ViewContainerRef!

But if instead you declare the Editor inside the component you can add the nodes normally.

You can check that in the next Stackblitz: https://stackblitz.com/edit/angular-13-template-apxkmf?file=src/app/editor.service.ts

Let me know if in fact that is a bug, I'm doing something wrong or now with the new changes that works as intended, and you can't use services in order to provide the editor.

In need of better compatibility documentation

Hello,

The compatibility issues and miss-matches between Angular X, ngx-tiptap, @tiptap and @tiptap/packages - have been a struggle for me and probably a lot of other developers.

How would one even go about trying to setup ngx-tiptap on an older Angular version? In this issue you recommend downgrading ngx-tiptap to v1:
#10

But ngx-tiptap v1.x doesn't work with the latest version of @tiptap/core and extensions

In this issue you recommend downgrading those specific packages to a lower version:
#11

So currently I'm going through release logs trying to figure out what has changed and which versions I need to cherry-pick in order to get a demo going.

Could you help us by making a version compatibility chart or updating the dependencies on the mayor versions on your npm package?

ngModelChange gets emitted initially, without actual value change

Hi! Thanks a lot for the awesome lib!

I've found something that looks like a bug.

Please see the demo here: https://stackblitz.com/edit/ngx-tiptap-ngmodelchange-initial?file=README.md

The tiptap-editor behavior is different from standard Angular behavior with regards to the ngModelChange event. The ngModelChange event gets emitted once from a ngx-tiptap editor instance on initial component load, even though the component has not been touched by the user and there have been no changes to the initial value yet.

It would be great if this could be fixed so that the ngModelChange only gets emitted on actual value changes. Otherwise this breaks the validation and many other scenarios.

Thanks!

HTMLAttributes not getting attached to angular component

Hi,
I have encountered an issue with HTML attributes and custom node views. I'm not sure if this is a bug or just me not understanding how things work, but I would appreciate any help.
So this is my extension

import { Injector } from '@angular/core';
import { Node, mergeAttributes } from '@tiptap/core';
import { AngularNodeViewRenderer } from 'ngx-tiptap';

import { ImageWrapperComponent } from '../components/image-wrapper/image-wrapper.component';

const ImageWrapper = (injector: Injector): Node => {
  return Node.create({
    name: 'imageWrapper',
    group: 'imageWrapper',
    content: 'image',
    draggable: false,
    selectable: false,
    inline: false,

    addAttributes() {
      return {
        width: {
          default: null,
          parseHTML: (element) => {
            const width = element.getAttribute('width');
            const value = width ? parseInt(width, 10) : null;
            return value;
          },
          renderHTML: (attributes) => {
            if (!attributes['width']) {
              return {};
            }
            console.log('RENDER HTML ', attributes['width']); // gets correct width
            return {
              width: attributes['width'],
              style: `flex: 0; min-width: ${attributes['width']}px;`,
            };
          },
        },
      };
    },
    parseHTML() {
      return [{ tag: 'image-wrapper' }];
    },
    renderHTML({ HTMLAttributes }) {
      console.log(HTMLAttributes); // I get for example {width: 920, style: "flex: 0; min-width: 920px;"}
      return ['image-wrapper', HTMLAttributes, 0];
    },
    addNodeView() {
      return AngularNodeViewRenderer(ImageWrapperComponent, { injector });
    },
  });
};

export default ImageWrapper;

Although the renderHTML methods get correct values for the attributes, none of the attributes is added to the HTML element.
Is this maybe angular related or something? If I do it via JS for example el.setAttribute(...) the attribute will get attached to the element.
As said any help or guidance will be appreciated.
Thanks in advance.

tiptapNodeViewContent is not working in Safari

Hello,

It seems that tiptapNodeViewContent is not working in Safari and Firefox (works totally fine in Chrome and Edge) but in Safari and Firefox the area is not editable. I cannot verify in the ngx-tiptap stackblitz demo because it is not working (in either browser). There are no errors in console.

I tried the official editable demo at tiptap.dev in Safari and Firefox and it worked so I guess there is some bug with ngx-tiptap.

Angular Ondestroy event isn't being called after node is removed

First to all, I really appreciate your work adapting Tip-Tap into Angular. I'm new into programming and so, is a bit harder for me to understand how all this things works.

The issue I found is that when a component with AngularNodeViewComponent is removed from the DOM using backspace or even with deleteNode() the Angular method ngOnDestroy isn't being called so you are unable to perform onDestroy functions.

Cannot reconcile build once Tiptap extensions are added

Hey there, looking for some guidance on getting extensions into ngx-tiptap without tripping on myself here. I know the docs say "read the tiptap docs" - but doing that has led me to this and I cannot seem to resolve it.

Error: node_modules/@tiptap/pm/node_modules/prosemirror-view/dist/index.d.ts:215:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'pmViewDesc' must be of type 'ViewDesc', but here has type 'ViewDesc'.

215         pmViewDesc?: ViewDesc;
            ~~~~~~~~~~

  node_modules/prosemirror-view/dist/index.d.ts:215:9
    215         pmViewDesc?: ViewDesc;
                ~~~~~~~~~~
    'pmViewDesc' was also declared here.

I've gone through the package.json for [email protected] and aligned my versions so that they are all at 2.0.4 and I have this:

    "@tiptap/extension-document": "2.0.4",
    "@tiptap/extension-heading": "2.0.4",
    "@tiptap/extension-paragraph": "2.0.4",
    "@tiptap/extension-placeholder": "2.0.4",
    "@tiptap/extension-text": "2.0.4",
    "ngx-tiptap": "9.0.1",

Yet it looks like somehow I have at least 6 versions of prosemirror-view being referenced in my resulting package.lock and that leads me to wonder if I've missed something in the directions because with that much variance in dependencies from packages that are all pinned to the same version series, it seems off...

Docs Improvement: Suggest ::ng-deep instead of ViewEncapsulation

Hey there,

ViewEncapsulation has some broad reaching implications, however styles can be overridden in the tiptap-editor component with ::ng-deep which is more focused and safer. For example, to kill off the focus outline on nodes:

:host ::ng-deep .ProseMirror {
  &:focus {
    outline: none;
  }
  &:focus-visible {
    outline: none;
  }
}

Angular renderer for dynamic components

It would be fantastic if it was possible to render dynamic Angular components into the editor. Perhaps an Angular clone of the official VueRenderer or ReactRenderer.

on('transaction') vs on('update')

Is there a reason why the editor directive uses on('transaction') and not on('update')?
The problem with the transaction event is, that setContent always triggers it with docChanged = true.
With the update event it gets only triggered when something inside the editor changes.

The consequence it that patchValue on a pristine form marks the form as dirty, because the editor emits a value.

In my test the update event worked perfectly fine.

Example of using with suggestion plugin

Hi,
is there any example available of how to use the AngularRenderer with the suggestion plugin?

Two-way binding (current value is not displayed)

First of all thanks for your great job.

I tried to implement two way binding with [(ngModel)] but the DISPLAYED content of the editor is not updated when its value update was called from the parent component (e.g. set value as an empty string).

To reproduce:

1. Implement two way binding
2. From parent component set any value to ngModel state
   
3. editor.content has actual state, but not editor.getHtml() (as I understand it, it is it who is displayed in the editor)
   

I tried to set content manually by editor.setOptions({content: value }) but editor still display not correct value

Error with FloatingMenuPluginKey between Tiptap and Ngx-Tiptap

When I build my project I have an error with Ngx-tiptap and Tiptap. I am in version Ngx-Tiptap 3.0.2 and @tiptap/extension-floating-menu in version 2.0.0-beta.21

./node_modules/ngx-tiptap/fesm2015/ngx-tiptap.js:162:33-54 - Error: export 'FloatingMenuPluginKey' (imported as 'FloatingMenuPluginKey') was not found in '@tiptap/exten
sion-floating-menu' (possible exports: FloatingMenu, FloatingMenuPlugin, FloatingMenuView, default)

./node_modules/ngx-tiptap/fesm2015/ngx-tiptap.js:219:33-52 - Error: export 'BubbleMenuPluginKey' (imported as 'BubbleMenuPluginKey') was not found in '@tiptap/extension
-bubble-menu' (possible exports: BubbleMenu, BubbleMenuPlugin, BubbleMenuView, default)

Do you also encounter this problem?
Thanks

Angular 15 Support

Angular 15 released recently, If possible it would be nice to see an angular 15 compatible release.