Netlify-cms: Raw Edit File

[ChosenQuill]

- Do you want to request a feature or report a bug?
Feature/Bug?

I am new to netlify cms. I have spent about four hours trying to figure out a way to add a way to raw edit a file in collections. (No markdown or anything, just direct edit and save). Is there any way possible, and if not could that be added?

Thank You.

[tech4him1]

This config should work:

collections:
  - name: "settings"
    label: "Settings"
    files:
      - name: "raw"
        label: "Raw File"
        file: "_data/test.txt"
        fields:
          - {label: "Content", name: "body", widget: "text"}

[tech4him1]

Just trying to test and it seems like the CMS loads and saves the file as empty every time. Is this what you were running into @SureDroid?

[ChosenQuill]

The text widget docs says that it takes multiple lines and saves them as string, is that one line? I thought that text saves it as only one line. What I am trying to do is be able to edit the config.toml for my site (victor hugo). I'll check if that works and come back.

[ChosenQuill]

Coming back at my previous comment, does not work, comes back with empty text editor and blank preview. https://github.com/SureDroid/hugobuild/commit/345f11a I don't think we are on the same page (read above for info). Here is my repo if you want to take a look. https://github.com/SureDroid/hugobuild/
Edit: This may be the problem you stated, I haven't tried saving the file yet cause I don't want to mess up my condig.toml. Later, I'll try saving to a file and port the result. So far no solution yet.

[tech4him1]

The text widget docs says that it takes multiple lines and saves them as string, is that one line? I thought that text saves it as only one line. What I am trying to do is be able to edit the config.toml for my site (victor hugo). I'll check if that works and come back.

Nope, it should save whatever you type in (multiple lines).

[tech4him1]

Coming back at my previous comment, does not work, comes back with empty text editor and blank preview.

That's what I was seeing as well. I'll try to look into this later today or tomorrow. (thanks for linking your repo)

[tech4him1]

Relevant code line:
https://github.com/netlify/netlify-cms/blob/7caa15627744c4c01efdde73978b22b3cf72eea2/src/formats/formats.js#L67-L72

[tech4him1]

@SureDroid As a workaround for now, you should be able to set format: frontmatter on the collection. It will apply on all files that you add to that "Settings" collection.

Example:

collections:
  - name: "settings"
    label: "Settings"
    format: frontmatter  #<--------------------------- Workaround
    files:
      - name: "raw"
        label: "Raw File"
        file: "_data/test.txt"
        fields:
          - {label: "Content", name: "body", widget: "text"}

[ChosenQuill]

This does not work.

First thing I saw when I tried using formatmatter was that the page was that the text and preview was empty. I pasted in my current config and I took a screenshot. Looking from it, I immediately saw that it was taken as a one line and the text was being wrapped. Publishing the file, my config.toml got overwrited with a one line string which failed generation in netlify auto-deploy. I also tried using toml as my format but that did not work aswell w/ a similar result.

I'll try a txt file and see if it works and come back.

[ChosenQuill]

Coming back at the previous comment, editing txt works and doesn't work at the same time.

I tested editing a raw txt file using your recommended settings. It posts multi-liners but has some unusual behaviors.

The first one I am sure that you are aware of, is that the preview is single line, which makes the preview section more useless than it already is for editing raw files.

The second strange behavior which you may not know of is after publishing, going out of the page and back into the page, it goes blank. This means I have to overwrite the file every single time I want to edit it, and when I am editing the config of a site (if it worked for .toml aswel) which all the settings are contained in, it would be useless to use this instead of editing the direct file on my computer.

[tech4him1]

I also tried using toml as my format but that did not work aswell w/ a similar result.

TOML is a valid format, and it will work for this -- however, you have to define each line as a field, instead of just one main body field.

[tech4him1]

@SureDroid

The first one I am sure that you are aware of, is that the preview is single line, which makes the preview section more useless than it already is for editing raw files.

You can set this on the collection to turn the preview off:

editor:
  preview: false

The second strange behavior which you may not know of is after publishing, going out of the page and back into the page, it goes blank.

