From 010d72a4360363eae2c85dcc87451f616c958bab Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sat, 29 Feb 2020 13:37:51 +0800
Subject: [PATCH 01/25] remove ionic

---
 .../lib/components/code-diff-editor/test/basic/index.html    | 5 -----
 .../src/lib/components/code-editor/test/basic/index.html     | 5 -----
 .../components/code-editor/test/cdn-from-config/index.html   | 4 ----
 .../src/lib/components/code-editor/test/cdn/index.html       | 4 ----
 .../lib/components/code-editor/test/json-value/index.html    | 5 -----
 .../src/lib/components/elements-editor/test/basic/index.html | 5 -----
 .../lib/components/elements-editor/test/preview/index.html   | 5 -----
 .../src/lib/components/elements-form/test/basic/index.html   | 5 -----
 .../lib/components/elements-preview/test/basic/index.html    | 5 -----
 .../src/lib/components/elements-view/test/basic/index.html   | 5 -----
 .../lib/components/elements-view/test/code-editor/index.html | 5 -----
 libs/elements/src/lib/components/img/test/basic/index.html   | 5 -----
 .../src/lib/components/text-editor/test/basic/index.html     | 5 -----
 libs/elements/src/lib/components/text-editor/text-editor.tsx | 2 +-
 .../src/lib/components/tree-node/test/basic/index.html       | 5 -----
 libs/elements/src/lib/components/tree/test/basic/index.html  | 5 -----
 libs/elements/src/lib/interfaces/input.interface.ts          | 3 +++
 libs/elements/stencil.dev.config.ts                          | 4 ----
 18 files changed, 4 insertions(+), 78 deletions(-)
 create mode 100644 libs/elements/src/lib/interfaces/input.interface.ts

diff --git a/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html b/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html
index c5098d251..ab07b6b96 100644
--- a/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/code-editor/test/basic/index.html b/libs/elements/src/lib/components/code-editor/test/basic/index.html
index fc9c21cc0..0952af85f 100644
--- a/libs/elements/src/lib/components/code-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html b/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html
index d8dd23b72..fe82cf25d 100644
--- a/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html
@@ -4,10 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
 
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
diff --git a/libs/elements/src/lib/components/code-editor/test/cdn/index.html b/libs/elements/src/lib/components/code-editor/test/cdn/index.html
index a6c824ed0..4eac7a045 100644
--- a/libs/elements/src/lib/components/code-editor/test/cdn/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/cdn/index.html
@@ -4,10 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
 
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
diff --git a/libs/elements/src/lib/components/code-editor/test/json-value/index.html b/libs/elements/src/lib/components/code-editor/test/json-value/index.html
index c1527a505..599bea990 100644
--- a/libs/elements/src/lib/components/code-editor/test/json-value/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/json-value/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/elements-editor/test/basic/index.html b/libs/elements/src/lib/components/elements-editor/test/basic/index.html
index bd54a0dd0..dd2371d47 100644
--- a/libs/elements/src/lib/components/elements-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-editor/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/elements-editor/test/preview/index.html b/libs/elements/src/lib/components/elements-editor/test/preview/index.html
index 0337b3203..ed6916006 100644
--- a/libs/elements/src/lib/components/elements-editor/test/preview/index.html
+++ b/libs/elements/src/lib/components/elements-editor/test/preview/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/elements-form/test/basic/index.html b/libs/elements/src/lib/components/elements-form/test/basic/index.html
index 6bc389e32..f0b86c218 100644
--- a/libs/elements/src/lib/components/elements-form/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-form/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/elements-preview/test/basic/index.html b/libs/elements/src/lib/components/elements-preview/test/basic/index.html
index 33f758af4..676781d1e 100644
--- a/libs/elements/src/lib/components/elements-preview/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-preview/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/elements-view/test/basic/index.html b/libs/elements/src/lib/components/elements-view/test/basic/index.html
index 637d1f9ff..c3321fa63 100644
--- a/libs/elements/src/lib/components/elements-view/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-view/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/elements-view/test/code-editor/index.html b/libs/elements/src/lib/components/elements-view/test/code-editor/index.html
index 40ee7f4fd..4346d89e6 100644
--- a/libs/elements/src/lib/components/elements-view/test/code-editor/index.html
+++ b/libs/elements/src/lib/components/elements-view/test/code-editor/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/img/test/basic/index.html b/libs/elements/src/lib/components/img/test/basic/index.html
index c73f171dd..87b4aff92 100644
--- a/libs/elements/src/lib/components/img/test/basic/index.html
+++ b/libs/elements/src/lib/components/img/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index d5a9572da..181e883ff 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index cfdc70ab7..e38ede3e5 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -1,11 +1,11 @@
 import toNumber from 'lodash/toNumber';
 
 import { renderHiddenInput } from '@aiao/elements-cdk';
-import { InputChangeEventDetail } from '@ionic/core';
 import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getSelectionElements, restoreRange, saveRange } from '../../utils/selection';
+import { InputChangeEventDetail } from '../../interfaces/input.interface';
 
 // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
 
diff --git a/libs/elements/src/lib/components/tree-node/test/basic/index.html b/libs/elements/src/lib/components/tree-node/test/basic/index.html
index e76af16b4..d2175f6e6 100644
--- a/libs/elements/src/lib/components/tree-node/test/basic/index.html
+++ b/libs/elements/src/lib/components/tree-node/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/components/tree/test/basic/index.html b/libs/elements/src/lib/components/tree/test/basic/index.html
index 9aaacdfbe..bd1d80bfb 100644
--- a/libs/elements/src/lib/components/tree/test/basic/index.html
+++ b/libs/elements/src/lib/components/tree/test/basic/index.html
@@ -5,11 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Stencil Component Starter</title>
 
-    <!-- ionic -->
-    <link href="/vendors/ionic/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="/vendors/ionic/dist/ionic/ionic.esm.js"></script>
-    <script nomodule src="/vendors/ionic/dist/ionic/ionic.js"></script>
-
     <!-- image-storage -->
     <script src="/vendors/image-storage/bundles/aiao-image-storage.umd.js"></script>
     <script src="/vendors/image-storage/bundles/aiao-image-storage-adapters-aliyun.umd.js"></script>
