How to use @deckdeckgo/deck-utils - 10 common examples
To help you get started, we’ve selected a few @deckdeckgo/deck-utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
deckgo / deckdeckgo / studio / src / app / utils / editor / parse-slides.utils.tsx View on Github 
return new Promise(async (resolve) => {
if (!document) {
resolve();
return;
}
// Create a div to parse back to JSX its children
const div = document.createElement('div');
div.innerHTML = slide.data.content;
const content = await ParseElementsUtils.parseElements(div, true, contentEditable);
const attributes = {
style: slide.data.attributes ? await convertStyle(slide.data.attributes.style) : undefined,
src: slide.data.attributes && slide.data.attributes.src ? slide.data.attributes.src : undefined,
'custom-background': slide.data.attributes && slide.data.attributes.customBackground ? slide.data.attributes.customBackground : undefined,
'img-src': slide.data.attributes && slide.data.attributes.imgSrc ? slide.data.attributes.imgSrc : undefined,
'img-alt': slide.data.attributes && slide.data.attributes.imgAlt ? slide.data.attributes.imgAlt : undefined
};
if (slide.data.template === SlideTemplate.QRCODE) {
attributes['content'] = slide.data.attributes && slide.data.attributes.content ? slide.data.attributes.content : QRCodeUtils.getPresentationUrl(deck);
attributes['custom-qrcode'] = slide.data.attributes && slide.data.attributes.content ? 'true' : undefined;
}
if (slide.data.template === SlideTemplate.CHART) {
attributes['type'] = slide.data.attributes && slide.data.attributes.type ? slide.data.attributes.type : undefined;
attributes['inner-radius'] = slide.data.attributes && slide.data.attributes.innerRadius ? slide.data.attributes.innerRadius : undefined;
attributes['animation'] = slide.data.attributes && slide.data.attributes.animation ? slide.data.attributes.animation : undefined;
attributes['date-pattern'] = slide.data.attributes && slide.data.attributes.datePattern ? slide.data.attributes.datePattern : undefined;}
const filteredSlides: HTMLElement[] = await this.getDefinedFilteredSlides();
const definedSlidesLength: number = filteredSlides ? filteredSlides.length : 0;
// Are all slides loaded?
if (loadedSlides.length !== definedSlidesLength) {
resolve(null);
return;
}
const orderedSlidesTagNames: DeckdeckgoSlideDefinition[] = [];
for (const slide of Array.from(loadedSlides)) {
const attributes: DeckdeckgoAttributeDefinition[] = await getAttributesDefinition(slide.attributes);
orderedSlidesTagNames.push({
template: slide.tagName ? slide.tagName.toLowerCase() : undefined,
content: slide.innerHTML,
attributes: attributes
});
}
const attributes: DeckdeckgoAttributeDefinition[] = await getAttributesDefinition(this.el.attributes);
const background: HTMLElement = this.el.querySelector(':scope > [slot=\'background\']');
const deck: DeckdeckgoDeckDefinition = {
slides: orderedSlidesTagNames,
attributes: attributes,
background: background ? background.innerHTML : null,
reveal: this.reveal,this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
if (deck && deck.data && deck.data.attributes && deck.data.attributes.style) {
this.style = await convertStyle(deck.data.attributes.style);
} else {
this.style = undefined;
}
if (deck && deck.data && deck.data.attributes && deck.data.attributes.transition) {
this.transition = deck.data.attributes.transition;
}
this.background = await ParseBackgroundUtils.convertBackground(deck.data.background, true);
resolve();
});
});return new Promise(async (resolve) => {
const Elem: string = element.nodeName.toLowerCase();
const attributes: any = this.getAttributes(element);
if (attributes.style) {
attributes.style = await convertStyle(attributes.style);
}
if (contentEditable && this.isContentEditable(element, attributes)) {
if (contentEditable && SlotUtils.isNodeReveal(element) && element.firstElementChild) {
element.firstElementChild.setAttribute('contenteditable', `${true}`);
} else {
attributes['contenteditable'] = true;
}
}
resolve({content});
});
}return new Promise(async (resolve) => {
const Elem: string = element.nodeName.toLowerCase();
const attributes: any = this.getAttributes(element);
if (attributes.style) {
attributes.style = await convertStyle(attributes.style);
}
resolve({content});
});
}return new Promise(async (resolve) => {
const attr: any = {};
if (attributes && attributes.length > 0) {
for (const def of attributes) {
if (def.name === 'style') {
attr['style'] = await convertStyle(def.value);
} else {
attr[def.name] = def.value;
}
}
}
resolve(attr);
})
}return new Promise(async (resolve) => {
try {
const slide: Slide = await this.slideService.get(deck.id, slideId);
const element: JSX.IntrinsicElements = await ParseSlidesUtils.parseSlide(deck, slide, false);
let style: any;
if (deck.data && deck.data.attributes && deck.data.attributes.style) {
style = await convertStyle(deck.data.attributes.style);
} else {
style = undefined;
}
const background: any = await ParseBackgroundUtils.convertBackground(deck.data.background, false);
resolve({
deck: deck,
slide: element,
style: style,
background: background
});
} catch (err) {
resolve(undefined);
}
});return new Promise(async (resolve) => {
const content: string = await this.filterSlideContentSlots(slide);
if (!content || content.length <= 0) {
resolve(content);
return;
}
let result: string = await cleanContent(content);
if (!slide.hasAttribute('custom-background')) {
result = result.replace(/<div slot="background">(.*?)<\/div>/g, '');
}
resolve(result);
});
}</div>return new Promise(async (resolve) => {
if (!slide || !slide.content || slide.content === undefined || slide.content === '') {
resolve(undefined);
return;
}
let result: string = await cleanContent(slide.content);
const customBackground: boolean = await this.hasCustomBackground(slide);
if (!customBackground) {
result = result.replace(/<div slot="background">(.*?)<\/div>/g, '');
}
result = result.replace(/<a slot="actions">/g, '');
result = result.replace(//g, '');
resolve(result);
});
}</a></div>return new Promise(async (resolve) => {
const slide: HTMLElement = this.el.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
const definition: DeckdeckgoSlideDefinition | null = await getSlideDefinition(slide);
resolve(definition);
});
}@deckdeckgo/deck-utils
Utils for the DeckDeckGo presentations
