How to use the @contentful/rich-text-types.INLINES.ASSET_HYPERLINK function in @contentful/rich-text-types

To help you get started, we’ve selected a few @contentful/rich-text-types examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.spec.js View on Github external
it('should render an asset hyperlink override', () => {
      const overrides = {
        [INLINES.ASSET_HYPERLINK]: { image: Override }
      };
      const actual = RichTextService.assetNodeToJsx(assetHyperlink, {
        ...options,
        overrides
      });
      expect(actual).toMatchSnapshot();
    });
github boylesoftware / stacy / lib / stacy-runtime.js View on Github external
const fileName = href.substring(href.lastIndexOf("/") + 1);
      return `<img alt="${text}" src="/${config.assetsPath}/${fileName}">`;
    };
  }
  function markdownHelper(content) {
    if (content) {
      return marked(content, { renderer: markedRenderer });
    }
  }
  templatesEngine.registerHelper("markdown", markdownHelper);

  //////////////////////////////////////////////////////////////////////////////
  const documentToHtmlStringOptions = {
    renderNode: {
      [BLOCKS.EMBEDDED_ASSET]: node =&gt; assetHelper(node.data.target),
      [INLINES.ASSET_HYPERLINK]: node =&gt; (
        `<a href="${assetSrcHelper(node.data.target)}">` +
        `${documentToHtmlString(node, documentToHtmlStringOptions)}` +
        `</a>`
      ),
      [BLOCKS.EMBEDDED_ENTRY]: node =&gt; moduleHelper(node.data.target),
      [INLINES.EMBEDDED_ENTRY]: node =&gt; moduleHelper(node.data.target),
      [INLINES.ENTRY_HYPERLINK]: () =&gt; ""
    }
  };
  function richTextHelper(document) {
    if (!document.nodeType || document.nodeType !== "document") {
      throw new Error("Invalid template: helper \"richText\" was passed" +
        " an invalid rich text document.");
    }
    return documentToHtmlString(document, documentToHtmlStringOptions);
  }
github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.js View on Github external
[INLINES.HYPERLINK]: 'a',
  [MARKS.BOLD]: 'strong',
  [MARKS.ITALIC]: 'em',
  [MARKS.UNDERLINE]: 'u',
  [MARKS.CODE]: 'code'
};

const entryMap = {
  [BLOCKS.EMBEDDED_ENTRY]: true,
  [INLINES.ENTRY_HYPERLINK]: true,
  [INLINES.EMBEDDED_ENTRY]: true
};

const assetMap = {
  [BLOCKS.EMBEDDED_ASSET]: true,
  [INLINES.ASSET_HYPERLINK]: true
};

function isEntryNode(node) {
  return entryMap[node.nodeType];
}

function isAssetNode(node) {
  return assetMap[node.nodeType];
}

