mirror of
https://github.com/codex-team/editor.js
synced 2024-05-19 06:47:16 +02:00
b39996616c
* renderer batching * initialization and rendering performance optimized * insertMany api method added * Update index.html * rm old method * upd changelog * upd paragraph * paste tests fixed * api blocks tests fixed * backspace event tests fixed * async issues in tests fixed * eslint * stub block added, tests added * eslint * eslint * add test for insertMany() * Update package.json
115 lines
2.5 KiB
TypeScript
115 lines
2.5 KiB
TypeScript
import $ from '../../components/dom';
|
|
import { API, BlockTool, BlockToolConstructorOptions, BlockToolData } from '../../../types';
|
|
import { IconWarning } from '@codexteam/icons';
|
|
|
|
export interface StubData extends BlockToolData {
|
|
title: string;
|
|
savedData: BlockToolData;
|
|
}
|
|
|
|
/**
|
|
* This tool will be shown in place of a block without corresponding plugin
|
|
* It will store its data inside and pass it back with article saving
|
|
*/
|
|
export default class Stub implements BlockTool {
|
|
/**
|
|
* Notify core that tool supports read-only mode
|
|
*/
|
|
public static isReadOnlySupported = true;
|
|
|
|
/**
|
|
* Stub styles
|
|
*
|
|
* @type {{wrapper: string, info: string, title: string, subtitle: string}}
|
|
*/
|
|
private CSS = {
|
|
wrapper: 'ce-stub',
|
|
info: 'ce-stub__info',
|
|
title: 'ce-stub__title',
|
|
subtitle: 'ce-stub__subtitle',
|
|
};
|
|
|
|
/**
|
|
* Main stub wrapper
|
|
*/
|
|
private readonly wrapper: HTMLElement;
|
|
|
|
/**
|
|
* Editor.js API
|
|
*/
|
|
private readonly api: API;
|
|
|
|
/**
|
|
* Stub title — tool name
|
|
*/
|
|
private readonly title: string;
|
|
|
|
/**
|
|
* Stub hint
|
|
*/
|
|
private readonly subtitle: string;
|
|
|
|
/**
|
|
* Original Tool data
|
|
*/
|
|
private readonly savedData: BlockToolData;
|
|
|
|
/**
|
|
* @param options - constructor options
|
|
* @param options.data - stub tool data
|
|
* @param options.api - Editor.js API
|
|
*/
|
|
constructor({ data, api }: BlockToolConstructorOptions<StubData>) {
|
|
this.api = api;
|
|
this.title = data.title || this.api.i18n.t('Error');
|
|
this.subtitle = this.api.i18n.t('The block can not be displayed correctly.');
|
|
this.savedData = data.savedData;
|
|
|
|
this.wrapper = this.make();
|
|
}
|
|
|
|
/**
|
|
* Returns stub holder
|
|
*
|
|
* @returns {HTMLElement}
|
|
*/
|
|
public render(): HTMLElement {
|
|
return this.wrapper;
|
|
}
|
|
|
|
/**
|
|
* Return original Tool data
|
|
*
|
|
* @returns {BlockToolData}
|
|
*/
|
|
public save(): BlockToolData {
|
|
return this.savedData;
|
|
}
|
|
|
|
/**
|
|
* Create Tool html markup
|
|
*
|
|
* @returns {HTMLElement}
|
|
*/
|
|
private make(): HTMLElement {
|
|
const wrapper = $.make('div', this.CSS.wrapper);
|
|
const icon = IconWarning;
|
|
const infoContainer = $.make('div', this.CSS.info);
|
|
const title = $.make('div', this.CSS.title, {
|
|
textContent: this.title,
|
|
});
|
|
const subtitle = $.make('div', this.CSS.subtitle, {
|
|
textContent: this.subtitle,
|
|
});
|
|
|
|
wrapper.innerHTML = icon;
|
|
|
|
infoContainer.appendChild(title);
|
|
infoContainer.appendChild(subtitle);
|
|
|
|
wrapper.appendChild(infoContainer);
|
|
|
|
return wrapper;
|
|
}
|
|
}
|