grow / grow-ext-editor

Editor for updating content using an interface.

Grow.dev

Grow is a declarative tool for rapidly building, launching, and maintaining high-quality static HTML.

• Easy installation
• Jinja template engine
• Content managed in YAML and JSON files
• Data-binding between content and templates
• Configuration-based site architecture
• Easy URL changes
• Flexible internationalization and translation
• Integration with external CMSes
• Integration with Google Sheets
• Fast builds

Quick start

One time only: install Pipenv and libyaml.

# On Mac with Homebrew (https://brew.sh/).
brew install pipenv libyaml

# On Ubuntu.
sudo apt install -y pipenv libyaml-dev

# On other distributions.
sudo apt install python-pip; pip install pipenv

Next: install and run Grow using a starter.

git clone https://github.com/grow/starter
cd starter
pipenv install
pipenv run grow install
pipenv run grow run

Documentation

Visit https://grow.dev to read the documentation.

grow-ext-editor's Issues

Api for Retrieving all Documents

Add api for retrieving all of the documents in the pod.

This can be used for making !g.doc and !g.url style fields.

Keyboard shortcuts

• When the user hits "return" in an input field, the editor should Save.
• Command+return from a textarea should also Save.

!g.string support

While I largely expect we will phase out !g.string over time thanks to the editor, the editor should be compatible with it, similarly to how it works with !g.yaml.

Currently, !g.string shows [object Object]. This should show the reference to the string instead. Ideally the user can override it with a standard string if they want to make edits.

Api for Retrieving All Strings

Add an api for retrieving all of the strings information from /content/strings.

This can be used for making a !g.string style fields.

Add gallery of available partials when adding sections to pages

When a user presses "add section" they should be able to pick from a list of available partials. The partials should come with a title, description, and thumbnail. The thumbnails can be manually generated and can be stored locally within the project.

Add navigation sidebar

There should be a sidebar that allows the user to navigate through the site to edit different files. At a minimum, the sidebar should have:

• Sitemap – Uses the routes to list all pages on the site. These pages will all have live previews.
• File tree – Simply lists pod contents allowing the user to edit arbitrary raw files within the pod.

Add ability to overwrite serving path (`$path`)

The user should be able to customize the serving path for a page by overwriting its $path

Undefined present in editor

Fields will null values should actually be null and show the field's placeholder (if it exists), not undefined as a string.

Example:

YAML validation prior to saving

• The editor should never let invalid YAML make its way into the repo (similar to how Goro would validate JSON before it is saved).
• This will save us a lot of build errors that might arise from users using the "raw" editor when they want to jump from the selective editor for any reason.

[object Object] sometimes visible with !g.string

We should never have any instance of [object Object] appearing in the editor UI – even if the type doesn't match the value, it shouldn't serialize to [object Object]

In the page YAML:

$title@: !g.string homepage.page_title.string
description@: !g.string homepage.page_description.string

In the _editor.yaml:

fields:
- type: text
  key: $title@
  label: Page title
- type: textarea
  key: description@
  label: Meta description

Autoguess the partials field.

When the root key is partials, guess that it is a partials type :)

Removing a value for a document reference causes error.

When there is a document reference field, it does not allow you to remove the document reference.

yaml/constructor.py, line 51, in get_single_data
    return self.construct_document(node)
yaml/constructor.py, line 60, in construct_document
    for dummy in generator:
yaml/constructor.py, line 413, in construct_yaml_map
    value = self.construct_mapping(node)
yaml/constructor.py, line 218, in construct_mapping
    return super().construct_mapping(node, deep=deep)
yaml/constructor.py, line 143, in construct_mapping
    value = self.construct_object(value_node, deep=deep)
yaml/constructor.py, line 100, in construct_object
    data = constructor(self, node)
grow/common/utils.py, line 457, in construct_doc
    return self._construct_func(node, func)
grow/common/utils.py, line 351, in _construct_func
    return func(node.value)
