Big update - Replacing all references to CodeFlask with CodeCup - Add…

…ed support for autoloading languages from cdn

.vscode/settings.json

@@ -16,7 +16,8 @@
         "titleBar.activeBackground": "#8068e9",
         "titleBar.activeForeground": "#e7e7e7",
         "titleBar.inactiveBackground": "#8068e999",
-        "titleBar.inactiveForeground": "#e7e7e799"
+        "titleBar.inactiveForeground": "#e7e7e799",
+        "commandCenter.border": "#e7e7e799"
     },
     "peacock.color": "#8068e9"
 }

README.md

@@ -22,6 +22,8 @@ CodeFlask was a brilliant project, but seems to be unmaintained, and it required
   * Required (Legacy deps - might rebuild)
 * Small theme tweaks (Border, rounded corners.)
 
+* updateded all codeflask references to codeCup - 13/11/2023
+
 ### Core Changes 
 > (Submitted as [PR](https://github.com/kazzkiq/CodeFlask/pull/134) to CodeFlask, incase it gets picked up again)
 * Added support to destroy
@@ -69,7 +71,7 @@ const flask = new CodeCup(shadowElem, { language: 'js', styleParent: this.shadow
 ### Listening for changes in editor
 
 ```js
-flask.onUpdate((code) => {
+cup.onUpdate((code) => {
   // do something with code here.
   // this will trigger whenever the code
   // in the editor changes.
@@ -80,13 +82,13 @@ flask.onUpdate((code) => {
 
 ```js
 // This will also trigger .onUpdate()
-flask.updateCode('const my_new_code_here = "Blabla"');
+cup.updateCode('const my_new_code_here = "Blabla"');
 ```
 
 ### Getting the current code from editor
 
 ```js
-const code = flask.getCode();
+const code = cup.getCode();
 ```
 
 ### Enabling line numbers

example/index.html

@@ -1,4 +1,4 @@
-<script src="../dist/codeflask.bundle.js"></script>
+<script src="../dist/codeCup.bundle.js"></script>
 
 <div class="container">
 
@@ -16,41 +16,53 @@
         <button onclick="toggle_linenumbers()">Toggle LineNumbers</button>
         <button class="danger" onclick="demo_dispose()">Dispose</button>
     </center>
+    <br>
+    <center>
+        <button onclick="change_language()">Change Language</button>
+    </center>
 </div>
 
 <script>
 
     // new codeflask
-    let flask = undefined
+    let cup = undefined
+
+    let current_language = 'javascript'
+
+    let change_language = () => {
+        // ask the user for a language using a simple js alert popup, then update the codeCup language
+        let language = prompt('Enter a language to change to', current_language)
+        cup.updateLanguage(language)
+    }
 
 
     let toggle_readonly = () => {
-        flask.toggleReadonlyMode()
+        cup.toggleReadonlyMode()
     }
 
     let toggle_linenumbers = () => {
-        flask.toggleLineNumbers()
+        cup.toggleLineNumbers()
     }
 
     let demo_init = () => {
-        flask.enableLineNumbers()
-        flask.disableReadonlyMode()
-        flask.updateCode('// Hello World \nlet num_a = 45; \nlet num_b = 33; \n\nlet adder = (_num_a,_num_b) => {\n\treturn _num_a + _num_b; \n}\n\nlet ans = adder(num_a,num_b)');
+        cup.enableLineNumbers()
+        cup.disableReadonlyMode()
+        cup.updateCode('// Hello World \nlet num_a = 45; \nlet num_b = 33; \n\nlet adder = (_num_a,_num_b) => {\n\treturn _num_a + _num_b; \n}\n\nlet ans = adder(num_a,num_b)');
     }
 
     let demo_create = () => {
         demo_dispose();
-        flask = new CodeFlask('#cf_holder', { 
-            language: 'js',
+        cup = new CodeCup('#cf_holder', { 
+            language: current_language,
             lineNumbers: true 
         });
         demo_init();
     }
 
     let demo_dispose = () => {
-        if(flask !== undefined){
-            flask.dispose();
-            flask = undefined;
+        if(cup !== undefined){
+            cup.dispose();
+            cup = undefined;
         }
     }
 

package.json

@@ -1,30 +1,30 @@
 {
   "name": "@calumk/codecup",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A micro code-editor for awesome web pages",
-  "main": "dist/codecup.bundle.js",
+  "main": "dist/codeCup.bundle.js",
   "files": [
-    "dist/codeflask.min.js",
+    "dist/codeCup.bundle.js",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "build" : "webpack --mode=production",
-    "build:watch" : "webpack --watch",
+    "build": "webpack --mode=production",
+    "build:watch": "webpack --watch",
     "pretest": "npm run build",
     "prepublishOnly": "npm install && npm run build"
   },
   "dependencies": {
     "@types/prismjs": "^1.9.1",
-    "prismjs": "^1.14.0"
+    "prismjs": "^1.29.0"
   },
   "devDependencies": {
-    "webpack": "^5.24.1",
-    "webpack-cli": "^4.5.0",
     "postcss": "^8.2.6",
     "postcss-loader": "^4.2.0",
     "postcss-nested": "^5.0.3",
-    "postcss-nested-ancestors": "^2.0.0"
+    "postcss-nested-ancestors": "^2.0.0",
+    "webpack": "^5.24.1",
+    "webpack-cli": "^4.10.0"
   },
   "repository": {
     "type": "git",

src/codecup.js

@@ -3,19 +3,24 @@ import { injectCss } from './styles/injector'
 import { defaultCssTheme } from './styles/theme-default'
 import { escapeHtml } from './utils/html-escape'
 import Prism from 'prismjs'
+import 'prismjs/plugins/autoloader/prism-autoloader';
 
-export default class CodeFlask {
+Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
+
+// import hljs from 'highlight.js';
+
+export default class CodeCup {
   constructor (selectorOrElement, opts) {
     if (!selectorOrElement) {
-      // If no selector or element is passed to CodeFlask,
+      // If no selector or element is passed to CodeCup,
       // stop execution and throw error.
-      throw Error('CodeFlask expects a parameter which is Element or a String selector')
+      throw Error('CodeCup expects a parameter which is Element or a String selector')
     }
 
     if (!opts) {
-      // If no selector or element is passed to CodeFlask,
+      // If no selector or element is passed to CodeCup,
       // stop execution and throw error.
-      throw Error('CodeFlask expects an object containing options as second parameter')
+      throw Error('CodeCup expects an object containing options as second parameter')
     }
 
     if (selectorOrElement.nodeType) {
@@ -41,7 +46,7 @@ export default class CodeFlask {
     const isCSSInjected = injectCss(editorCss, null, this.opts.styleParent)
 
     if (!isCSSInjected) {
-      throw Error('Failed to inject CodeFlask CSS.')
+      throw Error('Failed to inject CodeCup CSS.')
     }
 
     // The order matters (pre > code). Don't change it
@@ -55,46 +60,50 @@ export default class CodeFlask {
     this.listenTextarea()
     this.populateDefault()
     this.updateCode(this.code)
+
+    // this.elTextarea.addEventListener('keyup', (e) => {
+    //   this.highlight()
+    // });
   }
 
   createWrapper () {
     this.code = this.editorRoot.innerHTML
     this.editorRoot.innerHTML = ''
     this.elWrapper = this.createElement('div', this.editorRoot)
-    this.elWrapper.classList.add('codeflask')
+    this.elWrapper.classList.add('codeCup')
   }
 
   createTextarea () {
     this.elTextarea = this.createElement('textarea', this.elWrapper)
-    this.elTextarea.classList.add('codeflask__textarea', 'codeflask__flatten')
+    this.elTextarea.classList.add('codeCup__textarea', 'codeCup__flatten')
   }
 
   createPre () {
     this.elPre = this.createElement('pre', this.elWrapper)
-    this.elPre.classList.add('codeflask__pre', 'codeflask__flatten')
+    this.elPre.classList.add('codeCup__pre', 'codeCup__flatten')
   }
 
   createCode () {
     this.elCode = this.createElement('code', this.elPre)
-    this.elCode.classList.add('codeflask__code', `language-${this.opts.language || 'html'}`)
+    this.elCode.classList.add('codeCup__code', `language-${this.opts.language || 'html'}`)
   }
 
   createLineNumbers () {
     this.elLineNumbers = this.createElement('div', this.elWrapper)
-    this.elLineNumbers.classList.add('codeflask__lines')
-    this.elWrapper.classList.add('codeflask--has-line-numbers')
+    this.elLineNumbers.classList.add('codeCup__lines')
+    this.elWrapper.classList.add('codeCup--has-line-numbers')
     this.setLineNumber()
   }
 
   destroyLineNumbers () {
-    this.elWrapper.classList.remove('codeflask--has-line-numbers')
+    this.elWrapper.classList.remove('codeCup--has-line-numbers')
+    console.log(this.elLineNumbers)
     this.elLineNumbers.remove()
   }
 
   createElement (elementTag, whereToAppend) {
     const element = document.createElement(elementTag)
     whereToAppend.appendChild(element)
-
     return element
   }
 
@@ -134,7 +143,7 @@ export default class CodeFlask {
     }
 
     if (this.opts.lineNumbers) {
-      this.elWrapper.classList.add('codeflask--has-line-numbers')
+      // this.elWrapper.classList.add('codeCup--has-line-numbers')
       this.createLineNumbers()
     }
 
@@ -159,7 +168,7 @@ export default class CodeFlask {
     let numberList = ''
 
     for (let i = 1; i <= this.lineNumber; i++) {
-      numberList = numberList + `<span class="codeflask__lines__line">${i}</span>`
+      numberList = numberList + `<span class="codeCup__lines__line">${i}</span>`
     }
 
     this.elLineNumbers.innerHTML = numberList
@@ -414,8 +423,9 @@ export default class CodeFlask {
   }
 
   onUpdate (callback) {
+    console.log("chanfge")
     if (callback && {}.toString.call(callback) !== '[object Function]') {
-      throw Error('CodeFlask expects callback of type Function')
+      throw Error('CodeCup expects callback of type Function')
     }
 
     this.updateCallBack = callback
@@ -453,6 +463,7 @@ export default class CodeFlask {
 
   enableLineNumbers() {
     this.opts.lineNumbers = true;
+    this.destroyLineNumbers()
     this.createLineNumbers()
     this.updateLineNumbersCount()
   }