@mixd-id/web-scaffold 0.1.230406001

package/src/components/Gmaps.vue

@@ -0,0 +1,227 @@
+<template>
+	<div :class="$style.comp">
+		<div v-if="apiKey" ref="map" class="flex-1"></div>
+		<div v-else class="flex-1 flex items-center justify-center text-text-400">{{ $t('Google maps api required') }}</div>
+	</div>
+</template>
+
+<script>
+
+import { Loader } from '@googlemaps/js-api-loader';
+
+export default{
+
+	props: {
+		data: Array,
+		config: Object,
+		apiKey: String
+	},
+
+	data(){
+		return {
+			map: null
+		}
+	},
+
+	mounted() {
+		this.load()
+	},
+
+	methods: {
+
+		load(){
+			if(!this.apiKey) return
+
+			if(!Array.isArray(this.data) || this.data.length < 1)
+				return
+
+			const loader = new Loader({
+				apiKey: this.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+			})
+
+			loader.load()
+				.then(async () => {
+
+					const { Map } = await google.maps.importLibrary([ "maps" ]);
+					await google.maps.importLibrary("visualization", ["HeatmapLayer"]);
+
+					var center = new google.maps.LatLng(
+						this.config.center ? this.config.center[0] : -6.2088,
+						this.config.center ? this.config.center[1] : 106.8456);
+
+					this.map = new Map(this.$refs.map, {
+						center: center,
+						zoom: this.config.zoom ?? 7,
+						mapTypeId: 'roadmap',
+						streetViewControl: false,
+						keyboardShortcuts: false,
+						styles: [
+							{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+							{
+								featureType: "administrative.locality",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "geometry",
+								stylers: [{ color: "#263c3f" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#6b9a76" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry",
+								stylers: [{ color: "#38414e" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#212a37" }],
+							},
+							{
+								featureType: "road",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#9ca5b3" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry",
+								stylers: [{ color: "#746855" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#1f2835" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#f3d19c" }],
+							},
+							{
+								featureType: "transit",
+								elementType: "geometry",
+								stylers: [{ color: "#2f3948" }],
+							},
+							{
+								featureType: "transit.station",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "water",
+								elementType: "geometry",
+								stylers: [{ color: "#17263c" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#515c6d" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.stroke",
+								stylers: [{ color: "#17263c" }],
+							},
+						]
+					});
+
+					google.maps.event.addListener(this.map, 'zoom_changed', () => {
+						this.config.zoom = this.map.getZoom();
+					});
+
+					google.maps.event.addListener(this.map, 'center_changed', () => {
+						this.config.center = [
+							this.map.getCenter().lat(),
+							this.map.getCenter().lng()
+						]
+					});
+
+					var heatMapData = [
+						/*{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
+						new google.maps.LatLng(37.782, -122.445),
+						{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
+						{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
+						{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
+						new google.maps.LatLng(37.782, -122.437),
+						{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
+
+						{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
+						{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
+						new google.maps.LatLng(37.785, -122.443),
+						{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
+						new google.maps.LatLng(37.785, -122.439),
+						{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
+						{location: new google.maps.LatLng(37.785, -122.435), weight: 3}*/
+					];
+
+					this.data.forEach((item) => {
+						if(item[0] && item[1] && item[2]){
+							heatMapData.push({
+								location: new google.maps.LatLng(item[0], item[1]),
+								weight: item[2]
+							})
+						}
+					})
+
+					var heatmap = new google.maps.visualization.HeatmapLayer({
+						data: heatMapData,
+						dissipating: true
+					});
+					heatmap.set('radius', parseInt(this.config.mapRadius ?? 12))
+					heatmap.setMap(this.map);
+
+					const gradient = [
+						"rgba(0, 255, 255, 0)",
+						"rgba(0, 255, 255, 1)",
+						"rgba(0, 191, 255, 1)",
+						"rgba(0, 127, 255, 1)",
+						"rgba(0, 63, 255, 1)",
+						"rgba(0, 0, 255, 1)",
+						"rgba(0, 0, 223, 1)",
+						"rgba(0, 0, 191, 1)",
+						"rgba(0, 0, 159, 1)",
+						"rgba(0, 0, 127, 1)",
+						"rgba(63, 0, 91, 1)",
+						"rgba(127, 0, 63, 1)",
+						"rgba(191, 0, 31, 1)",
+						"rgba(255, 0, 0, 1)",
+					];
+					heatmap.set("gradient", gradient);
+
+					//console.log('Gmap, data count:', this.data.length)
+				});
+		}
+
+	},
+
+	watch: {
+
+		data(){
+			this.load()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 flex flex-col;
+}
+
+</style>

package/src/components/Grid.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="gridClass">
+    <component v-for="(item, index) in items" :key="index" :is="item.type" :="item"></component>
+  </div>
+</template>
+
+<script>
+
+const gridCols = [
+  "", "", "grid-cols-2", "grid-cols-3", "grid-cols-4"
+]
+
+export default{
+  name: "Grid",
+  props:[ "type", "items", "columns" ],
+  computed:{
+    gridClass(){
+      return [
+        "grid",
+        gridCols[this.columns]
+      ]
+        .filter(function(item){ return item.length > 0 })
+        .join(' ')
+    }
+  },
+  mounted(){
+  }
+}
+</script>

package/src/components/GridColumn.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="className">
+    <component v-for="(item, index) in items" :key="index" :is="item.type" :="item"></component>
+  </div>
+</template>
+
+<script>
+
+const rowSpans = [
+  "", "", "row-span-2", "row-span-3", "row-span-4"
+]
+
+export default{
+  name: "GridColumn",
+  props:[ "id", "type", "items", "colSpan", "rowSpan" ],
+  computed:{
+    className(){
+      return [
+        "border-[1px]",
+        "border-gray-300",
+        typeof this.rowSpan !== 'undefined' ? rowSpans[this.rowSpan] : ''
+      ]
+          .filter(function(item){ return item.length > 0 })
+          .join(' ')
+    }
+  },
+  mounted(){
+  }
+}
+
+</script>

package/src/components/HTMLEditor.vue

@@ -0,0 +1,396 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="flex flex-row">
+			<button class="p-3" type="button" @click="format('bold')">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
+			</button>
+			<button class="p-3" type="button" @click="format('italic')">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"/></svg>
+			</button>
+			<button class="p-3" type="button" @click="format('underline')">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>
+			</button>
+			<button class="p-3" type="button" ref="alignBtn" @click="$refs.alignContext.open($refs.alignBtn)">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
+			</button>
+			<button class="p-3" type="button" ref="headingsBtn" @click="$refs.headingContext.open($refs.headingsBtn)">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 64C0 46.3 14.3 32 32 32H80h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H112V208H336V96H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h48 48c17.7 0 32 14.3 32 32s-14.3 32-32 32H400V240 416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H368 320c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112V416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V240 96H32C14.3 96 0 81.7 0 64z"/></svg>
+			</button>
+			<button class="p-3" type="button" ref="listBtn" @click="$refs.listContext.open($refs.listBtn)">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
+			</button>
+			<button class="p-3" type="button" @click="createImage">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>
+			</button>
+			<button class="p-3" type="button" @click="createLink">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
+			</button>
+		</div>
+
+		<ContextMenu ref="headingContext">
+		  <div class="flex flex-col">
+				<button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'h1')">
+					Heading 1
+				</button>
+				<button class="p-3 text-3xl text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'h2')">
+					Heading 2
+				</button>
+				<button class="p-3 text-2xl text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'h3')">
+					Heading 3
+				</button>
+				<button class="p-3 text-xl text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'h4')">
+					Heading 4
+				</button>
+				<button class="p-3 text-lg text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'h5')">
+					Heading 5
+				</button>
+				<button class="p-3 text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'p')">
+					Normal
+				</button>
+		  </div>
+		</ContextMenu>
+
+		<ContextMenu ref="alignContext">
+			<div class="flex flex-col">
+				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('justifyleft')">
+					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
+					Left
+				</button>
+				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('justifycenter')">
+					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 64c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32z"/></svg>
+					Center
+				</button>
+				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('justifyright')">
+					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 64c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
+					Right
+				</button>
+				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('justifyFull')">
+					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z"/></svg>
+					Justify
+				</button>
+			</div>
+		</ContextMenu>
+
+		<ContextMenu ref="listContext">
+			<div class="flex flex-col">
+				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('insertorderedlist')">
+					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H40c-13.3 0-24-10.7-24-24s10.7-24 24-24H56V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H32c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
+					Number List
+				</button>
+				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('insertunorderedlist')">
+					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
+					Bullet List
+				</button>
+			</div>
+		</ContextMenu>
+		
+		<Modal ref="imageModal" width="360" height="420" dismissable="true">
+		  <template v-slot:head>
+		    <div class="relative p-5">
+		      <h3>Add Image</h3>
+		      <div class="absolute top-0 right-0 p-2">
+		        <button type="button" class="p-2" @click="$refs.imageModal.close()">
+		          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+		            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+		          </svg>
+		        </button>
+		      </div>
+		    </div>
+		  </template>
+		  <template v-slot:foot>
+		    <div class="p-5">
+					<Button class="w-full" :disabled="!imageCanSave" @click="onImageAdd">Add Image</Button>
+		    </div>
+		  </template>
+		  <div class="flex-1 flex flex-col gap-5 p-5">
+				<div>
+					<Image class="min-h-[100px] bg-base-300 rounded-xl" ref="image" :src="newImage.file" editable="true"
+						 @click="$refs.image.edit()" @change="onImageChanged">
+					  <template #empty="{ instance }">
+							<div class="absolute right-0 top-0 bottom-0 left-0 flex items-center justify-center">
+								Click to Add Image...
+							</div>
+						</template>
+					</Image>
+				</div>
+				<div class="grid grid-cols-2 gap-5">
+					<div>
+						<label>Width</label>
+						<Textbox class="mt-1" v-model="newImage.width" />
+					</div>
+					<div>
+						<label>Height</label>
+						<Textbox class="mt-1" v-model="newImage.height" />
+					</div>
+					<div>
+						<label>Max Width</label>
+						<Textbox class="mt-1" v-model="newImage.maxWidth" />
+					</div>
+					<div>
+						<label>Max Height</label>
+						<Textbox class="mt-1" v-model="newImage.maxHeight" />
+					</div>
+				</div>
+		  </div>
+		</Modal>
+
+		<Modal ref="linkModal" width="360" height="360" dismissable="true">
+			<template v-slot:head>
+				<div class="relative p-5">
+					<h3>Add Link</h3>
+					<div class="absolute top-0 right-0 p-2">
+						<button type="button" class="p-2" @click="$refs.linkModal.close()">
+							<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+								<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+							</svg>
+						</button>
+					</div>
+				</div>
+			</template>
+			<template v-slot:foot>
+				<div class="p-5">
+					<Button class="w-full" :disabled="!linkCanSave" @click="addLink">Add Link</Button>
+				</div>
+			</template>
+			<div class="flex-1 flex flex-col gap-5 p-5">
+				<div>
+					<label>Href</label>
+					<Textarea class="w-full mt-1" v-model="newLink.href" rows="2"/>
+				</div>
+				<div>
+					<label>Text</label>
+					<Textbox class="w-full mt-1" v-model="newLink.text" />
+				</div>
+				<div>
+					<label>Target</label>
+					<Dropdown class="w-full mt-1" v-model="newLink.target">
+						<option value="">_self</option>
+						<option value="_blank">_blank</option>
+						<option value="_parent">_parent</option>
+						<option value="_top">_top</option>
+					</Dropdown>
+				</div>
+			</div>
+		</Modal>
+
+		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste"
+				@input="onInput"
+				@blur="onBlur">
+		</article>
+
+	</div>
+</template>
+
+<script>
+
+import * as Vue from "vue/dist/vue.esm-bundler";
+import {restoreSelection, saveSelection} from "../utils/selection";
+import {downsizeImage} from "../utils/helpers.mjs";
+import axios from "axios";
+
+export default{
+
+	props:{
+		modelValue: String,
+		uploadImage: String
+	},
+
+	computed: {
+
+		linkCanSave(){
+			return this.newLink.href && this.newLink.text
+		},
+
+		imageCanSave(){
+			return true
+		}
+
+	},
+
+	data(){
+		return {
+			html: '',
+			newLink: null,
+			newImage: null,
+			components: null,
+			selection: null
+		}
+	},
+
+	mounted() {
+		this.html = this.modelValue
+	},
+
+	methods: {
+
+		onInput(e){
+			this.updateModelValue()
+		},
+
+		onBlur(){
+			this.$emit('change')
+		},
+
+		format(type, value){
+
+			switch(type){
+
+				case 'bold':
+				case 'italic':
+				default:
+					document.execCommand(type, false, value);
+					this.$emit('change')
+					break
+
+			}
+
+		},
+
+		createLink(){
+
+			const { text = '' } = saveSelection(this.$refs.article)
+
+			this.newLink = {
+				href: 'https://',
+				text,
+				target: ''
+			}
+			this.$refs.linkModal.open()
+		},
+
+		addLink(){
+
+			restoreSelection()
+
+			document.execCommand("insertHTML", false,
+				"<a style='font-size:inherit;font-family:inherit;background-color:inherit' " +
+				"href=\"" + this.newLink.href + "\" " +
+				"target=\"" + this.newLink.target + "\">" +
+				this.newLink.text +
+				"</a>");
+
+			this.newLink = null
+			this.$refs.linkModal.close()
+		},
+
+		createImage(){
+
+			saveSelection(this.$refs.article)
+
+			this.newImage = {
+				width: "",
+				height: ""
+			}
+			this.$refs.imageModal.open()
+		},
+
+		onImageChanged(base64, file){
+			this.newImage.base64 = base64
+			this.newImage.file = file
+		},
+
+		onImageAdd(){
+			if(this.uploadImage){
+				this.saveImage()
+			}
+			else{
+				this.addImage()
+			}
+		},
+
+		async addImage(){
+
+			restoreSelection()
+
+			const props = {}
+			if(this.newImage.width)
+				props.width = this.newImage.width
+			if(this.newImage.height)
+				props.height = this.newImage.height
+
+			let propHtml = []
+			for(let key in props){
+				propHtml.push(`${key}='${props[key]}'`)
+			}
+
+			document.execCommand("insertHTML", false,
+				"<img src=\"" + this.newImage.base64 + "\" " + propHtml.join(' ') + "/>");
+
+			this.$refs.imageModal.close()
+		},
+
+		async saveImage(){
+
+			const blob = await downsizeImage(this.newImage.file, this.newImage.width ?? 600)
+
+			const data = new FormData()
+			data.append('image', blob)
+
+			const res = await axios.post(this.uploadImage,
+				data,
+				{
+					headers: {
+						"Content-Type": "multipart/form-data",
+					},
+				}
+			)
+
+			const { url } = res.data
+
+			restoreSelection()
+
+			const props = {}
+			if(this.newImage.width)
+				props.width = this.newImage.width
+			if(this.newImage.height)
+				props.height = this.newImage.height
+
+			let propHtml = []
+			for(let key in props){
+				propHtml.push(`${key}='${props[key]}'`)
+			}
+
+			document.execCommand("insertHTML", false,
+				"<img src=\"" + url + "\" " + propHtml.join(' ') + "/>");
+
+			this.$refs.imageModal.close()
+		},
+
+		onPaste(e){
+			e.preventDefault()
+
+			let text = (e.clipboardData || window.clipboardData).getData("text");
+			const el = document.createElement('div')
+			el.innerHTML = text
+			text = el.innerText
+
+			document.execCommand("insertText", false, text);
+
+			this.updateModelValue()
+		},
+
+		updateModelValue(){
+
+			let html = this.$refs.article.innerHTML
+			html = html.replaceAll("<a ", "<Ahref ").replaceAll("</a>", "</Ahref>")
+
+			this.$emit('update:modelValue', html)
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+.comp article {
+	@apply min-h-[var(--h-cp)] w-full outline-none p-2;
+}
+
+</style>