모나코 에디터 끄기를 자유롭게 키고 끌 수 있도록 변경

lang/en-US.json

@@ -272,7 +272,7 @@
                 "bbs_comment_acl" : "BBS ACL to write comment",
         "_comment_" : "Edit",
             "load" : "Load another document",
-            "turn_off_monaco" : "Turn off monaco editor",
+            "turn_off_monaco" : "Turn on/off monaco editor",
         "_comment_" : "Render",
             "toc" : "TOC",
             "category" : "Category",

lang/ko-KR.json

@@ -484,7 +484,7 @@
     "topic_normal": "일반",
     "topic_stop": "중지",
     "topic_close": "닫힘",
-    "turn_off_monaco": "모나코 에디터 끄기",
+    "turn_off_monaco": "모나코 에디터 켜기/끄기",
     "topic_agree": "토론 합의 완료",
     "user_css_warning": "만약 사용하다가 문제가 생기면 여기로 접속하세요.",
     "main_css_warning": "만약 사용하다가 문제가 생기면 이머전시 툴을 사용하세요.",

route/edit.py

@@ -49,32 +49,26 @@ def edit_editor(curs, ip, data_main = '', do_type = 'edit', addon = ''):
             
     p_text = html.escape(sql_d[0][0]) if sql_d and sql_d[0][0] != '' else load_lang('default_edit_help')
     
-    monaco_editor_top += '<a href="javascript:do_monaco_to_textarea(); opennamu_do_editor_temp_save();">(' + load_lang('load_temp_save') + ')</a> <a href="javascript:opennamu_do_editor_temp_save_load();">(' + load_lang('load_temp_save_load') + ')</a> '
+    monaco_editor_top += '<a href="javascript:opennamu_do_editor_temp_save();">(' + load_lang('load_temp_save') + ')</a> <a href="javascript:opennamu_do_editor_temp_save_load();">(' + load_lang('load_temp_save_load') + ')</a> '
+    monaco_editor_top += '<a href="javascript:opennamu_edit_turn_off_monaco();">(' + load_lang('turn_off_monaco') + ')</a>'
+
+    add_get_file = '''
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.41.0/min/vs/editor/editor.main.min.css" integrity="sha512-MFDhxgOYIqLdcYTXw7en/n5BshKoduTitYmX8TkQ+iJOGjrWusRi8+KmfZOrgaDrCjZSotH2d1U1e/Z1KT6nWw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.41.0/min/vs/loader.min.js" integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    '''
+    
+    darkmode = flask.request.cookies.get('main_css_darkmode', '0')
+    monaco_thema = 'vs-dark' if darkmode == '1' else ''
+    
+    add_script = 'do_monaco_init("' + monaco_thema + '");'
     
     monaco_on = get_main_skin_set(curs, flask.session, 'main_css_monaco', ip)
     if monaco_on == 'use':
         editor_display = 'style="display: none;"'
-        add_get_file = '''
-            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.41.0/min/vs/editor/editor.main.min.css" integrity="sha512-MFDhxgOYIqLdcYTXw7en/n5BshKoduTitYmX8TkQ+iJOGjrWusRi8+KmfZOrgaDrCjZSotH2d1U1e/Z1KT6nWw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.41.0/min/vs/loader.min.js" integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        '''
-
-        monaco_editor_top += '<a href="javascript:opennamu_edit_turn_off_monaco();">(' + load_lang('turn_off_monaco') + ')</a>'
-        
-        if flask.request.cookies.get('main_css_darkmode', '0') == '1':
-            monaco_thema = 'vs-dark'
-        else:
-            monaco_thema = ''
-        
-        add_script = 'do_monaco_init("' + monaco_thema + '");'
     else:
         monaco_display = 'style="display: none;"'
-        add_script = 'opennamu_edit_turn_off_monaco();'
 