export default function richTextToJsx(richText, options = {}) {
  if (!richText) {
    return null;
  }
  return nodeListToJsx(richText.content, { ...defaultOptions, ...options });
}
github contentful / rich-text / packages / rich-text-links / bin / benchmark / get-rich-text-entity-links.ts View on Github external
const richTextField: Document = {
  nodeType: BLOCKS.DOCUMENT,
  data: {},
  content: [
    {
      nodeType: BLOCKS.PARAGRAPH,
      data: {},
      content: [
        {
          nodeType: 'text',
          data: {},
          marks: [],
          value: '',
        },
        {
          nodeType: INLINES.ASSET_HYPERLINK,
          data: {
            target: {
              sys: {
                id: 'cover',
                type: 'Link',
                linkType: 'Asset',
              },
            },
          },
          content: [
            {
              nodeType: 'text',
              data: {},
              marks: [],
              value: 'Cover',
            },
github storybynumbers / rich-text-to-react / src / index.js View on Github external
  [INLINES.ASSET_HYPERLINK]: (node, key) => defaultInline(INLINES.ASSET_HYPERLINK, node, key),
  [INLINES.ENTRY_HYPERLINK]: (node, key) => defaultInline(INLINES.ENTRY_HYPERLINK, node, key),
github contentful / rich-text / packages / rich-text-html-renderer / src / index.ts View on Github external
const defaultNodeRenderers: RenderNode = {
  [BLOCKS.PARAGRAPH]: (node, next) =&gt; `<p>${next(node.content)}</p>`,
  [BLOCKS.HEADING_1]: (node, next) =&gt; `<h1>${next(node.content)}</h1>`,
  [BLOCKS.HEADING_2]: (node, next) =&gt; `<h2>${next(node.content)}</h2>`,
  [BLOCKS.HEADING_3]: (node, next) =&gt; `<h3>${next(node.content)}</h3>`,
  [BLOCKS.HEADING_4]: (node, next) =&gt; `<h4>${next(node.content)}</h4>`,
  [BLOCKS.HEADING_5]: (node, next) =&gt; `<h5>${next(node.content)}</h5>`,
  [BLOCKS.HEADING_6]: (node, next) =&gt; `<h6>${next(node.content)}</h6>`,
  [BLOCKS.EMBEDDED_ENTRY]: (node, next) =&gt; `<div>${next(node.content)}</div>`,
  [BLOCKS.UL_LIST]: (node, next) =&gt; `<ul>${next(node.content)}</ul>`,
  [BLOCKS.OL_LIST]: (node, next) =&gt; `<ol>${next(node.content)}</ol>`,
  [BLOCKS.LIST_ITEM]: (node, next) =&gt; `<li>${next(node.content)}</li>`,
  [BLOCKS.QUOTE]: (node, next) =&gt; `<blockquote>${next(node.content)}</blockquote>`,
  [BLOCKS.HR]: () =&gt; '<hr>',
  [INLINES.ASSET_HYPERLINK]: node =&gt; defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
  [INLINES.ENTRY_HYPERLINK]: node =&gt; defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
  [INLINES.EMBEDDED_ENTRY]: node =&gt; defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
  [INLINES.HYPERLINK]: (node, next) =&gt; `<a href="${node.data.uri}">${next(node.content)}</a>`,
};

const defaultMarkRenderers: RenderMark = {
  [MARKS.BOLD]: text =&gt; `<b>${text}</b>`,
  [MARKS.ITALIC]: text =&gt; `<i>${text}</i>`,
  [MARKS.UNDERLINE]: text =&gt; `<u>${text}</u>`,
  [MARKS.CODE]: text =&gt; `<code>${text}</code>`,
};

const defaultInline = (type: string, node: Inline) =&gt;
  `<span>type: ${type} id: ${node.data.target.sys.id}</span>`;

export type CommonNode = Text | Block | Inline;
github contentful / rich-text / packages / rich-text-react-renderer / src / index.tsx View on Github external
const defaultNodeRenderers: RenderNode = {
  [BLOCKS.DOCUMENT]: (node, children) =&gt; children,
  [BLOCKS.PARAGRAPH]: (node, children) =&gt; <p>{children}</p>,
  [BLOCKS.HEADING_1]: (node, children) =&gt; <h1>{children}</h1>,
  [BLOCKS.HEADING_2]: (node, children) =&gt; <h2>{children}</h2>,
  [BLOCKS.HEADING_3]: (node, children) =&gt; <h3>{children}</h3>,
  [BLOCKS.HEADING_4]: (node, children) =&gt; <h4>{children}</h4>,
  [BLOCKS.HEADING_5]: (node, children) =&gt; <h5>{children}</h5>,
  [BLOCKS.HEADING_6]: (node, children) =&gt; <h6>{children}</h6>,
  [BLOCKS.EMBEDDED_ENTRY]: (node, children) =&gt; <div>{children}</div>,
  [BLOCKS.UL_LIST]: (node, children) =&gt; <ul>{children}</ul>,
  [BLOCKS.OL_LIST]: (node, children) =&gt; <ol>{children}</ol>,
  [BLOCKS.LIST_ITEM]: (node, children) =&gt; <li>{children}</li>,
  [BLOCKS.QUOTE]: (node, children) =&gt; <blockquote>{children}</blockquote>,
  [BLOCKS.HR]: () =&gt; <hr>,
  [INLINES.ASSET_HYPERLINK]: node =&gt; defaultInline(INLINES.ASSET_HYPERLINK, node as Inline),
  [INLINES.ENTRY_HYPERLINK]: node =&gt; defaultInline(INLINES.ENTRY_HYPERLINK, node as Inline),
  [INLINES.EMBEDDED_ENTRY]: node =&gt; defaultInline(INLINES.EMBEDDED_ENTRY, node as Inline),
  [INLINES.HYPERLINK]: (node, children) =&gt; <a href="{node.data.uri}">{children}</a>,
};

const defaultMarkRenderers: RenderMark = {
  [MARKS.BOLD]: text =&gt; <b>{text}</b>,
  [MARKS.ITALIC]: text =&gt; <i>{text}</i>,
  [MARKS.UNDERLINE]: text =&gt; <u>{text}</u>,
  [MARKS.CODE]: text =&gt; <code>{text}</code>,
};

function defaultInline(type: string, node: Inline): ReactNode {
  return (
    <span>
      type: {node.nodeType} id: {node.data.target.sys.id}</span>
github connor-baer / rich-text-to-jsx / src / __fixtures__ / index.js View on Github external
nodeType: BLOCKS.EMBEDDED_ASSET
};

export const assetHyperlink = {
  data: {
    target: image
  },
  content: [
    {
      data: {},
      marks: [],
      value: 'ham hock',
      nodeType: 'text'
    }
  ],
  nodeType: INLINES.ASSET_HYPERLINK
};

export const entryLink = {
  sys: {
    id: '9mpxT4zsRi6Iwukey8KeM',
    link: 'Link',
    linkType: 'Entry'
  }
};

const entry = {
  sys: {
    id: '32v7TZ7YQEaugOeew4SymY',
    contentType: { sys: { id: 'page' } },
    updatedAt: '2019-01-18T14:37:30.221Z'
  },