chore: added /dev directory for development purposes

micheleriva · micheleriva · commit 8e415182527c · 2020-10-03T15:08:27.000+02:00
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,37 @@
+<html>
+  <head>
+    <title>CodeBox</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/highlight.min.js" integrity="sha512-TDKKr+IvoqZnPzc3l35hdjpHD0m+b2EC2SrLEgKDRWpxf2rFCxemkgvJ5kfU48ip+Y+m2XVKyOCD85ybtlZDmw==" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+    <script src="../dist/index.min.js"></script>
+    <link rel="stylesheet" href="../dist/style.css" />
+  </head>
+  <body>
+  <div id="editorjs" style='margin-top:50px;'></div>
+  <button onclick="save()" style="margin-left:50%;transform:translateX(-50%);">Save</button>
+  <script type="text/javascript">
+    const editor = new EditorJS({
+    holder: 'editorjs',
+    data: {
+      blocks: [{
+        "type": "paragraph",
+        "data": {
+          "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
+        }
+      }]
+    },
+    tools: {
+      code: CodeBox.default
+    }
+  });
+
+  const save = () => {
+    editor.save().then((outputData) => {
+      console.log('Article data: ', outputData)
+    }).catch((error) => {
+      console.log('Saving failed: ', error)
+    });
+  }
+  </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/BomdiZane/codebox.git"
   },
   "scripts": {
-    "build": "esbuild --bundle --outfile=\"./dist/index.min.js\" --platform=\"browser\" --minify ./src/index.ts",
+    "build": "esbuild --bundle --outfile=\"./dist/index.min.js\" --global-name=\"CodeBox\" --platform=\"browser\" ./src/index.ts && cp ./src/style.css ./dist/style.css",
     "start": "node test.js"
   },
   "devDependencies": {
diff --git a/src/index.ts b/src/index.ts
@@ -14,6 +14,7 @@ type CodeboxConfig = {
   themeURL:         string;
   useDefaultTheme:  string;
   languages?:       string[];
+  toolbarTitle?:    string;
 }
 
 type CodeboxData = {
@@ -22,7 +23,7 @@ type CodeboxData = {
   theme: string;
 }
 
-class CodeBox {
+export default class CodeBox {
 
   public api:    any;
   public config: CodeboxConfig;
@@ -213,6 +214,3 @@ class CodeBox {
     return themeURL;
   }
 }
-
-
-module.exports = CodeBox;
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,89 @@
+.codeBoxHolder{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.codeBoxTextArea{
+  width: 100%;
+  min-height: 30px;
+  padding: 10px;
+  border-radius: 2px 2px 2px 0;
+  border: none !important;
+  outline: none !important;
+  font: 14px monospace;
+}
+
+.codeBoxSelectDiv{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+}
+
+.codeBoxSelectInput{
+  border-radius: 0 0 20px 2px;
+  padding: 2px 26px;
+  padding-top: 0;
+  padding-right: 0;
+  text-align: left;
+  cursor: pointer;
+  border: none !important;
+  outline: none !important;
+}
+
+.codeBoxSelectDropIcon{
+  position: absolute !important;
+  left: 10px !important;
+  bottom: 0 !important;
+  width: unset !important;
+  height: unset !important;
+  font-size: 16px !important;
+}
+
+.codeBoxSelectPreview{
+  display: none;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  border-radius: 2px;
+  box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
+  position: absolute;
+  top: 100%;
+  margin: 5px 0;
+  max-height: 30vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 10000;
+}
+
+.codeBoxSelectItem{
+  width: 100%;
+  padding: 5px 20px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.codeBoxSelectItem:hover{
+  opacity: 0.7;
+}
+
+.codeBoxSelectedItem{
+  background-color: lightblue !important;
+}
+
+.codeBoxShow{
+  display: flex !important;
+}
+
+.dark{
+  color: #abb2bf;
+  background-color: #282c34;
+}
+
+.light{
+  color: #383a42;
+  background-color: #fafafa;
+}

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ type CodeboxConfig = {`
`14`	`14`	`themeURL: string;`
`15`	`15`	`useDefaultTheme: string;`
`16`	`16`	`languages?: string[];`
	`17`	`+ toolbarTitle?: string;`
`17`	`18`	`}`
`18`	`19`
`19`	`20`	`type CodeboxData = {`
`@@ -22,7 +23,7 @@ type CodeboxData = {`
`22`	`23`	`theme: string;`
`23`	`24`	`}`
`24`	`25`
`25`		`-class CodeBox {`
	`26`	`+export default class CodeBox {`
`26`	`27`
`27`	`28`	`public api: any;`
`28`	`29`	`public config: CodeboxConfig;`
`@@ -213,6 +214,3 @@ class CodeBox {`
`213`	`214`	`return themeURL;`
`214`	`215`	`}`
`215`	`216`	`}`
`216`		`-`
`217`		`-`
`218`		`-module.exports = CodeBox;`