-    if do_type == 'edit':
-        textarea_size = 'opennamu_textarea_500'
-    else:
-        textarea_size = 'opennamu_textarea_100'
+    textarea_size = 'opennamu_textarea_500' if do_type == 'edit' else 'opennamu_textarea_100'
 
     return add_get_file + '''
         <textarea style="display: none;" id="opennamu_edit_origin" name="doc_data_org">''' + html.escape(data_main) + '''</textarea>
@@ -97,8 +91,8 @@ def edit_editor(curs, ip, data_main = '', do_type = 'edit', addon = ''):
             ''' + add_script + '''
         </script>
                         
-        <button id="opennamu_save_button" type="submit" onclick="do_monaco_to_textarea(); do_stop_exit_release();">''' + load_lang('send') + '''</button>
-        <button id="opennamu_preview_button" type="button" onclick="do_monaco_to_textarea(); opennamu_do_editor_preview();">''' + load_lang('preview') + '''</button>
+        <button id="opennamu_save_button" type="submit" onclick="do_stop_exit_release();">''' + load_lang('send') + '''</button>
+        <button id="opennamu_preview_button" type="button" onclick="opennamu_do_editor_preview();">''' + load_lang('preview') + '''</button>
         <hr class="main_hr">
 
         <div id="opennamu_preview_area"></div>

route/tool/func.py

@@ -632,35 +632,19 @@ def set_init():
         curs.execute(db_change("select html from html_filter where kind = 'email'"))
         if not curs.fetchall():
             for i in ['naver.com', 'gmail.com', 'daum.net', 'kakao.com']:
-                curs.execute(db_change(
-                    "insert into html_filter (html, kind, plus, plus_t) values (?, 'email', '', '')"
-                ), [i])
+                curs.execute(db_change("insert into html_filter (html, kind, plus, plus_t) values (?, 'email', '', '')"), [i])
 
         curs.execute(db_change("select html from html_filter where kind = 'extension'"))
         if not curs.fetchall():
             for i in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
-                curs.execute(db_change(
-                    "insert into html_filter (html, kind, plus, plus_t) values (?, 'extension', '', '')"
-                ), [i])
+                curs.execute(db_change("insert into html_filter (html, kind, plus, plus_t) values (?, 'extension', '', '')"), [i])
 
-        curs.execute(db_change(
-            'select data from other ' + \
-            'where name = "smtp_server" or name = "smtp_port" or name = "smtp_security"'
-        ))
+        curs.execute(db_change('select data from other where name = "smtp_server" or name = "smtp_port" or name = "smtp_security"'))
         if not curs.fetchall():
-            for i in [
-                ['smtp_server', 'smtp.gmail.com'],
-                ['smtp_port', '587'], 
-                ['smtp_security', 'starttls']
-            ]:
+            for i in [['smtp_server', 'smtp.gmail.com'], ['smtp_port', '587'], ['smtp_security', 'starttls']]:
                 curs.execute(db_change("insert into other (name, data, coverage) values (?, ?, '')"), [i[0], i[1]])
 
-        curs.execute(db_change('insert into html_filter (html, kind, plus, plus_t) values (?, ?, ?, ?)'), [
-            r'(?:[^A-Za-zㄱ-힣0-9])',
-            'name',
-            '',
-            ''
-        ])
+        curs.execute(db_change('insert into html_filter (html, kind, plus, plus_t) values (?, ?, ?, ?)'), [r'(?:[^A-Za-zㄱ-힣0-9])', 'name', '', ''])
 
 # Func-simple
 ## Func-simple-without_DB
@@ -1016,7 +1000,7 @@ def wiki_css(data):
     data_css = ''
     data_css_add = ''
 
-    data_css_ver = '185'
+    data_css_ver = '186'
     data_css_ver = '.cache_v' + data_css_ver
 
     if 'main_css' in global_wiki_set:

views/main_css/js/route/editor.js

@@ -2,9 +2,8 @@
 
 function do_insert_data(data) {
     const name = 'opennamu_edit_textarea';
-    const monaco_name = 'opennamu_monaco_editor';
 
-    if(!document.getElementById(monaco_name)) {
+    if(get_select_editor() === 'textarea') {
         // https://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript
         if(document.selection) {
             document.getElementById(name).focus();
@@ -41,24 +40,11 @@ function do_insert_data(data) {
 // 아직 개편이 더 필요함
 function do_paste_image() {
     const name = 'opennamu_edit_textarea';
-    const monaco_name = 'opennamu_monaco_editor';
 
     window.addEventListener('DOMContentLoaded', async function() {
         let set = await opennamu_get_main_skin_set("main_css_image_paste");
         if(set === 'use') {
-            let textarea;
-            if(
-                document.getElementById(monaco_name) !== null &&
-                document.getElementById(monaco_name) !== undefined
-            ) {
-                textarea = document.getElementById(monaco_name);
-            } else {
-                textarea = document.getElementById(name);
-            }
-
-            if(textarea) {
-                textarea.addEventListener("paste", pasteListener);
-            }
+            document.getElementById(name).addEventListener("paste", pasteListener);
         }
     });
 }
@@ -127,7 +113,7 @@ function pasteListener(e) {
 
 function do_stop_exit() {
     window.onbeforeunload = function() {
-        do_monaco_to_textarea();
+        do_sync_monaco_and_textarea();
 
         let data = document.getElementById('opennamu_edit_textarea').value;
         let origin = document.getElementById('opennamu_edit_origin').value;
@@ -138,22 +124,44 @@ function do_stop_exit() {
 }
 
 function do_stop_exit_release() {
+    do_sync_monaco_and_textarea();
+    
     window.onbeforeunload = function () {}
 }
 
 function opennamu_edit_turn_off_monaco() {
-    do_monaco_to_textarea();
-    
-    document.getElementById('opennamu_edit_textarea').style.display = 'block';
-    document.getElementById('opennamu_monaco_editor').style.display = 'none';
-    document.getElementById('opennamu_monaco_editor').remove();
+    do_sync_monaco_and_textarea();
+
+    if(get_select_editor() === 'textarea') {
+        document.getElementById('opennamu_edit_textarea').style.display = 'none';
+        document.getElementById('opennamu_monaco_editor').style.display = 'block';
+    } else {
+        document.getElementById('opennamu_edit_textarea').style.display = 'block';
+        document.getElementById('opennamu_monaco_editor').style.display = 'none';
+    }
 }
 
 function do_monaco_to_textarea() {
-    if(document.getElementById('opennamu_monaco_editor')) {
-        try {
-            document.getElementById('opennamu_edit_textarea').value = window.editor.getValue();
-        } catch(e) {}
+    document.getElementById('opennamu_edit_textarea').value = window.editor.getValue();
+}
+
+function do_textarea_to_manaco() {
+    window.editor.setValue(document.getElementById('opennamu_edit_textarea').value);
+}
+
+function get_select_editor() {
+    if(document.getElementById('opennamu_monaco_editor').style.display === 'none') {
+        return 'textarea'
+    } else {
+        return 'monaco'
+    }
+}
+
+function do_sync_monaco_and_textarea(select = '') {
+    if(select === 'textarea_to_monaco' || get_select_editor() === 'textarea') {
+        do_textarea_to_manaco();
+    } else {
+        do_monaco_to_textarea();
     }
 }
 

views/main_css/js/route/editor_sub.js

@@ -1,4 +1,5 @@
 function opennamu_do_editor_preview() {
+    do_sync_monaco_and_textarea();
     var input = document.querySelector('#opennamu_edit_textarea');
     if (input !== null) {
         var doc_name = 'test';
@@ -24,6 +25,7 @@ function opennamu_do_editor_preview() {
     }
 }
 function opennamu_do_editor_temp_save() {
+    do_sync_monaco_and_textarea();
     var input = document.querySelector('#opennamu_edit_textarea');
     if (input !== null) {
         localStorage.setItem("key", input.value);
@@ -31,15 +33,11 @@ function opennamu_do_editor_temp_save() {
 }
 function opennamu_do_editor_temp_save_load() {
     var data = localStorage.getItem("key");
-    console.log(data);
     if (data !== null) {
         var input = document.querySelector('#opennamu_edit_textarea');
         if (input !== null) {
             input.value = data;
         }
-        var input_2 = document.querySelector('#opennamu_monaco_editor');
-        if (input_2 !== null) {
-            window.editor.setValue(data);
-        }
+        do_textarea_to_manaco();
     }
 }

views/main_css/js/route/editor_sub.ts

@@ -1,9 +1,14 @@
 declare function opennamu_do_url_encode(data : any) : string;
+declare function do_sync_monaco_and_textarea();
+declare function do_textarea_to_manaco();
+
 interface Window {
     editor? : any;
 }
 
 function opennamu_do_editor_preview() {
+    do_sync_monaco_and_textarea();
+
     const input = document.querySelector('#opennamu_edit_textarea') as HTMLInputElement | null;
     if(input !== null) {
         let doc_name : string = 'test';
@@ -32,6 +37,8 @@ function opennamu_do_editor_preview() {
 }
 
 function opennamu_do_editor_temp_save() {
+    do_sync_monaco_and_textarea();
+
     const input = document.querySelector('#opennamu_edit_textarea') as HTMLInputElement | null;
     if(input !== null) {
         localStorage.setItem("key", input.value);
@@ -40,16 +47,12 @@ function opennamu_do_editor_temp_save() {
 
 function opennamu_do_editor_temp_save_load() {
     const data = localStorage.getItem("key");
-    console.log(data);
     if(data !== null) {
         const input = document.querySelector('#opennamu_edit_textarea') as HTMLInputElement | null;
         if(input !== null) {
             input.value = data;
         }
-
-        const input_2 = document.querySelector('#opennamu_monaco_editor') as any;
-        if(input_2 !== null) {
-            window.editor.setValue(data);
-        }
+        
+        do_textarea_to_manaco();
     }
 }