My bad, you need to set yaml-frontmatter or toml-frontmatter instead of just frontmatter. It actually doesn't matter whether you use yaml-frontmatter or toml-frontmatter, since you are using a raw file instead of markdown. (I did test this with your config.)

[tech4him1]

@SureDroid Did the last comment work for you?

[ChosenQuill]

Sorry for no update. Was going ask if a way to fully raw edit config toml files would be added, but I guess I should get used to creating a box for every single line. Thanks for the help. Earlier you mentioned a bug and said that this was a workaround, so I didn't know if I should close this issue or not if the bug still exists. Anyway, all my problems are fixed. Thanks for your time!

[tech4him1]

Thank you! I think this is no longer a bug, I was just misunderstanding your original request 😄.

Was going ask if a way to fully raw edit config toml files would be added, but I guess I should get used to creating a box for every single line.

Are you thinking of that as a way to have the CMS infer the fields from the file that already exists? If so, that is a very interesting idea, it would be awesome if you could open a new issue as a feature request.

[ChosenQuill]

Alright, will do!

[nickiescutia]

Found this very useful! The strata theme uses its config.toml file to list out portfolio work (thumbnail and full jpg/png files), now I can upload the media in the CMS _and_ edit the toml file, without dropping back down to editing and pushing the files myself.

Would be nice if there were plugins or something to extend the raw edit experience for specific use cases where the collection could reason about a raw toml file, break out a list of items, and be able to append / edit / delete to the toml list intelligently in a UI similar to that of normal blog posts or pages. (Is that the feature request above, or something else?).

[erquhart]

where the collection could reason about a raw toml file, break out a list of items, and be able to append / edit / delete to the toml list intelligently in a UI similar to that of normal blog posts or pages

Can you explain a bit more what you mean here?

[nickiescutia]

Sure; my use case is a basic portfolio site that i have control over.

This particular theme im using has a ‘recent works’ section that’s a list of pictures. As a graphic designer, im not primarily interested in the blogs or pages that the cms can edit and post, but rather those images.

I pump out new art daily, and would love a way to just pop open the cms and not only upload new media i create, but also add that to my deployed site without dropping down into a terminal with git or editing config files directly (im not really a programmer, my husband set most of this up for me).

Right now the only way to do that (with this particular theme), is to edit the raw toml file, as that is where this theme lists out its ‘works’ sections.

Does that make sense? There mogjt be another theme that uses a collection to do that, but usually the thumbnail and picture galleries and setup in a toml file.

[nickiescutia]

Here’s a direct link to the part of the themes instructions that kind of lay out the problem - https://github.com/digitalcraftsman/hugo-strata-theme/blob/master/README.md#build-up-your-portfolio

Since the toml file controls the section I’m interested in, I have to have that raw file edit, but it would be much nicer if the cms had a way of displaying the portfolio section on a similar way as other collections (blog posts/pages).

[tech4him1]

@nickiescutia You can currently edit a single file just like any other post (see files-type collections in the docs). The only limitation currently is that you must define all fields in the file (including baseURL, etc.).

[ChosenQuill]

I think what you said above is what I have been waiting for and wanted. Thanks for adding it. Will test it out when I get the chance.

[TonioGela]

@nickiescutia You can currently edit a single file just like any other post (see files-type collections in the docs). The only limitation currently is that you must define all fields in the file (including baseURL, etc.).

What about TOML files with tables like

[[section]]
foo = "bar"

Are they mappable? Maybe using lists?

[tomrutgers]

A TOML table is an array of objects basically, so I think the list widget with a fields property should work. Try this:

- name: section
  label: Section
  widget: list
  fields: 
    - {name: foo, label: Foo, widget: string}

[barthc]

@tomrutgers I think it's should be object instead of list :smile:

[tomrutgers]

@barthc Correct me if I'm wrong but doesn't this (mind the double brackets)

[[section]]
foo = "bar"

translate to the following (in json)?

{
  "section": [
    { "foo": "bar" }
  ]
}

https://github.com/toml-lang/toml#array-of-tables

[barthc]

Sorry, you are right mistook [[section]] for[section] :+1: