@onetype/framework 2.0.26 → 2.0.27

package/lib/items/transforms/codemirror/codemirror.js

@@ -1,231 +1,228 @@
-onetype.AddonReady('transforms', (transforms) =>
-{
-    transforms.ItemAdd({
-        id: 'codemirror',
-        icon: 'code',
-        name: 'Code Mirror',
-        description: 'Advanced code editor with syntax highlighting. Supports multiple languages and themes.',
-        js: [
-            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js',
-           
-        ],
-        css: [
-            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css',
-            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css',
-            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css',
-            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material.min.css'
-        ],
-        config: {
-            'value': ['string', '// Welcome to CodeMirror\nfunction hello() {\n    console.log("Hello, World!");\n}\n\nhello();'],
-            'mode': ['string', 'javascript'],
-            'theme': ['string', 'monokai'],
-            'height': ['number', 400],
-            'line-numbers': ['boolean', true],
-            'line-wrapping': ['boolean', false],
-            'tab-size': ['number', 4],
-            'indent-unit': ['number', 4],
-            'font-size': ['number', 14],
-            'readonly': ['boolean', false],
-            'auto-close-brackets': ['boolean', true],
-            'match-brackets': ['boolean', true],
-            'highlight-active-line': ['boolean', true],
-            'smart-indent': ['boolean', true],
-            'electric-chars': ['boolean', true],
-            'show-cursor-when-selecting': ['boolean', false]
-        },
-        code: function(data, item, compile, node, identifier)
+transforms.ItemAdd({
+    id: 'codemirror',
+    icon: 'code',
+    name: 'Code Mirror',
+    description: 'Advanced code editor with syntax highlighting. Supports multiple languages and themes.',
+    js: [
+        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js',
+       
+    ],
+    css: [
+        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css',
+        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css',
+        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css',
+        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material.min.css'
+    ],
+    config: {
+        'value': ['string', '// Welcome to CodeMirror\nfunction hello() {\n    console.log("Hello, World!");\n}\n\nhello();'],
+        'mode': ['string', 'javascript'],
+        'theme': ['string', 'monokai'],
+        'height': ['number', 400],
+        'line-numbers': ['boolean', true],
+        'line-wrapping': ['boolean', false],
+        'tab-size': ['number', 4],
+        'indent-unit': ['number', 4],
+        'font-size': ['number', 14],
+        'readonly': ['boolean', false],
+        'auto-close-brackets': ['boolean', true],
+        'match-brackets': ['boolean', true],
+        'highlight-active-line': ['boolean', true],
+        'smart-indent': ['boolean', true],
+        'electric-chars': ['boolean', true],
+        'show-cursor-when-selecting': ['boolean', false]
+    },
+    code: function(data, node, transformer)
+    {
+        this.setup = () =>
         {
-            this.setup = () =>
-            {
-                // Clear existing content
-                node.innerHTML = '';
+            // Clear existing content
+            node.innerHTML = '';
 
-                // Add codemirror wrapper class
-                node.classList.add('codemirror-wrapper');
+            // Add codemirror wrapper class
+            node.classList.add('codemirror-wrapper');
 
-                // Create textarea element
-                const textarea = document.createElement('textarea');
-                textarea.id = 'codemirror-' + Math.random().toString(36).substring(2, 11);
-                textarea.value = data['value'].value || '';
+            // Create textarea element
+            const textarea = document.createElement('textarea');
+            textarea.id = 'codemirror-' + Math.random().toString(36).substring(2, 11);
+            textarea.value = data['value'] || '';
 
-                // Store textarea reference
-                this.textarea = textarea;
+            // Store textarea reference
+            this.textarea = textarea;
 
-                // Apply wrapper styles
-                const height = data['height'].value;
-                node.style.height = height + 'px';
-                node.style.border = '1px solid #e0e0e0';
-                node.style.borderRadius = '4px';
-                node.style.overflow = 'hidden';
+            // Apply wrapper styles
+            const height = data['height'];
+            node.style.height = height + 'px';
+            node.style.border = '1px solid #e0e0e0';
+            node.style.borderRadius = '4px';
+            node.style.overflow = 'hidden';
 
-                // Append textarea to node
-                node.appendChild(textarea);
-            };
+            // Append textarea to node
+            node.appendChild(textarea);
+        };
 
-            this.config = () =>
-            {
-                const fontSize = data['font-size'].value;
-
-                return {
-                    value: data['value'].value || '',
-                    mode: data['mode'].value || 'javascript',
-                    theme: data['theme'].value || 'monokai',
-                    lineNumbers: data['line-numbers'].value !== false,
-                    lineWrapping: data['line-wrapping'].value === true,
-                    tabSize: data['tab-size'].value || 4,
-                    indentUnit: data['indent-unit'].value || 4,
-                    readOnly: data['readonly'].value === true,
-                    autoCloseBrackets: data['auto-close-brackets'].value !== false,
-                    matchBrackets: data['match-brackets'].value !== false,
-                    styleActiveLine: data['highlight-active-line'].value !== false,
-                    smartIndent: data['smart-indent'].value !== false,
-                    electricChars: data['electric-chars'].value !== false,
-                    showCursorWhenSelecting: data['show-cursor-when-selecting'].value === true,
-                    extraKeys: {
-                        'Ctrl-Space': 'autocomplete'
-                    }
-                };
+        this.config = () =>
+        {
+            const fontSize = data['font-size'];
+
+            return {
+                value: data['value'] || '',
+                mode: data['mode'] || 'javascript',
+                theme: data['theme'] || 'monokai',
+                lineNumbers: data['line-numbers'] !== false,
+                lineWrapping: data['line-wrapping'] === true,
+                tabSize: data['tab-size'] || 4,
+                indentUnit: data['indent-unit'] || 4,
+                readOnly: data['readonly'] === true,
+                autoCloseBrackets: data['auto-close-brackets'] !== false,
+                matchBrackets: data['match-brackets'] !== false,
+                styleActiveLine: data['highlight-active-line'] !== false,
+                smartIndent: data['smart-indent'] !== false,
+                electricChars: data['electric-chars'] !== false,
+                showCursorWhenSelecting: data['show-cursor-when-selecting'] === true,
+                extraKeys: {
+                    'Ctrl-Space': 'autocomplete'
+                }
             };
+        };
 
-            this.applyStyles = () =>
-            {
-                const fontSize = data['font-size'].value;
+        this.applyStyles = () =>
+        {
+            const fontSize = data['font-size'];
 
-                // Apply custom font size
-                setTimeout(() =>
+            // Apply custom font size
+            setTimeout(() =>
+            {
+                if(this.editor)
                 {
-                    if(this.editor)
-                    {
-                        const wrapper = this.editor.getWrapperElement();
-                        wrapper.style.fontSize = fontSize + 'px';
-                        wrapper.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace';
-                    }
-                }, 100);
-            };
-
-            this.initialize = () =>
+                    const wrapper = this.editor.getWrapperElement();
+                    wrapper.style.fontSize = fontSize + 'px';
+                    wrapper.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace';
+                }
+            }, 100);
+        };
+
+        this.initialize = () =>
+        {
+            setTimeout(() =>
             {
-                setTimeout(() =>
+                // Check if CodeMirror is available
+                if(typeof CodeMirror === 'undefined')
                 {
-                    // Check if CodeMirror is available
-                    if(typeof CodeMirror === 'undefined')
-                    {
-                        console.error('CodeMirror library not loaded');
-                        node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror library not available</div>';
-                        return;
-                    }
+                    console.error('CodeMirror library not loaded');
+                    node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror library not available</div>';
+                    return;
+                }
 
-                    try
-                    {
-                        // Create CodeMirror instance
-                        this.editor = CodeMirror.fromTextArea(this.textarea, this.config());
+                try
+                {
+                    // Create CodeMirror instance
+                    this.editor = CodeMirror.fromTextArea(this.textarea, this.config());
 
-                        // Store instance on node for external access
-                        node._codeMirrorEditor = this.editor;
+                    // Store instance on node for external access
+                    node._codeMirrorEditor = this.editor;
 
-                        // Apply custom styles
-                        this.applyStyles();
+                    // Apply custom styles
+                    this.applyStyles();
 
-                        // Set height
-                        const height = data['height'].value;
-                        this.editor.setSize('100%', height + 'px');
+                    // Set height
+                    const height = data['height'];
+                    this.editor.setSize('100%', height + 'px');
 
-                        // Add helper methods to node
-                        node.getValue = () =>
-                        {
-                            return this.editor ? this.editor.getValue() : '';
-                        };
+                    // Add helper methods to node
+                    node.getValue = () =>
+                    {
+                        return this.editor ? this.editor.getValue() : '';
+                    };
 
-                        node.setValue = (value) =>
+                    node.setValue = (value) =>
+                    {
+                        if(this.editor && value !== undefined)
                         {
-                            if(this.editor && value !== undefined)
-                            {
-                                this.editor.setValue(String(value));
-                            }
-                        };
+                            this.editor.setValue(String(value));
+                        }
+                    };
 
-                        node.getMode = () =>
-                        {
-                            return this.editor ? this.editor.getOption('mode') : '';
-                        };
+                    node.getMode = () =>
+                    {
+                        return this.editor ? this.editor.getOption('mode') : '';
+                    };
 
-                        node.setMode = (mode) =>
+                    node.setMode = (mode) =>
+                    {
+                        if(this.editor && mode)
                         {
-                            if(this.editor && mode)
-                            {
-                                this.editor.setOption('mode', String(mode));
-                            }
-                        };
+                            this.editor.setOption('mode', String(mode));
+                        }
+                    };
 
-                        node.setTheme = (theme) =>
+                    node.setTheme = (theme) =>
+                    {
+                        if(this.editor && theme)
                         {
-                            if(this.editor && theme)
-                            {
-                                this.editor.setOption('theme', String(theme));
-                            }
-                        };
+                            this.editor.setOption('theme', String(theme));
+                        }
+                    };
 
-                        node.setReadOnly = (readonly) =>
+                    node.setReadOnly = (readonly) =>
+                    {
+                        if(this.editor)
                         {
-                            if(this.editor)
-                            {
-                                this.editor.setOption('readOnly', Boolean(readonly));
-                            }
-                        };
+                            this.editor.setOption('readOnly', Boolean(readonly));
+                        }
+                    };
 
-                        node.refresh = () =>
+                    node.refresh = () =>
+                    {
+                        if(this.editor)
                         {
-                            if(this.editor)
+                            setTimeout(() =>
                             {
-                                setTimeout(() =>
-                                {
-                                    this.editor.refresh();
-                                }, 10);
-                            }
-                        };
+                                this.editor.refresh();
+                            }, 10);
+                        }
+                    };
 
-                        node.focus = () =>
+                    node.focus = () =>
+                    {
+                        if(this.editor)
                         {
-                            if(this.editor)
-                            {
-                                this.editor.focus();
-                            }
-                        };
+                            this.editor.focus();
+                        }
+                    };
 
-                        node.dispose = () =>
+                    node.dispose = () =>
+                    {
+                        if(this.editor)
                         {
-                            if(this.editor)
-                            {
-                                this.editor.toTextArea();
-                                this.editor = null;
-                            }
-                        };
+                            this.editor.toTextArea();
+                            this.editor = null;
+                        }
+                    };
 
-                        // Auto-refresh when container becomes visible
-                        const observer = new IntersectionObserver((entries) =>
+                    // Auto-refresh when container becomes visible
+                    const observer = new IntersectionObserver((entries) =>
+                    {
+                        entries.forEach(entry =>
                         {
-                            entries.forEach(entry =>
+                            if(entry.isIntersecting && this.editor)
                             {
-                                if(entry.isIntersecting && this.editor)
-                                {
-                                    this.editor.refresh();
-                                }
-                            });
+                                this.editor.refresh();
+                            }
                         });
+                    });
 
-                        observer.observe(node);
+                    observer.observe(node);
 
-                        console.log('CodeMirror editor initialized successfully');
+                    console.log('CodeMirror editor initialized successfully');
 
-                    } catch (error) {
-                        console.error('CodeMirror initialization failed:', error);
-                        node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror initialization failed</div>';
-                    }
-                }, 200);
-            };
+                } catch (error) {
+                    console.error('CodeMirror initialization failed:', error);
+                    node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror initialization failed</div>';
+                }
+            }, 200);
+        };
 
-            this.setup();
-            this.initialize();
-        }
-    });
-});
+        this.setup();
+        this.initialize();
+    }
+});