implement code snippet sharing

src/editor/share_dialog.js

@@ -0,0 +1,92 @@
+import {el} from './domutils.js'
+import {save_share} from '../share.js'
+import {get_state} from '../index.js'
+
+export class ShareDialog {
+  constructor() {
+    this.el = el('dialog', 'share_dialog', 
+      this.upload_begin = el('p', '',
+        el('p', '',
+          'This button will upload your scratch file to the cloud for sharing with others.'),
+        el('ul', '', 
+          el('li', '', 
+            'Please ensure that no personal data or confidential information is included.'
+          ),
+          el('li', '', 
+            'Avoid including copyrighted materials.'
+          ),
+        ),
+        el('span', {style: 'color: red'}, 
+          'Caution: Once shared, files cannot be deleted.'
+        ),
+        this.upload_buttons = el('p', {style: 'text-align: center'}, 
+          el('button', {
+            'class': 'upload_button',
+            click: () => this.upload()
+          },
+            "Upload"
+          ),
+          this.cancel_button = el('button', {
+            style: 'margin-left: 1em',
+            click: () => this.cancel()
+          },
+            "Cancel"
+          )
+        ),
+      ),
+      this.uploading = el('span', {style: 'display: none'},
+        "Uploading..."
+      ),
+      this.upload_finish = el('p', {style: 'display: none'}, 
+        el('p', '', 
+          el('p', {style: `
+            text-align: center; 
+            margin-bottom: 1em; 
+            font-size: 1.2em
+          `}, 'Upload successful'),
+          this.url_share = el('input', {
+            type: 'text',
+            readonly: true,
+            style: 'min-width: 30em',
+          }),
+          this.copy_button = el('button', {
+            click: () => this.copy(),
+            style: 'margin-left: 1em',
+          }, 'Copy URL')
+        ),
+        this.close_button = el('button', {
+          style: 'display: block; margin: auto',
+          click: () => this.cancel(),
+        }, 'Close'),
+      )
+    )
+  }
+
+  async upload() {
+    this.uploading.style.display = ''
+    this.upload_begin.style.display = 'none'
+    try {
+      const id = await save_share(get_state().files[''])
+      this.url = new URL(window.location)
+      this.url.searchParams.append('share_id', id)
+      this.url_share.value = this.url
+      this.upload_finish.style.display = ''
+    } catch(e) {
+      alert(e.message)
+      this.upload_begin.style.display = ''
+    } finally {
+      this.uploading.style.display = 'none'
+    }
+  }
+
+  copy() {
+    this.url_share.select()
+    document.execCommand('copy')
+  }
+
+  cancel() {
+    this.upload_finish.style.display = 'none'
+    this.upload_begin.style.display = ''
+    this.el.close()
+  }
+}

src/editor/ui.js

@@ -4,6 +4,7 @@ import {Files} from './files.js'
 import {CallTree} from './calltree.js'
 import {Logs} from './logs.js'
 import {IO_Trace} from './io_trace.js'
+import {ShareDialog} from './share_dialog.js'
 import {el} from './domutils.js'
 
 export class UI {
@@ -129,7 +130,12 @@ export class UI {
               href: 'https://github.com/leporello-js/leporello-js',
               target: '__blank',
             }, 'Github'),
+          el('button', {
+              'class': 'share_button',
+              'click': () => this.share_dialog.showModal(),
+            }, 'Share'),
           this.help_dialog = this.render_help(),
+          this.share_dialog = new ShareDialog().el,
         )
       ))
     )