https://github.com/openNAMU/openNAMU/issues/1681

route/tool/func.py

@@ -1110,8 +1110,9 @@ def wiki_css(data):
     # Route JS + Defer
     data_css += '<script defer src="/views/main_css/js/route/thread.js?ver=' + data_css_ver + '"></script>'
     
-    # 레거시 일반 JS
+    # Route JS
     data_css += '<script src="/views/main_css/js/load_editor.js?ver=' + data_css_ver + '"></script>'
+    data_css += '<script src="/views/main_css/js/route/render.js?ver=' + data_css_ver + '"></script>'
     
     # Main CSS
     data_css += '<link rel="stylesheet" href="/views/main_css/css/main.css?ver=' + data_css_ver + '">'

route/tool/func_render_namumark.py

@@ -325,26 +325,6 @@ class class_do_render_namumark:
 
                     toc_list += [['', heading_data_text]]
 
-                    self.render_data_js += '''
-                        function opennamu_heading_folding(data, element = '') {
-                            let fol = document.getElementById(data);
-                            if(fol.style.display === '' || fol.style.display === 'inline-block' || fol.style.display === 'block') {
-                                document.getElementById(data).style.display = 'none';
-                            } else {
-                                document.getElementById(data).style.display = 'block';
-                            }
-                            
-                            if(element !== '') {
-                                console.log(element.innerHTML);
-                                if(element.innerHTML !== '⊖') {
-                                    element.innerHTML = '⊖';
-                                } else {
-                                    element.innerHTML = '⊕';
-                                }
-                            }
-                        }\n
-                    '''
-
                     heading_folding = ['⊖', 'block']
                     if heading_data[2]:
                         heading_folding = ['⊕', 'none']
@@ -1433,10 +1413,12 @@ class class_do_render_namumark:
             table_count_all -= 1
     
     def do_render_middle(self):
-        middle_regex = r'{{{([^{](?:(?!{{{|}}}).|\n)*)?(?:}|<(\/?(?:slash)_(?:[0-9]+))>)}}'
         wiki_count = 0
+        html_count = 0
         syntax_count = 0
         folding_count = 0
+
+        middle_regex = r'{{{([^{](?:(?!{{{|}}}).|\n)*)?(?:}|<(\/?(?:slash)_(?:[0-9]+))>)}}'
         middle_count_all = len(re.findall(middle_regex, self.render_data)) * 10
         while 1:
             middle_data = re.search(middle_regex, self.render_data)
@@ -1491,12 +1473,19 @@ class class_do_render_namumark:
                         data_name = self.get_tool_data_storage('<div id="' + self.doc_include + 'opennamu_wiki_' + str(wiki_count) + '"></div>', '', middle_data_org)
                         wiki_count += 1
                     elif middle_name == '#!html':
+                        html_data = re.sub(r'^#!html ', '', middle_data)
                         if middle_slash:
-                            middle_data_org = re.sub(r'<(\/?(?:slash)_(?:[0-9]+))>', '<temp_' + middle_slash + '>', middle_data_org)
-                            self.render_data = re.sub(middle_regex, lambda x : middle_data_org, self.render_data, 1)
-                            continue
+                            html_data += '\\'
+
+                        data_revert = self.get_tool_data_revert(html_data)
+                        data_revert = re.sub(r'^\n', '', data_revert)
+                        data_revert = re.sub(r'\n$', '', data_revert)
+                        data_revert = re.sub(r'&amp;nbsp;', '&nbsp;', data_revert)
+
+                        self.render_data_js += 'opennamu_render_html("' + self.doc_include + 'opennamu_wiki_' + str(html_count) + '");\n'
 
-                        data_name = self.get_tool_data_storage('', '', middle_data_org)
+                        data_name = self.get_tool_data_storage('<span id="' + self.doc_include + 'opennamu_wiki_' + str(html_count) + '">' + data_revert, '</span>', middle_data_org)
+                        html_count += 1
                     elif middle_name == '#!folding':
                         if middle_slash:
                             middle_data_org = re.sub(r'<(\/?(?:slash)_(?:[0-9]+))>', '<temp_' + middle_slash + '>', middle_data_org)
@@ -1652,8 +1641,8 @@ class class_do_render_namumark:
                             middle_data += '\\'
 
                         data_revert = self.get_tool_data_revert(middle_data)
-                        data_revert = re.sub('^\n', '', data_revert)
-                        data_revert = re.sub('\n$', '', data_revert)
+                        data_revert = re.sub(r'^\n', '', data_revert)
+                        data_revert = re.sub(r'\n$', '', data_revert)
 
                         data_name = self.get_tool_data_storage(data_revert, '', middle_data_org)
                 else:
@@ -1661,8 +1650,8 @@ class class_do_render_namumark:
                         middle_data += '\\'
 
                     data_revert = self.get_tool_data_revert(middle_data)
