t-doc-common 0.6.dev2__tar.gz → 0.7__tar.gz

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/.gitignore

@@ -1,4 +1,3 @@
-*.gen.*
 *.orig
 __pycache__
 
@@ -6,4 +5,5 @@ __pycache__
 /_build/
 /dist/
 /node_modules/
+/tdoc/common/static.gen/
 /tmp/

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/.hgignore

@@ -1,5 +1,4 @@
 syntax: glob
-*.gen.*
 *.orig
 __pycache__
 
@@ -8,4 +7,5 @@ syntax: regexp
 ^_build/
 ^dist/
 ^node_modules/
+^tdoc/common/static\.gen/
 ^tmp/

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/.hgtags

@@ -2,3 +2,5 @@
 ea2973414a3779c7ffbed73279ab8d811c795268 0.3
 dcb01efb897d0e04063b92998c17b02b587761c7 0.4
 e4ac6c10dd9194ff48c95d82e462e45bbd651ef1 0.5
+145a6ae1f8e1a445a9a13c687c17bf587b48522f 0.6
+f5adc3e31d10e2b5478fe2e041b936159dd5c1c0 0.7

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/LICENSES.deps.txt

@@ -233,12 +233,12 @@ THE SOFTWARE.
 
 ---
 
-Name: @codemirror/commands
-Version: 6.6.1
+Name: @codemirror/autocomplete
+Version: 6.18.0
 License: MIT
 Private: false
-Description: Collection of editing commands for the CodeMirror code editor
-Repository: https://github.com/codemirror/commands.git
+Description: Autocompletion for the CodeMirror code editor
+Repository: https://github.com/codemirror/autocomplete.git
 Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===
@@ -267,18 +267,19 @@ THE SOFTWARE.
 
 ---
 
-Name: crelt
-Version: 1.0.6
+Name: @codemirror/commands
+Version: 6.6.1
 License: MIT
 Private: false
-Description: Tiny DOM-element-creation utility
-Repository: git+https://github.com/marijnh/crelt.git
-Homepage: https://github.com/marijnh/crelt#readme
-Author: Marijn Haverbeke <marijn@haverbeke.berlin>
+Description: Collection of editing commands for the CodeMirror code editor
+Repository: https://github.com/codemirror/commands.git
+Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===
 
-Copyright (C) 2020 by Marijn Haverbeke <marijn@haverbeke.berlin>
+MIT License
+
+Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -300,19 +301,18 @@ THE SOFTWARE.
 
 ---
 
-Name: @codemirror/search
-Version: 6.5.6
+Name: crelt
+Version: 1.0.6
 License: MIT
 Private: false
-Description: Search functionality for the CodeMirror code editor
-Repository: https://github.com/codemirror/search.git
-Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
+Description: Tiny DOM-element-creation utility
+Repository: git+https://github.com/marijnh/crelt.git
+Homepage: https://github.com/marijnh/crelt#readme
+Author: Marijn Haverbeke <marijn@haverbeke.berlin>
 License Copyright:
 ===
 
-MIT License
-
-Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+Copyright (C) 2020 by Marijn Haverbeke <marijn@haverbeke.berlin>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -334,12 +334,12 @@ THE SOFTWARE.
 
 ---
 
-Name: @codemirror/autocomplete
-Version: 6.18.0
+Name: @codemirror/lint
+Version: 6.8.1
 License: MIT
 Private: false
-Description: Autocompletion for the CodeMirror code editor
-Repository: https://github.com/codemirror/autocomplete.git
+Description: Linting support for the CodeMirror code editor
+Repository: https://github.com/codemirror/lint.git
 Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===
@@ -368,12 +368,12 @@ THE SOFTWARE.
 
 ---
 
-Name: @codemirror/lint
-Version: 6.8.1
+Name: @codemirror/search
+Version: 6.5.6
 License: MIT
 Private: false
-Description: Linting support for the CodeMirror code editor
-Repository: https://github.com/codemirror/lint.git
+Description: Search functionality for the CodeMirror code editor
+Repository: https://github.com/codemirror/search.git
 Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===
