BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/blocks/format-preview-button.ts

   1 import {EditorButton, EditorButtonDefinition} from "../buttons";
   2 import {el} from "../../../utils/dom";
   3
   4 export class FormatPreviewButton extends EditorButton {
   5     protected previewSampleElement: HTMLElement;
   6
   7     constructor(previewSampleElement: HTMLElement,definition: EditorButtonDefinition) {
   8         super(definition);
   9         this.previewSampleElement = previewSampleElement;
  10     }
  11
  12     protected buildDOM(): HTMLButtonElement {
  13         const button = super.buildDOM();
  14         button.innerHTML = '';
  15
  16         const preview = el('span', {
  17             class: 'editor-button-format-preview'
  18         }, [this.getLabel()]);
  19
  20         const stylesToApply = this.getStylesFromPreview();
  21         for (const style of Object.keys(stylesToApply)) {
  22             preview.style.setProperty(style, stylesToApply[style]);
  23         }
  24
  25         button.append(preview);
  26         return button;
  27     }
  28
  29     protected getStylesFromPreview(): Record<string, string> {
  30         const wrap = el('div', {style: 'display: none', hidden: 'true', class: 'page-content'});
  31         const sampleClone = this.previewSampleElement.cloneNode() as HTMLElement;
  32         sampleClone.textContent = this.getLabel();
  33         wrap.append(sampleClone);
  34         document.body.append(wrap);
  35
  36         const propertiesToFetch = ['color', 'font-size', 'background-color', 'border-inline-start'];
  37         const propertiesToReturn: Record<string, string> = {};
  38
  39         const computed = window.getComputedStyle(sampleClone);
  40         for (const property of propertiesToFetch) {
  41             propertiesToReturn[property] = computed.getPropertyValue(property);
  42         }
  43         wrap.remove();
  44
  45         return propertiesToReturn;
  46     }
  47 }