inline-tools: prevent default behaviour on clicks to prevent form sub…

…mitting (codex-team#454) * fix inline-tool buttons * prevent default on inline-tool clicks * update * update version from package json * update version and use badgen in README * upd
zhang-weizhen · Sep 20, 2018 · bdae8d3 · bdae8d3
1 parent cbe8fd2
commit bdae8d3
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <p align="center"><img src="https://capella.pics/3c0b525b-50d9-4720-8aad-9148114cfa6e.jpg"></p>
 
-![](https://flat.badgen.net/badge/CodeX%20Editor/v2.0.10/blue?icon=npm)
+[![](https://flat.badgen.net/npm/v/codex.editor?icon=npm)](https://www.npmjs.com/package/codex.editor)
 
 ## Version 2.0-beta is here!
 

diff --git a/build/codex-editor.js b/build/codex-editor.js
diff --git a/build/codex-editor.js.map b/build/codex-editor.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "build/codex-editor.js",
   "scripts": {

diff --git a/src/components/inline-tools/inline-tool-bold.ts b/src/components/inline-tools/inline-tool-bold.ts
@@ -44,6 +44,7 @@ export default class BoldInlineTool implements InlineTool {
    */
   public render(): HTMLElement {
     this.nodes.button = document.createElement('button');
+    this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
     this.nodes.button.appendChild($.svg('bold', 13, 15));
     return this.nodes.button;

diff --git a/src/components/inline-tools/inline-tool-italic.ts b/src/components/inline-tools/inline-tool-italic.ts
@@ -43,6 +43,7 @@ export default class ItalicInlineTool implements InlineTool {
    */
   public render(): HTMLElement {
     this.nodes.button = document.createElement('button');
+    this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
     this.nodes.button.appendChild($.svg('italic', 6, 15));
     return this.nodes.button;

diff --git a/src/components/inline-tools/inline-tool-link.ts b/src/components/inline-tools/inline-tool-link.ts
@@ -71,6 +71,7 @@ export default class LinkInlineTool implements InlineTool {
    */
   public render(): HTMLElement {
     this.nodes.button = document.createElement('button');
+    this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
     this.nodes.button.appendChild($.svg('link', 15, 14));
     this.nodes.button.appendChild($.svg('unlink', 16, 18));

diff --git a/src/components/modules/toolbar-inline.ts b/src/components/modules/toolbar-inline.ts
@@ -304,8 +304,9 @@ export default class InlineToolbar extends Module {
       this.nodes.actions.appendChild(actions);
     }
 
-    this.Editor.Listeners.on(button, 'click', () => {
+    this.Editor.Listeners.on(button, 'click', (event) => {
       this.toolClicked(tool);
+      event.preventDefault();
     });
 
     /**