grow/common/utils.py, line 451, in func
    constructed_doc = pod.get_doc(path, locale=self.loader_locale())
grow/pods/pods.py, line 606, in get_doc
    raise collection.BadCollectionNameError(text)

Add ability to delete sections

We can currently add and reorder sections but cannot delete them. :)

Pop State is not updating url and editor.

Need to watch the pop state to find out when the browser is navigating back to update the url and editor.

Load editor without a home page defined

When there is no home page defined the editor still needs to load, just without a document selected.

Incorrect editor URL displayed in console

$ grow run
[12:32:03] 24 routes built in 0.201 s
[12:32:03]                 Pod: /Users/jeremydw/git/foo
[12:32:03]              Server: http://localhost:8081/bar/
[12:32:03]      Content Editor: http://localhost:8081/bar/_grow/editor/
[12:32:03]               Ready. Press ctrl-c to quit.

A few changes:

• We should change "Content Editor" to just "Editor" for brevity.
• The /_grow/editor path should be rooted at /, not /bar/ (the {root})
• When -b is used, the editor should also open up in a new tab automatically (so, two tabs – one for the site and one for the editor)

Auto adjust text to textfield input when content is longer

When content of a text input reaches a certain lenght, change the render to a textarea instead of using a text input.

Add ability to create and delete files

There should be a way to:

• create new files (either based on an existing one or just a blank one within a collection)
• delete files

When using markdown field in a list only the first list item gets the markdown changes.

For some reason when using the markdown field in a list the markdown is only showing the first item in the list.

Example config:

- key: sections
  type: list
  label: FAQs
  fields:
  - key: title.text@
    type: text
    label: Question
  - key: body.text@
    type: markdown
    label: Answer

Default grow editor background to white

The grow editor preview currently wraps the site preview in a grey background.

This can be problematic because a site's module might have no background (transparent). Outside the editor, this module would appear white but in the editor, the background becomes grey.

I think the grow editor preview background should default to white as browsers do.

Show page title instead of document path on type document

The type:document currently pulls a list of page paths - which can be a bit intimidating for non-technical users.

Is it possible to pull from page.title? I realize not all pages would have titles so I don't know if this is a convention we would want to enforce or if we perhaps add something like:

type: document
display_field: title

Toasts with event support

• We need to communicate status by adding "toast" messages.
• Toast should appear in bottom left and disappear after 3 seconds, by default, but be controllable to persist.
• An external/wrapper program should be able to interface with toasts by dispatching an event to the window with the content of the toast (i.e. the HTML content of the toast, the style, and whether it should persist.)

Example flows:

1. User presses "Save"
2. Once the Save (and Commit) XHR is complete, show a toast with the latest commit hash (wrapper program will have this information)

API + JSON serialization fails when YAML contains datetime

Serialization needs to support datetimes and other objects.

File "/tmp/sites/site/extensions/editor/editor_api.py", line 35, in response
    return wrappers.Response(json.dumps(self.data), mimetype='application/json')

datetime.datetime(2020, 1, 27, 16, 16, 31) is not JSON serializable

Maybe we can fix this by using Grow's existing JSON serializer/dumper:
https://github.com/grow/grow/blob/647377fe70f65d065875290aaa24e490b4db5970/grow/common/json_encoder.py#L9

Usage:
https://github.com/grow/grow/blob/647377fe70f65d065875290aaa24e490b4db5970/grow/common/json_encoder_test.py#L20

Content API needs to work for partial content files

We should be able to use the editor to edit any file in the repo, not just documents with serving URLs.

File "/Users/jeremydw/.local/share/virtualenvs/grow-cloud-run-ez-MnB7d/lib/python2.7/site-packages/grow/server/main.py", line 28, in __call__
    return self.wsgi_app(environ, start_response)

File "/Users/jeremydw/.local/share/virtualenvs/grow-cloud-run-ez-MnB7d/lib/python2.7/site-packages/grow/server/main.py", line 70, in wsgi_app
    response = self.dispatch_request(request)

