feat: add remove icon asset for block toolbar buttons MTC-31342

mt-static/plugins/MTBlockEditor/src/Block/MTFile.tsx

@@ -13,6 +13,7 @@ import { useEditorContext } from "mt-block-editor-block/Context";
 import { edit as editIcon } from "mt-block-editor-block/icon";
 
 import fileIcon from "../img/icon/file.svg";
+import removeIcon from "../img/icon/remove.svg";
 import { waitFor } from "../util";
 import { addEditUpdateBlock } from "./edit";
 import { initModal, waitForInsertOptionsForm } from "./modal";
@@ -109,6 +110,19 @@ body { display: none }
     });
   }
 
+  function removeFile(): void {
+    const clearData: Partial<MTFile> = {
+      assetId: "",
+      assetUrl: "",
+      text: "",
+      files: undefined,
+    };
+
+    addEditUpdateBlock(editor, block, clearData);
+    Object.assign(block, clearData);
+    setBlock(Object.assign({}, block));
+  }
+
   if (block.showModal) {
     block.showModal = false;
     showModal();
@@ -149,6 +163,13 @@ body { display: none }
       {focus && (
         <BlockToolbar>
           <BlockToolbarButton icon={editIcon} label={window.trans("Edit")} onClick={showModal} />
+          {block.assetUrl && !modalActive && (
+            <BlockToolbarButton
+              icon={removeIcon}
+              label={window.trans("Remove")}
+              onClick={removeFile}
+            />
+          )}
         </BlockToolbar>
       )}
     </div>

mt-static/plugins/MTBlockEditor/src/Block/MTImage.tsx

@@ -20,10 +20,13 @@ import { edit as editIcon, link as linkIcon } from "mt-block-editor-block/icon";
 import i18n from "mt-block-editor-block/i18n";
 
 import imageIcon from "../img/icon/image.svg";
+import removeIcon from "../img/icon/remove.svg";
 import { waitFor } from "../util";
 import { addEditUpdateBlock } from "./edit";
 import { initModal, waitForInsertOptionsForm } from "./modal";
 
+const DEFAULT_LINK_TARGET = "_self";
+
 interface EditorProps {
   focus: boolean;
   block: MTImage;
@@ -276,6 +279,30 @@ const Editor: React.FC<EditorProps> = blockProperty(({ focus, block }) => {
     });
   }
 
+  function removeImage(): void {
+    const clearData: Partial<MTImage> = {
+      assetId: "",
+      assetUrl: "",
+      url: "",
+      imageWidth: "",
+      imageHeight: "",
+      alternativeText: "",
+      caption: "",
+      hasCaption: false,
+      linkToOriginal: false,
+      linkUrl: "",
+      linkTarget: DEFAULT_LINK_TARGET,
+      linkTitle: "",
+      alignment: "",
+      useThumbnail: false,
+      files: undefined,
+    };
+
+    addEditUpdateBlock(editor, block, clearData);
+    Object.assign(block, clearData);
+    setBlock(Object.assign({}, block));
+  }
+
   if (block.showModal) {
     block.showModal = false;
     showModal();
@@ -354,6 +381,13 @@ const Editor: React.FC<EditorProps> = blockProperty(({ focus, block }) => {
               label={window.trans("Insert Link")}
               onClick={() => setLinkDialogOpen(true)}
             />
+            {block.url && !modalActive && (
+              <BlockToolbarButton
+                icon={removeIcon}
+                label={window.trans("Remove")}
+                onClick={removeImage}
+              />
+            )}
           </BlockToolbar>
           <Dialog open={isLinkDialogOpen} onClose={() => setLinkDialogOpen(false)}>
             <DialogHeader>
@@ -506,7 +540,7 @@ class MTImage extends Block {
   public files?: File[];
   public linkToOriginal: boolean;
   public linkUrl: string;
-  public linkTarget = "_self";
+  public linkTarget = DEFAULT_LINK_TARGET;
   public linkTitle: string;
 
   public constructor(init?: Partial<MTImage>) {

plugins/MTBlockEditor/lib/MT/Plugin/MTBlockEditor/L10N/ja.pm

@@ -109,6 +109,7 @@ my $block_editor_plugin = eval { MT->component('BlockEditor') };
     'Invalid file format.'                                                            => 'ファイルのフォーマットが不正です。',
     'Are you sure you want to overwrite it?'                                          => '上書きしてもよろしいですか？',
     'This format does not support this web browser. Please switch to another format.' => '現在ご利用のウェブブラウザではこのフォーマットを利用することができません。編集する場合には別のフォーマットを選択してください。',
+    'Remove'                                                                          => '削除',
 
 	'Importing MTBlockEditor asset associations ... ( [_1] )' => 'ブロックエディタのデータとアセットの関連付けを復元しています...( [_1] )',