webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Lexical: Added color picker controls

Browse Source
This commit is contained in:
Dan Brown
2024-06-12 19:51:42 +01:00
parent a475cf68bf
commit 9e43e03db4
14 changed files with 367 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,11 @@ import {BaseSelection} from "lexical";
import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
import {el} from "../../helpers";
export interface EditorButtonDefinition {
export interface EditorBasicButtonDefinition {
label: string;
}
export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
action: (context: EditorUiContext) => void;
isActive: (selection: BaseSelection|null) => boolean;
}
@ -49,48 +52,3 @@ export class EditorButton extends EditorUiElement {
return this.trans(this.definition.label);
}
}
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.getLabel()]);
const stylesToApply = this.getStylesFromPreview();
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.getLabel();
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;
}
}