feat(editor): Add wysiwyg editor

ts_web/elements/wysiwyg/wysiwyg.styles.ts

@@ -282,4 +282,74 @@ export const wysiwygStyles = css`
     background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
     color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
   }
+
+  /* Drag and Drop Styles */
+  .block-wrapper {
+    position: relative;
+    transition: all 0.2s ease;
+  }
+
+  .drag-handle {
+    position: absolute;
+    left: -30px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    cursor: grab;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${cssManager.bdTheme('#999', '#666')};
+  }
+
+  .drag-handle::before {
+    content: "⋮⋮";
+    font-size: 12px;
+    letter-spacing: -2px;
+  }
+
+  .block-wrapper:hover .drag-handle {
+    opacity: 1;
+  }
+
+  .drag-handle:hover {
+    color: ${cssManager.bdTheme('#666', '#999')};
+  }
+
+  .drag-handle:active {
+    cursor: grabbing;
+  }
+
+  .block-wrapper.dragging {
+    opacity: 0.5;
+  }
+
+  .block-wrapper.drag-over-before::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    border-radius: 2px;
+  }
+
+  .block-wrapper.drag-over-after::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    border-radius: 2px;
+  }
+
+  .editor-content.dragging * {
+    user-select: none;
+  }
 `;