kgajera / ngx-contentful-rich-text Goto Github PK

Thank you for this library!

It would be nice if it were possible to define the NodeRenderer dynamically based on the node data. This would enable the rendering of embedded entries with different components based on their content type.
This would also make it possible to easily re-use existing Components that work with contentful entries.

something like this would be awesome:

  componentContentTypeMapping = {
    'product': ProductComponent,
    'review': ReviewComponent
  }

  nodeRenderers: Record<string, Type<NodeRenderer> | ((node: Block | Inline | Text) => Type<NodeRenderer>)> = {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const component = this.componentContentTypeMapping[node.data.target.sys.contentType.sys.id]
      if (component !== undefined) {
        return component
      }
      return DefaultNodeRendererComponent
    },
  };

Need to add support for the following blocks in the default renderer:

• BLOCKS.TABLE
• BLOCKS.TABLE_ROW
• BLOCKS.TABLE_CELL
• BLOCKS.TABLE_HEADER_CELL

Hello,

Is there any plan to release a version that will support Angular 13+ Ivy compilation ?

Have a good day :)

No longer relevant to us.. go ahead and the delete the issue

At the moment both services ComponentRendererService and RendererProviderService are created using providedIn: "root". In this case services are always provided at the most top level.

We have a problem when using inside a child module or inside a lib (repo created using nx).

When we provide a component to be rendered with nodeRenderers and the component in depending on a service that is NOT providedIn: 'root', but it is actually provided in the specific module, we get an error that there is no provider for that service, even though there is one in the child module.

The reason for that is that the ComponentRendererService and the RendererProviderService are providedIn: 'root', so when they call the createComponent method they are searching for the components dependancies in the root provider and not in the actual child module.

The fix for this would be to just import these two services in the child module and that is how we are going to have a way to maintain where they are provide. That way when they are called they first try to find the providers inside the child module.

At the moment this is not possible as they are not exported from the lib.

Current lib version only supports v14 from @contentful/rich-text-types. If I try to force install v15, there is a Document mismatch type error.

Currently I get the following error when trying to build my project

  Type '(Block | Inline | Text)[]' is not assignable to type '(Block | Inline)[]'.

1 <ngx-contentful-rich-text [nodes]="node.content"></ngx-contentful-rich-text>

Using

• "@contentful/rich-text-types": "15.11.1"
• "ngx-contentful-rich-text": "^0.6.0"

You have any clue how to solve this?

Hi, I came across your library and it seems close to what I need, but I was wondering if you've tested using custom components.

In my content models I have something like a body (rich text) and allow some pre-defined content types such as accordion, card panel, button group, etc.

All my components have @Input fields that maps to the content model. How would I pass those inputs using your library?

Hi how are you? Thank you very much for creating this, it is a great help in dealing with Rich Text problem.

However, I don't quite understand how it works. At the moment I am only using this in the html:

<ngx-contentful-rich-text [document]="blogPost.fields.content"> </ngx-contentful-rich-text>

And honestly this pretty much covers what I need, since it's able to recreate the hr, b, heading, etc. But, it fails to recreate an image that has been placed in the body.

How can I do that? If anyone has a repository where they have used this and have been able to use the images, perhaps that is enough for me to understand it.

Thank you all so much for your time!

Hello,

Would it be possible to update the @contentful/rich-text-types to the version 16?

I don't know enough about the migration process to propose a PR for that.

Have a nice day!

cc @kgajera

Hi

Thank you for your component, it save hours and hours .

I have a feature request right now if I need to change the style for example setting line height or add margin or ... there is no way except adding new custom components, while if you could add some classes to the components they could have been styled by css without adding custom components

update

Actually I am able to style it like this, but having classes are more intuitive

ngx-contentful-rich-text {
  line-height: 1.75rem;
  font-size: 1.1rem;

  h5,
  .h5 {
    ngx-contentful-rich-text {
      font-size: 1.5rem;
      font-weight: 500;
    }

    margin-top: 3rem;
    margin-bottom: 1rem;
  }

  p {
    text-align: justify;
  }
}

I am placing ${CHILDREN} into a class which extends the NodeRenderer, but the compiler doesn't compile and I am getting the following error:

Here is my code:

import { Component, OnInit } from '@angular/core';
import { marked } from 'marked';
import { CHILDREN, NodeRenderer } from 'ngx-contentful-rich-text';

@component({
styleUrls: ['./paragraph-entry.component.sass'],
template: '

@component({
selector: 'rich-text',
template: <div class="rich-text-wrapper"> <ngx-contentful-rich-text [document]="document!" [nodeRenderers]="nodeRenderers"> </ngx-contentful-rich-text> </div>,
styleUrls: ['./rich-text.component.sass'],
})
export class RichTextComponent implements OnInit {

constructor() {}
document = {...}

nodeRenderers: Record<string, NodeRendererResolver> = {
[BLOCKS.PARAGRAPH]: _node => ParagraphEntryComponent
};

}

Error message:
Type '(Block | Inline | Text)[]' is not assignable to type '(Block | Inline)[]'. Type 'Block | Inline | Text' is not assignable to type 'Block | Inline'. Type 'Text' is not assignable to type 'Block | Inline'. Property 'content' is missing in type 'Text' but required in type 'Inline'.

The content of ${CHILDREN} "<ngx-contentful-rich-text [nodes]="node.content">" is responsible for the problem, node.content has type (Block|Inline|Text)[] but [nodes] expects (Block|Inline)[].
What am I doing wrong here?

Hey Kishan,

I have a user trying to render rich text in Angular 8

npm install @contentful/rich-text-react-renderer --save
npm install @contentful/rich-text-from-markdown --save
npm install @contentful/ngx-contentful-rich-text --save

let obj = {
nodeType: 'document',
data: {},
content: [
{
nodeType: 'paragraph',
content: [
{
nodeType: 'text',
value: formdata[item],
marks: [],
data: {}
}
],
data: {}
}
]
};

They're returning

ERROR in ./node_modules/@contentful/rich-text-from-markdown/dist/rich-text-from-markdown.es5.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\rupajc1\Pet-Partner-Onboarding-Portal\node_modules@contentful\rich-text-from-markdown\dist'
ERROR in ./node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\rupajc1\Pet-Partner-Onboarding-Portal\node_modules@contentful\rich-text-react-renderer\dist'

Do you know what other information they need to provide to help resolve this?

Hi, I'm having an issue with line breaks within paragraphs. They are being ignored on the default implementation for paragraphs.

I'm trying to implement a custom one, but looking at your default, I don't quite see a way (yet) to get the node.content and replace \n as <br /> and was wondering if you have suggestion.
Also, this should be a good feature to implement on the library as line breaks are quite useful as paragraphs usually contains a lot more spacing between the lines.

Edit:

To give a bit more context, the custom renderer allows the user to set a custom renderer for block types. e.g.: h1, h2, paragraph, ul, etc...
The issue presents when a simple text is added. The default TextValueComponent simply binds the node value to the template. Hence, any HTML present on the string text is rendered as plain string.

This means that even if I manage to replace the line carriage feed to a <br>, the text component won't render the line breaks properly. Raised a PR to address this issue. Please review it @kgajera