Merge pull request #68 from myfreeweb/master

Various little features for new Custom Elements wrapper & bug fixes

Author: kazzkiq

build/codeflask.min.js

@@ -3,8 +3,10 @@
   "version": "1.0.5",
   "description": "A micro code-editor for awesome web pages",
   "main": "build/codeflask.min.js",
+  "module": "build/codeflask.module.js",
   "files": [
     "build/codeflask.min.js",
+    "build/codeflask.module.js",
     "README.md",
     "LICENSE"
   ],

build/codeflask.module.js

@@ -7,12 +7,20 @@ const production = !process.env.ROLLUP_WATCH;
 
 export default {
 	input: 'src/codeflask.js',
-	output: {
-		sourcemap: false,
-		format: 'umd',
-		name: 'CodeFlask',
-		file: 'build/codeflask.min.js'
-	},
+	output: [
+		{
+			sourcemap: false,
+			format: 'umd',
+			name: 'CodeFlask',
+			file: 'build/codeflask.min.js'
+		},
+		{
+			sourcemap: false,
+			format: 'es',
+			name: 'CodeFlask',
+			file: 'build/codeflask.module.js'
+		},
+	],
 	plugins: [
 		// If you have external dependencies installed from
 		// npm, you'll most likely need these plugins. In

package.json

@@ -39,7 +39,7 @@ export default class CodeFlask {
   }
 
   startEditor() {
-    const isCSSInjected = inject_css(editor_css);
+    const isCSSInjected = inject_css(editor_css, null, this.opts.styleParent);
 
     if (!isCSSInjected) {
       throw Error('Failed to inject CodeFlask CSS.');
@@ -99,7 +99,7 @@ export default class CodeFlask {
     this.opts.tabSize = this.opts.tabSize || 2;
     this.opts.enableAutocorrect = this.opts.enableAutocorrect || false;
     this.opts.lineNumbers = this.opts.lineNumbers || false;
-    this.opts.defaultTheme = this.opts.defaultTheme || true;
+    this.opts.defaultTheme = this.opts.defaultTheme !== false;
 
     if (this.opts.rtl === true) {
       this.elTextarea.setAttribute('dir', 'rtl');
@@ -119,7 +119,7 @@ export default class CodeFlask {
     }
 
     if (this.opts.defaultTheme) {
-      inject_css(default_css_theme, 'theme-default');
+      inject_css(default_css_theme, 'theme-default', this.opts.styleParent);
     }
   }
 
@@ -153,7 +153,9 @@ export default class CodeFlask {
 
     this.elTextarea.addEventListener('scroll', (e) => {
       this.elPre.style.transform = `translate3d(-${e.target.scrollLeft}px, -${e.target.scrollTop}px, 0)`;
-      this.elLineNumbers.style.transform = `translate3d(0, -${e.target.scrollTop}px, 0)`;
+      if (this.elLineNumbers) {
+        this.elLineNumbers.style.transform = `translate3d(0, -${e.target.scrollTop}px, 0)`;
+      }
     });
   }
 
@@ -202,7 +204,6 @@ export default class CodeFlask {
 
   setLineNumber() {
     this.lineNumber = this.code.split('\n').length;
-    console.log(this.lineNumber);
 
     if (this.opts.lineNumbers) {
       this.updateLineNumbersCount();

rollup.config.js

@@ -1,6 +1,7 @@
-export function inject_css(css, styleName) {
+export function inject_css(css, styleName, parent) {
   const CSS_ID = styleName || 'codeflask-style';
-  
+  const PARENT = parent || document.head;
+
   if (!css) {
     return false;
   }
@@ -13,7 +14,7 @@ export function inject_css(css, styleName) {
 
   style.innerHTML = css;
   style.id = CSS_ID;
-  document.head.appendChild(style);
+  PARENT.appendChild(style);
 
   return true;
 }