feat(image): ✨ enable update imgae display: float_left and float_right

src/components/ExtensionViews/ImageView.vue

@@ -62,8 +62,16 @@ import { EditorView } from 'prosemirror-view';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { resolveImg } from '@/utils/image';
 import { clamp } from '@/utils/shared';
+import { ImageDisplay } from '@/constants';
 import ImageBubbleMenu from '../MenuBubble/ImageBubbleMenu.vue';
 
+const IMAGE_DISPLAY_CLASS = {
+  inline: 'inline',
+  break_text: 'block',
+  float_left: 'float-left',
+  float_right: 'float-right',
+};
+
 const enum ResizeDirection {
   TOP_LEFT = 'tl',
   TOP_RIGHT = 'tr',
@@ -154,11 +162,15 @@ export default class ImageView extends Vue {
     return this.node.attrs.height;
   }
 
+  private get display (): ImageDisplay {
+    return this.node.attrs.display;
+  }
+
   private get imageViewClass () {
-    return {
-      'image-view': true,
-      'image-view--blocked': !this.node.attrs.inline,
-    };
+    return [
+      'image-view',
+      `image-view--${IMAGE_DISPLAY_CLASS[this.display]}`,
+    ];
   }
 
   private async created () {

src/components/MenuCommands/Image/EditImageCommandButton.vue

@@ -136,11 +136,8 @@ export default class EditImageCommandButton extends Mixins(i18nMixin) {
     let { width, height } = this.imageAttrs;
 
     // input converts it to string
-    // needs to be manually converted to number
-    // @ts-ignore
-    width = parseInt(width, 10);
-    // @ts-ignore
-    height = parseInt(height, 10);
+    width = parseInt(width as string, 10);
+    height = parseInt(height as string, 10);
 
     this.updateAttrs({
       alt: this.imageAttrs.alt,

src/components/MenuCommands/Image/ImageDisplayCommandButton.vue

@@ -7,21 +7,16 @@
   >
     <div class="el-tiptap-popper__menu">
       <div
-        :class="{ 'el-tiptap-popper__menu__item--active': inline }"
+        v-for="display in displayCollection"
+        :key="display"
+        :class="{
+          'el-tiptap-popper__menu__item--active': display === currDisplay,
+        }"
         class="el-tiptap-popper__menu__item"
         @mousedown="hidePopover"
-        @click="updateAttrs({ inline: true })"
+        @click="updateAttrs({ display })"
       >
-        <span>{{ t('editor.extensions.Image.buttons.display.inline') }}</span>
-      </div>
-
-      <div
-        :class="{ 'el-tiptap-popper__menu__item--active': !inline }"
-        class="el-tiptap-popper__menu__item"
-        @mousedown="hidePopover"
-        @click="updateAttrs({ inline: false })"
-      >
-        <span>{{ t('editor.extensions.Image.buttons.display.break_text') }}</span>
+        <span>{{ t(`editor.extensions.Image.buttons.display.${display}`) }}</span>
       </div>
     </div>
 
@@ -38,6 +33,7 @@ import { Component, Prop, Mixins } from 'vue-property-decorator';
 import { Popover } from 'element-ui';
 import { Node as ProsemirrorNode } from 'prosemirror-model';
 import i18nMixin from '@/mixins/i18nMixin';
+import { ImageDisplay } from '@/constants';
 import CommandButton from '../CommandButton.vue';
 
 @Component({
@@ -61,8 +57,15 @@ export default class ImageDisplayCommandButton extends Mixins(i18nMixin) {
 
   popoverVisible = false;
 
-  private get inline () {
-    return this.node.attrs.inline;
+  displayCollection = [
+    ImageDisplay.INLINE,
+    ImageDisplay.BREAK_TEXT,
+    ImageDisplay.FLOAT_LEFT,
+    ImageDisplay.FLOAT_RIGHT,
+  ];
+
+  private get currDisplay () {
+    return this.node.attrs.display;
   }
 
   private hidePopover () {

src/constants.ts

@@ -22,3 +22,10 @@ export const enum EVENTS {
 };
 
 export const PREVIEW_WINDOW_WIDTH: string = '80vw';
+
+export const enum ImageDisplay {
+  INLINE = 'inline',
+  BREAK_TEXT = 'break_text',
+  FLOAT_LEFT = 'float_left',
+  FLOAT_RIGHT = 'float_right',
+};

src/extensions/image.ts

@@ -5,13 +5,24 @@ import { MenuData } from 'tiptap';
 import { MenuBtnView } from '@/../types';
 import InsertImageCommandButton from '@/components/MenuCommands/Image/InsertImageCommandButton.vue';
 import ImageView from '@/components/ExtensionViews/ImageView.vue';
+import { ImageDisplay } from '@/constants';
 
 const IMAGE_URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;
 
 // @ts-ignore
 function getAttrs (dom: HTMLElement): { [key: string]: any } {
+  const { cssFloat, display } = dom.style;
   let { width, height } = dom.style;
 
+  let dp = 'inline';
+  if (cssFloat === 'left' && !display) {
+    dp = 'left';
+  } else if (cssFloat === 'right' && !display) {
+    dp = 'right';
+  } else if (!cssFloat && display === 'block') {
+    dp = 'block';
+  }
+
   width = width || dom.getAttribute('width') || null;
   height = height || dom.getAttribute('height') || null;
 
@@ -21,6 +32,7 @@ function getAttrs (dom: HTMLElement): { [key: string]: any } {
     alt: dom.getAttribute('alt') || '',
     width: width == null ? null : parseInt(width, 10),
     height: height == null ? null : parseInt(height, 10),
+    display: dp,
   };
 }
 
@@ -51,8 +63,8 @@ export default class Image extends TiptapImage implements MenuBtnView {
         height: {
           default: null,
         },
-        inline: {
-          default: true,
+        display: {
+          default: ImageDisplay.INLINE,
         },
       },
       group: 'inline',

src/i18n/en/index.ts

@@ -69,6 +69,8 @@ export default {
             tooltip: 'Display',
             inline: 'Inline',
             break_text: 'Break Text',
+            float_left: 'Float Left',
+            float_right: 'Float Right',
           },
         },
         control: {

src/i18n/pl/index.ts

@@ -69,6 +69,8 @@ export default {
             tooltip: 'Pokaz',
             inline: 'Inline',
             break_text: 'Podziel tekst',
+            float_left: 'Przesuń w lewo',
+            float_right: 'Płyń w prawo',
           },
         },
         control: {

src/i18n/ru/index.ts

@@ -69,6 +69,8 @@ export default {
             tooltip: 'дисплей',
             inline: 'Инлайн',
             break_text: 'Разрыв текста',
+            float_left: 'Поплавок влево',
+            float_right: 'Поплавок справа',
           },
         },
         control: {

src/i18n/zh/index.ts

@@ -69,6 +69,8 @@ export default {
             tooltip: '布局',
             inline: '内联',
             break_text: '断行',
+            float_left: '左浮动',
+            float_right: '右浮动',
           },
         },
         control: {

src/styles/editor.scss

@@ -198,15 +198,27 @@
 
       display: inline-block;
       line-height: 0;
-      margin: 10px;
+      margin: 12px 0;
       max-width: 100%;
       user-select: none;
       vertical-align: baseline;
 
-      &--blocked {
+      &--block {
         display: block;
       }
 
+      &--float-left {
+        float: left;
+        margin-left: 0;
+        margin-right: 12px;
+      }
+
+      &--float-right {
+        float: right;
+        margin-left: 12px;
+        margin-right: 0;
+      }
+
       &__body {
         clear: both;
         display: inline-block;