File "/Users/jeremydw/.local/share/virtualenvs/grow-cloud-run-ez-MnB7d/lib/python2.7/site-packages/grow/server/main.py", line 64, in dispatch_request
    self.pod, request, matched, meta=handler_meta)

File "/Users/jeremydw/git/project/extensions/editor/editor_api.py", line 300, in serve_api
    api = PodApi(pod, request, matched)

File "/Users/jeremydw/git/project/extensions/editor/editor_api.py", line 40, in __init__
    self.handle_request()

File "/Users/jeremydw/git/project/extensions/editor/editor_api.py", line 255, in handle_request
    self.get_editor_content()

File "/Users/jeremydw/git/project/extensions/editor/editor_api.py", line 173, in get_editor_content
    self.data = self._load_doc(pod_path)

File "/Users/jeremydw/git/project/extensions/editor/editor_api.py", line 108, in _load_doc
    serving_paths[str(doc.default_locale)] = doc.get_serving_path()

File "/Users/jeremydw/.local/share/virtualenvs/grow-cloud-run-ez-MnB7d/lib/python2.7/site-packages/grow/common/utils.py", line 163, in __call__
    value = self.func(*args, **kwargs)

File "/Users/jeremydw/.local/share/virtualenvs/grow-cloud-run-ez-MnB7d/lib/python2.7/site-packages/grow/documents/document.py", line 469, in get_serving_path
    'format in either the blueprint or the document.'.format(self))

Empty type: document throws a JS error

Saving with an empty "document" type after it is defined throws a JS error.

I have the following schema:

cta:
....
- type: document
  key: internal_doc
  label: Internal Link
- type: text
  key: url
  label: External URL

1. Save something in the document field.
   

2. Now go back and fully delete it and then try saving.
   

3. You'll notice it throws an error.

Add support for date/datetime fields + serialization round trip

• Currently, date values in YAML can be serialized as dates when the editor loads, but when the file is saved, the values are converted back to strings.
• We should have a date/datetime field support in schemas, and use the native YAML date/datetime format (i.e. date: 2020-01-27) when saving the file (versus saving a string).

Raw input format

The raw editor should be a monospace font

File information in editor

We need to show some information about the open file in the editor.

Add to the API response:

• Last X Git commits made against the file

Use a tab called "History" to show this information; it should replace the editor pane like "Raw" does. Eventually we can add features to revert to or view older features but for now it can be read only.

Monospace styling for data fields

For fields that are not translatable change the styling to be monospace font. This helps distinguish 'data' fields from normal copy fields.

Reload the editor when the user navigates within the iframe

• The editor on the left should correspond to the currently active page.
• When the user navigates to another page, the editor should update.
• Lower priority: if the form is dirty/changed, prevent the form from reloading without confirming in a dialog

Editor pane should be resizable and preview pane should be minimizable

• The user should be able to resize the editor pane.
• There should be a button that minimizes/hides the preview pane.

This is really useful when the volume of content is really high, or when the user doesn't need the live preview (i.e. "distraction-free content writing" a la Medium).

!g.static support

!g.static YAML constructors currently render as [object Object]

This should be fixed to work like !g.yaml

Can't toggle nested fields once they have been expanded

Need to be able to toggle nested fields once they're clicked and expanded. Currently, when you expand a nested field you can't collapse it until you "collapse all" with the button.

Ability to restrict the partials available to a specific collection.

Currently all partials are available to be added to any content. One improvement would be to allow for only filtered set of partials to be available based on the collection configuration.

For example:

fields:
- type: text
  key: $title
  label: Title

partials:
  filters:
  # Don't allow editing any partials that start with `hero`.
  - type: blacklist
    values:
    - hero*
  # Only allow editing specific partials.
  - type: whitelist
    values:
    - tout
    - gallery

Deep-linking to fields for sharing with clients

We often need to send links to clients to directly edit something. We should have the ability to deep link to specific fields, and when the deep link is sent - the field should be highlighted automatically.

