Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions content/docs/custom-formatters.md

This file was deleted.

44 changes: 44 additions & 0 deletions content/docs/editor-tooling.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
title: Editor Tooling
weight: 60
group: Customization
Comment thread
caseywatts marked this conversation as resolved.
aliases:
- custom-formatters
---

## Linting via remark
Comment thread
caseywatts marked this conversation as resolved.
Outdated

If you want to lint your markdown files as part of your development workflow (in editors, in a pre-commit hook, and/or via CI), then we suggest you use `remark`. Remark is the library used by the Decap markdown widget.

If you were to use a different linter than `remark` (such as `prettier`, etc), then you would end up with formatting conflicts between files. Files edited via the Decap web interface would be formatted differently than files edited via your development workflow.
Comment thread
caseywatts marked this conversation as resolved.
Outdated

To set this up, you will need to install and set up both of these npm packages in your project:

- remark: https://remark.js.org/
- remark-frontmatter: https://github.com/remarkjs/remark-frontmatter

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess most of the time people will want to use remark-lint with remark-cli instead of the core remark? I know you can use it programatically through the remark API in a JS file, but we should focus on the easier path for people. What do you think about rewriting this part a bit so it leads users to using remark-lint instead? https://github.com/remarkjs/remark-lint#example-check-markdown-on-the-cli?

I think remark-lint will not mess with frontmatter, so maybe remark-frontmatter isn't even necessary? I haven't tested, if you could check this that would be great.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're right that people will likely use remark-cli instead of remark directly! That's what my team is doing, too. I can update that, no problem.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my project we did initially try to do it without remark-frontmatter and I wasn't able to get it working without that. The CLI interface scans each entire file, and it's not aware of the frontmatter enough to know how to skip it without that plugin.

In our Decap situation it behaves differently, because the markdown widget (which runs remark) is only manipulating the markdown body section of the markdown file. The Decap markdown widget is not aware of the frontmatter.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing I noticed on the remark-lint page is that it suggests a bunch of plugins:

npm install remark-cli remark-preset-lint-consistent remark-preset-lint-recommended remark-lint-list-item-indent --save-dev

Since we want to make sure people are getting set up with the same configuration as the Decap markdown widget, maybe we could align these. Either:

  1. Update the markdown widget to use this set of plugins (more in line with their current guidance, but it's a change we'd have to understand better & communicate out next version release)
  2. Or suggest NOT using the plugins, and write a bit more configuration & notes here on this help page.

Which approach do you think would be better? (or do you have another idea?)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll say 2 should be easier, if you could bring a bit of what you did in your project as quite of a quick set up for remark linting would be great!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great -- I added the setup from my project as an example here 👏


## Custom Formatters

To manage content with other file formats than the built-in ones, you can register a custom formatter:

```js
const JSON5 = require("json5");

CMS.registerCustomFormat("json5", "json5", {
fromFile: (text) => JSON5.parse(text),
toFile: (value) => JSON5.stringify(value, null, 2),
});
```

Then include `format: json5` in your collection configuration. See the [Collection docs](https://www.decapcms.org/docs/configuration-options/#collections) for more details.

You can also override the built-in formatters. For example, to change the YAML serialization method from [`yaml`](https://npmjs.com/package/yaml) to [`js-yaml`](https://npmjs.com/package/js-yaml):

```js
const jsYaml = require("js-yaml");

CMS.registerCustomFormat("yml", "yml", {
fromFile: (text) => jsYaml.load(text),
toFile: (value) => jsYaml.dump(value),
});
```