TINY-1427: rename editor file, add fakecontent to stories

src/Test.ts → src/Editor.ts

@@ -12,6 +12,7 @@ import { getTinymce } from './TinyMCE';
 import { isTextarea, uuid } from './Utils';
 
 @Component({
+  name: 'editor',
   props: {
     inline: Boolean,
     id: String,
@@ -77,6 +78,9 @@ export class Editor extends Vue {
     return createElement('textarea', {
       attrs: {
         id: this.elementId
+      },
+      style: {
+        visibility: 'hidden'
       }
     });
   }

stories/fakeContent.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:max-line-length*/
+export const content = `<h1>HTML Ipsum Presents</h1>
+
+<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+<h2>Header Level 2</h2>
+
+<ol>
+   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+   <li>Aliquam tincidunt mauris eu risus.</li>
+</ol>
+
+<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+<h3>Header Level 3</h3>
+
+<ul>
+   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+   <li>Aliquam tincidunt mauris eu risus.</li>
+</ul>
+
+<pre><code>
+#header h1 a {
+  display: block;
+  width: 300px;
+  height: 80px;
+}
+</code></pre>`;

stories/index.ts

@@ -2,17 +2,17 @@ import { storiesOf } from '@storybook/vue';
 import Vue from 'vue';
 
 // Import your custom components.
-import { Editor } from '../src/Test';
-
-// Register custom components.
-Vue.component('editor', Editor);
+import { Editor } from '../src/Editor';
+import { content } from './fakeContent';
 
 storiesOf('TestComponent', module)
   .add('inline', () => ({
     components: { Editor },
-    template: '<editor inline />'
+    data: () => ({content}),
+    template: '<editor inline :initialValue="content" />'
   }))
   .add('iframe', () => ({
     components: { Editor },
-    template: '<editor initialValue="<p>This is some text</p>" />'
+    data: () => ({content}),
+    template: '<editor :initialValue="content" />'
   }));