feat(wysiwyg): Add language selection for code blocks, block settings menu, fix cursor navigation, and update demo to use dees-panel

- Added modal to select programming language when creating code blocks
- Added settings button (3 dots) on each block for configuration
- Fixed cursor not jumping to new block after pressing Enter
- Special handling for code blocks: Enter creates new line, Shift+Enter creates new block
- Display language indicator on code blocks
- Updated demo to use dees-panel instead of demo-section divs
- Added language selection in block settings modal for existing code blocks

ts_web/elements/wysiwyg/wysiwyg.styles.ts

@@ -153,16 +153,36 @@ export const wysiwygStyles = css`
     font-style: italic;
   }
 
+  .code-block-container {
+    position: relative;
+    margin: 20px 0;
+  }
+
+  .code-language {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
+    color: ${cssManager.bdTheme('#586069', '#8b949e')};
+    padding: 4px 12px;
+    font-size: 12px;
+    border-radius: 0 6px 0 6px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    text-transform: lowercase;
+    z-index: 1;
+  }
+
   .block.code {
     background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
     border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
     border-radius: 6px;
     padding: 16px 20px;
+    padding-top: 32px; /* Make room for language indicator */
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 14px;
     line-height: 1.5;
     white-space: pre-wrap;
-    color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
+    color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
     overflow-x: auto;
   }
 
@@ -394,6 +414,37 @@ export const wysiwygStyles = css`
     user-select: none;
   }
 
+  /* Block Settings Button */
+  .block-settings {
+    position: absolute;
+    right: -40px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${cssManager.bdTheme('#999', '#666')};
+    border-radius: 4px;
+  }
+
+  .block-wrapper:hover .block-settings {
+    opacity: 1;
+  }
+
+  .block-settings:hover {
+    color: ${cssManager.bdTheme('#666', '#999')};
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+  }
+
+  .block-settings:active {
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+  }
+
   /* Text Selection Styles */
   .block ::selection {
     background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.3)', 'rgba(77, 148, 255, 0.3)')};