Added language support to Code field

CHANGELOG.md

@@ -8,6 +8,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Refactoring
 - Tests
 
+## [0.2.1] - 2021-03-14
+### Added
+- Code language support.
+
+### Changed
+- Language link style
+- Stripe HTML from index field
+
 ## [0.2.0] - 2021-03-14
 ### Added
 - Code field support.

resources/js/components/DetailField.vue

@@ -4,7 +4,7 @@
 
             <a 
                 class="inline-block font-bold cursor-pointer mr-2 animate-text-color select-none" 
-                :class="{ 'text-60': localeKey !== currentLocale, 'text-primary border-b-2': localeKey === currentLocale }"
+                :class="{ 'text-60': localeKey !== currentLocale, 'text-primary': localeKey === currentLocale }"
                 :key="`a-${localeKey}`" 
                 v-for="(locale, localeKey) in field.locales"
                 @click="changeTab(localeKey)"

resources/js/components/FormField.vue

@@ -3,7 +3,7 @@
         <template slot="field">
             <a 
                 class="inline-block font-bold cursor-pointer mr-2 animate-text-color select-none" 
-                :class="{ 'text-60': localeKey !== currentLocale, 'text-primary border-b-2': localeKey === currentLocale }"
+                :class="{ 'text-60': localeKey !== currentLocale, 'text-primary': localeKey === currentLocale }"
                 :key="`a-${localeKey}`" 
                 v-for="(locale, localeKey) in field.locales"
                 @click="changeTab(localeKey)"

resources/js/components/IndexField.vue

@@ -1,5 +1,5 @@
 <template>
-    <span v-html="value"></span>
+    <span>{{ value | striphtml }}</span>
 </template>
 
 <script>

resources/js/components/Slug/FormField.vue

@@ -3,7 +3,7 @@
         <template slot="field">
             <a 
                 class="inline-block font-bold cursor-pointer mr-2 animate-text-color select-none" 
-                :class="{ 'text-60': localeKey !== currentLocale, 'text-primary border-b-2': localeKey === currentLocale }"
+                :class="{ 'text-60': localeKey !== currentLocale, 'text-primary': localeKey === currentLocale }"
                 :key="`a-${localeKey}`" 
                 v-for="(locale, localeKey) in field.locales"
                 @click="changeTab(localeKey)"

resources/js/field.js

@@ -1,5 +1,12 @@
 Nova.booting((Vue, router, store) => {
-    Vue.config.devtools = true;
+    // Vue.config.devtools = true;
+
+    Vue.filter('striphtml', function (value) {
+        var div = document.createElement("div");
+        div.innerHTML = value;
+        var text = div.textContent || div.innerText || "";
+        return text;
+    });
 
     Vue.component('index-nova-translatable', require('./components/IndexField'))
     Vue.component('detail-nova-translatable', require('./components/DetailField'))

src/NovaTranslatable.php

@@ -179,6 +179,21 @@ public function code()
         return $this->withMeta(['code' => true]);
     }
 
+    /**
+     * Define the language syntax highlighting mode for the field.
+     *
+     * @param  string  $language
+     * @return $this
+     */
+    public function language($language)
+    {
+        if ($this->fieldType == 'code') {
+            return $this->options(['mode' => $language]);
+        }
+
+        return $this;
+    }
+
     /**
      * Use as JSON field.
      */