How to use the @contentful/rich-text-types.BLOCKS.EMBEDDED_ASSET 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 embedded asset override', () => {
      const overrides = {
        [BLOCKS.EMBEDDED_ASSET]: { image: Override }
      };
      const actual = RichTextService.assetNodeToJsx(embeddedImage, {
        ...options,
        overrides
      });
      expect(actual).toMatchSnapshot();
    });
github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.spec.js View on Github external
it('should render an unknown element if there is no component for the mime type', () => {
      const actual = RichTextService.assetNodeToJsx(
        {
          nodeType: BLOCKS.EMBEDDED_ASSET,
          data: {
            target: {
              file: {
                contentType: 'spreadsheet'
              }
            }
          }
        },
        options
      );
      expect(actual).toMatchSnapshot();
    });
  });
github connor-baer / rich-text-to-jsx / src / __fixtures__ / index.js View on Github external
url: 'https://spotify.com/example.mp3',
      details: {
        size: 24096
      },
      fileName: 'example.mp3',
      contentType: 'audio/mp3'
    }
  }
};

export const embeddedImage = {
  data: {
    target: image
  },
  content: [],
  nodeType: BLOCKS.EMBEDDED_ASSET
};

export const embeddedVideo = {
  data: {
    target: video
  },
  content: [],
  nodeType: BLOCKS.EMBEDDED_ASSET
};

export const embeddedAudio = {
  data: {
    target: audio
  },
  content: [],
  nodeType: BLOCKS.EMBEDDED_ASSET
github connor-baer / rich-text-to-jsx / src / rich-text-to-jsx.js View on Github external
[BLOCKS.HR]: 'hr',
  [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 keenethics / keenethics / pages / post.js View on Github external
);
};

const bodyOptions = {
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => {
      const filteredChildren = children.filter((item) => !!item);

      if (filteredChildren.length === 1 && typeof filteredChildren[0] === 'object') {
        return filteredChildren[0];
      }

      return <p>{children.filter((item) =&gt; !!item)}</p>;
    },
    [BLOCKS.EMBEDDED_ASSET]: (node) =&gt; {
      const { url } = node.data.target.fields.file;
      const { description, title } = node.data.target.fields;

      return imageComponent({ src: url, description, title });
    },
    [BLOCKS.EMBEDDED_ENTRY]: (node) =&gt; {
      if (_.get(node, 'data.target.sys.contentType.sys.id') === 'usefulReadings') {
        const { bookList, list } = _.get(node, 'data.target.fields', null);

        return (
          <div>
            <div>
              <img src="/static/images/book_icon.png" alt="Book icon">
            </div>
            <div>
              <h4>useful readings:</h4></div></div>
github connor-baer / rich-text-to-jsx / src / __fixtures__ / index.js View on Github external
};

export const embeddedVideo = {
  data: {
    target: video
  },
  content: [],
  nodeType: BLOCKS.EMBEDDED_ASSET
};

export const embeddedAudio = {
  data: {
    target: audio
  },
  content: [],
  nodeType: BLOCKS.EMBEDDED_ASSET
};

export const assetHyperlink = {
  data: {
    target: image
  },
  content: [
    {
      data: {},
      marks: [],
      value: 'ham hock',
      nodeType: 'text'
    }
  ],
  nodeType: INLINES.ASSET_HYPERLINK
};
github boylesoftware / stacy / lib / stacy-runtime.js View on Github external
markedRenderer.image = function(href, _, text) {
      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);