Improve labels, errors, and docs

README.md

@@ -5,11 +5,12 @@ This plugin allows you to embed js-draw whiteboards anywhere in your SiYuan docu
 
 ## Usage instructions
 - Install the plugin from the marketplace. You can find it by searching for `js-draw`. 
-- To add a new drawing to your document:
+- To add a new whiteboard to your document:
-  1. Type `/Insert Drawing` in your document, and select the correct menu entry
+  1. Type `/Insert whiteboard` in your document, and select the correct menu entry
   2. The whiteboard editor will open in a new tab. Draw as you like, then click the Save button and close the tab.
-- To edit the image later:
+- To edit the whiteboard later:
-  1. Right-click on the image (or click the three dots on mobile), select "Plugin" > "Edit with js-draw" in the menu
+  1. Left-click or tap on the whiteboard to select it, then click on the Edit icon in the top bar
+     - Or right-click on the whiteboard (or click the three dots on mobile), select "Plugin" > "Edit whiteboard" in the menu
   2. The editor tab will open, edit your file as you like, then click the Save button and close the tab.
 
 ## Planned features

public/i18n/en_US.json

@@ -1,13 +1,15 @@
 {
-  "insertDrawing": "Insert Drawing",
+  "insertWhiteboard": "Insert whiteboard",
-  "editDrawing": "Edit with js-draw",
+  "editWhiteboard": "Edit whiteboard",
-  "editShortcut": "Open editor directly",
+  "editShortcut": "Edit selected whiteboard",
   "errNoFileID": "File ID missing - couldn't open file.",
-  "errSyncIDNotFound": "Couldn't find SyncID in document for drawing, make sure you're trying to edit a drawing that is included in at least a note.",
+  "errNotAWhiteboard": "You must select a whiteboard, not a regular image.",
+  "errSyncIDNotFound": "Couldn't find SyncID in document for drawing, make sure you're trying to edit a whiteboard that is included in at least a note.",
   "errCreateUnknown": "Unknown error while creating editor, please try again.",
   "errInvalidBackgroundColor": "Invalid background color! Please enter an HEX color, like #000000 (black) or #FFFFFF (white). The old background color will be used.",
   "msgMustSelect": "Select a whiteboard in your document by left-clicking it, then use this icon/shortcut to open the editor directly.",
-  "drawing": "Drawing",
+  "usageInstructionsLink": " <a href='https://s.massive.box/jsdraw-plugin-instructions'>Usage instructions</a>",
+  "whiteboard": "Whiteboard",
   "settings": {
     "name": "js-draw Plugin Settings",
     "suggestedColors":{
@@ -20,15 +22,15 @@
     },
     "grid": {
       "title": "Enable grid by default",
-      "description": "Enable to automatically turn on the grid on new drawings."
+      "description": "Enable to automatically turn on the grid on new whiteboards."
     },
     "backgroundDropdown":{
       "title": "Background color",
-      "description": "Default background color for new drawings."
+      "description": "Default background color for new whiteboards."
     },
     "background": {
       "title": "Custom background",
-      "description": "Hexadecimal code of the custom background color for new drawings.<br /><b>This setting is only applied if \"Background Color\" is set to \"Custom\"!</b>"
+      "description": "Hexadecimal code of the custom background color for new whiteboards.<br /><b>This setting is only applied if \"Background Color\" is set to \"Custom\"!</b>"
     },
     "dialogOnDesktop": {
       "title": "Open editor as dialog on desktop",
@@ -40,7 +42,7 @@
     },
     "restorePosition": {
       "title": "Remember editor position",
-      "description": "When enabled, the editor will remember the zoom factor and position, and it will restore them the next time you open the drawing."
+      "description": "When enabled, the editor will remember the zoom factor and position, and it will restore them the next time you open the same whiteboard."
     }
   }
 }

src/editor.ts

@@ -221,7 +221,7 @@ export class EditorManager {
         openTab({
             app: p.app,
             custom: {
-                title: p.i18n.drawing,
+                title: p.i18n.whiteboard,
                 icon: 'iconDraw',
                 id: "siyuan-jsdraw-pluginwhiteboard",
                 data: {

src/index.ts

@@ -26,9 +26,9 @@ export default class DrawJSPlugin extends Plugin {
         await this.startAnalytics();
 
         this.protyleSlash = [{
-            id: "insert-drawing",
+            id: "insert-whiteboard",
-            filter: ["Insert Drawing", "Add drawing", "whiteboard", "freehand", "graphics", "jsdraw"],
+            filter: ["Insert Drawing", "Add drawing", "Insert whiteboard", "Add whiteboard", "whiteboard", "freehand", "graphics", "jsdraw"],
-            html: getMenuHTML("iconDraw", this.i18n.insertDrawing),
+            html: getMenuHTML("iconDraw", this.i18n.insertWhiteboard),
             callback: async (protyle: Protyle) => {
                 void this.analytics.sendEvent('create');
                 const fileID = generateRandomString();
@@ -43,7 +43,7 @@ export default class DrawJSPlugin extends Plugin {
             if (ids === null) return;
             e.detail.menu.addItem({
                 icon: "iconDraw",
-                label: this.i18n.editDrawing,
+                label: this.i18n.editWhiteboard,
                 click: async () => {
                     void this.analytics.sendEvent('edit');
                     (await EditorManager.create(ids.fileID, this)).open(this);
@@ -61,7 +61,7 @@ export default class DrawJSPlugin extends Plugin {
 
         this.addTopBar({
             icon: "iconDraw",
-            title: this.i18n.insertDrawing,
+            title: this.i18n.editShortcut,
             callback: async () => {
                 await this.editSelectedImg();
             },
@@ -82,12 +82,13 @@ export default class DrawJSPlugin extends Plugin {
 
         let selectedImg = document.getElementsByClassName('img--select');
         if(selectedImg.length == 0) {
-            showMessage(this.i18n.msgMustSelect, 5000, 'info');
+            showMessage(this.i18n.msgMustSelect + this.i18n.usageInstructionsLink, 5000, 'info');
             return;
         }
 
         let ids = imgSrcToIDs(findImgSrc(selectedImg[0] as HTMLElement));
         if(ids == null) {
+            showMessage(this.i18n.errNotAWhiteboard + + this.i18n.usageInstructionsLink, 5000, 'error');
             return;
         }
         void this.analytics.sendEvent('edit');