feat(Docs): Inject Executable Toolbar into theme previews
Add `toolbar=false` as URL query to disable the toolbar
Close
@@ -68,6 +68,25 @@ export const getPreviewHead = (): HTMLHeadElement | null => {
return getPreviewDoc()?.getElementsByTagName('head')[0] ?? null
}
+const injectExecutableToolbar = () => {
+ const query = window.location.search
+ const toolbarDisabled: boolean = query.includes('toolbar=false')
+
+ if (toolbarDisabled) {
+ return
+ }
+
+ const doc = getPreviewDoc()
+ const article = doc?.querySelector('[data-itemscope="root"]')
+
+ if (doc && article) {
+ const toolbar = doc.createElement('stencila-executable-document-toolbar')
+ toolbar.setAttribute('source-url', '#')
+
+ article.prepend(toolbar)
+ }
+}
+
/**
* Inject necessary stylesheets and scripts to fully render a document
* Currently this function inject the scripts for Stencila Components. Note that you will need to trigger the
@@ -78,7 +97,6 @@ export const getPreviewHead = (): HTMLHeadElement | null => {
export const injectPreviewAssets = (): void => {
const previewHead = getPreviewHead()
- if (previewHead != null) {
if (previewHead != null) {
const stencilaComponentsES6 = create('script')
stencilaComponentsES6.setAttribute('type', 'module')
@@ -97,6 +115,7 @@ export const injectPreviewAssets = (): void => {
append(previewHead, stencilaComponentsES6)
append(previewHead, stencilaComponents)
- }
+
+ injectExecutableToolbar()
}
}
