dragon-editor 3.0.2 → 3.1.0

package/dist/runtime/components/DragonEditorViewer.vue

@@ -1,21 +1,31 @@
 <template>
     <div class="dragon-editor-viewer">
         <template v-for="item in props.content">
-            <p v-if="item.type === 'text'" class="de-block de-text-block" v-html="item.textContent"></p>
+            <p v-if="item.type === 'text'" class="de-block de-text-block" :class="item.classList" v-html="item.textContent"></p>
 
             <template v-if="item.type === 'heading'">
-                <h1 v-if="item.level === 1" class="de-block de-heading-block" :data-level="item.level" v-html="item.textContent"></h1>
-                <h2 v-if="item.level === 2" class="de-block de-heading-block" :data-level="item.level" v-html="item.textContent"></h2>
-                <h3 v-if="item.level === 3" class="de-block de-heading-block" :data-level="item.level" v-html="item.textContent"></h3>
+                <h1 v-if="item.level === 1" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h1>
+                <h2 v-if="item.level === 2" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h2>
+                <h3 v-if="item.level === 3" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h3>
             </template>
 
             <ul v-if="item.type === 'ul'" class="de-block de-list-block">
-                <li v-for="li in item.child" class="de-item" v-html="li"></li>
+                <li v-for="li in item.child" class="de-item" :class="li.classList" v-html="li.textContent"></li>
             </ul>
 
             <ol v-if="item.type === 'ol'" class="de-block de-list-block" :type="item.pattern">
-                <li v-for="li in item.child" class="de-item" v-html="li"></li>
+                <li v-for="li in item.child" class="de-item" :class="li.classList" v-html="li.textContent"></li>
             </ol>
+
+            <div v-if="item.type === 'image'" class="de-block de-image-block" :class="item.classList">
+                <div class="de-image-area" :data-maxwidth="item.maxWidth">
+                    <img :src="item.src" alt="" class="de-img" :width="item.width" :height="item.height" loading="lazy" />
+                </div>
+
+                <p v-if="item.caption" class="de-caption">{{ item.caption }}</p>
+            </div>
+
+            <div v-if="item.type === 'custom'" class="de-block de-custom-block" :class="item.classList" v-html="item.textContent"></div>
         </template>
     </div>
 </template>
