Skip to content

Commit

Permalink
Introduce again the support for Markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
sistrall committed Feb 8, 2023
1 parent b4e8d9a commit d335fdc
Show file tree
Hide file tree
Showing 6 changed files with 257 additions and 5 deletions.
25 changes: 25 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,31 @@ if you have a `blog_post` model, you will be able to query it like the following
}
```

### Multiple-paragraph text fields

Fields of type _Multiple-paragraph text_ will be available both as simple
strings (ie. `excerpt`) and nodes (ie. `excerptNode`). You can use the latter
if you want to apply further transformations, like converting markdown with [`gatsby-transformer-remark`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark) (converting markdown only works with `Markdown editor` as name suggests):

```graphql
{
allDatoCmsBlogPost {
edges {
node {
excerptNode {
childMarkdownRemark {
html
timeToRead
}
}
}
}
}
}
```

If these fields are localized, you can leverage localization arguments to access the field in different languages like explained [here](#localized-fields).

### Modular content fields

[Modular-content fields](https://www.datocms.com/docs/content-modelling/modular-content) can be queried this way:
Expand Down
47 changes: 46 additions & 1 deletion src/hooks/sourceNodes/createNodeFromEntity/item/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,50 @@ module.exports = function buildItemNode(entity, { generateType }) {
node.entityPayload = entity.payload;
});

return [itemNode];
const nodesForItemFieldsGeneratingMarkdown = entity.itemType.fields
.filter(field => field.fieldType === 'text')
.flatMap(field => {
const camelizedApiKey = camelize(field.apiKey);

const mediaType =
field.appeareance.editor === 'markdown'
? 'text/markdown'
: field.appeareance.editor === 'wysiwyg'
? 'text/html'
: 'text/plain';

if (field.localized) {
const locales = Object.keys(entity[camelizedApiKey]);

const nodes = locales.map(locale =>
buildNode(
'DatoCmsTextNode',
[entity.id, locale, camelizedApiKey].join('-'),
node => {
node.internal.mediaType = mediaType;
node.internal.content = entity[camelizedApiKey][locale] || '';
node.digest = entity.meta.updatedAt;
},
),
);

return nodes;
} else {
const nodes = [
buildNode(
'DatoCmsTextNode',
[entity.id, camelizedApiKey].join('-'),
node => {
node.internal.mediaType = mediaType;
node.internal.content = entity[camelizedApiKey] || '';
node.digest = entity.meta.updatedAt;
},
),
];

return nodes;
}
});

return [itemNode].concat(nodesForItemFieldsGeneratingMarkdown);
};
42 changes: 42 additions & 0 deletions src/hooks/sourceNodes/createTypes/item/fields/text.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
const { camelize } = require('datocms-client');

module.exports = ({ field }) => {
const fieldKey = camelize(field.apiKey);

return {
type: 'String',
nodeType: 'DatoCmsTextNode',
resolveForSimpleField: fieldValue => fieldValue,
resolveForNodeField: (_fieldValue, context, node, i18n) => {
if (field.localized) {
const candidateLocales = [node.locale, i18n.locale]
.concat(i18n.fallbacks[i18n.locale] || [])
.filter(x => !!x);

const localeWithMatchingNode = candidateLocales.find(locale =>
context.nodeModel.getNodeById({
id: [
'DatoCmsTextNode',
node.entityPayload.id,
locale,
fieldKey,
].join('-'),
}),
);

return context.nodeModel.getNodeById({
id: [
'DatoCmsTextNode',
node.entityPayload.id,
localeWithMatchingNode,
fieldKey,
].join('-'),
});
} else {
return context.nodeModel.getNodeById({
id: ['DatoCmsTextNode', node.entityPayload.id, fieldKey].join('-'),
});
}
},
};
};
9 changes: 8 additions & 1 deletion src/hooks/sourceNodes/createTypes/item/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ module.exports = ({
seo: simpleFieldReturnCamelizedKeys(generateType('SeoField')),
slug: simpleField('String'),
string: simpleField('String'),
text: simpleField('String'),
text: require('./fields/text'),
video: simpleFieldReturnCamelizedKeys('DatoCmsVideoField'),
};

Expand Down Expand Up @@ -136,6 +136,12 @@ module.exports = ({
objectAssign(acc, {
[`${camelize(field.apiKey)}Node`]: {
type: nodeType,
args: field.localized
? {
locale: `String`,
fallbackLocales: `[String!]`,
}
: undefined,
resolve: (node, args, context, info) => {
const i18n = getI18n(args, context, info, mainLocale);

Expand All @@ -145,6 +151,7 @@ module.exports = ({
field.localized,
i18n,
);

return resolveForNodeField(
value,
context,
Expand Down
90 changes: 87 additions & 3 deletions test/__snapshots__/graphql.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1212,10 +1212,41 @@ Foo
![](https://image.mux.com/4kQ900rt02gnY2oecSmMdc3MH87sjxr2Mi/thumbnail.jpg)
",
"valueNode": Object {
"childMarkdownRemark": Object {
"html": "<p>Multiple paragraph text</p>
<p><img src=\\"https://www.datocms-assets.com/34723/1620629638-plant.jpeg\\" alt=\\"\\"></p>
<p>Foo</p>
<p><img src=\\"https://image.mux.com/4kQ900rt02gnY2oecSmMdc3MH87sjxr2Mi/thumbnail.jpg\\" alt=\\"\\"></p>",
"timeToRead": 1,
},
"id": "DatoCmsTextNode-7364344-en-multipleParagraphText",
"internal": Object {
"content": "Multiple paragraph text
![](https://www.datocms-assets.com/34723/1620629638-plant.jpeg)
Foo
![](https://image.mux.com/4kQ900rt02gnY2oecSmMdc3MH87sjxr2Mi/thumbnail.jpg)
",
},
},
},
Object {
"locale": "it",
"value": "Paragrafi multipli",
"valueNode": Object {
"childMarkdownRemark": Object {
"html": "<p>Paragrafi multipli</p>",
"timeToRead": 1,
},
"id": "DatoCmsTextNode-7364344-it-multipleParagraphText",
"internal": Object {
"content": "Paragrafi multipli",
},
},
},
],
"_allSeoLocales": Array [
Expand Down Expand Up @@ -2209,6 +2240,19 @@ https://www.datocms-assets.com/34723/1620629638-plant.jpeg?auto=format&dpr=0.6&f
"floatingPointNumber": 3.14,
"id": "DatoCmsArticle-7364344",
"integerNumber": 42,
"itMultipleParagraphText": "Paragrafi multipli",
"itMultipleParagraphTextNode": Object {
"childMarkdownRemark": Object {
"html": "<p>Paragrafi multipli</p>",
},
"id": "DatoCmsTextNode-7364344-it-multipleParagraphText",
},
"itViaFallbackMultipleParagraphTextNode": Object {
"childMarkdownRemark": Object {
"html": "<p>Paragrafi multipli</p>",
},
"id": "DatoCmsTextNode-7364344-it-multipleParagraphText",
},
"json": "{
\\"foo\\": \\"english\\"
}",
Expand All @@ -2224,9 +2268,9 @@ https://www.datocms-assets.com/34723/1620629638-plant.jpeg?auto=format&dpr=0.6&f
"__typename": "DatoCmsMetaField",
"createdAt": "2020-09-22T15:46:24.300+01:00",
"isValid": true,
"publishedAt": "2022-05-26T09:20:19.798+01:00",
"publishedAt": "2023-02-08T12:10:05.407+00:00",
"status": "published",
"updatedAt": "2022-05-26T09:20:19.717+01:00",
"updatedAt": "2023-02-08T12:10:05.316+00:00",
},
"model": Object {
"allLocalesRequired": false,
Expand Down Expand Up @@ -2303,6 +2347,27 @@ Foo
![](https://image.mux.com/4kQ900rt02gnY2oecSmMdc3MH87sjxr2Mi/thumbnail.jpg)
",
"multipleParagraphTextNode": Object {
"childMarkdownRemark": Object {
"html": "<p>Multiple paragraph text</p>
<p><img src=\\"https://www.datocms-assets.com/34723/1620629638-plant.jpeg\\" alt=\\"\\"></p>
<p>Foo</p>
<p><img src=\\"https://image.mux.com/4kQ900rt02gnY2oecSmMdc3MH87sjxr2Mi/thumbnail.jpg\\" alt=\\"\\"></p>",
"timeToRead": 1,
},
"id": "DatoCmsTextNode-7364344-en-multipleParagraphText",
"internal": Object {
"content": "Multiple paragraph text
![](https://www.datocms-assets.com/34723/1620629638-plant.jpeg)
Foo
![](https://image.mux.com/4kQ900rt02gnY2oecSmMdc3MH87sjxr2Mi/thumbnail.jpg)
",
},
},
"originalId": "7364344",
"seo": Object {
"description": "English SEO Description",
Expand Down Expand Up @@ -2363,7 +2428,7 @@ Foo
},
Object {
"attributes": Object {
"content": "2022-05-26T08:20:19Z",
"content": "2023-02-08T12:10:05Z",
"property": "article:modified_time",
},
"tagName": "meta",
Expand Down Expand Up @@ -2947,6 +3012,25 @@ https://www.datocms-assets.com/34723/1620629638-plant.jpeg?auto=format&dpr=0.6&f
"schema": "dast",
},
},
"unlocalizedMultipleParagraphText": "Unlocalized multiple paragraph text
![](https://www.datocms-assets.com/34723/1620629638-plant.jpeg)
",
"unlocalizedMultipleParagraphTextNode": Object {
"childMarkdownRemark": Object {
"headings": Array [],
"html": "<p>Unlocalized multiple paragraph text</p>
<p><img src=\\"https://www.datocms-assets.com/34723/1620629638-plant.jpeg\\" alt=\\"\\"></p>",
"timeToRead": 1,
},
"id": "DatoCmsTextNode-7364344-unlocalizedMultipleParagraphText",
"internal": Object {
"content": "Unlocalized multiple paragraph text
![](https://www.datocms-assets.com/34723/1620629638-plant.jpeg)
",
},
},
},
},
}
Expand Down
49 changes: 49 additions & 0 deletions test/graphql.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -447,9 +447,58 @@ test('items', async () => {
value
}
multipleParagraphText
itMultipleParagraphText: multipleParagraphText(locale: "it")
multipleParagraphTextNode {
id
internal {
content
}
childMarkdownRemark {
html
timeToRead
}
}
itMultipleParagraphTextNode: multipleParagraphTextNode(locale: "it") {
id
childMarkdownRemark {
html
}
}
itViaFallbackMultipleParagraphTextNode: multipleParagraphTextNode(locale: "jp", fallbackLocales: ["it"]) {
id
childMarkdownRemark {
html
}
}
_allMultipleParagraphTextLocales {
locale
value
valueNode {
id
internal {
content
}
childMarkdownRemark {
html
timeToRead
}
}
}
unlocalizedMultipleParagraphText
unlocalizedMultipleParagraphTextNode {
id
internal {
content
}
childMarkdownRemark {
html
headings {
id
value
depth
}
timeToRead
}
}
singleAsset {
${fileFields}
Expand Down

0 comments on commit d335fdc

Please sign in to comment.