@deathbeds/jupyterlab-fonts/lib/editor.js

import { Dialog, showDialog } from '@jupyterlab/apputils';
import * as React from 'react';
import { VDomModel, VDomRenderer } from '@jupyterlab/apputils';
import { TextKind, TEXT_OPTIONS, TEXT_LABELS, KIND_LABELS, PACKAGE_NAME } from '.';
import '../style/editor.css';
const h = React.createElement;
const EDITOR_CLASS = 'jp-FontsEditor';
const ENABLED_CLASS = 'jp-FontsEditor-enable';
const FIELD_CLASS = 'jp-FontsEditor-field';
const EMBED_CLASS = 'jp-FontsEditor-embed';
const SECTION_CLASS = 'lm-CommandPalette-header';
const BUTTON_CLASS = 'jp-FontsEditor-button jp-mod-styled';
const SIZE_CLASS = 'jp-FontsEditor-size';
const DUMMY = '-';
export class FontEditorModel extends VDomModel {
    get fonts() {
        return this._fonts;
    }
    set fonts(fonts) {
        if (this._fonts && this._fonts.settings) {
            this._fonts.settings.changed.disconnect(this.onSettingsChange, this);
        }
        this._fonts = fonts;
        fonts.settings.changed.connect(this.onSettingsChange, this);
        this.stateChanged.emit(void 0);
    }
    onSettingsChange() {
        this.stateChanged.emit(void 0);
    }
    get notebook() {
        return this._notebook;
    }
    set notebook(notebook) {
        var _a, _b;
        if ((_a = this._notebook) === null || _a === void 0 ? void 0 : _a.model) {
            this._notebook.model.metadata.changed.disconnect(this.onSettingsChange, this);
            this._notebook.context.pathChanged.disconnect(this.onSettingsChange, this);
        }
        this._notebook = notebook;
        if ((_b = this._notebook) === null || _b === void 0 ? void 0 : _b.model) {
            this._notebook.model.metadata.changed.connect(this.onSettingsChange, this);
            this._notebook.context.pathChanged.connect(this.onSettingsChange, this);
        }
        this.stateChanged.emit(void 0);
    }
    get enabled() {
        return this._fonts.enabled;
    }
    async setEnabled(enabled) {
        if (this.notebook == null) {
            await this._fonts.settings.set('enabled', enabled);
            this.stateChanged.emit(void 0);
        }
    }
    get notebookMetadata() {
        var _a;
        if ((_a = this.notebook) === null || _a === void 0 ? void 0 : _a.model) {
            return this.notebook.model.metadata.get(PACKAGE_NAME);
        }
    }
    clearNotebookMetadata(fontName) {
        var _a, _b, _c;
        let meta = this.notebookMetadata;
        if (fontName) {
            if ((_a = meta) === null || _a === void 0 ? void 0 : _a.fonts) {
                delete meta.fonts[fontName];
            }
            if ((_b = meta) === null || _b === void 0 ? void 0 : _b.fontLicenses) {
                delete meta.fontLicenses[fontName];
            }
        }
        if ((_c = this.notebook) === null || _c === void 0 ? void 0 : _c.model) {
            this.notebook.model.metadata.set(PACKAGE_NAME, JSON.parse(JSON.stringify(meta)));
        }
        this.stateChanged.emit(void 0);
    }
    dispose() {
        if (this._fonts && this._fonts.settings) {
            this._fonts.settings.changed.disconnect(this.onSettingsChange, this);
        }
        super.dispose();
    }
}
export class FontEditor extends VDomRenderer {
    constructor() {
        super(new FontEditorModel());
        this.addClass(EDITOR_CLASS);
    }
    render() {
        const m = this.model;
        if (!m) {
            return h('div', { key: 'empty' });
        }
        return h('div', { key: 'editor' }, [
            ...this.header(),
            ...[TextKind.code, TextKind.content].map(kind => h('section', { key: `${kind}-section`, title: KIND_LABELS[kind] }, [
                h('h3', { key: `${kind}-header`, className: SECTION_CLASS }, KIND_LABELS[kind]),
                ...[
                    'font-family',
                    'font-size',
                    'line-height'
                ].map((prop) => this.textSelect(prop, kind, { key: `${kind}-${prop}` }))
            ]))
        ]);
    }
    fontFaceExtras(m, fontFamily) {
        let font;
        let unquoted = `${fontFamily}`.slice(1, -1);
        if (m.fonts.fonts.get(unquoted)) {
            font = m.fonts.fonts.get(unquoted);
        }
        return !font ? [] : [this.licenseButton(m, font)];
    }
    licenseButton(m, font) {
        return h('button', {
            className: BUTTON_CLASS,
            title: font.license.name,
            key: font.name,
            onClick: () => m.fonts.requestLicensePane(font)
        }, font.license.spdx);
    }
    textSelect(prop, kind, sectionProps) {
        const m = this.model;
        const onChange = (evt) => {
            let value = evt.target.value;
            value = value === DUMMY ? null : value;
            m.fonts
                .setTextStyle(prop, value, Object.assign({ kind }, (m.notebook ? { notebook: m.notebook } : {})))
                .catch(console.warn);
        };
        const value = m.fonts.getTextStyle(prop, {
            kind,
            notebook: m.notebook || void 0
        });
        const extra = prop === 'font-family' ? this.fontFaceExtras(m, value) : [];
        return h('div', Object.assign({ className: FIELD_CLASS, key: 'select-field' }, sectionProps), [
            h('label', { key: 'select-label' }, TEXT_LABELS[prop]),
            h('div', { key: 'select-wrap' }, [
                ...extra,
                h('select', {
                    className: 'jp-mod-styled',
                    title: `${TEXT_LABELS[prop]}`,
                    onChange,
                    defaultValue: value || DUMMY,
                    key: `select`
                }, [null, ...TEXT_OPTIONS[prop](m.fonts)].map(value => {
                    return h('option', {
                        key: `'${value}'`,
                        value: value == null
                            ? DUMMY
                            : prop === 'font-family'
                                ? `'${value}'`
                                : value
                    }, value || DUMMY);
                }))
            ])
        ]);
    }
    deleteButton(m, fontName) {
        return h('button', {
            className: BUTTON_CLASS,
            title: `Delete Embedded Font`,
            key: 'delete',
            onClick: async () => {
                const result = await showDialog({
                    title: `Delete Embedded Font from Notebook`,
                    body: `If you dont have ${fontName} installed, you might not be able to re-embed it`,
                    buttons: [
                        Dialog.cancelButton(),
                        Dialog.warnButton({ label: 'DELETE' })
                    ]
                });
                if (result.button.accept) {
                    m.clearNotebookMetadata(fontName);
                }
            }
        }, 'Delete');
    }
    enabler(m) {
        const onChange = async (evt) => {
            await m.setEnabled(!!evt.currentTarget.checked);
        };
        return h('label', { key: 'enable-label' }, h('span', { key: 'enable-text' }, 'Enabled'), h('input', {
            key: 'enable-input',
            type: 'checkbox',
            checked: m.enabled,
            onChange
        }));
    }
    embeddedFont(m, fontName) {
        var _a;
        if (((_a = m.notebookMetadata) === null || _a === void 0 ? void 0 : _a.fonts) == null ||
            m.notebookMetadata.fontLicenses == null) {
            return null;
        }
        const faces = m.notebookMetadata.fonts[fontName];
        const license = m.notebookMetadata.fontLicenses[fontName];
        const size = (faces || []).reduce((memo, face) => memo + `${face.src}`.length, license.text.length);
        const kb = parseInt(`${size / 1024}`, 10);
        return h('li', { key: fontName }, [
            h('label', { key: 'label' }, fontName),
            this.licenseButton(m, {
                name: fontName,
                license: {
                    name: license.name,
                    spdx: license.spdx,
                    text: async () => license.text,
                    holders: license.holders
                },
                faces: async () => faces || []
            }),
            h('span', { className: SIZE_CLASS, key: 'font-kb' }, `${kb} kb`),
            this.deleteButton(m, fontName)
        ]);
    }
    header() {
        var _a;
        const m = this.model;
        const title = m.notebook
            ? (_a = m.notebook.context.contentsModel) === null || _a === void 0 ? void 0 : _a.name.replace(/.ipynb$/, '') : 'Global';
        this.title.label = title || 'Unknown';
        const h2 = h('h2', { key: 'scope-head' }, [
            h('label', { key: 'scope-label' }, `Fonts » ${title}`),
            ...(m.notebook
                ? [h('div', { className: 'jp-NotebookIcon', key: 'scope-icon' })]
                : [])
        ]);
        if (m.notebook != null) {
            return [
                h2,
                h('section', { key: 'embed-section' }, [
                    h('h3', { className: SECTION_CLASS, key: 'embed-head' }, 'Embedded fonts'),
                    h('ul', { className: EMBED_CLASS, key: 'embeds' }, Object.keys((m.notebookMetadata || {}).fonts || {}).map(fontName => {
                        return this.embeddedFont(m, fontName);
                    }))
                ])
            ];
        }
        else {
            return [
                h2,
                h('section', { key: 'enable-section', className: ENABLED_CLASS }, [
                    h('h3', { className: SECTION_CLASS, key: 'enable-header' }, 'Enable/Disable All Fonts'),
                    this.enabler(m)
                ])
            ];
        }
    }
}
//# sourceMappingURL=editor.js.map