Add custom transforms example + documentation, fixes #1

README.md

@@ -36,18 +36,37 @@ You can export the rendered markdown to a PDF file.
 
 ![PDF Demo](./assets/PDFDemo.png)
 
-### See the changes you've made
+### Diff
 
-You can use the diff view to see exactly what changes have been made to the document.
+You can use the diff view to see exactly what changes have been made to the document as compared to the original state.
 
 ![Diff Demo](./assets/DiffDemo.png)
 
-### Use the document in other editors
+### Copy rendered contents
 
 Copy and paste the document into other tools, such as email clients.
 
 ![Copy Demo](./assets/CopyDemo.png)
 
+### Custom transforms
+
+You can create custom transforms that turn specific regexes to custom output HTML.
+This is useful for implementing functionalities such as issue links, for example (as showcased in the demo):
+
+```js
+const transforms = [{
+  target: /[0-9a-z\-]+\/[0-9a-z\-]+#\d{1,10}/g,
+  transform: (match) => {
+    const [repo, issueId] = match.split('#');
+    return `<a href="https://github.com/${repo}/issues/${issueId}">${match}</a>`
+  }
+}]
+```
+
+Then provide the transforms array as the `transforms` prop to MyST editor.
+
+For more examples see the exampleTransforms object in [the demo HTML](src/index.html).
+
 ## Usage
 
 ### Building the component
@@ -122,6 +141,7 @@ Here are the props you can pass to the MystEditor component:
 - `printCallback` *(default: window.print())* - gets called when you click the `Export to PDF` button
 - `topbar` *(default: true)* - whether to show the topbar
 - `templateList` - path/url to a JSON file containing your document templates. For an example see `public/linkedtemplatelist.json`.
+- `transforms` - [custom transforms](#custom-transforms)
 - `collaboration` - options related to live collaboration:
   - `enabled` *(default: false)*
   - `wsUrl` *(example: ws://example:4444)* - url of the websocket server

src/index.html

@@ -12,6 +12,11 @@
 
 ## [h2 which is a link](https://google.com)
 
+Issue in this repo: #1
+PR in this repo: !2
+Issue in another repo: github/docs#30828
+PR in another repo: github/docs!100
+
 ### h3
 
 #### h4
@@ -120,13 +125,54 @@
     const username = Math.floor(Math.random() * 1000).toString();
     const color = usercolors[Math.floor(Math.random() * usercolors.length)];
 
+    let exampleTransforms = [
+      {  // Other repo issue links
+        target: /[0-9a-z\-]+\/[0-9a-z\-]+#\d{1,10}/g,
+        transform: (match) => {
+          const [repo, issueId] = match.split('#');
+          return `<a href="https://github.com/${repo}/issues/${issueId}">${match}</a>`
+        }
+      },
+      { // Other repo PR links
+        target: /[0-9a-z\-]+\/[0-9a-z\-]+\!\d+/g,
+        transform: (match) => {
+          const [repo, prid] = match.split("!");
+          return `<a href="https://github.com/${repo}/pull/${prid}">${match}</a>`
+        }
+      },
+      {  // Same repo issue links
+        target: /#\d+/g,
+        transform: (match) => {
+          const issueId = match.slice(1);
+          return `<a href="https://github.com/antmicro/myst-editor/issues/${issueId}">${match}</a>`
+        }
+      },
+      { // Same repo PR links
+        target: /\!\d+/g,
+        transform: (match) => {
+          const prid = match.slice(1);
+          return `<a href="https://github.com/antmicro/myst-editor/pull/${prid}">${match}</a>`
+        }
+      },
+      { // User links
+        target: /@[0-9a-z\-]+/g,
+        transform: (match) => {
+          const user = match.slice(1,);
+          return `
+          <a href='https://github.com/${user}'>
+            ${user}
+          </a>`
+        }
+      },
+    ]
     render(
       html`
         <${MystEditor}
           printCallback=${exampleCallback}
           templatelist="linkedtemplatelist.json"
           initialText=${exampleText}
           id="textarea_id"
+          transforms=${exampleTransforms}
           collaboration=${{
             enabled: import.meta.env.VITE_COLLAB == 'ON',
             wsUrl: import.meta.env.VITE_WS_URL,