Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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'),
});
}
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;
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' && node.dataset.blocktype === 'atomic';
if (isAtomicBlock || (nodeName === 'img' && 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 => {
if (entity.type === ENTITY_TYPES.document || entity.type === ENTITY_TYPES.image) {
return attachmentsConverters.entityToHTML(entity);
.add("HTML conversion", () => {
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) => {
// 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", {});
}
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}
)
}
},
export default (rawHTML, htmlOptions = options) => convertFromHTML(htmlOptions)(rawHTML);
setEditorContentStateFromHTML(htmlStr) {
if (htmlStr !== undefined) {
const contentState = convertFromHTML(htmlStr);
const editorState = EditorState.createWithContent(contentState);
this.handleDescriptionChange(editorState);
}
}
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);
}
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 });
});
}
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;