-                    data_revert = re.sub('^\n', '', data_revert)
-                    data_revert = re.sub('\n$', '', data_revert)
+                    data_revert = re.sub(r'^\n', '', data_revert)
+                    data_revert = re.sub(r'\n$', '', data_revert)
 
                     data_name = self.get_tool_data_storage(data_revert, '', middle_data_org)
 

version.json

@@ -1,6 +1,6 @@
 {
     "beta" : {
-        "r_ver" : "v3.4.6-RC3-dev153",
+        "r_ver" : "v3.4.6-RC3-dev154",
         "c_ver" : "3500361",
         "s_ver" : "3500111"
     }

views/main_css/js/render_html.js

@@ -1,107 +0,0 @@
-function render_html(name = '') {
-    var num = 0;
-    while(1) {
-        num += 1;
-
-        if(document.getElementById(name + '_' + String(num))) {
-            data = document.getElementById(name + '_' + String(num)).innerHTML;
-
-            var src_list = ['www.youtube.com', 'www.google.com', 'play-tv.kakao.com'];
-            var t_data = [
-                'b', 'i', 's', 'del', 'strong', 'bold', 'em', 'sub', 'sup', 
-                'div', 'span', 
-                'a',
-                'iframe'
-            ];
-            for(var key in t_data) {
-                patt = new RegExp(
-                    '<' + t_data[key] + '( (?:(?:(?!>).)+))?>((?:(?!<\/' + t_data[key] + '>).)*)<\/' + t_data[key] + '>',
-                    'ig'
-                );
-                
-                data = data.replace(patt, function(full, in_data, in_data_2) {
-                    if(['b', 'i', 's', 'del', 'strong', 'bold', 'em', 'sub', 'sup'].includes(t_data[key])) {
-                        return '<' + t_data[key] + '>' + in_data_2 + '</' + t_data[key] + '>'
-                    } else if(t_data[key] === 'div' || t_data[key] === 'span') {
-                        var style_data = in_data.match(/ style=['"]([^'"]*)['"]/);
-                        if(style_data) {
-                            style_data = style_data[1].replace(/position/ig, '');
-                        } else {
-                            style_data = '';
-                        }
-
-                        return '<' + t_data[key] + ' style="' + style_data + '">' + in_data_2 + '</' + t_data[key] + '>';
-                    } else if(t_data[key] === 'a') {
-                        var link_data = in_data.match(/ href=['"]([^'"]*)['"]/);
-                        if(link_data) {
-                            link_data = link_data[1].replace(/^javascript:/ig, '');
-                        } else {
-                            link_data = '';
-                        }
-
-                        return '<' + t_data[key] + ' id="out_link" href="' + link_data + '">' + in_data_2 + '</' + t_data[key] + '>';
-                    } else if(t_data[key] === 'iframe') {
-                        var src_data = in_data.match(/ src=['"]([^'"]*)['"]/);
-                        if(src_data) {
-                            src_data = src_data[1];
-
-                            var src_check = src_data.match(/^http(?:s)?:\/\/([^/]+)/);
-                            if(src_check) { 
-                                if(!src_list.includes(src_check[1])) {
-                                    src_data = '';
-                                }
-                            } else {
-                                src_data = '';
-                            }
-                        } else {
-                            src_data = '';
-                        }
-
-                        var width_data = in_data.match(/ width=['"]([^'"]*)['"]/);
-                        if(width_data) {
-                            width_data = width_data[1];
-                        } else {
-                            width_data = '';
-                        }
-
-                        var height_data = in_data.match(/ height=['"]([^'"]*)['"]/);
-                        if(height_data) {
-                            height_data = height_data[1];
-                        } else {
-                            height_data = '';
-                        }
-
-                        return '<' + t_data[key] + ' src="' + src_data + '" width="' + width_data + '" height="' + height_data + '" allowfullscreen frameborder="0">' + in_data_2 + '</' + t_data[key] + '>';
-                    } else {
-                        var src_data = in_data.match(/ src=['"]([^'"]*)['"]/);
-                        if(src_data) {
-                            src_data = src_data[1];
-                        } else {
-                            src_data = '';
-                        }
-
-                        var width_data = in_data.match(/ width=['"]([^'"]*)['"]/);
-                        if(width_data) {
-                            width_data = width_data[1];
-                        } else {
-                            width_data = '';
-                        }
-
-                        var height_data = in_data.match(/ height=['"]([^'"]*)['"]/);
-                        if(height_data) {
-                            height_data = height_data[1];
-                        } else {
-                            height_data = '';
-                        }
-
-                        return '<' + t_data[key] + ' controls src="' + src_data + '" width="' + width_data + '" height="' + height_data + '">' + in_data_2 + '</' + t_data[key] + '>';
-                    }
-                });
-            }
-
-            document.getElementById(name + '_' + String(num)).innerHTML = data;
-        } else {
-            break;
-        }
-    }
-}

views/main_css/js/route/render.js

@@ -0,0 +1,121 @@
+"use strict";
+
+function opennamu_heading_folding(data, element = '') {
+    let fol = document.getElementById(data);
+    if(fol.style.display === '' || fol.style.display === 'inline-block' || fol.style.display === 'block') {
+        document.getElementById(data).style.display = 'none';
+    } else {
+        document.getElementById(data).style.display = 'block';
+    }
+    
+    if(element !== '') {
+        console.log(element.innerHTML);
+        if(element.innerHTML !== '⊖') {
+            element.innerHTML = '⊖';
+        } else {
+            element.innerHTML = '⊕';
+        }
+    }
+}
+
+function opennamu_render_html(name = '') {
+    console.log(name);
+    if(document.getElementById(name)) {
+        let data = document.getElementById(name).innerHTML;
+
+        let src_list = ['www.youtube.com', 'www.google.com', 'play-tv.kakao.com'];
+        let t_data = [
+            'b', 'i', 's', 'del', 'strong', 'bold', 'em', 'sub', 'sup', 
+            'div', 'span', 
+            'a',
+            'iframe'
+        ];
+        for(let key in t_data) {
+            let patt = new RegExp(
+                '<' + t_data[key] + '( (?:(?:(?!>).)+))?>((?:(?!<\/' + t_data[key] + '>).)*)<\/' + t_data[key] + '>',
+                'ig'
+            );
+            
+            data = data.replace(patt, function(full, in_data, in_data_2) {
+                if(['b', 'i', 's', 'del', 'strong', 'bold', 'em', 'sub', 'sup'].includes(t_data[key])) {
+                    return '<' + t_data[key] + '>' + in_data_2 + '</' + t_data[key] + '>'
+                } else if(t_data[key] === 'div' || t_data[key] === 'span') {
+                    let style_data = in_data.match(/ style=['"]([^'"]*)['"]/);
+                    if(style_data) {
+                        style_data = style_data[1].replace(/position/ig, '');
+                    } else {
+                        style_data = '';
+                    }
+
+                    return '<' + t_data[key] + ' style="' + style_data + '">' + in_data_2 + '</' + t_data[key] + '>';
+                } else if(t_data[key] === 'a') {
+                    let link_data = in_data.match(/ href=['"]([^'"]*)['"]/);
+                    if(link_data) {
+                        link_data = link_data[1].replace(/^javascript:/ig, '');
+                    } else {
+                        link_data = '';
+                    }
+
+                    return '<' + t_data[key] + ' id="out_link" href="' + link_data + '">' + in_data_2 + '</' + t_data[key] + '>';
+                } else if(t_data[key] === 'iframe') {
+                    let src_data = in_data.match(/ src=['"]([^'"]*)['"]/);
+                    if(src_data) {
+                        src_data = src_data[1];
+
+                        let src_check = src_data.match(/^http(?:s)?:\/\/([^/]+)/);
+                        if(src_check) { 
+                            if(!src_list.includes(src_check[1])) {
+                                src_data = '';
+                            }
+                        } else {
+                            src_data = '';
+                        }
+                    } else {
+                        src_data = '';
+                    }
+
+                    let width_data = in_data.match(/ width=['"]([^'"]*)['"]/);
+                    if(width_data) {
+                        width_data = width_data[1];
+                    } else {
+                        width_data = '';
+                    }
+
+                    let height_data = in_data.match(/ height=['"]([^'"]*)['"]/);
+                    if(height_data) {
+                        height_data = height_data[1];
+                    } else {
+                        height_data = '';
+                    }
+
+                    return '<' + t_data[key] + ' src="' + src_data + '" width="' + width_data + '" height="' + height_data + '" allowfullscreen frameborder="0">' + in_data_2 + '</' + t_data[key] + '>';
+                } else {
+                    let src_data = in_data.match(/ src=['"]([^'"]*)['"]/);
+                    if(src_data) {
+                        src_data = src_data[1];
+                    } else {
+                        src_data = '';
+                    }
+
+                    let width_data = in_data.match(/ width=['"]([^'"]*)['"]/);
+                    if(width_data) {
+                        width_data = width_data[1];
+                    } else {
+                        width_data = '';
+                    }
+
+                    let height_data = in_data.match(/ height=['"]([^'"]*)['"]/);
+                    if(height_data) {
+                        height_data = height_data[1];
+                    } else {
+                        height_data = '';
+                    }
+
+                    return '<' + t_data[key] + ' controls src="' + src_data + '" width="' + width_data + '" height="' + height_data + '">' + in_data_2 + '</' + t_data[key] + '>';
+                }
+            });
+        }
+
+        document.getElementById(name).innerHTML = data;
+    }
+}