Work on an interactive example editor

docs/package.json

@@ -10,6 +10,7 @@
   "private": true,
   "devDependencies": {
     "anchor-js": "^4.1.0",
+    "codemirror": "5.30.0",
     "cross-env": "^3.2.3",
     "escape-html": "^1.0.3",
     "laravel-mix": "^1.5.1",

docs/source/_assets/js/app.js

@@ -5,6 +5,7 @@ window.anchors = new anchorJS()
 window.Vue = require('vue')
 
 Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
+Vue.component('code-sample-editor', require('./components/CodeSampleEditor.vue'))
 
 const app = new Vue({
     el: '#app'

docs/source/_assets/js/components/CodeSampleEditor.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="rounded overflow-hidden border-2 border-grey-light mb-8 bg-white">
+      <div class="border-b-2 border-grey-light p-4" :class="className" v-html="preview"></div>
+      <div class="p-4 bg-grey-lightest">
+          <div class="inline-block relative">
+                <textarea ref="editor"></textarea>
+          </div>
+      </div>
+    </div>
+</template>
+
+<script>
+const CodeMirror = require('codemirror')
+require('codemirror/lib/codemirror.css')
+require('codemirror/mode/meta')
+
+export default {
+    data () {
+        return {
+            content: ''
+        }
+    },
+    props: {
+        className: String,
+        code: String,
+        value: String,
+        events: Array,
+        unseenLines: Array,
+        marker: Function,
+        options: {
+            type: Object,
+            required: true,
+        }
+    },
+    created () {
+        if (this.options.lineNumbers === undefined) {
+            this.options.lineNumbers = true
+        }
+        if (this.options.lineWrapping === undefined) {
+            this.options.lineWrapping = true
+        }
+        if (this.options.mode === undefined) {
+            this.options.mode = 'text/html'
+        }
+
+        let theme = this.options.theme
+        let language = this.options.mode
+
+        if (typeof language === 'string') {
+            var lang = CodeMirror.findModeByMIME(language)
+            language = !lang ? lang : lang.mode
+        }
+
+        if (language && language !== 'null') {
+            require('codemirror/mode/' + language + '/' + language + '.js')
+        }
+    },
+    mounted () {
+        this.editor = CodeMirror.fromTextArea(this.$refs.editor, this.options)
+        this.editor.setValue(this.code || this.value || this.content)
+        this.editor.on('change', (instance) => {
+            this.content = instance.getValue()
+        })
+        this.$emit('ready', this.editor)
+
+        window.setTimeout(() => {
+            this.editor.refresh()
+        }, 0)
+    },
+    beforeDestroy () {
+        let element = this.editor.doc.cm.getWrapperElement()
+        if (element && element.remove) {
+            element.remove()
+        }
+    },
+    watch: {
+        options: {
+            deep: true,
+            handler (options, oldOptions) {
+                let key
+                for (key in options) {
+                    this.editor.setOption(key, options[key])
+                }
+            }
+        },
+        code (newVal, oldVal) {
+            const editorValue = this.editor.getValue()
+            if (newVal !== editorValue) {
+                let scrollInfo = this.editor.getScrollInfo()
+                this.editor.setValue(newVal)
+                this.content = newVal
+                this.editor.scrollTo(scrollInfo.left, scrollInfo.top)
+            }
+        },
+        value (newVal, oldVal) {
+            const editorValue = this.editor.getValue()
+            if (newVal !== editorValue) {
+                let scrollInfo = this.editor.getScrollInfo()
+                this.editor.setValue(newVal)
+                this.content = newVal
+                this.editor.scrollTo(scrollInfo.left, scrollInfo.top)
+            }
+        }
+    },
+    methods: {
+        refresh () {
+            this.editor.refresh()
+        }
+    },
+    computed: {
+        preview () {
+            return this.content || this.code
+        }
+    }
+}
+</script>

docs/source/_partials/code-sample.blade.php

@@ -1,3 +1,6 @@
+@if($interactive ?? false)
+<code-sample-editor :options="{ tabSize: 2 }" className="{{ $class ?? '' }}" code="{{ e($code ?? $slot) }}"></code-sample-editor>
+@else
 <div class="rounded overflow-hidden border-2 border-grey-light mb-8 bg-white">
   <div class="border-b-2 border-grey-light p-4 {{ $class ?? '' }}">
     {{ $slot }}
@@ -6,3 +9,4 @@
     <pre class="language-{{ $lang ?? 'html' }}" style="margin: 0; padding: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
   </div>
 </div>
+@endif

docs/source/docs/what-is-tailwind.blade.md

@@ -28,7 +28,7 @@ Instead, Tailwind provides highly composable, low-level *utility classes* that m
 
 Here's an example of a contact card component built with Tailwind without writing a single line of CSS:
 
-@component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
+@component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8', 'interactive' => true])
 <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
     <div class="sm:flex sm:items-center px-6 py-4">
         <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">