feat(elements|ino-markdown-editor): edit links after inserting them

packages/elements/src/components/ino-button/ino-button.tsx

@@ -98,6 +98,7 @@ export class Button implements ComponentInterface {
     if (this.disabled) {
       e.preventDefault();
       e.stopPropagation();
+      return;
     }
 
     // this button wants to specifically submit a form

packages/elements/src/components/ino-icon-button/ino-icon-button.tsx

@@ -6,15 +6,15 @@ import {
   Event,
   EventEmitter,
   Host,
-  Prop,
-  h,
   Listen,
+  Prop,
   Watch,
+  h,
 } from '@stencil/core';
 import classNames from 'classnames';
 
-import { ButtonType } from '../types';
 import { JSXBase } from '@stencil/core/internal';
+import { ButtonType } from '../types';
 
 /**
  * @slot default - `<ino-icon>`
@@ -31,10 +31,10 @@ export class IconButton implements ComponentInterface {
 
   @Element() el!: HTMLInoIconButtonElement;
 
-   /**
+  /**
    * Allows the specification of native HTML attributes on the underlying HTML element
    */
-   @Prop() attrs: JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
+  @Prop() attrs: JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
 
   /**
    * Sets the autofocus for this element.
@@ -66,7 +66,7 @@ export class IconButton implements ComponentInterface {
 
   /**
    * The name of the icon of this element.
-    */
+   */
   @Prop() icon?: string;
 
   /**
@@ -114,19 +114,17 @@ export class IconButton implements ComponentInterface {
   }
 
   render() {
-    const hostClasses = classNames(
-      {
-        'ino-icon-button--filled': this.filled,
-      }
-    );
+    const hostClasses = classNames({
+      'ino-icon-button--filled': this.filled,
+    });
 
     const iconButtonClasses = classNames({
       'mdc-icon-button': true,
       'mdc-ripple-upgraded--background-focused': this.activated,
       'ino-icon-button-filled': this.filled,
       'ino-icon-button--disabled': this.disabled,
     });
-    
+
     return (
       <Host class={hostClasses}>
         <button
@@ -136,7 +134,7 @@ export class IconButton implements ComponentInterface {
           type={this.type}
           {...this.attrs}
         >
-          <div class="mdc-icon-button__ripple"/>
+          <div class="mdc-icon-button__ripple" />
           <span class="mdc-icon-button__icon">
             {this.icon ? <ino-icon icon={this.icon} /> : <slot />}
           </span>

packages/elements/src/components/ino-icon-button/readme.md

@@ -148,20 +148,6 @@ The component bubbles the native `click`-Event to the user.
 | `"default"` | `<ino-icon>` |
 
 
-## CSS Custom Properties
-
-| Name                                          | Description                                    |
-| --------------------------------------------- | ---------------------------------------------- |
-| `--ino-icon-button-background-active-color`   | base color of the active background            |
-| `--ino-icon-button-background-color`          | default color of the background                |
-| `--ino-icon-button-background-disabled-color` | base color of the background in disabled state |
-| `--ino-icon-button-icon-active-color`         | color of the active icon itself                |
-| `--ino-icon-button-icon-color`                | default color of the icon itself               |
-| `--ino-icon-button-icon-disabled-color`       | color of the icon itself in disabled state     |
-| `--ino-icon-button-icon-size`                 | size of the icon itself                        |
-| `--ino-icon-button-size`                      | size of the entire button                      |
-
-
 ## Dependencies
 
 ### Used by

packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss

@@ -8,19 +8,18 @@
 */
 
 // specific styles for the markdown editor dialog window that opens when having text selected and clicking the "create link" button
-[data-ino-dialog-section] {
+.ino-dialog-section {
   display: flex;
   justify-content: space-between;
   margin-top: 40px;
 }
 
-[data-ino-dialog-input] {
-  width: 100%;
+.ino-dialog-delete ino-icon {
+  --ino-icon-button-icon-color: #{new_theme.$error};
 }
 
-[data-ino-dialog-delete] > .button {
-  color: new_theme.$error;
-  border-color: new_theme.$error;
+.ino-dialog-form {
+  width: 100%;
 }
 
 // general styles

packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx

@@ -236,11 +236,16 @@ export class MarkdownEditor implements ComponentInterface {
     this.showLinkDialog = true;
   }
 
-  private submitLink(): void {
+  private submitLink(e: Event): void {
+    e.preventDefault();
     this.handleToolbarActionClick(Actions.LINK, this.currentURL);
     this.showLinkDialog = false;
   }
 
+  private isDisabled(): boolean {
+    return !hasValue(this.currentURL) || !this.hasValueChanged;
+  }
+
   render() {
     const isReadonlyMode = this.viewMode === ViewMode.READONLY;
     const isPreviewMode = isReadonlyMode || this.viewMode === ViewMode.PREVIEW;
@@ -289,31 +294,37 @@ export class MarkdownEditor implements ComponentInterface {
         headerText="Insert Link"
         onClose={() => (this.showLinkDialog = false)}
       >
-        <section data-ino-dialog-section slot="body">
-          <ino-input
-            data-ino-dialog-input
-            label="URL"
-            type="text"
-            required={true}
-            autoFocus={true}
-            helper="Enter a valid URL"
-            value={this.currentURL}
-            onValueChange={(e) => this.handleTextInputChange(e)}
-            placeholder="https://example.org"
-          ></ino-input>
+        <section class={'ino-dialog-section'} slot="body">
+          <form class={'ino-dialog-form'} onSubmit={(e) => this.submitLink(e)}>
+            <ino-input
+              label="URL"
+              type="text"
+              required={true}
+              // autoFocus={true} // doesn't work because MUI Dialog traps focus
+              helper="Enter a valid URL"
+              value={this.currentURL}
+              onValueChange={(e) => this.handleTextInputChange(e)}
+              placeholder="https://example.org"
+            ></ino-input>
+            <button type="submit" style={{ display: 'none' }}></button>
+          </form>
         </section>
-        <section data-ino-dialog-section slot="footer">
+        <section class={'ino-dialog-section'} slot="footer">
           <ino-icon-button
-            data-ino-dialog-delete
+            class={'ino-dialog-delete'}
             icon="remove"
             disabled={this.isCreationDialog}
-            onClick={() => this.handleDeleteLink()}
+            onClick={() => {
+              if (!this.isCreationDialog) this.handleDeleteLink();
+            }}
             type="reset"
           ></ino-icon-button>
           <ino-icon-button
             icon="add"
-            disabled={!hasValue(this.currentURL) || !this.hasValueChanged}
-            onClick={() => this.submitLink()}
+            disabled={this.isDisabled()}
+            onClick={(e) => {
+              if (!this.isDisabled()) this.submitLink(e);
+            }}
             type="submit"
           ></ino-icon-button>
         </section>

yarn.lock

@@ -8998,10 +8998,10 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001542.tgz#8cd9296cffba8c37e8b011859136b555078f7bc6"
   integrity sha512-rQE/acX9Xh4r1nZxFWjUb9h1Txy1nt71t1ddlqAIutyFd3DXEI4FtZ79oyovzZrAWCkCZ1kmtdptH8oK2onQKQ==
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
-  version "1.0.30001541"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz"
-  integrity sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
+  version "1.0.30001542"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz#823ddb5aed0a70d5e2bfb49126478e84e9514b85"
+  integrity sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==
 
 capture-exit@^2.0.0:
   version "2.0.0"