Skip to content

Add preview.visualEditing to docs and to site's config #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
martinjagodic wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add preview.visualEditing to docs and to site's config #138

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6cc2a82
Add preview.visualEditing to docs and to site's config
martinjagodic Oct 8, 2025
e74da55
Merge branch 'main' into visual-editing
yanthomasdev Feb 5, 2026
f8201b0
Apply suggestions from code review
martinjagodic Feb 6, 2026
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
8 changes: 5 additions & 3 deletions content/docs/configuration-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,18 +398,20 @@ fields:

### `editor`

This setting changes options for the editor view of a collection or a file inside a files collection. It has one option so far:
This setting changes options for the editor view of a collection or a file inside a files collection. It has these options:

* `preview`: set to `false` to disable the preview pane for this collection or file; defaults to `true`
Comment thread
martinjagodic marked this conversation as resolved.
Outdated
* `visualEditing`: set to `true` to allow users to click directly on content in the preview pane to edit fields. This works for preview widgets as well as for custom full-page preview templates. This is an alternative to scroll sync, providing a more direct way to interact with content. When enabled, scroll sync is automatically disabled to prevent interference. <span class="version-tag">3.6</span>

**Example:**

```yaml
editor:
preview: false
preview: true # default is true
visualEditing: true # default is false
```

**Note**: Setting this as a top level configuration will set the default for all collections
**Note**: Setting `preview` as a top level configuration will set the default for all collections.

### `summary`

Expand Down
5 changes: 2 additions & 3 deletions static/admin/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,8 @@ backend:
branch: main

local_backend: true

site_url: https://www.decapcms.org

publish_mode: editorial_workflow

media_folder: static/img
public_folder: /img

Expand All @@ -20,6 +17,8 @@ docs_collection: &docs_collection
summary: '{{weight}} - {{title}}'
preview_path: 'docs/{{slug}}'
sortable_fields: ['weight', 'title', 'group']
preview:
visualEditing: true
fields:
- label: Section
name: group
Expand Down
10 changes: 4 additions & 6 deletions static/admin/editor-previews/docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ CMS.registerPreviewStyle('/styles/style.min.css')

const DocsPreview = createClass({
render: function () {
const { entry, widgetFor } = this.props
const data = entry.getIn(['data']).toJS()
const { title } = data
const { widgetFor } = this.props
return h('div', { className: 'container size-lg' },
h('div', { className: 'page' },
h('h1', {}, title),
h('h1', {}, widgetFor('title')),
h('div', { className: 'markdown' },
h('div', {}, widgetFor('body'))
)
Expand All @@ -22,10 +20,10 @@ const BlogPreview = createClass({
render: function () {
const { entry, widgetFor } = this.props
const data = entry.getIn(['data']).toJS()
const { title, author, date } = data
const { author, date } = data
return h('div', { className: 'container size-sm' },
h('div', { className: 'page' },
h('h1', {}, title),
h('h1', {}, widgetFor('title')),
h('p', { className: 'meta-info' },
`By ${author} on ${date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}`
),
Expand Down