add copy button (#20)

Author: bollwyvl

CHANGELOG.md

@@ -1,10 +1,17 @@
 # Changelog
 
-> ## 0.1.2 (Unreleased)
->
-> - [#19] fixes some schema descriptions
->
-> [#19]: https://github.com/deathbeds/urljsf/pull/19
+<details>
+<summary>Unreleased</summary>
+
+## 0.1.2
+
+- [#19] fixes some schema descriptions
+- [#20] adds a copy-to-clipboard button to all markdown-rendered `pre` tags
+
+[#19]: https://github.com/deathbeds/urljsf/pull/19
+[#20]: https://github.com/deathbeds/urljsf/pull/20
+
+</details>
 
 ## [0.1.1](https://github.com/deathbeds/urljsf/releases/tag/v0.1.1)
 

atest/suites/01_docs/002_installer.robot

@@ -20,6 +20,7 @@ ${CSS_LICENSE}          ${CSS_U_DATALIST} input[id$="_license"]
 ${CSS_LICENSE_CHECK}    ${CSS_U_DATALIST} input[id$="_license__datalist-check"]
 ${GOOD_LICENSE}         BSD-3-Clause
 ${BAD_LICENSE}          WTPL
+${CSS_COPY_BUTTON}      .urljsf-copybutton
 
 
 *** Test Cases ***
@@ -66,6 +67,10 @@ Verify Installer URL
     ${from_toml} =    TOML.Loads    ${raw}
     ${expected} =    Get TOML Fixture    002_installer.toml
     Should Be JSON Equivalent    ${from_toml}    ${expected}
+    ${copy} =    Set Variable    css:${CSS_COPY_BUTTON}
+    Click Element    ${copy}
+    Wait Until Element Contains    ${copy}    ok
+    Wait Until Element Contains    ${copy}    copy
 
 Verify Installer Download
     [Documentation]    Verify downloaded file

docs/use/advanced/templates.md

@@ -22,6 +22,29 @@ Each `template` gets an object of this form:
 }
 ```
 
+## Markdown
+
+Most non-`url` templates are rendered as [Markdown][md].
+
+Much of [GitHub flavored Markdown][gfm] is supported, but not platform-specific features
+like magic `#{issue}` transforms and `mermaid` fenced code blocks. Indeed, no syntax
+highlighting is supported, so generally any fence info will be discarded.
+
+[gfm]: https://github.github.com/gfm
+[md]: https://daringfireball.net/projects/markdown
+
+### Copy Code
+
+All `pre` tags (generated with triple ticks, tildes, etc) will be rendered with a `copy`
+button.
+
+This helps for URL-based workflows that don't allow for populating key parameters such
+as GitLab's `/new/` URL, or otherwise complex ones (GitHub's `/edit/`).
+
+In this case, it is recommended to provide a [`below_{form}`](#below-form) template
+which shows the file content, with narrative describing how to copy the code and what to
+do with it.
+
 ### Special Templates
 
 A few well-known template names and patterns are used globally.

js/src/components/array-template.tsx

@@ -17,6 +17,7 @@ import {
 import Markdown from 'markdown-to-jsx';
 
 import { useMarkdown } from '../utils.js';
+import { MD_OPTIONS } from './markdown.js';
 
 export function ArrayFieldTemplate<
   T = any,
@@ -62,7 +63,7 @@ export function ArrayFieldTemplate<
 
   let richDescription =
     description && useMarkdown(uiOptions) ? (
-      <Markdown>{description}</Markdown>
+      <Markdown options={MD_OPTIONS}>{description}</Markdown>
     ) : (
       description
     );

js/src/components/check-item.tsx

@@ -4,6 +4,8 @@ import type { RJSFValidationError } from '@rjsf/utils';
 
 import Markdown from 'markdown-to-jsx';
 
+import { MD_OPTIONS } from './markdown.js';
+
 export function CheckItem(props: CheckItemProps): JSX.Element {
   let result: string;
   if (Array.isArray(props.result)) {
@@ -25,14 +27,20 @@ export function CheckItem(props: CheckItemProps): JSX.Element {
           disabled
         ></input>
         <label className="form-check-label">
-          <em>{props.markdown ? <Markdown>{props.label}</Markdown> : props.label}</em>
+          <em>
+            {props.markdown ? (
+              <Markdown options={MD_OPTIONS}>{props.label}</Markdown>
+            ) : (
+              props.label
+            )}
+          </em>
         </label>
       </div>
       {!result ? (
         <></>
       ) : props.markdown ? (
         <div>
-          <Markdown>{result}</Markdown>
+          <Markdown options={MD_OPTIONS}>{result}</Markdown>
         </div>
       ) : (
         result

js/src/components/copy-paste-pre.tsx

@@ -0,0 +1,77 @@
+// Copyright (C) urljsf contributors.
+// Distributed under the terms of the Modified BSD License.
+import { useState } from 'react';
+
+const PRE_STYLE = { position: 'relative' };
+
+type TPreProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLPreElement>,
+  HTMLPreElement
+>;
+
+const COPY_STYLE = {
+  position: 'absolute',
+  top: '0.25em',
+  right: '0.25em',
+  opacity: 0.8,
+};
+
+const NOT_YET = 0;
+const COPIED = 1;
+const ERRORED = 2;
+
+const STATE_ICON = ['primary', 'success', 'warning'];
+const STATE_LABEL = ['copy', 'ok', 'error'];
+
+export function CopyPastePre(props: TPreProps): JSX.Element {
+  const button: JSX.Element[] = [];
+
+  const text = `${(props.children as any)?.props?.children || ''}`.trim();
+
+  if (text) {
+    const [copyState, setCopyState] = useState(NOT_YET);
+    const btnClass = `urljsf-copybutton btn btn-${STATE_ICON[copyState]}`;
+    const btnLabel = STATE_LABEL[copyState];
+
+    const onClick = () => {
+      setCopyState(copyText(text) ? COPIED : ERRORED);
+      setTimeout(() => setCopyState(NOT_YET), 1000);
+    };
+
+    button.push(
+      <button
+        className={btnClass}
+        style={COPY_STYLE}
+        onClick={onClick}
+        aria-label="copy this text"
+      >
+        {btnLabel}
+      </button>,
+    );
+  }
+
+  return (
+    <pre {...props} style={PRE_STYLE}>
+      {...button}
+      {props.children}
+    </pre>
+  );
+}
+
+function copyText(text: string): boolean {
+  const el = document.createElement('textarea');
+  let result = false;
+  try {
+    el.value = text;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    result = true;
+  } catch (err) {
+    /* istanbul ignore next */
+    console.error('failed to copy', err);
+  } finally {
+    el.remove();
+  }
+  return result;
+}

js/src/components/form.tsx

@@ -32,6 +32,7 @@ import {
 } from '../tokens.js';
 import { getConfig, getIdPrefix, initFormProps } from '../utils.js';
 import { CheckItem } from './check-item.js';
+import { MD_OPTIONS } from './markdown.js';
 import { Style } from './style.js';
 
 const FORM_PRE_DEFAULTS: Partial<FormProps> = {
@@ -46,6 +47,7 @@ const SUBMIT_MD_OPTIONS: MarkdownToJSX.Options = {
   forceInline: true,
   forceBlock: false,
   forceWrapper: false,
+  ...MD_OPTIONS,
 };
 
 const BTN_COMMON: Pick<ButtonProps, 'size' | 'className'> = {
@@ -280,7 +282,7 @@ function UrljsfForm(props: IUrljsfFormProps): JSX.Element {
       ? []
       : [
           <li className="list-group-item" key={`${key}-where`}>
-            <Markdown>{tmpl.value}</Markdown>
+            <Markdown options={MD_OPTIONS}>{tmpl.value}</Markdown>
           </li>,
         ];
   };

js/src/components/markdown.tsx

@@ -0,0 +1,9 @@
+// Copyright (C) urljsf contributors.
+// Distributed under the terms of the Modified BSD License.
+import type { MarkdownToJSX } from 'markdown-to-jsx';
+
+import { CopyPastePre } from './copy-paste-pre.js';
+
+export const MD_OPTIONS: MarkdownToJSX.Options = {
+  overrides: { pre: CopyPastePre },
+};

js/src/components/object-template.tsx

@@ -21,6 +21,7 @@ import Markdown from 'markdown-to-jsx';
 import { UrljsfGridOptions } from '../_props.js';
 import { emptyObject } from '../tokens.js';
 import { useMarkdown } from '../utils.js';
+import { MD_OPTIONS } from './markdown.js';
 
 const DEFAULT_GRID_OPTIONS: UrljsfGridOptions = {
   default: ['col-12'],
@@ -71,7 +72,7 @@ export function ObjectGridTemplate<
 
   let richDescription =
     description && useMarkdown(uiOptions) ? (
-      <Markdown>{description}</Markdown>
+      <Markdown options={MD_OPTIONS}>{description}</Markdown>
     ) : (
       description
     );

package.json

@@ -81,7 +81,8 @@
     "config": {
       "line-length": false,
       "first-line-h1": false,
-      "no-inline-html": false
+      "no-inline-html": false,
+      "link-fragments": false
     }
   }
 }