kazzkiq · acarl005 · Jun 18, 2020 · Mar 6, 2022 · Mar 16, 2022 · Mar 16, 2022
diff --git a/README.md b/README.md
@@ -1,150 +1,40 @@
-[![npm version](https://badge.fury.io/js/codeflask.svg)](https://www.npmjs.com/package/codeflask)
-[![Build Status](https://travis-ci.org/kazzkiq/CodeFlask.svg?branch=master)](https://travis-ci.org/kazzkiq/CodeFlask)
-
-<p align="center">
-  <img src="logo.png" width="190"><br>
-    CodeFlask: A micro code-editor for awesome web pages.
-</p>
-
-<p align="center">
-  <img src="code.png" width="739">
-</p>
-
-## Installation
-
-You can install CodeFlask via npm:
-
-```
-npm install codeflask
-```
-
-Or use it directly in browser via cdn service:
-
-```
-https://unpkg.com/codeflask/build/codeflask.min.js
-```
-
-## Usage
-
-```js
-import CodeFlask from 'codeflask';
-
-const flask = new CodeFlask('#my-selector', { language: 'js' });
-```
-You can also pass a DOM element instead of a selector:
-```js
-import CodeFlask from 'codeflask';
-
-const editorElem = document.getElementById('editor');
-const flask = new CodeFlask(editorElem, { language: 'js' });
-```
-Usage with Shadow DOM:
-```js
-import CodeFlask from 'codeflask';
-...
-const shadowElem = this.shadowRoot.querySelector('#editor');
-const flask = new CodeFlask(shadowElem, { language: 'js', styleParent: this.shadowRoot });
-```
-### Listening for changes in editor
-
-```js
-flask.onUpdate((code) => {
-  // do something with code here.
-  // this will trigger whenever the code
-  // in the editor changes.
-});
-```
-
-### Updating the editor programatically
-
-```js
-// This will also trigger .onUpdate()
-flask.updateCode('const my_new_code_here = "Blabla"');
-```
-
-### Getting the current code from editor
-
-```js
-const code = flask.getCode();
-```
-
-### Enabling line numbers
-
-```js
-import CodeFlask from 'codeflask';
-
-const flask = new CodeFlask('#my-selector', {
-  language: 'js',
-  lineNumbers: true
-});
-```
-
-### Enabling rtl (right to left writing)
-
-```js
-import CodeFlask from 'codeflask';
-
-const flask = new CodeFlask('#my-selector', {
-  language: 'js',
-  rtl: true
-});
-```
-
-### Enabling read only mode
-
-```js
-import CodeFlask from 'codeflask';
-
-const flask = new CodeFlask('#my-selector', {
-  language: 'js',
-  readonly: true
-});
-```
-
-### Adding other languages support:
-
-```js
-flask.addLanguage('ruby', options)
-```
-
-#### For Example to add 'Ruby'
-
-```js
-import Prism from 'prismjs';
-import CodeFlask from 'codeflask';
-
-const flask = new CodeFlask('#my-selector', {
-  language: 'ruby',
-  readonly: true
-});
-
-flask.addLanguage('ruby', Prism.languages['ruby']);
-```
-
-This API is simply a proxy to add a new language to [Prism](http://prismjs.com/) itself (the code highlighter). The `options` parameter must be the same accepted in Prism. You can read more about it [here](http://prismjs.com/extending.html#language-definitions).
-
-By default, CodeFlask supports the following languages (which are also the default supported in Prism):
-
-- Markup (HTML/XML);
-- CSS;
-- C-like;
-- JavaScript;
-
-### Adding your own theme to CodeFlask
-
-By default, CodeFlask comes with a simple theme made from scratch called **[CodeNoon](https://github.com/kazzkiq/CodeFlask.js/blob/master/src/styles/theme-default.js)**.
-
-You can easily override this theme with your own by writting your own CSS and adding it to your project. If that's the case, you should also disable **CodeNoon** with the `defaultTheme` option:
-
-```js
-import CodeFlask from 'codeflask';
-
-const flask = new CodeFlask('#my-selector', {
-  language: 'js',
-  defaultTheme: false
-});
-```
-
-# Credits & Thanks
-
-CodeFlask.js was made possible by awesome open-source projects such as [Prism.js](https://github.com/PrismJS/prism) and [Rollup](https://github.com/rollup/rollup).
+# CodeFlask Mod
+
+```bash
+npm i '@acarl005/codeflask'
+```
+
+I modified [CodeFlask](https://github.com/kazzkiq/CodeFlask) to be able to...
+
+1. Make PrismJS a peer dependency
+1. Attach (and remove) custom event listeners to the editor
+1. Support the [Line Highlight](https://prismjs.com/plugins/line-highlight/) plugin in PrismJS
+1. Fix this issue: kazzkiq/CodeFlask#69
+1. Fix bugs with tab hotkey for indentation
+1. Make the self-closing characters configurable
+
+```javascript
+import CodeFlask from "codeflask"
+import Prism from "prismjs"
+
+const flask = new CodeFlask(editor, Prism, {
+  language: "js",
+  selfClosingCharacters: ['(', '[', '{', "'", '"'],
+  customEventListeners: {
+    "keydown": e => {
+      if (e.key == "Enter") {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        // do custom stuff
+      }
+    }
+  }
+})
+
+flask.highlightLines("4-7")
+```
+
+PrismJS is highly customizable.
+It actually offers custom builds with more plugins that you can opt into.
+This is an awesome and rare feature b/c you can minimize the bundle by omitting unneeded functionality.
+Therefore, it should be a peer dependency, b/c CodeFlask can't know which build with which plugins you'll need.
diff --git a/build/codeflask.min.js b/build/codeflask.min.js
diff --git a/build/codeflask.module.js b/build/codeflask.module.js
diff --git a/index.d.ts b/index.d.ts
@@ -6,6 +6,10 @@ export type LanguageDefinition = {
   [token: string]: prism.LanguageDefinition | RegExp
 }
 
+export type EventListeners = Partial<{
+    [K in keyof WindowEventMap]: (e: WindowEventMap[K]) => void
+}>
+
 export interface CodeFlaskOptions {
   language?: string
   rtl?: boolean
@@ -16,12 +20,14 @@ export interface CodeFlaskOptions {
   areaId?: string
   ariaLabelledby?: string
   readonly?: boolean
+  selfClosingCharacters: string[]
+  customEventListeners?: EventListeners
 }
 
 export default class CodeFlask {
-  constructor(selectorOrElement: Element | string, opts: CodeFlaskOptions)
+  constructor(selectorOrElement: Element | string, Prism: any, opts: CodeFlaskOptions)
 
-  updateCode(newCode: string): void 
+  updateCode(newCode: string): void
   updateLanguage(newLanguage: string): void
   addLanguage(name: string, options: LanguageDefinition): void
 
@@ -30,4 +36,9 @@ export default class CodeFlask {
 
   disableReadonlyMode(): void
   enableReadonlyMode(): void
+
+  removeEventListeners(): void
+  blur(): void
+  highlight(): void
+  highlightLines(lineSpec: string): void
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "codeflask",
-  "version": "1.4.1",
+  "name": "@acarl005/codeflask",
+  "version": "2.1.6",
   "description": "A micro code-editor for awesome web pages",
   "main": "build/codeflask.min.js",
   "module": "build/codeflask.module.js",
@@ -21,10 +21,14 @@
     "prepublishOnly": "npm install && npm run build"
   },
   "dependencies": {
-    "@types/prismjs": "^1.9.1",
-    "prismjs": "^1.14.0"
+    "@types/prismjs": "^1.9.1"
+  },
+  "peerDependencies": {
+    "prismjs": "*"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@wdio/cli": "^6.1.15",
     "@wdio/local-runner": "^6.1.14",
     "@wdio/mocha-framework": "^6.1.14",
@@ -34,11 +38,8 @@
     "chromedriver": "^83.0.0",
     "micro": "^9.3.0",
     "mocha": "^5.1.1",
-    "rollup": "^0.58.1",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.0.3",
-    "rollup-plugin-uglify": "^3.0.0",
+    "rollup": "^2.72.1",
+    "rollup-plugin-terser": "^7.0.2",
     "serve": "^7.0.0",
     "wdio-chromedriver-service": "^6.0.3"
   },

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,7 +1,6 @@
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import buble from 'rollup-plugin-buble';
-import uglify from 'rollup-plugin-uglify';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -22,17 +21,8 @@ export default {
 		},
 	],
 	plugins: [
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
 		resolve(),
 		commonjs(),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), transpile and minify
-		production && buble({ exclude: 'node_modules/**' }),
-		production && uglify()
+		production && terser()
 	]
 };