ckb-editor-angular/fesm2022/ckb-editor-angular.mjs.map

🚀 Free Angular Rich Text Editor (WYSIWYG) - Alternative to CKEditor, TinyMCE, Quill | PDF/DOCX Export, Tables, Code Blocks, Emoji Support, Themes

{"version":3,"file":"ckb-editor-angular.mjs","sources":["../../../projects/text-editor-av/src/lib/text-editor-av.component.ts","../../../projects/text-editor-av/src/lib/text-editor-av.module.ts","../../../projects/text-editor-av/src/public-api.ts","../../../projects/text-editor-av/src/ckb-editor-angular.ts"],"sourcesContent":["import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter, OnDestroy, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';\r\nimport { CommonModule, isPlatformBrowser } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n// Install these packages: npm install jspdf html2canvas file-saver\r\ndeclare const require: any;\r\nlet jsPDF: any;\r\nlet html2canvas: any;\r\n\r\ninterface Theme {\r\n  name: string;\r\n  primary: string;\r\n  secondary: string;\r\n  background: string;\r\n  text: string;\r\n  border: string;\r\n}\r\n\r\ninterface Template {\r\n  name: string;\r\n  icon: string;\r\n  content: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'av-text-editor',\r\n  standalone: true,\r\n  imports: [CommonModule, FormsModule],\r\n  template: `\r\n    <div class=\"av-editor-container\" [attr.data-theme]=\"currentTheme.name\" [class.fullscreen]=\"isFullscreen\" [class.zen]=\"isZen\">\r\n      <!-- AI Assistant Panel -->\r\n      <div class=\"ai-assistant-panel\" *ngIf=\"showAIAssistant\" [@slideIn]>\r\n        <div class=\"ai-header\">\r\n          <h3>✨ AI Writing Assistant</h3>\r\n          <button (click)=\"showAIAssistant = false\" class=\"close-btn\">×</button>\r\n        </div>\r\n        <div class=\"ai-body\">\r\n          <div class=\"ai-actions\">\r\n            <button (click)=\"improveWriting()\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">🔧</span>\r\n              Improve Writing\r\n            </button>\r\n            <button (click)=\"fixGrammar()\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">📝</span>\r\n              Fix Grammar\r\n            </button>\r\n            <button (click)=\"makeShorter()\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">✂️</span>\r\n              Make Shorter\r\n            </button>\r\n            <button (click)=\"makeLonger()\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">📏</span>\r\n              Make Longer\r\n            </button>\r\n            <button (click)=\"changeTone('professional')\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">👔</span>\r\n              Professional\r\n            </button>\r\n            <button (click)=\"changeTone('casual')\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">😊</span>\r\n              Casual\r\n            </button>\r\n            <button (click)=\"translateText()\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">🌍</span>\r\n              Translate\r\n            </button>\r\n            <button (click)=\"summarize()\" class=\"ai-btn\">\r\n              <span class=\"ai-icon\">📋</span>\r\n              Summarize\r\n            </button>\r\n          </div>\r\n          <div class=\"ai-suggestions\" *ngIf=\"aiSuggestions\">\r\n            <h4>Suggestions:</h4>\r\n            <p>{{aiSuggestions}}</p>\r\n            <button (click)=\"applyAISuggestion()\" class=\"apply-btn\">Apply</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Templates Panel -->\r\n      <div class=\"templates-panel\" *ngIf=\"showTemplates\" [@slideIn]>\r\n        <div class=\"templates-header\">\r\n          <h3>📄 Document Templates</h3>\r\n          <button (click)=\"showTemplates = false\" class=\"close-btn\">×</button>\r\n        </div>\r\n        <div class=\"templates-grid\">\r\n          <div *ngFor=\"let template of templates\" \r\n               (click)=\"applyTemplate(template)\" \r\n               class=\"template-card\">\r\n            <div class=\"template-icon\">{{template.icon}}</div>\r\n            <div class=\"template-name\">{{template.name}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Text to SVG Panel -->\r\n      <div class=\"svg-panel\" *ngIf=\"showSVGPanel\" [@slideIn]>\r\n        <div class=\"svg-header\">\r\n          <h3>🎨 Text to SVG Art</h3>\r\n          <button (click)=\"showSVGPanel = false\" class=\"close-btn\">×</button>\r\n        </div>\r\n        <div class=\"svg-body\">\r\n          <input [(ngModel)]=\"svgText\" placeholder=\"Enter text for SVG\" class=\"svg-input\">\r\n          <div class=\"svg-options\">\r\n            <select [(ngModel)]=\"svgFont\" class=\"svg-select\">\r\n              <option value=\"Arial\">Arial</option>\r\n              <option value=\"Times New Roman\">Times New Roman</option>\r\n              <option value=\"Courier\">Courier</option>\r\n              <option value=\"Georgia\">Georgia</option>\r\n              <option value=\"Impact\">Impact</option>\r\n            </select>\r\n            <input type=\"number\" [(ngModel)]=\"svgFontSize\" placeholder=\"Size\" class=\"svg-size\">\r\n            <input type=\"color\" [(ngModel)]=\"svgColor\" class=\"svg-color\">\r\n          </div>\r\n          <div class=\"svg-styles\">\r\n            <button *ngFor=\"let style of svgStyles\" \r\n                    (click)=\"selectedSvgStyle = style\"\r\n                    [class.active]=\"selectedSvgStyle === style\"\r\n                    class=\"svg-style-btn\">\r\n              {{style.name}}\r\n            </button>\r\n          </div>\r\n          <div class=\"svg-preview\" [innerHTML]=\"svgPreview\"></div>\r\n          <button (click)=\"insertSVG()\" class=\"insert-svg-btn\">Insert SVG</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Version History Panel -->\r\n      <div class=\"history-panel\" *ngIf=\"showHistory\" [@slideIn]>\r\n        <div class=\"history-header\">\r\n          <h3>🕐 Version History</h3>\r\n          <button (click)=\"showHistory = false\" class=\"close-btn\">×</button>\r\n        </div>\r\n        <div class=\"history-list\">\r\n          <div *ngFor=\"let version of versionHistory\" \r\n               (click)=\"restoreVersion(version)\"\r\n               class=\"history-item\">\r\n            <div class=\"history-time\">{{version.timestamp | date:'short'}}</div>\r\n            <div class=\"history-preview\">{{version.preview}}</div>\r\n            <div class=\"history-stats\">{{version.wordCount}} words</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Toolbar -->\r\n      <div class=\"av-toolbar\" *ngIf=\"!hideToolbar\">\r\n        <!-- File Operations -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"newDocument()\" title=\"New Document (Ctrl+N)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\r\n              <polyline points=\"14 2 14 8 20 8\"></polyline>\r\n            </svg>\r\n          </button>\r\n          <button (click)=\"saveToLocal()\" title=\"Save (Ctrl+S)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path>\r\n              <polyline points=\"17 21 17 13 7 13 7 21\"></polyline>\r\n              <polyline points=\"7 3 7 8 15 8\"></polyline>\r\n            </svg>\r\n          </button>\r\n          <button (click)=\"fileInput.click()\" title=\"Open File\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M22 11v-6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6\"></path>\r\n              <path d=\"m19 15 3 3-3 3\"></path>\r\n              <path d=\"M11 15h11\"></path>\r\n            </svg>\r\n          </button>\r\n          <input #fileInput type=\"file\" accept=\".html,.htm,.md,.txt,.doc,.docx\" (change)=\"importFromFile($event)\" style=\"display: none;\" />\r\n          \r\n          <button (click)=\"showTemplates = true\" title=\"Templates\" class=\"toolbar-btn premium\">\r\n            📄\r\n          </button>\r\n          \r\n          <button (click)=\"showHistory = true\" title=\"Version History\" class=\"toolbar-btn premium\">\r\n            🕐\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Text Formatting -->\r\n        <div class=\"toolbar-group\">\r\n          <select (change)=\"formatBlock($event)\" class=\"toolbar-select\" title=\"Heading\">\r\n            <option value=\"\">Paragraph</option>\r\n            <option value=\"h1\">Heading 1</option>\r\n            <option value=\"h2\">Heading 2</option>\r\n            <option value=\"h3\">Heading 3</option>\r\n            <option value=\"h4\">Heading 4</option>\r\n            <option value=\"h5\">Heading 5</option>\r\n            <option value=\"h6\">Heading 6</option>\r\n          </select>\r\n          \r\n          <select (change)=\"changeFontFamily($event)\" class=\"toolbar-select\" title=\"Font\">\r\n            <option *ngFor=\"let f of fonts\" [value]=\"f\">{{f}}</option>\r\n          </select>\r\n          \r\n          <input type=\"number\" [(ngModel)]=\"fontSize\" (change)=\"changeFontSize()\" \r\n                 min=\"8\" max=\"72\" class=\"toolbar-input\" title=\"Font Size\">\r\n        </div>\r\n\r\n        <!-- Text Styles -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"execCommand('bold')\" [class.active]=\"isFormatActive('bold')\" \r\n                  title=\"Bold (Ctrl+B)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M7 4v16h6.5c2.5 0 4.5-2 4.5-4.5 0-1.5-.7-2.8-1.8-3.5.7-.7 1.3-1.7 1.3-3C17.5 6 15.5 4 12.5 4H7zm3 3h2.5c.8 0 1.5.7 1.5 1.5S13.3 10 12.5 10H10V7zm0 6h3c1.1 0 2 .9 2 2s-.9 2-2 2h-3v-4z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('italic')\" [class.active]=\"isFormatActive('italic')\" \r\n                  title=\"Italic (Ctrl+I)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M10 4h4l-3 12h3l-1 4H9l1-4H7l3-12z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('underline')\" [class.active]=\"isFormatActive('underline')\" \r\n                  title=\"Underline (Ctrl+U)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M12 17c3.3 0 6-2.7 6-6V3h-2.5v8c0 1.9-1.6 3.5-3.5 3.5S8.5 12.9 8.5 11V3H6v8c0 3.3 2.7 6 6 6zm-7 2v2h14v-2H5z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('strikeThrough')\" [class.active]=\"isFormatActive('strikeThrough')\" \r\n                  title=\"Strikethrough\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 12h18v2H3v-2zm3-6h12v2h-5v2H8V8h10V6H6v2zm4 10h4v2h-4v-2z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"toggleHighlight()\" [class.active]=\"highlightActive\" \r\n                  title=\"Highlight\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"m9 11-6 6v3h3l6-6m-6 0 3-3m-3 3 3 3m7-7 3-3m-3 3-3 3m3-3-3-3 4-4a1 1 0 0 1 1.4 0l1.6 1.6a1 1 0 0 1 0 1.4l-4 4Z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('superscript')\" title=\"Superscript\" class=\"toolbar-btn\">\r\n            X²\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('subscript')\" title=\"Subscript\" class=\"toolbar-btn\">\r\n            X₂\r\n          </button>\r\n          \r\n          <input type=\"color\" [(ngModel)]=\"textColor\" (change)=\"changeTextColor()\" \r\n                 title=\"Text Color\" class=\"color-picker\">\r\n          \r\n          <input type=\"color\" [(ngModel)]=\"bgColor\" (change)=\"changeBackgroundColor()\" \r\n                 title=\"Background Color\" class=\"color-picker\">\r\n        </div>\r\n\r\n        <!-- Alignment -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"execCommand('justifyLeft')\" title=\"Align Left\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 3h18v2H3V3zm0 4h12v2H3V7zm0 4h18v2H3v-2zm0 4h12v2H3v-2zm0 4h18v2H3v-2z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('justifyCenter')\" title=\"Center\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('justifyRight')\" title=\"Align Right\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 3h18v2H3V3zm6 4h12v2H9V7zm-6 4h18v2H3v-2zm6 4h12v2H9v-2zm-6 4h18v2H3v-2z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('justifyFull')\" title=\"Justify\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 3h18v2H3V3zm0 4h18v2H3V7zm0 4h18v2H3v-2zm0 4h18v2H3v-2zm0 4h18v2H3v-2z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('indent')\" title=\"Indent\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 4h18v2H3V4zm0 15h18v2H3v-2zm8-5h10v2H11v-2zm0-5h10v2H11V9zm-8 3.5L7 12l-4-3.5v7z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('outdent')\" title=\"Outdent\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 4h18v2H3V4zm0 15h18v2H3v-2zm8-5h10v2H11v-2zm0-5h10v2H11V9zm-4-.5L3 12l4 3.5v-7z\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Lists & Blocks -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"execCommand('insertOrderedList')\" title=\"Numbered List\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('insertUnorderedList')\" title=\"Bullet List\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z\"/>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"insertTodoList()\" title=\"Todo List\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <polyline points=\"9 11 12 14 22 4\"></polyline>\r\n              <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"></path>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"insertBlockquote()\" title=\"Quote\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Insert -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"insertLink()\" title=\"Insert Link\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\r\n              <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"insertImage()\" title=\"Insert Image\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n              <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\r\n              <polyline points=\"21 15 16 10 5 21\"></polyline>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"insertModernTable()\" title=\"Insert Table\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\r\n              <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"></line>\r\n              <line x1=\"3\" y1=\"15\" x2=\"21\" y2=\"15\"></line>\r\n              <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"></line>\r\n              <line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"insertCodeBlock()\" title=\"Code Block\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <polyline points=\"16 18 22 12 16 6\"></polyline>\r\n              <polyline points=\"8 6 2 12 8 18\"></polyline>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"insertMathEquation()\" title=\"Math Equation\" class=\"toolbar-btn premium\">\r\n            ∑\r\n          </button>\r\n          \r\n          <button (click)=\"insertChart()\" title=\"Insert Chart\" class=\"toolbar-btn premium\">\r\n            📊\r\n          </button>\r\n          \r\n          <button (click)=\"insertHorizontalRule()\" title=\"Horizontal Line\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M3 12h18v2H3z\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Tools -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"toggleEmojiPicker()\" title=\"Emoji\" class=\"toolbar-btn\">\r\n            😊\r\n          </button>\r\n          \r\n          <button (click)=\"showSVGPanel = true\" title=\"Text to SVG\" class=\"toolbar-btn premium\">\r\n            🎨\r\n          </button>\r\n          \r\n          <button (click)=\"showAIAssistant = true\" title=\"AI Assistant\" class=\"toolbar-btn premium\">\r\n            ✨\r\n          </button>\r\n          \r\n          <button (click)=\"openSearchPanel()\" title=\"Find & Replace (Ctrl+F)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <path d=\"m21 21-4.35-4.35\"></path>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"checkGrammar()\" title=\"Grammar Check\" class=\"toolbar-btn premium\">\r\n            ✓\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('undo')\" title=\"Undo (Ctrl+Z)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M3 7v6h6\"></path>\r\n              <path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"></path>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"execCommand('redo')\" title=\"Redo (Ctrl+Y)\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M21 7v6h-6\"></path>\r\n              <path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7\"></path>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Export -->\r\n        <div class=\"toolbar-group\">\r\n          <button (click)=\"exportAsHTML()\" title=\"Export as HTML\" class=\"toolbar-btn\">\r\n            HTML\r\n          </button>\r\n          \r\n          <button (click)=\"exportAsMarkdown()\" title=\"Export as Markdown\" class=\"toolbar-btn\">\r\n            MD\r\n          </button>\r\n          \r\n          <button (click)=\"exportAsPDF()\" title=\"Export as PDF\" class=\"toolbar-btn\">\r\n            PDF\r\n          </button>\r\n          \r\n          <button (click)=\"exportAsWord()\" title=\"Export as Word\" class=\"toolbar-btn premium\">\r\n            DOC\r\n          </button>\r\n          \r\n          <button (click)=\"print()\" title=\"Print\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <polyline points=\"6 9 6 2 18 2 18 9\"></polyline>\r\n              <path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"></path>\r\n              <rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"></rect>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- View -->\r\n        <div class=\"toolbar-group\">\r\n          <select [(ngModel)]=\"currentTheme\" (change)=\"applyTheme()\" class=\"toolbar-select\">\r\n            <option *ngFor=\"let theme of themes\" [ngValue]=\"theme\">{{theme.name}}</option>\r\n          </select>\r\n          \r\n          <button (click)=\"toggleFullscreen()\" title=\"Fullscreen\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"></path>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"toggleZen()\" title=\"Zen Mode\" class=\"toolbar-btn\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"></path>\r\n            </svg>\r\n          </button>\r\n          \r\n          <button (click)=\"toggleRTL()\" title=\"Toggle RTL/LTR\" class=\"toolbar-btn\" [class.active]=\"isRTL\">\r\n            ⇄\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Emoji Picker -->\r\n      <div class=\"emoji-picker-container\" *ngIf=\"showEmojiPicker\" [@slideIn]>\r\n        <div class=\"emoji-picker\">\r\n          <div class=\"emoji-search\">\r\n            <input [(ngModel)]=\"emojiSearch\" placeholder=\"Search emoji...\" class=\"emoji-search-input\">\r\n          </div>\r\n          <div class=\"emoji-categories\">\r\n            <button *ngFor=\"let category of emojiCategories\"\r\n                    (click)=\"selectedEmojiCategory = category\"\r\n                    [class.active]=\"selectedEmojiCategory === category\"\r\n                    class=\"emoji-category-btn\">\r\n              {{category.icon}}\r\n            </button>\r\n          </div>\r\n          <div class=\"emoji-grid\">\r\n            <span *ngFor=\"let emoji of getFilteredEmojis()\"\r\n                  (click)=\"insertEmoji(emoji)\"\r\n                  class=\"emoji-item\"\r\n                  [title]=\"emoji\">\r\n              {{emoji}}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Search Panel -->\r\n      <div class=\"search-panel\" *ngIf=\"showSearch\" [@slideIn]>\r\n        <div class=\"search-header\">\r\n          <h3>Find & Replace</h3>\r\n          <button (click)=\"closeSearchPanel()\" class=\"close-btn\">×</button>\r\n        </div>\r\n        <div class=\"search-body\">\r\n          <input [(ngModel)]=\"searchQuery\" placeholder=\"Find...\" class=\"search-input\" (keyup.enter)=\"findNext()\">\r\n          <input [(ngModel)]=\"replaceText\" placeholder=\"Replace with...\" class=\"search-input\">\r\n          <div class=\"search-actions\">\r\n            <button (click)=\"findNext()\" class=\"search-btn\">Find Next</button>\r\n            <button (click)=\"findPrevious()\" class=\"search-btn\">Find Previous</button>\r\n            <button (click)=\"replace()\" class=\"search-btn\">Replace</button>\r\n            <button (click)=\"replaceAll()\" class=\"search-btn primary\">Replace All</button>\r\n          </div>\r\n          <div class=\"search-options\">\r\n            <label>\r\n              <input type=\"checkbox\" [(ngModel)]=\"caseSensitive\"> Case sensitive\r\n            </label>\r\n            <label>\r\n              <input type=\"checkbox\" [(ngModel)]=\"wholeWord\"> Whole word\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Editor Area -->\r\n      <div class=\"av-editor-wrapper\">\r\n        <div class=\"line-numbers\" *ngIf=\"showLineNumbers\">\r\n          <div *ngFor=\"let line of lineNumbers\" class=\"line-number\">{{line}}</div>\r\n        </div>\r\n        \r\n        <div #editor\r\n             class=\"av-editor\"\r\n             contenteditable=\"true\"\r\n             [attr.spellcheck]=\"spellcheck\"\r\n             [attr.dir]=\"isRTL ? 'rtl' : 'ltr'\"\r\n             (input)=\"onContentChange()\"\r\n             (paste)=\"onPaste($event)\"\r\n             (keydown)=\"onKeyDown($event)\"\r\n             (keyup)=\"onKeyUp($event)\"\r\n             (mouseup)=\"onSelectionChange()\"\r\n             (drop)=\"onDrop($event)\"\r\n             (dragover)=\"onDragOver($event)\"\r\n             [style.min-height]=\"minHeight\"\r\n             [style.max-height]=\"maxHeight\"\r\n             [attr.placeholder]=\"placeholder\">\r\n        </div>\r\n        \r\n        <!-- Collaboration Sidebar -->\r\n        <div class=\"collaboration-sidebar\" *ngIf=\"showCollaboration\">\r\n          <div class=\"collab-header\">\r\n            <h4>Active Users</h4>\r\n          </div>\r\n          <div class=\"collab-users\">\r\n            <div class=\"user-avatar\" style=\"background: #3b82f6\">A</div>\r\n            <div class=\"user-avatar\" style=\"background: #10b981\">B</div>\r\n            <div class=\"user-avatar\" style=\"background: #f59e0b\">C</div>\r\n          </div>\r\n          <div class=\"collab-chat\">\r\n            <div class=\"chat-message\">\r\n              <strong>Alice:</strong> Great introduction!\r\n            </div>\r\n            <div class=\"chat-message\">\r\n              <strong>Bob:</strong> Added some references\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Grammar Errors Panel -->\r\n      <div class=\"grammar-panel\" *ngIf=\"grammarErrors.length > 0\">\r\n        <div class=\"grammar-header\">\r\n          <h4>Grammar & Spelling</h4>\r\n          <button (click)=\"grammarErrors = []\" class=\"close-btn\">×</button>\r\n        </div>\r\n        <div class=\"grammar-list\">\r\n          <div *ngFor=\"let error of grammarErrors\" class=\"grammar-error\">\r\n            <span class=\"error-text\">{{error.text}}</span>\r\n            <span class=\"error-suggestion\">→ {{error.suggestion}}</span>\r\n            <button (click)=\"fixGrammarError(error)\" class=\"fix-btn\">Fix</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Status Bar -->\r\n      <div class=\"av-statusbar\" *ngIf=\"showStatusBar\">\r\n        <div class=\"status-left\">\r\n          <span class=\"status-item\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M12 20h9\"></path>\r\n              <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"></path>\r\n            </svg>\r\n            {{wordCount}} words\r\n          </span>\r\n          <span class=\"status-item\">{{charCount}} characters</span>\r\n          <span class=\"status-item\">{{lineCount}} lines</span>\r\n          <span class=\"status-item\">~{{readingTime}} min read</span>\r\n          <span class=\"status-item premium\" *ngIf=\"showCollaboration\">\r\n            👥 3 users online\r\n          </span>\r\n        </div>\r\n        <div class=\"status-right\">\r\n          <span class=\"auto-save-status\" *ngIf=\"autoSaveEnabled && autoSaveStatus\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n            </svg>\r\n            {{autoSaveStatus}}\r\n          </span>\r\n          <span class=\"cursor-position\">Ln {{cursorLine}}, Col {{cursorColumn}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    :host {\r\n      display: block;\r\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n    }\r\n\r\n    * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .av-editor-container {\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 12px;\r\n      overflow: hidden;\r\n      background: var(--bg-color, #ffffff);\r\n      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\r\n      position: relative;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .av-editor-container:hover {\r\n      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    /* Toolbar */\r\n    .av-toolbar {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 50;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 8px;\r\n      padding: 12px;\r\n      background: var(--toolbar-bg, linear-gradient(180deg, #ffffff 0%, #f8fafc 100%));\r\n      border-bottom: 1px solid var(--border-color, #e2e8f0);\r\n      backdrop-filter: blur(8px);\r\n    }\r\n\r\n    .toolbar-group {\r\n      display: flex;\r\n      gap: 4px;\r\n      padding: 0 8px;\r\n      border-right: 1px solid var(--border-color, #e2e8f0);\r\n      align-items: center;\r\n    }\r\n\r\n    .toolbar-group:last-child {\r\n      border-right: none;\r\n    }\r\n\r\n    .toolbar-btn {\r\n      padding: 8px;\r\n      border: 1px solid transparent;\r\n      background: transparent;\r\n      cursor: pointer;\r\n      border-radius: 8px;\r\n      transition: all 0.2s ease;\r\n      font-size: 14px;\r\n      min-width: 36px;\r\n      height: 36px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--text-color, #475569);\r\n      position: relative;\r\n    }\r\n\r\n    .toolbar-btn:hover {\r\n      background: var(--hover-bg, rgba(59, 130, 246, 0.08));\r\n      border-color: var(--hover-border, rgba(59, 130, 246, 0.2));\r\n      transform: translateY(-1px);\r\n    }\r\n\r\n    .toolbar-btn:active {\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .toolbar-btn.active {\r\n      background: var(--active-bg, #3b82f6);\r\n      color: white;\r\n      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\r\n    }\r\n\r\n    .toolbar-btn.premium::after {\r\n      content: '⭐';\r\n      position: absolute;\r\n      top: -4px;\r\n      right: -4px;\r\n      font-size: 10px;\r\n    }\r\n\r\n    .toolbar-select, .toolbar-input {\r\n      padding: 6px 10px;\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 8px;\r\n      background: white;\r\n      cursor: pointer;\r\n      height: 36px;\r\n      font-size: 14px;\r\n      transition: all 0.2s ease;\r\n      color: var(--text-color, #475569);\r\n    }\r\n\r\n    .toolbar-select:hover, .toolbar-input:hover {\r\n      border-color: var(--hover-border, #3b82f6);\r\n    }\r\n\r\n    .toolbar-select:focus, .toolbar-input:focus {\r\n      outline: none;\r\n      border-color: var(--primary, #3b82f6);\r\n      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n    }\r\n\r\n    .toolbar-input {\r\n      width: 70px;\r\n    }\r\n\r\n    .color-picker {\r\n      width: 36px;\r\n      height: 36px;\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      padding: 2px;\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .color-picker:hover {\r\n      border-color: var(--hover-border, #3b82f6);\r\n      transform: translateY(-1px);\r\n    }\r\n\r\n    /* Editor */\r\n    .av-editor-wrapper {\r\n      display: flex;\r\n      position: relative;\r\n      background: var(--editor-bg, white);\r\n    }\r\n\r\n    .line-numbers {\r\n      width: 50px;\r\n      padding: 16px 8px;\r\n      background: var(--line-numbers-bg, #f8fafc);\r\n      border-right: 1px solid var(--border-color, #e2e8f0);\r\n      text-align: right;\r\n      color: #94a3b8;\r\n      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n      font-size: 12px;\r\n      line-height: 1.75;\r\n      user-select: none;\r\n    }\r\n\r\n    .av-editor {\r\n      flex: 1;\r\n      min-height: 400px;\r\n      padding: 20px 24px;\r\n      font-size: 16px;\r\n      line-height: 1.75;\r\n      outline: none;\r\n      overflow-y: auto;\r\n      word-wrap: break-word;\r\n      background: var(--editor-bg, white);\r\n      color: var(--text-color, #1e293b);\r\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n      direction: ltr;\r\n      unicode-bidi: plaintext;\r\n    }\r\n\r\n    .av-editor[dir=\"rtl\"] {\r\n      direction: rtl;\r\n      text-align: right;\r\n    }\r\n\r\n    .av-editor:empty:before {\r\n      content: attr(placeholder);\r\n      color: #94a3b8;\r\n      pointer-events: none;\r\n      position: absolute;\r\n    }\r\n\r\n    .av-editor:focus {\r\n      outline: none;\r\n    }\r\n\r\n    /* Modern Table Styles */\r\n    .av-editor .modern-table {\r\n      width: 100%;\r\n      margin: 20px 0;\r\n      border-radius: 12px;\r\n      overflow: hidden;\r\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n    }\r\n\r\n    .av-editor .modern-table thead {\r\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    }\r\n\r\n    .av-editor .modern-table th {\r\n      padding: 16px;\r\n      text-align: left;\r\n      font-weight: 600;\r\n      color: white;\r\n      font-size: 14px;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.5px;\r\n      border: none;\r\n    }\r\n\r\n    .av-editor .modern-table td {\r\n      padding: 14px 16px;\r\n      border: none;\r\n      border-bottom: 1px solid var(--border-color, #f1f5f9);\r\n      color: var(--text-color, #475569);\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .av-editor .modern-table tbody tr {\r\n      background: white;\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .av-editor .modern-table tbody tr:hover {\r\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.08) 100%);\r\n      transform: scale(1.01);\r\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .av-editor .modern-table tbody tr:last-child td {\r\n      border-bottom: none;\r\n    }\r\n\r\n    /* Editor Content Styles */\r\n    .av-editor h1 {\r\n      font-size: 2.5em;\r\n      font-weight: 700;\r\n      margin: 0.67em 0;\r\n      color: var(--heading-color, #0f172a);\r\n      position: relative;\r\n      padding-bottom: 0.3em;\r\n    }\r\n\r\n    .av-editor h1::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 60px;\r\n      height: 4px;\r\n      background: linear-gradient(90deg, #3b82f6, #8b5cf6);\r\n      border-radius: 2px;\r\n    }\r\n\r\n    .av-editor h2 {\r\n      font-size: 2em;\r\n      font-weight: 600;\r\n      margin: 0.75em 0;\r\n      color: var(--heading-color, #0f172a);\r\n    }\r\n\r\n    .av-editor h3 {\r\n      font-size: 1.5em;\r\n      font-weight: 600;\r\n      margin: 0.83em 0;\r\n      color: var(--heading-color, #0f172a);\r\n    }\r\n\r\n    .av-editor p {\r\n      margin: 1em 0;\r\n    }\r\n\r\n    .av-editor a {\r\n      color: #3b82f6;\r\n      text-decoration: none;\r\n      transition: all 0.2s ease;\r\n      position: relative;\r\n    }\r\n\r\n    .av-editor a:hover {\r\n      color: #2563eb;\r\n    }\r\n\r\n    .av-editor a::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: -2px;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 2px;\r\n      background: #3b82f6;\r\n      transform: scaleX(0);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .av-editor a:hover::after {\r\n      transform: scaleX(1);\r\n    }\r\n\r\n    .av-editor blockquote {\r\n      border-left: 4px solid #3b82f6;\r\n      padding: 16px 20px;\r\n      margin: 20px 0;\r\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);\r\n      border-radius: 0 8px 8px 0;\r\n      color: #64748b;\r\n      font-style: italic;\r\n      position: relative;\r\n    }\r\n\r\n    .av-editor blockquote::before {\r\n      content: '\"';\r\n      position: absolute;\r\n      top: -10px;\r\n      left: 10px;\r\n      font-size: 60px;\r\n      color: rgba(59, 130, 246, 0.2);\r\n      font-family: Georgia, serif;\r\n    }\r\n\r\n    .av-editor pre {\r\n      background: #1e293b;\r\n      color: #e2e8f0;\r\n      padding: 20px;\r\n      border-radius: 12px;\r\n      overflow-x: auto;\r\n      margin: 20px 0;\r\n      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n      font-size: 14px;\r\n      position: relative;\r\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .av-editor pre::before {\r\n      content: 'CODE';\r\n      position: absolute;\r\n      top: 8px;\r\n      right: 12px;\r\n      font-size: 10px;\r\n      color: #64748b;\r\n      font-weight: 600;\r\n      letter-spacing: 1px;\r\n    }\r\n\r\n    .av-editor code {\r\n      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\r\n      background: rgba(59, 130, 246, 0.1);\r\n      padding: 2px 6px;\r\n      border-radius: 4px;\r\n      color: #3b82f6;\r\n      font-size: 0.9em;\r\n    }\r\n\r\n    .av-editor ul,\r\n    .av-editor ol {\r\n      margin: 16px 0;\r\n      padding-left: 24px;\r\n    }\r\n\r\n    .av-editor li {\r\n      margin: 8px 0;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .av-editor hr {\r\n      border: none;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, #e2e8f0, transparent);\r\n      margin: 32px 0;\r\n    }\r\n\r\n    /* Math Equation */\r\n    .av-editor .math-equation {\r\n      display: inline-block;\r\n      padding: 8px 12px;\r\n      background: #f8fafc;\r\n      border: 1px solid #e2e8f0;\r\n      border-radius: 6px;\r\n      font-family: 'Times New Roman', serif;\r\n      font-style: italic;\r\n      color: #475569;\r\n      margin: 0 4px;\r\n    }\r\n\r\n    /* Chart Container */\r\n    .av-editor .chart-container {\r\n      margin: 20px 0;\r\n      padding: 20px;\r\n      background: #f8fafc;\r\n      border-radius: 12px;\r\n      text-align: center;\r\n    }\r\n\r\n    .av-editor .chart-placeholder {\r\n      display: inline-block;\r\n      padding: 40px;\r\n      background: white;\r\n      border: 2px dashed #cbd5e1;\r\n      border-radius: 8px;\r\n      color: #94a3b8;\r\n    }\r\n\r\n    /* AI Assistant Panel */\r\n    .ai-assistant-panel {\r\n      position: fixed;\r\n      top: 50%;\r\n      right: 20px;\r\n      transform: translateY(-50%);\r\n      z-index: 1000;\r\n      background: white;\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 12px;\r\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n      width: 320px;\r\n      max-height: 600px;\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .ai-header {\r\n      padding: 16px;\r\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n      color: white;\r\n      border-radius: 12px 12px 0 0;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .ai-header h3 {\r\n      margin: 0;\r\n      font-size: 16px;\r\n    }\r\n\r\n    .ai-body {\r\n      padding: 16px;\r\n      overflow-y: auto;\r\n    }\r\n\r\n    .ai-actions {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 8px;\r\n    }\r\n\r\n    .ai-btn {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 4px;\r\n      padding: 12px;\r\n      border: 1px solid #e2e8f0;\r\n      background: white;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      transition: all 0.2s ease;\r\n      font-size: 12px;\r\n    }\r\n\r\n    .ai-btn:hover {\r\n      background: #f8fafc;\r\n      border-color: #3b82f6;\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .ai-icon {\r\n      font-size: 24px;\r\n    }\r\n\r\n    .ai-suggestions {\r\n      margin-top: 16px;\r\n      padding: 12px;\r\n      background: #f8fafc;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .ai-suggestions h4 {\r\n      margin: 0 0 8px;\r\n      font-size: 14px;\r\n      color: #475569;\r\n    }\r\n\r\n    .ai-suggestions p {\r\n      margin: 8px 0;\r\n      font-size: 13px;\r\n      color: #64748b;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .apply-btn {\r\n      margin-top: 8px;\r\n      padding: 8px 16px;\r\n      background: #3b82f6;\r\n      color: white;\r\n      border: none;\r\n      border-radius: 6px;\r\n      cursor: pointer;\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .apply-btn:hover {\r\n      background: #2563eb;\r\n    }\r\n\r\n    /* Templates Panel */\r\n    .templates-panel {\r\n      position: fixed;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      z-index: 1000;\r\n      background: white;\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 12px;\r\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n      width: 600px;\r\n      max-height: 500px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .templates-header {\r\n      padding: 16px;\r\n      background: var(--toolbar-bg, #f8fafc);\r\n      border-bottom: 1px solid var(--border-color, #e2e8f0);\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .templates-header h3 {\r\n      margin: 0;\r\n      font-size: 18px;\r\n      color: var(--text-color, #1e293b);\r\n    }\r\n\r\n    .templates-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 16px;\r\n      padding: 20px;\r\n      overflow-y: auto;\r\n      max-height: 400px;\r\n    }\r\n\r\n    .template-card {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 20px;\r\n      border: 2px solid #e2e8f0;\r\n      border-radius: 12px;\r\n      cursor: pointer;\r\n      transition: all 0.2s ease;\r\n      text-align: center;\r\n    }\r\n\r\n    .template-card:hover {\r\n      border-color: #3b82f6;\r\n      background: #f0f9ff;\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    .template-icon {\r\n      font-size: 32px;\r\n    }\r\n\r\n    .template-name {\r\n      font-size: 14px;\r\n      font-weight: 500;\r\n      color: #475569;\r\n    }\r\n\r\n    /* SVG Panel */\r\n    .svg-panel {\r\n      position: fixed;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      z-index: 1000;\r\n      background: white;\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 12px;\r\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n      width: 500px;\r\n      max-height: 600px;\r\n    }\r\n\r\n    .svg-header {\r\n      padding: 16px;\r\n      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);\r\n      color: white;\r\n      border-radius: 12px 12px 0 0;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .svg-header h3 {\r\n      margin: 0;\r\n      font-size: 18px;\r\n    }\r\n\r\n    .svg-body {\r\n      padding: 20px;\r\n    }\r\n\r\n    .svg-input {\r\n      width: 100%;\r\n      padding: 12px;\r\n      border: 1px solid #e2e8f0;\r\n      border-radius: 8px;\r\n      margin-bottom: 16px;\r\n      font-size: 16px;\r\n    }\r\n\r\n    .svg-options {\r\n      display: flex;\r\n      gap: 8px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .svg-select {\r\n      flex: 1;\r\n      padding: 8px;\r\n      border: 1px solid #e2e8f0;\r\n      border-radius: 6px;\r\n    }\r\n\r\n    .svg-size {\r\n      width: 80px;\r\n      padding: 8px;\r\n      border: 1px solid #e2e8f0;\r\n      border-radius: 6px;\r\n    }\r\n\r\n    .svg-color {\r\n      width: 50px;\r\n      height: 36px;\r\n      border: 1px solid #e2e8f0;\r\n      border-radius: 6px;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .svg-styles {\r\n      display: flex;\r\n      gap: 8px;\r\n      margin-bottom: 16px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .svg-style-btn {\r\n      padding: 8px 16px;\r\n      border: 1px solid #e2e8f0;\r\n      background: white;\r\n      border-radius: 6px;\r\n      cursor: pointer;\r\n      transition: all 0.2s ease;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .svg-style-btn:hover {\r\n      background: #f8fafc;\r\n      border-color: #3b82f6;\r\n    }\r\n\r\n    .svg-style-btn.active {\r\n      background: #3b82f6;\r\n      color: white;\r\n      border-color: #3b82f6;\r\n    }\r\n\r\n    .svg-preview {\r\n      min-height: 100px;\r\n      padding: 20px;\r\n      background: #f8fafc;\r\n      border: 1px solid #e2e8f0;\r\n      border-radius: 8px;\r\n      margin-bottom: 16px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .insert-svg-btn {\r\n      width: 100%;\r\n      padding: 12px;\r\n      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);\r\n      color: white;\r\n      border: none;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n      font-size: 14px;\r\n      font-weight: 600;\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .insert-svg-btn:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);\r\n    }\r\n\r\n    /* Version History Panel */\r\n    .history-panel {\r\n      position: fixed;\r\n      top: 50%;\r\n      right: 20px;\r\n      transform: translateY(-50%);\r\n      z-index: 1000;\r\n      background: white;\r\n      border: 1px solid var(--border-color, #e2e8f0);\r\n      border-radius: 12px;\r\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n      width: 320px;\r\n      max-height: 500px;\r\n    }\r\n\r\n    .history-header {\r\n      padding: 16px;\r\n      background: var(--toolbar-bg, #f8fafc);\r\n      border-bottom: 1px solid var(--border-color, #e2e8f0);\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .history-header h3 {\r\n      margin: 0;\r\n      font-size: 16px;\r\n      color: var(--text-color, #1e293b);\r\n    }\r\n\r\n    .history-list {\r\n      max-height: 400px;\r\n      overflow-y: auto;\r\n    }\r\n\r\n    .history-item {\r\n      padding: 12px 16px;\r\n      border-bottom: 1px solid #f1f5f9;\r\n      cursor: pointer;\r\n      transition: all 0.2s ease;\r\n    }\r\n\r\n    .history-item:hover {\r\n      background: #f8fafc;\r\n    }\r\n\r\n    .history-time {\r\n      font-size: 12px;\r\n      color: #94a3b8;\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    .history-preview {\r\n      font-size: 13px;\r\n      color: #475569;\r\n      margin-bottom: 4px;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .history-stats {\r\n      font-size: 11px;\r\n      color: #cbd5e1;\r\n    }\r\n\r\n    /* Collaboration Sidebar */\r\n    .collaboration-sidebar {\r\n      width: 250px;\r\n      background: #f8fafc;\r\n      border-left: 1px solid var(--border-color, #e2e8f0);\r\n      padding: 16px;\r\n    }\r\n\r\n    .collab-header h4 {\r\n      margin: 0 0 12px;\r\n      font-size: 14px;\r\n      color: #475569;\r\n    }\r\n\r\n    .collab-users {\r\n      display: flex;\r\n      gap: 8px;\r\n      margin-