Actions to insert images/links for the comments editor on the EM page

imgsrc/srv/image.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M576 576q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448h-1408v-192l320-320 160 160 512-512zm96-704h-1600q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5v-1216q0-13-9.5-22.5t-22.5-9.5zm160 32v1216q0 66-47 113t-113 47h-1600q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1600q66 0 113 47t47 113z"/></svg>

imgsrc/srv/insert-link.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 128 128" height="128" width="128">
+  <g transform="translate(0,-924.36216)">
+    <g transform="translate(0,-5.2934728)">
+      <g transform="matrix(1.26,0,0,1.3012362,-13.737501,-318.60664)">
+        <path d="m 56.142431,984.49997 0,0 c -0.009,-8.475 -7.645,-15.365 -17.024003,-15.365 l -10.402,0 c -9.281,0 -16.851,6.75 -17.02,15.093 l 0.005,0.281 c 0.004,8.474 7.64,15.365 17.02,15.365 l 10.401,0 c 2.086003,0 4.083003,-0.347 5.934003,-0.966 -2.541,-1.425 -4.678,-3.394 -6.210003,-5.728 l -10.125,0 c -5.386,0 -9.82,-3.487 -10.289,-7.912 l -0.042,0 0,-0.769 c 0.005,-4.781 4.641,-8.671 10.326,-8.671 l 10.401,0 c 5.386003,0 9.825003,3.478 10.289003,7.912 l 0.042,0 0.005,0.759 0,0.01 c -0.005,1.64 -0.558,3.168 -1.505,4.471 1.5,1.51 3.736,2.503 6.258,2.635 1.19,-2.053 1.889,-4.369 1.936,-6.834 l 0,-0.281 z" />
+        <path d="m 106.73343,973.67297 c -3.225,-2.925 -7.504999,-4.537 -12.060999,-4.537 l -10.401,0 c -9.379,0 -17.015,6.89 -17.02,15.365 l 0,0 0,0.057 c 0.014,2.549 0.717,4.94 1.94,7.049 2.508,-0.169 4.716,-1.2 6.183,-2.719 -0.9,-1.293 -1.43,-2.784 -1.43,-4.377 0,-0.01 0,-0.01 0,-0.01 0.005,-4.781 4.641,-8.671 10.326,-8.671 l 10.401,0 c 5.689999,0 10.325999,3.891 10.330999,8.671 0,4.791 -4.636,8.681 -10.330999,8.681 l -10.283,0 c -1.523,2.315 -3.638,4.266 -6.149,5.69 1.875,0.646 3.909,1.003 6.032,1.003 l 10.401,0 c 9.378999,0 17.014999,-6.891 17.023999,-15.365 10e-4,-4.087 -1.762,-7.931 -4.963,-10.837 z" />
+        <g>
+          <path d="m 54.769431,969.13597 c -2.086,0 -4.087,0.347 -5.935,0.965 2.541,1.435 4.673,3.394 6.211,5.728 l 13.303,0 c 1.523,-2.315 3.638,-4.266 6.146,-5.69 -1.875,-0.647 -3.909,-1.003 -6.038,-1.003 l -13.687,0 z"/>
+          <path d="m 85.480431,984.49997 c 0,-2.559 -0.703,-4.968 -1.936,-7.097 -2.508,0.169 -4.72,1.2 -6.188,2.719 0.9,1.294 1.425,2.785 1.43,4.378 l 0,0 c 0,4.791 -4.631,8.681 -10.326,8.681 l -13.691,0 c -5.69,0 -10.326,-3.891 -10.326,-8.681 l 0,0 c 0,-1.64 0.558,-3.168 1.5,-4.472 -1.5,-1.5 -3.736,-2.494 -6.253003,-2.625 -1.237,2.119 -1.94,4.538 -1.94,7.097 l 0,0 c 0,8.475 7.636003,15.375 17.024003,15.375 l 13.687,0 c 9.383,0 17.019,-6.899 17.019,-15.375 l 0,0 z"/>
+        </g>
+      </g>
+      <path d="m 93,1011.8898 0,7.9091 q 0,1.6479 -1.15341,2.801 -1.1534,1.1535 -2.80113,1.1535 l -17.13637,0 0,17.1366 q 0,1.6475 -1.153401,2.8009 -1.153414,1.1535 -2.801139,1.1535 l -7.90909,0 q -1.647735,0 -2.801139,-1.1535 -1.153411,-1.1534 -1.153411,-2.8009 l 0,-17.1366 -17.13636,0 q -1.647725,0 -2.801135,-1.1535 Q 35,1021.4468 35,1019.7989 l 0,-7.9091 q 0,-1.6477 1.153415,-2.8011 1.15341,-1.1535 2.801135,-1.1535 l 17.13636,0 0,-17.13641 q 0,-1.64771 1.153411,-2.80112 1.153404,-1.15342 2.801139,-1.15342 l 7.90909,0 q 1.647725,0 2.801139,1.15342 1.153401,1.15341 1.153401,2.80112 l 0,17.13641 17.13637,0 q 1.64773,0 2.80113,1.1535 Q 93,1010.2421 93,1011.8898 Z"/>
+    </g>
+  </g>
+</svg>

