@bagelink/vue 0.0.988 → 0.0.992

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

@@ -49,7 +49,7 @@ watch(() => editor.state.content, (newValue) => {
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-1" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 		<Toolbar
 			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 			@action="editor.handleToolbarAction"
@@ -59,14 +59,11 @@ watch(() => editor.state.content, (newValue) => {
 				<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
 			</div>
 			<CodeEditor
-				v-if="editor?.state.isSplitView" v-model="editor.state.content" :languages="['html']"
+				v-if="editor?.state.isSplitView" v-model="editor.state.content" language="html"
 				@update:modelValue="editor.updateContent('html')"
 			/>
 		</div>
 	</div>
-	<pre wrap>
-	{{ editor.state }}
-	</pre>
 </template>
 
 <style scoped>
@@ -88,14 +85,15 @@ watch(() => editor.state.content, (newValue) => {
 	background: var(--bgl-richtext-color);
 }
 
-.split-view .content-area,
-.split-view .preview-area {
-	width: 50%;
+.split-view {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
 }
 
 .editableContent {
 	width: 100%;
-	min-height: 200px;
+	min-height: 240px;
+	height: 100%;
 	border: none;
 	outline: none;
 	background: transparent;
@@ -130,7 +128,7 @@ watch(() => editor.state.content, (newValue) => {
 }
 
 .fullscreen-mode .editor-container {
-	height: calc(100vh - 8rem);
+	height: calc(100vh - 4rem);
 }
 
 .fullscreen-mode .content-area,
@@ -138,4 +136,7 @@ watch(() => editor.state.content, (newValue) => {
 	height: 100%;
 	overflow-y: auto;
 }
+.fullscreen-mode .code-editor{
+	height: 100% !important;
+}
 </style>

package/src/components/form/inputs/RichText/utils/table.ts

@@ -1,79 +1,81 @@
-
-export function createTable(rows: number, cols: number, doc: Document) {
-  const table = doc.createElement('table')
-  table.style.width = '100%'
-  table.style.borderCollapse = 'collapse'
-
-  for (let i = 0; i < rows; i++) {
-    const row = table.insertRow()
-    for (let j = 0; j < cols; j++) {
-      const cell = row.insertCell()
-      cell.style.border = '1px solid var(--border-color)'
-      cell.style.padding = '8px'
-      cell.innerHTML = '&nbsp;'
-    }
-  }
-
-  return table
+import type { EditorState } from '../richTextTypes'
+
+export function insertTable(rows: number, cols: number, state: EditorState) {
+	if (!state.doc) return
+	const table = state.doc.createElement('table')
+	table.style.width = '100%'
+	table.style.borderCollapse = 'collapse'
+
+	for (let i = 0; i < rows; i++) {
+		const row = table.insertRow()
+		for (let j = 0; j < cols; j++) {
+			const cell = row.insertCell()
+			cell.innerHTML = '&nbsp;'
+		}
+	}
+	const { range } = state
+	if (range) {
+		range.insertNode(table)
+	} else {
+		state.doc.body.appendChild(table)
+	}
 }
 
 export function mergeCells(range: Range, doc: Document) {
-  const cells = Array.from(range.cloneContents().querySelectorAll('td'))
-  if (cells.length < 2) return
+	const cells = Array.from(range.cloneContents().querySelectorAll('td'))
+	if (cells.length < 2) return
 
-  const firstCell = range.startContainer.parentElement?.closest('td')
-  if (!firstCell) return
+	const firstCell = range.startContainer.parentElement?.closest('td')
+	if (!firstCell) return
 
-  firstCell.colSpan = cells.length
-  firstCell.innerHTML = cells.map(cell => cell.innerHTML).join(' ')
+	firstCell.colSpan = cells.length
+	firstCell.innerHTML = cells.map(cell => cell.innerHTML).join(' ')
 
-  cells.slice(1).forEach((cell) => {
-    const actualCell = doc.getElementById(cell.id)
-    actualCell?.remove()
-  })
+	cells.slice(1).forEach((cell) => {
+		const actualCell = doc.getElementById(cell.id)
+		actualCell?.remove()
+	})
 }
 
 export function splitCell(range: Range, doc: Document) {
-  const cell = range.startContainer.parentElement?.closest('td')
-  if (!cell || !cell.colSpan || cell.colSpan === 1) return
-
-  const newCells = new Array(cell.colSpan - 1).fill(0).map(() => {
-    const newCell = doc.createElement('td')
-    newCell.style.border = '1px solid var(--border-color)'
-    newCell.style.padding = '8px'
-    newCell.innerHTML = '&nbsp;'
-    return newCell
-  })
-
-  cell.colSpan = 1
-  cell.insertAdjacentElement('afterend', newCells[0])
-  newCells.slice(1).forEach((newCell) => {
-    newCells[0].insertAdjacentElement('afterend', newCell)
-  })
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell || !cell.colSpan || cell.colSpan === 1) return
+
+	const newCells = new Array(cell.colSpan - 1).fill(0).map(() => {
+		const newCell = doc.createElement('td')
+		newCell.style.border = '1px solid var(--border-color)'
+		newCell.style.padding = '8px'
+		newCell.innerHTML = '&nbsp;'
+		return newCell
+	})
+
+	cell.colSpan = 1
+	cell.insertAdjacentElement('afterend', newCells[0])
+	newCells.slice(1).forEach((newCell) => {
+		newCells[0].insertAdjacentElement('afterend', newCell)
+	})
 }
 
 export function addRow(position: 'before' | 'after', range: Range, doc: Document) {
-  const cell = range.startContainer.parentElement?.closest('td')
-  if (!cell) return
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
 
-  const row = cell.parentElement
-  const table = row?.parentElement
-  if (!row || !table) return
+	const row = cell.parentElement
+	const table = row?.parentElement
+	if (!row || !table) return
 
-  const newRow = row.cloneNode(true) as HTMLTableRowElement
-  Array.from(newRow.cells).forEach((cell) => {
-    cell.innerHTML = '&nbsp;'
-  })
+	const newRow = row.cloneNode(true) as HTMLTableRowElement
+	Array.from(newRow.cells).forEach(cell => cell.innerHTML = '&nbsp;')
 
-  row.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
+	row.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
 }
 
 export function deleteRow(range: Range) {
-  const cell = range.startContainer.parentElement?.closest('td')
-  if (!cell) return
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
 
-  const row = cell.parentElement
-  if (!row) return
+	const row = cell.parentElement
+	if (!row) return
 
-  row.remove()
+	row.remove()
 }

package/src/components/index.ts

@@ -14,10 +14,10 @@ export { default as Dropdown } from './Dropdown.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
 export { default as Image } from './Image.vue'
-// export * from './whatsapp';
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'
+export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed.vue'
 export { default as MaterialIcon } from './MaterialIcon.vue'
 export { default as Icon } from './MaterialIcon.vue'
@@ -25,8 +25,8 @@ export { default as Modal } from './Modal.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
-export { default as PageTitle } from './PageTitle.vue'
 
+export { default as PageTitle } from './PageTitle.vue'
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as TableSchema } from './TableSchema.vue'

package/src/components/layout/TabsNav.vue

@@ -134,6 +134,7 @@ onBeforeUnmount(() => {
 }
 .bgl_flat-tabs.bgl_tabs_wrap {
 	background: transparent;
+	box-shadow: none;
 }
 .bgl_flat-tabs.bgl_tabs_wrap::before{
 	background: transparent;