@bagelink/vue 0.0.992 → 0.0.998

package/dist/style.css

@@ -683,99 +683,12 @@ data[data-v-6c27f163] {
 .bagel-input:focus-within.bgl-checkbox:not(:checked) label[data-v-03ed2982] {
     color: var(--label-color) !important;
 }
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
-}
-code.hljs {
-  padding: 3px 5px
-}
-/*
-
-Atom One Dark by Daniel Gamage
-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
 
-base:    #282c34
-mono-1:  #abb2bf
-mono-2:  #818896
-mono-3:  #5c6370
-hue-1:   #56b6c2
-hue-2:   #61aeee
-hue-3:   #c678dd
-hue-4:   #98c379
-hue-5:   #e06c75
-hue-5-2: #be5046
-hue-6:   #d19a66
-hue-6-2: #e6c07b
-
-*/
-.hljs {
-  color: #abb2bf;
-  background: #282c34
-}
-.hljs-comment,
-.hljs-quote {
-  color: #5c6370;
-  font-style: italic
-}
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #c678dd
-}
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e06c75
-}
-.hljs-literal {
-  color: #56b6c2
-}
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta .hljs-string {
-  color: #98c379
-}
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #d19a66
-}
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #61aeee
-}
-.hljs-built_in,
-.hljs-title.class_,
-.hljs-class .hljs-title {
-  color: #e6c07b
-}
-.hljs-emphasis {
-  font-style: italic
-}
-.hljs-strong {
-  font-weight: bold
-}
-.hljs-link {
-  text-decoration: underline
-}
 .code-editor-wrap{
 	background: #282c34;
 	overflow: scroll;
+	display: grid;
+	max-height: 300px;
 }
 .numbers {
 	font-family: monospace;
@@ -940,7 +853,7 @@ hue-6-2: #e6c07b
 }
 }
 
-.img-web-kit[data-v-e1f932a8] {
+.img-web-kit[data-v-3f8cf457] {
 	max-width: 100%;
     vertical-align: middle;
     border: 0;
@@ -1288,31 +1201,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 +1233,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 +1244,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 +1258,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}
@@ -14145,4 +14058,93 @@ input::-moz-focus-inner {
         height: -webkit-fill-available;
 
     }
+}pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+.hljs {
+  color: #abb2bf;
+  background: #282c34
+}
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd
+}
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75
+}
+.hljs-literal {
+  color: #56b6c2
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string {
+  color: #98c379
+}
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee
+}
+.hljs-built_in,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+  color: #e6c07b
+}
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-link {
+  text-decoration: underline
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.992",
+  "version": "0.0.998",
   "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/Image.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Skeleton, normalizeURL, normalizeDimension } from '@bagelink/vue'
-import heic2any from 'heic2any'
 import { watch } from 'vue'
 
 const { height, width, alt = '', src } = defineProps<{
@@ -38,6 +37,7 @@ async function loadImage(src: string) {
 		try {
 			const response = await fetch(src)
 			const blob = await response.blob()
+			const { default: heic2any } = await import('heic2any')
 			const convertedBlob = await heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
 			// Only attempt to cache if the cache API is available

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

@@ -1,37 +1,54 @@
 <script setup lang="ts">
 import hljsVuePlugin from '@highlightjs/vue-plugin'
-import { nextTick } from 'vue'
-import 'highlight.js/lib/common'
-import 'highlight.js/styles/atom-one-dark.css'
+import { nextTick, onMounted, watch } from 'vue'
 
-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`
+}
+
+let loaded = $ref(false)
+
+onMounted(async () => {
+	await import('highlight.js/lib/common')
+	await import('highlight.js/styles/atom-one-dark.css')
+	loaded = true
+})
+
 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 v-if="loaded" 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 +66,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 +84,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'