diff --git a/libs/elements/src/lib/interfaces/input.interface.ts b/libs/elements/src/lib/interfaces/input.interface.ts
new file mode 100644
index 000000000..426bb10d8
--- /dev/null
+++ b/libs/elements/src/lib/interfaces/input.interface.ts
@@ -0,0 +1,3 @@
+export interface InputChangeEventDetail {
+  value: string | undefined | null;
+}
diff --git a/libs/elements/stencil.dev.config.ts b/libs/elements/stencil.dev.config.ts
index 0f5ad5b5c..7af34c7d2 100644
--- a/libs/elements/stencil.dev.config.ts
+++ b/libs/elements/stencil.dev.config.ts
@@ -16,10 +16,6 @@ export const config: Config = {
     }
   ],
   copy: [
-    {
-      src: resolve(__dirname, '../../', 'node_modules/@ionic/core'),
-      dest: resolve(__dirname, 'vendors/ionic')
-    },
     {
       src: resolve(__dirname, '../../', 'dist/libs/image-storage'),
       dest: resolve(__dirname, 'vendors/image-storage')

From 01caf82a6ca5dd7b6cb9c9178dd11fbf4ade7f09 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sat, 29 Feb 2020 15:38:47 +0800
Subject: [PATCH 02/25] update

---
 .../code-diff-editor/test/basic/index.html    |  7 ++++
 .../code-editor/test/basic/index.html         | 14 +++++--
 .../test/cdn-from-config/index.html           |  7 ++++
 .../code-editor/test/cdn/index.html           |  7 ++++
 .../code-editor/test/json-value/index.html    |  7 ++++
 .../elements-editor/test/basic/index.html     | 10 +++--
 .../elements-editor/test/preview/index.html   | 23 ++++-------
 .../elements-view/elements-view.tsx           | 30 ++++++++++++--
 .../elements-view/test/basic/index.html       |  8 +++-
 .../elements-view/test/code-editor/index.html | 41 ++++---------------
 10 files changed, 93 insertions(+), 61 deletions(-)

diff --git a/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html b/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html
index ab07b6b96..f1110cc8f 100644
--- a/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/code-diff-editor/test/basic/index.html
@@ -16,6 +16,13 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <aiao-code-diff-editor id="editor" language="json"></aiao-code-diff-editor>
diff --git a/libs/elements/src/lib/components/code-editor/test/basic/index.html b/libs/elements/src/lib/components/code-editor/test/basic/index.html
index 0952af85f..9e02115e8 100644
--- a/libs/elements/src/lib/components/code-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/basic/index.html
@@ -18,11 +18,17 @@
     <script src="/scripts/testing/scripts.js"></script>
   </head>
   <body>
-    <ion-button type="button" onclick="css()">css</ion-button>
-    <ion-button type="button" onclick="ts()">typescript</ion-button>
-    <ion-button type="button" onclick="format()">format</ion-button>
-
+    <button type="button" onclick="css()">css</button>
+    <button type="button" onclick="ts()">typescript</button>
+    <button type="button" onclick="format()">format</button>
     <aiao-code-editor id="editor" language="typescript" value="const a=123;"></aiao-code-editor>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </body>
 
   <script>
diff --git a/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html b/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html
index fe82cf25d..1c5c56821 100644
--- a/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/cdn-from-config/index.html
@@ -22,6 +22,13 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <aiao-code-editor id="editor" language="typescript" value="const a=123;"></aiao-code-editor>
diff --git a/libs/elements/src/lib/components/code-editor/test/cdn/index.html b/libs/elements/src/lib/components/code-editor/test/cdn/index.html
index 4eac7a045..132771be6 100644
--- a/libs/elements/src/lib/components/code-editor/test/cdn/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/cdn/index.html
@@ -15,6 +15,13 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <aiao-code-editor base-url="https://cdn.jsdelivr.net/npm/monaco-editor@0.19.2/min" id="editor" language="typescript" value="const a=123;"></aiao-code-editor>
diff --git a/libs/elements/src/lib/components/code-editor/test/json-value/index.html b/libs/elements/src/lib/components/code-editor/test/json-value/index.html
index 599bea990..7345b110f 100644
--- a/libs/elements/src/lib/components/code-editor/test/json-value/index.html
+++ b/libs/elements/src/lib/components/code-editor/test/json-value/index.html
@@ -16,6 +16,13 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <aiao-code-editor id="editor" language="json"></aiao-code-editor>
diff --git a/libs/elements/src/lib/components/elements-editor/test/basic/index.html b/libs/elements/src/lib/components/elements-editor/test/basic/index.html
index dd2371d47..34a822cd8 100644
--- a/libs/elements/src/lib/components/elements-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-editor/test/basic/index.html
@@ -16,6 +16,11 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      button.a {
+        background: red;
+      }
+    </style>
   </head>
   <body>
     <aiao-elements-editor id="editor"></aiao-elements-editor>
@@ -37,14 +42,11 @@
     editor.view = view;
     editor.value = [
       {
-        tag: 'ion-button',
+        tag: 'button',
         innerText: 'button',
         class: {
           a: true
         },
-        attributes: {
-          mode: 'ios'
-        },
         style: {
           minWidth: '200px'
         }
diff --git a/libs/elements/src/lib/components/elements-editor/test/preview/index.html b/libs/elements/src/lib/components/elements-editor/test/preview/index.html
index ed6916006..c31db1a00 100644
--- a/libs/elements/src/lib/components/elements-editor/test/preview/index.html
+++ b/libs/elements/src/lib/components/elements-editor/test/preview/index.html
@@ -16,6 +16,11 @@
     <!-- test -->
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
+    <style>
+      button.a {
+        background: red;
+      }
+    </style>
   </head>
   <body>
     <aiao-elements-editor id="editor"></aiao-elements-editor>
@@ -34,30 +39,16 @@
     ];
     editor.value = [
       {
-        tag: 'ion-button',
+        tag: 'button',
         innerText: 'button',
         class: {
           a: true
         },
-        attributes: {
-          mode: 'ios'
-        },
         style: {
           minWidth: '200px'
         }
       },
-      {
-        tag: 'h1'
-      },
-      {
-        tag: 'div',
-        children: [
-          {
-            tag: 'h1',
-            innerText: 'true'
-          }
-        ]
-      },
+      { tag: 'h1' },
       {
         tag: 'aiao-img',
         attributes: {
diff --git a/libs/elements/src/lib/components/elements-view/elements-view.tsx b/libs/elements/src/lib/components/elements-view/elements-view.tsx
index b4f1e3529..afc04b2b1 100644
--- a/libs/elements/src/lib/components/elements-view/elements-view.tsx
+++ b/libs/elements/src/lib/components/elements-view/elements-view.tsx
@@ -1,18 +1,40 @@
 import { Component, ComponentInterface, Element, h, Host, Prop } from '@stencil/core';
+import { config } from '../../global/config';
+import { IDomSanitizer } from '../../interfaces/context.interface';
 
 @Component({
   tag: 'aiao-elements-view',
   styleUrl: './elements-view.scss',
-  shadow: false,
-  scoped: true
+  shadow: true
 })
 export class ElementsView implements ComponentInterface {
   @Element() el!: HTMLAiaoElementsViewElement;
 
+  domSanitizer: IDomSanitizer = config.get('domSanitizer');
+
   @Prop() html: string;
+  @Prop() css: string;
+  @Prop() js: string;
 
   render() {
-    this.el.innerHTML = this.html || '';
-    return <Host></Host>;
+    let { html, css, js } = this;
+    if (this.domSanitizer) {
+      if (html) {
+        html = this.domSanitizer.bypassSecurityTrustHtml(html);
+      }
+      if (css) {
+        css = this.domSanitizer.bypassSecurityTrustStyle(css);
+      }
+      if (js) {
+        js = this.domSanitizer.bypassSecurityTrustScript(js);
+      }
+    }
+    return (
+      <Host>
+        {css && <style>{css}</style>}
+        {js && <script>{js}</script>}
+        <div innerHTML={html}></div>
+      </Host>
+    );
   }
 }
diff --git a/libs/elements/src/lib/components/elements-view/test/basic/index.html b/libs/elements/src/lib/components/elements-view/test/basic/index.html
index c3321fa63..a4537c11f 100644
--- a/libs/elements/src/lib/components/elements-view/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-view/test/basic/index.html
@@ -18,6 +18,12 @@
     <script src="/scripts/testing/scripts.js"></script>
   </head>
   <body>
-    <aiao-img src="https://www.baidu.com/img/bd_logo1.png?where=super"></aiao-img>
+    <aiao-elements-view id="view"></aiao-elements-view>
+    <script>
+      const view = document.querySelector('#view');
+      view.html = `<button onclick="ff()">javascript</button>`;
+      view.css = `button { background: red; }`;
+      view.js = `function ff() { alert('success') }`;
+    </script>
   </body>
 </html>
diff --git a/libs/elements/src/lib/components/elements-view/test/code-editor/index.html b/libs/elements/src/lib/components/elements-view/test/code-editor/index.html
index 4346d89e6..fd3454eb6 100644
--- a/libs/elements/src/lib/components/elements-view/test/code-editor/index.html
+++ b/libs/elements/src/lib/components/elements-view/test/code-editor/index.html
@@ -17,6 +17,11 @@
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
     <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
       body {
         display: flex;
       }
@@ -35,29 +40,9 @@
   <script>
     const editor = document.querySelector('#editor');
     const view = document.querySelector('#view');
-
-    const html = `<ion-list>
-  <ion-list-header>Single Selection</ion-list-header>
-
-  <ion-item>
-    <ion-label>Gender</ion-label>
-    <ion-select placeholder="Select One">
-      <ion-select-option value="f">Female</ion-select-option>
-      <ion-select-option value="m">Male</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Hair Color</ion-label>
-    <ion-select value="brown" okText="Okay" cancelText="Dismiss">
-      <ion-select-option value="brown">Brown</ion-select-option>
-      <ion-select-option value="blonde">Blonde</ion-select-option>
-      <ion-select-option value="black">Black</ion-select-option>
-      <ion-select-option value="red">Red</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-</ion-list>`;
+    view.js = `function ff() { alert('success') }`;
+    view.css = `button { background: red; }`;
+    const html = `<button onclick="ff()">javascript</button>`;
 
     editor.value = html;
     view.html = html;
@@ -65,14 +50,6 @@
     editor.addEventListener('aiaoChange', e => {
       view.html = e.detail.value;
     });
-    editor.config = [
-      {
-        tag: 'h1',
-        innerText: true,
-        defaultOptions: {
-          innerText: 'h1h1h1h1'
-        }
-      }
-    ];
+    editor.config = [];
   </script>
 </html>

From 951257f1b04aae89946d862a4cf7a56733575632 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sat, 29 Feb 2020 15:50:24 +0800
Subject: [PATCH 03/25] update

---
 .../elements-form/elements-form.tsx           |  4 +--
 .../elements-form/test/basic/index.html       | 27 +++++++++----------
 .../elements-preview/test/basic/index.html    |  9 +++++--
 .../elements-view/elements-view.tsx           |  3 ++-
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/libs/elements/src/lib/components/elements-form/elements-form.tsx b/libs/elements/src/lib/components/elements-form/elements-form.tsx
index 8c32a9555..f8663abe9 100644
--- a/libs/elements/src/lib/components/elements-form/elements-form.tsx
+++ b/libs/elements/src/lib/components/elements-form/elements-form.tsx
@@ -14,7 +14,7 @@ export class ElementsFrom implements ComponentInterface {
   private _formInputElements: HTMLInputElement[];
   private _formElements: Element[];
 
-  viewRef: HTMLAiaoElementsViewElement;
+  viewRef: HTMLElement;
 
   @Element() el!: HTMLElement;
   form: HTMLFormElement;
@@ -186,7 +186,7 @@ export class ElementsFrom implements ComponentInterface {
     return (
       <Host>
         <form ref={ref => (this.form = ref)}>
-          <aiao-elements-view html={this.html} ref={ref => (this.viewRef = ref)}></aiao-elements-view>
+          <div innerHTML={this.html} ref={ref => (this.viewRef = ref)}></div>
         </form>
       </Host>
     );
diff --git a/libs/elements/src/lib/components/elements-form/test/basic/index.html b/libs/elements/src/lib/components/elements-form/test/basic/index.html
index f0b86c218..2f2fa7a67 100644
--- a/libs/elements/src/lib/components/elements-form/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-form/test/basic/index.html
@@ -34,19 +34,18 @@ <h6>change event</h6>
     const input = document.querySelector('#input');
     const change = document.querySelector('#change');
     form.html = `
-    <label>name:</label>
-<input class="elements-form_item" name="name" value="name" />
-<div>
-  <ion-item>
-    <ion-label>car 0</ion-label>
-    <ion-input class="elements-form_item" name="car[0]" value="BMW"></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label>car 1</ion-label>
-    <ion-input class="elements-form_item" name="car[1]" value="Honda"></ion-input>
-  </ion-item>
-</div>
-
+    <div>
+      <label>name:</label>
+      <input class="elements-form_item" name="name" value="name" />
+    </div>
+    <div>
+      <label>car 0</label>
+      <input class="elements-form_item" name="car[0]" value="BMW" />
+    </div>
+    <div>
+      <label>car 1</label>
+      <input class="elements-form_item" name="car[1]" value="Honda" />
+    </div>
     `;
 
     form.value = {
@@ -54,12 +53,10 @@ <h6>change event</h6>
       car: ['BMW', 'Honda']
     };
     form.addEventListener('aiaoChange', e => {
-      console.log('change', e);
       change.textContent = JSON.stringify(e.detail.value, { spece: 2 });
     });
 
     form.addEventListener('aiaoInput', e => {
-      console.log('input', e);
       input.textContent = JSON.stringify(e.detail.value, { spece: 2 });
     });
 
diff --git a/libs/elements/src/lib/components/elements-preview/test/basic/index.html b/libs/elements/src/lib/components/elements-preview/test/basic/index.html
index 676781d1e..4f8820612 100644
--- a/libs/elements/src/lib/components/elements-preview/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-preview/test/basic/index.html
@@ -17,6 +17,11 @@
     <link href="/scripts/testing/styles.css" rel="stylesheet" />
     <script src="/scripts/testing/scripts.js"></script>
     <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+      }
       body {
         display: flex;
       }
@@ -54,7 +59,7 @@
         }
       },
       {
-        tag: 'ion-button',
+        tag: 'button',
         innerText: true,
         defaultOptions: {
           attributes: {
@@ -65,7 +70,7 @@
     ];
     const value = [
       {
-        tag: 'ion-button',
+        tag: 'button',
         innerText: 'button'
       },
       {
diff --git a/libs/elements/src/lib/components/elements-view/elements-view.tsx b/libs/elements/src/lib/components/elements-view/elements-view.tsx
index afc04b2b1..5ed40a362 100644
--- a/libs/elements/src/lib/components/elements-view/elements-view.tsx
+++ b/libs/elements/src/lib/components/elements-view/elements-view.tsx
@@ -1,4 +1,5 @@
 import { Component, ComponentInterface, Element, h, Host, Prop } from '@stencil/core';
+
 import { config } from '../../global/config';
 import { IDomSanitizer } from '../../interfaces/context.interface';
 
@@ -10,7 +11,7 @@ import { IDomSanitizer } from '../../interfaces/context.interface';
 export class ElementsView implements ComponentInterface {
   @Element() el!: HTMLAiaoElementsViewElement;
 
-  domSanitizer: IDomSanitizer = config.get('domSanitizer');
+  private domSanitizer: IDomSanitizer = config.get('domSanitizer');
 
   @Prop() html: string;
   @Prop() css: string;

From 27e422d86fb45ad4cf756ae5dc63a9e3bcaf0bcf Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sat, 29 Feb 2020 18:05:33 +0800
Subject: [PATCH 04/25] update

---
 .../elements-preview/test/basic/index.html    |   1 -
 .../assets/text-editor/align-center.svg       |   0
 .../assets/text-editor/align-justify.svg      |   0
 .../assets/text-editor/align-left.svg         |   0
 .../assets/text-editor/align-right.svg        |   0
 .../assets/text-editor/background.svg         |   0
 .../assets/text-editor/bold.svg               |   0
 .../assets/text-editor/h1.svg                 |   0
 .../assets/text-editor/h2.svg                 |   0
 .../assets/text-editor/h3.svg                 |   0
 .../assets/text-editor/indent.svg             |   0
 .../assets/text-editor/italic.svg             |   0
 .../assets/text-editor/list-ol.svg            |   0
 .../assets/text-editor/list-ul.svg            |   0
 .../assets/text-editor/outdent.svg            |   0
 .../assets/text-editor/paragraph.svg          |   0
 .../assets/text-editor/quote.svg              |   0
 .../assets/text-editor/strikethrough.svg      |   0
 .../assets/text-editor/text-color.svg         |   0
 .../assets/text-editor/underline.svg          |   0
 .../assets/text-editor/unlink.svg             |   0
 .../text-editor-bar/text-editor-bar.scss      |   0
 .../text-editor-bar/text-editor-bar.tsx       | 104 +++++++++++++
 .../text-editor/test/basic/index.html         |  54 ++++---
 .../components/text-editor/text-editor.tsx    | 140 ++++--------------
 25 files changed, 155 insertions(+), 144 deletions(-)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/align-center.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/align-justify.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/align-left.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/align-right.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/background.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/bold.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/h1.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/h2.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/h3.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/indent.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/italic.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/list-ol.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/list-ul.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/outdent.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/paragraph.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/quote.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/strikethrough.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/text-color.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/underline.svg (100%)
 rename libs/elements/src/lib/components/{text-editor => text-editor-bar}/assets/text-editor/unlink.svg (100%)
 create mode 100644 libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
 create mode 100644 libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx

diff --git a/libs/elements/src/lib/components/elements-preview/test/basic/index.html b/libs/elements/src/lib/components/elements-preview/test/basic/index.html
index 4f8820612..c349784ba 100644
--- a/libs/elements/src/lib/components/elements-preview/test/basic/index.html
+++ b/libs/elements/src/lib/components/elements-preview/test/basic/index.html
@@ -60,7 +60,6 @@
       },
       {
         tag: 'button',
-        innerText: true,
         defaultOptions: {
           attributes: {
             buttonType: 'button'
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/align-center.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-center.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/align-center.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-center.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/align-justify.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-justify.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/align-justify.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-justify.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/align-left.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-left.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/align-left.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-left.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/align-right.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-right.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/align-right.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-right.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/background.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/background.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/background.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/background.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/bold.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/bold.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/bold.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/bold.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/h1.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h1.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/h1.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h1.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/h2.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h2.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/h2.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h2.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/h3.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h3.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/h3.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h3.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/indent.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/indent.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/indent.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/indent.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/italic.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/italic.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/italic.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/italic.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/list-ol.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ol.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/list-ol.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ol.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/list-ul.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ul.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/list-ul.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ul.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/outdent.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/outdent.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/outdent.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/outdent.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/paragraph.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/paragraph.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/paragraph.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/paragraph.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/quote.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/quote.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/quote.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/quote.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/strikethrough.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/strikethrough.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/strikethrough.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/strikethrough.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/text-color.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/text-color.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/text-color.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/text-color.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/underline.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/underline.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/underline.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/underline.svg
diff --git a/libs/elements/src/lib/components/text-editor/assets/text-editor/unlink.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/unlink.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor/assets/text-editor/unlink.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor/unlink.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
new file mode 100644
index 000000000..5722729a7
--- /dev/null
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -0,0 +1,104 @@
+import { Component, h } from '@stencil/core';
+
+import { config } from '../../global/config';
+
+@Component({
+  tag: 'text-editor-bar',
+  styleUrl: 'text-editor-bar.css',
+  assetsDir: 'assets/text-editor',
+  shadow: true
+})
+export class TextEditorBar {
+  private options = ['1', '2', '3', '4', '5', '6', '7'];
+  private resourcesUrl: string = config.get('resourcesUrl');
+
+  render() {
+    return (
+      <button>
+        <img src={`${this.resourcesUrl}/assets/text-editor/bold.svg`}>html</img>
+      </button>
+    );
+  }
+}
+
+/*
+<div class="action-bar">
+        <ion-button fill={bold ? 'solid' : 'clear'} onClick={() => this.bold()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/bold.svg`} />
+        </ion-button>
+        <ion-button fill={italic ? 'solid' : 'clear'} onClick={() => this.italic()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/italic.svg`} />
+        </ion-button>
+        <ion-button fill={underline ? 'solid' : 'clear'} onClick={() => this.underline()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/underline.svg`} />
+        </ion-button>
+        <ion-button fill={strikeThrough ? 'solid' : 'clear'} onClick={() => this.strikethrough()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/strikeThrough.svg`} />
+        </ion-button>
+        <ion-button fill={h1 ? 'solid' : 'clear'} onClick={() => this.heading(1)}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h1.svg`} />
+        </ion-button>
+        <ion-button fill={h2 ? 'solid' : 'clear'} onClick={() => this.heading(2)}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h2.svg`} />
+        </ion-button>
+        <ion-button fill={h3 ? 'solid' : 'clear'} onClick={() => this.heading(3)}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h3.svg`} />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.paragraph()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/paragraph.svg`} />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.olist()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/list-ol.svg`} />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.ulist()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/list-ul.svg`} />
+        </ion-button>
+        <ion-button fill={blockquote ? 'solid' : 'clear'} onClick={() => this.quote()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/quote.svg`} />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.line()}>
+          <ion-icon name="return-down-back-outline"></ion-icon>
+        </ion-button>
+        <select onChange={e => this.fontSizeChange(e)}>
+          {this.options.map(option => (
+            <option value={option} selected={fontSize === option}>
+              {option}
+            </option>
+          ))}
+        </select>
+        <mlab-color
+          value={foreColor}
+          onMlabOpen={() => this._saveSelection()}
+          onMlabChange={(ev: any) => this.foreColorChanged(ev)}
+        >
+          文字
+        </mlab-color>
+        <ion-button fill="clear" onClick={() => this.indent()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/indent.svg`} />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.outdent()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/outdent.svg`} />
+        </ion-button>
+        <ion-button fill={alginLeft ? 'solid' : 'clear'} onClick={() => this.alginLeft()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-left.svg`} />
+        </ion-button>
+        <ion-button fill={alginCenter ? 'solid' : 'clear'} onClick={() => this.alginCenter()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-center.svg`} />
+        </ion-button>
+        <ion-button fill={alginRight ? 'solid' : 'clear'} onClick={() => this.alginRight()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-right.svg`} />
+        </ion-button>
+        <ion-button fill={alginFull ? 'solid' : 'clear'} onClick={() => this.alginFull()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-justify.svg`} />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.undo()}>
+          <ion-icon slot="icon-only" name="arrow-undo-outline"></ion-icon>
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.redo()}>
+          <ion-icon slot="icon-only" name="arrow-redo-outline" />
+        </ion-button>
+        <ion-button fill="clear" onClick={() => this.unlink()}>
+          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/unlink.svg`} />
+        </ion-button>
+      </div>
+*/
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index 181e883ff..4ffea0aab 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -18,33 +18,29 @@
     <script src="/scripts/testing/scripts.js"></script>
   </head>
   <body>
-    <ion-app>
-      <ion-content>
-        <ion-button onClick="bold()">粗体</ion-button>
-        <ion-button onClick="italic()">斜体</ion-button>
-        <ion-button onClick="underline()">下划线</ion-button>
-        <ion-button onClick="strikethrough()">删除线</ion-button>
-        <ion-button onClick="heading(1)">H1</ion-button>
-        <ion-button onClick="heading(2)">H2</ion-button>
-        <ion-button onClick="heading(3)">H3</ion-button>
-        <ion-button onClick="paragraph()">paragraph</ion-button>
-        <ion-button onClick="quote()">quote</ion-button>
-        <ion-button onClick="olist()">olist</ion-button>
-        <ion-button onClick="ulist()">ulist</ion-button>
-        <ion-button onClick="line()">line</ion-button>
-        <ion-button onClick="link()">link</ion-button>
-        <ion-button onClick="image()">插入图片</ion-button>
-        <ion-button onClick="backColor()">背景颜色</ion-button>
-        <ion-button onClick="foreColor()">字体颜色</ion-button>
-        <ion-button onClick="insertHTML()">插入html</ion-button>
-        <ion-button onClick="editor.saveSelection()">记录指针位置</ion-button>
-        <ion-button onClick="editor.restoreSelection()">还原指针</ion-button>
-        <aiao-text-editor id="editor"></aiao-text-editor>
-        <div id="element"></div>
-        <pre id="html" style="white-space: pre-wrap;"></pre>
-        <pre id="state" style="white-space: pre-wrap;"></pre>
-      </ion-content>
-    </ion-app>
+    <button onClick="bold()">粗体</button>
+    <button onClick="italic()">斜体</button>
+    <button onClick="underline()">下划线</button>
+    <button onClick="strikethrough()">删除线</button>
+    <button onClick="heading(1)">H1</button>
+    <button onClick="heading(2)">H2</button>
+    <button onClick="heading(3)">H3</button>
+    <button onClick="paragraph()">paragraph</button>
+    <button onClick="quote()">quote</button>
+    <button onClick="olist()">olist</button>
+    <button onClick="ulist()">ulist</button>
+    <button onClick="line()">line</button>
+    <button onClick="link()">link</button>
+    <button onClick="image()">插入图片</button>
+    <button onClick="backColor()">背景颜色</button>
+    <button onClick="foreColor()">字体颜色</button>
+    <button onClick="insertHTML()">插入html</button>
+    <button onClick="editor.saveSelection()">记录指针位置</button>
+    <button onClick="editor.restoreSelection()">还原指针</button>
+    <aiao-text-editor id="editor"></aiao-text-editor>
+    <div id="element"></div>
+    <pre id="html" style="white-space: pre-wrap;"></pre>
+    <pre id="state" style="white-space: pre-wrap;"></pre>
   </body>
   <script>
     const editor = document.getElementById('editor');
@@ -122,8 +118,8 @@
       document.body.appendChild(script);
 
       editor.insertHTML(`
-     <ion-button onClick="clickBtn()">执行预设代码</ion-button>
-<ion-button onClick="clickBtn2()">执行动态脚本</ion-button>
+     <button onClick="clickBtn()">执行预设代码</button>
+<button onClick="clickBtn2()">执行动态脚本</button>
     `);
     }
   </script>
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index e38ede3e5..fff5f61e4 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -1,14 +1,12 @@
 import toNumber from 'lodash/toNumber';
 
 import { renderHiddenInput } from '@aiao/elements-cdk';
-import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
-import { config } from '../../global/config';
-import { getSelectionElements, restoreRange, saveRange } from '../../utils/selection';
 import { InputChangeEventDetail } from '../../interfaces/input.interface';
+import { getSelectionElements, restoreRange, saveRange } from '../../utils/selection';
 
 // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
-
 @Component({
   tag: 'aiao-text-editor',
   styleUrl: 'text-editor.scss',
@@ -18,8 +16,6 @@ import { InputChangeEventDetail } from '../../interfaces/input.interface';
 export class RichTextEditor {
   @Element() el!: HTMLElement;
   private range: Range;
-  private options = ['1', '2', '3', '4', '5', '6', '7'];
-  private resourcesUrl: string = config.get('resourcesUrl');
   private _lastElement: HTMLElement;
 
   // --------------------------------------------------------------[ Event ]
@@ -59,7 +55,9 @@ export class RichTextEditor {
       if (this._lastElement) {
         this._lastElement.removeEventListener('keyup', this.statChange);
         this._lastElement.removeEventListener('mouseup', this.statChange);
-        this._lastElement.addEventListener('input', this.onInput);
+        this._lastElement.removeEventListener('input', this.onInput);
+        this._lastElement.removeEventListener('focus', this.onFocus);
+        this._lastElement.removeEventListener('blur', this.onBlur);
       }
       this._lastElement = value;
       this._lastElement.addEventListener('keyup', this.statChange);
@@ -436,115 +434,29 @@ export class RichTextEditor {
       this.elementChanged(this.element);
     }
   }
-  hostData() {
-    return {
-      class: {
-        edit: this.edit
-      }
-    };
-  }
 
   render() {
     renderHiddenInput(true, this.el, this.name, this.value, this.disabled);
-    const {
-      bold,
-      italic,
-      underline,
-      strikeThrough,
-      // backColor,
-      foreColor,
-      fontSize,
-      alginLeft,
-      alginCenter,
-      alginRight,
-      alginFull,
-      blockquote,
-      h1,
-      h2,
-      h3
-    } = this._state;
-    return [
-      this.edit && (
-        <div class="action-bar">
-          <ion-button fill={bold ? 'solid' : 'clear'} onClick={() => this.bold()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/bold.svg`} />
-          </ion-button>
-          <ion-button fill={italic ? 'solid' : 'clear'} onClick={() => this.italic()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/italic.svg`} />
-          </ion-button>
-          <ion-button fill={underline ? 'solid' : 'clear'} onClick={() => this.underline()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/underline.svg`} />
-          </ion-button>
-          <ion-button fill={strikeThrough ? 'solid' : 'clear'} onClick={() => this.strikethrough()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/strikeThrough.svg`} />
-          </ion-button>
-          <ion-button fill={h1 ? 'solid' : 'clear'} onClick={() => this.heading(1)}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h1.svg`} />
-          </ion-button>
-          <ion-button fill={h2 ? 'solid' : 'clear'} onClick={() => this.heading(2)}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h2.svg`} />
-          </ion-button>
-          <ion-button fill={h3 ? 'solid' : 'clear'} onClick={() => this.heading(3)}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h3.svg`} />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.paragraph()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/paragraph.svg`} />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.olist()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/list-ol.svg`} />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.ulist()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/list-ul.svg`} />
-          </ion-button>
-          <ion-button fill={blockquote ? 'solid' : 'clear'} onClick={() => this.quote()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/quote.svg`} />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.line()}>
-            <ion-icon name="return-down-back-outline"></ion-icon>
-          </ion-button>
-          <select onChange={e => this.fontSizeChange(e)}>
-            {this.options.map(option => (
-              <option value={option} selected={fontSize === option}>
-                {option}
-              </option>
-            ))}
-          </select>
-          <mlab-color
-            value={foreColor}
-            onMlabOpen={() => this._saveSelection()}
-            onMlabChange={(ev: any) => this.foreColorChanged(ev)}
-          >
-            文字
-          </mlab-color>
-          <ion-button fill="clear" onClick={() => this.indent()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/indent.svg`} />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.outdent()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/outdent.svg`} />
-          </ion-button>
-          <ion-button fill={alginLeft ? 'solid' : 'clear'} onClick={() => this.alginLeft()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-left.svg`} />
-          </ion-button>
-          <ion-button fill={alginCenter ? 'solid' : 'clear'} onClick={() => this.alginCenter()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-center.svg`} />
-          </ion-button>
-          <ion-button fill={alginRight ? 'solid' : 'clear'} onClick={() => this.alginRight()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-right.svg`} />
-          </ion-button>
-          <ion-button fill={alginFull ? 'solid' : 'clear'} onClick={() => this.alginFull()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-justify.svg`} />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.undo()}>
-            <ion-icon slot="icon-only" name="arrow-undo-outline"></ion-icon>
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.redo()}>
-            <ion-icon slot="icon-only" name="arrow-redo-outline" />
-          </ion-button>
-          <ion-button fill="clear" onClick={() => this.unlink()}>
-            <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/unlink.svg`} />
-          </ion-button>
-        </div>
-      )
-    ];
+    // const {
+    //   bold,
+    //   italic,
+    //   underline,
+    //   strikeThrough,
+    //   // backColor,
+    //   foreColor,
+    //   fontSize,
+    //   alginLeft,
+    //   alginCenter,
+    //   alginRight,
+    //   alginFull,
+    //   blockquote,
+    //   h1,
+    //   h2,
+    //   h3
+    // } = this._state;
+    const cls = {
+      edit: this.edit
+    };
+    return <Host class={cls}>{this.edit && <text-editor-bar></text-editor-bar>}</Host>;
   }
 }

From 93b15ea2e5c6ac21004e5f732a0ef37b2b3b6656 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sat, 29 Feb 2020 22:11:22 +0800
Subject: [PATCH 05/25] update

---
 libs/elements/src/index.ts                    |   1 +
 .../text-editor-bar/text-editor-bar.scss      |  23 ++++
 .../text-editor-bar/text-editor-bar.tsx       | 115 +++++++++++++++++-
 .../{assets => }/text-editor/align-center.svg |   0
 .../text-editor/align-justify.svg             |   0
 .../{assets => }/text-editor/align-left.svg   |   0
 .../{assets => }/text-editor/align-right.svg  |   0
 .../{assets => }/text-editor/background.svg   |   0
 .../{assets => }/text-editor/bold.svg         |   0
 .../{assets => }/text-editor/h1.svg           |   0
 .../{assets => }/text-editor/h2.svg           |   0
 .../{assets => }/text-editor/h3.svg           |   0
 .../{assets => }/text-editor/indent.svg       |   0
 .../{assets => }/text-editor/italic.svg       |   0
 .../{assets => }/text-editor/list-ol.svg      |   0
 .../{assets => }/text-editor/list-ul.svg      |   0
 .../{assets => }/text-editor/outdent.svg      |   0
 .../{assets => }/text-editor/paragraph.svg    |   0
 .../{assets => }/text-editor/quote.svg        |   0
 .../text-editor/strikethrough.svg             |   0
 .../{assets => }/text-editor/text-color.svg   |   0
 .../{assets => }/text-editor/underline.svg    |   0
 .../{assets => }/text-editor/unlink.svg       |   0
 .../lib/interfaces/text-editor.interface.ts   |  10 ++
 24 files changed, 143 insertions(+), 6 deletions(-)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/align-center.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/align-justify.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/align-left.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/align-right.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/background.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/bold.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/h1.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/h2.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/h3.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/indent.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/italic.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/list-ol.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/list-ul.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/outdent.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/paragraph.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/quote.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/strikethrough.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/text-color.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/underline.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{assets => }/text-editor/unlink.svg (100%)
 create mode 100644 libs/elements/src/lib/interfaces/text-editor.interface.ts

diff --git a/libs/elements/src/index.ts b/libs/elements/src/index.ts
index 58e91e96e..5e1d9ef63 100644
--- a/libs/elements/src/index.ts
+++ b/libs/elements/src/index.ts
@@ -1 +1,2 @@
+import 'ionicons';
 export * from './lib/interfaces/elements.interface';
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
index e69de29bb..988af7393 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
@@ -0,0 +1,23 @@
+:host {
+  display: block;
+}
+
+.action-bar {
+  background: #fff;
+  border: 1px solid #999;
+}
+
+.action-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  height: 30px;
+  width: 30px;
+  outline: 0;
+  font-size: medium;
+  vertical-align: bottom;
+
+  &.selected {
+    background-color: #f0f0f0;
+  }
+}
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
index 5722729a7..3ba8d4d2e 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -1,22 +1,125 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 import { config } from '../../global/config';
+import { TextEditorAcitons } from '../../interfaces/text-editor.interface';
 
 @Component({
   tag: 'text-editor-bar',
-  styleUrl: 'text-editor-bar.css',
-  assetsDir: 'assets/text-editor',
+  styleUrl: 'text-editor-bar.scss',
+  assetsDir: 'text-editor',
   shadow: true
 })
 export class TextEditorBar {
   private options = ['1', '2', '3', '4', '5', '6', '7'];
   private resourcesUrl: string = config.get('resourcesUrl');
 
+  private defaultSettings = [
+    {
+      action: TextEditorAcitons.Bold,
+      icon: 'bold.svg',
+      title: 'Bold'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'italic.svg',
+      title: 'italic'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'underline.svg',
+      title: 'underline'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'strikeThrough.svg',
+      title: 'strikeThrough'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'h1.svg',
+      title: 'h1'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'h2.svg',
+      title: 'h2'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'h3.svg',
+      title: 'h3'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'paragraph.svg',
+      title: 'paragraph'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'list-ol.svg',
+      title: 'list-ol'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'list-ul.svg',
+      title: 'list-ul'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'quote.svg',
+      title: 'quote'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      title: 'line'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'indent.svg',
+      title: 'indent'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'outdent.svg',
+      title: 'outdent'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'align-left.svg',
+      title: 'align-left'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'align-center.svg',
+      title: 'align-center'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'align-right.svg',
+      title: 'align-right'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'align-justify.svg',
+      title: 'align-justify'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'unlink.svg',
+      title: 'unlink'
+    }
+  ];
+
+  @Prop() actions = this.defaultSettings;
+
   render() {
     return (
-      <button>
-        <img src={`${this.resourcesUrl}/assets/text-editor/bold.svg`}>html</img>
-      </button>
+      <div class="action-bar">
+        {this.actions.map(({ icon, title }) => {
+          const src = `${this.resourcesUrl}/text-editor/${icon}`;
+          return <button class="action-button">{icon ? <ion-icon title={title} src={src} /> : title}</button>;
+        })}
+      </div>
     );
   }
 }
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-center.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/align-center.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-center.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/align-center.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-justify.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/align-justify.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-justify.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/align-justify.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-left.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/align-left.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-left.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/align-left.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-right.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/align-right.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/align-right.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/align-right.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/background.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/background.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/background.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/background.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/bold.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/bold.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/bold.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/bold.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h1.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/h1.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h1.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/h1.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h2.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/h2.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h2.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/h2.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h3.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/h3.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/h3.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/h3.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/indent.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/indent.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/indent.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/indent.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/italic.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/italic.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/italic.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/italic.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ol.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/list-ol.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ol.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/list-ol.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ul.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/list-ul.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/list-ul.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/list-ul.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/outdent.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/outdent.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/outdent.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/outdent.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/paragraph.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/paragraph.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/paragraph.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/paragraph.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/quote.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/quote.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/quote.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/quote.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/strikethrough.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/strikethrough.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/strikethrough.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/strikethrough.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/text-color.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/text-color.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/text-color.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/text-color.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/underline.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/underline.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/underline.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/underline.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/assets/text-editor/unlink.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/unlink.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/assets/text-editor/unlink.svg
rename to libs/elements/src/lib/components/text-editor-bar/text-editor/unlink.svg
diff --git a/libs/elements/src/lib/interfaces/text-editor.interface.ts b/libs/elements/src/lib/interfaces/text-editor.interface.ts
new file mode 100644
index 000000000..dc60eb965
--- /dev/null
+++ b/libs/elements/src/lib/interfaces/text-editor.interface.ts
@@ -0,0 +1,10 @@
+export enum TextEditorAcitons {
+  Bold = 'bold',
+  Italic = 'italic'
+}
+
+export interface TextEditorOptions {
+  action: TextEditorAcitons;
+  icon: string;
+  title: string;
+}

From 0f9532784667d92bcaa486862e0f29e1b47ba814 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 13:35:11 +0800
Subject: [PATCH 06/25] update

---
 .../text-editor-bar/text-editor-bar.scss      |   6 +-
 .../text-editor-bar/text-editor-bar.tsx       | 113 +++---------------
 .../text-editor-bar/text-editor/redo.svg      |   1 +
 .../text-editor-bar/text-editor/undo.svg      |   1 +
 .../text-editor/test/basic/index.html         |  98 +++------------
 5 files changed, 44 insertions(+), 175 deletions(-)
 create mode 100644 libs/elements/src/lib/components/text-editor-bar/text-editor/redo.svg
 create mode 100644 libs/elements/src/lib/components/text-editor-bar/text-editor/undo.svg

diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
index 988af7393..7bdc48640 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
@@ -2,7 +2,7 @@
   display: block;
 }
 
-.action-bar {
+:host(.action-bar) {
   background: #fff;
   border: 1px solid #999;
 }
@@ -13,11 +13,13 @@
   cursor: pointer;
   height: 30px;
   width: 30px;
-  outline: 0;
   font-size: medium;
   vertical-align: bottom;
 
   &.selected {
     background-color: #f0f0f0;
   }
+  ion-icon {
+    margin-top: 3px;
+  }
 }
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
index 3ba8d4d2e..0dc19f7d5 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Host, Prop, EventEmitter, Event } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { TextEditorAcitons } from '../../interfaces/text-editor.interface';
@@ -10,7 +10,7 @@ import { TextEditorAcitons } from '../../interfaces/text-editor.interface';
   shadow: true
 })
 export class TextEditorBar {
-  private options = ['1', '2', '3', '4', '5', '6', '7'];
+  // private options = ['1', '2', '3', '4', '5', '6', '7'];
   private resourcesUrl: string = config.get('resourcesUrl');
 
   private defaultSettings = [
@@ -69,10 +69,6 @@ export class TextEditorBar {
       icon: 'quote.svg',
       title: 'quote'
     },
-    {
-      action: TextEditorAcitons.Italic,
-      title: 'line'
-    },
     {
       action: TextEditorAcitons.Italic,
       icon: 'indent.svg',
@@ -105,103 +101,32 @@ export class TextEditorBar {
     },
     {
       action: TextEditorAcitons.Italic,
-      icon: 'unlink.svg',
-      title: 'unlink'
+      icon: 'undo.svg',
+      title: 'undo'
+    },
+    {
+      action: TextEditorAcitons.Italic,
+      icon: 'redo.svg',
+      title: 'redo'
     }
   ];
 
+  @Event() action: EventEmitter<any>;
+
   @Prop() actions = this.defaultSettings;
 
   render() {
     return (
-      <div class="action-bar">
-        {this.actions.map(({ icon, title }) => {
+      <Host class="action-bar">
+        {this.actions.map(({ action, icon, title }) => {
           const src = `${this.resourcesUrl}/text-editor/${icon}`;
-          return <button class="action-button">{icon ? <ion-icon title={title} src={src} /> : title}</button>;
+          return (
+            <button class="action-button" onClick={() => this.action.emit({ detail: action })}>
+              {icon ? <ion-icon title={title} src={src} /> : title}
+            </button>
+          );
         })}
-      </div>
+      </Host>
     );
   }
 }
-
-/*
-<div class="action-bar">
-        <ion-button fill={bold ? 'solid' : 'clear'} onClick={() => this.bold()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/bold.svg`} />
-        </ion-button>
-        <ion-button fill={italic ? 'solid' : 'clear'} onClick={() => this.italic()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/italic.svg`} />
-        </ion-button>
-        <ion-button fill={underline ? 'solid' : 'clear'} onClick={() => this.underline()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/underline.svg`} />
-        </ion-button>
-        <ion-button fill={strikeThrough ? 'solid' : 'clear'} onClick={() => this.strikethrough()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/strikeThrough.svg`} />
-        </ion-button>
-        <ion-button fill={h1 ? 'solid' : 'clear'} onClick={() => this.heading(1)}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h1.svg`} />
-        </ion-button>
-        <ion-button fill={h2 ? 'solid' : 'clear'} onClick={() => this.heading(2)}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h2.svg`} />
-        </ion-button>
-        <ion-button fill={h3 ? 'solid' : 'clear'} onClick={() => this.heading(3)}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/h3.svg`} />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.paragraph()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/paragraph.svg`} />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.olist()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/list-ol.svg`} />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.ulist()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/list-ul.svg`} />
-        </ion-button>
-        <ion-button fill={blockquote ? 'solid' : 'clear'} onClick={() => this.quote()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/quote.svg`} />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.line()}>
-          <ion-icon name="return-down-back-outline"></ion-icon>
-        </ion-button>
-        <select onChange={e => this.fontSizeChange(e)}>
-          {this.options.map(option => (
-            <option value={option} selected={fontSize === option}>
-              {option}
-            </option>
-          ))}
-        </select>
-        <mlab-color
-          value={foreColor}
-          onMlabOpen={() => this._saveSelection()}
-          onMlabChange={(ev: any) => this.foreColorChanged(ev)}
-        >
-          文字
-        </mlab-color>
-        <ion-button fill="clear" onClick={() => this.indent()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/indent.svg`} />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.outdent()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/outdent.svg`} />
-        </ion-button>
-        <ion-button fill={alginLeft ? 'solid' : 'clear'} onClick={() => this.alginLeft()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-left.svg`} />
-        </ion-button>
-        <ion-button fill={alginCenter ? 'solid' : 'clear'} onClick={() => this.alginCenter()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-center.svg`} />
-        </ion-button>
-        <ion-button fill={alginRight ? 'solid' : 'clear'} onClick={() => this.alginRight()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-right.svg`} />
-        </ion-button>
-        <ion-button fill={alginFull ? 'solid' : 'clear'} onClick={() => this.alginFull()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/align-justify.svg`} />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.undo()}>
-          <ion-icon slot="icon-only" name="arrow-undo-outline"></ion-icon>
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.redo()}>
-          <ion-icon slot="icon-only" name="arrow-redo-outline" />
-        </ion-button>
-        <ion-button fill="clear" onClick={() => this.unlink()}>
-          <ion-icon slot="icon-only" src={`${this.resourcesUrl}/assets/text-editor/unlink.svg`} />
-        </ion-button>
-      </div>
-*/
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/redo.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/redo.svg
new file mode 100644
index 000000000..f60b9164f
--- /dev/null
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor/redo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/></svg>
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/undo.svg b/libs/elements/src/lib/components/text-editor-bar/text-editor/undo.svg
new file mode 100644
index 000000000..8b1b90251
--- /dev/null
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor/undo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"/></svg>
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index 4ffea0aab..bff85bb12 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -18,22 +18,24 @@
     <script src="/scripts/testing/scripts.js"></script>
   </head>
   <body>
-    <button onClick="bold()">粗体</button>
-    <button onClick="italic()">斜体</button>
-    <button onClick="underline()">下划线</button>
-    <button onClick="strikethrough()">删除线</button>
-    <button onClick="heading(1)">H1</button>
-    <button onClick="heading(2)">H2</button>
-    <button onClick="heading(3)">H3</button>
-    <button onClick="paragraph()">paragraph</button>
-    <button onClick="quote()">quote</button>
-    <button onClick="olist()">olist</button>
-    <button onClick="ulist()">ulist</button>
-    <button onClick="line()">line</button>
-    <button onClick="link()">link</button>
-    <button onClick="image()">插入图片</button>
-    <button onClick="backColor()">背景颜色</button>
-    <button onClick="foreColor()">字体颜色</button>
+    <button onClick="editor.bold()">粗体</button>
+    <button onClick="editor.italic()">斜体</button>
+    <button onClick="editor.underline()">下划线</button>
+    <button onClick="editor.strikethrough()">删除线</button>
+    <button onClick="editor.heading(1)">H1</button>
+    <button onClick="editor.heading(2)">H2</button>
+    <button onClick="editor.heading(3)">H3</button>
+    <button onClick="editor.paragraph()">paragraph</button>
+    <button onClick="editor.quote()">quote</button>
+    <button onClick="editor.olist()">olist</button>
+    <button onClick="editor.ulist()">ulist</button>
+    <button onClick="editor.line()">line</button>
+    <button onClick="editor.link('https://baidu.com')">link</button>
+    <button onClick="editor.image('https://www.baidu.com/img/bd_logo1.png')">插入图片</button>
+    <button onClick="editor.backColor('#333')">背景颜色</button>
+    <button onClick="editor.foreColor('red')">字体颜色</button>
+    <button onClick="editor.undo()">还原</button>
+    <button onClick="editor.redo()">重做</button>
     <button onClick="insertHTML()">插入html</button>
     <button onClick="editor.saveSelection()">记录指针位置</button>
     <button onClick="editor.restoreSelection()">还原指针</button>
@@ -57,70 +59,8 @@
       state.textContent = JSON.stringify(e.detail, null, 2);
     });
 
-    function bold() {
-      editor.bold();
-    }
-    function italic() {
-      editor.italic();
-    }
-    function underline() {
-      editor.underline();
-    }
-    function strikethrough() {
-      editor.strikethrough();
-    }
-    function heading(value) {
-      editor.heading(value);
-    }
-    function paragraph() {
-      editor.paragraph();
-    }
-    function quote() {
-      editor.quote();
-    }
-    function olist() {
-      editor.olist();
-    }
-    function ulist() {
-      editor.ulist();
-    }
-    function line() {
-      editor.line();
-    }
-
-    function link() {
-      editor.link('https://baidu.com');
-    }
-    function image() {
-      editor.image('https://www.baidu.com/img/bd_logo1.png');
-    }
-
-    function backColor() {
-      editor.backColor('#333');
-    }
-
-    function foreColor() {
-      editor.foreColor('red');
-    }
-
-    function hiliteColor() {
-      editor.hiliteColor('blue');
-    }
-
-    function clickBtn() {
-      console.log('clickBtn');
-      alert('执行预设代码 ok');
-    }
-
     function insertHTML() {
-      const script = document.createElement('script');
-      script.text = 'function clickBtn2(){alert("执行动态脚本 ok")}';
-      document.body.appendChild(script);
-
-      editor.insertHTML(`
-     <button onClick="clickBtn()">执行预设代码</button>
-<button onClick="clickBtn2()">执行动态脚本</button>
-    `);
+      editor.insertHTML(`<h1>html</h1><h2>123123</h2>`);
     }
   </script>
 </html>

From 867404292948a604f5b4618a12bf954527a1df71 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 19:59:12 +0800
Subject: [PATCH 07/25] update

---
 .../text-editor-bar/text-editor-bar.scss      |   3 +-
 .../text-editor-bar/text-editor-bar.tsx       |  62 ++-
 .../text-editor/test/basic/index.html         |  48 +-
 .../components/text-editor/text-editor.tsx    | 445 ++++++------------
 .../lib/components/tree-node/tree-node.tsx    |   4 +-
 .../lib/interfaces/text-editor.interface.ts   |  55 ++-
 6 files changed, 260 insertions(+), 357 deletions(-)

diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
index 7bdc48640..841306412 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
@@ -17,7 +17,8 @@
   vertical-align: bottom;
 
   &.selected {
-    background-color: #f0f0f0;
+    color: #fff;
+    background-color: #000000;
   }
   ion-icon {
     margin-top: 3px;
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
index 0dc19f7d5..f16ea7f75 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -1,7 +1,7 @@
-import { Component, h, Host, Prop, EventEmitter, Event } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { TextEditorAcitons } from '../../interfaces/text-editor.interface';
+import { TextActionState, TextEditorAcitons } from '../../interfaces/text-editor.interface';
 
 @Component({
   tag: 'text-editor-bar',
@@ -15,97 +15,100 @@ export class TextEditorBar {
 
   private defaultSettings = [
     {
-      action: TextEditorAcitons.Bold,
+      action: TextEditorAcitons.bold,
       icon: 'bold.svg',
       title: 'Bold'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.italic,
       icon: 'italic.svg',
       title: 'italic'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.underline,
       icon: 'underline.svg',
       title: 'underline'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.strikeThrough,
       icon: 'strikeThrough.svg',
       title: 'strikeThrough'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.heading,
       icon: 'h1.svg',
-      title: 'h1'
+      title: 'h1',
+      value: 1
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.heading,
       icon: 'h2.svg',
-      title: 'h2'
+      title: 'h2',
+      value: 2
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.heading,
       icon: 'h3.svg',
-      title: 'h3'
+      title: 'h3',
+      value: 3
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.paragraph,
       icon: 'paragraph.svg',
       title: 'paragraph'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.insertOrderedList,
       icon: 'list-ol.svg',
       title: 'list-ol'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.insertUnorderedList,
       icon: 'list-ul.svg',
       title: 'list-ul'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.quote,
       icon: 'quote.svg',
       title: 'quote'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.indent,
       icon: 'indent.svg',
       title: 'indent'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.outdent,
       icon: 'outdent.svg',
       title: 'outdent'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.justifyLeft,
       icon: 'align-left.svg',
       title: 'align-left'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.justifyCenter,
       icon: 'align-center.svg',
       title: 'align-center'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.justifyRight,
       icon: 'align-right.svg',
       title: 'align-right'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.justifyFull,
       icon: 'align-justify.svg',
       title: 'align-justify'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.undo,
       icon: 'undo.svg',
       title: 'undo'
     },
     {
-      action: TextEditorAcitons.Italic,
+      action: TextEditorAcitons.redo,
       icon: 'redo.svg',
       title: 'redo'
     }
@@ -115,13 +118,20 @@ export class TextEditorBar {
 
   @Prop() actions = this.defaultSettings;
 
+  @Prop() actionState: TextActionState;
   render() {
     return (
       <Host class="action-bar">
-        {this.actions.map(({ action, icon, title }) => {
+        {this.actions.map(({ action, icon, title, value }) => {
           const src = `${this.resourcesUrl}/text-editor/${icon}`;
+          const selected = this.actionState && this.actionState[action];
+          const cls = {
+            'action-button': true,
+            selected: selected !== undefined && selected !== false
+          };
+
           return (
-            <button class="action-button" onClick={() => this.action.emit({ detail: action })}>
+            <button class={cls} onClick={() => this.action.emit({ action, value })}>
               {icon ? <ion-icon title={title} src={src} /> : title}
             </button>
           );
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index bff85bb12..980e4fe09 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -18,27 +18,27 @@
     <script src="/scripts/testing/scripts.js"></script>
   </head>
   <body>
-    <button onClick="editor.bold()">粗体</button>
-    <button onClick="editor.italic()">斜体</button>
-    <button onClick="editor.underline()">下划线</button>
-    <button onClick="editor.strikethrough()">删除线</button>
-    <button onClick="editor.heading(1)">H1</button>
-    <button onClick="editor.heading(2)">H2</button>
-    <button onClick="editor.heading(3)">H3</button>
-    <button onClick="editor.paragraph()">paragraph</button>
-    <button onClick="editor.quote()">quote</button>
-    <button onClick="editor.olist()">olist</button>
-    <button onClick="editor.ulist()">ulist</button>
-    <button onClick="editor.line()">line</button>
-    <button onClick="editor.link('https://baidu.com')">link</button>
-    <button onClick="editor.image('https://www.baidu.com/img/bd_logo1.png')">插入图片</button>
-    <button onClick="editor.backColor('#333')">背景颜色</button>
-    <button onClick="editor.foreColor('red')">字体颜色</button>
-    <button onClick="editor.undo()">还原</button>
-    <button onClick="editor.redo()">重做</button>
-    <button onClick="insertHTML()">插入html</button>
-    <button onClick="editor.saveSelection()">记录指针位置</button>
-    <button onClick="editor.restoreSelection()">还原指针</button>
+    <button onClick="editor.action('bold')">bold</button>
+    <button onClick="editor.action('italic')">italic</button>
+    <button onClick="editor.aciton('underline')">underline</button>
+    <button onClick="editor.action('strikethrough')">strikethrough</button>
+    <button onClick="editor.action('heading',1)">H1</button>
+    <button onClick="editor.action('heading',2)">H2</button>
+    <button onClick="editor.action('heading',3)">H3</button>
+    <button onClick="editor.action('paragraph')">paragraph</button>
+    <button onClick="editor.action('quote')">quote</button>
+    <button onClick="editor.action('insertOrderedList')">insertOrderedList</button>
+    <button onClick="editor.action('insertUnorderedList')">insertUnorderedList</button>
+    <button onClick="editor.action('insertHorizontalRule')">insertHorizontalRule</button>
+    <button onClick="editor.action('createLink','https://baidu.com')">createLink</button>
+    <button onClick="editor.action('insertImage','https://www.baidu.com/img/bd_logo1.png')">insertImage</button>
+    <button onClick="editor.action('backColor','#333')">backColor</button>
+    <button onClick="editor.action('foreColor','red')">foreColor</button>
+    <button onClick="editor.action('undo')">undo</button>
+    <button onClick="editor.action('redo')">redo</button>
+    <button onClick="insertHTML()">insertHTML</button>
+    <button onClick="editor.saveSelection()">saveSelection</button>
+    <button onClick="editor.restoreSelection()">restoreSelection</button>
     <aiao-text-editor id="editor"></aiao-text-editor>
     <div id="element"></div>
     <pre id="html" style="white-space: pre-wrap;"></pre>
@@ -51,16 +51,16 @@
     const element = document.getElementById('element');
     editor.element = element;
     editor.value = '<p>输入文字</p>';
-    editor.addEventListener('mlabChange', e => {
+    editor.addEventListener('aiaoChange', e => {
       html.textContent = e.detail.value;
     });
 
-    editor.addEventListener('mlabStateChange', e => {
+    editor.addEventListener('aiaoStateChange', e => {
       state.textContent = JSON.stringify(e.detail, null, 2);
     });
 
     function insertHTML() {
-      editor.insertHTML(`<h1>html</h1><h2>123123</h2>`);
+      editor.action('insertHTML', `<h1>html</h1><h2>123123</h2>`);
     }
   </script>
 </html>
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index fff5f61e4..242457337 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -1,11 +1,12 @@
-import toNumber from 'lodash/toNumber';
-
 import { renderHiddenInput } from '@aiao/elements-cdk';
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { InputChangeEventDetail } from '../../interfaces/input.interface';
+import { TextActionState, TextEditorAcitons as TA } from '../../interfaces/text-editor.interface';
 import { getSelectionElements, restoreRange, saveRange } from '../../utils/selection';
 
+const IGNORE_ACTIONS = [TA.heading, TA.undo, TA.redo, TA.createLink, TA.indent, TA.outdent, TA.quote];
+
 // https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
 @Component({
   tag: 'aiao-text-editor',
@@ -23,12 +24,13 @@ export class RichTextEditor {
   /**
    * 值改变
    */
-  @Event() mlabChange: EventEmitter<InputChangeEventDetail>;
+  @Event() aiaoChange: EventEmitter<InputChangeEventDetail>;
+  @Event() aiaoStateChange: EventEmitter<TextActionState>;
 
   // --------------------------------------------------------------[ State ]
 
   @State() editable = false;
-  @State() _state: any = {};
+  @State() _state: TextActionState = {};
 
   // --------------------------------------------------------------[ Prop ]
   @Prop() placeholder = '请输入...';
@@ -36,7 +38,7 @@ export class RichTextEditor {
   /**
    * 段落符
    */
-  @Prop() defaultParagraphSeparator = 'p';
+  @Prop() defaultParagraphSeparator: string;
 
   /**
    * 编辑模式
@@ -53,235 +55,24 @@ export class RichTextEditor {
   elementChanged(value: HTMLElement) {
     if (this._lastElement !== value && value) {
       if (this._lastElement) {
-        this._lastElement.removeEventListener('keyup', this.statChange);
-        this._lastElement.removeEventListener('mouseup', this.statChange);
+        this._lastElement.removeEventListener('keyup', this.statChangeHander);
+        this._lastElement.removeEventListener('mouseup', this.statChangeHander);
         this._lastElement.removeEventListener('input', this.onInput);
         this._lastElement.removeEventListener('focus', this.onFocus);
         this._lastElement.removeEventListener('blur', this.onBlur);
       }
       this._lastElement = value;
-      this._lastElement.addEventListener('keyup', this.statChange);
-      this._lastElement.addEventListener('mouseup', this.statChange);
+      this._lastElement.addEventListener('keyup', this.statChangeHander);
+      this._lastElement.addEventListener('mouseup', this.statChangeHander);
       this._lastElement.addEventListener('input', this.onInput);
       this._lastElement.addEventListener('focus', this.onFocus);
       this._lastElement.addEventListener('blur', this.onBlur);
     }
-    this.element.contentEditable = 'true';
+    this._lastElement.contentEditable = 'true';
   }
   //
 
   // --------------------------------------------------------------[ public function ]
-  /**
-   * 粗体
-   */
-  @Method()
-  async bold() {
-    this.exec('bold');
-    this.statChange();
-  }
-
-  /**
-   * 斜体
-   */
-  @Method()
-  async italic() {
-    this.exec('italic');
-    this.statChange();
-  }
-
-  /**
-   * 下划线
-   */
-  @Method()
-  async underline() {
-    this.exec('underline');
-    this.statChange();
-  }
-
-  /**
-   * 删除线
-   */
-  @Method()
-  async strikethrough() {
-    this.exec('strikethrough');
-    this.statChange();
-  }
-
-  /**
-   * 标题
-   */
-  @Method()
-  async heading(val = 1) {
-    this.exec('formatBlock', `h${val}`);
-    this.statChange();
-  }
-
-  /**
-   * 段落
-   */
-  @Method()
-  async paragraph(defaultParagraphSeparator?: string) {
-    this.exec('formatBlock', defaultParagraphSeparator || this.defaultParagraphSeparator);
-  }
-
-  /**
-   * 背景颜色
-   */
-  @Method()
-  async backColor(value: string) {
-    this.exec('backColor', value);
-  }
-
-  /**
-   * 字体颜色
-   */
-  @Method()
-  async foreColor(value: string) {
-    this.exec('foreColor', value);
-  }
-
-  /**
-   * 引用
-   */
-  @Method()
-  async quote() {
-    if (this.queryCommandValue('formatBlock') === 'blockquote') {
-      this.exec('formatBlock', this.defaultParagraphSeparator);
-    } else {
-      this.exec('formatBlock', 'blockquote');
-    }
-  }
-
-  /**
-   * 缩进
-   */
-  @Method()
-  async indent() {
-    this.exec('indent');
-  }
-  /**
-   * 减少缩进
-   */
-  @Method()
-  async outdent() {
-    this.exec('outdent');
-    this.checkEle();
-  }
-
-  /**
-   * 有序列表
-   */
-  @Method()
-  async olist() {
-    this.exec('insertOrderedList');
-  }
-
-  /**
-   * 无序列表
-   */
-  @Method()
-  async ulist() {
-    this.exec('insertUnorderedList');
-  }
-
-  /**
-   * 分隔列表
-   */
-  @Method()
-  async line() {
-    this.exec('insertHorizontalRule');
-  }
-
-  /**
-   * 插入 html
-   */
-  @Method()
-  async insertHTML(val: string) {
-    this.exec('insertHTML', val.trim());
-  }
-
-  /**
-   * 链接
-   */
-  @Method()
-  async link(url: string) {
-    this.exec('createLink', url);
-  }
-
-  /**
-   * 去除链接
-   */
-  @Method()
-  async unlink() {
-    this.exec('unlink');
-  }
-
-  /**
-   * 图片
-   */
-  @Method()
-  async image(url: string) {
-    this.exec('insertImage', url);
-    console.log('insertImage', document.queryCommandSupported('insertImage'));
-  }
-
-  /**
-   * 居中
-   */
-  @Method()
-  async alginCenter() {
-    this.exec('justifyCenter');
-    this.statChange();
-  }
-
-  /**
-   * 左对齐
-   */
-  @Method()
-  async alginLeft() {
-    this.exec('justifyLeft');
-    this.statChange();
-  }
-
-  /**
-   * 两边对齐
-   */
-  @Method()
-  async alginFull() {
-    this.exec('justifyFull');
-    this.statChange();
-  }
-
-  /**
-   * 右对齐
-   */
-  @Method()
-  async alginRight() {
-    this.exec('justifyRight');
-    this.statChange();
-  }
-
-  /**
-   * 撤销
-   */
-  @Method()
-  async undo() {
-    this.exec('undo');
-  }
-
-  /**
-   * 重做
-   */
-  @Method()
-  async redo() {
-    this.exec('redo');
-  }
-  /**
-   * 字体大小
-   */
-  fontSize(value: number) {
-    this.exec('fontSize', value);
-  }
 
   /**
    * 得到选中的标签
@@ -307,12 +98,82 @@ export class RichTextEditor {
     this._restoreSelection();
   }
 
+  async action(
+    action:
+      | TA.bold
+      | TA.indent
+      | TA.insertHorizontalRule
+      | TA.insertOrderedList
+      | TA.insertUnorderedList
+      | TA.italic
+      | TA.redo
+      | TA.strikeThrough
+      | TA.underline
+      | TA.undo
+      | TA.unlink
+      | TA.outdent
+      | TA.justifyCenter
+      | TA.justifyFull
+      | TA.justifyLeft
+      | TA.justifyRight
+  ): Promise<any>;
+  async action(
+    action: TA.foreColor | TA.createLink | TA.foreColor | TA.insertHTML | TA.insertImage,
+    value: string
+  ): Promise<any>;
+  async action(action: TA.fontSize | TA.heading, value: number): Promise<any>;
+  @Method()
+  async action(action: TA, value?: any) {
+    switch (action) {
+      case TA.bold:
+      case TA.indent:
+      case TA.insertHorizontalRule:
+      case TA.insertOrderedList:
+      case TA.insertUnorderedList:
+      case TA.italic:
+      case TA.justifyCenter:
+      case TA.justifyFull:
+      case TA.justifyLeft:
+      case TA.justifyRight:
+      case TA.outdent:
+      case TA.redo:
+      case TA.strikeThrough:
+      case TA.underline:
+      case TA.undo:
+      case TA.unlink:
+        this.exec(action);
+        break;
+      case TA.backColor:
+      case TA.createLink:
+      case TA.foreColor:
+      case TA.insertHTML:
+      case TA.insertImage:
+        this.exec(action, (value || '').trim());
+        break;
+      case TA.fontSize:
+        this.exec(action, value);
+        break;
+      case TA.heading:
+        this.exec('formatBlock', `h${value}`);
+        break;
+      case TA.paragraph:
+        this.exec('formatBlock', value || this.paragraphSeparator);
+        break;
+      case TA.quote:
+        this.exec('formatBlock', 'blockquote');
+        break;
+      default:
+        break;
+    }
+    this.statChangeHander();
+  }
+
   // --------------------------------------------------------------[ Listen ]
 
   onInput = () => {
     this.checkEle();
-    this.value = this.element.innerHTML;
-    this.mlabChange.emit({ value: this.value });
+    this.value = this._lastElement.innerHTML;
+    this.aiaoChange.emit({ value: this.value });
   };
 
   onFocus = (_: Event) => {
@@ -337,42 +198,33 @@ export class RichTextEditor {
 
   // --------------------------------------------------------------[ event Handler ]
 
-  async foreColorChanged(ev: CustomEvent<any>) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    await this.restoreSelection();
-    await this.foreColor(ev.detail.value);
-  }
-
-  async backColorChanged(ev: CustomEvent<any>) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    // await this.restoreSelection();
-    // await this.backColor(ev.detail.value);
-  }
-
-  async linkChanged(ev: CustomEvent<string>) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    await this.restoreSelection();
-    await this.link(ev.detail);
-  }
+  private onAction = (event: CustomEvent<any>) => {
+    const { action, value } = event.detail;
+    this.action(action, value);
+  };
 
   // --------------------------------------------------------------[ private function ]
-  private statChange = () => {
+  private statChangeHander = () => {
     this._state = this.getState();
+    this.aiaoStateChange.emit(this._state);
   };
 
+  private get paragraphSeparator() {
+    return this.defaultParagraphSeparator || 'p';
+  }
+
   // 检测元素, 保证文本使用 p 标签
   private checkEle() {
-    if (this.element.firstChild && this.element.firstChild.nodeType === 3) {
-      this.exec('formatBlock', this.defaultParagraphSeparator);
+    if (this._lastElement.firstChild && this._lastElement.firstChild.nodeType === 3) {
+      this.exec('formatBlock', this.paragraphSeparator);
     }
   }
 
   private getSelectionAttributeValue(attribute: string) {
-    const _doc = this.el.shadowRoot || document;
-    const selection = _doc.getSelection();
+    let selection = document.getSelection();
+    if (this._lastElement) {
+      selection = this._lastElement.ownerDocument.getSelection();
+    }
     if (selection.rangeCount < 1) {
       return '';
     }
@@ -382,29 +234,41 @@ export class RichTextEditor {
   }
 
   private getState() {
+    const backState: TextActionState = {};
     const fb = this.queryCommandValue('formatBlock');
-    return {
-      bold: this.queryCommandState('bold'),
-      italic: this.queryCommandState('italic'),
-      underline: this.queryCommandState('underline'),
-      strikeThrough: this.queryCommandState('strikeThrough'),
-      backColor: this.queryCommandValue('backColor'),
-      foreColor: this.queryCommandValue('foreColor'),
-      fontSize: this.queryCommandValue('fontSize'),
-      alginLeft: this.queryCommandValue('justifyLeft') === 'true',
-      alginCenter: this.queryCommandValue('justifyCenter') === 'true',
-      alginRight: this.queryCommandValue('justifyRight') === 'true',
-      alginFull: this.queryCommandValue('justifyFull') === 'true',
-      blockquote: fb === 'blockquote',
-      h1: fb === 'h1',
-      h2: fb === 'h2',
-      h3: fb === 'h3',
-      hrefValue: this.getSelectionAttributeValue('href')
-    };
-  }
+    if (fb === 'blockquote') {
+      backState[TA.quote] = true;
+    }
+    // heading
+    const heading = /^h(?<heading>\d+)$/i.exec(fb)?.groups?.heading;
+    if (heading) {
+      backState[TA.heading] = +heading;
+    }
+
+    // link
+    const href = this.getSelectionAttributeValue('href');
+    if (href) {
+      backState.createLink = href;
+    }
+
+    Object.keys(TA)
+      .filter(key => IGNORE_ACTIONS.includes(key as any) === false)
+      .forEach(key => {
+        let val: any = this.queryCommandValue(key);
+        if (val === 'false' || val === '') {
+          return;
+        }
+        if (val === 'true') {
+          val = true;
+        }
+        backState[key] = val;
+      });
+
+    if (backState.fontSize) {
+      backState.fontSize = +backState.fontSize;
+    }
 
-  private queryCommandState(commandId: string) {
-    return document.queryCommandState(commandId);
+    return backState;
   }
 
   private queryCommandValue(commandId: string) {
@@ -415,48 +279,27 @@ export class RichTextEditor {
     return document.execCommand(commandId, true, value);
   }
 
-  private fontSizeChange(e: Event) {
-    e.preventDefault();
-    const { value } = e.target as any;
-    const size = toNumber(value);
-    this.fontSize(size);
-  }
-
   // --------------------------------------------------------------[ lifecycle ]
 
-  componentWillLoad() {
-    this.element.innerHTML = this.value || '';
-    this.exec('defaultParagraphSeparator', this.defaultParagraphSeparator);
-  }
-
   componentDidLoad() {
-    if (this.element) {
-      this.elementChanged(this.element);
+    const ele: HTMLElement = this.element || this._lastElement;
+    if (ele) {
+      this.elementChanged(ele);
+      ele.innerHTML = this.value || '';
+      this.exec('defaultParagraphSeparator', this.defaultParagraphSeparator);
     }
   }
 
   render() {
     renderHiddenInput(true, this.el, this.name, this.value, this.disabled);
-    // const {
-    //   bold,
-    //   italic,
-    //   underline,
-    //   strikeThrough,
-    //   // backColor,
-    //   foreColor,
-    //   fontSize,
-    //   alginLeft,
-    //   alginCenter,
-    //   alginRight,
-    //   alginFull,
-    //   blockquote,
-    //   h1,
-    //   h2,
-    //   h3
-    // } = this._state;
     const cls = {
       edit: this.edit
     };
-    return <Host class={cls}>{this.edit && <text-editor-bar></text-editor-bar>}</Host>;
+    return (
+      <Host class={cls}>
+        {this.edit && <text-editor-bar actionState={this._state} onAction={this.onAction}></text-editor-bar>}
+        {!this.element && <div ref={e => this.elementChanged(e)}></div>}
+      </Host>
+    );
   }
 }
diff --git a/libs/elements/src/lib/components/tree-node/tree-node.tsx b/libs/elements/src/lib/components/tree-node/tree-node.tsx
index 80e57150a..edebfd17c 100644
--- a/libs/elements/src/lib/components/tree-node/tree-node.tsx
+++ b/libs/elements/src/lib/components/tree-node/tree-node.tsx
@@ -198,9 +198,7 @@ export class TreeNode implements ComponentInterface {
         {...dragAttrs}
         draggable={this.canDrag}
       >
-        {!this.isLeaf && (
-          <ion-icon onClick={this.onExpand} name={this.expanded ? 'caret-down-outline' : 'caret-forward-outline'} />
-        )}
+        {!this.isLeaf && <ion-icon onClick={this.onExpand} name={this.expanded ? 'caret-down' : 'caret-forward'} />}
         {this.selectable && <ion-checkbox />}
         <span class="tree-node-content">
           {this.showIcon && this.icon && <ion-icon {...this.icon} />}
diff --git a/libs/elements/src/lib/interfaces/text-editor.interface.ts b/libs/elements/src/lib/interfaces/text-editor.interface.ts
index dc60eb965..12aa1af50 100644
--- a/libs/elements/src/lib/interfaces/text-editor.interface.ts
+++ b/libs/elements/src/lib/interfaces/text-editor.interface.ts
@@ -1,6 +1,29 @@
 export enum TextEditorAcitons {
-  Bold = 'bold',
-  Italic = 'italic'
+  backColor = 'backColor',
+  bold = 'bold',
+  createLink = 'createLink',
+  fontSize = 'fontSize',
+  foreColor = 'foreColor',
+  heading = 'heading',
+  indent = 'indent',
+  insertHorizontalRule = 'insertHorizontalRule',
+  insertHTML = 'insertHTML',
+  insertImage = 'insertImage',
+  insertOrderedList = 'insertOrderedList',
+  insertUnorderedList = 'insertUnorderedList',
+  italic = 'italic',
+  justifyCenter = 'justifyCenter',
+  justifyFull = 'justifyFull',
+  justifyLeft = 'justifyLeft',
+  justifyRight = 'justifyRight',
+  outdent = 'outdent',
+  paragraph = 'paragraph',
+  quote = 'blockquote',
+  redo = 'redo',
+  strikeThrough = 'strikeThrough',
+  underline = 'underline',
+  undo = 'undo',
+  unlink = 'unlink'
 }
 
 export interface TextEditorOptions {
@@ -8,3 +31,31 @@ export interface TextEditorOptions {
   icon: string;
   title: string;
 }
+
+export interface TextActionState {
+  [TextEditorAcitons.backColor]?: boolean;
+  [TextEditorAcitons.bold]?: boolean;
+  [TextEditorAcitons.createLink]?: string;
+  [TextEditorAcitons.fontSize]?: number;
+  [TextEditorAcitons.foreColor]?: string;
+  [TextEditorAcitons.heading]?: number;
+  [TextEditorAcitons.indent]?: boolean;
+  [TextEditorAcitons.insertHorizontalRule]?: boolean;
+  [TextEditorAcitons.insertHTML]?: boolean;
+  [TextEditorAcitons.insertImage]?: boolean;
+  [TextEditorAcitons.insertOrderedList]?: boolean;
+  [TextEditorAcitons.insertUnorderedList]?: boolean;
+  [TextEditorAcitons.italic]?: boolean;
+  [TextEditorAcitons.justifyCenter]?: boolean;
+  [TextEditorAcitons.justifyFull]?: boolean;
+  [TextEditorAcitons.justifyLeft]?: boolean;
+  [TextEditorAcitons.justifyRight]?: boolean;
+  [TextEditorAcitons.outdent]?: boolean;
+  [TextEditorAcitons.paragraph]?: boolean;
+  [TextEditorAcitons.quote]?: boolean;
+  [TextEditorAcitons.redo]?: boolean;
+  [TextEditorAcitons.strikeThrough]?: boolean;
+  [TextEditorAcitons.underline]?: boolean;
+  [TextEditorAcitons.undo]?: boolean;
+  [TextEditorAcitons.unlink]?: boolean;
+}

From 0c11a01c3df74cfea8c32a42caf74f479343bc19 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:16:22 +0800
Subject: [PATCH 08/25] update

---
 .../text-editor-bar/text-editor-bar.scss      |  1 -
 .../text-editor-bar/text-editor-bar.tsx       |  2 +-
 .../text-editor/test/basic/index.html         |  2 +-
 .../components/text-editor/text-editor.scss   | 19 +++++++------------
 .../components/text-editor/text-editor.tsx    | 10 ++++++----
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
index 841306412..292281faf 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
@@ -4,7 +4,6 @@
 
 :host(.action-bar) {
   background: #fff;
-  border: 1px solid #999;
 }
 
 .action-button {
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
index f16ea7f75..d8ddf33b1 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -4,7 +4,7 @@ import { config } from '../../global/config';
 import { TextActionState, TextEditorAcitons } from '../../interfaces/text-editor.interface';
 
 @Component({
-  tag: 'text-editor-bar',
+  tag: 'aiao-text-editor-bar',
   styleUrl: 'text-editor-bar.scss',
   assetsDir: 'text-editor',
   shadow: true
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index 980e4fe09..ef29d1dd4 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -49,7 +49,7 @@
     const html = document.getElementById('html');
     const state = document.getElementById('state');
     const element = document.getElementById('element');
-    editor.element = element;
+    // editor.element = element;
     editor.value = '<p>输入文字</p>';
     editor.addEventListener('aiaoChange', e => {
       html.textContent = e.detail.value;
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.scss b/libs/elements/src/lib/components/text-editor/text-editor.scss
index 17eafdc56..895e27a07 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.scss
+++ b/libs/elements/src/lib/components/text-editor/text-editor.scss
@@ -2,19 +2,14 @@
   display: block;
   max-width: 100%;
 }
-
-:host(.edit) {
-  .action-bar {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+:host(.inline-element) {
+  border: 1px solid #999;
+  aiao-text-editor-bar {
+    border-bottom: 1px solid #999;
   }
 }
 
-ion-button {
-  --padding-top: 0;
-  --padding-start: 5px;
-  --padding-end: 5px;
-  --padding-bottom: 0;
-  font-size: 12px;
+.element {
+  padding: 0 10px;
+  outline: 0;
 }
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index 242457337..5a156f462 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -45,7 +45,7 @@ export class RichTextEditor {
    */
   @Prop({ mutable: true }) value = '';
   @Prop() disabled = false;
-  @Prop() edit = true;
+  @Prop() actionBar = true;
 
   @Prop() name: string;
   @Prop() element: HTMLElement;
@@ -293,12 +293,14 @@ export class RichTextEditor {
   render() {
     renderHiddenInput(true, this.el, this.name, this.value, this.disabled);
     const cls = {
-      edit: this.edit
+      'inline-element': !this.element
     };
     return (
       <Host class={cls}>
-        {this.edit && <text-editor-bar actionState={this._state} onAction={this.onAction}></text-editor-bar>}
-        {!this.element && <div ref={e => this.elementChanged(e)}></div>}
+        {this.actionBar && (
+          <aiao-text-editor-bar actionState={this._state} onAction={this.onAction}></aiao-text-editor-bar>
+        )}
+        {!this.element && <div class="element" ref={e => this.elementChanged(e)}></div>}
       </Host>
     );
   }

From 3854fe1340566ba2cb4faa6cc03178d481266e92 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:26:21 +0800
Subject: [PATCH 09/25] update

---
 .../lib/components/text-editor-bar/text-editor-bar.scss   | 8 +++++++-
 .../lib/components/text-editor-bar/text-editor-bar.tsx    | 8 ++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
index 292281faf..d37833566 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.scss
@@ -14,10 +14,16 @@
   width: 30px;
   font-size: medium;
   vertical-align: bottom;
+  outline: 0;
 
+  &:hover {
+    background: rgb(224, 224, 224);
+  }
+
+  &:active,
   &.selected {
     color: #fff;
-    background-color: #000000;
+    background: #000000;
   }
   ion-icon {
     margin-top: 3px;
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
index d8ddf33b1..c8d6727aa 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -124,10 +124,14 @@ export class TextEditorBar {
       <Host class="action-bar">
         {this.actions.map(({ action, icon, title, value }) => {
           const src = `${this.resourcesUrl}/text-editor/${icon}`;
-          const selected = this.actionState && this.actionState[action];
+          let selected = this.actionState && this.actionState[action];
+          selected = selected !== undefined && selected !== false;
+          if (selected && value) {
+            selected = value === this.actionState[action];
+          }
           const cls = {
             'action-button': true,
-            selected: selected !== undefined && selected !== false
+            selected
           };
 
           return (

From 221701b2a25770eaca65389dc93c0c5c37b78dd1 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:44:30 +0800
Subject: [PATCH 10/25] update

---
 .../src/lib/components/tree-node/test/basic/index.html |  6 +++++-
 .../src/lib/components/tree-node/tree-node.scss        |  9 +++------
 .../src/lib/components/tree-node/tree-node.tsx         | 10 ++--------
 libs/elements/src/lib/components/tree/tree.tsx         | 10 ++++------
 4 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/libs/elements/src/lib/components/tree-node/test/basic/index.html b/libs/elements/src/lib/components/tree-node/test/basic/index.html
index d2175f6e6..ef99e7bb2 100644
--- a/libs/elements/src/lib/components/tree-node/test/basic/index.html
+++ b/libs/elements/src/lib/components/tree-node/test/basic/index.html
@@ -18,7 +18,11 @@
     <script src="/scripts/testing/scripts.js"></script>
   </head>
   <body>
-    <aiao-tree-node name="tree"></aiao-tree-node>
+    <aiao-tree-node name="tree" expanded>
+      <aiao-tree-node name="a" expanded>
+        <aiao-tree-node name="b" is-leaf="true" />
+      </aiao-tree-node>
+    </aiao-tree-node>
     <aiao-tree-node name="leaf" is-leaf="fasle"></aiao-tree-node>
     <aiao-tree-node name="leaf" is-leaf="fasle" selectable></aiao-tree-node>
   </body>
diff --git a/libs/elements/src/lib/components/tree-node/tree-node.scss b/libs/elements/src/lib/components/tree-node/tree-node.scss
index 3f4a4fcf4..394c90133 100644
--- a/libs/elements/src/lib/components/tree-node/tree-node.scss
+++ b/libs/elements/src/lib/components/tree-node/tree-node.scss
@@ -5,6 +5,7 @@
   --drop-hint-line-height: 1px;
   --drop-hint-line-color: #18a0fb;
   cursor: pointer;
+  user-select: none;
 }
 
 .tree-node-native {
@@ -27,16 +28,12 @@
   z-index: 1;
 }
 
-:host(.hover) {
-  .tree-node-native:after {
+:host(.drag) {
+  .tree-node-native:hover:after {
     @extend .hover-style;
   }
 }
 
-.tree-node-native:hover:after {
-  @extend .hover-style;
-}
-
 .tree-node-content {
   display: inline-block;
   border-style: solid;
diff --git a/libs/elements/src/lib/components/tree-node/tree-node.tsx b/libs/elements/src/lib/components/tree-node/tree-node.tsx
index edebfd17c..a5f13097c 100644
--- a/libs/elements/src/lib/components/tree-node/tree-node.tsx
+++ b/libs/elements/src/lib/components/tree-node/tree-node.tsx
@@ -68,11 +68,6 @@ export class TreeNode implements ComponentInterface {
    */
   @Prop({ mutable: true }) selected = false;
 
-  /**
-   * hover
-   */
-  @Prop({ mutable: true }) hover = false;
-
   /**
    * drag
    */
@@ -116,7 +111,6 @@ export class TreeNode implements ComponentInterface {
     this.mlabTreeNodeOver.emit({ ev, node: this, value: this.value });
   };
   onMouseOut = (ev: MouseEvent) => {
-    this.hover = false;
     this.mlabTreeNodeOut.emit({ ev, node: this, value: this.value });
   };
 
@@ -168,7 +162,7 @@ export class TreeNode implements ComponentInterface {
           dragging: this.dragging,
           [`drop-${this.dropType}`]: this.dragOver,
           selected: this.selected,
-          hover: this.hover
+          drag: this.canDrag
         }}
         onClick={this.onClick}
       >
@@ -199,7 +193,7 @@ export class TreeNode implements ComponentInterface {
         draggable={this.canDrag}
       >
         {!this.isLeaf && <ion-icon onClick={this.onExpand} name={this.expanded ? 'caret-down' : 'caret-forward'} />}
-        {this.selectable && <ion-checkbox />}
+        {this.selectable && <input type="checkbox" />}
         <span class="tree-node-content">
           {this.showIcon && this.icon && <ion-icon {...this.icon} />}
           <span>{this.name}</span>
diff --git a/libs/elements/src/lib/components/tree/tree.tsx b/libs/elements/src/lib/components/tree/tree.tsx
index 5ea31d2e9..e24d7c3e8 100644
--- a/libs/elements/src/lib/components/tree/tree.tsx
+++ b/libs/elements/src/lib/components/tree/tree.tsx
@@ -183,16 +183,14 @@ export class Tree implements ComponentInterface {
 
   @Method()
   async overElement(elementId: string) {
-    // tslint:disable-next-line: triple-equals
-    this.refMap.forEach((btn, id) => (btn.hover = id == elementId));
+    //
+    console.log('over', elementId);
   }
 
   @Method()
   async outElement(elementId: string) {
-    const btn = this.refMap.get(`${elementId}`);
-    if (btn) {
-      btn.hover = false;
-    }
+    // const btn = this.refMap.get(`${elementId}`);
+    console.log('out', elementId);
   }
 
   // --------------------------------------------------------------[ Listen ]

From ccd9253d558a25251fb2d8238b6d508ed81c0d83 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:47:30 +0800
Subject: [PATCH 11/25] update

---
 .../lib/components/tree-node/tree-node.tsx    | 38 +++++++++----------
 .../elements/src/lib/components/tree/tree.tsx | 16 ++++----
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/libs/elements/src/lib/components/tree-node/tree-node.tsx b/libs/elements/src/lib/components/tree-node/tree-node.tsx
index a5f13097c..c69979c15 100644
--- a/libs/elements/src/lib/components/tree-node/tree-node.tsx
+++ b/libs/elements/src/lib/components/tree-node/tree-node.tsx
@@ -71,34 +71,34 @@ export class TreeNode implements ComponentInterface {
   /**
    * drag
    */
-  @Event() mlabTreeNodeDragStart: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeDragStart: EventEmitter<TreeNodeEvent>;
   /**
    * drag
    */
-  @Event() mlabTreeNodeDragEnter: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeDragEnter: EventEmitter<TreeNodeEvent>;
   /**
    * drag
    */
-  @Event() mlabTreeNodeDragOver: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeDragOver: EventEmitter<TreeNodeEvent>;
 
   /**
    * drag
    */
-  @Event() mlabTreeNodeDragLeave: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeDragLeave: EventEmitter<TreeNodeEvent>;
   /**
    * drag
    */
-  @Event() mlabTreeNodeDrop: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeDrop: EventEmitter<TreeNodeEvent>;
   /**
    * drag
    */
-  @Event() mlabTreeNodeDragEnd: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeDragEnd: EventEmitter<TreeNodeEvent>;
   /**
    * 节点 click
    */
-  @Event() mlabTreeNodeClick: EventEmitter<TreeNodeEvent>;
-  @Event() mlabTreeNodeOver: EventEmitter<TreeNodeEvent>;
-  @Event() mlabTreeNodeOut: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeClick: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeOver: EventEmitter<TreeNodeEvent>;
+  @Event() aiaoTreeNodeOut: EventEmitter<TreeNodeEvent>;
 
   @State() dragOver = false;
   @State() dropType: 'in' | 'top' | 'bottom' = 'in';
@@ -106,12 +106,12 @@ export class TreeNode implements ComponentInterface {
 
   onExpand = () => (this.expanded = !this.expanded);
 
-  onClick = (ev: MouseEvent) => this.mlabTreeNodeClick.emit({ ev, node: this, value: this.value });
+  onClick = (ev: MouseEvent) => this.aiaoTreeNodeClick.emit({ ev, node: this, value: this.value });
   onMouseOver = (ev: MouseEvent) => {
-    this.mlabTreeNodeOver.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeOver.emit({ ev, node: this, value: this.value });
   };
   onMouseOut = (ev: MouseEvent) => {
-    this.mlabTreeNodeOut.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeOut.emit({ ev, node: this, value: this.value });
   };
 
   onDragStart = (ev: DragEvent) => {
@@ -125,31 +125,31 @@ export class TreeNode implements ComponentInterface {
     if (labelEle) {
       ev.dataTransfer.setDragImage(labelEle, labelEle.clientWidth, labelEle.clientHeight);
     }
-    this.mlabTreeNodeDragStart.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeDragStart.emit({ ev, node: this, value: this.value });
   };
 
   protected onDragEnter = (ev: DragEvent) => {
-    this.mlabTreeNodeDragEnter.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeDragEnter.emit({ ev, node: this, value: this.value });
   };
 
   protected onDragOver = (ev: DragEvent) => {
     ev.preventDefault();
-    this.mlabTreeNodeDragOver.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeDragOver.emit({ ev, node: this, value: this.value });
   };
 
   protected onDragLeave = (ev: DragEvent) => {
     this.dragOver = false;
-    this.mlabTreeNodeDragLeave.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeDragLeave.emit({ ev, node: this, value: this.value });
   };
 
   protected onDrop = (ev: DragEvent) => {
     this.dragOver = false;
-    this.mlabTreeNodeDrop.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeDrop.emit({ ev, node: this, value: this.value });
   };
 
   protected onDragEnd = (ev: DragEvent) => {
     this.dragging = false;
-    this.mlabTreeNodeDragEnd.emit({ ev, node: this, value: this.value });
+    this.aiaoTreeNodeDragEnd.emit({ ev, node: this, value: this.value });
   };
 
   render() {
@@ -189,8 +189,8 @@ export class TreeNode implements ComponentInterface {
         onClick={this.onClick}
         onMouseOver={this.onMouseOver}
         onMouseOut={this.onMouseOut}
-        {...dragAttrs}
         draggable={this.canDrag}
+        {...dragAttrs}
       >
         {!this.isLeaf && <ion-icon onClick={this.onExpand} name={this.expanded ? 'caret-down' : 'caret-forward'} />}
         {this.selectable && <input type="checkbox" />}
diff --git a/libs/elements/src/lib/components/tree/tree.tsx b/libs/elements/src/lib/components/tree/tree.tsx
index e24d7c3e8..eb65942e1 100644
--- a/libs/elements/src/lib/components/tree/tree.tsx
+++ b/libs/elements/src/lib/components/tree/tree.tsx
@@ -47,7 +47,7 @@ export class Tree implements ComponentInterface {
   /**
    * 改版的数据节点
    */
-  @Event() mlabTreeNodeChange: EventEmitter<TreeNodeData[]>;
+  @Event() aiaoTreeNodeChange: EventEmitter<TreeNodeData[]>;
   @Event() mlabTreeDrop: EventEmitter<any>;
 
   // --------------------------------------------------------------[ State ]
@@ -194,13 +194,13 @@ export class Tree implements ComponentInterface {
   }
 
   // --------------------------------------------------------------[ Listen ]
-  @Listen('mlabTreeNodeDragStart')
+  @Listen('aiaoTreeNodeDragStart')
   onNodeDragStart(e: CustomEvent<TreeNodeEvent>) {
     const { node } = e.detail;
     this.dragNode = node;
   }
 
-  @Listen('mlabTreeNodeDragEnter')
+  @Listen('aiaoTreeNodeDragEnter')
   onNodeDragEnter(e: CustomEvent<TreeNodeEvent>) {
     const { node } = e.detail;
     if (node !== this.dragNode) {
@@ -211,7 +211,7 @@ export class Tree implements ComponentInterface {
     }
   }
 
-  @Listen('mlabTreeNodeDragOver')
+  @Listen('aiaoTreeNodeDragOver')
   onNodeDragOver(e: CustomEvent<TreeNodeEvent>) {
     const { ev, node } = e.detail;
     if (node !== this.dragNode) {
@@ -247,12 +247,12 @@ export class Tree implements ComponentInterface {
     }
   }
 
-  @Listen('mlabTreeNodeDragLeave')
+  @Listen('aiaoTreeNodeDragLeave')
   onNodeDragLeave(_: CustomEvent<TreeNodeEvent>) {
     //
   }
 
-  @Listen('mlabTreeNodeDrop')
+  @Listen('aiaoTreeNodeDrop')
   async onNodeDrop(_: CustomEvent<TreeNodeEvent>) {
     const { node } = _.detail;
     const dropNodeData = this.dataMap.get(`${node.value}`);
@@ -320,12 +320,12 @@ export class Tree implements ComponentInterface {
     if (changeIds.size > 0) {
       this.data = [...this.data];
       const changedData = Array.from(changeIds).map(id => this.dataMap.get(id));
-      this.mlabTreeNodeChange.emit(changedData);
+      this.aiaoTreeNodeChange.emit(changedData);
       this.mlabChange.emit();
     }
   }
 
-  @Listen('mlabTreeNodeDragEnd')
+  @Listen('aiaoTreeNodeDragEnd')
   onNodeDragEnd(_: CustomEvent<TreeNodeEvent>) {
     this.dragNode = undefined;
   }

From 7e86df7f00efb944a0f91236e842886922d93ba5 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:48:25 +0800
Subject: [PATCH 12/25] update

---
 libs/elements/src/lib/components/tree-node/tree-node.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/libs/elements/src/lib/components/tree-node/tree-node.scss b/libs/elements/src/lib/components/tree-node/tree-node.scss
index 394c90133..6bf7f5dce 100644
--- a/libs/elements/src/lib/components/tree-node/tree-node.scss
+++ b/libs/elements/src/lib/components/tree-node/tree-node.scss
@@ -71,9 +71,6 @@
   }
 }
 
-ion-checkbox {
-  position: relative;
-}
 ::slotted(.children) {
   display: none;
 }

From eadaa680e45049778b00b709197a308b9ab2ca86 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:50:12 +0800
Subject: [PATCH 13/25] update

---
 libs/elements/src/lib/components/tree/tree.scss | 6 +++---
 libs/elements/src/lib/components/tree/tree.tsx  | 8 ++++----
 libs/elements/src/lib/components/tree/util.ts   | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/libs/elements/src/lib/components/tree/tree.scss b/libs/elements/src/lib/components/tree/tree.scss
index fc0262cf4..14c81bf5d 100644
--- a/libs/elements/src/lib/components/tree/tree.scss
+++ b/libs/elements/src/lib/components/tree/tree.scss
@@ -2,13 +2,13 @@
   display: block;
   height: 100%;
   width: 100%;
-  > mlab-tree-node {
+  > aiao-tree-node {
     padding-left: 0;
   }
 
-  mlab-tree-node.selected {
+  aiao-tree-node.selected {
     background: #daebf7;
-    mlab-tree-node {
+    aiao-tree-node {
       background: #edf5fa;
     }
   }
diff --git a/libs/elements/src/lib/components/tree/tree.tsx b/libs/elements/src/lib/components/tree/tree.tsx
index eb65942e1..7ac7e6254 100644
--- a/libs/elements/src/lib/components/tree/tree.tsx
+++ b/libs/elements/src/lib/components/tree/tree.tsx
@@ -42,13 +42,13 @@ export class Tree implements ComponentInterface {
   /**
    * change
    */
-  @Event() mlabChange: EventEmitter<void>;
+  @Event() aiaoChange: EventEmitter<void>;
 
   /**
    * 改版的数据节点
    */
   @Event() aiaoTreeNodeChange: EventEmitter<TreeNodeData[]>;
-  @Event() mlabTreeDrop: EventEmitter<any>;
+  @Event() aiaoTreeDrop: EventEmitter<any>;
 
   // --------------------------------------------------------------[ State ]
   /**
@@ -321,7 +321,7 @@ export class Tree implements ComponentInterface {
       this.data = [...this.data];
       const changedData = Array.from(changeIds).map(id => this.dataMap.get(id));
       this.aiaoTreeNodeChange.emit(changedData);
-      this.mlabChange.emit();
+      this.aiaoChange.emit();
     }
   }
 
@@ -395,7 +395,7 @@ export class Tree implements ComponentInterface {
   }
 
   componentDidLoad() {
-    this.el.ondrop = ev => this.mlabTreeDrop.emit({ ev, tree: this });
+    this.el.ondrop = ev => this.aiaoTreeDrop.emit({ ev, tree: this });
     this.el.ondragover = e => e.preventDefault();
   }
 
diff --git a/libs/elements/src/lib/components/tree/util.ts b/libs/elements/src/lib/components/tree/util.ts
index d0f3b5003..c4ef0b5c9 100644
--- a/libs/elements/src/lib/components/tree/util.ts
+++ b/libs/elements/src/lib/components/tree/util.ts
@@ -1,7 +1,7 @@
 import { TreeDataState, TreeNodeData } from '../tree-node/tree-node.interface';
 
 export const findTreeNodeElement = (el: Element): Element | undefined => {
-  if (el.classList.contains('tree-drag-node') || el.tagName === 'mlab-tree') {
+  if (el.classList.contains('tree-drag-node') || el.tagName === 'aiao-tree') {
     return el;
   } else if (el.parentElement) {
     return findTreeNodeElement(el.parentElement);

From 222cd147da2084439028c4ad4d031c646b6da9ec Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:52:47 +0800
Subject: [PATCH 14/25] update

---
 libs/elements/stencil.prod.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/elements/stencil.prod.config.ts b/libs/elements/stencil.prod.config.ts
index 4a7ea8329..7a38d471d 100644
--- a/libs/elements/stencil.prod.config.ts
+++ b/libs/elements/stencil.prod.config.ts
@@ -27,7 +27,7 @@ export const config: Config = {
       directivesProxyFile: resolve(__dirname, '../elements-angular/src/lib/directives/proxies.ts'),
       directivesUtilsFile: resolve(__dirname, '../elements-angular/src/lib/directives/proxies-utils.ts'),
       directivesArrayFile: resolve(__dirname, '../elements-angular/src/lib/directives/proxies-list.txt'),
-      excludeComponents: []
+      excludeComponents: ['aiao-text-editor-bar']
     }),
     reactOutputTarget({
       componentCorePackage: '@aiao/elements',
@@ -44,7 +44,7 @@ export const config: Config = {
     { components: ['aiao-elements-form'] },
     { components: ['aiao-elements-view'] },
     { components: ['aiao-img'] },
-    { components: ['aiao-text-editor'] },
+    { components: ['aiao-text-editor', 'aiao-text-editor-bar'] },
     { components: ['aiao-tree-node', 'aiao-tree'] }
   ],
   tsconfig: 'tsconfig.json',

From 12f8f524cefae7c8cffa6a9211f74372c21644d7 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 20:58:51 +0800
Subject: [PATCH 15/25] update

---
 .gitignore                                    |  2 +
 .../src/lib/directives/proxies-list.txt       | 15 ------
 .../src/lib/directives/proxies.ts             | 53 ++++---------------
 .../src/lib/elements.module.ts                |  6 +--
 libs/elements-react/src/lib/proxies.ts        |  2 -
 libs/elements/stencil.prod.config.ts          |  9 ++--
 6 files changed, 20 insertions(+), 67 deletions(-)
 delete mode 100644 libs/elements-angular/src/lib/directives/proxies-list.txt

diff --git a/.gitignore b/.gitignore
index a42097164..f4a945dcd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,5 @@ testem.log
 Thumbs.db
 
 *.env
+
+**/proxies-list.txt
diff --git a/libs/elements-angular/src/lib/directives/proxies-list.txt b/libs/elements-angular/src/lib/directives/proxies-list.txt
deleted file mode 100644
index 0e246f389..000000000
--- a/libs/elements-angular/src/lib/directives/proxies-list.txt
+++ /dev/null
@@ -1,15 +0,0 @@
-
-import * as d from './proxies';
-
-export const DIRECTIVES = [
-d.AiaoCodeDiffEditor,
-  d.AiaoCodeEditor,
-  d.AiaoElementsEditor,
-  d.AiaoElementsEditorPreview,
-  d.AiaoElementsForm,
-  d.AiaoElementsView,
-  d.AiaoImg,
-  d.AiaoTextEditor,
-  d.AiaoTree,
-  d.AiaoTreeNode
-];
diff --git a/libs/elements-angular/src/lib/directives/proxies.ts b/libs/elements-angular/src/lib/directives/proxies.ts
index caf051b5a..72542ca5f 100644
--- a/libs/elements-angular/src/lib/directives/proxies.ts
+++ b/libs/elements-angular/src/lib/directives/proxies.ts
@@ -42,17 +42,6 @@ export class AiaoElementsEditor {
   }
 }
 
-export declare interface AiaoElementsEditorPreview extends Components.AiaoElementsEditorPreview {}
-@ProxyCmp({inputs: ['config', 'editMode', 'value']})
-@Component({ selector: 'aiao-elements-editor-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['config', 'editMode', 'value'] })
-export class AiaoElementsEditorPreview {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
 export declare interface AiaoElementsForm extends Components.AiaoElementsForm {}
 @ProxyCmp({inputs: ['html', 'schema', 'value'], 'methods': ['values', 'flattenPathValues', 'getValue', 'setValue', 'setValues', 'reset', 'markAsPristine', 'markAsDirty']})
 @Component({ selector: 'aiao-elements-form', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['html', 'schema', 'value'] })
@@ -68,8 +57,8 @@ export class AiaoElementsForm {
 }
 
 export declare interface AiaoElementsView extends Components.AiaoElementsView {}
-@ProxyCmp({inputs: ['html']})
-@Component({ selector: 'aiao-elements-view', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['html'] })
+@ProxyCmp({inputs: ['css', 'html', 'js']})
+@Component({ selector: 'aiao-elements-view', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['css', 'html', 'js'] })
 export class AiaoElementsView {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -93,15 +82,16 @@ export class AiaoImg {
 }
 
 export declare interface AiaoTextEditor extends Components.AiaoTextEditor {}
-@ProxyCmp({inputs: ['defaultParagraphSeparator', 'disabled', 'edit', 'element', 'name', 'placeholder', 'value'], 'methods': ['bold', 'italic', 'underline', 'strikethrough', 'heading', 'paragraph', 'backColor', 'foreColor', 'quote', 'indent', 'outdent', 'olist', 'ulist', 'line', 'insertHTML', 'link', 'unlink', 'image', 'alginCenter', 'alginLeft', 'alginFull', 'alginRight', 'undo', 'redo', 'getSelectionElements', 'saveSelection', 'restoreSelection']})
-@Component({ selector: 'aiao-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['defaultParagraphSeparator', 'disabled', 'edit', 'element', 'name', 'placeholder', 'value'] })
+@ProxyCmp({inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'placeholder', 'value'], 'methods': ['getSelectionElements', 'saveSelection', 'restoreSelection', 'action']})
+@Component({ selector: 'aiao-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'placeholder', 'value'] })
 export class AiaoTextEditor {
-  mlabChange!: EventEmitter<CustomEvent>;
+  aiaoChange!: EventEmitter<CustomEvent>;
+  aiaoStateChange!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['mlabChange']);
+    proxyOutputs(this, this.el, ['aiaoChange', 'aiaoStateChange']);
   }
 }
 
@@ -109,34 +99,13 @@ export declare interface AiaoTree extends Components.AiaoTree {}
 @ProxyCmp({inputs: ['autoExpandParent', 'canDrag', 'checkable', 'config', 'data', 'defaultExpandLevel', 'defaultExpandParent', 'defaultExpandedKeys', 'defaultSelectedKeys', 'disabled', 'multiple', 'selectable', 'showIcon', 'showLine', 'showMode'], 'methods': ['canDrop', 'select', 'overElement', 'outElement', 'nodeRefMap']})
 @Component({ selector: 'aiao-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoExpandParent', 'canDrag', 'checkable', 'config', 'data', 'defaultExpandLevel', 'defaultExpandParent', 'defaultExpandedKeys', 'defaultSelectedKeys', 'disabled', 'multiple', 'selectable', 'showIcon', 'showLine', 'showMode'] })
 export class AiaoTree {
-  mlabChange!: EventEmitter<CustomEvent>;
-  mlabTreeNodeChange!: EventEmitter<CustomEvent>;
-  mlabTreeDrop!: EventEmitter<CustomEvent>;
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['mlabChange', 'mlabTreeNodeChange', 'mlabTreeDrop']);
-  }
-}
-
-export declare interface AiaoTreeNode extends Components.AiaoTreeNode {}
-@ProxyCmp({inputs: ['canDrag', 'checkable', 'disabled', 'expanded', 'hover', 'icon', 'isLeaf', 'name', 'selectable', 'selected', 'showIcon', 'showLine', 'value']})
-@Component({ selector: 'aiao-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['canDrag', 'checkable', 'disabled', 'expanded', 'hover', 'icon', 'isLeaf', 'name', 'selectable', 'selected', 'showIcon', 'showLine', 'value'] })
-export class AiaoTreeNode {
-  mlabTreeNodeDragStart!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragEnter!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragOver!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragLeave!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDrop!: EventEmitter<CustomEvent>;
-  mlabTreeNodeDragEnd!: EventEmitter<CustomEvent>;
-  mlabTreeNodeClick!: EventEmitter<CustomEvent>;
-  mlabTreeNodeOver!: EventEmitter<CustomEvent>;
-  mlabTreeNodeOut!: EventEmitter<CustomEvent>;
+  aiaoChange!: EventEmitter<CustomEvent>;
+  aiaoTreeNodeChange!: EventEmitter<CustomEvent>;
+  aiaoTreeDrop!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['mlabTreeNodeDragStart', 'mlabTreeNodeDragEnter', 'mlabTreeNodeDragOver', 'mlabTreeNodeDragLeave', 'mlabTreeNodeDrop', 'mlabTreeNodeDragEnd', 'mlabTreeNodeClick', 'mlabTreeNodeOver', 'mlabTreeNodeOut']);
+    proxyOutputs(this, this.el, ['aiaoChange', 'aiaoTreeNodeChange', 'aiaoTreeDrop']);
   }
 }
diff --git a/libs/elements-angular/src/lib/elements.module.ts b/libs/elements-angular/src/lib/elements.module.ts
index 4cee7550d..2a4725aa6 100644
--- a/libs/elements-angular/src/lib/elements.module.ts
+++ b/libs/elements-angular/src/lib/elements.module.ts
@@ -6,13 +6,11 @@ import {
   AiaoCodeDiffEditor,
   AiaoCodeEditor,
   AiaoElementsEditor,
-  AiaoElementsEditorPreview,
   AiaoElementsForm,
   AiaoElementsView,
   AiaoImg,
   AiaoTextEditor,
-  AiaoTree,
-  AiaoTreeNode
+  AiaoTree
 } from './directives/proxies';
 import { initialize } from './elements-initialize';
 import { TextValueAccessor } from './providers/control-value-accessors/text-value-accessor';
@@ -23,13 +21,11 @@ const DECLARATIONS = [
   AiaoCodeDiffEditor,
   AiaoCodeEditor,
   AiaoElementsEditor,
-  AiaoElementsEditorPreview,
   AiaoElementsForm,
   AiaoElementsView,
   AiaoImg,
   AiaoTextEditor,
   AiaoTree,
-  AiaoTreeNode,
   // accessor
   TextValueAccessor
 ];
diff --git a/libs/elements-react/src/lib/proxies.ts b/libs/elements-react/src/lib/proxies.ts
index ea0372658..d4a50a046 100644
--- a/libs/elements-react/src/lib/proxies.ts
+++ b/libs/elements-react/src/lib/proxies.ts
@@ -11,10 +11,8 @@ applyPolyfills().then(() => defineCustomElements());
 export const AiaoCodeDiffEditor = /*@__PURE__*/createReactComponent<JSX.AiaoCodeDiffEditor, HTMLAiaoCodeDiffEditorElement>('aiao-code-diff-editor');
 export const AiaoCodeEditor = /*@__PURE__*/createReactComponent<JSX.AiaoCodeEditor, HTMLAiaoCodeEditorElement>('aiao-code-editor');
 export const AiaoElementsEditor = /*@__PURE__*/createReactComponent<JSX.AiaoElementsEditor, HTMLAiaoElementsEditorElement>('aiao-elements-editor');
-export const AiaoElementsEditorPreview = /*@__PURE__*/createReactComponent<JSX.AiaoElementsEditorPreview, HTMLAiaoElementsEditorPreviewElement>('aiao-elements-editor-preview');
 export const AiaoElementsForm = /*@__PURE__*/createReactComponent<JSX.AiaoElementsForm, HTMLAiaoElementsFormElement>('aiao-elements-form');
 export const AiaoElementsView = /*@__PURE__*/createReactComponent<JSX.AiaoElementsView, HTMLAiaoElementsViewElement>('aiao-elements-view');
 export const AiaoImg = /*@__PURE__*/createReactComponent<JSX.AiaoImg, HTMLAiaoImgElement>('aiao-img');
 export const AiaoTextEditor = /*@__PURE__*/createReactComponent<JSX.AiaoTextEditor, HTMLAiaoTextEditorElement>('aiao-text-editor');
 export const AiaoTree = /*@__PURE__*/createReactComponent<JSX.AiaoTree, HTMLAiaoTreeElement>('aiao-tree');
-export const AiaoTreeNode = /*@__PURE__*/createReactComponent<JSX.AiaoTreeNode, HTMLAiaoTreeNodeElement>('aiao-tree-node');
diff --git a/libs/elements/stencil.prod.config.ts b/libs/elements/stencil.prod.config.ts
index 7a38d471d..035c6ab50 100644
--- a/libs/elements/stencil.prod.config.ts
+++ b/libs/elements/stencil.prod.config.ts
@@ -5,6 +5,8 @@ import { Config } from '@stencil/core';
 import { reactOutputTarget } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
 
+const excludeComponents = ['aiao-text-editor-bar', 'aiao-tree-node', 'aiao-elements-editor-preview', 'ion-icon'];
+
 export const config: Config = {
   namespace: 'aiao-elements',
   plugins: [sass()],
@@ -27,11 +29,12 @@ export const config: Config = {
       directivesProxyFile: resolve(__dirname, '../elements-angular/src/lib/directives/proxies.ts'),
       directivesUtilsFile: resolve(__dirname, '../elements-angular/src/lib/directives/proxies-utils.ts'),
       directivesArrayFile: resolve(__dirname, '../elements-angular/src/lib/directives/proxies-list.txt'),
-      excludeComponents: ['aiao-text-editor-bar']
+      excludeComponents
     }),
     reactOutputTarget({
       componentCorePackage: '@aiao/elements',
-      proxiesFile: resolve(__dirname, '../elements-react/src/lib/proxies.ts')
+      proxiesFile: resolve(__dirname, '../elements-react/src/lib/proxies.ts'),
+      excludeComponents
     })
     // {
     //   type: 'docs-readme'
@@ -45,7 +48,7 @@ export const config: Config = {
     { components: ['aiao-elements-view'] },
     { components: ['aiao-img'] },
     { components: ['aiao-text-editor', 'aiao-text-editor-bar'] },
-    { components: ['aiao-tree-node', 'aiao-tree'] }
+    { components: ['aiao-tree', 'aiao-tree-node'] }
   ],
   tsconfig: 'tsconfig.json',
   globalScript: 'src/lib/global/global.ts'

From 4fea3f6e74a65fb0f0a81b2d8aa8fdc168203598 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 21:07:01 +0800
Subject: [PATCH 16/25] update

---
 libs/elements/stencil.prod.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/elements/stencil.prod.config.ts b/libs/elements/stencil.prod.config.ts
index 035c6ab50..1133fe86e 100644
--- a/libs/elements/stencil.prod.config.ts
+++ b/libs/elements/stencil.prod.config.ts
@@ -5,7 +5,7 @@ import { Config } from '@stencil/core';
 import { reactOutputTarget } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
 
-const excludeComponents = ['aiao-text-editor-bar', 'aiao-tree-node', 'aiao-elements-editor-preview', 'ion-icon'];
+const excludeComponents = ['aiao-text-editor-bar', 'aiao-tree-node', 'ion-icon'];
 
 export const config: Config = {
   namespace: 'aiao-elements',

From bea01ad892407ce0a560f378f2c4effa66dc4d01 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 21:22:13 +0800
Subject: [PATCH 17/25] update

---
 libs/elements-angular/src/lib/directives/proxies.ts | 11 +++++++++++
 libs/elements-react/src/lib/proxies.ts              |  1 +
 libs/stencil-toolkit/src/lib/util/runner.ts         |  1 +
 3 files changed, 13 insertions(+)

diff --git a/libs/elements-angular/src/lib/directives/proxies.ts b/libs/elements-angular/src/lib/directives/proxies.ts
index 72542ca5f..3c762d709 100644
--- a/libs/elements-angular/src/lib/directives/proxies.ts
+++ b/libs/elements-angular/src/lib/directives/proxies.ts
@@ -42,6 +42,17 @@ export class AiaoElementsEditor {
   }
 }
 
+export declare interface AiaoElementsEditorPreview extends Components.AiaoElementsEditorPreview {}
+@ProxyCmp({inputs: ['config', 'editMode', 'value']})
+@Component({ selector: 'aiao-elements-editor-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['config', 'editMode', 'value'] })
+export class AiaoElementsEditorPreview {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
 export declare interface AiaoElementsForm extends Components.AiaoElementsForm {}
 @ProxyCmp({inputs: ['html', 'schema', 'value'], 'methods': ['values', 'flattenPathValues', 'getValue', 'setValue', 'setValues', 'reset', 'markAsPristine', 'markAsDirty']})
 @Component({ selector: 'aiao-elements-form', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['html', 'schema', 'value'] })
diff --git a/libs/elements-react/src/lib/proxies.ts b/libs/elements-react/src/lib/proxies.ts
index d4a50a046..b8207df0f 100644
--- a/libs/elements-react/src/lib/proxies.ts
+++ b/libs/elements-react/src/lib/proxies.ts
@@ -11,6 +11,7 @@ applyPolyfills().then(() => defineCustomElements());
 export const AiaoCodeDiffEditor = /*@__PURE__*/createReactComponent<JSX.AiaoCodeDiffEditor, HTMLAiaoCodeDiffEditorElement>('aiao-code-diff-editor');
 export const AiaoCodeEditor = /*@__PURE__*/createReactComponent<JSX.AiaoCodeEditor, HTMLAiaoCodeEditorElement>('aiao-code-editor');
 export const AiaoElementsEditor = /*@__PURE__*/createReactComponent<JSX.AiaoElementsEditor, HTMLAiaoElementsEditorElement>('aiao-elements-editor');
+export const AiaoElementsEditorPreview = /*@__PURE__*/createReactComponent<JSX.AiaoElementsEditorPreview, HTMLAiaoElementsEditorPreviewElement>('aiao-elements-editor-preview');
 export const AiaoElementsForm = /*@__PURE__*/createReactComponent<JSX.AiaoElementsForm, HTMLAiaoElementsFormElement>('aiao-elements-form');
 export const AiaoElementsView = /*@__PURE__*/createReactComponent<JSX.AiaoElementsView, HTMLAiaoElementsViewElement>('aiao-elements-view');
 export const AiaoImg = /*@__PURE__*/createReactComponent<JSX.AiaoImg, HTMLAiaoImgElement>('aiao-img');
diff --git a/libs/stencil-toolkit/src/lib/util/runner.ts b/libs/stencil-toolkit/src/lib/util/runner.ts
index 16ddde26e..440ee788a 100644
--- a/libs/stencil-toolkit/src/lib/util/runner.ts
+++ b/libs/stencil-toolkit/src/lib/util/runner.ts
@@ -7,6 +7,7 @@ export function run(command: string, args: string[], collect: boolean = false) {
     stdio: 'inherit',
     shell: true
   };
+  console.log('run', command, args);
   return new Promise<null | string>((resolve, reject) => {
     const child: ChildProcess = spawn(`${command}`, args, options);
     if (collect) {

From 5a76b6febefff20d4320c1e39f42388404cb8936 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 21:32:34 +0800
Subject: [PATCH 18/25] update

---
 libs/elements-angular/src/lib/elements.module.ts | 2 ++
 libs/elements/src/index.ts                       | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/elements-angular/src/lib/elements.module.ts b/libs/elements-angular/src/lib/elements.module.ts
index 2a4725aa6..97248381c 100644
--- a/libs/elements-angular/src/lib/elements.module.ts
+++ b/libs/elements-angular/src/lib/elements.module.ts
@@ -6,6 +6,7 @@ import {
   AiaoCodeDiffEditor,
   AiaoCodeEditor,
   AiaoElementsEditor,
+  AiaoElementsEditorPreview,
   AiaoElementsForm,
   AiaoElementsView,
   AiaoImg,
@@ -21,6 +22,7 @@ const DECLARATIONS = [
   AiaoCodeDiffEditor,
   AiaoCodeEditor,
   AiaoElementsEditor,
+  AiaoElementsEditorPreview,
   AiaoElementsForm,
   AiaoElementsView,
   AiaoImg,
diff --git a/libs/elements/src/index.ts b/libs/elements/src/index.ts
index 5e1d9ef63..58e91e96e 100644
--- a/libs/elements/src/index.ts
+++ b/libs/elements/src/index.ts
@@ -1,2 +1 @@
-import 'ionicons';
 export * from './lib/interfaces/elements.interface';

From a7ba15d52d6cfe00efae271e00a2617e3a25cbb4 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 22:26:13 +0800
Subject: [PATCH 19/25] update

---
 angular.json                                  |  5 ++++
 .../src/app/app-routing.module.ts             |  4 +++
 .../src/app/app.component.ts                  |  5 ++++
 .../src/app/app.module.ts                     |  4 ++-
 .../text-editor/text-editor.component.html    | 11 ++++++++
 .../text-editor/text-editor.component.scss    |  0
 .../text-editor/text-editor.component.spec.ts | 25 +++++++++++++++++++
 .../app/text-editor/text-editor.component.ts  | 15 +++++++++++
 .../src/app/text-editor/text-editor.module.ts | 20 +++++++++++++++
 .../src/lib/elements-initialize.ts            |  4 +++
 .../src/lib/elements.module.ts                |  5 ++--
 libs/elements-angular/src/lib/interface.ts    |  4 +++
 .../text-editor-bar}/align-center.svg         |  0
 .../text-editor-bar}/align-justify.svg        |  0
 .../text-editor-bar}/align-left.svg           |  0
 .../text-editor-bar}/align-right.svg          |  0
 .../text-editor-bar}/background.svg           |  0
 .../text-editor-bar}/bold.svg                 |  0
 .../text-editor-bar}/h1.svg                   |  0
 .../text-editor-bar}/h2.svg                   |  0
 .../text-editor-bar}/h3.svg                   |  0
 .../text-editor-bar}/indent.svg               |  0
 .../text-editor-bar}/italic.svg               |  0
 .../text-editor-bar}/list-ol.svg              |  0
 .../text-editor-bar}/list-ul.svg              |  0
 .../text-editor-bar}/outdent.svg              |  0
 .../text-editor-bar}/paragraph.svg            |  0
 .../text-editor-bar}/quote.svg                |  0
 .../text-editor-bar}/redo.svg                 |  0
 .../text-editor-bar/strike-through.svg}       |  0
 .../text-editor-bar}/text-color.svg           |  0
 .../text-editor-bar}/underline.svg            |  0
 .../text-editor-bar}/undo.svg                 |  0
 .../text-editor-bar}/unlink.svg               |  0
 .../text-editor-bar/text-editor-bar.tsx       |  7 +++---
 .../text-editor/test/basic/index.html         |  2 +-
 .../components/text-editor/text-editor.scss   |  1 +
 .../components/text-editor/text-editor.tsx    | 18 ++++++-------
 38 files changed, 114 insertions(+), 16 deletions(-)
 create mode 100644 apps/dev-elements-angular/src/app/text-editor/text-editor.component.html
 create mode 100644 apps/dev-elements-angular/src/app/text-editor/text-editor.component.scss
 create mode 100644 apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts
 create mode 100644 apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts
 create mode 100644 apps/dev-elements-angular/src/app/text-editor/text-editor.module.ts
 create mode 100644 libs/elements-angular/src/lib/interface.ts
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/align-center.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/align-justify.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/align-left.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/align-right.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/background.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/bold.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/h1.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/h2.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/h3.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/indent.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/italic.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/list-ol.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/list-ul.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/outdent.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/paragraph.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/quote.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/redo.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor/strikethrough.svg => assets/text-editor-bar/strike-through.svg} (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/text-color.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/underline.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/undo.svg (100%)
 rename libs/elements/src/lib/components/text-editor-bar/{text-editor => assets/text-editor-bar}/unlink.svg (100%)

diff --git a/angular.json b/angular.json
index 6f7caba41..a63a7346d 100644
--- a/angular.json
+++ b/angular.json
@@ -985,6 +985,11 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor/min",
                 "output": "./assets/monaco"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@aiao/elements/lib/aiao-elements/assets",
+                "output": "./assets"
               }
             ],
             "styles": [
diff --git a/apps/dev-elements-angular/src/app/app-routing.module.ts b/apps/dev-elements-angular/src/app/app-routing.module.ts
index d79801187..489b28442 100644
--- a/apps/dev-elements-angular/src/app/app-routing.module.ts
+++ b/apps/dev-elements-angular/src/app/app-routing.module.ts
@@ -14,6 +14,10 @@ const routes: Routes = [
     path: 'elements-preview',
     loadChildren: () => import('./elements-preview/elements-preview.module').then(_ => _.ElementsPreviewModule)
   },
+  {
+    path: 'text-editor',
+    loadChildren: () => import('./text-editor/text-editor.module').then(_ => _.TextEditorModule)
+  },
   {
     path: '',
     redirectTo: 'code-editor',
diff --git a/apps/dev-elements-angular/src/app/app.component.ts b/apps/dev-elements-angular/src/app/app.component.ts
index 6d3f261e9..8c830e700 100644
--- a/apps/dev-elements-angular/src/app/app.component.ts
+++ b/apps/dev-elements-angular/src/app/app.component.ts
@@ -28,6 +28,11 @@ export class AppComponent {
       title: 'Elements Preview',
       url: '/elements-preview',
       icon: 'link'
+    },
+    {
+      title: 'Text Editor',
+      url: '/text-editor',
+      icon: 'link'
     }
   ];
 }
diff --git a/apps/dev-elements-angular/src/app/app.module.ts b/apps/dev-elements-angular/src/app/app.module.ts
index abc91606b..bb10fae42 100644
--- a/apps/dev-elements-angular/src/app/app.module.ts
+++ b/apps/dev-elements-angular/src/app/app.module.ts
@@ -9,7 +9,9 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AiaoElementsModule.forRoot({})],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AiaoElementsModule.forRoot({
+
+  })],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent]
 })
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html
new file mode 100644
index 000000000..ef50508b2
--- /dev/null
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html
@@ -0,0 +1,11 @@
+<ion-header translucent>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Elements Preview</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen>
+  <aiao-text-editor></aiao-text-editor>
+</ion-content>
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.scss b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts
new file mode 100644
index 000000000..766b86d1c
--- /dev/null
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextEditorComponent } from './text-editor.component';
+
+describe('TextEditorComponent', () => {
+  let component: TextEditorComponent;
+  let fixture: ComponentFixture<TextEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TextEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts
new file mode 100644
index 000000000..110dccabf
--- /dev/null
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-text-editor',
+  templateUrl: './text-editor.component.html',
+  styleUrls: ['./text-editor.component.scss']
+})
+export class TextEditorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.module.ts b/apps/dev-elements-angular/src/app/text-editor/text-editor.module.ts
new file mode 100644
index 000000000..c66793c74
--- /dev/null
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.module.ts
@@ -0,0 +1,20 @@
+import { AiaoElementsModule } from '@aiao/elements-angular';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { TextEditorComponent } from './text-editor.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TextEditorComponent
+  }
+];
+@NgModule({
+  declarations: [TextEditorComponent],
+  imports: [CommonModule, IonicModule, AiaoElementsModule, ReactiveFormsModule, RouterModule.forChild(routes)]
+})
+export class TextEditorModule {}
diff --git a/libs/elements-angular/src/lib/elements-initialize.ts b/libs/elements-angular/src/lib/elements-initialize.ts
index 2188c8d57..f5afe959f 100644
--- a/libs/elements-angular/src/lib/elements-initialize.ts
+++ b/libs/elements-angular/src/lib/elements-initialize.ts
@@ -8,6 +8,8 @@ let didInitialize = false;
 // 初始化
 export function initialize(config: IAiaoElementsConfig, doc: Document, zone: NgZone) {
   return (): any => {
+    let { resourcesUrl } = config;
+    resourcesUrl = resourcesUrl || './';
     const win = doc.defaultView as any;
     if (win && typeof (window as any) !== 'undefined') {
       if (didInitialize) {
@@ -19,6 +21,7 @@ export function initialize(config: IAiaoElementsConfig, doc: Document, zone: NgZ
 
       elements.config = {
         ...config,
+        resourcesUrl,
         _zoneGate: (h: any) => zone.run(h)
       };
 
@@ -27,6 +30,7 @@ export function initialize(config: IAiaoElementsConfig, doc: Document, zone: NgZ
 
       return applyPolyfills().then(() => {
         return defineCustomElements(win, {
+          resourcesUrl,
           exclude: [],
           syncQueue: true,
           raf,
diff --git a/libs/elements-angular/src/lib/elements.module.ts b/libs/elements-angular/src/lib/elements.module.ts
index 97248381c..1fe435d5e 100644
--- a/libs/elements-angular/src/lib/elements.module.ts
+++ b/libs/elements-angular/src/lib/elements.module.ts
@@ -14,6 +14,7 @@ import {
   AiaoTree
 } from './directives/proxies';
 import { initialize } from './elements-initialize';
+import { AiaoElementsOptions } from './interface';
 import { TextValueAccessor } from './providers/control-value-accessors/text-value-accessor';
 import { AIAO_ELEMENTS_CONFIG } from './util/config';
 
@@ -38,13 +39,13 @@ const DECLARATIONS = [
   exports: DECLARATIONS
 })
 export class AiaoElementsModule {
-  static forRoot(config?: IAiaoElementsConfig): ModuleWithProviders {
+  static forRoot(opts?: AiaoElementsOptions): ModuleWithProviders {
     return {
       ngModule: AiaoElementsModule,
       providers: [
         {
           provide: AIAO_ELEMENTS_CONFIG,
-          useValue: config
+          useValue: opts
         },
         {
           provide: APP_INITIALIZER,
diff --git a/libs/elements-angular/src/lib/interface.ts b/libs/elements-angular/src/lib/interface.ts
new file mode 100644
index 000000000..34073b578
--- /dev/null
+++ b/libs/elements-angular/src/lib/interface.ts
@@ -0,0 +1,4 @@
+import { IAiaoElementsConfig } from '@aiao/elements';
+
+// tslint:disable-next-line: no-empty-interface
+export interface AiaoElementsOptions extends IAiaoElementsConfig {}
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/align-center.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-center.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/align-center.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-center.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/align-justify.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-justify.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/align-justify.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-justify.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/align-left.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-left.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/align-left.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-left.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/align-right.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-right.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/align-right.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/align-right.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/background.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/background.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/background.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/background.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/bold.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/bold.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/bold.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/bold.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/h1.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/h1.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/h1.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/h1.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/h2.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/h2.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/h2.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/h2.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/h3.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/h3.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/h3.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/h3.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/indent.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/indent.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/indent.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/indent.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/italic.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/italic.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/italic.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/italic.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/list-ol.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/list-ol.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/list-ol.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/list-ol.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/list-ul.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/list-ul.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/list-ul.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/list-ul.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/outdent.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/outdent.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/outdent.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/outdent.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/paragraph.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/paragraph.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/paragraph.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/paragraph.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/quote.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/quote.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/quote.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/quote.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/redo.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/redo.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/redo.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/redo.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/strikethrough.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/strike-through.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/strikethrough.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/strike-through.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/text-color.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/text-color.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/text-color.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/text-color.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/underline.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/underline.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/underline.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/underline.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/undo.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/undo.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/undo.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/undo.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor/unlink.svg b/libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/unlink.svg
similarity index 100%
rename from libs/elements/src/lib/components/text-editor-bar/text-editor/unlink.svg
rename to libs/elements/src/lib/components/text-editor-bar/assets/text-editor-bar/unlink.svg
diff --git a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
index c8d6727aa..1d0fc49e2 100644
--- a/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
+++ b/libs/elements/src/lib/components/text-editor-bar/text-editor-bar.tsx
@@ -2,11 +2,12 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { TextActionState, TextEditorAcitons } from '../../interfaces/text-editor.interface';
+import { urlJoin } from '@aiao/url';
 
 @Component({
   tag: 'aiao-text-editor-bar',
   styleUrl: 'text-editor-bar.scss',
-  assetsDir: 'text-editor',
+  assetsDir: 'assets/text-editor-bar',
   shadow: true
 })
 export class TextEditorBar {
@@ -31,7 +32,7 @@ export class TextEditorBar {
     },
     {
       action: TextEditorAcitons.strikeThrough,
-      icon: 'strikeThrough.svg',
+      icon: 'strike-through.svg',
       title: 'strikeThrough'
     },
     {
@@ -123,7 +124,7 @@ export class TextEditorBar {
     return (
       <Host class="action-bar">
         {this.actions.map(({ action, icon, title, value }) => {
-          const src = `${this.resourcesUrl}/text-editor/${icon}`;
+          const src = urlJoin(this.resourcesUrl, 'assets/text-editor-bar', icon);
           let selected = this.actionState && this.actionState[action];
           selected = selected !== undefined && selected !== false;
           if (selected && value) {
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index ef29d1dd4..66559e946 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -50,7 +50,7 @@
     const state = document.getElementById('state');
     const element = document.getElementById('element');
     // editor.element = element;
-    editor.value = '<p>输入文字</p>';
+    // editor.value = '<p>输入文字</p>';
     editor.addEventListener('aiaoChange', e => {
       html.textContent = e.detail.value;
     });
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.scss b/libs/elements/src/lib/components/text-editor/text-editor.scss
index 895e27a07..0039b3bc2 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.scss
+++ b/libs/elements/src/lib/components/text-editor/text-editor.scss
@@ -12,4 +12,5 @@
 .element {
   padding: 0 10px;
   outline: 0;
+  min-height: 40px;
 }
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index 5a156f462..71372a83b 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -11,7 +11,6 @@ const IGNORE_ACTIONS = [TA.heading, TA.undo, TA.redo, TA.createLink, TA.indent,
 @Component({
   tag: 'aiao-text-editor',
   styleUrl: 'text-editor.scss',
-  assetsDir: 'assets/text-editor',
   shadow: true
 })
 export class RichTextEditor {
@@ -33,7 +32,6 @@ export class RichTextEditor {
   @State() _state: TextActionState = {};
 
   // --------------------------------------------------------------[ Prop ]
-  @Prop() placeholder = '请输入...';
 
   /**
    * 段落符
@@ -157,10 +155,14 @@ export class RichTextEditor {
         this.exec('formatBlock', `h${value}`);
         break;
       case TA.paragraph:
-        this.exec('formatBlock', value || this.paragraphSeparator);
-        break;
       case TA.quote:
-        this.exec('formatBlock', 'blockquote');
+        if (!(this._state.insertOrderedList || this._state.insertUnorderedList)) {
+          if (action === TA.paragraph) {
+            this.exec('formatBlock', value || this.paragraphSeparator);
+          } else {
+            this.exec('formatBlock', 'blockquote');
+          }
+        }
         break;
       default:
         break;
@@ -177,12 +179,11 @@ export class RichTextEditor {
   };
 
   onFocus = (_: Event) => {
-    console.log('focus');
+    //
   };
 
   onBlur = (_: Event) => {
     //
-    console.log('blur');
   };
 
   // --------------------------------------------------------------[ public function ]
@@ -285,8 +286,7 @@ export class RichTextEditor {
     const ele: HTMLElement = this.element || this._lastElement;
     if (ele) {
       this.elementChanged(ele);
-      ele.innerHTML = this.value || '';
-      this.exec('defaultParagraphSeparator', this.defaultParagraphSeparator);
+      ele.innerHTML = this.value || 'a';
     }
   }
 

From 5c395477cf5eb312d086fd9d94938abca86f7040 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 22:26:52 +0800
Subject: [PATCH 20/25] update

---
 libs/elements/src/lib/components/text-editor/text-editor.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index 71372a83b..da9327385 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -156,7 +156,8 @@ export class RichTextEditor {
         break;
       case TA.paragraph:
       case TA.quote:
-        if (!(this._state.insertOrderedList || this._state.insertUnorderedList)) {
+        const { insertOrderedList, insertUnorderedList } = this._state;
+        if (!(insertOrderedList || insertUnorderedList)) {
           if (action === TA.paragraph) {
             this.exec('formatBlock', value || this.paragraphSeparator);
           } else {

From bb0457176a9661e38a53989bbe2ce19347153cae Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 22:43:30 +0800
Subject: [PATCH 21/25] update

---
 .../components/text-editor/text-editor.scss   |   1 +
 .../src/lib/themes/functions.color.scss       |  59 +++
 .../src/lib/themes/functions.string.scss      | 148 ++++++
 libs/elements/src/lib/themes/globals.ios.scss |   5 +
 libs/elements/src/lib/themes/globals.md.scss  |   5 +
 libs/elements/src/lib/themes/globals.scss     |  60 +++
 libs/elements/src/lib/themes/mixins.scss      | 491 ++++++++++++++++++
 .../src/lib/themes/theme.default.ios.scss     |   1 +
 .../src/lib/themes/theme.default.md.scss      |   1 +
 .../src/lib/themes/theme.default.scss         | 146 ++++++
 10 files changed, 917 insertions(+)
 create mode 100644 libs/elements/src/lib/themes/functions.color.scss
 create mode 100644 libs/elements/src/lib/themes/functions.string.scss
 create mode 100644 libs/elements/src/lib/themes/globals.ios.scss
 create mode 100644 libs/elements/src/lib/themes/globals.md.scss
 create mode 100644 libs/elements/src/lib/themes/globals.scss
 create mode 100644 libs/elements/src/lib/themes/mixins.scss
 create mode 100644 libs/elements/src/lib/themes/theme.default.ios.scss
 create mode 100644 libs/elements/src/lib/themes/theme.default.md.scss
 create mode 100644 libs/elements/src/lib/themes/theme.default.scss

diff --git a/libs/elements/src/lib/components/text-editor/text-editor.scss b/libs/elements/src/lib/components/text-editor/text-editor.scss
index 0039b3bc2..31cff6535 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.scss
+++ b/libs/elements/src/lib/components/text-editor/text-editor.scss
@@ -4,6 +4,7 @@
 }
 :host(.inline-element) {
   border: 1px solid #999;
+  height: 100%;
   aiao-text-editor-bar {
     border-bottom: 1px solid #999;
   }
diff --git a/libs/elements/src/lib/themes/functions.color.scss b/libs/elements/src/lib/themes/functions.color.scss
new file mode 100644
index 000000000..29bf9c91b
--- /dev/null
+++ b/libs/elements/src/lib/themes/functions.color.scss
@@ -0,0 +1,59 @@
+// Gets the active color's css variable from a variation. Alpha is optional.
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// current-color(base) => var(--ion-color-base)
+// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+// --------------------------------------------------------------------------------------------
+@function current-color($variation, $alpha: null) {
+  @if $alpha == null {
+    @return var(--ion-color-#{$variation});
+  } @else {
+    @return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
+  }
+}
+
+// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+// --------------------------------------------------------------------------------------------
+@function ion-color($name, $variation, $alpha: null, $rgb: null) {
+  $values: map-get($colors, $name);
+  $value: map-get($values, $variation);
+  $variable: --ion-color-#{$name}-#{$variation};
+
+  @if ($variation == base) {
+    $variable: --ion-color-#{$name};
+  }
+
+  @if ($alpha) {
+    $value: color-to-rgb-list($value);
+    @return rgba(var(#{$variable}-rgb, $value), $alpha);
+  }
+  @if ($rgb) {
+    $value: color-to-rgb-list($value);
+    $variable: #{$variable}-rgb;
+  }
+
+  @return var(#{$variable}, $value);
+}
+
+// Mixes a color with black to create its shade.
+// --------------------------------------------------------------------------------------------
+@function get-color-shade($color) {
+  @return mix(#000, $color, 12%);
+}
+
+// Mixes a color with white to create its tint.
+// --------------------------------------------------------------------------------------------
+@function get-color-tint($color) {
+  @return mix(#fff, $color, 10%);
+}
+
+// Converts a color to a comma separated rgb.
+// --------------------------------------------------------------------------------------------
+@function color-to-rgb-list($color) {
+  @return #{red($color)}, #{green($color)}, #{blue($color)};
+}
diff --git a/libs/elements/src/lib/themes/functions.string.scss b/libs/elements/src/lib/themes/functions.string.scss
new file mode 100644
index 000000000..a0ad9e764
--- /dev/null
+++ b/libs/elements/src/lib/themes/functions.string.scss
@@ -0,0 +1,148 @@
+// String Utility Functions
+// --------------------------------------------------------------------------------
+
+// String Replace Function
+// --------------------------------------------------------------------------------
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// String Split Function
+// --------------------------------------------------------------------------------
+
+@function str-split($string, $separator) {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index: str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index: str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+// String Extract Function
+// --------------------------------------------------------------------------------
+
+@function str-extract($string, $start, $end) {
+  $start-index: str-index($string, $start);
+
+  @if $start-index {
+    $post: str-slice($string, $start-index + str-length($start));
+    $end-index: str-index($post, $end);
+
+    @if $end-index {
+      @return str-slice($post, 1, $end-index - 1);
+    }
+  }
+
+  @return null;
+}
+
+// String Contains Function
+// --------------------------------------------------------------------------------
+
+@function str-contains($string, $needle) {
+  @if (type-of($string) == string) {
+    @return str-index($string, $needle) != null;
+  }
+
+  @return false;
+}
+
+// URL Encode Function
+// --------------------------------------------------------------------------------
+
+@function url-encode($val) {
+  $spaces: str-replace($val, ' ', '%20');
+  $encoded: str-replace($spaces, '#', '%23');
+  @return $encoded;
+}
+
+// Add Root Selector
+// --------------------------------------------------------------------------------
+// Adds a root selector using host-context based on the selector passed
+//
+// Examples
+// --------------------------------------------------------------------------------
+// @include add-root-selector("[dir=rtl]", ":host")
+// --> :host-context([dir=rtl])
+//
+// @include add-root-selector("[dir=rtl]", ":host(.fixed)")
+// --> :host-context([dir=rtl]):host(.fixed)
+// --> :host-context([dir=rtl]).fixed
+//
+// @include add-root-selector("[dir=rtl]", ":host(.tab-layout-icon-hide) ::slotted(ion-badge)")
+// --> :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge)
+//
+// @include add-root-selector("[dir=rtl]", ".shadow")
+// --> [dir=rtl] .shadow
+// --> :host-context([dir=rtl]) .shadow
+// --------------------------------------------------------------------------------
+
+@function add-root-selector($root, $addHostSelector) {
+  $selectors: str-split($root, ',');
+
+  $list: ();
+
+  @each $selector in $selectors {
+    // If the selector contains :host( it means it is targeting a class on the host
+    // element so we need to change how we target it
+    @if str-contains($selector, ':host(') {
+      $shadow-element: str-replace($selector, ':host(', ':host-context(#{$addHostSelector}):host(');
+      $list: append($list, $shadow-element, comma);
+
+      $new-element: ();
+      $elements: str-split($selector, ' ');
+
+      @each $element in $elements {
+        @if str-contains($element, ':host(') {
+          $scoped-element: $element;
+
+          @if str-contains($element, '))') {
+            $scoped-element: str-replace($scoped-element, '))', ')');
+          } @else {
+            $scoped-element: str-replace($scoped-element, ')', '');
+          }
+          $scoped-element: str-replace($scoped-element, ':host(', ':host-context(#{$addHostSelector})');
+
+          $new-element: append($new-element, $scoped-element, space);
+        } @else {
+          $new-element: append($new-element, $element, space);
+        }
+      }
+
+      $list: append($list, $new-element, comma);
+      // If the selector contains :host it means it is targeting just the host
+      // element so we can change it to look for host-context
+    } @else if str-contains($selector, ':host') {
+      $list: append($list, ':host-context(#{$addHostSelector})', comma);
+      // If the selector does not contain host at all it is either a shadow
+      // or normal element so append both the dir check and host-context
+    } @else {
+      $list: append($list, '#{$addHostSelector} #{$selector}', comma);
+      $list: append($list, ':host-context(#{$addHostSelector}) #{$selector}', comma);
+    }
+  }
+
+  @return $list;
+}
diff --git a/libs/elements/src/lib/themes/globals.ios.scss b/libs/elements/src/lib/themes/globals.ios.scss
new file mode 100644
index 000000000..07217ce31
--- /dev/null
+++ b/libs/elements/src/lib/themes/globals.ios.scss
@@ -0,0 +1,5 @@
+// Global Core
+@import './globals';
+
+// Global iOS
+@import './theme.default.ios';
diff --git a/libs/elements/src/lib/themes/globals.md.scss b/libs/elements/src/lib/themes/globals.md.scss
new file mode 100644
index 000000000..4e44bae7b
--- /dev/null
+++ b/libs/elements/src/lib/themes/globals.md.scss
@@ -0,0 +1,5 @@
+// Core Globals
+@import './globals';
+
+// Material Design Globals
+@import './theme.default.md';
diff --git a/libs/elements/src/lib/themes/globals.scss b/libs/elements/src/lib/themes/globals.scss
new file mode 100644
index 000000000..33a4071f7
--- /dev/null
+++ b/libs/elements/src/lib/themes/globals.scss
@@ -0,0 +1,60 @@
+// Global Utility Functions
+@import './functions.string';
+
+// Global Color Functions
+@import './functions.color';
+
+// Global Mixins
+@import './mixins';
+
+// Default Theme
+@import './theme.default';
+
+// Default General
+// --------------------------------------------------
+$font-family-base: var(--ion-font-family, inherit) !default;
+
+// Global app direction
+$app-direction: null !default;
+
+// Global font path
+$font-path: '/dist/fonts' !default;
+
+// Hairlines width
+$hairlines-width: 0.55px !default;
+
+// The minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries
+$screen-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+// Z-Index
+// --------------------------------------------------
+// Grouped by elements which would be siblings
+
+$z-index-menu-overlay: 1000;
+$z-index-overlay: 1001;
+$z-index-click-block: 99999;
+
+$z-index-fixed-content: 999;
+$z-index-scroll-content: 1;
+$z-index-refresher: -1;
+
+$z-index-page-container: 0;
+$z-index-toolbar: 10;
+$z-index-toolbar-background: -1;
+$z-index-toolbar-buttons: 99;
+
+$z-index-backdrop: 2;
+$z-index-overlay-wrapper: 10;
+
+$z-index-item-options: 1;
+$z-index-item-input: 2;
+$z-index-item-divider: 100;
+
+$z-index-reorder-selected: 100;
diff --git a/libs/elements/src/lib/themes/mixins.scss b/libs/elements/src/lib/themes/mixins.scss
new file mode 100644
index 000000000..76b09d7ae
--- /dev/null
+++ b/libs/elements/src/lib/themes/mixins.scss
@@ -0,0 +1,491 @@
+@mixin input-cover() {
+  @include position(0, null, null, 0);
+  @include margin(0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+
+  appearance: none;
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
+@mixin text-inherit() {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+}
+
+@mixin button-state() {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+
+  content: '';
+
+  opacity: 0;
+}
+
+// Font smoothing
+// --------------------------------------------------
+
+@mixin font-smoothing() {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Get the key from a map based on the index
+@function index-to-key($map, $index) {
+  $keys: map-keys($map);
+
+  @return nth($keys, $index);
+}
+
+// Breakpoint Mixins
+// ---------------------------------------------------------------------------------
+
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// ---------------------------------------------------------------------------------
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
+  $min: map-get($breakpoints, $name);
+
+  @return if($name != index-to-key($breakpoints, 1), $min, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Maximum breakpoint width. Null for the smallest (first) breakpoint.
+// The maximum value is calculated as the minimum of the current one.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @return if($min, breakpoint-min($name, $breakpoints), null);
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Text Direction - ltr / rtl
+//
+// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
+// to override ltr defaults.
+// ----------------------------------------------------------
+
+@mixin multi-dir() {
+  @content;
+
+  // $root: #{&};
+  // @at-root [dir] {
+  //   #{$root} {
+  //     @content;
+  //   }
+  // }
+}
+
+@mixin rtl() {
+  $root: #{&};
+
+  @at-root #{add-root-selector($root, "[dir=rtl]")} {
+    @content;
+  }
+}
+
+@mixin ltr() {
+  @content;
+}
+
+// SVG Background Image Mixin
+// @param {string} $svg
+// ----------------------------------------------------------
+@mixin svg-background-image($svg, $flip-rtl: false) {
+  $url: url-encode($svg);
+  $viewBox: str-split(str-extract($svg, "viewBox='", "'"), ' ');
+
+  @if $flip-rtl != true or $viewBox == null {
+    @include multi-dir() {
+      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');
+    }
+  } @else {
+    $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
+    $flipped-url: $svg;
+    $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');
+    $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');
+    $flipped-url: str-replace($flipped-url, '<polygon', '<polygon #{$transform}');
+    $flipped-url: url-encode($flipped-url);
+
+    @include ltr() {
+      background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');
+    }
+    @include rtl() {
+      background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');
+    }
+  }
+}
+
+// Add property horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin property-horizontal($prop, $start, $end: $start) {
+  @if $start == 0 and $end == 0 {
+    #{$prop}-left: $start;
+    #{$prop}-right: $end;
+  } @else {
+    #{$prop}-left: $start;
+    #{$prop}-right: $end;
+
+    @at-root {
+      @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
+        & {
+          @if $start != null {
+            #{$prop}-left: unset;
+          }
+          @if $end != null {
+            #{$prop}-right: unset;
+          }
+
+          -webkit-#{$prop}-start: $start;
+          #{$prop}-inline-start: $start;
+          -webkit-#{$prop}-end: $end;
+          #{$prop}-inline-end: $end;
+        }
+      }
+    }
+  }
+}
+
+// Add property for all directions
+// @param {string} $prop
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// @param {boolean} $content include content or use default
+// ----------------------------------------------------------
+@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
+  @include property-horizontal($prop, $start, $end);
+  #{$prop}-top: $top;
+  #{$prop}-bottom: $bottom;
+}
+
+// Add padding horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin padding-horizontal($start, $end: $start) {
+  @include property-horizontal(padding, $start, $end);
+}
+
+// Add padding for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(padding, $top, $end, $bottom, $start);
+}
+
+// Add margin horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin margin-horizontal($start, $end: $start) {
+  @include property-horizontal(margin, $start, $end);
+}
+
+// Add margin for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(margin, $top, $end, $bottom, $start);
+}
+
+// Add position horizontal
+// @param {string} $start - amount to position start
+// @param {string} $end - amount to left: 0; end
+// ----------------------------------------------------------
+@mixin position-horizontal($start: null, $end: null) {
+  @if $start == $end {
+    @include multi-dir() {
+      left: $start;
+      right: $end;
+    }
+  } @else {
+    @include ltr() {
+      left: $start;
+      right: $end;
+    }
+    @include rtl() {
+      left: unset;
+      right: unset;
+
+      left: $end;
+      right: $start;
+    }
+  }
+}
+
+// Add position for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin position($top: null, $end: null, $bottom: null, $start: null) {
+  @include position-horizontal($start, $end);
+  top: $top;
+  bottom: $bottom;
+}
+
+// Add border radius for all directions
+// @param {string} $top-start
+// @param {string} $top-end
+// @param {string} $bottom-end
+// @param {string} $bottom-start
+// ----------------------------------------------------------
+@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
+  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
+    @include multi-dir() {
+      border-radius: $top-start;
+    }
+  } @else {
+    @include ltr() {
+      border-top-left-radius: $top-start;
+      border-top-right-radius: $top-end;
+      border-bottom-right-radius: $bottom-end;
+      border-bottom-left-radius: $bottom-start;
+    }
+
+    @include rtl() {
+      border-top-left-radius: $top-end;
+      border-top-right-radius: $top-start;
+      border-bottom-right-radius: $bottom-start;
+      border-bottom-left-radius: $bottom-end;
+    }
+  }
+}
+
+// Add direction for all directions
+// @param {string} $dir - Direction on LTR
+@mixin direction($dir) {
+  $other-dir: null;
+
+  @if $dir == ltr {
+    $other-dir: rtl;
+  } @else {
+    $other-dir: ltr;
+  }
+
+  @include ltr() {
+    direction: $dir;
+  }
+  @include rtl() {
+    direction: $other-dir;
+  }
+}
+
+// Add float for all directions
+// @param {string} $side
+// @param {string} $decorator - !important
+@mixin float($side, $decorator: null) {
+  @if $side == start {
+    @include ltr() {
+      float: left $decorator;
+    }
+    @include rtl() {
+      float: right $decorator;
+    }
+  } @else if $side == end {
+    @include ltr() {
+      float: right $decorator;
+    }
+    @include rtl() {
+      float: left $decorator;
+    }
+  } @else {
+    @include multi-dir() {
+      float: $side $decorator;
+    }
+  }
+}
+
+@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
+  @if $horizontal == start or $horizontal == end {
+    $horizontal-ltr: null;
+    $horizontal-rtl: null;
+    @if $horizontal == start {
+      $horizontal-ltr: left;
+      $horizontal-rtl: right;
+    } @else {
+      $horizontal-ltr: right;
+      $horizontal-rtl: left;
+    }
+
+    @include ltr() {
+      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
+    }
+    @include rtl() {
+      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
+    }
+  } @else {
+    @include multi-dir() {
+      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
+    }
+  }
+}
+
+@mixin transform-origin($x-axis, $y-axis: null) {
+  @if $x-axis == start {
+    @include ltr() {
+      transform-origin: left $y-axis;
+    }
+    @include rtl() {
+      transform-origin: right $y-axis;
+    }
+  } @else if $x-axis == end {
+    @include ltr() {
+      transform-origin: right $y-axis;
+    }
+    @include rtl() {
+      transform-origin: left $y-axis;
+    }
+  } @else if $x-axis == left or $x-axis == right {
+    @include multi-dir() {
+      transform-origin: $x-axis $y-axis;
+    }
+  } @else {
+    @include ltr() {
+      transform-origin: $x-axis $y-axis;
+    }
+    @include rtl() {
+      transform-origin: calc(100% - #{$x-axis}) $y-axis;
+    }
+  }
+}
+
+// Add transform for all directions
+// @param {string} $transforms - comma separated list of transforms
+@mixin transform($transforms...) {
+  $extra: null;
+
+  $x: null;
+  $ltr-translate: null;
+  $rtl-translate: null;
+
+  @each $transform in $transforms {
+    @if (str-index($transform, translate3d)) {
+      $transform: str-replace($transform, 'translate3d(');
+      $transform: str-replace($transform, ')');
+
+      $coordinates: str-split($transform, ',');
+
+      $x: nth($coordinates, 1);
+      $y: nth($coordinates, 2);
+      $z: nth($coordinates, 3);
+
+      $ltr-translate: translate3d($x, $y, $z);
+      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
+    } @else {
+      @if $extra == null {
+        $extra: $transform;
+      } @else {
+        $extra: $extra $transform;
+      }
+    }
+  }
+
+  @if $x == '0' or $x == null {
+    @include multi-dir() {
+      transform: $ltr-translate $extra;
+    }
+  } @else {
+    @include ltr() {
+      transform: $ltr-translate $extra;
+    }
+
+    @include rtl() {
+      transform: $rtl-translate $extra;
+    }
+  }
+}
diff --git a/libs/elements/src/lib/themes/theme.default.ios.scss b/libs/elements/src/lib/themes/theme.default.ios.scss
new file mode 100644
index 000000000..90467f357
--- /dev/null
+++ b/libs/elements/src/lib/themes/theme.default.ios.scss
@@ -0,0 +1 @@
+// iOS Theme
diff --git a/libs/elements/src/lib/themes/theme.default.md.scss b/libs/elements/src/lib/themes/theme.default.md.scss
new file mode 100644
index 000000000..db47934be
--- /dev/null
+++ b/libs/elements/src/lib/themes/theme.default.md.scss
@@ -0,0 +1 @@
+// Material Design Default Theme
diff --git a/libs/elements/src/lib/themes/theme.default.scss b/libs/elements/src/lib/themes/theme.default.scss
new file mode 100644
index 000000000..d791a81b4
--- /dev/null
+++ b/libs/elements/src/lib/themes/theme.default.scss
@@ -0,0 +1,146 @@
+//  Theme
+// -------------------------------------------------------------------------------------------
+// This file contains the theme variables shared
+// between modes. This should only include variables
+// used to theme the application colors.
+
+// Default Ionic Colors
+// -------------------------------------------------------------------------------------------
+// Color map should provide
+// - base: main color to be used.
+// - contrast: Color that will provide readable text against the base color
+// - shade: 12% darker version of the base color (mix with black)
+// - tint: 10% lighter version of the base color (mix with white)
+
+$primary: #3880ff !default;
+$secondary: #3dc2ff !default;
+$tertiary: #5260ff !default;
+$success: #2dd36f !default;
+$warning: #ffc409 !default;
+$danger: #eb445a !default;
+$light: #f4f5f8 !default;
+$medium: #92949c !default;
+$dark: #222428 !default;
+
+$colors: (
+  primary: (
+    base: $primary,
+    contrast: #fff,
+    shade: get-color-shade($primary),
+    tint: get-color-tint($primary)
+  ),
+  secondary: (
+    base: $secondary,
+    contrast: #fff,
+    shade: get-color-shade($secondary),
+    tint: get-color-tint($secondary)
+  ),
+  tertiary: (
+    base: $tertiary,
+    contrast: #fff,
+    shade: get-color-shade($tertiary),
+    tint: get-color-tint($tertiary)
+  ),
+  success: (
+    base: $success,
+    contrast: #fff,
+    shade: get-color-shade($success),
+    tint: get-color-tint($success)
+  ),
+  warning: (
+    base: $warning,
+    contrast: #000,
+    shade: get-color-shade($warning),
+    tint: get-color-tint($warning)
+  ),
+  danger: (
+    base: $danger,
+    contrast: #fff,
+    shade: get-color-shade($danger),
+    tint: get-color-tint($danger)
+  ),
+  light: (
+    base: $light,
+    contrast: #000,
+    shade: get-color-shade($light),
+    tint: get-color-tint($light)
+  ),
+  medium: (
+    base: $medium,
+    contrast: #fff,
+    shade: get-color-shade($medium),
+    tint: get-color-tint($medium)
+  ),
+  dark: (
+    base: $dark,
+    contrast: #fff,
+    shade: get-color-shade($dark),
+    tint: get-color-tint($dark)
+  )
+) !default;
+
+// Default Foreground and Background Colors
+// -------------------------------------------------------------------------------------------
+// Used internally to calculate the default steps
+
+$background-color-value: #fff !default;
+$background-color-rgb-value: 255, 255, 255 !default;
+
+$text-color-value: #000 !default;
+$text-color-rgb-value: 0, 0, 0 !default;
+
+$background-color: var(--ion-background-color, $background-color-value) !default;
+$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default;
+$text-color: var(--ion-text-color, $text-color-value) !default;
+$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default;
+
+// Default Foreground and Background Step Colors
+// -------------------------------------------------------------------------------------------
+// Color Steps are used to provide variations in text and background colors of elements.
+// Steps move towards their contrasting color.
+// For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
+// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
+
+$background-color-step-50: var(--ion-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
+$background-color-step-100: var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
+$background-color-step-150: var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
+$background-color-step-200: var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
+$background-color-step-250: var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
+$background-color-step-300: var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
+$background-color-step-350: var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
+$background-color-step-400: var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
+$background-color-step-450: var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
+$background-color-step-500: var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
+$background-color-step-550: var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
+$background-color-step-600: var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
+$background-color-step-650: var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
+$background-color-step-700: var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
+$background-color-step-750: var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
+$background-color-step-800: var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
+$background-color-step-850: var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
+$background-color-step-900: var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
+$background-color-step-950: var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
+$text-color-step-50: var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
+$text-color-step-100: var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
+$text-color-step-150: var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
+$text-color-step-200: var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
+$text-color-step-250: var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
+$text-color-step-300: var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
+$text-color-step-350: var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
+$text-color-step-400: var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
+$text-color-step-450: var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
+$text-color-step-500: var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
+$text-color-step-550: var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
+$text-color-step-600: var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
+$text-color-step-650: var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
+$text-color-step-700: var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
+$text-color-step-750: var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
+$text-color-step-800: var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
+$text-color-step-850: var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
+$text-color-step-900: var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
+$text-color-step-950: var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;
+
+// Default General Colors
+// --------------------------------------------------
+$overlay-background-color: var(--ion-overlay-background-color, #fafafa) !default;
+$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600) !default;

From 0502375c5824fcb9cac7d53282ca0f1607170c85 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 22:45:37 +0800
Subject: [PATCH 22/25] update

---
 libs/elements-angular/src/lib/directives/proxies.ts           | 4 ++--
 libs/elements/scripts/testing/styles.css                      | 4 ++--
 libs/elements/src/lib/themes/globals.scss                     | 2 +-
 .../schematics/library/files/lib/scripts/testing/styles.css   | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/libs/elements-angular/src/lib/directives/proxies.ts b/libs/elements-angular/src/lib/directives/proxies.ts
index 3c762d709..52cc0c987 100644
--- a/libs/elements-angular/src/lib/directives/proxies.ts
+++ b/libs/elements-angular/src/lib/directives/proxies.ts
@@ -93,8 +93,8 @@ export class AiaoImg {
 }
 
 export declare interface AiaoTextEditor extends Components.AiaoTextEditor {}
-@ProxyCmp({inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'placeholder', 'value'], 'methods': ['getSelectionElements', 'saveSelection', 'restoreSelection', 'action']})
-@Component({ selector: 'aiao-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'placeholder', 'value'] })
+@ProxyCmp({inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'value'], 'methods': ['getSelectionElements', 'saveSelection', 'restoreSelection', 'action']})
+@Component({ selector: 'aiao-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['actionBar', 'defaultParagraphSeparator', 'disabled', 'element', 'name', 'value'] })
 export class AiaoTextEditor {
   aiaoChange!: EventEmitter<CustomEvent>;
   aiaoStateChange!: EventEmitter<CustomEvent>;
diff --git a/libs/elements/scripts/testing/styles.css b/libs/elements/scripts/testing/styles.css
index 3eca6f399..9c9ca9274 100644
--- a/libs/elements/scripts/testing/styles.css
+++ b/libs/elements/scripts/testing/styles.css
@@ -34,12 +34,12 @@
 :root,
 html,
 html.md.md {
-  --ion-font-family: Roboto, 'mdTestingFont', sans-serif;
+  --aiao-font-family: Roboto, 'mdTestingFont', sans-serif;
   font-family: Roboto, 'mdTestingFont', sans-serif;
 }
 
 :root.ios.ios,
 html.ios.ios {
-  --ion-font-family: -apple-system, BlinkMacSystemFont, 'iosTestingFont', sans-serif;
+  --aiao-font-family: -apple-system, BlinkMacSystemFont, 'iosTestingFont', sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, 'iosTestingFont', sans-serif;
 }
diff --git a/libs/elements/src/lib/themes/globals.scss b/libs/elements/src/lib/themes/globals.scss
index 33a4071f7..b0338c427 100644
--- a/libs/elements/src/lib/themes/globals.scss
+++ b/libs/elements/src/lib/themes/globals.scss
@@ -12,7 +12,7 @@
 
 // Default General
 // --------------------------------------------------
-$font-family-base: var(--ion-font-family, inherit) !default;
+$font-family-base: var(--aiao-font-family, inherit) !default;
 
 // Global app direction
 $app-direction: null !default;
diff --git a/libs/stencil-toolkit/src/lib/schematics/library/files/lib/scripts/testing/styles.css b/libs/stencil-toolkit/src/lib/schematics/library/files/lib/scripts/testing/styles.css
index 3eca6f399..9c9ca9274 100644
--- a/libs/stencil-toolkit/src/lib/schematics/library/files/lib/scripts/testing/styles.css
+++ b/libs/stencil-toolkit/src/lib/schematics/library/files/lib/scripts/testing/styles.css
@@ -34,12 +34,12 @@
 :root,
 html,
 html.md.md {
-  --ion-font-family: Roboto, 'mdTestingFont', sans-serif;
+  --aiao-font-family: Roboto, 'mdTestingFont', sans-serif;
   font-family: Roboto, 'mdTestingFont', sans-serif;
 }
 
 :root.ios.ios,
 html.ios.ios {
-  --ion-font-family: -apple-system, BlinkMacSystemFont, 'iosTestingFont', sans-serif;
+  --aiao-font-family: -apple-system, BlinkMacSystemFont, 'iosTestingFont', sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, 'iosTestingFont', sans-serif;
 }

From 38bdc7e2107dbed9d046761f32e9970486b1dab6 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Sun, 1 Mar 2020 22:48:00 +0800
Subject: [PATCH 23/25] update

---
 .../src/app/text-editor/text-editor.component.html         | 2 +-
 .../src/app/text-editor/text-editor.component.ts           | 7 +++----
 .../src/lib/components/text-editor/text-editor.tsx         | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html
index ef50508b2..5e1ed28b2 100644
--- a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.html
@@ -7,5 +7,5 @@
   </ion-toolbar>
 </ion-header>
 <ion-content fullscreen>
-  <aiao-text-editor></aiao-text-editor>
+  <aiao-text-editor [value]="hello"></aiao-text-editor>
 </ion-content>
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts
index 110dccabf..81d7cb84a 100644
--- a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.ts
@@ -6,10 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./text-editor.component.scss']
 })
 export class TextEditorComponent implements OnInit {
+  hello = '<p>hello world</p>';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/libs/elements/src/lib/components/text-editor/text-editor.tsx b/libs/elements/src/lib/components/text-editor/text-editor.tsx
index da9327385..47c949b90 100644
--- a/libs/elements/src/lib/components/text-editor/text-editor.tsx
+++ b/libs/elements/src/lib/components/text-editor/text-editor.tsx
@@ -287,7 +287,7 @@ export class RichTextEditor {
     const ele: HTMLElement = this.element || this._lastElement;
     if (ele) {
       this.elementChanged(ele);
-      ele.innerHTML = this.value || 'a';
+      ele.innerHTML = this.value || '';
     }
   }
 

From 1b83f19099b2cc3aab82abfc6082f605d18d5eee Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Mon, 2 Mar 2020 00:09:48 +0800
Subject: [PATCH 24/25] update

---
 angular.json                                  |  5 ++++
 .../src/app/app.module.ts                     |  4 +--
 .../text-editor/text-editor.component.spec.ts |  9 ++++--
 apps/dev-elements-react/src/app/app.tsx       |  2 ++
 apps/dev-elements-react/src/app/menu/Menu.tsx |  5 ++++
 .../src/app/text-editor/TextEditor.scss       |  0
 .../src/app/text-editor/TextEditor.tsx        | 29 +++++++++++++++++++
 .../src/lib/elements.module.ts                |  1 -
 .../text-editor/test/basic/index.html         |  2 +-
 libs/elements/src/lib/global/global.ts        |  7 ++++-
 libs/elements/src/lib/themes/mixins.scss      |  3 --
 11 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 apps/dev-elements-react/src/app/text-editor/TextEditor.scss
 create mode 100644 apps/dev-elements-react/src/app/text-editor/TextEditor.tsx

diff --git a/angular.json b/angular.json
index a63a7346d..53a9f025f 100644
--- a/angular.json
+++ b/angular.json
@@ -1458,6 +1458,11 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor/min",
                 "output": "./assets/monaco"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@aiao/elements/lib/aiao-elements/assets",
+                "output": "./assets"
               }
             ],
             "styles": ["apps/dev-elements-react/src/theme/variables.scss", "apps/dev-elements-react/src/global.scss"],
diff --git a/apps/dev-elements-angular/src/app/app.module.ts b/apps/dev-elements-angular/src/app/app.module.ts
index bb10fae42..abc91606b 100644
--- a/apps/dev-elements-angular/src/app/app.module.ts
+++ b/apps/dev-elements-angular/src/app/app.module.ts
@@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AiaoElementsModule.forRoot({
-
-  })],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, AiaoElementsModule.forRoot({})],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent]
 })
diff --git a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts
index 766b86d1c..5c5b2a187 100644
--- a/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts
+++ b/apps/dev-elements-angular/src/app/text-editor/text-editor.component.spec.ts
@@ -1,4 +1,7 @@
+import { AiaoElementsModule } from '@aiao/elements-angular';
+import { CommonModule } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
 
 import { TextEditorComponent } from './text-editor.component';
 
@@ -8,9 +11,9 @@ describe('TextEditorComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TextEditorComponent ]
-    })
-    .compileComponents();
+      declarations: [TextEditorComponent],
+      imports: [CommonModule, IonicModule, AiaoElementsModule]
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/apps/dev-elements-react/src/app/app.tsx b/apps/dev-elements-react/src/app/app.tsx
index 97326c1b2..597276909 100644
--- a/apps/dev-elements-react/src/app/app.tsx
+++ b/apps/dev-elements-react/src/app/app.tsx
@@ -9,6 +9,7 @@ import { IonReactRouter } from '@ionic/react-router';
 import CodeEditorPage from './code-editor/code-editor';
 import ElementsEditorPage from './elements-editor/ElementsEditor';
 import ElementsPreviewPage from './elements-preview/ElementsPreview';
+import TextEditorPage from './text-editor/TextEditor';
 import Menu from './menu/Menu';
 
 export const App: React.FunctionComponent = () => {
@@ -23,6 +24,7 @@ export const App: React.FunctionComponent = () => {
             <Route path="/code-editor" exact component={CodeEditorPage} />
             <Route path="/elements-editor" exact component={ElementsEditorPage} />
             <Route path="/elements-preview" exact component={ElementsPreviewPage} />
+            <Route path="/text-editor" exact component={TextEditorPage} />
             <Route exact path="/" render={() => <Redirect to="/code-editor" />} />
           </IonRouterOutlet>
         </IonSplitPane>
diff --git a/apps/dev-elements-react/src/app/menu/Menu.tsx b/apps/dev-elements-react/src/app/menu/Menu.tsx
index 4d5e6b888..bbd47b97b 100644
--- a/apps/dev-elements-react/src/app/menu/Menu.tsx
+++ b/apps/dev-elements-react/src/app/menu/Menu.tsx
@@ -43,6 +43,11 @@ const appPages: IMenu[] = [
     title: 'Elements Preview',
     url: '/elements-preview',
     icon: link
+  },
+  {
+    title: 'Text Editor',
+    url: '/text-editor',
+    icon: link
   }
 ];
 
diff --git a/apps/dev-elements-react/src/app/text-editor/TextEditor.scss b/apps/dev-elements-react/src/app/text-editor/TextEditor.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/dev-elements-react/src/app/text-editor/TextEditor.tsx b/apps/dev-elements-react/src/app/text-editor/TextEditor.tsx
new file mode 100644
index 000000000..ab2115ef0
--- /dev/null
+++ b/apps/dev-elements-react/src/app/text-editor/TextEditor.tsx
@@ -0,0 +1,29 @@
+import './TextEditor.scss';
+
+import React, { useState } from 'react';
+import { withRouter } from 'react-router-dom';
+
+import { AiaoTextEditor } from '@aiao/elements-react';
+import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const ELementsPreviewPage: React.FC = () => {
+  const [hello, setHello] = useState('hello world');
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+          <IonTitle>elements editor</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <AiaoTextEditor value={hello}></AiaoTextEditor>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default withRouter(ELementsPreviewPage);
diff --git a/libs/elements-angular/src/lib/elements.module.ts b/libs/elements-angular/src/lib/elements.module.ts
index 1fe435d5e..8259b31de 100644
--- a/libs/elements-angular/src/lib/elements.module.ts
+++ b/libs/elements-angular/src/lib/elements.module.ts
@@ -1,4 +1,3 @@
-import { IAiaoElementsConfig } from '@aiao/elements';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
 
diff --git a/libs/elements/src/lib/components/text-editor/test/basic/index.html b/libs/elements/src/lib/components/text-editor/test/basic/index.html
index 66559e946..17cdec546 100644
--- a/libs/elements/src/lib/components/text-editor/test/basic/index.html
+++ b/libs/elements/src/lib/components/text-editor/test/basic/index.html
@@ -50,7 +50,7 @@
     const state = document.getElementById('state');
     const element = document.getElementById('element');
     // editor.element = element;
-    // editor.value = '<p>输入文字</p>';
+    editor.value = '<p>简单文本编辑器</p>';
     editor.addEventListener('aiaoChange', e => {
       html.textContent = e.detail.value;
     });
diff --git a/libs/elements/src/lib/global/global.ts b/libs/elements/src/lib/global/global.ts
index d9d3c13c2..99bd79741 100644
--- a/libs/elements/src/lib/global/global.ts
+++ b/libs/elements/src/lib/global/global.ts
@@ -1,4 +1,5 @@
 import { config } from './config';
+import { IAiaoElementsConfig } from '../interfaces/elements.interface';
 
 declare const Context: any;
 
@@ -7,6 +8,10 @@ export default () => {
   const aiao = (win.aiao = win.aiao || {});
   const elements: any = (aiao['elements'] = aiao['elements'] || {});
   elements.Context = Context;
-  config.reset(elements.config || {});
+  const conf: IAiaoElementsConfig = {
+    resourcesUrl: './',
+    ...elements.config
+  };
+  config.reset(conf);
   elements.config = config;
 };
diff --git a/libs/elements/src/lib/themes/mixins.scss b/libs/elements/src/lib/themes/mixins.scss
index 76b09d7ae..9c6e970de 100644
--- a/libs/elements/src/lib/themes/mixins.scss
+++ b/libs/elements/src/lib/themes/mixins.scss
@@ -297,9 +297,6 @@
       right: $end;
     }
     @include rtl() {
-      left: unset;
-      right: unset;
-
       left: $end;
       right: $start;
     }

From 853c6bbc375ba669b01ded4002770162bcdaf4d5 Mon Sep 17 00:00:00 2001
From: Jimmy Liu <hero63418@gmail.com>
Date: Mon, 2 Mar 2020 00:19:26 +0800
Subject: [PATCH 25/25] up

---
 libs/stencil-toolkit/src/lib/util/runner.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/stencil-toolkit/src/lib/util/runner.ts b/libs/stencil-toolkit/src/lib/util/runner.ts
index 440ee788a..16ddde26e 100644
--- a/libs/stencil-toolkit/src/lib/util/runner.ts
+++ b/libs/stencil-toolkit/src/lib/util/runner.ts
@@ -7,7 +7,6 @@ export function run(command: string, args: string[], collect: boolean = false) {
     stdio: 'inherit',
     shell: true
   };
-  console.log('run', command, args);
   return new Promise<null | string>((resolve, reject) => {
     const child: ChildProcess = spawn(`${command}`, args, options);
     if (collect) {