@bagelink/vue 0.0.992 → 0.0.996

package/dist/style.css

@@ -776,6 +776,8 @@ hue-6-2: #e6c07b
 .code-editor-wrap{
 	background: #282c34;
 	overflow: scroll;
+	display: grid;
+	max-height: 300px;
 }
 .numbers {
 	font-family: monospace;
@@ -1288,31 +1290,31 @@ hue-6-2: #e6c07b
 	background: var(--bgl-primary-light);
 }
 
-.toolbar[data-v-df400bb5] .active {
+.toolbar[data-v-9688758a] .active {
 	background: var(--bgl-primary);
 	color: white;
 }
 
-.rich-text-editor[data-v-faf0065a] {
+.rich-text-editor[data-v-e274dd3b] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-faf0065a] {
+.editor-container[data-v-e274dd3b] {
 	display: flex;
 	gap: 1rem;
 }
-.content-area[data-v-faf0065a],
-.preview-area[data-v-faf0065a] {
+.content-area[data-v-e274dd3b],
+.preview-area[data-v-e274dd3b] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-faf0065a] {
+.split-view[data-v-e274dd3b] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-faf0065a] {
+.editableContent[data-v-e274dd3b] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -1320,7 +1322,7 @@ hue-6-2: #e6c07b
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-faf0065a] {
+.html-editor[data-v-e274dd3b] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -1331,12 +1333,12 @@ hue-6-2: #e6c07b
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-faf0065a] {
+.preview-area[data-v-e274dd3b] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-faf0065a] {
+.fullscreen-mode[data-v-e274dd3b] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -1345,15 +1347,15 @@ hue-6-2: #e6c07b
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-faf0065a] {
+.fullscreen-mode .editor-container[data-v-e274dd3b] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-faf0065a],
-.fullscreen-mode .preview-area[data-v-faf0065a] {
+.fullscreen-mode .content-area[data-v-e274dd3b],
+.fullscreen-mode .preview-area[data-v-e274dd3b] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-faf0065a]{
+.fullscreen-mode .code-editor[data-v-e274dd3b]{
 	height: 100% !important;
 }
 .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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.992",
+  "version": "0.0.996",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -80,6 +80,7 @@
     "access": "public"
   },
   "dependencies": {
+    "highlight.js": "^11.11.0",
     "@highlightjs/vue-plugin": "^2.1.0",
     "heic2any": "^0.0.4",
     "@vueuse/core": "^12.0.0",

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -1,37 +1,48 @@
 <script setup lang="ts">
 import hljsVuePlugin from '@highlightjs/vue-plugin'
-import { nextTick } from 'vue'
+import { nextTick, watch } from 'vue'
 import 'highlight.js/lib/common'
 import 'highlight.js/styles/atom-one-dark.css'
 
-const { readonly = false, language } = defineProps<{
+const { readonly = false, language, modelValue = '' } = defineProps<{
 	language?: string
 	readonly?: boolean
+	modelValue?: string
 }>()
 
-const code = defineModel('modelValue', {
-	type: String,
-	default: ''
-})
+let code = $ref('')
 
 function tabKeyDown(event: KeyboardEvent) {
 	const target = event.target as HTMLTextAreaElement
 	const start = target.selectionStart
 	const end = target.selectionEnd
 	const tab = '  '
-	code.value = code.value.slice(0, start) + tab + code.value.slice(end)
+	code = code.slice(0, start) + tab + code.slice(end)
 	nextTick(() => {
 		target.selectionStart = target.selectionEnd = start + 2
 	})
 }
 
+const textarea = $ref<HTMLInputElement>()
+let height = $ref('300px')
+
+function setHeight() {
+	if (!textarea) return
+	const { scrollHeight } = textarea
+	height = `${scrollHeight}px`
+}
+
 const Highlightjs = hljsVuePlugin.component
+watch(() => code, setHeight, { immediate: true })
+watch(() => modelValue, (value) => {
+	if (value !== code) code = value
+}, { immediate: true })
 </script>
 
 <template>
-	<div style="max-height: 900px; height: 100vh; overflow: scroll;">
-		<div class="relative block h-100 ltr code-editor-wrap" style="height: 800px;">
-			<div class="numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-999 w50px txt-start opacity-3 color-gray">
+	<div class="code-editor-wrap ltr radius-1">
+		<div class="relative block h-100" :style="{ height }">
+			<div class="numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-1 w50px txt-start opacity-3 color-gray">
 				<div
 					v-for="(_, index) in code.split('\n')"
 					:key="index"
@@ -49,12 +60,14 @@ const Highlightjs = hljsVuePlugin.component
 			/>
 			<textarea
 				v-if="!readonly"
+				ref="textarea"
 				v-model="code"
 				:spellcheck="false"
 				class="code-editor absolute inset-0 overflow-hidden bg-transparent line-height-15 border-none m-0"
 				placeholder="Write your code here"
 				aria-label="Code Editor"
 				data-gramm="false"
+				@input="$emit('update:modelValue', code)"
 				@keydown.tab.prevent="tabKeyDown"
 			/>
 		</div>
@@ -65,7 +78,10 @@ const Highlightjs = hljsVuePlugin.component
 .code-editor-wrap{
 	background: #282c34;
 	overflow: scroll;
+	display: grid;
+	max-height: 300px;
 }
+
 .numbers {
 	font-family: monospace;
 	border-inline-end: 1px solid var(--bgl-gray);

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

@@ -32,7 +32,7 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 				</template>
 			</Dropdown>
 			<Btn
-				v-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
+				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
 				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
 				@click="runAction(action.name)"
 			/>

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -48,6 +48,11 @@ export function useEditor() {
 			'h4',
 			'h5',
 			'h6',
+			'blockquote',
+			'table',
+			'p',
+			'ol',
+			'li'
 		]
 
 		styleTypes.forEach((style) => {
@@ -70,7 +75,6 @@ export function useEditor() {
 				state.doc.body.focus()
 				return
 			}
-
 			state.rangeCount = state.selection.rangeCount
 			if (!state.rangeCount) {
 				const range = state.doc.createRange()
@@ -127,7 +131,7 @@ export function useEditor() {
 			if (!state.doc.body.contains(selection.anchorNode)) {
 				state.doc.body.focus()
 			}
-			console.log(command)
+			console.log('command', command, value)
 			switch (command) {
 				case 'insertTable': {
 					const [rows, cols] = value?.split('x').map(Number) || [3, 3]
@@ -160,12 +164,16 @@ export function useEditor() {
 				case 'underline':
 					format().text(command)
 					break
+				case 'clear':{
+					format().clear()
+					break
+				}
 				case 'orderedList':
 				case 'unorderedList':
 					format().list(command)
 					break
 				case 'image':
-					insertImage(state.modal, state.doc, range)
+					insertImage(state.modal, state)
 					break
 				// case 'youtube':
 				// 	if (isCaret) return
@@ -173,7 +181,12 @@ export function useEditor() {
 				// 	break
 				case 'link':
 					if (isCaret) return
-					insertLink(state.modal, state.doc, range)
+					insertLink(state.modal, state)
+					break
+
+				case 'blockquote':
+				case 'p':
+					format().block(command, value || command)
 					break
 				default:
 					if (/^h[1-6]$/.test(command)) {

package/src/components/form/inputs/RichText/config.ts

@@ -19,12 +19,14 @@ export const defaultToolbarConfig: ToolbarConfig = [
 	'italic',
 	'underline',
 	'separator',
+	'p',
+	'blockquote',
 	'orderedList',
 	'unorderedList',
 	'separator',
 	'link',
 	'image',
-	'youtube',
+	// 'youtube',
 	'separator',
 	'splitView',
 	'clear',
@@ -39,6 +41,8 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'h4', label: 'h4', icon: 'format_h4' },
 	{ name: 'h5', label: 'h5', icon: 'format_h5' },
 	{ name: 'h6', label: 'h6', icon: 'format_h6' },
+	{ name: 'p', label: 'Paragraph', icon: 'format_paragraph' },
+	{ name: 'blockquote', label: 'Blockquote', icon: 'format_quote' },
 	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
 	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
 	{ name: 'underline', label: 'Underline', icon: 'format_underlined' },

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

@@ -40,6 +40,7 @@ async function initEditor() {
 watch(() => props.modelValue, (newValue) => {
 	if (newValue !== editor.state.content) {
 		editor.state.content = newValue
+		editor.updateContent('html')
 	}
 })
 

package/src/components/form/inputs/RichText/richTextTypes.d.ts

@@ -41,6 +41,8 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 export type ToolbarConfigOption =
 	| FormattingCommand
 	| HeadingLevel
+	| 'p'
+	| 'blockquote'
 	| 'separator'
 	| 'fullScreen'
 	| 'clear'