@@ -402,19 +402,19 @@ THE SOFTWARE.
 
 ---
 
-Name: codemirror
-Version: 6.0.1
+Name: @codemirror/theme-one-dark
+Version: 6.1.2
 License: MIT
 Private: false
-Description: Basic configuration for the CodeMirror code editor
-Repository: https://github.com/codemirror/basic-setup.git
-Author: Marijn Haverbeke <marijnh@gmail.com> (http://marijnhaverbeke.nl)
+Description: One Dark theme for the CodeMirror code editor
+Repository: https://github.com/codemirror/theme-one-dark.git
+Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===
 
 MIT License
 
-Copyright (C) 2018-2021 by Marijn Haverbeke <marijnh@gmail.com> and others
+Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -572,19 +572,19 @@ THE SOFTWARE.
 
 ---
 
-Name: @codemirror/lang-html
-Version: 6.4.9
+Name: @lezer/javascript
+Version: 1.4.17
 License: MIT
 Private: false
-Description: HTML language support for the CodeMirror code editor
-Repository: https://github.com/codemirror/lang-html.git
-Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
+Description: lezer-based JavaScript grammar
+Repository: https://github.com/lezer-parser/javascript.git
+Author: Marijn Haverbeke <marijn@haverbeke.berlin>
 License Copyright:
 ===
 
 MIT License
 
-Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+Copyright (C) 2018 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -606,19 +606,19 @@ THE SOFTWARE.
 
 ---
 
-Name: @lezer/javascript
-Version: 1.4.17
+Name: @codemirror/lang-javascript
+Version: 6.2.2
 License: MIT
 Private: false
-Description: lezer-based JavaScript grammar
-Repository: https://github.com/lezer-parser/javascript.git
-Author: Marijn Haverbeke <marijn@haverbeke.berlin>
+Description: JavaScript language support for the CodeMirror code editor
+Repository: https://github.com/codemirror/lang-javascript.git
+Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===
 
 MIT License
 
-Copyright (C) 2018 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -640,12 +640,12 @@ THE SOFTWARE.
 
 ---
 
-Name: @codemirror/lang-javascript
-Version: 6.2.2
+Name: @codemirror/lang-html
+Version: 6.4.9
 License: MIT
 Private: false
-Description: JavaScript language support for the CodeMirror code editor
-Repository: https://github.com/codemirror/lang-javascript.git
+Description: HTML language support for the CodeMirror code editor
+Repository: https://github.com/codemirror/lang-html.git
 Author: Marijn Haverbeke <marijn@haverbeke.berlin> (http://marijnhaverbeke.nl)
 License Copyright:
 ===

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: t-doc-common
-Version: 0.6.dev2
+Version: 0.7
 Summary: Common functionality for t-doc
 Project-URL: Code, https://github.com/t-docs/common
 Project-URL: Documentation, https://t-doc.org/common/

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/docs/demo/sql.md

@@ -21,10 +21,13 @@ References an `{exec}` block to be executed before this block, in the same
 environment. The referenced block can itself have an `:after:` option, forming
 a chain of blocks to execute in the environment.
 ```
+```{rst:directive:option} editable
+When set, the `{exec}` block is made editable.
+```
 ```{rst:directive:option} when: value
 :type: click | load | never
-Determines when the block's code is executed: on a click by the user (`click`),
-when the page loads (`load`) or not at all (`never`).
+Determines when the block's code is executed: on user request (`click`, the
+default), when the page loads (`load`) or not at all (`never`).
 ```
 ````
 
@@ -110,3 +113,16 @@ select * from countries where country_code = 'LI';
 They can also be executed immediately on load (`:when: load`) or not at all
 (`:when: never`, useful for database definitions that are referenced by other
 blocks). In these cases, no controls aren displayed.
+
+## Editable blocks
+
+Blocks can be made editable with the `:editable:` option.
+
+```{exec} sql
+:after: sql-countries
+:when: load
+:editable:
+select * from countries
+    where population > 10000000
+    order by country_code;
+```

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/package-lock.json

@@ -6,15 +6,21 @@
     "": {
       "name": "t-doc-common",
       "devDependencies": {
+        "@codemirror/autocomplete": "^6.18.0",
+        "@codemirror/commands": "^6.6.1",
         "@codemirror/lang-css": "^6.2.1",
         "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-python": "^6.1.6",
         "@codemirror/lang-sql": "^6.7.1",
+        "@codemirror/language": "^6.10.2",
+        "@codemirror/lint": "^6.8.1",
+        "@codemirror/search": "^6.5.6",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/theme-one-dark": "^6.1.2",
         "@codemirror/view": "^6.33.0",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@sqlite.org/sqlite-wasm": "^3.46.1-build1",
-        "codemirror": "^6.0.1",
         "rollup": "^4.21.2",
         "rollup-plugin-license": "^3.5.2"
       }
@@ -174,6 +180,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/view": {
       "version": "6.33.0",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.33.0.tgz",
@@ -588,22 +607,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/codemirror": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      }
-    },
     "node_modules/commenting": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/commenting/-/commenting-1.1.0.tgz",

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/package.json

@@ -1,16 +1,20 @@
 {
-  "dependencies": {
-  },
   "devDependencies": {
+    "@codemirror/autocomplete": "^6.18.0",
+    "@codemirror/commands": "^6.6.1",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/lang-sql": "^6.7.1",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.1",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.33.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@sqlite.org/sqlite-wasm": "^3.46.1-build1",
-    "codemirror": "^6.0.1",
     "rollup": "^4.21.2",
     "rollup-plugin-license": "^3.5.2"
   },

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/pyproject.toml

@@ -53,10 +53,14 @@ path = "tools/hatch_hooks.py"
 path = "tools/hatch_hooks.py"
 
 [tool.hatch.build.targets.sdist]
+artifacts = [
+    "/tdoc/common/static.gen/",
+]
 
 [tool.hatch.build.targets.wheel]
 only-include = [
-    "ext/sqlite-wasm/sqlite-wasm/jswasm",
     "tdoc",
 ]
-sources."ext/sqlite-wasm/sqlite-wasm" = "tdoc/common/static"
+artifacts = [
+    "/tdoc/common/static.gen/",
+]

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/rollup.config.mjs

@@ -1,8 +1,8 @@
 // Copyright 2024 Remy Blank <remy@c-space.org>
 // SPDX-License-Identifier: MIT
 
-import path from 'node:path';
-import url from 'node:url';
+import * as path from 'node:path';
+import * as url from 'node:url';
 import resolve from '@rollup/plugin-node-resolve';
 import license from 'rollup-plugin-license';
 
@@ -11,29 +11,23 @@ import license from 'rollup-plugin-license';
 const __filename = import.meta.filename || url.fileURLToPath(import.meta.url)
 const __dirname = import.meta.dirname || path.dirname(__filename)
 
+// TODO: Package @sqlite.org/sqlite-wasm. Or maybe it must be an external
+//       because of the worker module and .wasm.
+
 export default {
     input: "./tdoc/common/scripts/tdoc-editor.js",
     output: {
-        chunkFileNames: '[name].gen.js',
+        chunkFileNames: '[name].js',
         compact: true,
-        dir: './tdoc/common/static/',
-        entryFileNames: '[name].gen.js',
+        dir: './tdoc/common/static.gen/',
+        entryFileNames: '[name].js',
         format: 'es',
         generatedCode: {
             arrowFunctions: true,
             constBindings: true,
             objectShorthand: true,
         },
-        // TODO: Package @sqlite.org/sqlite-wasm as well. Or maybe it must
-        //       be an external because of the worker module and .wasm
-        manualChunks: {
-            'tdoc-cm': ['codemirror'],
-            'tdoc-cm-css': ['@codemirror/lang-css'],
-            'tdoc-cm-html': ['@codemirror/lang-html'],
-            'tdoc-cm-javascript': ['@codemirror/lang-javascript'],
-            'tdoc-cm-python': ['@codemirror/lang-python'],
-            'tdoc-cm-sql': ['@codemirror/lang-sql'],
-        },
+        manualChunks: {},
     },
     plugins: [
         resolve(),

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/tdoc/common/__init__.py

@@ -10,7 +10,7 @@ from sphinx.directives.code import CodeBlock
 from sphinx.util import logging
 
 __project__ = 't-doc-common'
-__version__ = '0.6.dev2'
+__version__ = '0.7'
 
 _common = pathlib.Path(__file__).absolute().parent
 _root = _common.parent.parent
@@ -65,9 +65,11 @@ def on_config_inited(app, config):
 def on_builder_inited(app):
     # Add our own static paths.
     app.config.html_static_path.append(str(_common / 'static'))
-    sw = _root / 'ext' / 'sqlite-wasm' / 'sqlite-wasm'
-    if (sw / 'jswasm').is_dir():
-        app.config.html_static_path.append(str(sw))
+    app.config.html_static_path.append(str(_common / 'static.gen'))
+    sqlite_path = (_root / 'node_modules' / '@sqlite.org' / 'sqlite-wasm'
+                   / 'sqlite-wasm' / 'jswasm')
+    if sqlite_path.is_dir():
+        app.config.html_static_path.append(str(sqlite_path))
 
 
 def on_html_page_context(app, page, template, context, doctree):
@@ -95,6 +97,7 @@ class Exec(CodeBlock):
 
     option_spec = CodeBlock.option_spec | {
         'after': directives.unchanged,
+        'editable': directives.flag,
         'when': lambda c: directives.choice(c, ('click', 'load', 'never')),
     }
 
@@ -119,6 +122,8 @@ class Exec(CodeBlock):
         if after := self.options.get('after'):
             node['after'] = after
         node['when'] = self.options.get('when', 'click')
+        if 'editable' in self.options:
+            node['classes'] += ['tdoc-editable']
 
 
 def check_after_references(app, doctree, docname):

t_doc_common-0.7/tdoc/common/scripts/tdoc-editor.js

@@ -0,0 +1,103 @@
+// Copyright 2024 Remy Blank <remy@c-space.org>
+// SPDX-License-Identifier: MIT
+
+import * as autocomplete from '@codemirror/autocomplete';
+import * as commands from '@codemirror/commands';
+import * as language from '@codemirror/language';
+import * as lint from '@codemirror/lint';
+import * as search from '@codemirror/search';
+import * as state from '@codemirror/state';
+import * as view from '@codemirror/view';
+
+import {oneDark} from '@codemirror/theme-one-dark';
+
+import {css} from '@codemirror/lang-css';
+import {html} from '@codemirror/lang-html';
+import {javascript} from '@codemirror/lang-javascript';
+import {python} from '@codemirror/lang-python';
+import {sql} from '@codemirror/lang-sql';
+
+const languages = {css, html, javascript, python, sql};
+
+// React to theme changes and update all editor themes as well.
+const theme = new state.Compartment();
+const lightTheme = view.EditorView.theme({}, {dark: false});
+const darkTheme = oneDark;
+
+function currentTheme() {
+    return document.querySelector('html').dataset.theme === 'dark' ?
+           darkTheme : lightTheme;
+}
+
+let curTheme = currentTheme();
+
+const obs = new MutationObserver((mutations) => {
+    for (const mut of mutations) {
+        if (mut.attributeName !== 'data-theme') continue;
+        const newTheme = currentTheme();
+        if (newTheme === curTheme) break;
+        curTheme = newTheme;
+        for (const div of document.querySelectorAll('div.cm-editor')) {
+            const editor = div.tdocEditor;
+            editor.dispatch({effects: theme.reconfigure(curTheme)});
+        }
+        break;
+    }
+});
+obs.observe(document.querySelector('html'), {attributes: true});
+
+// Return the editor extensions for the given config.
+function extensions(config) {
+    return [
+        theme.of(currentTheme()),
+        autocomplete.autocompletion(),
+        autocomplete.closeBrackets(),
+        commands.history(),
+        language.bracketMatching(),
+        language.foldGutter(),
+        language.indentOnInput(),
+        language.indentUnit.of('    '),
+        language.syntaxHighlighting(language.defaultHighlightStyle,
+                                    {fallback: true}),
+        search.highlightSelectionMatches(),
+        state.EditorState.allowMultipleSelections.of(true),
+        state.EditorState.tabSize.of(4),
+        view.crosshairCursor(),
+        view.drawSelection(),
+        view.dropCursor(),
+        view.highlightActiveLine(),
+        view.highlightActiveLineGutter(),
+        view.highlightSpecialChars(),
+        view.keymap.of([
+            ...(config.onRun ? [{key: "Shift-Enter", run: config.onRun}] : []),
+            ...autocomplete.closeBracketsKeymap,
+            ...autocomplete.completionKeymap,
+            ...commands.defaultKeymap,
+            ...commands.historyKeymap,
+            commands.indentWithTab,
+            ...language.foldKeymap,
+            ...lint.lintKeymap,
+            ...search.searchKeymap,
+        ]),
+        view.lineNumbers(),
+        view.rectangularSelection(),
+        view.EditorView.lineWrapping,
+        (languages[config.language] || (() => []))(),
+    ];
+}
+
+// Add an editor to the given element.
+export function addEditor(parent, config) {
+    const editor = new view.EditorView({
+        doc: config.text || '',
+        extensions: extensions(config),
+        parent,
+    });
+    parent.querySelector('div.cm-editor').tdocEditor = editor;
+    return editor;
+}
+
+// Find an editor in or below the given element.
+export function findEditor(el) {
+    return el.querySelector('div.cm-editor')?.tdocEditor;
+}

{t_doc_common-0.6.dev2 → t_doc_common-0.7}/tdoc/common/static/styles/t-doc.css

@@ -26,6 +26,31 @@ div.sidebar, aside.sidebar {
     background-color: var(--pst-color-table-row-hover-bg);
 }
 
+/* Code blocks */
+div.highlight pre {
+    padding: 0.7rem;
+}
+
+/* Editor */
+div.tdoc-exec.tdoc-editable div.highlight pre,
+div.tdoc-exec.tdoc-editable div.highlight button.copybtn {
+    display: none;
+}
+div.tdoc-exec.tdoc-editable div.cm-editor {
+    border-radius: 0.25rem;
+    border: 1px solid var(--pst-color-border);
+}
+html[data-theme=dark] div.tdoc-exec.tdoc-editable div.cm-editor {
+    background-color: var(--pst-color-surface);
+}
+div.cm-editor.cm-focused {
+    outline: none;
+}
+div.cm-editor div.cm-scroller {
+    font-family: var(--pst-font-family-monospace);
+    font-size: .875em;
+}
+
 /* Execution controls */
 div[class*=highlight-].tdoc-exec {
     flex-direction: row;
@@ -39,9 +64,9 @@ div.tdoc-exec-controls {
     margin-left: 0.3rem;
 }
 div.tdoc-exec-controls button {
-    aspect-ratio: 1;
+    width: 1.8rem;
+    height: 1.8rem;
     border-radius: 0.25rem;
-    padding: 0.3rem;
     border: 1px solid var(--pst-color-border);
     background-color: var(--pst-color-surface);
     font: var(--fa-font-solid);
@@ -50,12 +75,12 @@ div.tdoc-exec-controls button {
 div.tdoc-exec-controls button:hover {
     background-color: var(--pst-color-shadow);
 }
-div.tdoc-exec-controls * {
-    margin-top: 0.3rem;
-}
 div.tdoc-exec-controls *:first-child {
     margin-top: 0;
 }
+div.tdoc-exec-controls * {
+    margin-top: 0.3rem;
+}
 div.tdoc-exec-controls button.tdoc-exec-run::before {
     content: '\f04b';
 }