How to use the @contentful/rich-text-types.MARKS.BOLD 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.js View on Github external
const tagMap = {
  [BLOCKS.HEADING_1]: 'h1',
  [BLOCKS.HEADING_2]: 'h2',
  [BLOCKS.HEADING_3]: 'h3',
  [BLOCKS.HEADING_4]: 'h4',
  [BLOCKS.HEADING_5]: 'h5',
  [BLOCKS.HEADING_6]: 'h6',
  [BLOCKS.PARAGRAPH]: 'p',
  [BLOCKS.UL_LIST]: 'ul',
  [BLOCKS.OL_LIST]: 'ol',
  [BLOCKS.LIST_ITEM]: 'li',
  [BLOCKS.QUOTE]: 'blockquote',
  [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
};
github contentful / rich-text / packages / rich-text-html-renderer / src / index.ts View on Github external
[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;

export interface Next {
  (nodes: CommonNode[]): string;
}

export interface NodeRenderer {
  (node: Block | Inline, next: Next): string;
github storybynumbers / rich-text-to-react / src / index.js View on Github external
MARKS,
  INLINES,
  helpers
} from '@contentful/rich-text-types'

const defaultInline = (type, node, key) =&gt; {
  return <span style="{{">inline: {type} , sys.id: {node.data.target.sys.id}</span>
}

const defaultMarkRenderers = {
  [MARKS.BOLD]: (text, key) =&gt; <strong>{text}</strong>,
  [MARKS.ITALIC]: (text, key) =&gt; <em>{text}</em>,
  [MARKS.UNDERLINE]: (text, key) =&gt; <u>{text}</u>,
  [MARKS.CODE]: (text, key) =&gt; <code>{text}</code>
}

const defaultNodeRenderers = {
  [BLOCKS.PARAGRAPH]: (node, key, next) =&gt; <p>{next(node.content, key, next)}</p>,
  [BLOCKS.HEADING_1]: (node, key, next) =&gt; <h1>{next(node.content, key, next)}</h1>,
  [BLOCKS.HEADING_2]: (node, key, next) =&gt; <h2>{next(node.content, key, next)}</h2>,
  [BLOCKS.HEADING_3]: (node, key, next) =&gt; <h3>{next(node.content, key, next)}</h3>,
  [BLOCKS.HEADING_4]: (node, key, next) =&gt; <h4>{next(node.content, key, next)}</h4>,
  [BLOCKS.HEADING_5]: (node, key, next) =&gt; <h5>{next(node.content, key, next)}</h5>,
  [BLOCKS.HEADING_6]: (node, key, next) =&gt; <h6>{next(node.content, key, next)}</h6>,
  [BLOCKS.EMBEDDED_ENTRY]: (node, key, next) =&gt; <div>{next(node.content, key, next)}</div>,
  [BLOCKS.UL_LIST]: (node, key, next) =&gt; <ul>{next(node.content, key, next)}</ul>,
  [BLOCKS.OL_LIST]: (node, key, next) =&gt; <ol>{next(node.content, key, next)}</ol>,
github contentful / rich-text / packages / rich-text-react-renderer / src / index.tsx View on Github external
[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>
  );
}

export type CommonNode = Text | Block | Inline;

export interface NodeRenderer {
github connor-baer / rich-text-to-jsx / src / __fixtures__ / index.js View on Github external
],
  nodeType: BLOCKS.HEADING_3
};

export const text = {
  data: {},
  marks: [],
  value: 'This is normal text.',
  nodeType: 'text'
};

export const bold = {
  data: {},
  marks: [
    {
      type: MARKS.BOLD
    }
  ],
  value: 'This is bold text.',
  nodeType: 'text'
};

export const italic = {
  data: {},
  marks: [
    {
      type: MARKS.ITALIC
    }
  ],
  value: 'This is italic text.',
  nodeType: 'text'
};
github storybynumbers / rich-text-to-react / example / src / App.js View on Github external
import { INLINES, BLOCKS, MARKS } from '@contentful/rich-text-types';
import InlineEmbedHandler from './InlineEmbedHandler'

const options = {
  renderNode: {
    [INLINES.EMBEDDED_ENTRY]: (node, key) =&gt; (
      
    ),
    [BLOCKS.PARAGRAPH]: (node, key, next) =&gt; (
      <p style="{{">
        {next(node.content, key, next)}
      </p>
    )
  },
  renderMark: {
    [MARKS.BOLD]: (text, key) =&gt; <strong style="{{">{text}!</strong>
  }
}


export default class App extends Component {
  render () {
    return (
      <div style="{{">
        
      </div>
    )
  }
}
github connor-baer / rich-text-to-jsx / src / __fixtures__ / index.js View on Github external
content: [
    {
      data: {},
      marks: [],
      value: 'This is a hyperlink.',
      nodeType: 'text'
    }
  ],
  nodeType: INLINES.HYPERLINK
};

export const boldAndItalic = {
  data: {},
  marks: [
    {
      type: MARKS.BOLD
    },
    {
      type: MARKS.ITALIC
    }
  ],
  value: 'This is bold and italic text.',
  nodeType: 'text'
};

export const paragraph = {
  data: {},
  content: [text, bold, italic, underline, hyperlink],
  nodeType: BLOCKS.PARAGRAPH
};

export const blockquote = {