DELETE: Extensiones tiptap, univer desintaladas
This commit is contained in:
Juan Felipe Zapata Moreno
parent
1ce1fb30fc
commit
4518be3887
4193
package-lock.json
generated
4193
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,20 +14,11 @@
|
|||||||
"@tailwindcss/postcss": "^4.0.9",
|
"@tailwindcss/postcss": "^4.0.9",
|
||||||
"@tailwindcss/vite": "^4.0.9",
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"@tiptap/extension-color": "^3.5.2",
|
"@tiptap/extension-color": "^3.5.2",
|
||||||
"@tiptap/extension-table": "^3.6.2",
|
|
||||||
"@tiptap/extension-table-cell": "^3.6.2",
|
|
||||||
"@tiptap/extension-table-header": "^3.6.2",
|
|
||||||
"@tiptap/extension-table-row": "^3.6.2",
|
|
||||||
"@tiptap/extension-text-align": "^3.5.2",
|
"@tiptap/extension-text-align": "^3.5.2",
|
||||||
"@tiptap/extension-text-style": "^3.5.2",
|
"@tiptap/extension-text-style": "^3.5.2",
|
||||||
"@tiptap/extension-underline": "^3.5.2",
|
"@tiptap/extension-underline": "^3.5.2",
|
||||||
"@tiptap/starter-kit": "^3.5.2",
|
"@tiptap/starter-kit": "^3.5.2",
|
||||||
"@tiptap/vue-3": "^3.5.2",
|
"@tiptap/vue-3": "^3.5.2",
|
||||||
"@univerjs-pro/exchange-client": "^0.10.9",
|
|
||||||
"@univerjs/preset-docs-advanced": "^0.10.9",
|
|
||||||
"@univerjs/preset-docs-core": "^0.10.9",
|
|
||||||
"@univerjs/preset-docs-drawing": "^0.10.9",
|
|
||||||
"@univerjs/presets": "^0.10.9",
|
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
"@vuepic/vue-datepicker": "^11.0.2",
|
"@vuepic/vue-datepicker": "^11.0.2",
|
||||||
"apexcharts": "^5.3.5",
|
"apexcharts": "^5.3.5",
|
||||||
|
|||||||
@ -1,307 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
||||||
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
|
|
||||||
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
|
|
||||||
import { UniverDocsDrawingPreset } from '@univerjs/preset-docs-drawing'
|
|
||||||
import UniverPresetDocsDrawingEnUS from '@univerjs/preset-docs-drawing/locales/en-US'
|
|
||||||
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
|
|
||||||
|
|
||||||
import '@univerjs/preset-docs-core/lib/index.css'
|
|
||||||
import '@univerjs/preset-docs-drawing/lib/index.css'
|
|
||||||
|
|
||||||
const container = ref(null);
|
|
||||||
const showExportButton = ref(false);
|
|
||||||
|
|
||||||
let univerInstance = null;
|
|
||||||
let univerAPIInstance = null;
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
try {
|
|
||||||
const { univer, univerAPI } = createUniver({
|
|
||||||
locale: LocaleType.EN_US,
|
|
||||||
locales: {
|
|
||||||
[LocaleType.EN_US]: mergeLocales(
|
|
||||||
UniverPresetDocsCoreEnUS,
|
|
||||||
UniverPresetDocsDrawingEnUS,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
presets: [
|
|
||||||
UniverDocsCorePreset({
|
|
||||||
container: container.value,
|
|
||||||
}),
|
|
||||||
UniverDocsDrawingPreset(),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
univerAPI.createUniverDoc({});
|
|
||||||
|
|
||||||
univerInstance = univer;
|
|
||||||
univerAPIInstance = univerAPI;
|
|
||||||
|
|
||||||
// Mostrar botón cuando esté listo
|
|
||||||
showExportButton.value = true;
|
|
||||||
|
|
||||||
console.log('Univer initialized successfully with drawing support');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error initializing Univer:', error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
univerInstance?.dispose();
|
|
||||||
univerAPIInstance?.dispose();
|
|
||||||
univerInstance = null;
|
|
||||||
univerAPIInstance = null;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Función para exportar a PDF usando PDFMake
|
|
||||||
const exportToPDF = () => {
|
|
||||||
if (!univerAPIInstance || !univerInstance) {
|
|
||||||
alert('El editor no está listo aún');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('Exportando PDF...');
|
|
||||||
|
|
||||||
let docContent = '';
|
|
||||||
|
|
||||||
// Método 1: Extraer del DOM usando selectores más específicos
|
|
||||||
try {
|
|
||||||
const editorContainer = container.value;
|
|
||||||
|
|
||||||
// Buscar elementos de texto específicos de Univer (incluyendo elementos de drawing)
|
|
||||||
const textSelectors = [
|
|
||||||
'.univer-doc-text',
|
|
||||||
'.univer-paragraph',
|
|
||||||
'.univer-text-run',
|
|
||||||
'[data-text-content]',
|
|
||||||
'.docs-text-paragraph',
|
|
||||||
'.docs-text-run',
|
|
||||||
'div[contenteditable="true"]',
|
|
||||||
'div[data-univer-doc-body]',
|
|
||||||
'.univer-drawing-text', // Nuevo: texto en elementos de drawing
|
|
||||||
'.univer-shape-text' // Nuevo: texto en formas
|
|
||||||
];
|
|
||||||
|
|
||||||
let extractedText = '';
|
|
||||||
|
|
||||||
for (const selector of textSelectors) {
|
|
||||||
const elements = editorContainer.querySelectorAll(selector);
|
|
||||||
console.log(`Encontrados ${elements.length} elementos con selector: ${selector}`);
|
|
||||||
|
|
||||||
elements.forEach(element => {
|
|
||||||
const text = element.textContent || element.innerText || '';
|
|
||||||
if (text.trim() && !text.includes('arial') && !text.includes('%100')) {
|
|
||||||
extractedText += text.trim() + '\n';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (extractedText.trim()) {
|
|
||||||
console.log('Texto extraído con selector:', selector, extractedText);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
docContent = extractedText.trim();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error con método DOM:', error);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Método 2: Usar API de Univer si está disponible (actualizado para drawing)
|
|
||||||
if (!docContent) {
|
|
||||||
try {
|
|
||||||
const activeDoc = univerAPIInstance.getActiveDocument();
|
|
||||||
if (activeDoc) {
|
|
||||||
const snapshot = activeDoc.getSnapshot();
|
|
||||||
console.log('Snapshot completo (con drawing):', snapshot);
|
|
||||||
|
|
||||||
// Extraer texto del snapshot de manera más precisa
|
|
||||||
docContent = extractTextFromUniverSnapshot(snapshot);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error con API method:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Método 3: Buscar en todo el DOM filtrando contenido no deseado
|
|
||||||
if (!docContent) {
|
|
||||||
try {
|
|
||||||
const allElements = container.value.querySelectorAll('*');
|
|
||||||
let allText = '';
|
|
||||||
|
|
||||||
allElements.forEach(element => {
|
|
||||||
if (element.children.length === 0) {
|
|
||||||
const text = element.textContent || element.innerText || '';
|
|
||||||
// Filtrar texto que no sea metadata
|
|
||||||
if (text &&
|
|
||||||
!text.includes('arial') &&
|
|
||||||
!text.includes('%100') &&
|
|
||||||
!text.includes('normal') &&
|
|
||||||
text.length > 1 &&
|
|
||||||
!text.match(/^[\s\n\r]*$/)) {
|
|
||||||
allText += text + ' ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
docContent = allText.trim();
|
|
||||||
console.log('Texto extraído por filtrado:', docContent);
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error con método de filtrado:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Preparar contenido para PDF
|
|
||||||
let content;
|
|
||||||
if (docContent && docContent.trim()) {
|
|
||||||
// Dividir por párrafos y limpiar
|
|
||||||
const paragraphs = docContent.split(/\n+/).map(p => p.trim()).filter(p => p);
|
|
||||||
|
|
||||||
if (paragraphs.length > 0) {
|
|
||||||
content = paragraphs.map(paragraph => ({
|
|
||||||
text: paragraph,
|
|
||||||
margin: [0, 0, 0, 8]
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
// Si no hay párrafos, usar el texto completo
|
|
||||||
content = [{ text: docContent, margin: [0, 0, 0, 8] }];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
content = [{
|
|
||||||
text: 'Documento vacío - Escriba algo en el editor y vuelva a exportar',
|
|
||||||
style: { fontSize: 14, italics: true, color: '#666' }
|
|
||||||
}];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Agregar información de debug
|
|
||||||
console.log('Contenido final para PDF:', content);
|
|
||||||
|
|
||||||
// Crear el PDF
|
|
||||||
const docDefinition = {
|
|
||||||
content: content,
|
|
||||||
pageSize: 'A4',
|
|
||||||
pageMargins: [40, 60, 40, 60],
|
|
||||||
defaultStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
lineHeight: 1.4
|
|
||||||
},
|
|
||||||
styles: {
|
|
||||||
header: {
|
|
||||||
fontSize: 16,
|
|
||||||
bold: true,
|
|
||||||
margin: [0, 0, 0, 20]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Generar PDF
|
|
||||||
if (typeof window.pdfMake !== 'undefined') {
|
|
||||||
window.pdfMake.createPdf(docDefinition).download('documento-univer.pdf');
|
|
||||||
console.log('PDF generado exitosamente');
|
|
||||||
} else if (typeof pdfMake !== 'undefined') {
|
|
||||||
pdfMake.createPdf(docDefinition).download('documento-univer.pdf');
|
|
||||||
console.log('PDF generado exitosamente');
|
|
||||||
} else {
|
|
||||||
alert('PDFMake no está disponible. Verifique que esté cargado correctamente.');
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error al exportar PDF:', error);
|
|
||||||
alert('Error al generar el PDF: ' + error.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función mejorada para extraer texto del snapshot de Univer (actualizada para drawing)
|
|
||||||
const extractTextFromUniverSnapshot = (snapshot) => {
|
|
||||||
let text = '';
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('Procesando snapshot:', snapshot);
|
|
||||||
|
|
||||||
// Verificar si hay body con dataStream (texto principal)
|
|
||||||
if (snapshot && snapshot.body && snapshot.body.dataStream) {
|
|
||||||
text = snapshot.body.dataStream;
|
|
||||||
console.log('Texto del dataStream:', text);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Verificar si hay textRuns
|
|
||||||
if (!text && snapshot && snapshot.body && snapshot.body.textRuns) {
|
|
||||||
const textRuns = snapshot.body.textRuns;
|
|
||||||
text = textRuns.map(run => {
|
|
||||||
// Extraer solo el texto, no los metadatos de formato
|
|
||||||
if (typeof run === 'string') return run;
|
|
||||||
if (run.text) return run.text;
|
|
||||||
if (run.t) return run.t;
|
|
||||||
return '';
|
|
||||||
}).join('');
|
|
||||||
console.log('Texto de textRuns:', text);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Verificar si hay elementos de drawing
|
|
||||||
if (snapshot && snapshot.drawings) {
|
|
||||||
console.log('Elementos de drawing encontrados:', snapshot.drawings);
|
|
||||||
// Las imágenes y formas se procesarán aquí en futuras mejoras
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si el texto contiene solo metadata, intentar buscar en otras estructuras
|
|
||||||
if (text.includes('arial') || text.includes('%100') || text.includes('normal')) {
|
|
||||||
console.log('Texto contiene metadata, buscando alternativas...');
|
|
||||||
|
|
||||||
// Buscar en paragraphs si existen
|
|
||||||
if (snapshot.body && snapshot.body.paragraphs) {
|
|
||||||
text = '';
|
|
||||||
snapshot.body.paragraphs.forEach(paragraph => {
|
|
||||||
if (paragraph.elements) {
|
|
||||||
paragraph.elements.forEach(element => {
|
|
||||||
if (element.textRun && element.textRun.content) {
|
|
||||||
text += element.textRun.content;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return text.trim();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error extrayendo del snapshot:', error);
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Exponer la función para uso externo
|
|
||||||
defineExpose({
|
|
||||||
exportToPDF
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="relative w-full h-full">
|
|
||||||
<div ref="container" class="w-full h-full min-h-96" />
|
|
||||||
|
|
||||||
<!-- Botón de exportar -->
|
|
||||||
<button
|
|
||||||
v-if="showExportButton"
|
|
||||||
@click="exportToPDF"
|
|
||||||
class="absolute top-2 right-2 px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition-colors z-10"
|
|
||||||
>
|
|
||||||
📄 Exportar PDF
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Indicador de carga -->
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="absolute top-2 right-2 px-3 py-1 bg-gray-400 text-white text-sm rounded"
|
|
||||||
>
|
|
||||||
Cargando...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
button {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
/* Estilos básicos para Univer */
|
|
||||||
.univer-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contenedores de Univer */
|
|
||||||
.univer-core,
|
|
||||||
.univer-ui {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ajustes para el tema oscuro si es necesario */
|
|
||||||
.dark .univer-container {
|
|
||||||
/* Personalización para tema oscuro */
|
|
||||||
background-color: #1f2937;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Asegurar que Univer tenga el z-index correcto */
|
|
||||||
[class*="univer"] {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Reset de estilos que pueden interferir */
|
|
||||||
.univer-container * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
@ -161,12 +161,6 @@ onMounted(() => {
|
|||||||
name="Maquetador de Documentos"
|
name="Maquetador de Documentos"
|
||||||
to="admin.maquetador.index"
|
to="admin.maquetador.index"
|
||||||
/>
|
/>
|
||||||
<Link
|
|
||||||
v-if="hasPermission('activities.index')"
|
|
||||||
icon="event"
|
|
||||||
name="Univer Docs"
|
|
||||||
to="admin.editor.index"
|
|
||||||
/>
|
|
||||||
</Section>
|
</Section>
|
||||||
</template>
|
</template>
|
||||||
<!-- Contenido -->
|
<!-- Contenido -->
|
||||||
|
|||||||
@ -1,83 +0,0 @@
|
|||||||
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
|
|
||||||
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
|
|
||||||
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
|
|
||||||
|
|
||||||
import '@univerjs/preset-docs-core/lib/index.css'
|
|
||||||
|
|
||||||
let univerInstance = null;
|
|
||||||
let univerAPIInstance = null;
|
|
||||||
|
|
||||||
export function initializeUniver(containerElement) {
|
|
||||||
// Limpiar instancia anterior
|
|
||||||
if (univerInstance) {
|
|
||||||
try {
|
|
||||||
univerInstance.dispose();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error disposing previous Univer instance:', error);
|
|
||||||
}
|
|
||||||
univerInstance = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (univerAPIInstance) {
|
|
||||||
try {
|
|
||||||
univerAPIInstance.dispose();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error disposing previous Univer API instance:', error);
|
|
||||||
}
|
|
||||||
univerAPIInstance = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('Initializing Univer with container:', containerElement);
|
|
||||||
|
|
||||||
const { univer, univerAPI } = createUniver({
|
|
||||||
locale: LocaleType.EN_US,
|
|
||||||
locales: {
|
|
||||||
[LocaleType.EN_US]: mergeLocales(
|
|
||||||
UniverPresetDocsCoreEnUS,
|
|
||||||
),
|
|
||||||
},
|
|
||||||
presets: [
|
|
||||||
UniverDocsCorePreset({
|
|
||||||
container: containerElement,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Crear documento inicial
|
|
||||||
univerAPI.createUniverDoc({});
|
|
||||||
|
|
||||||
univerInstance = univer;
|
|
||||||
univerAPIInstance = univerAPI;
|
|
||||||
|
|
||||||
console.log('Univer initialized successfully');
|
|
||||||
return { univer, univerAPI };
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error initializing Univer:', error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getUniverInstance() {
|
|
||||||
return { univer: univerInstance, univerAPI: univerAPIInstance };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function disposeUniver() {
|
|
||||||
if (univerInstance) {
|
|
||||||
try {
|
|
||||||
univerInstance.dispose();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error disposing Univer:', error);
|
|
||||||
}
|
|
||||||
univerInstance = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (univerAPIInstance) {
|
|
||||||
try {
|
|
||||||
univerAPIInstance.dispose();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Error disposing Univer API:', error);
|
|
||||||
}
|
|
||||||
univerAPIInstance = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -370,11 +370,6 @@ const router = createRouter({
|
|||||||
name: 'admin.maquetador.index',
|
name: 'admin.maquetador.index',
|
||||||
component: () => import('@Pages/Maquetador/Index.vue'),
|
component: () => import('@Pages/Maquetador/Index.vue'),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
name: 'admin.editor.index',
|
|
||||||
component: () => import('@Pages/Editor/Index.vue'),
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user