js-draw 0.17.3 → 0.17.4

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.17.4
+ * Fix `CanvasRenderer` and `SVGRenderer` not exported.
+ * Fix pasting images copied from js-draw into some external apps.
+     * Pasting selected items from `js-draw` still doesn't work for many apps.
+
 # 0.17.3
  * Fix `isRestylableComponent` not exported.
  * Add a method to get the `Editor`'s average background color.
@@ -8,7 +13,7 @@
      - This was causing duplicated `TextComponent`s to have, in part, the same styles as the original, even after attempting to restyle them with the restyle tool.
    - Find tool: Don't add viewport transformations to the undo stack.
    - Collaborative editing: Fix changing background size/location not synced between editors.
-   - Upgrade dependencies to latest versions ([see commit for details](https://github.com/personalizedrefrigerator/js-draw/commit/427a64037320ca96232d47f268258206398f3796))
+   - Upgrades dependencies to latest versions ([see commit for details](https://github.com/personalizedrefrigerator/js-draw/commit/427a64037320ca96232d47f268258206398f3796))
 
 # 0.17.1
  * Bug fixes

package/README.md

@@ -4,11 +4,11 @@
 
 ![](docs/img/js-draw.jpg)
 
-For example usage, see [one of the examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md) or read [the (work-in-progress) documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/lib.html).
+For example usage, see [one of the examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md) or read [the documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/lib.html).
 
 # API
 
-To use `js-draw`, 
+To use `js-draw`,
 
 ## Creating an `Editor`
 
@@ -33,14 +33,14 @@ import 'js-draw/bundle';
 
 const editor = new Editor(document.body);
 ```
-`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing it applies editor-specific CSS to the document.
+`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing or including it with a `<script src="..."></script>` tag applies editor-specific CSS to the document.
 
 ### Without a bundler
 
 If you're not using a bundler, consider using the pre-bundled editor:
 ```html
-<!-- Replace 0.2.3 with the latest version of js-draw -->
-<script src="https://cdn.jsdelivr.net/npm/js-draw@0.2.3/dist/bundle.js"></script>
+<!-- Replace 0.17.3 with the latest version of js-draw -->
+<script src="https://cdn.jsdelivr.net/npm/js-draw@0.17.3/dist/bundle.js"></script>
 <script>
     const editor = new jsdraw.Editor(document.body);
     editor.addToolbar();
@@ -65,6 +65,15 @@ toolbar.addActionButton('Save', () => {
     console.log('The saved SVG:', svgElem.outerHTML);
 });
 ```
+or alternatively, with an icon,
+```ts
+toolbar.addActionButton({
+  label: 'Save'
+  icon: editor.icons.makeSaveIcon(),
+}, () => {
+    // Save content here.
+});
+```
 
 ## Loading from an SVG
 
@@ -95,7 +104,7 @@ renders as
 
 ![screenshot of the image editor, displaying a green checkmark. The circle is invisible](docs/img/unsupported-elements--in-editor.png)
 
-but exports to 
+but exports to
 ```xml
 <svg viewBox="156 74 200 150" width="200" height="150" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><g><path d="M156,150M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path></g><circle cx="200" cy="100" r="40" fill="red"></circle></svg>
 ```
@@ -158,7 +167,7 @@ const editor = new Editor(document.body, {
         select: 'Selecciona',
         thicknessLabel: 'Tamaño: ',
         colorLabel: 'Color: ',
-        
+
         ...
     },
 });
@@ -205,4 +214,4 @@ body .imageEditorContainer {
     --secondary-foreground-color: black;
 }
 ```
-disables the dark theme and creates a theme that primarially uses yellow/green colors.
+disables the dark theme and creates a theme that primarily uses yellow/green colors.