@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/src/components/Article.vue

@@ -0,0 +1,393 @@
+<template>
+	<div :class="$style.comp" :style="computedStyle">
+    <article ref="article" :class="$style.article"
+             v-html="computedHtml"
+             :contenteditable="editMode === 1"
+             @input="onInput"
+             @click="onClick"
+             @paste="onPaste"></article>
+  </div>
+</template>
+
+<script>
+
+import { componentMixin } from '../mixin/component';
+import {getSelection, restoreSelection, saveSelection} from "../utils/selection";
+import {applyDatasourceReplacer} from "../utils/helpers.mjs";
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		htmlText: String
+
+	},
+
+	methods: {
+
+		getSelection(){
+			const { text = '', href = '', target = '' } = saveSelection(this.$refs.article)
+			return {
+				text,
+				href,
+				target
+			}
+		},
+
+		addLink(link){
+
+			restoreSelection()
+
+			document.execCommand("insertHTML", false,
+				"<a style='font-size:inherit;font-family:inherit;background-color:inherit' " +
+				"href=\"" + link.href + "\" " +
+				"target=\"" + link.target + "\">" +
+				link.text +
+				"</a>");
+		},
+
+		onInput(){
+			if(this.editMode){
+				this.triggerUpdate()
+			}
+		},
+
+		onClick(){
+			if(this.editMode){
+				let { element } = getSelection(this.$refs.article)
+
+				const table = this.closest(element, 'table')
+
+				window.parent.postMessage({
+					uid: this.uid,
+					type: 'setSubAction',
+					value: table ? 'table' : ''
+				}, '*')
+			}
+		},
+
+		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);
+		},
+
+		triggerUpdate(){
+			window.parent.postMessage({
+				uid: this.uid,
+				type: 'setProp',
+				value: {
+					htmlText: this.$refs.article.innerHTML
+				}
+			}, '*')
+		},
+
+		closest(el, selector){
+			let parent = el.parentNode
+			while(parent){
+				if(parent === document) break
+
+				if(parent.matches(selector)){
+					return parent
+				}
+				parent = parent.parentNode
+			}
+		},
+
+		addTableColumn(){
+
+			let { element } = getSelection(this.$refs.article)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table){
+				const thead = table.querySelector('thead')
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				const index = Array.from(tr.children).indexOf(element)
+
+				thead.querySelectorAll('tr').forEach(tr => {
+					const th = document.createElement('th')
+					th.innerHTML = "<i>insert header...</i>"
+					tr.insertBefore(th, tr.children[index + 1])
+				})
+
+				tbody.querySelectorAll('tr').forEach(tr => {
+					const td = document.createElement('td')
+					td.innerHTML = 'Content'
+					tr.insertBefore(td, tr.children[index + 1])
+				})
+
+				this.triggerUpdate()
+			}
+		},
+
+		addTableRow(){
+
+			let { element } = getSelection(this.$refs.article)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table){
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				const index = Array.from(tbody.children).indexOf(tr)
+				if(index >= 0){
+					const nTr = document.createElement('tr')
+					for(let i = 0 ; i < tr.children.length ; i++){
+						const nTd = document.createElement('td')
+						nTd.innerHTML = 'Content'
+						nTr.appendChild(nTd)
+					}
+					tbody.insertBefore(nTr, tbody.children[index + 1])
+					this.triggerUpdate()
+				}
+			}
+		},
+
+		removeTableRow(){
+
+			let { element } = getSelection(this.$refs.article)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table){
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				if(tr){
+					tbody.removeChild(tr)
+					this.triggerUpdate()
+				}
+			}
+		},
+
+		removeTableColumn(){
+
+			let { element } = getSelection(this.$refs.article)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table) {
+				const thead = table.querySelector('thead')
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				const index = Array.from(tr.children).indexOf(element)
+
+				thead.querySelectorAll('tr').forEach(tr => {
+					tr.removeChild(tr.children[index])
+				})
+
+				tbody.querySelectorAll('tr').forEach(tr => {
+					tr.removeChild(tr.children[index])
+				})
+
+				this.triggerUpdate()
+			}
+		},
+
+		insertTable(){
+			document.execCommand('insertHTML', false,
+			`<table>
+<thead>
+	<tr>
+		<th>Header</th>
+		<th>Header</th>
+	</tr>
+</thead>
+<tbody>
+	<tr>
+		<td>Content</td>
+		<td>Content</td>
+	</tr>
+</tbody>
+</table>`)
+		}
+
+	},
+
+	mounted() {
+		if(this.editMode){
+			window.addEventListener('message', (e) => {
+
+				const { data, source } = e
+
+        if(!data || !source) return
+
+				if(data.uid === this.uid){
+
+					const { action, type, value } = data.data ?? {}
+
+					let result
+
+					switch(action){
+
+						case 'saveSelection':
+						case 'getSelection':
+							const sel = saveSelection(this.$refs.article)
+							const { text, target, href } = sel
+							result = {
+								text,
+								target,
+								href
+							}
+							break
+
+						case 'restoreSelection':
+							restoreSelection()
+							break
+
+						case 'insertLink':
+							restoreSelection()
+
+							document.execCommand("insertHTML", false,
+								"<a style='font-size:inherit;font-family:inherit;background-color:inherit' " +
+								"href=\"" + value.href + "\" " +
+								"target=\"" + value.target + "\">" +
+								value.text +
+								"</a>");
+							break
+
+						case 'removeLink':
+							const { element } = getSelection(this.$refs.article)
+
+							let a = element
+							while(a && a.tagName !== 'A'){
+								a = a.parentNode
+							}
+							if(a){
+								a.parentNode.replaceChild(element, a)
+							}
+							break
+
+						case 'insertImage':
+							const props = {}
+							if(value.width)
+								props.width = parseInt(value.width) + 'px'
+							if(value.height)
+								props.height = parseInt(value.height) + 'px'
+
+							let propHtml = []
+							for(let key in props){
+								propHtml.push(`${key}='${props[key]}'`)
+							}
+
+							document.execCommand("insertHTML", false,
+								"<img src=\"" + value.url + "\" " + propHtml.join(' ') + "/>");
+							break
+
+						case 'insertTable':
+							this.insertTable()
+							break
+
+						case 'removeFormat':
+							document.execCommand('removeFormat', false);
+							break
+
+						case 'addTableColumn':
+							this.addTableColumn()
+							break
+
+						case 'addTableRow':
+							this.addTableRow()
+							break
+
+						case 'removeTableColumn':
+							this.removeTableColumn()
+							break
+
+						case 'removeTableRow':
+							this.removeTableRow()
+							break
+
+						case 'format':
+							switch(type){
+								case 'bold':
+								case 'italic':
+								default:
+									document.execCommand(type, false, value);
+									break
+							}
+              this.$refs.article.focus()
+							break
+
+					}
+
+					source.postMessage(result, '*')
+				}
+
+			})
+		}
+	},
+
+  computed: {
+
+    computedHtml(){
+      if(this.editMode && this.editMode === 1)
+        return this.htmlText
+      return applyDatasourceReplacer(this.htmlText, this.pageData)
+    },
+
+  },
+
+  data(){
+    return {
+      data: {},
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply relative;
+}
+
+.article{
+}
+.article *{
+}
+.article[contenteditable]{
+	@apply outline-none;
+}
+
+.article a{
+	@apply text-primary underline;
+}
+
+.article ul li{
+	@apply list-disc list-inside;
+}
+.article ol li{
+	@apply list-decimal list-inside;
+}
+
+.article font[size='1']{ @apply text-xs; }
+.article font[size='2']{ @apply text-sm; }
+.article font[size='3']{ @apply text-lg; }
+.article font[size='4']{ @apply text-xl; }
+.article font[size='5']{ @apply text-2xl; }
+.article font[size='6']{ @apply text-3xl; }
+.article font[size='7']{ @apply text-4xl; }
+
+.article table{
+	@apply border-[1px] border-text-200 border-collapse w-full;
+	table-layout: fixed;
+}
+.article table th, .article table td{
+	@apply border-[1px] border-text-200 p-3 text-left;
+	@apply break-words;
+}
+
+</style>

package/src/components/Block.vue

@@ -0,0 +1,31 @@
+<template>
+	<div :class="$style.comp" :style="computedStyle">
+		<component v-for="item in items"
+							 :is="item.type"
+							 :="item" />
+	</div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props:{
+    items: Array,
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply block;
+}
+
+</style>

package/src/components/Box.vue

@@ -0,0 +1,34 @@
+<template>
+	<div :class="$style.comp">
+		<br />
+	</div>
+</template>
+
+<script>
+
+import { componentMixin } from '../mixin/component';
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		title: {
+			type: String,
+			default: 'Box'
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex items-center justify-center;
+}
+
+</style>