diff --git a/src/interfaces.ts b/src/interfaces.ts index 829383ae..f550d0a4 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -199,6 +199,7 @@ export interface ISbError { } export interface ISbNode extends Element { + content: object[] attrs: { anchor?: string body: Array> diff --git a/src/schema.ts b/src/schema.ts index 4f615ac5..bbdd8698 100644 --- a/src/schema.ts +++ b/src/schema.ts @@ -55,6 +55,7 @@ const heading: NodeSchema = (node: ISbNode) => { tag: `h${node.attrs.level}`, } } + const image: NodeSchema = (node: ISbNode) => { return { singleTag: [ @@ -157,6 +158,7 @@ const link: MarkSchema = (node: ISbNode) => { ], } } + const styled: MarkSchema = (node: ISbNode) => { return { tag: [ @@ -180,6 +182,17 @@ const superscript: MarkSchema = () => { } } +const anchor: MarkSchema = (node: ISbNode) => { + return { + tag: [ + { + tag: 'span', + attrs: node.attrs, + }, + ], + } +} + const highlight: MarkSchema = (node: ISbNode) => { const attrs = { ['style']: `background-color:${node.attrs.color};`, @@ -233,6 +246,7 @@ export default { styled, subscript, superscript, + anchor, highlight, textStyle, }, diff --git a/tests/constants/richTextResolver.js b/tests/constants/richTextResolver.js index 139e7975..12237114 100644 --- a/tests/constants/richTextResolver.js +++ b/tests/constants/richTextResolver.js @@ -352,6 +352,60 @@ export const LONG_TEXT_WITH_LINKS_SUB_SUP_SCRIPTS = { ] } +export const PARAGRAPH_WITH_ANCHOR_IN_THE_MIDDLE = { + "type": "doc", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "a long text with a super nice ", + "type": "text" + }, + { + "text": "anchor here", + "type": "text", + "marks": [ + { + "type": "anchor", + "attrs": { + "id": "test2" + } + } + ] + }, + { + "text": ", and at the end of the text is a normal tag", + "type": "text" + } + ] + } + ] +} + +export const PARAGRAPH_WITH_ANCHOR = { + "type": "doc", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Paragraph with anchor in the midle", + "type": "text", + "marks": [ + { + "type": "anchor", + "attrs": { + "id": "test" + } + } + ] + } + ] + } + ] +} + export const TEXT_COLOR_DATA = { type: 'doc', content: [ diff --git a/tests/richTextResolver.test.js b/tests/richTextResolver.test.js index 70c6a149..693bb2dc 100644 --- a/tests/richTextResolver.test.js +++ b/tests/richTextResolver.test.js @@ -11,6 +11,8 @@ import { CUSTOM_ATTRIBUTE_DATA, LONG_TEXT_WITH_LINKS_SUB_SUP_SCRIPTS, LINK_WITH_ANCHOR_FOR_CUSTOM_SCHEMA, + PARAGRAPH_WITH_ANCHOR_IN_THE_MIDDLE, + PARAGRAPH_WITH_ANCHOR, TEXT_COLOR_DATA, HIGLIGHT_COLOR_DATA, BOLD_TEXT, @@ -325,6 +327,46 @@ test('should render a text with links, subscripts and superscripts', () => { expect(result).toBe(expected) }) +test('should render a h1 title with a anchor in the middle of the text', () => { + const sentenceWithAnchor = { + type: 'doc', + content: [ + { + type: 'heading', + attrs: { + level: '1' + }, + content: [ + { + text: 'Title with ', + type: 'text' + }, + { + text: 'Anchor', + type: 'text', + marks: [ + { + type: 'anchor', + attrs: { + id: 'test1' + } + } + ] + }, + { + text: ' in the midle', + type: 'text' + } + ] + } + ] + } + + const result = resolver.render(sentenceWithAnchor) + const expected = '

Title with Anchor in the midle

' + expect(result).toBe(expected) +}) + test('should render a text with text color', () => { const result = resolver.render(TEXT_COLOR_DATA) const expected = 'Colored text' @@ -332,6 +374,13 @@ test('should render a text with text color', () => { expect(result).toBe(expected) }) +test('should render a anchor in the text', () => { + const result = resolver.render(PARAGRAPH_WITH_ANCHOR) + const expected = '

Paragraph with anchor in the midle

' + + expect(result).toBe(expected) +}) + test('should render a text with highlight color', () => { const result = resolver.render(HIGLIGHT_COLOR_DATA) const expected = @@ -340,9 +389,16 @@ test('should render a text with highlight color', () => { expect(result).toBe(expected) }) +test('should render a anchor in the middle of a text', () => { + const result = resolver.render(PARAGRAPH_WITH_ANCHOR_IN_THE_MIDDLE) + const expected = '

a long text with a super nice anchor here, and at the end of the text is a normal tag

' + + expect(result).toBe(expected) +}) + test('should render a text with bold', () => { const result = resolver.render(BOLD_TEXT) const expected = 'Lorem Ipsum' expect(result).toBe(expected) -}) \ No newline at end of file +})