From a01f6e87d8cdab43a3efef8bf63738524bcde8e6 Mon Sep 17 00:00:00 2001 From: Ashwini-Rathod Date: Wed, 5 Jun 2024 09:54:48 +0530 Subject: [PATCH] chore: refactoring changes --- src/jsonToMarkdown.tsx | 335 ++++++----------------------------------- src/types.ts | 2 +- 2 files changed, 48 insertions(+), 289 deletions(-) diff --git a/src/jsonToMarkdown.tsx b/src/jsonToMarkdown.tsx index 1e0a0ba..5b8f996 100644 --- a/src/jsonToMarkdown.tsx +++ b/src/jsonToMarkdown.tsx @@ -1,9 +1,7 @@ import {IJsonToMarkdownElementTags, IJsonToMarkdownTextTags} from './types' -import kebbab from 'lodash.kebabcase' -import {Node} from 'slate' const ELEMENT_TYPES: IJsonToMarkdownElementTags = { - 'blockquote': (attrs: string, child: string) => { + 'blockquote': (attrs: any, child: any) => { return ` > ${child}${attrs}` @@ -38,23 +36,16 @@ const ELEMENT_TYPES: IJsonToMarkdownElementTags = { ######${child}######` }, - img: (attrs: any, child: any, attrsJson: any, figureStyles: any) => { - if (figureStyles.fieldsEdited.length === 0) { - return `` + img: (attrsJson: any, child: any) => { + if(attrsJson) { + let imageAlt = attrsJson?.['alt'] ? attrsJson['alt'] : 'enter image description here' + let imageURL = attrsJson?.['url'] ? attrsJson['url'] : '' + return ` + +![${imageAlt}] +(${imageURL})` } - let img = figureStyles.anchorLink ? `` : `` - let caption = figureStyles.caption - ? figureStyles.alignment === 'center' - ? `
${figureStyles.caption}
` - : `
${figureStyles.caption}
` - : '' - let align = figureStyles.position - ? `
${img}${caption}
` - : figureStyles.caption - ? `
${img}${caption}
` - : `${img}` - - return `${align}` + return '' }, p: (attrs: any, child: any) => { return ` @@ -75,8 +66,8 @@ ${child}` li: (attrs: any, child: any) => { return `${child}` }, - a: (attrs: any, child: any, attrsJson: any) => { - return `[${child}](${attrsJson.href})` + a: (attrsJson: any, child: any) => { + return `[${child}](${attrsJson.url})` }, hr: (attrs: any, child: any) => { return ` @@ -86,21 +77,18 @@ ${child}` span: (attrs: any, child: any) => { return `${child}` }, - div: (attrs: any, child: any) => { - return `${child}` - }, - reference: (attrs: any, child: any, attrsJson: any, extraAttrs: any): any => { - if(extraAttrs?.displayType === 'display') { + reference: (attrsJson: any, child: any): any => { + if(attrsJson?.['display-type'] === 'display') { if(attrsJson) { - let assetAlt = attrsJson?.alt ? attrsJson.alt : 'enter image description here' - let assetURL = attrsJson?.['data-sys-asset-filelink'] ? attrsJson['data-sys-asset-filelink'] : '' + let assetName = attrsJson?.['asset-name'] ? attrsJson['asset-name'] : 'enter image description here' + let assetURL = attrsJson?.['asset-link'] ? attrsJson['asset-link'] : '' return ` -![${assetAlt}] +![${assetName}] (${assetURL})` } } - else if(extraAttrs?.displayType === 'link') { + else if(attrsJson?.['display-type'] === 'link') { if(attrsJson) { return `[${child}](${attrsJson?.['href'] ? attrsJson['href'] : "#"})` } @@ -135,26 +123,42 @@ const TEXT_WRAPPERS: IJsonToMarkdownTextTags = { } const getOLOrULStringFromJson = (value: any) => { + let child = '' + let nestedListFound = false if(value.type === 'ol'){ - let child = '' let start = parseInt(value?.attrs?.start || 1) Array.from(value.children).forEach((val: any, index) => { - child += `${index + start}. ${Node.string(val)}\n` + if(val.hasOwnProperty('type') && val.type === 'li' && value.children[index + 1] && value.children[index + 1]?.type === 'ol'){ + let liChildren = jsonToMarkdownSerializer(val) + let nestedListChildren = getOLOrULStringFromJson(value.children[index + 1]) + let indentedNestedListChildren = nestedListChildren.split('\n').filter((child) => child.length).map((child) => ` ${child}`).join('\n') + child += `${index + start}. ${liChildren}\n${indentedNestedListChildren}\n` + nestedListFound = true + } + else if(val.hasOwnProperty('type') && val.type !== 'ol'){ + let liChildren = jsonToMarkdownSerializer(val) + child += `${nestedListFound ? (index + start - 1): index + start}. ${liChildren}\n` + } + }) - return ` - -${child}` } if(value.type === 'ul') { - let child = '' let symbol = value?.attrs?.listStyleType || '- ' Array.from(value.children).forEach((val: any, index) => { - child += `${symbol}${Node.string(val)}\n` + if(val.hasOwnProperty('type') && val.type === 'li' && value.children[index + 1] && value.children[index + 1]?.type === 'ol'){ + let liChildren = jsonToMarkdownSerializer(val) + let nestedListChildren = getOLOrULStringFromJson(value.children[index + 1]) + let indentedNestedListChildren = nestedListChildren.split('\n').filter((child) => child.length).map((child) => ` ${child}`).join('\n') + child += `${symbol}${liChildren}\n${indentedNestedListChildren}\n` + } + else if(val.hasOwnProperty('type') && val.type !== 'ol'){ + let liChildren = jsonToMarkdownSerializer(val) + child += `${symbol}${liChildren}\n` + } }) - return ` - -${child}` } + return ` +${child}` } export const jsonToMarkdownSerializer = (jsonValue: any): string => { @@ -163,17 +167,6 @@ export const jsonToMarkdownSerializer = (jsonValue: any): string => { if (jsonValue['break']) { text += `
` } - if (jsonValue['classname'] || jsonValue['id']) { - if (jsonValue['classname'] && jsonValue['id']) { - text = `${text}` - } - else if (jsonValue['classname'] && !jsonValue['id']) { - text = `${text}` - } - else if (jsonValue['id'] && !jsonValue['classname']) { - text = `${text}` - } - } if (jsonValue.text.includes('\n') && !jsonValue['break']) { text = text.replace(/\n/g, '
') } @@ -182,24 +175,6 @@ export const jsonToMarkdownSerializer = (jsonValue: any): string => { text = TEXT_WRAPPERS[key](text, value) } }) - if (jsonValue['attrs']) { - const { style } = jsonValue['attrs'] - if (style) { - let attrsStyle = '' - if (style.color) { - attrsStyle = `color:${style.color};` - } - if (style["font-family"]) { - attrsStyle += `font-family:"${style.fontFamily}";` - } - if (style["font-size"]) { - attrsStyle += `font-size: ${style.fontSize};` - } - if (attrsStyle !== '') { - text = `${text}` - } - } - } return text } let children: any = '' @@ -217,229 +192,13 @@ export const jsonToMarkdownSerializer = (jsonValue: any): string => { } if (ELEMENT_TYPES[jsonValue['type']]) { - let attrs = '' - let attrsJson: { [key: string]: any } = {} - let orgType - let figureStyles: any = { - fieldsEdited: [] - } - if (jsonValue.attrs) { - - let allattrs = JSON.parse(JSON.stringify(jsonValue.attrs)) - let style = '' - if (jsonValue.attrs["redactor-attributes"]) { - attrsJson = { ...allattrs["redactor-attributes"] } - } - if (jsonValue['type'] === 'reference' && jsonValue?.attrs?.default) { - orgType = "img" - let inline = '' - if (attrsJson['asset-link']) { - attrsJson['src'] = attrsJson['asset-link'] - delete attrsJson['asset-link'] - delete allattrs['asset-link'] - } - if (attrsJson['inline']) { - inline = `display: flow-root;margin:0` - delete attrsJson['width'] - delete attrsJson['style'] - } - if (attrsJson['position']) { - figureStyles.position = - attrsJson['position'] === 'center' - ? `style = "margin: auto; text-align: center;width: ${allattrs['width'] ? allattrs['width'] + '%' : 100 + '%' - };"` - : `style = "float: ${attrsJson['position']};${inline};width: ${allattrs['width'] ? allattrs['width'] + '%' : 100 + '%' - };max-width:${allattrs['max-width'] ? allattrs['max-width'] + '%' : 100 + '%'};"` - figureStyles.alignment = attrsJson['position'] - figureStyles.fieldsEdited.push(figureStyles.position) - delete attrsJson['position'] - attrsJson['width'] && delete attrsJson['width'] - attrsJson['style'] && delete attrsJson['style'] - attrsJson['height'] && delete attrsJson['height'] - attrsJson['max-width'] && delete attrsJson['max-width'] - allattrs['max-width'] && delete allattrs['max-width'] - allattrs['width'] && delete allattrs['width'] - if (allattrs["redactor-attributes"]) { - allattrs["redactor-attributes"]['width'] && delete allattrs["redactor-attributes"]['width'] - allattrs?.["redactor-attributes"]?.['style'] && delete allattrs["redactor-attributes"]['style'] - allattrs?.["redactor-attributes"]?.['max-width'] && delete allattrs["redactor-attributes"]['max-width'] - } - } - if (attrsJson['asset-caption']) { - figureStyles.caption = attrsJson['asset-caption'] - figureStyles.fieldsEdited.push(figureStyles.caption) - delete attrsJson['asset-caption'] - delete allattrs['asset-caption'] - } - if (attrsJson['link']) { - let anchor = '' - anchor = `href="${attrsJson['link']}"` - if (attrsJson['target']) { - anchor += ' target="_blank"' - } - figureStyles.anchorLink = `${anchor}` - figureStyles.fieldsEdited.push(figureStyles.anchorLink) - delete attrsJson['link'] - delete allattrs['link'] - } - delete allattrs['default'] - delete attrsJson['default'] - delete attrsJson['target'] - delete allattrs['asset-link'] - delete allattrs['asset-type'] - delete allattrs['display-type'] - - } - if (jsonValue['type'] === 'a') { - attrsJson['href'] = allattrs['url'] - } - if (allattrs['orgType']) { - orgType = allattrs['orgType'] - delete allattrs['orgType'] - } - if (allattrs['class-name']) { - attrsJson['class'] = allattrs['class-name'] - delete allattrs['class-name'] - } - if (attrsJson['width']) { - let width = attrsJson['width'] - if (width.slice(width.length - 1) === '%') { - style = `width: ${allattrs['width']}; height: ${attrsJson['height'] ? attrsJson['height'] : 'auto'};` - } else { - style = `width: ${allattrs['width'] + '%'}; height: ${attrsJson['height'] ? attrsJson['height'] : 'auto'};` - } - } else { - if (allattrs['width']) { - let width = String(allattrs['width']) - - if (width.slice(width.length - 1) === '%') { - allattrs['width'] = String(allattrs['width']) - } else { - allattrs['width'] = allattrs['width'] + '%' - } - // style = `width: ${allattrs['width']}; height: auto;` - } - } - if (allattrs['style'] && jsonValue['type'] !== 'img') { - Object.keys(allattrs['style']).forEach((key) => { - style += `${kebbab(key)}: ${allattrs.style[key]};` - }) - delete allattrs['style'] - } - if (allattrs['rows'] && allattrs['cols'] && allattrs['colWidths']) { - delete allattrs['rows'] - delete allattrs['cols'] - delete allattrs['colWidths'] - } - if (allattrs['disabledCols']) { - delete allattrs['disabledCols'] - } - if (allattrs['colSpan']) { - delete allattrs['colSpan'] - } - if (allattrs['rowSpan']) { - delete allattrs['rowSpan'] - } - - attrsJson = { ...attrsJson, ...allattrs, style: style } - if (jsonValue['type'] === 'reference') { - if (attrsJson['type'] === "entry") { - attrsJson['data-sys-entry-uid'] = allattrs['entry-uid'] - delete attrsJson['entry-uid'] - attrsJson['data-sys-entry-locale'] = allattrs['locale'] - delete attrsJson['locale'] - attrsJson['data-sys-content-type-uid'] = allattrs['content-type-uid'] - delete attrsJson['content-type-uid'] - attrsJson['sys-style-type'] = allattrs['display-type'] - delete attrsJson['display-type'] - } - - else if (attrsJson['type'] === "asset") { - attrsJson['data-sys-asset-filelink'] = allattrs['asset-link'] - delete attrsJson['asset-link'] - attrsJson['data-sys-asset-uid'] = allattrs['asset-uid'] - delete attrsJson['asset-uid'] - attrsJson['data-sys-asset-filename'] = allattrs['asset-name'] - delete attrsJson['asset-name'] - attrsJson['data-sys-asset-contenttype'] = allattrs['asset-type'] - delete attrsJson['asset-type'] - // - if (allattrs['asset-caption']) { - attrsJson['data-sys-asset-caption'] = allattrs['asset-caption'] - delete attrsJson['asset-caption'] - } - - if (allattrs['asset-alt']) { - attrsJson['data-sys-asset-alt'] = allattrs['asset-alt'] - delete attrsJson['aasset-alt'] - } - - if (allattrs['link']) { - attrsJson['data-sys-asset-link'] = allattrs['link'] - delete attrsJson['link'] - } - - if (allattrs['position']) { - attrsJson['data-sys-asset-position'] = allattrs['position'] - delete attrsJson['position'] - } - - if (allattrs['target']) { - attrsJson['data-sys-asset-isnewtab'] = allattrs['target'] === "_blank" - delete attrsJson['target'] - } - if (!attrsJson['sys-style-type']) { - attrsJson['sys-style-type'] = String(allattrs['asset-type']).indexOf('image') > -1 ? 'display' : 'download' - } - if (attrsJson?.["display-type"] === "display") { - const styleObj = jsonValue?.["attrs"]?.["style"] ?? {}; - if (!styleObj["width"]) { - styleObj["width"] = "auto"; - } - delete styleObj["float"]; - (attrsJson["style"] && typeof attrsJson["style"] === 'string') - ? (attrsJson["style"] += getStyleStringFromObject(styleObj)) : - (attrsJson["style"] = getStyleStringFromObject(styleObj)); - } - delete attrsJson['display-type'] - } - } - if (jsonValue['type'] === "style") { - delete attrsJson['style-text'] - } - - delete attrsJson['redactor-attributes'] - Object.entries(attrsJson).forEach((key) => { - return key[1] ? (key[1] !== '' ? (attrs += `${key[0]}="${key[1]}" `) : '') : '' - }) - attrs = (attrs.trim() ? ' ' : '') + attrs.trim() - } - if(jsonValue['type'] === 'ol' || jsonValue['type'] === 'ul') { - //@ts-ignore + //@ts-ignore return getOLOrULStringFromJson(jsonValue) } - if (jsonValue['type'] === 'reference') { - figureStyles.displayType = jsonValue?.attrs?.["display-type"] - } - - if (jsonValue['type'] === 'span' && jsonValue.children.length === 1 && jsonValue.children[0].type === 'span') { - if (Object.keys(jsonValue.attrs).length === 0) { - return children - } - } - - attrs = (attrs.trim() ? ' ' : '') + attrs.trim() - - return ELEMENT_TYPES[orgType || jsonValue['type']](attrs, children, attrsJson, figureStyles) + return ELEMENT_TYPES[jsonValue['type']](jsonValue['attrs'], children) } - return children -} - -function getStyleStringFromObject(styleObj: { [key: string]: string }) { - return Object.keys(styleObj) - .map((key) => `${key}: ${styleObj[key]}`) - .join("; "); + return children } diff --git a/src/types.ts b/src/types.ts index 5c086a6..adb3785 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,7 +14,7 @@ export interface IHtmlToJsonElementTags { [key: string]: (el:HTMLElement) => IHt export interface IJsonToHtmlTextTags { [key: string]: (child:any, value:any) => string } export interface IJsonToHtmlElementTags { [key: string]: (attrs:string,child:string,jsonBlock:IAnyObject,extraProps?:object) => string } -export interface IJsonToMarkdownElementTags{[key: string]: (attrs:string,child:string,attrsJson:IAnyObject,extraProps?:object) => string} +export interface IJsonToMarkdownElementTags{[key: string]: (attrsJson:IAnyObject,child:string) => string} export interface IJsonToMarkdownTextTags{ [key: string]: (child:any, value:any) => string } export interface IJsonToHtmlOptions { customElementTypes?: IJsonToHtmlElementTags,