apostrophecms / apostrophecms/apostrophe

3.x Areas render .apos-area div when not in the editor mode

Open
#3,186 4 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
4.6k
Forks
650
Avg merge
19h 21m
Merged PRs (30d)
23

Description

## The problem to solve

As of now areas have this piece of code in their view file:

```


```
Because this div is not wrapped in, say `{%- if data.canEdit -%}`, it renders even when you are not editing which can break certain ui frameworks, i.e. if their styling rules rely on the certain level of nesting.

## Proposed solution

The only solution I can think of right now is to change the code to something like below:

```
{%- if data.canEdit -%}


{%- endif -%}
```
This would allow areas to function in the editor and at the same time prevent the div from rendering when you are not editing.

Contributor guide

Open the contributing guide

Research direction

Search the area view for the `apos-area` markup and read how `data.canEdit` controls the editor attributes. Verify the rendered output in both editor and non-editor modes, ensuring the wrapper is absent outside editing while editor behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.