add import and export diagram

- export diagram
  * add a diagram export dialog where you can choose the file name
    and download type (code, png, pdf, ...)
  * set default download type to code
  * open file save dialog via menu or Ctrl+S (or Meta+S for Mac)
- import diagram
  * similar to [draw.io](https://app.diagrams.net)
  * open a PlantUML diagram image, use metat data to get diagram code
    and load this diagram (Note: meta data is currently only supported
    by PNG and SVG diagram files)
  * support drag&drop
  * add diagram import dialog
- since three are now multiple options/action -> create a little
  editor menu
- add documentation (including gif examples)

.editorconfig

@@ -20,3 +20,6 @@ insert_final_newline = false
 
 [{Dockerfile,Dockerfile.*}]
 indent_size = 4
+
+[.vscode/*.json]
+indent_size = 4

.vscode/settings.json

@@ -12,6 +12,7 @@
         "Lalloni",
         "monaco",
         "plantuml",
+        "puml",
         "Roques",
         "servlet",
         "servlets",
@@ -20,5 +21,6 @@
         "undock",
         "utxt"
     ],
-    "cSpell.allowCompoundWords": true
-}
+    "cSpell.allowCompoundWords": true,
+    "svg.preview.background": "transparent"
+}

docs/WebUI/import-export.md

@@ -0,0 +1,21 @@
+# Import and Export editable PlantUML Diagrams
+
+Similar to [draw.io](https://app.diagrams.net) it is possible to load and continue editing PlantUML diagram images.
+
+
+# Export a diagram
+
+Via the editor menu or Ctrl+S (or Meta+S in the case of a Mac) you can open the file save dialog.
+Here you can edit the file name, choose a file/diagram type and download the diagram.
+The default is to download the PlantUML code.
+
+![export](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/diagram-export.gif)
+
+
+# Import a diagram
+
+This feature is based on the PlantUML meta data which currently **support only PNG and SVG** diagrams.
+Besides a diagram image, you can of course also load a diagram code file.
+Moreover, because it is so nice and convenient, we also added a drag-and-drop feature.
+
+![import](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/diagram-import.gif)

src/main/webapp/index.jsp

@@ -36,13 +36,26 @@
         <div>
           <div class="btn-input">
             <input id="url" type="text" name="url" value="png/<%= diagramUrl %>" />
-            <input type="image" alt="copy" src="assets/copy.svg" onclick="copyUrlToClipboard()" />
+            <input type="image" alt="copy" src="assets/actions/copy.svg" onclick="copyUrlToClipboard()" />
           </div>
         </div>
         <div class="flex-main monaco-editor-container">
           <textarea id="initCode" name="initCode" style="display: none;"><%= net.sourceforge.plantuml.servlet.PlantUmlServlet.stringToHTMLString(decoded) %></textarea>
           <div id="monaco-editor"></div>
-          <input type="image" alt="copy" src="assets/copy.svg" onclick="copyCodeToClipboard()" />
+          <div class="editor-menu" tabindex="-1">
+            <div class="menu-kebab">
+              <div class="kebab-circle"></div>
+              <div class="kebab-circle"></div>
+              <div class="kebab-circle"></div>
+              <div class="kebab-circle"></div>
+              <div class="kebab-circle"></div>
+            </div>
+            <div class="menu-items">
+              <input class="menu-item" type="image" alt="copy" title="Copy code" src="assets/actions/copy.svg" onclick="copyCodeToClipboard()" />
+              <input class="menu-item" type="image" alt="import" title="Import diagram" src="assets/actions/upload.svg" onclick="openModal('diagram-import')" />
+              <input class="menu-item" type="image" alt="export" title="Export diagram" src="assets/actions/download.svg" onclick="openModal('diagram-export')" />
+            </div>
+          </div>
         </div>
       </div>
       <div id="previewer-main-container" class="previewer flex-main">
@@ -52,6 +65,9 @@
     <div class="footer">
       <%@ include file="resource/footer.jsp" %>
     </div>
+    <!-- editor modals -->
+    <%@ include file="resource/diagram-import.jsp" %>
+    <%@ include file="resource/diagram-export.jsp" %>
   </div>
 </body>
 </html>