Create a Diamond shape with centered wrapping text inside

Question

I have struggled for some while to create with pure HTML/CSS a diamond element that contains editable text inside that conforms to the outer shape of the diamond. I have messed with transforms, and it always looked weird, and the text never followed the shape of the diamond.

Here is what I currently have:

body {
  background-color:gray;
}

.diamond-container{
  position:absolute;
  width: 214px;
  height: 214px;
  display: inline-block;
  z-index:1;
}

.diamond-left-textwrap {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%, 0 0);
  width: 50%;
  height: 100%;
  z-index: 2;
  position: relative;
}

.diamond-right-textwrap {
  float: right;
  shape-outside: polygon(0 0, 100% 50%, 0 100%, 100% 100%, 100% 0, 0 0);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 100% 100%, 100% 0, 0 0);
  width: 50%;
  height: 100%;
  z-index: 2;
  position: relative;
}

.diamond-shape {
  background-color:white;
  border: 6px solid black;
  transform: rotate(45deg) scale(0.715);
  position:absolute;
  z-index:0;
  width: 100%;
  height: 100%;
}

.text-container {
  height:100%;
  width:100%;
  position: relative;
  text-align:center;
}

<div class="diamond-container">
  <div class="diamond-left-textwrap"></div>
  <div class="diamond-right-textwrap"></div>
  <div class="diamond-shape"></div>
  <div class="text-container" contenteditable="true">
    Click To Edit
  </div>
</div>

As you can see, I want the text to always be vertically and horizontally centered in the diamond, as the text is edited it should maintain centering and also respect the diamond shape. If it overflows that is fine, as it is up to the user to make sure it doesn't run out.

The only real requirement here is that the parent container has to have an absolute position. The other requirement would be the actual displayed diamond shape needs to remain.

The left and write divs used for text wrapping were the only way I could come up with to keep the text to that shape. If you have a better method please show me.