From 1b14d2b70200ce5229762f02a95b5c36db35967e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Mon, 25 Sep 2023 19:40:30 -0400
Subject: [PATCH] feat(components): create tinymce wrapper component

configs have also been created
---
 components/baseEditor.vue  |  36 ++++++++++
 lib/client/editorConfig.ts | 136 +++++++++++++++++++++++++++++++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 components/baseEditor.vue
 create mode 100644 lib/client/editorConfig.ts

diff --git a/components/baseEditor.vue b/components/baseEditor.vue
new file mode 100644
index 0000000..0b0824f
--- /dev/null
+++ b/components/baseEditor.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+	import TinymceEditor from "@tinymce/tinymce-vue"
+	import {useDark} from "@vueuse/core"
+import { NamePath } from "ant-design-vue/es/form/interface";
+import {Field as VeeField} from "vee-validate"
+	import tinymce from "tinymce"
+	const props = defineProps<{
+		name: string;
+		init: any;
+		label: string;
+		val?: string;
+		width?: number;
+		dark?: boolean;
+		wrapCol?: any;
+	}>()
+	onMounted(() => {
+		// if(typeof navigator != undefined) {
+		// 	tinymce.init({...props.init, selector: `textarea[${props.name}]`})
+		// }
+		
+	})
+	// const isDark = useDark()
+	// console.log("darky")
+</script>
+<template>
+	<ClientOnly>
+		<vee-field :name="props.name" v-slot="{errorMessage, field, value}" :value="val">
+			<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :name="props.name" :label="props.label" :value="val">
+				<tinymce-editor v-bind="field" width="100%" cloud-channel="6-dev" api-key="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc" 
+				:init="{...props.init, 
+					skin: props.dark ? 'oxide-dark' : 'oxide', 
+					content_css: props.dark ? 'dark' : 'default'}"/>
+			</a-form-item>
+		</vee-field>
+	</ClientOnly>
+</template>
\ No newline at end of file
diff --git a/lib/client/editorConfig.ts b/lib/client/editorConfig.ts
new file mode 100644
index 0000000..0edefcb
--- /dev/null
+++ b/lib/client/editorConfig.ts
@@ -0,0 +1,136 @@
+export const fancy =  {
+	branding: false,
+	selector: 'textarea#txt',
+	menubar: false,
+	elementpath: false,
+	formats: {
+		bold: {
+			inline: 'b'
+		},
+		italic: {
+			inline: 'i'
+		},
+		underline: {
+			inline: 'u'
+		}
+	},
+	schema: 'html5',
+	custom_colors: true,
+	style_formats: [
+		// { title: 'Image formats' },
+		{
+			title: 'Blocks',
+			items: [
+				{ title: 'p', block: 'p' },
+				{ title: 'div', block: 'div' },
+				{ title: 'pre', block: 'pre' }
+			]
+		},
+		{
+			title: "Image",
+			items: [
+				{ title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
+				{ title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
+				{ title: 'Rounded corners', styles: { 'border-radius': '0.7em'} }
+			]
+		},
+		{ title: 'Code/Monospace', selector: "p,div,h1,h2,h3,h4,h5,h6", classes: [ 'font-mono' ] },
+	],
+	toolbar_groups: {
+		alignment: {
+			icon: 'align-left',
+			tooltip: "Alignment",
+			items: "alignleft aligncenter alignright | alignjustify"
+		},
+		heading: {
+			icon: 'format',
+			tooltip: 'Header',
+			items: 'h1 h2 h3 h4 h5 h6'
+		}
+	},
+	toolbar: "undo redo | paste | bold italic underline | hr image link | forecolor styles | heading alignment | code",
+	contextmenu: 'bold italic underline | hr | link | image | paste',
+	external_plugins: {
+		"mentions": "/plugins/mentions/plugin.min.js"
+	},
+	plugins:
+		`advlist autolink lists link image charmap preview anchor searchreplace visualblocks advcode fullscreen insertdatetime media table help wordcount save mentions`.split(" ")
+}
+export const comment = {
+	branding: false,
+	height: 200,
+	menubar: false,
+	elementpath: false,
+	formats: {
+		bold: {
+			inline: 'b'
+		},
+		italic: {
+			inline: 'i'
+		},
+		underline: {
+			inline: 'u'
+		}
+	},
+	external_plugins: {
+		"mentions": "/plugins/mentions/plugin.min.js"
+	},
+	schema: 'html5',
+	plugins:
+		`advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help save mentions`.split(" "),
+	toolbar: 'bold italic underline | link',
+	contextmenu: 'bold italic underline | paste | link'
+}
+
+export const story = {
+	branding: false,
+	selector: 'textarea#txt',
+	height: 500,
+	menubar: false,
+	elementpath: false,
+		formats: {
+			bold: {
+				inline: 'b'
+			},
+			italic: {
+				inline: 'i'
+			},
+			underline: {
+				inline: 'u'
+			}
+	},
+	content_css: ["/test.css", "/quickfix.css"],
+	schema: 'html5',
+		plugins:
+			`advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table advcode help wordcount save`.split(" "),
+		toolbar: 'undo redo | paste |' +
+		'bold italic underline | hr | alignleft aligncenter ' +
+		'alignright alignjustify | ' +
+		'| code',
+	contextmenu: 'bold italic underline | hr | paste | link'
+}
+export const bare = {
+	branding: false,
+	height: 200,
+	menubar: false,
+	elementpath: false,
+	formats: {
+		bold: {
+			inline: 'b'
+		},
+		italic: {
+			inline: 'i'
+		},
+		underline: {
+			inline: 'u'
+		}
+	},
+	schema: 'html5',
+	external_plugins: {
+		"mentions": "/plugins/mentions/plugin.min.js"
+	},
+	plugins:
+		`advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table advcode help save mentions`.split(" "),
+	toolbar: 'bold italic underline | hr link',
+	contextmenu: 'bold italic underline | paste | hr link'
+}
\ No newline at end of file