webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00
Code Activity

Lexical: Added format previews to format buttons

Browse Source
This commit is contained in:
Dan Brown
2024-05-30 12:25:25 +01:00
parent dc1a40ea74
commit 57259aee00
6 changed files with 185 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/wysiwyg/ui/framework/buttons.ts
View File

@@ -19,22 +19,70 @@ export class EditorButton extends EditorUiElement {
protected buildDOM(): HTMLButtonElement {
const button = el('button', {
type: 'button',
class: 'editor-toolbar-button',
class: 'editor-button',
}, [this.definition.label]) as HTMLButtonElement;
button.addEventListener('click', event => {
this.definition.action(this.getContext().editor);
});
button.addEventListener('click', this.onClick.bind(this));
return button;
}
protected onClick() {
this.definition.action(this.getContext().editor);
}
updateActiveState(selection: BaseSelection|null) {
const isActive = this.definition.isActive(selection);
this.dom?.classList.toggle('editor-toolbar-button-active', isActive);
this.dom?.classList.toggle('editor-button-active', isActive);
}
updateState(state: EditorUiStateUpdate): void {
this.updateActiveState(state.selection);
}
}
export class FormatPreviewButton extends EditorButton {
protected previewSampleElement: HTMLElement;
constructor(previewSampleElement: HTMLElement,definition: EditorButtonDefinition) {
super(definition);
this.previewSampleElement = previewSampleElement;
}
protected buildDOM(): HTMLButtonElement {
const button = super.buildDOM();
button.innerHTML = '';
const preview = el('span', {
class: 'editor-button-format-preview'
}, [this.definition.label]);
const stylesToApply = this.getStylesFromPreview();
console.log(stylesToApply);
for (const style of Object.keys(stylesToApply)) {
preview.style.setProperty(style, stylesToApply[style]);
}
button.append(preview);
return button;
}
protected getStylesFromPreview(): Record<string, string> {
const wrap = el('div', {style: 'display: none', hidden: 'true', class: 'page-content'});
const sampleClone = this.previewSampleElement.cloneNode() as HTMLElement;
sampleClone.textContent = this.definition.label;
wrap.append(sampleClone);
document.body.append(wrap);
const propertiesToFetch = ['color', 'font-size', 'background-color', 'border-inline-start'];
const propertiesToReturn: Record<string, string> = {};
const computed = window.getComputedStyle(sampleClone);
for (const property of propertiesToFetch) {
propertiesToReturn[property] = computed.getPropertyValue(property);
}
wrap.remove();
return propertiesToReturn;
}
}