@bagelink/vue 0.0.398 → 0.0.402

package/dist/plugins/modal.d.ts

@@ -23,10 +23,20 @@ export interface ModalFormOptions {
     modelValue?: Record<string, any>;
     'onUpdate:modelValue'?: (val: any) => void;
 }
+export type ModalConfirmOptions = {
+    title?: string;
+    message?: string;
+    resolve: (val: boolean) => void;
+};
+type ModalType = 'modal' | 'modalForm' | 'confirm';
+type ConfirmModalUserOptions = string | {
+    title: string;
+    message: string;
+};
 export interface ModalComponentProps {
     componentSlots: Record<string, any>;
-    modalType: 'modal' | 'modalForm';
-    modalOptions: ModalOptions | ModalFormOptions;
+    modalType: ModalType;
+    modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions;
 }
 export interface ModalFormComponentProps {
     componentSlots: Record<string, any>;
@@ -37,8 +47,10 @@ export interface ModalApi {
     showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
     showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
     hideModal: (index?: number) => void;
+    confirm: (options: ConfirmModalUserOptions) => Promise<boolean>;
 }
 export declare const ModalSymbol: InjectionKey<ModalApi>;
 export declare const useModal: () => ModalApi;
 export declare const ModalPlugin: Plugin;
+export {};
 //# sourceMappingURL=modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,cAAc,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,WAAW,CAAC;IACjC,YAAY,EAAE,YAAY,GAAG,gBAAgB,CAAA;CAC7C;AACD,MAAM,WAAW,uBAAuB;IACvC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAA;CAC9B;AACD,MAAM,WAAW,QAAQ;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,uBAAuB,GAAG,SAAS,CAAC;IAC/G,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAyCzB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"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"}

package/dist/style.css

@@ -525,11 +525,11 @@ a[data-v-d09a83c5] {
 	gap: 0;
 }
 
-.modal-title[data-v-204f5236] {
+.modal-title[data-v-04d84995] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-204f5236] {
+.modal-title[data-v-04d84995] {
 		margin-top: 1rem;
 }
 }
@@ -896,15 +896,17 @@ display: block;
 	color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-bbfc4353],
