Update image popover with new icons

lang/summernote-ko-KR.js

@@ -19,6 +19,7 @@
         resizeFull: '100% 크기로 변경',
         resizeHalf: '50% 크기로 변경',
         resizeQuarter: '25% 크기로 변경',
+        resizeNone: '원본 크기',
         floatLeft: '왼쪽 정렬',
         floatRight: '오른쪽 정렬',
         floatNone: '정렬하지 않음',

src/js/base/module/Buttons.js

@@ -617,56 +617,63 @@ export default class Buttons {
   }
 
   /**
-   * image : [
-   *   ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
-   *   ['float', ['floatLeft', 'floatRight', 'floatNone' ]],
-   *   ['remove', ['removeMedia']]
+   * image: [
+   *   ['imageResize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
+   *   ['float', ['floatLeft', 'floatRight', 'floatNone']],
+   *   ['remove', ['removeMedia']],
    * ],
    */
   addImagePopoverButtons() {
     // Image Size Buttons
-    this.context.memo('button.imageSize100', () => {
+    this.context.memo('button.resizeFull', () => {
       return this.button({
         contents: '<span class="note-fontsize-10">100%</span>',
         tooltip: this.lang.image.resizeFull,
         click: this.context.createInvokeHandler('editor.resize', '1'),
       }).render();
     });
-    this.context.memo('button.imageSize50', () => {
+    this.context.memo('button.resizeHalf', () => {
       return this.button({
         contents: '<span class="note-fontsize-10">50%</span>',
         tooltip: this.lang.image.resizeHalf,
         click: this.context.createInvokeHandler('editor.resize', '0.5'),
       }).render();
     });
-    this.context.memo('button.imageSize25', () => {
+    this.context.memo('button.resizeQuarter', () => {
       return this.button({
         contents: '<span class="note-fontsize-10">25%</span>',
         tooltip: this.lang.image.resizeQuarter,
         click: this.context.createInvokeHandler('editor.resize', '0.25'),
       }).render();
     });
+    this.context.memo('button.resizeNone', () => {
+      return this.button({
+        contents: this.ui.icon(this.options.icons.rollback),
+        tooltip: this.lang.image.resizeNone,
+        click: this.context.createInvokeHandler('editor.resize', '0'),
+      }).render();
+    });
 
     // Float Buttons
     this.context.memo('button.floatLeft', () => {
       return this.button({
-        contents: this.ui.icon(this.options.icons.alignLeft),
+        contents: this.ui.icon(this.options.icons.floatLeft),
         tooltip: this.lang.image.floatLeft,
         click: this.context.createInvokeHandler('editor.floatMe', 'left'),
       }).render();
     });
 
     this.context.memo('button.floatRight', () => {
       return this.button({
-        contents: this.ui.icon(this.options.icons.alignRight),
+        contents: this.ui.icon(this.options.icons.floatRight),
         tooltip: this.lang.image.floatRight,
         click: this.context.createInvokeHandler('editor.floatMe', 'right'),
       }).render();
     });
 
     this.context.memo('button.floatNone', () => {
       return this.button({
-        contents: this.ui.icon(this.options.icons.alignJustify),
+        contents: this.ui.icon(this.options.icons.rollback),
         tooltip: this.lang.image.floatNone,
         click: this.context.createInvokeHandler('editor.floatMe', 'none'),
       }).render();

src/js/base/module/Editor.js

@@ -304,7 +304,7 @@ export default class Editor {
       const $target = $(this.restoreTarget());
       $target.toggleClass('note-float-left', value === 'left');
       $target.toggleClass('note-float-right', value === 'right');
-      $target.css('float', value);
+      $target.css('float', (value === 'none' ? '' : value));
     });
 
     /**
@@ -313,10 +313,15 @@ export default class Editor {
      */
     this.resize = this.wrapCommand((value) => {
       const $target = $(this.restoreTarget());
-      $target.css({
-        width: value * 100 + '%',
-        height: '',
-      });
+      value = parseFloat(value);
+      if (value === 0) {
+        $target.css('width', '');
+      } else {
+        $target.css({
+          width: value * 100 + '%',
+          height: '',
+        });
+      }
     });
   }
 

src/js/base/settings.js

@@ -80,7 +80,7 @@ $.summernote = $.extend($.summernote, {
     popatmouse: true,
     popover: {
       image: [
-        ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
+        ['resize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
         ['float', ['floatLeft', 'floatRight', 'floatNone']],
         ['remove', ['removeMedia']],
       ],
@@ -288,6 +288,8 @@ $.summernote = $.extend($.summernote, {
       'close': 'note-icon-close',
       'code': 'note-icon-code',
       'eraser': 'note-icon-eraser',
+      'floatLeft': 'note-icon-float-left',
+      'floatRight': 'note-icon-float-right',
       'font': 'note-icon-font',
       'frame': 'note-icon-frame',
       'italic': 'note-icon-italic',
@@ -301,6 +303,7 @@ $.summernote = $.extend($.summernote, {
       'picture': 'note-icon-picture',
       'question': 'note-icon-question',
       'redo': 'note-icon-redo',
+      'rollback': 'note-icon-rollback',
       'square': 'note-icon-square',
       'strikethrough': 'note-icon-strikethrough',
       'subscript': 'note-icon-subscript',

src/js/base/summernote-en-US.js

@@ -21,12 +21,13 @@ $.extend($.summernote.lang, {
     image: {
       image: 'Picture',
       insert: 'Insert Image',
-      resizeFull: 'Resize Full',
-      resizeHalf: 'Resize Half',
-      resizeQuarter: 'Resize Quarter',
+      resizeFull: 'Resize full',
+      resizeHalf: 'Resize half',
+      resizeQuarter: 'Resize quarter',
+      resizeNone: 'Original size',
       floatLeft: 'Float Left',
       floatRight: 'Float Right',
-      floatNone: 'Float None',
+      floatNone: 'Remove float',
       shapeRounded: 'Shape: Rounded',
       shapeCircle: 'Shape: Circle',
       shapeThumbnail: 'Shape: Thumbnail',