How to make a contenteditable element inside button work in firefox?

I want to find a simple solution for this to work on firefox as it works on chrome, I think it may be something of the default action that the button does and prevents the action of the contenteditable to be done.

Here is the snippet that works with chrome but not on firefox with pure HTML, no css no js:

Tested and not working on:

firefox developer version 61.0b7 (64-bit)
firefox developer version 61.0b9 (64-bit)
firefox nightly version 62.0a1 (2018-05-14) (64-bit)
firefox nightly version 62.0a1 (2018-05-29) (64-bit)
Internet Explorer version 11.48.17134.0

I tested on chrome and edge and worked perfectly.

Code snippet here:

<button>
  <div contenteditable="true">
    This text can be edited by the user.
  </div>  
</button>

https://jsfiddle.net/8s3a3pak/1/

EDIT: The button can have as child any type of element, it can be an image, a div[editable or not], p[editable or not], h1, h2, h3... [editable or not]

If there is no solution, could you please provide the possible reasons or maybe a link to the issue or bugtracking about this.

Solution

I haven't found the solution (because firefox must fix it), but I found alternatives after reading the specs of contenteditabl html attribute.

Below you can see how it works, try copy and pasting an image on each and see how the image appends to the contenteditable element. Don't know which one should be the correct behavior.

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content -->
<h1>
  DIV is editable and child of BUTTON
</h1>
<p>(NOT WORKING ON FIREFOX)</p>
<button>
  <div contenteditable="true">
    This text can be edited by the user.
  </div>  
</button>

<hr>

<p>(Some are working well, others partially)</p>

<h1>
  DIV is child, BUTTON is editable
</h1>
<button contenteditable="true">
  <div>
    This text can be edited by the user.
  </div>
</button>

<h1>
  BUTTON is editable and child of DIV
</h1>
<div>
  <button contenteditable="true">
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV is editable, BUTTON is child
</h1>
<div contenteditable="true">
  <button >
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV and BUTTON (child) are editable
</h1>
<div contenteditable="true">
  <button contenteditable="true">
    This text can be edited by the user. 
  </button>
</div>

<h1>
  DIV(child) and BUTTON are editable
</h1>
<button contenteditable="true">
  <div contenteditable="true">
    This text can be edited by the user.
  </div>
</button>

https://jsfiddle.net/8s3a3pak/3/