padcom/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .example {
      background-color: lightgray;
      margin-bottom: 10px;
    }

    .example[contenteditable] {
      min-height: 100px;
      padding: 2px;
      border: solid 2px transparent;
    }

    .example[contenteditable]:focus {
      border: dashed 2px black;
      outline: none;
    }
  </style>

  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3.2.29/dist/vue.esm-browser.prod.js"
      }
    }
  </script>
</head>
<body>
  <div id="app">
    <example-abc v-model="message" v-focus></example-abc>
    {{ message }}
  </div>

  <template id="example">
    <div class="example" tabindex="0" contenteditable="plaintext-only" @input="$emit('update:modelValue', $event.target.innerText)">
      {{ value }}
    </div>
  </template>

  <script type="module">
    import { createApp, defineComponent } from 'vue'

    const Example = defineComponent({
      template: '#example',
      props: [ 'modelValue' ],
      events: [ 'update:modelValue' ],
      data() {
        // Working with the initial value because when the div's content changes
        // the entire value is sent back over to the parent and then re-rendered
        // in this component. This messes up a lot of things like new lines,
        // copy/pasting and others.
        return {
          value: this.modelValue
        }
      },
      watch: {
        modelValue(value) {
          this.value = value
        },
      },
    })

    const app = createApp({
      data() {
        return {
          message: 'Hello, world!'
        }
      },
    })
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
    app.component('example-abc', Example)
    app.mount('#app')
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	box-sizing: border-box;
	}

	.example {
	background-color: lightgray;
	margin-bottom: 10px;
	}

	.example[contenteditable] {
	min-height: 100px;
	padding: 2px;
	border: solid 2px transparent;
	}

	.example[contenteditable]:focus {
	border: dashed 2px black;
	outline: none;
	}
	</style>

	<script type="importmap">
	{
	"imports": {
	"vue": "https://unpkg.com/vue@3.2.29/dist/vue.esm-browser.prod.js"
	}
	}
	</script>
	</head>
	<body>
	<div id="app">
	<example-abc v-model="message" v-focus></example-abc>
	{{ message }}
	</div>

	<template id="example">
	<div class="example" tabindex="0" contenteditable="plaintext-only" @input="$emit('update:modelValue', $event.target.innerText)">
	{{ value }}
	</div>
	</template>

	<script type="module">
	import { createApp, defineComponent } from 'vue'

	const Example = defineComponent({
	template: '#example',
	props: [ 'modelValue' ],
	events: [ 'update:modelValue' ],
	data() {
	// Working with the initial value because when the div's content changes
	// the entire value is sent back over to the parent and then re-rendered
	// in this component. This messes up a lot of things like new lines,
	// copy/pasting and others.
	return {
	value: this.modelValue
	}
	},
	watch: {
	modelValue(value) {
	this.value = value
	},
	},
	})

	const app = createApp({
	data() {
	return {
	message: 'Hello, world!'
	}
	},
	})
	app.directive('focus', {
	mounted(el) {
	el.focus()
	}
	})
	app.component('example-abc', Example)
	app.mount('#app')
	</script>
	</body>
	</html>