first commit to new repo

.github/workflows/npm-publish.yml

@@ -0,0 +1,16 @@
+on: push
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 10
+      - run: npm install
+      - run: npm run build
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: "public"

.gitignore

@@ -0,0 +1,4 @@
+node_modules/*
+npm-debug.log
+.idea/
+.DS_Store

.npmignore

@@ -0,0 +1,4 @@
+.idea/
+.vscode/
+src/
+example/

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#ff33d0",
+        "activityBar.activeBorder": "#acdf00",
+        "activityBar.background": "#ff33d0",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#acdf00",
+        "activityBarBadge.foreground": "#15202b",
+        "sash.hoverBorder": "#ff33d0",
+        "statusBar.background": "#ff00c4",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#ff33d0",
+        "statusBarItem.remoteBackground": "#ff00c4",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#ff00c4",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#ff00c499",
+        "titleBar.inactiveForeground": "#e7e7e799",
+        "commandCenter.border": "#e7e7e799"
+    },
+    "peacock.color": "#FF00C4"
+}

dist/editorjs-codeCup.bundle.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/**
+  * EditorJsCodeCup Block for the Editor.js.
+  *
+  * @author Calum Knott ([email protected])
+  * @license The MIT License (MIT)
+  */

example/assets/demo.css

@@ -0,0 +1,215 @@
+/**
+ * Styles for the example page
+ */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 1.5em;
+  margin: 0;
+}
+
+.svgicon{
+  width:30px;
+  height:30px;
+  padding:8px;
+  display: inline-block;
+  vertical-align : top
+}
+.ce-example {
+  font-size: 16.2px;
+}
+
+.ce-example__header {
+  border-bottom: 1px solid #E8E8EB;
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  padding: 0 30px;
+  margin-bottom: 30px;
+  flex-wrap: wrap;
+}
+
+.ce-example__header a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ce-example__header-logo {
+  font-weight: bold;
+}
+
+.ce-example__header-menu {
+  margin-left: auto;
+}
+
+@media all and (max-width: 730px){
+  .ce-example__header-menu {
+    margin-left: 0;
+    margin-top: 10px;
+    flex-basis: 100%;
+    font-size: 14px;
+  }
+}
+
+.ce-example__header-menu a {
+  margin-left: 20px;
+}
+
+@media all and (max-width: 730px){
+  .ce-example__header-menu a {
+    margin-left: 0;
+    margin-right: 15px;
+  }
+}
+
+.ce-example__content {
+  max-width: 1100px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ce-example__content--small {
+  max-width: 500px;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  padding: 0 15px;
+}
+
+.ce-example__content--with-bg {
+  background: #f4f4f4;
+  max-width: none;
+  margin-top: -30px;
+}
+
+.ce-example__output {
+  background: #1B202B;
+  overflow-x: auto;
+  padding: 0 30px;
+}
+
+.ce-example__output-content {
+  max-width: 650px;
+  margin: 30px auto;
+  color: #ABADC3;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  font-size: 13.3px;
+}
+
+.ce-example__output-content:empty {
+  display: none;
+}
+
+.ce-example__button {
+  display: block;
+  margin: 50px auto;
+  max-width: 180px;
+  background: #4A9DF8;
+  padding: 17px 30px;
+  box-shadow: 0 22px 18px -4px rgba(137, 207, 255, 0.77);
+  transition: all 150ms ease;
+  cursor: pointer;
+  border-radius: 31px;
+  color: #fff;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  text-align: center;
+}
+
+.ce-example__button:hover {
+  background: #3D8DE5;
+  transform: translateY(2px);
+  box-shadow: 0 20px 15px -4px rgba(137, 207, 255, 0.77);
+}
+
+.ce-example__output-footer {
+  padding: 30px 0;
+  font-size: 14.2px;
+  letter-spacing: 0.3px;
+  text-align: center;
+}
+
+.ce-example__output-footer a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.ce-example__statusbar {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+  padding: 8px 15px;
+  z-index: 1;
+}
+
+.ce-example__statusbar-button {
+  display: inline-flex;
+  margin-left: 10px;
+  background: #4A9DF8;
+  padding: 6px 12px;
+  box-shadow: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
+  transition: all 150ms ease;
+  cursor: pointer;
+  border-radius: 31px;
+  color: #fff;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  text-align: center;
+}
+
+@media all and (max-width: 730px){
+  .ce-example__header,
+  .ce-example__content{
+    padding: 0 20px;
+  }
+}
+
+/**
+ * JSON highlighter
+ */
+.sc_attr {
+  color: rgb(148, 162, 192);
+}
+.sc_key {
+  color: rgb(190, 213, 255);
+}
+.sc_toolname {
+  color: rgb(15, 205, 251);
+}
+.sc_tag {
+  color: rgb(4, 131, 216);
+}
+.sc_bool {
+  color: rgb(247, 60, 173);
+}
+
+.ce-example .ce-block:first-of-type h2.ce-header{
+  font-size: 50px;
+}
+
+.ce-example h2.ce-header{
+  font-size: 30px;
+}
+
+.ce-example h3.ce-header {
+  font-size: 24px;
+}
+
+.ce-example h4.ce-header {
+  font-size: 18px;
+}
+
+.ce-example-multiple {
+  display: grid;
+  grid-template-columns: calc(50% - 15px) calc(50% - 15px);
+  gap: 30px;
+  padding: 30px;
+}
+
+.ce-example-multiple > div {
+  background: #fff;
+  border-radius: 7px;
+  padding: 30px;
+}

example/assets/json-preview.js

@@ -0,0 +1,45 @@
+/**
+ * Module to compose output JSON preview
+ */
+const cPreview = (function (module) {
+  /**
+   * Shows JSON in pretty preview
+   * @param {object} output - what to show
+   * @param {Element} holder - where to show
+   */
+  module.show = function(output, holder) {
+    /** Make JSON pretty */
+    output = JSON.stringify( output, null, 4 );
+    /** Encode HTML entities */
+    output = encodeHTMLEntities( output );
+    /** Stylize! */
+    output = stylize( output );
+    holder.innerHTML = output;
+  };
+
+  /**
+   * Converts '>', '<', '&' symbols to entities
+   */
+  function encodeHTMLEntities(string) {
+    return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  /**
+   * Some styling magic
+   */
+  function stylize(string) {
+    /** Stylize JSON keys */
+    string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
+    /** Stylize tool names */
+    string = string.replace( /"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
+    /** Stylize HTML tags */
+    string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
+    /** Stylize strings */
+    string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
+    /** Boolean/Null */
+    string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
+    return string;
+  }
+
+  return module;
+})({});