add additionnalCss

site/plugins/code-editor/src/assets/css/abstracts/_variables.scss

@@ -0,0 +1,62 @@
+/* Colors
+---------------------------------*/
+
+$color-black: #000;
+$color-white: #fff;
+$color-dark: #16171a;
+$color-dark-grey: #777;
+$color-light: #efefef;
+$color-light-grey: #999;
+$color-background: $color-light;
+$color-positive: #5d800d;
+$color-positive-border: $color-positive;
+$color-positive-outline: rgba($color-positive, 0.25);
+$color-positive-on-dark: #a7bd68;
+$color-focus: #4271ae;
+$color-focus-border: $color-focus;
+$color-focus-outline: rgba($color-focus, 0.25);
+$color-focus-on-dark: #81a2be;
+$color-notice: #f5871f;
+$color-notice-on-dark: #de935f;
+$color-negative: #c82829;
+$color-negative-border: $color-negative;
+$color-negative-outline: rgba($color-negative, 0.25);
+$color-negative-on-dark: #d16464;
+$color-border: #ccc;
+$color-backdrop: rgba($color-dark, 0.6);
+$color-inset: #ebebeb;
+
+
+/* Breakpoint
+---------------------------------*/
+
+$breakpoint-small: 30em;
+$breakpoint-menu: 45em;
+$breakpoint-medium: 65em;
+$breakpoint-large: 90em;
+$breakpoint-huge: 120em;
+
+
+/* Fields
+---------------------------------*/
+
+$field-input-padding: .5rem;
+$field-input-height: 2.25rem;
+$field-input-line-height: 1.25rem;
+
+
+/* Typography
+---------------------------------*/
+
+$font-size-tiny: 0.75rem;
+$font-size-small: 0.875rem;
+$font-size-medium: 1rem;
+$font-size-large: 1.25rem;
+$font-size-huge: 1.5rem;
+$font-size-monster: 1.75rem;
+
+$font-weight-normal: 400;
+$font-weight-bold: 600;
+
+$font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;

site/plugins/code-editor/src/assets/css/styles.scss

@@ -0,0 +1,29 @@
+@import
+  'abstracts/variables.scss';
+
+.k-code-editor-input {
+    background: #2d2d2d;
+    color: #ccc;
+    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+    font-size: .9rem;
+    line-height: 1.5;
+    padding: 10px;
+
+    &[data-size="small"] {
+        min-height: 7.5rem;
+    }
+    &[data-size="medium"] {
+        min-height: 15rem;
+    }
+    &[data-size="large"] {
+        min-height: 30rem;
+    }
+    &[data-size="huge"] {
+        min-height: 30rem;
+    }
+
+}
+
+.prism-editor__textarea:focus {
+    outline: none;
+}

site/plugins/code-editor/src/components/field/CodeEditor.vue

@@ -0,0 +1,72 @@
+<template>
+  <k-field :input="uid" v-bind="$props" class="k-code-editor-field">
+    <prism-editor
+      v-model="code"
+      class="k-code-editor-input"
+      :highlight="highlighter"
+      :line-numbers="lineNumbers"
+      :tab-size="tabSize"
+      :insert-spaces="insertSpaces"
+      :ignore-tab-key="ignoreTabKey"
+      :data-size="size"
+      @input="onCodeInput"
+    />
+  </k-field>
+</template>
+
+<script>
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css";
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-less";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-scss";
+import "prismjs/components/prism-yaml";
+import "prismjs/themes/prism-tomorrow.css";
+
+export default {
+  components: { PrismEditor },
+
+  extends: "k-textarea-field",
+
+  props: {
+    size: String,
+    language: String,
+    lineNumbers: Boolean,
+    tabSize: Number,
+    insertSpaces: Boolean,
+    ignoreTabKey: Boolean,
+  },
+
+  data() {
+    return {
+      code: "",
+    };
+  },
+
+  mounted() {
+    this.code = this.value;
+  },
+
+  methods: {
+    highlighter() {
+      return highlight(this.code, languages[this.language]);
+    },
+
+    onCodeInput() {
+      this.$emit("input", this.code);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/css/styles.scss";
+</style>

site/plugins/code-editor/src/index.js

@@ -0,0 +1,7 @@
+import CodeEditor from "./components/field/CodeEditor.vue";
+
+window.panel.plugin("sylvainjule/code-editor", {
+  fields: {
+    "code-editor": CodeEditor,
+  },
+});

site/plugins/code-editor/src/node/patchVuePrismEditor.mjs

@@ -0,0 +1,38 @@
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import chalk from "chalk";
+import consola from "consola";
+
+const srcPath = "node_modules/vue-prism-editor/dist/prismeditor.esm.js";
+
+async function main() {
+  consola.start("Vue Prism Editor patcher");
+
+  if (!existsSync(srcPath)) {
+    consola.error(
+      `couldn't find ${chalk.cyan(srcPath)}, did you run ${chalk.green(
+        "npm install"
+      )}?`
+    );
+    return;
+  }
+
+  const source = readFileSync(srcPath, "utf8");
+
+  if (!source.includes("Vue.extend")) {
+    consola.success("already patched");
+    return;
+  }
+
+  consola.info("patching the source component...");
+
+  let output = source
+    .replace(/^import Vue from 'vue';/, "")
+    .replace("/*#__PURE__*/Vue.extend(", "")
+    .replace(/\}\)(;\s+export)/, "}$1");
+
+  writeFileSync(srcPath, output, "utf8");
+
+  consola.success("successfully patched");
+}
+
+main().catch((err) => consola.error(err));