How to use the draft-convert.convertFromHTML function in draft-convert

To help you get started, we’ve selected a few draft-convert 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 Heigvd / Wegas / wegas-app / src / main / webapp / wegas-react-form / src / Views / RTE / styles.tsx View on Github external
import { Link, linkDecorator } from './link';
import { imageDecorator, videoDecorator } from './media';

export const decorators = new CompositeDecorator([
    linkDecorator,
    imageDecorator,
    videoDecorator,
]);

export const inlineStyles: { [name: string]: React.CSSProperties } = {
    ...BACKGROUND_COLORS,
    ...FOREGROUND_COLORS,
    ...FONT_FAMILY,
    ...FONT_SIZE,
};
export const HTMLToState = convertFromHTML({
    htmlToStyle: (nodeName, node, currentStyle) => {
        let style = currentStyle;
        Object.keys(inlineStyles).forEach(k => {
            if (isMatch(node.style, inlineStyles[k])) {
                style = style.add(k);
            }
        });
        return style;
    },
    htmlToEntity: (nodeName, node) => {
        if (nodeName === 'a') {
            // this will deprecate. fix https://github.com/HubSpot/draft-convert/pull/82
            return Entity.create('LINK', 'MUTABLE', {
                url: node.getAttribute('href'),
            });
        }
github strues / boldr / packages / frontend / BoldrText / BoldrText.js View on Github external
constructor(props: Props) {
    super(props);

    let initialEditorState;
    let { initialContent, contentFormat } = this.props;

    contentFormat = contentFormat || 'raw';
    initialContent = initialContent || '';

    if (!initialContent) {
      initialEditorState = EditorState.createEmpty(editorDecorators);
    } else {
      let convertedContent;

      if (contentFormat === 'html') {
        convertedContent = convertFromHTML(getFromHTMLConfig())(initialContent);
      } else if (contentFormat === 'raw') {
        convertedContent = convertFromRaw(initialContent);
      }

      initialEditorState = EditorState.createWithContent(convertedContent, editorDecorators);
    }
    // $FlowIssue
    this.readyForSync = true;

    this.state = {
      editorState: initialEditorState,
      editorProps: {},
    };
  }
  state: State;
github assembl / assembl / assembl / static2 / js / app / utils / draftjs.js View on Github external
return { start: '<div data-blocktype="atomic" class="atomic-block">', end: '</div>' };
  }

  return undefined;
}

export function htmlToBlock(nodeName: string, node: HTMLElement, lastList: *, inBlock: string): void | string {
  const isAtomicBlock = nodeName === 'div' &amp;&amp; node.dataset.blocktype === 'atomic';
  if (isAtomicBlock || (nodeName === 'img' &amp;&amp; inBlock !== 'atomic')) {
    return 'atomic';
  }

  return undefined;
}

const customConvertFromHTML = convertFromHTML({
  htmlToBlock: htmlToBlock,
  htmlToEntity: function (nodeName: string, node: HTMLElement, createEntity: Function): EntityInstance | null {
    if (nodeName === 'a') {
      // $FlowFixMe: if nodeName is 'a', node should be an HTMLAnchorElement
      return linkConverters.htmlToEntity(nodeName, node, createEntity, addProtocol);
    }

    return attachmentsConverters.htmlToEntity(nodeName, node, createEntity);
  }
});

const customConvertToHTML = convertToHTML({
  blockToHTML: blockToHTML,
  entityToHTML: (entity: EntityInstance, originalText: string): string =&gt; {
    if (entity.type === ENTITY_TYPES.document || entity.type === ENTITY_TYPES.image) {
      return attachmentsConverters.entityToHTML(entity);
github springload / draftail / examples / docs.story.js View on Github external
.add("HTML conversion", () =&gt; {
    const content = `
    <p>This editor demonstrates <strong>HTML import and export</strong>.</p>
    <hr>
    <blockquote>Built with <a href="https://github.com/HubSpot/draft-convert">draft-convert</a></blockquote>
    <img src="/static/example-lowres-image2.jpg">
    <p></p>
    `;

    const fromHTML = convertFromHTML({
      htmlToEntity: (nodeName, node, createEntity) =&gt; {
        // a tags will become LINK entities, marked as mutable, with only the URL as data.
        if (nodeName === "a") {
          return createEntity(ENTITY_TYPE.LINK, "MUTABLE", { url: node.href });
        }

        if (nodeName === "img") {
          return createEntity(ENTITY_TYPE.IMAGE, "IMMUTABLE", {
            src: node.src,
          });
        }

        if (nodeName === "hr") {
          return createEntity(ENTITY_TYPE.HORIZONTAL_RULE, "IMMUTABLE", {});
        }
github ld-x / last-draft / src / convert.js View on Github external
export function editorStateFromHtml (rawHtml) {
  if (rawHtml === null) {
    return EditorState.createEmpty()
  }

  let html = rawHtml.replace(REGEX_LF, '')
  const contentState = convertFromHTML({
    htmlToStyle: (nodeName, node, currentStyle) => {
      if (node.className !== undefined) {
        return currentStyle.add(node.className)
      } else {
        return currentStyle
      }
    },
    htmlToEntity: (nodeName, node) => {
      if (nodeName === 'a') {
        return Entity.create(
          'LINK',
          'MUTABLE',
          {url: node.href, target: node.target}
        )
      }
    },
github brijeshb42 / medium-draft / src / importer.js View on Github external
export default (rawHTML, htmlOptions = options) => convertFromHTML(htmlOptions)(rawHTML);
github NDLANO / learningpath-frontend / src / common / editors / DescriptionHTMLEditor.js View on Github external
setEditorContentStateFromHTML(htmlStr) {
    if (htmlStr !== undefined) {
      const contentState = convertFromHTML(htmlStr);
      const editorState = EditorState.createWithContent(contentState);
      this.handleDescriptionChange(editorState);
    }
  }
github florapdx / react-drafts / src / utils / import-from-html.js View on Github external
export function convertFromHTML(contentState, html, toolbarConfigs) {
  return convert({
    htmlToStyle: convertToInline,
    htmlToEntity: (nodeName, node) =>
      convertToEntity(nodeName, node, contentState, toolbarConfigs),
    htmlToBlock: (nodeName, node) => convertToBlock(nodeName, node)
  })(html);
}
github hackforla / jobs-for-hope / client / src / components / JobForm.js View on Github external
const filteredArr = salaryArr.map(sal => {
          return sal.replace("$", "").replace("/hr", "");
        });
        const editValues = {
          organization: res.organization_id,
          title: res.job_title,
          url: res.info_link,
          description: res.job_summary ? res.job_summary : "",
          location: res.job_location ? res.job_location : "",
          postDate: formatDate(res.job_post_date),
          salaryLow: res.salary ? filteredArr[0] : "",
          salaryHigh: res.salary ? filteredArr[1] : "",
          hours: res.full_or_part ? res.full_or_part : "",
          zip: res.job_zip_code ? res.job_zip_code : "",
          descriptionEditorState: res.job_summary
            ? EditorState.createWithContent(convertFromHTML(res.job_summary))
            : new EditorState.createEmpty()
        };
        this.setState({ job: editValues });
      });
    }
github strues / boldr / src / scenes / Admin / Articles / ArticleEditor / components / EditArticleForm / EditorField.js View on Github external
constructor(props: Props) {
    super(props);
    let editorState = EditorState.createEmpty();
    if (props.input.value) {
      editorState = EditorState.createWithContent(convertFromHTML(props.input.value));
    }
    this.state = {
      editorState,
    };
  }
  state: State;

draft-convert

Extensibly serialize & deserialize Draft.js ContentState

Apache-2.0
Latest version published 2 years ago

Package Health Score

57 / 100
Full package analysis