feat: new features (#17)

* feat: inline block preview can download svg file and drawio file

* feat: plugin now can manully config dark mode

package.json

@@ -13,6 +13,7 @@
     "@logseq/libs": "^0.0.14",
     "eventemitter3": "^5.0.1",
     "js-base64": "^3.7.5",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -21,6 +22,7 @@
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "10.0.3",
+    "@types/lodash": "^4.17.0",
     "@types/node": "18.16.8",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",

readme.md

@@ -11,6 +11,7 @@ Using drawio diagrams in Logseq.
 - Preview in block and in maximize layout
 - multiple drawio theme support
 - dark mode support
+- download drawio file in logseq, both in svg and drawio file
 
 ## How to get started
 1. Clone the repository and submodule.

src/DrawioManager.ts

@@ -8,6 +8,14 @@ export enum UiMode {
   Simple = 'simple'
 }
 
+// this enum is used for setting
+export enum SettingDarkMode {
+  Off = 'off',
+  On = 'on',
+  Auto = 'auto'
+}
+
+// this enum is used for drawio url config
 enum DarkMode {
   Off = '0',
   On = '1',
@@ -29,7 +37,13 @@ class UrlConfig {
 
   constructor() {
     this.ui = logseq.settings?.ui ?? UiMode.Kennedy
-    this.dark = DarkMode.Auto
+    const settingDarkMode = logseq.settings?.darkMode ?? SettingDarkMode.Auto
+    this.dark =
+      settingDarkMode === SettingDarkMode.On
+        ? DarkMode.On
+        : settingDarkMode === SettingDarkMode.Off
+        ? DarkMode.Off
+        : DarkMode.Auto
   }
 }
 
@@ -62,7 +76,11 @@ class ConfigManager {
     this.urlConfig = new UrlConfig()
     const { preferredThemeMode } = await logseq.App.getUserConfigs()
     this.urlConfig.dark =
-      preferredThemeMode === 'light' ? DarkMode.Off : DarkMode.On
+      this.urlConfig.dark === DarkMode.Auto
+        ? preferredThemeMode === 'light'
+          ? DarkMode.Off
+          : DarkMode.On
+        : this.urlConfig.dark
     const urlParams = new URLSearchParams(this.urlConfig as any)
     return `${this.baseUrl}?${urlParams.toString()}`
   }

src/main.ts

@@ -17,9 +17,6 @@ import { PreviewManager } from './PreviewManager'
 import { SpinnerManager } from './SpinnerManager'
 import { settings } from './settings'
 
-// @ts-expect-error
-const css = (t, ...args) => String.raw(t, ...args)
-
 const pluginId = PL.id
 
 let drawioManager: DrawioManager
@@ -40,7 +37,8 @@ function main() {
         edit: (e: LogseqDomEvent) => openFile(e, drawioManager, spinnerManager),
         remove: removeFile,
         preview: (e: LogseqDomEvent) => preview(e, previewManager),
-        download
+        download: (e: LogseqDomEvent) => download(e, 'origin'),
+        'download-svg': (e: LogseqDomEvent) => download(e, 'svg')
       }
     }
 
@@ -63,7 +61,7 @@ function main() {
       if (type !== ':drawio') return
 
       const svg = await storage.getItem(fileName)
-      const simplifiedSvg = svg?.replace(/content=\".*?\"/, '')
+      const simplifiedSvg = svg?.replace(/content=".*?"/, '')
       const base64Svg = encode(simplifiedSvg ?? '')
       const svgImg = `<img style="background-color: white;" src="data:image/svg+xml;base64,${base64Svg}">`
 
@@ -78,12 +76,15 @@ function main() {
   <div class="drawio-plugin__toolbar">
     <div class="drawio-plugin__toolbar-title"></div>
     <div class="drawio-plugin__toolbar-actions">
-      <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="edit">
+      <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="edit" title="edit file">
         <svg width="18" height="18" stroke="currentColor" viewBox="0 0 24 24" fill="none"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
       </button>
-      <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="download">
+      <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="download" title="download drawio file">
         <svg viewBox="0 0 1024 1024" width="18" height="18" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M810.666667 938.666667H213.333333c-72.533333 0-128-55.466667-128-128v-170.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v170.666667c0 25.6 17.066667 42.666667 42.666666 42.666666h597.333334c25.6 0 42.666667-17.066667 42.666666-42.666666v-170.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v170.666667c0 72.533333-55.466667 128-128 128z"></path><path d="M512 682.666667c-12.8 0-21.333333-4.266667-29.866667-12.8l-213.333333-213.333334c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l183.466667 183.466667 183.466667-183.466667c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-213.333333 213.333334c-8.533333 8.533333-17.066667 12.8-29.866667 12.8z"></path><path d="M512 682.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v512c0 25.6-17.066667 42.666667-42.666667 42.666667z"></path></svg>
       </button>
+      <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="download-svg" title="download svg file with drawio file embeded">
+        <svg width="24" height="24" class="icon" data-spm-anchor-id="a313x.search_index.0.i3.310d3a81tEjUar" viewBox="0 0 1024 1024"><path fill="#333" d="M220 865V159h338v184c0 17 14 31 31 31h184v148h62V312h-1c1-9-3-18-9-24L643 106c-6-6-16-9-25-8H220c-34 0-61 27-61 61v706c0 34 27 62 61 62h368v-62H220zm400-691 139 138H620V174z" data-spm-anchor-id="a313x.search_index.0.i4.310d3a81tEjUar"/><path fill="#333" d="m803 904 121-121-41-40-91 92V575h-58v260l-92-92-41 41 121 121 41 41 40-42zM408 482c-5-3-17-7-33-12l-20-7c-5-3-7-6-7-10s2-7 6-9c3-2 9-3 16-3 8 0 14 1 18 4s7 8 8 15l1 2h26v-4c-1-14-7-25-16-32-9-6-21-9-36-9-14 0-25 3-34 9-11 7-16 16-16 29 0 12 6 21 16 27l29 11c18 5 22 7 23 8 7 3 10 7 10 12 0 2-1 6-6 9s-12 4-20 4c-9 0-16-1-20-4-5-4-8-10-9-18v-3h-27l1 4c0 16 7 29 18 36 9 7 21 10 37 10s29-4 38-10c10-7 15-17 15-29 0-13-6-23-18-30zm107-63-31 93-32-93h-29l46 129h29l46-129zm89 81h32v20a51 51 0 0 1-26 6c-14 0-24-4-30-11s-9-17-9-31 3-25 10-33c6-7 14-10 24-10 9 0 16 2 21 5 5 4 8 9 10 16v3h27l-1-4c-2-15-8-26-17-33-10-8-23-11-40-11-19 0-34 6-45 20a71 71 0 0 0-16 47c0 19 5 35 16 47 11 13 27 20 48 20 11 0 21-2 30-5s17-7 24-12l1-1v-57h-59v24z"/></svg>
+      </button>
       <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="remove">
         <svg width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="4" y1="7" x2="20" y2="7"></line><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg>
       </button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="max">

src/settings.ts

@@ -1,5 +1,5 @@
-import { SettingSchemaDesc } from "@logseq/libs/dist/LSPlugin.user"
-import { UiMode } from "./DrawioManager"
+import { SettingSchemaDesc } from '@logseq/libs/dist/LSPlugin.user'
+import { SettingDarkMode, UiMode } from './DrawioManager'
 
 export const settings: SettingSchemaDesc[] = [
   {
@@ -9,6 +9,15 @@ export const settings: SettingSchemaDesc[] = [
     description: 'draw.io ui',
     type: 'enum',
     enumChoices: Object.values(UiMode),
-    enumPicker: 'radio',
+    enumPicker: 'radio'
+  },
+  {
+    key: 'darkMode',
+    title: 'Dark Mode',
+    default: SettingDarkMode.Auto,
+    description: 'draw.io dark mode',
+    type: 'enum',
+    enumChoices: Object.values(SettingDarkMode),
+    enumPicker: 'radio'
   }
-]
+]

src/styles/provide.css

@@ -46,5 +46,12 @@
 .drawio-plugin__toolbar-actions button {
     display: inline-flex;
     cursor: pointer;
+    width: 18px;
+    height: 18px;
     @apply mx-1;
 }
+
+.drawio-plugin__toolbar-actions button > svg {
+    width: 100%;
+    height: 100%;
+}

src/utils.ts

@@ -1,7 +1,7 @@
-import { BlockCommandCallback } from '@logseq/libs/dist/LSPlugin'
 import { DrawioManager, PublicEvents } from './DrawioManager'
 import { PreviewManager } from './PreviewManager'
 import { SpinnerManager } from './SpinnerManager'
+import unescape from 'lodash/unescape'
 
 export interface LogseqDomEvent {
   id: string
@@ -197,24 +197,40 @@ export const preview = async (
   })
 }
 
-export const download = async (e: LogseqDomEvent) => {
+export const download = async (e: LogseqDomEvent, type: 'svg' | 'origin') => {
   const storage = logseq.Assets.makeSandboxStorage()
 
   const fileName = e.dataset.fileName
 
-  const svg = await storage.getItem(fileName)
+  const content = await storage.getItem(fileName)
 
-  if (!svg) {
+  if (!content) {
     logseq.UI.showMsg(`file(${fileName}) is not found!`, 'error')
     return
   }
 
+  let file: Blob
+  if (type === 'svg') {
+    file = new Blob([content])
+  } else {
+    const match = content.match(/content="(.*?)"/)
+    if (!match) {
+      logseq.UI.showMsg(
+        `original drawio file can't be extracted from logseq file asset.`,
+        'error'
+      )
+      return
+    }
+    file = new Blob([unescape(match[1])])
+  }
+
   // download
-  const file = new Blob([svg])
+  const newFileName =
+    type === 'svg' ? fileName : fileName.replace(/\.svg$/, '.drawio')
   const url = URL.createObjectURL(file)
   const a = document.createElement('a')
   a.href = url
-  a.download = fileName
+  a.download = newFileName
   a.click()
   setTimeout(() => {
     URL.revokeObjectURL(url)