@bagelink/vue 0.0.978 → 0.0.982

package/dist/plugins/bagel.d.ts

@@ -8,7 +8,7 @@ export interface BagelOptions {
     availableLangs?: string[];
     defaultLang?: string;
     language?: string;
-    host: string;
+    host?: string;
     onError?: (err: Error) => void;
     i18nT?: (key: string) => string;
 }

package/dist/plugins/bagel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQrC,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,KAAK,CAAC,CAAA;AACvE,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;AAEzF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,UAT+C,MAAM,KAAK,MAAM,CAcvF;AAED,MAAM,WAAW,YAAY;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IAEZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAE9B,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AACD,eAAO,MAAM,QAAQ,EAAE,MAyBtB,CAAA"}
+{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQrC,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,KAAK,CAAC,CAAA;AACvE,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;AAEzF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,UAT+C,MAAM,KAAK,MAAM,CAcvF;AAED,MAAM,WAAW,YAAY;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAE9B,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AACD,eAAO,MAAM,QAAQ,EAAE,MAyBtB,CAAA"}

package/dist/style.css

@@ -1041,281 +1041,70 @@ data[data-v-6c27f163] {
   border-radius: 5px;
 }
 
-/* Basic editor styles */
-.tiptap > * + * {
-	margin-top: 0.75em;
-}
-.tiptap ul,
-.tiptap ol {
-	padding: 0 1rem;
-}
-.tiptap h1,
-.tiptap h2 {
-	line-height: 1;
-}
-.tiptap h3,
-.tiptap h4,
-.tiptap h5,
-.tiptap h6 {
-	line-height: 1.1;
-}
-.tiptap pre {
-	background: #0d0d0d;
-	color: var(--bgl-light-text);
-	font-family: 'JetBrainsMono', monospace;
-	padding: 0.75rem 1rem;
-	border-radius: 0.5rem;
-	margin: 0;
-}
-.tiptap pre code {
-	color: inherit;
-	padding: 0;
-	background: none;
-	font-size: 0.8rem;
-}
-.tiptap img {
-	max-width: 100%;
-	height: auto;
-}
-.tiptap blockquote {
-	padding-inline-start: 0.5rem;
-	border-inline-start: 2px solid var(--border-color);
-	margin: 0.5rem
-}
-.tiptap hr {
-	border: none;
-	border-top: 2px solid var(--border-color);
-	margin: 1rem 0;
-}
-.tiptap {
-	min-height: 200px;
-	background: var(--input-bg);
-	overflow: auto;
-	max-height: 500px;
-	padding: 0.7rem;
-	color: var(--input-color);
-	border-radius: var(--input-border-radius);
-	font-size: var(--input-font-size);
-	line-height: 1.5;
-}
-.tiptap.ProseMirror-focused {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
-}
-.RichText {
-	margin-bottom: 0.5rem;
-}
-.RichText-tools {
-	background: var(--input-bg);
-	margin-bottom: 0.125rem;
-	border-radius: var(--input-border-radius);
-}
-.tiptap {
-table {
-		border-collapse: collapse;
-		table-layout: fixed;
-		width: 100%;
-		margin: 0;
-		overflow: hidden;
-td,
-		th {
-			min-width: 1em;
-			border: 2px solid var(--border-color);
-			padding: 3px 5px;
-			vertical-align: top;
-			box-sizing: border-box;
-			position: relative;
-> * {
-				margin-bottom: 0;
-				margin-top: 0;
-}
-}
-th {
-			font-weight: bold;
-			text-align: start;
-			background-color: var(--bgl-gray-80);
-}
-.selectedCell:after {
-			z-index: 2;
-			position: absolute;
-			content: '';
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			background: var(--bgl-gray-20);
-			pointer-events: none;
-}
-.selectedCell p::selection{
-			color: var(--bgl-popup-text)
-}
-.column-resize-handle {
-			position: absolute;
-			inset-inline-start: -2px;
-			top: 0;
-			bottom: -2px;
-			width: 4px;
-			background-color: #adf;
-			pointer-events: none;
-}
-p {
-			margin: 0;
-}
-}
-}
-.tableWrapper {
-	padding: 1rem 0;
-	overflow-x: auto;
-}
-.resize-cursor {
-	cursor: ew-resize;
-	cursor: col-resize;
-}
-.RichText-tools [disabled]{
-	color: var(--bgl-popup-text) !important;
-	opacity: 0.3;
-}
-.RichText iframe{
-	width: 100%;
-	max-width: 700px;
-	margin: 0 auto;
-	height: auto;
-	display: block;
-	border-radius: var(--input-border-radius);
-	border: none;
-	aspect-ratio: 16/9;
-}
-.RichText img{
-	width: 100%;
-	max-width: 700px;
-	margin: 0 auto;
-	height: auto;
-	display: block;
-	border-radius: var(--input-border-radius);
+.toolbar[data-v-0b9e3ede] .active {
+  background: var(--primary-color);
+  color: white;
 }
 
-@font-face {
-    font-family: 'FontWithASyntaxHighlighter';
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/FontWithASyntaxHighlighter-Regular.woff2) format('woff2')
-}
-@font-palette-values --myCustomPalette {
-  font-family: 'FontWithASyntaxHighlighter';
-  override-colors:
-    0 #6191c2, /* keywords, {} */
-    1 #75975d, /* comments */
-    2 yellow, /* literals */
-    3 #a3c19a, /* numbers */
-    4 lightblue, /* functions, [] */
-    5 orange, /* js others */
-    6 black, /* not in use */
-    7 #bc8abd, /* inside quotes, css properties, few chars */
-    8 #818181 /* few chars */
-  ;
-}
-.preview-area[data-v-cca783dc]{
-	font-family: "FontWithASyntaxHighlighter", monospace;
-  	font-palette: --myCustomPalette;
-	background: var(--bgl-code-bg);
-	color: var(--bgl-code-color)
-}
-.rich-text-editor[data-v-cca783dc] {
-	background: var(--input-bg);
-	margin-bottom: 0.5rem;
-	width: 100%;
+.rich-text-editor[data-v-a9177fad] {
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
 }
-.editableContent[data-v-cca783dc]{
-	min-height: 100%;
-	white-space: pre-wrap;
-	outline: none;
-}
-.content-area[data-v-cca783dc]{
-	background: var(--bgl-richtext-color);
+.editor-container[data-v-a9177fad] {
+  display: flex;
+  gap: 1rem;
 }
-.content-area[data-v-cca783dc], .preview-area[data-v-cca783dc]{
-	min-height: 200px;
+.content-area[data-v-a9177fad], .preview-area[data-v-a9177fad] {
+  flex: 1;
+  min-height: 200px;
+  background: var(--bgl-richtext-color);
 }
-.fullscreen-mode[data-v-cca783dc] {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-    background: var(--input-bg);
-    padding: 2rem;
-    overflow: auto;
-	border-radius: 0;
+.split-view .content-area[data-v-a9177fad],
+.split-view .preview-area[data-v-a9177fad] {
+  width: 50%;
 }
-.fullscreen-mode .content-area[data-v-cca783dc]{
-	height: calc(100vh - 5rem);
-	padding: 4rem !important;
-	max-width: 900px;
-	margin-inline: auto ;
-	overflow-y: auto;
+.editableContent[data-v-a9177fad] {
+  min-height: 100%;
+  white-space: pre-wrap;
+  outline: none;
 }
-.fullscreen-mode .toolbar[data-v-cca783dc]{
-	max-width: 900px;
-	margin-inline: auto ;
-	/* border-bottom: 1px solid var(--border-color); */
-	/* margin-bottom: 2rem; */
+.html-editor[data-v-a9177fad] {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  font-family: monospace;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
 }
-
-/* [contenteditable='true'] {
-	  white-space: pre-wrap;
-	  word-wrap: break-word;
-	outline: none;
-	height: 100%;
-} */
-/*
-
-.editor-container {
-  display: flex;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  overflow: hidden;
+.preview-area[data-v-a9177fad] {
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-x: auto;
 }
-
-.content-area,
-.preview-area {
-  flex: 1;
-  min-height: 300px;
-  padding: 10px;
+.preview-area code[data-v-a9177fad] {
+  display: block;
+  padding: 1rem;
+}
+.fullscreen-mode[data-v-a9177fad] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  padding: 2rem;
+}
+.fullscreen-mode .editor-container[data-v-a9177fad] {
+  height: calc(100vh - 8rem);
+}
+.fullscreen-mode .content-area[data-v-a9177fad],
+.fullscreen-mode .preview-area[data-v-a9177fad] {
+  height: 100%;
   overflow-y: auto;
 }
-
-.content-area:focus {
-  outline: none;
-}
-
-.split-view .content-area,
-.split-view .preview-area {
-  width: 50%;
-}
-
-.preview-area {
-  background-color: #f9f9f9;
-  border-left: 1px solid #ccc;
-} */
-
-/* @media (max-width: 768px) {
-  .split-view {
-    flex-direction: column;
-  }
-
-  .split-view .content-area,
-  .split-view .preview-area {
-    width: 100%;
-  }
-
-  .preview-area {
-    border-left: none;
-    border-top: 1px solid #ccc;
-  }
-} */
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
 .selectinput[data-v-982f5078] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.978",
+  "version": "0.0.982",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -106,15 +106,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@tiptap/extension-image": "^2.10.3",
-    "@tiptap/extension-table": "^2.10.3",
-    "@tiptap/extension-table-cell": "^2.10.3",
-    "@tiptap/extension-table-header": "^2.10.3",
-    "@tiptap/extension-table-row": "^2.10.3",
-    "@tiptap/extension-youtube": "^2.10.3",
-    "@tiptap/pm": "^2.10.3",
-    "@tiptap/starter-kit": "^2.10.3",
-    "@tiptap/vue-3": "^2.10.3",
     "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.9",

package/src/components/form/inputs/{RichText2 → RichText}/Toolbar.vue

@@ -53,28 +53,35 @@ const toolbarOptions: toolbarOption[] = [
 </script>
 
 <template>
-	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-		<template v-for="(action, index) in toolbarOptions" :key="index">
-			<Btn
-				v-if="action.name !== 'separator' && config.includes(action.name)"
-				v-tooltip="action.label"
-				:icon="action.icon"
-				thin
-				flat
-				:aria-label="action.name"
-				:class="action.class"
-				class="radius-05"
-				@click="emit('action', action.name, action.label)"
-			/>
-			<span
-				v-else-if="action.name === 'separator'"
-				:key="`separator-${index}`"
-				class=" opacity-2 mb-025"
-			>|</span>
-		</template>
-	</div>
+  <div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
+    <template v-for="(action, index) in toolbarOptions" :key="index">
+      <Btn
+        v-if="action.name !== 'separator' && config.includes(action.name)"
+        v-tooltip="action.label"
+        :icon="action.icon"
+        thin
+        flat
+        :aria-label="action.name"
+        :class="[action.class, { active: selectedStyles?.has(action.name) }]"
+        class="radius-05"
+        @click="emit('action', action.name, action.label)"
+      />
+      <span
+        v-else-if="action.name === 'separator'"
+        :key="`separator-${index}`"
+        class="opacity-2 mb-025"
+      >|</span>
+    </template>
+  </div>
 </template>
 
+<style scoped>
+.toolbar :deep(.active) {
+  background: var(--primary-color);
+  color: white;
+}
+</style>
+
 <style scoped>
 
 </style>

package/src/components/form/inputs/RichText/index.vue

@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import type { ToolbarConfig } from './richtext-types'
+import { useModal } from '@bagelink/vue'
+import { onMounted, watch, ref } from 'vue'
+import { useFormatting } from './formatting'
+import Toolbar from './Toolbar.vue'
+
+const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
+const emit = defineEmits(['update:modelValue'])
+
+const modal = useModal()
+const { applyFormatting, clearFormatting } = useFormatting(modal)
+
+const editableContent = ref<HTMLElement>()
+const defaultConfig: ToolbarConfig = [
+	'formatBlock',
+	'bold',
+	'italic',
+	'underline',
+	'fontSize',
+	'fontFamily',
+	'textColor',
+	'backgroundColor',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'alignJustify',
+	'orderedList',
+	'unorderedList',
+	'indent',
+	'outdent',
+	'link',
+	'image',
+	'table',
+	'splitView',
+	'clear',
+	'fullScreen'
+]
+
+const config = ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
+const contentHtml = ref(props.modelValue)
+const isCodeView = ref(false)
+const isSplitView = ref(false)
+const selectedStyles = ref(new Set<string>())
+
+function updateContent(source: 'html' | 'editor' = 'editor') {
+	if (source === 'editor' && !isCodeView.value) {
+		contentHtml.value = editableContent.value?.innerHTML ?? ''
+	}
+	emit('update:modelValue', contentHtml.value)
+}
+
+function handleHtmlInput(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	contentHtml.value = target.value
+	if (editableContent.value) {
+		editableContent.value.innerHTML = target.value
+	}
+	updateContent('html')
+}
+
+function updateToolbarHighlight() {
+	selectedStyles.value.clear()
+	const selection = window.getSelection()
+	if (!selection?.rangeCount) return
+
+	const range = selection.getRangeAt(0)
+	const element = range.commonAncestorContainer as HTMLElement
+	const parent = element.nodeType === 3 ? element.parentElement : element
+
+	if (!parent) return
+
+	if (parent.style.fontWeight === 'bold') selectedStyles.value.add('bold')
+	if (parent.style.fontStyle === 'italic') selectedStyles.value.add('italic')
+	if (parent.style.textDecoration === 'underline') selectedStyles.value.add('underline')
+}
+
+function handleToolbarAction(action: string, value?: string) {
+	if (!editableContent.value) return
+
+	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action)) {
+		value = action.replace('align', '').toLowerCase()
+	}
+
+	switch (action) {
+		case 'splitView':
+			isSplitView.value = !isSplitView.value
+			break
+		case 'codeView':
+			isCodeView.value = !isCodeView.value
+			break
+		case 'fullScreen':
+			toggleFullScreen()
+			break
+		case 'clear':
+			clearFormatting()
+			break
+		default:
+			applyFormatting(action, value)
+	}
+	updateContent()
+}
+
+function toggleFullScreen() {
+	const editor = document.querySelector('.rich-text-editor')
+	editor?.classList.toggle('fullscreen-mode')
+}
+
+watch(() => props.modelValue, (newValue) => {
+	if (newValue !== contentHtml.value) {
+		contentHtml.value = newValue
+		if (editableContent.value) {
+			editableContent.value.innerHTML = newValue
+		}
+	}
+})
+
+onMounted(() => {
+	if (editableContent.value) {
+		editableContent.value.innerHTML = contentHtml.value
+	}
+	document.addEventListener('selectionchange', updateToolbarHighlight)
+})
+
+// Keyboard shortcuts
+function handleKeyDown(event: KeyboardEvent) {
+	if (event.ctrlKey || event.metaKey) {
+		switch (event.key.toLowerCase()) {
+			case 'b':
+				event.preventDefault()
+				handleToolbarAction('bold')
+				break
+			case 'i':
+				event.preventDefault()
+				handleToolbarAction('italic')
+				break
+			case 'u':
+				event.preventDefault()
+				handleToolbarAction('underline')
+				break
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="rich-text-editor rounded pt-05 px-05 pb-1">
+		<Toolbar
+			:config="config"
+			:selected-styles="selectedStyles"
+			@action="handleToolbarAction"
+		/>
+		<div class="editor-container" :class="{ 'split-view': isSplitView }">
+			<div class="content-area radius-05 p-1">
+				<textarea
+					v-if="isCodeView"
+					v-model="contentHtml"
+					class="html-editor"
+					@input="handleHtmlInput"
+				/>
+				<div
+					v-else
+					ref="editableContent"
+					contenteditable="true"
+					class="editableContent"
+					role="textbox"
+					aria-multiline="true"
+					tabindex="0"
+					@input="updateContent()"
+					@keydown="handleKeyDown"
+				/>
+			</div>
+			<div
+				v-if="isSplitView"
+				class="preview-area radius-05 p-1"
+			>
+				<pre><code v-text="contentHtml" /></pre>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.rich-text-editor {
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.editor-container {
+  display: flex;
+  gap: 1rem;
+}
+
+.content-area, .preview-area {
+  flex: 1;
+  min-height: 200px;
+  background: var(--bgl-richtext-color);
+}
+
+.split-view .content-area,
+.split-view .preview-area {
+  width: 50%;
+}
+
+.editableContent {
+  min-height: 100%;
+  white-space: pre-wrap;
+  outline: none;
+}
+
+.html-editor {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  font-family: monospace;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+}
+
+.preview-area {
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+.preview-area code {
+  display: block;
+  padding: 1rem;
+}
+
+.fullscreen-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  padding: 2rem;
+}
+
+.fullscreen-mode .editor-container {
+  height: calc(100vh - 8rem);
+}
+
+.fullscreen-mode .content-area,
+.fullscreen-mode .preview-area {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

package/src/components/form/inputs/index.ts

@@ -10,8 +10,7 @@ export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RadioPillsInput } from './RadioPillsInput.vue'
 export { default as RangeInput } from './RangeInput.vue'
-export { default as RichText } from './RichText.vue'
-export { default as RichText2 } from './RichText2/index.vue'
+export { default as RichText } from './RichText/index.vue'
 export { default as SelectInput } from './SelectInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
 export { default as TableField } from './TableField.vue'