src/pyj/book_list/comments_editor.pyj

@@ -9,6 +9,7 @@ from book_list.theme import get_color
 from dom import add_extra_css, build_rule, clear, ensure_id, svgicon
 from iframe_comm import IframeClient, IframeWrapper
 from modals import create_custom_dialog
+from utils import html_escape
 from widgets import create_button
 
 CLASS_NAME = 'comments-editor'
@@ -45,7 +46,7 @@ def choose_block_style(proceed):
 
         parent.appendChild(E.div(
             E.div(_('Choose the block style you would like to use')),
-        E.div(class_='button-box', style='flex-wrap: wrap',
+            E.div(class_='button-box', style='flex-wrap: wrap',
                 s(_('Normal'), 'div'), spc, s('H1', 'h1'), spc, s('H2', 'h2'), spc, s('H3', 'h3'), spc, s('H4', 'h4'), spc, s('H5', 'h5'), spc, s('H6', 'h6'), spc, s(_('Quote'), 'blockquote')
             )
         ))
@@ -53,6 +54,49 @@ def choose_block_style(proceed):
 
 
 
+def insert_link(title, msg, proceed):
+    create_custom_dialog(title, def(parent, close_modal):
+
+        def action(ok, evt):
+            close_modal()
+            c = evt.currentTarget.closest('.il-modal-container')
+            url = c.querySelector('input[name="url"]').value
+            name = c.querySelector('input[name="name"]').value
+            proceed(ok, url, name)
+
+        parent.appendChild(E.div(class_='il-modal-container',
+            E.div(msg),
+            E.table(style='width: 95%; margin-top: 1ex',
+                E.tr(E.td('URL:'), E.td(style='padding-bottom: 1ex', E.input(type='url', name='url', style='width: 100%'))),
+                E.tr(E.td(_('Name (optional):')), E.td(E.input(type='text', name='name', style='width: 100%'))),
+            ),
+            E.div(class_='button-box',
+                  create_button(_('OK'), action=action.bind(None, True), highlight=True),
+                  '\xa0',
+                  create_button(_('Cancel'), action=action.bind(None, False), highlight=False),
+            ),
+        ))
+    )
+
+
+def insert_link_or_image(editor_id, is_image, ok, url, title):
+    editor = registry[editor_id]
+    if ok:
+        if title:
+            markup = '<img src="{}" title="{}"></img>' if is_image else '<a href="{}">{}</a>'
+            editor.exec_command('insertHTML', markup.format(html_escape(url), html_escape(title)))
+        else:
+            cmd = 'insertImage' if is_image else 'createLink'
+            editor.exec_command(cmd, url)
+    editor.focus()
+
+
+def insert_heading(editor_id, cmd):
+    editor = registry[editor_id]
+    if cmd:
+        editor.exec_command('formatBlock', f'<{cmd}>')
+    editor.focus()
+
 
 def all_editor_actions():  # {{{
     if not all_editor_actions.ans:
@@ -127,11 +171,7 @@ def all_editor_actions():  # {{{
                 'icon': 'heading',
                 'title': _('Style the selected text block'),
                 'execute': def (editor, activated):
-                    choose_block_style(def(cmd):
-                        if cmd:
-                            editor.exec_command('formatBlock', f'<{cmd}>')
-                        editor.focus()
-                    )
+                    choose_block_style(insert_heading.bind(None, editor.id))
             },
             'ul': {
                 'icon': 'ul',
@@ -181,7 +221,18 @@ def all_editor_actions():  # {{{
                 'execute': def (editor, activated):
                     editor.exec_command('justifyRight')
             },
-
+            'insert-link': {
+                'icon': 'insert-link',
+                'title': _('Insert a link or linked image'),
+                'execute': def (editor, activated):
+                    insert_link(_('Insert a link'), _('Enter the link URL and optionally the link name'), insert_link_or_image.bind(None, editor.id, False))
+            },
+            'insert-image': {
+                'icon': 'image',
+                'title': _('Insert an image'),
+                'execute': def (editor, activated):
+                    insert_link(_('Insert an image'), _('Enter the image URL and optionally the image name'), insert_link_or_image.bind(None, editor.id, True))
+            },
         }
     return all_editor_actions.ans
 # }}}
@@ -370,7 +421,7 @@ def create_comments_editor(container):
     for ac_name in 'undo redo select-all remove-format | bold italic underline strikethrough | hr superscript subscript format-block'.split(' '):
         add(toolbar1, ac_name)
 
-    for ac_name in 'ul ol indent outdent | justify-left justify-center justify-right justify-full |'.split(' '):
+    for ac_name in 'ul ol indent outdent | justify-left justify-center justify-right justify-full | insert-link insert-image'.split(' '):
         add(toolbar2, ac_name)
 
     container.setAttribute('style', (container.getAttribute('style') or '') + ';display: flex; flex-direction: column; align-items: stretch')