@@ -201,6 +211,285 @@ const props = defineProps<{
 .dragon-editor-viewer ol.de-list-block {
   list-style: decimal;
 }
+.dragon-editor-viewer .de-image-block {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.dragon-editor-viewer .de-image-block.de-align-left {
+  align-items: flex-start;
+}
+.dragon-editor-viewer .de-image-block.de-align-left .de-caption {
+  text-align: left;
+}
+.dragon-editor-viewer .de-image-block.de-align-right {
+  align-items: flex-end;
+}
+.dragon-editor-viewer .de-image-block.de-align-right .de-caption {
+  text-align: right;
+}
+.dragon-editor-viewer .de-image-block .de-image-area {
+  position: relative;
+  max-width: 25%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="25"] {
+  max-width: 25%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="26"] {
+  max-width: 26%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="27"] {
+  max-width: 27%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="28"] {
+  max-width: 28%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="29"] {
+  max-width: 29%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="30"] {
+  max-width: 30%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="31"] {
+  max-width: 31%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="32"] {
+  max-width: 32%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="33"] {
+  max-width: 33%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="34"] {
+  max-width: 34%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="35"] {
+  max-width: 35%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="36"] {
+  max-width: 36%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="37"] {
+  max-width: 37%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="38"] {
+  max-width: 38%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="39"] {
+  max-width: 39%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="40"] {
+  max-width: 40%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="41"] {
+  max-width: 41%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="42"] {
+  max-width: 42%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="43"] {
+  max-width: 43%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="44"] {
+  max-width: 44%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="45"] {
+  max-width: 45%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="46"] {
+  max-width: 46%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="47"] {
+  max-width: 47%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="48"] {
+  max-width: 48%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="49"] {
+  max-width: 49%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="50"] {
+  max-width: 50%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="51"] {
+  max-width: 51%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="52"] {
+  max-width: 52%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="53"] {
+  max-width: 53%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="54"] {
+  max-width: 54%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="55"] {
+  max-width: 55%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="56"] {
+  max-width: 56%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="57"] {
+  max-width: 57%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="58"] {
+  max-width: 58%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="59"] {
+  max-width: 59%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="60"] {
+  max-width: 60%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="61"] {
+  max-width: 61%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="62"] {
+  max-width: 62%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="63"] {
+  max-width: 63%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="64"] {
+  max-width: 64%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="65"] {
+  max-width: 65%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="66"] {
+  max-width: 66%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="67"] {
+  max-width: 67%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="68"] {
+  max-width: 68%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="69"] {
+  max-width: 69%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="70"] {
+  max-width: 70%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="71"] {
+  max-width: 71%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="72"] {
+  max-width: 72%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="73"] {
+  max-width: 73%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="74"] {
+  max-width: 74%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="75"] {
+  max-width: 75%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="76"] {
+  max-width: 76%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="77"] {
+  max-width: 77%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="78"] {
+  max-width: 78%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="79"] {
+  max-width: 79%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="80"] {
+  max-width: 80%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="81"] {
+  max-width: 81%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="82"] {
+  max-width: 82%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="83"] {
+  max-width: 83%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="84"] {
+  max-width: 84%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="85"] {
+  max-width: 85%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="86"] {
+  max-width: 86%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="87"] {
+  max-width: 87%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="88"] {
+  max-width: 88%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="89"] {
+  max-width: 89%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="90"] {
+  max-width: 90%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="91"] {
+  max-width: 91%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="92"] {
+  max-width: 92%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="93"] {
+  max-width: 93%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="94"] {
+  max-width: 94%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="95"] {
+  max-width: 95%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="96"] {
+  max-width: 96%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="97"] {
+  max-width: 97%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="98"] {
+  max-width: 98%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="99"] {
+  max-width: 99%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="100"] {
+  max-width: 100%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-btn {
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 100px;
+  background: #ccc;
+  border: 1px solid #333;
+  transform: translate(-50%, -50%);
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-btn.de-btn-left {
+  left: 0;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-btn.de-btn-right {
+  left: 100%;
+}
+.dragon-editor-viewer .de-image-block .de-caption {
+  width: 100%;
+  min-height: 1.6em;
+  color: #909090;
+  text-align: center;
+  outline: 0;
+}
 .dragon-editor-viewer .de-bold {
   font-weight: 700;
 }
@@ -225,4 +514,16 @@ const props = defineProps<{
   color: #ff0000;
   border-radius: 5px;
 }
+.dragon-editor-viewer .de-align-left {
+  text-align: left;
+}
+.dragon-editor-viewer .de-align-right {
+  text-align: right;
+}
+.dragon-editor-viewer .de-align-center {
+  text-align: center;
+}
+.dragon-editor-viewer .de-align-justify {
+  text-align: justify;
+}
 </style>

package/dist/runtime/scss/editor.css

@@ -163,6 +163,9 @@
 .dragon-editor .de-control-bar .de-menu.--lastchild {
   border-right: 0;
 }
+.dragon-editor .de-control-bar .de-menu .de-path.--red {
+  fill: #dd0000;
+}
 .dragon-editor .de-control-bar .de-block-menu-area {
   display: none;
   position: absolute;
@@ -235,6 +238,291 @@
 .dragon-editor ol.de-list-block {
   list-style: decimal;
 }
+.dragon-editor .de-image-block {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.dragon-editor .de-image-block.de-align-left {
+  align-items: flex-start;
+}
+.dragon-editor .de-image-block.de-align-left .de-caption {
+  text-align: left;
+}
+.dragon-editor .de-image-block.de-align-right {
+  align-items: flex-end;
+}
+.dragon-editor .de-image-block.de-align-right .de-caption {
+  text-align: right;
+}
+.dragon-editor .de-image-block .de-image-area {
+  position: relative;
+  max-width: 25%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="25"] {
+  max-width: 25%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="26"] {
+  max-width: 26%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="27"] {
+  max-width: 27%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="28"] {
+  max-width: 28%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="29"] {
+  max-width: 29%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="30"] {
+  max-width: 30%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="31"] {
+  max-width: 31%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="32"] {
+  max-width: 32%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="33"] {
+  max-width: 33%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="34"] {
+  max-width: 34%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="35"] {
+  max-width: 35%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="36"] {
+  max-width: 36%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="37"] {
+  max-width: 37%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="38"] {
+  max-width: 38%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="39"] {
+  max-width: 39%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="40"] {
+  max-width: 40%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="41"] {
+  max-width: 41%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="42"] {
+  max-width: 42%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="43"] {
+  max-width: 43%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="44"] {
+  max-width: 44%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="45"] {
+  max-width: 45%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="46"] {
+  max-width: 46%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="47"] {
+  max-width: 47%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="48"] {
+  max-width: 48%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="49"] {
+  max-width: 49%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="50"] {
+  max-width: 50%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="51"] {
+  max-width: 51%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="52"] {
+  max-width: 52%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="53"] {
+  max-width: 53%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="54"] {
+  max-width: 54%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="55"] {
+  max-width: 55%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="56"] {
+  max-width: 56%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="57"] {
+  max-width: 57%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="58"] {
+  max-width: 58%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="59"] {
+  max-width: 59%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="60"] {
+  max-width: 60%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="61"] {
+  max-width: 61%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="62"] {
+  max-width: 62%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="63"] {
+  max-width: 63%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="64"] {
+  max-width: 64%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="65"] {
+  max-width: 65%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="66"] {
+  max-width: 66%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="67"] {
+  max-width: 67%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="68"] {
+  max-width: 68%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="69"] {
+  max-width: 69%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="70"] {
+  max-width: 70%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="71"] {
+  max-width: 71%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="72"] {
+  max-width: 72%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="73"] {
+  max-width: 73%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="74"] {
+  max-width: 74%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="75"] {
+  max-width: 75%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="76"] {
+  max-width: 76%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="77"] {
+  max-width: 77%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="78"] {
+  max-width: 78%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="79"] {
+  max-width: 79%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="80"] {
+  max-width: 80%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="81"] {
+  max-width: 81%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="82"] {
+  max-width: 82%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="83"] {
+  max-width: 83%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="84"] {
+  max-width: 84%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="85"] {
+  max-width: 85%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="86"] {
+  max-width: 86%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="87"] {
+  max-width: 87%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="88"] {
+  max-width: 88%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="89"] {
+  max-width: 89%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="90"] {
+  max-width: 90%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="91"] {
+  max-width: 91%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="92"] {
+  max-width: 92%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="93"] {
+  max-width: 93%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="94"] {
+  max-width: 94%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="95"] {
+  max-width: 95%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="96"] {
+  max-width: 96%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="97"] {
+  max-width: 97%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="98"] {
+  max-width: 98%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="99"] {
+  max-width: 99%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="100"] {
+  max-width: 100%;
+}
+.dragon-editor .de-image-block .de-image-area .de-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn {
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 100px;
+  background: #ccc;
+  border: 1px solid #333;
+  transform: translate(-50%, -50%);
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn.de-btn-left {
+  left: 0;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn.de-btn-right {
+  left: 100%;
+}
+.dragon-editor .de-image-block .de-caption {
+  width: 100%;
+  min-height: 1.6em;
+  color: #909090;
+  text-align: center;
+  outline: 0;
+}
+.dragon-editor .de-image-block .de-caption:empty:hover::before, .dragon-editor .de-image-block .de-caption:empty:focus::before {
+  display: inline;
+  content: "Type a caption";
+  color: #ccc;
+  cursor: text;
+}
 .dragon-editor .de-bold {
   font-weight: 700;
 }
@@ -258,4 +546,16 @@
   background: #f1f1f1;
   color: #ff0000;
   border-radius: 5px;
+}
+.dragon-editor .de-align-left {
+  text-align: left;
+}
+.dragon-editor .de-align-right {
+  text-align: right;
+}
+.dragon-editor .de-align-center {
+  text-align: center;
+}
+.dragon-editor .de-align-justify {
+  text-align: justify;
 }