Improve Wysiwyg editor

2025-06-24 08:19:53 +00:00
parent e4a042907a
commit 169f74aa2e
8 changed files with 982 additions and 27 deletions
--- a/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts
@@ -0,0 +1,173 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import { DeesModal } from '../dees-modal.js';
+import { type IBlock } from './wysiwyg.types.js';
+
+export class WysiwygModalManager {
+  /**
+   * Shows language selection modal for code blocks
+   */
+  static async showLanguageSelectionModal(): Promise<string | null> {
+    return new Promise((resolve) => {
+      let selectedLanguage: string | null = null;
+      
+      DeesModal.createAndShow({
+        heading: 'Select Programming Language',
+        content: html`
+          <style>
+            .language-grid {
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              gap: 8px;
+              padding: 16px;
+            }
+            .language-button {
+              padding: 12px;
+              background: var(--dees-color-box);
+              border: 1px solid var(--dees-color-line-bright);
+              border-radius: 4px;
+              cursor: pointer;
+              text-align: center;
+              transition: all 0.2s;
+            }
+            .language-button:hover {
+              background: var(--dees-color-box-highlight);
+              border-color: var(--dees-color-primary);
+            }
+          </style>
+          <div class="language-grid">
+            ${this.getLanguages().map(lang => html`
+              <div class="language-button" @click="${(e: MouseEvent) => {
+                selectedLanguage = lang.toLowerCase();
+                const modal = (e.target as HTMLElement).closest('dees-modal');
+                if (modal) {
+                  const okButton = modal.shadowRoot?.querySelector('.bottomButton.ok') as HTMLElement;
+                  if (okButton) okButton.click();
+                }
+              }}">${lang}</div>
+            `)}
+          </div>
+        `,
+        menuOptions: [
+          {
+            name: 'Cancel',
+            action: async (modal) => {
+              modal.destroy();
+              resolve(null);
+            }
+          },
+          {
+            name: 'OK',
+            action: async (modal) => {
+              modal.destroy();
+              resolve(selectedLanguage);
+            }
+          }
+        ]
+      });
+    });
+  }
+
+  /**
+   * Shows block settings modal
+   */
+  static async showBlockSettingsModal(
+    block: IBlock, 
+    onUpdate: (block: IBlock) => void
+  ): Promise<void> {
+    let content: TemplateResult;
+    
+    if (block.type === 'code') {
+      content = this.getCodeBlockSettings(block, onUpdate);
+    } else {
+      content = html`<div style="padding: 16px;">No settings available for this block type.</div>`;
+    }
+    
+    DeesModal.createAndShow({
+      heading: 'Block Settings',
+      content,
+      menuOptions: [
+        {
+          name: 'Close',
+          action: async (modal) => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+  }
+
+  /**
+   * Gets code block settings content
+   */
+  private static getCodeBlockSettings(
+    block: IBlock, 
+    onUpdate: (block: IBlock) => void
+  ): TemplateResult {
+    const currentLanguage = block.metadata?.language || 'plain text';
+    
+    return html`
+      <style>
+        .settings-section {
+          margin-bottom: 16px;
+        }
+        .settings-label {
+          font-weight: 500;
+          margin-bottom: 8px;
+        }
+        .language-grid {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 8px;
+        }
+        .language-button {
+          padding: 8px;
+          background: var(--dees-color-box);
+          border: 1px solid var(--dees-color-line-bright);
+          border-radius: 4px;
+          cursor: pointer;
+          text-align: center;
+          transition: all 0.2s;
+        }
+        .language-button:hover {
+          background: var(--dees-color-box-highlight);
+          border-color: var(--dees-color-primary);
+        }
+        .language-button.selected {
+          background: var(--dees-color-primary);
+          color: white;
+        }
+      </style>
+      <div class="settings-section">
+        <div class="settings-label">Programming Language</div>
+        <div class="language-grid">
+          ${this.getLanguages().map(lang => html`
+            <div class="language-button ${currentLanguage === lang.toLowerCase() ? 'selected' : ''}" 
+              @click="${(e: MouseEvent) => {
+                if (!block.metadata) block.metadata = {};
+                block.metadata.language = lang.toLowerCase();
+                onUpdate(block);
+                
+                // Close modal
+                const modal = (e.target as HTMLElement).closest('dees-modal');
+                if (modal) {
+                  const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
+                  if (closeButton) closeButton.click();
+                }
+              }}">${lang}</div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Gets available programming languages
+   */
+  private static getLanguages(): string[] {
+    return [
+      'JavaScript', 'TypeScript', 'Python', 'Java', 
+      'C++', 'C#', 'Go', 'Rust', 'HTML', 'CSS', 
+      'SQL', 'Shell', 'JSON', 'YAML', 'Markdown', 'Plain Text'
+    ];
+  }
+}