omim - add editor to template

packages/omim/templates/src/app.tsx

@@ -30,6 +30,14 @@ define('my-app', class extends WeElement {
       this.update()
     })
 
+     //@ts-ignore
+     route('/editor', () => {
+      import('./editor').then(_=>{
+        this.mainTag = 'my-editor'
+        this.update()
+      })
+    })
+
   }
   onDrawerClosed = () => {
 

packages/omim/templates/src/drawer.tsx

@@ -54,6 +54,13 @@ define('my-drawer', class extends WeElement {
 		selected: hash === '#/about',
 		hash: '/about'
 	},
+	{
+		title: 'Editor',
+		id: 3,
+		icon: 'edit',
+		selected: hash === '#/editor',
+		hash: '/editor'
+	},
 	{
 		title: 'Page Templates',
 		id: 14,

packages/omim/templates/src/editor.tsx

@@ -0,0 +1,41 @@
+import * as css from './_dashboard.css'
+import { define, WeElement, h } from 'omi'
+import '@omim/core/row'
+import '@omim/core/icon-button'
+import '@omim/core/breadcrumb'
+import './top-card'
+import '@omim/core/editor'
+
+define('my-editor', class extends WeElement {
+  static css = css
+
+  onTextChange = (evt)=>{
+    console.log(evt)
+  }
+
+  render() {
+    return <div class="app">
+
+      <div class='header'>
+        <h3>Editor</h3>
+        <m-breadcrumb split="/" items={[
+          { text: 'Home', href: 'https://tencent.github.io/omi/', icon: 'home' },
+          { text: 'Helper', icon: 'help' },
+          { text: 'About', icon: 'people' }
+        ]}></m-breadcrumb>
+        <m-icon-button icon="refresh"></m-icon-button>
+      </div>
+
+      <m-editor onTextChange={this.onTextChange}>
+      <h1 class="ql-align-center">Quill Rich Text Editor</h1>
+      <p><br /></p>
+      <p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor built for the modern web. With its <a href="https://quilljs.com/docs/modules/">modular architecture</a> and expressive <a href="https://quilljs.com/docs/api/">API</a>, it is completely customizable to fit any need.</p>
+      <p><br /></p>
+      <iframe class="ql-video ql-align-center" src="https://player.vimeo.com/video/253905163" width="500" height="280" allowfullscreen></iframe>
+      <p><br /></p>
+      <h2 class="ql-align-center">Getting Started is Easy</h2>
+    </m-editor>
+
+    </div>
+  }
+})

packages/omim/templates/src/index.tsx

@@ -2,5 +2,5 @@ import './index.css';
 import './app'
 import { render, h } from 'omi'
 
-render(<my-app />, 'body')
+render(<my-app />, '#root')