-.bgl_vid video[data-v-bbfc4353] {
+.bgl_vid iframe[data-v-b1ad7c32],
+.bgl_vid video[data-v-b1ad7c32] {
 	width: 100%;
 	height: auto;
 	display: block;
+	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-bbfc4353] {
+.bgl_vid.vid_empty[data-v-b1ad7c32] {
 	padding-top: 56.25%;
-	background: #f0f0f0;
+	background: var(--input-bg);
+	border-radius: var(--input-border-radius);
 }
 
 .blocker[data-v-068aa914] {
@@ -1066,10 +1068,10 @@ display: block;
 }
 .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-3e27cf1d] {
+.selectinput[data-v-fdfda40b] {
 	width: 100%;
 }
-.selectinput-option[data-v-3e27cf1d] {
+.selectinput-option[data-v-fdfda40b] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1080,14 +1082,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-3e27cf1d] {
+.selectinput-options[data-v-fdfda40b] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-3e27cf1d]:hover {
+.selectinput-option[data-v-fdfda40b]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-3e27cf1d] {
+.isEmpty p[data-v-fdfda40b] {
 	opacity: 0.3;
 }
 
@@ -1674,25 +1676,20 @@ img.preview[data-v-0dbacaa0] {
 .tiptap h1,
 .tiptap h2 {
 	line-height: 1;
-	margin-top: 0;
 }
 .tiptap h3,
 .tiptap h4,
 .tiptap h5,
 .tiptap h6 {
 	line-height: 1.1;
-	margin-top: 0;
-}
-.tiptap code {
-	background-color: rgba(97, 97, 97, 0.1);
-	color: #616161;
 }
 .tiptap pre {
 	background: #0d0d0d;
-	color: #fff;
+	color: var(--bgl-white);
 	font-family: 'JetBrainsMono', monospace;
 	padding: 0.75rem 1rem;
 	border-radius: 0.5rem;
+	margin: 0;
 }
 .tiptap pre code {
 	color: inherit;
@@ -1705,12 +1702,13 @@ img.preview[data-v-0dbacaa0] {
 	height: auto;
 }
 .tiptap blockquote {
-	padding-left: 1rem;
-	border-left: 2px solid rgba(13, 13, 13, 0.1);
+	padding-inline-start: 0.5rem;
+	border-inline-start: 2px solid var(--border-color);
+	margin: 0.5rem
 }
 .tiptap hr {
 	border: none;
-	border-top: 2px solid rgba(13, 13, 13, 0.1);
+	border-top: 2px solid var(--border-color);
 	margin: 1rem 0;
 }
 .tiptap {
@@ -1736,6 +1734,89 @@ img.preview[data-v-0dbacaa0] {
 	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-black)
+}
+.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-black) !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);
+}
 
 .chart-line {
 	width: 100%;
@@ -3185,6 +3266,14 @@ img.preview[data-v-0dbacaa0] {
     height: 1px;
     width: 100%;
 }
+.ltr,
+.direction-ltr {
+    direction: ltr;
+}
+.rtl,
+.direction-rtl {
+    direction: rtl;
+}
 @media screen and (max-width: 910px) {
     .grid-wrap-2 {
         grid-template-columns: repeat(1, 1fr);
@@ -4736,6 +4825,17 @@ img.preview[data-v-0dbacaa0] {
     .m_overflow-y-hidden {
         overflow-y: hidden;
     }
+
+    .m_ltr,
+    .m_direction-ltr {
+        direction: ltr;
+    }
+
+    .m_rtl,
+    .m_direction-rtl {
+        direction: rtl;
+    }
+
 }
 input,
 textarea,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.398",
+  "version": "0.0.402",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -63,6 +63,10 @@
     "@tiptap/starter-kit": "^2.2.4",
     "@tiptap/extension-image": "^2.2.4",
     "@tiptap/extension-youtube": "^2.2.4",
+    "@tiptap/extension-table": "^2.2.4",
+    "@tiptap/extension-table-row": "^2.2.4",
+    "@tiptap/extension-table-header": "^2.2.4",
+    "@tiptap/extension-table-cell": "^2.2.4",
     "@tiptap/vue-3": "^2.2.4",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",

package/src/components/BglVideo.vue

@@ -6,7 +6,8 @@
 			:style="{ aspectRatio }"
 			frameborder="0"
 			allowfullscreen
-			title="Video" />
+			title="Video"
+		/>
 		<video
 			v-else-if="src"
 			:src="src"
@@ -15,7 +16,8 @@
 			:loop="loop"
 			:style="{ aspectRatio }"
 			:controls="controls"
-			playsinline />
+			playsinline
+		/>
 	</div>
 </template>
 
@@ -32,7 +34,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const aspectRatio = $computed(
-	() => props.aspectRatio?.replace(':', '/') || '16/9'
+	() => props.aspectRatio?.replace(':', '/') || '16/9',
 );
 
 const embedType = $computed<'YouTube' | 'Vimeo' | null>(() => {
@@ -68,10 +70,12 @@ console.log('Video URL:', videoUrl);
 	width: 100%;
 	height: auto;
 	display: block;
+	border-radius: var(--input-border-radius);
 }
 
 .bgl_vid.vid_empty {
 	padding-top: 56.25%;
-	background: #f0f0f0;
+	background: var(--input-bg);
+	border-radius: var(--input-border-radius);
 }
 </style>

package/src/components/ModalConfirm.vue

@@ -0,0 +1,26 @@
+<template>
+	<Modal width="380px" :dismissable="false" :title="title">
+		{{ message }}
+		<template #footer>
+			<Btn @click="select(true)" color="primary" value="Confirm" />
+			<Btn @click="select(false)" color="red" value="Cancel" />
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts" setup>
+import { Btn, Modal } from '@bagelink/vue';
+
+const props = defineProps<{
+	title: string;
+	message: string;
+	resolve: (value: boolean) => void;
+}>();
+
+const emit = defineEmits(['update:visible']);
+
+function select(val: boolean) {
+	props.resolve(val);
+	emit('update:visible');
+}
+</script>

package/src/components/ModalForm.vue

@@ -1,9 +1,10 @@
 <template>
 	<Modal
-		@onUpdate:isModalVisible="props['onUpdate:isModalVisible']"
+		@update:visible="($event) => emit('update:visible', $event)"
 		:side
 		ref="modal"
 		:width
+		:visible="visible"
 		:dismissable
 		:title="title">
 		<BagelForm
@@ -41,24 +42,26 @@ import {
 const bagel = useBagel();
 
 const props = defineProps<{
-	'side'?: boolean;
-	'title'?: string;
-	'width'?: string;
-	'dismissable'?: boolean;
-	'actions'?: BtnOptions[];
-	'schema': BglFormSchemaT | (() => BglFormSchemaT);
+	side?: boolean;
+	title?: string;
+	width?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+	schema: BglFormSchemaT | (() => BglFormSchemaT);
 	// eslint-disable-next-line no-unused-vars
-	'onSubmit'?: (formData: any) => Promise<void>;
+	onSubmit?: (formData: any) => Promise<void>;
 	// eslint-disable-next-line no-unused-vars
-	'onDelete'?: (id: string) => void;
+	onDelete?: (id: string) => void;
 	// eslint-disable-next-line no-unused-vars
-	'onUpdate:isModalVisible'?: (visible: boolean) => void;
+	visible?: boolean;
 	// eslint-disable-next-line no-unused-vars
-	'onError'?: (err: any) => void;
+	onError?: (err: any) => void;
 
-	'modelValue'?: Record<string, any>;
+	modelValue?: Record<string, any>;
 }>();
 
+const emit = defineEmits(['update:visible']);
+
 const modal = $ref<InstanceType<typeof Modal>>();
 
 const computedFormSchema = $computed(() => {

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

@@ -10,7 +10,8 @@
 				v-tooltip="item.name"
 				:key="item.name"
 				:icon="item.icon"
-				:disabled="item.disabled?.()" />
+				:disabled="item.disabled?.()"
+			/>
 		</div>
 		<editor-content :editor="editor" />
 	</div>
@@ -29,6 +30,10 @@ import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
 import Image from '@tiptap/extension-image';
 import YouTube from '@tiptap/extension-youtube';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
 import type { MaterialIcons } from '@bagelink/vue';
 // import $el from './FileUploadURL.vue';
 const { txtField } = bagelFormUtils;
@@ -70,19 +75,22 @@ const config: {
 		name: 'Bold',
 		command: () => focus()?.toggleBold().run(),
 		icon: 'format_bold',
-		disabled: () => !editor?.can().chain().focus().toggleBold().run(),
+		disabled: () => !editor?.can().chain().focus().toggleBold()
+			.run(),
 	},
 	{
 		name: 'Italic',
 		command: () => focus().toggleItalic().run(),
 		icon: 'format_italic',
-		disabled: () => !editor?.can().chain().focus().toggleItalic().run(),
+		disabled: () => !editor?.can().chain().focus().toggleItalic()
+			.run(),
 	},
 	{
 		name: 'Strike',
 		command: () => focus().toggleStrike().run(),
 		icon: 'format_strikethrough',
-		disabled: () => !editor?.can().chain().focus().toggleStrike().run(),
+		disabled: () => !editor?.can().chain().focus().toggleStrike()
+			.run(),
 	},
 	{
 		name: 'Code Text',
@@ -187,17 +195,28 @@ const config: {
 		command: () => focus().setHardBreak().run(),
 		icon: 'keyboard_return',
 	},
+	{
+		name: 'Table',
+		command: () => editor
+			.chain()
+			.focus()
+			.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+			.run(),
+		icon: 'table_chart',
+	},
 	{
 		name: 'Undo',
 		command: () => focus().undo().run(),
 		icon: 'undo',
-		disabled: () => !editor?.can().chain().focus().undo().run(),
+		disabled: () => !editor?.can().chain().focus().undo()
+			.run(),
 	},
 	{
 		name: 'Redo',
 		command: () => focus().redo().run(),
 		icon: 'redo',
-		disabled: () => !editor?.can().chain().focus().redo().run(),
+		disabled: () => !editor?.can().chain().focus().redo()
+			.run(),
 	},
 ];
 
@@ -205,7 +224,15 @@ const emit = defineEmits(['update:modelValue']);
 
 function initEditor() {
 	editor = new Editor({
-		extensions: [StarterKit, Image, YouTube],
+		extensions: [
+			StarterKit,
+			Image,
+			YouTube,
+			Table,
+			TableRow,
+			TableCell,
+			TableHeader,
+		],
 		content: props.modelValue,
 		onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
 	});
@@ -217,7 +244,7 @@ watch(
 		if (editor?.getHTML() === value) return;
 		editor?.commands.setContent(value, false);
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 onMounted(initEditor);
@@ -239,7 +266,6 @@ onBeforeUnmount(() => editor?.destroy());
 .tiptap h1,
 .tiptap h2 {
 	line-height: 1;
-	margin-top: 0;
 }
 
 .tiptap h3,
@@ -247,20 +273,15 @@ onBeforeUnmount(() => editor?.destroy());
 .tiptap h5,
 .tiptap h6 {
 	line-height: 1.1;
-	margin-top: 0;
-}
-
-.tiptap code {
-	background-color: rgba(97, 97, 97, 0.1);
-	color: #616161;
 }
 
 .tiptap pre {
 	background: #0d0d0d;
-	color: #fff;
+	color: var(--bgl-white);
 	font-family: 'JetBrainsMono', monospace;
 	padding: 0.75rem 1rem;
 	border-radius: 0.5rem;
+	margin: 0;
 }
 
 .tiptap pre code {
@@ -276,13 +297,14 @@ onBeforeUnmount(() => editor?.destroy());
 }
 
 .tiptap blockquote {
-	padding-left: 1rem;
-	border-left: 2px solid rgba(13, 13, 13, 0.1);
+	padding-inline-start: 0.5rem;
+	border-inline-start: 2px solid var(--border-color);
+	margin: 0.5rem
 }
 
 .tiptap hr {
 	border: none;
-	border-top: 2px solid rgba(13, 13, 13, 0.1);
+	border-top: 2px solid var(--border-color);
 	margin: 1rem 0;
 }
 
@@ -309,4 +331,96 @@ onBeforeUnmount(() => editor?.destroy());
 	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-black)
+		}
+
+		.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-black) !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);
+}
 </style>