feat: plantuml plugin

Author: pd4d10

packages/example/src/App.svelte

@@ -4,6 +4,7 @@
   import math from '@bytemd/plugin-math'
   import graphviz from '@bytemd/plugin-graphviz'
   import mermaid from '@bytemd/plugin-mermaid'
+  import plantuml from '@bytemd/plugin-plantuml'
 
   let source = `# bytemd [![npm](https://img.shields.io/npm/v/bytemd.svg)](https://npm.im/bytemd)
 
@@ -51,6 +52,12 @@ digraph G {
 }
 \`\`\`
 
+## PlantUML
+
+\`\`\`plantuml
+A -> B: Hello
+\`\`\`
+
 ## Code syntax highlight
 
 \`\`\`js
@@ -75,12 +82,14 @@ new Viewer({
     math: true,
     graphviz: true,
     mermaid: true,
+    plantuml: true,
   }
   $: plugins = [
     enabled.highlight && highlight(),
     enabled.math && math(),
     enabled.graphviz && graphviz(),
     enabled.mermaid && mermaid(),
+    enabled.plantuml && plantuml()
   ].filter(x => x)
 </script>
 
@@ -95,9 +104,6 @@ new Viewer({
 
 <div>
   Plugins:
-  <label>
-    <input type=checkbox bind:checked={enabled.highlight} /> highlight
-  </label>
   <label>
     <input type=checkbox bind:checked={enabled.math} /> math
   </label>
@@ -107,5 +113,11 @@ new Viewer({
   <label>
     <input type=checkbox bind:checked={enabled.mermaid} /> mermaid
   </label>
+  <label>
+    <input type=checkbox bind:checked={enabled.plantuml} /> plantuml
+  </label>
+  <label>
+    <input type=checkbox bind:checked={enabled.highlight} /> highlight
+  </label>
 </div>
 <Editor {source} plugins={plugins} />

packages/plugin-plantuml/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rongjian Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-plantuml/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@bytemd/plugin-plantuml",
+  "version": "0.0.1",
+  "description": "Plantuml plugin for bytemd",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "src/index.d.ts",
+  "svelte": "src/index.js",
+  "keywords": [],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "author": "Rongjian Zhang <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "plantuml-encoder": "^1.4.0"
+  },
+  "peerDependencies": {
+    "bytemd": "*"
+  }
+}

packages/plugin-plantuml/src/PlantumlView.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { encode } from 'plantuml-encoder'
+  export let value
+</script>
+
+<img src={`//www.plantuml.com/plantuml/img/${encode(value)}`} alt="plantuml" />

packages/plugin-plantuml/src/index.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'bytemd';
+export interface BytemdPlantumlOptions {
+}
+export default function plantuml({}?: BytemdPlantumlOptions): Plugin;

packages/plugin-plantuml/src/index.js

@@ -0,0 +1,10 @@
+import PlantumlView from './PlantumlView.svelte';
+export default function plantuml(_a) {
+    _a = {};
+    return {
+        shouldTransformElement: function (node) {
+            return node.type === 'code' && node.lang === 'plantuml';
+        },
+        component: PlantumlView
+    };
+}

packages/plugin-plantuml/src/index.ts

@@ -0,0 +1,13 @@
+import { Plugin } from 'bytemd';
+import PlantumlView from './PlantumlView.svelte';
+
+export interface BytemdPlantumlOptions {}
+
+export default function plantuml({}: BytemdPlantumlOptions = {}): Plugin {
+  return {
+    shouldTransformElement(node) {
+      return node.type === 'code' && node.lang === 'plantuml';
+    },
+    component: PlantumlView
+  };
+}