Front-end edit of textarea images in child page

[MarkE]

I have a page ('host page') with a Page Table field. The host page template is designed to render content from it and its children in the page table - a fairly standard set-up. The children have a text area field called motif_body (which I currently have set as TinyMCE, but the situation is the same with CKEditor). I am using front-end editing of this text area field, like this (in Latte):

    <edit page="{$page->id}" field="motif_body">
    {$page->motif_body|noescape}
    </edit>

where $page is the child page in this case. That works correctly and the child textarea field is made available for in-line editing in the front end. The problem arises when embedding images in the field. The child page also has an images field but, if 'insert image' is chosen, then the 'select image' modal shows the images on the host page, not the child page. (In my case it shows no images as the host page does not have an images field). You then have to navigate all the way through the page tree to find the child page and add the images from there. Once images are embedded in the textarea field then they are editable perfectly normally.

It seems wrong to me that editing a field in the child page should look to the host page for images rather than the page the holds the field you are editing. I assume that this is because the 'image select field' in the modal is defaulting to the page which is open in the page editor rather than the page which holds the field being edited. Is this the intentional behaviour and, if so, why?

In any case, is there a way of making the image select field pick up the 'right' page?

[MarkE]

On 1/22/2024 at 10:03 AM, MarkE said:

In any case, is there a way of making the image select field pick up the 'right' page?

I have done this by hacking PageFrontEdit.module as follows.

There are two parts to the hack. Part 1 puts the id of the page being edited with the inline editor into the (hidden) tag with #Inputfield_id, rather putting the host page id there (this is what is used in the js to pick up the page id). Part 2 then partially suppresses the error that arises because the page being edited is not the host page (there may be a more elegant and safer way of doing this).

I'd be grateful for any comments (esp from @bernhard) as to whether

• you think some change to this effect should be made
• you have any problems with the suggested changes or have a better idea
• I should raise an issue for this?

Part 1

Line 429 if($hasEditTags) $numEditable += $this->populateEditTags($page, $out); - replace by

		$editPage = $page;
		if($hasEditTags) {
			$editTags = $this->populateEditTags($page, $out);
			$numEditable += $editTags['num'];
			$editPage = $editTags['page'];
		}

then in lines 442 & 444 replace $this->renderAssets() by $this->renderAssets($editPage)

In populateEditTags() change the return PHPDoc comment to @return array [Number of tags populated, page being edited], change the return in line 510 to 

	if(!preg_match_all('!<' . $tag . '([^>]+)>(.*?)</' . $tag . '>!is', $out, $matches)) return ['num' => 0, 'page' => $page];

and change the return at the end of the method to

return ['num' => $numEditable, 'page' => $p];

In renderAssets(), change the top to 

	public function renderAssets($editPage = null) {
		if(!$editPage) $editPage = $this->page;

and add the @param comment @param null|Page $editPage

Then change line 853      "<input type='hidden' id='Inputfield_id' class='PageFrontEdit' value='{$this->page->id}' />" . // for CKE plugins to

			"<input type='hidden' id='Inputfield_id' class='PageFrontEdit' value='{$editPage->id}' />" . // for CKE plugins

Part 2

In inlineSaveEdits() change lines 1077-8 from

		} else if($pageID != $this->page->id) {
			$data['error'] = "Edited page does not match current page ID ($pageID != {$this->page->id})";

to 

		} else if($pageID != $this->page->id && !$this->pages()->find("id=$pageID, has_parent={$this->page}")) {
			$data['error'] = "Edited page does not match current page ID (or is not a child) ($pageID != {$this->page->id})";

 

[bernhard]

I don't have much time, but do you think this is related? https://github.com/processwire/processwire-issues/issues/1706

[MarkE]

57 minutes ago, bernhard said:

but do you think this is related?

Absolutely! I guessed you had come across something similar. So I did an analagous edit to pwimage.js (but not specifically aimed at a repeater - the editable item might be an ordinary page, in my case in a page table). That saves having to mess with PageFrontEdit.module and is a lot simpler. I need to look more closely at the rest of the issue commentary to see what applies...