At this moment, I'm not sure what the UX/UI for this should be, but I think the core feature can be built and we can tweak the styles for the link and the highlight later.

UI for adding a new document

Add the ability to add a new document through the UI.

Currently would need to restrict the ability to collections that have an editor configuration. Otherwise we don't have anything to guess the structure off of.

Alternatively, for collections that don't have a configuration it could open as a raw source editor instead of the normal editor.

Add image upload fields

• Image fields should integrate with the Google Dynamic Images service.
• Images should be directly uploaded to the backend once a user drops an image into the upload field.
• The backend should return (client side) the uploaded GCS path and the serving URL, and other metadata related to the image (so, there will be no need to maintain a separate objectcache).
• The editor should save the uploaded result normally into the file.

Firefox issue with editing nested text fields

Reported that when working in text fields on firefox on some text fields (ex: in partial) the cursor always goes to the beginning of the field instead of where clicked.

Adding a list length limit

Minor feature request but pretty low priority.

It's common to have a list of content in cases of things like, touts, carousels, tabs etc. Some layouts such as a 3up touts module may not expect more than 3 items in the list. It would be nice to be able to define a list length limit preventing editors from adding more than that number.

Might be like max?

  - type: list
    label: 3up Cards
    max: 3
    fields:
     ...

Add rich field types

• Simple Markdown editor for blog post content (higher priority).
• A more rich HTML editor for HTML fields (lower priority).

Better [object Object] handling

Sometimes a developer may place a nested YAML structure into a field that is configured to just be a text field. This shows as [object Object]

Ideally the editor has some flexibility for this data inconsistency, and autogenerates a field based on the YAML structure and lets the user modify that information without destroying/clobbering the underlying data.

Improved UI for nested image fields

We should:

• Set overflow: hidden
• Ideally display the thumbnails of the images here rather than the URLs

NOTE: These fields use AutoGuess

Saving stripes out yaml comments.

I think saving is stripping out comments.

For example:

$title: Hello
# Some comment
debug: true
# show_grid: true
partials:

turns into:

$title: Hello
debug: true
partials:

Ideally, the editor would retain these comments as they are useful for developer comments.

Handle schema errors more gracefully

Currently if the schema is malformed or if a list type is done incorrectly the fields fail to render outright. Ideally only the individual field (or list of fields) fails to render, and we show an error message in the UI indicating that there is a problem with the editor schema.

Prevent dragging during field focus

The editor drag / sorting is enabled when a field is in focus.

However, this appears to prevent the user from highlighting text within the text field making editing a bit more difficult.

Can we disable the dragging when any field is in focus and then reenable it on blur?

Improved AutoGuess for Google Image fields

If a field's value starts with https://lh3.googleusercontent.com/, it should AutoGuess into a Google Image field rather than a string field.

Autoguess: smart detection of field type

If a text field value is longer than 75 characters, use a textarea for the default field instead of an input type=text

Local persistent dirty value

When trying to write changes to the server, first save the updated data into the local storage. Once the save completes clear out the local storage backup. If the server has trouble saving and the user refreshes the page use the local version of the 'dirty' value as the form data so that the user can retry saving without losing changes.

YAML serialization readability

When YAML files make a round trip via the editor, the editor re-serializes the YAML content. This has a few negative side effects for the developer experience.

Specifically, keys are alphabetized.

- partial: hohoho
  title: xxxx
  cta: xxx

becomes

- cta: xxx
  partial: hohoho
  title: xxx

If possible, we should set a few rules in the YAML serializer to preserve some existing conventions we've followed.

• $-prefixed builtins should appear at the top of the file
• All top-level keys should appear before partials
• The partial key within the partial loop should be the first

Additional field schema properties

The schema should be able to:

• Provide a placeholder value that appears in the input field's placeholder
• Provide a help value that appears beneath the input field in the editor
• Specify whether a field is required (for now, this doesn't have to be validated on the server, just in the UI via a required field)
• Set a max length for text fields