[#155] 워크스페이스 캔버스, html 태그, css 클래스 블록 우클릭 시 발생하는 에러 해결, CSS 툴박스 inpu…

…t창 클릭 시 에러 발생 해결 (#241)

* 🐛 fix: 워크스페이스 캔버스에서 우클릭 시 발생하는 에러 발생 문제 해결

* 🐛 fix: html 태그 블록 우클릭 시 발생하는 에러 해결

* 🐛 fix: CSS 클래스 블록의 context 메뉴가 툴박스에서만 렌더링되도록 변경

* 🐛 fix: CSS블록 툴박스 input창 클릭 시 발생하는 에러 해결

* 🐛 fix: 빌드 오류 수정

apps/client/src/core/styleFlyout.ts

@@ -248,6 +248,14 @@ export default class StyleFlyout extends FixedFlyout {
           );
           this.setOutput(true);
           this.setStyle(`defaultBlockCss`);
+          this.showContextMenu = (e: PointerEvent) => {
+            const transfromX = this.getSvgRoot().transform.baseVal[0].matrix.e;
+            if (transfromX !== 8) {
+              return;
+            }
+            const menuOptions = this.generateContextMenu();
+            Blockly.ContextMenu.show(e, menuOptions, this.RTL);
+          };
         },
       };
     }

apps/client/src/core/tabbedToolbox.ts

@@ -328,6 +328,9 @@ export default class TabbedToolbox extends Blockly.Toolbox {
     }
     this.contentArea_.innerHTML = '';
   }
+
+  // eslint-disable-next-line no-unused-vars
+  protected onClick_(_e: PointerEvent): void {}
 }
 
 Blockly.Css.register(`

apps/client/src/shared/blockly/createCssClassBlock.ts

@@ -12,6 +12,14 @@ export const createCssClassBlock = (cssClassName: string) => {
         );
         this.setOutput(true);
         this.setStyle(`defaultBlockCss`);
+        this.showContextMenu = (e: PointerEvent) => {
+          const transfromX = this.getSvgRoot().transform.baseVal[0].matrix.e;
+          if (transfromX !== 8) {
+            return;
+          }
+          const menuOptions = this.generateContextMenu();
+          Blockly.ContextMenu.show(e, menuOptions, this.RTL);
+        };
       },
     };
   }

apps/client/src/shared/blockly/defineBlocks.ts

@@ -40,6 +40,7 @@ const defineBlockWithDefaults = (
         .appendField(new CustomTagFieldLabel(removePreviousTypeName(blockName)));
       this.appendStatementInput('children').appendField();
     }
+    this.showContextMenu = () => {};
   };
 
   Blockly.Blocks[blockName] = blockDefinition;

apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx

@@ -180,6 +180,8 @@ export const WorkspaceContent = () => {
       { passive: false }
     );
 
+    newWorkspace.showContextMenu = () => {};
+
     newWorkspace.addChangeListener(handleAutoConversion);
     newWorkspace.addChangeListener(handleBlockClick2);