mirror of
https://github.com/codex-team/editor.js
synced 2024-06-28 10:20:29 +02:00
63eeec0f3b
Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> Co-authored-by: Georgy Berezhnoy <gohabereg@gmail.com> Co-authored-by: tasuku-s <tasuku@freemind.co.jp> Co-authored-by: Athul Anil Kumar <athul7744@outlook.com> Co-authored-by: Taly <vitalik7tv@yandex.ru> Co-authored-by: flaming-cl <51183663+flaming-cl@users.noreply.github.com> Co-authored-by: Nguyen Ngoc Son <sonnn.se@gmail.com> Co-authored-by: Sisir Das K <37764463+sis-dk@users.noreply.github.com> Co-authored-by: Sisir <sisir@hellosivi.com>
102 lines
2 KiB
TypeScript
102 lines
2 KiB
TypeScript
import $ from '../dom';
|
|
import { InlineTool, SanitizerConfig } from '../../../types';
|
|
|
|
/**
|
|
* Bold Tool
|
|
*
|
|
* Inline Toolbar Tool
|
|
*
|
|
* Makes selected text bolder
|
|
*/
|
|
export default class BoldInlineTool implements InlineTool {
|
|
/**
|
|
* Specifies Tool as Inline Toolbar Tool
|
|
*
|
|
* @returns {boolean}
|
|
*/
|
|
public static isInline = true;
|
|
|
|
/**
|
|
* Title for hover-tooltip
|
|
*/
|
|
public static title = 'Bold';
|
|
|
|
/**
|
|
* Sanitizer Rule
|
|
* Leave <b> tags
|
|
*
|
|
* @returns {object}
|
|
*/
|
|
public static get sanitize(): SanitizerConfig {
|
|
return {
|
|
b: {},
|
|
} as SanitizerConfig;
|
|
}
|
|
|
|
/**
|
|
* Native Document's command that uses for Bold
|
|
*/
|
|
private readonly commandName: string = 'bold';
|
|
|
|
/**
|
|
* Styles
|
|
*/
|
|
private readonly CSS = {
|
|
button: 'ce-inline-tool',
|
|
buttonActive: 'ce-inline-tool--active',
|
|
buttonModifier: 'ce-inline-tool--bold',
|
|
};
|
|
|
|
/**
|
|
* Elements
|
|
*/
|
|
private nodes: {button: HTMLButtonElement} = {
|
|
button: undefined,
|
|
};
|
|
|
|
/**
|
|
* Create button for Inline Toolbar
|
|
*/
|
|
public render(): HTMLElement {
|
|
this.nodes.button = document.createElement('button') as HTMLButtonElement;
|
|
this.nodes.button.type = 'button';
|
|
this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
|
|
this.nodes.button.appendChild($.svg('bold', 12, 14));
|
|
|
|
return this.nodes.button;
|
|
}
|
|
|
|
/**
|
|
* Wrap range with <b> tag
|
|
*
|
|
* @param {Range} range - range to wrap
|
|
*/
|
|
public surround(range: Range): void {
|
|
document.execCommand(this.commandName);
|
|
}
|
|
|
|
/**
|
|
* Check selection and set activated state to button if there are <b> tag
|
|
*
|
|
* @param {Selection} selection - selection to check
|
|
*
|
|
* @returns {boolean}
|
|
*/
|
|
public checkState(selection: Selection): boolean {
|
|
const isActive = document.queryCommandState(this.commandName);
|
|
|
|
this.nodes.button.classList.toggle(this.CSS.buttonActive, isActive);
|
|
|
|
return isActive;
|
|
}
|
|
|
|
/**
|
|
* Set a shortcut
|
|
*
|
|
* @returns {boolean}
|
|
*/
|
|
public get shortcut(): string {
|
|
return 'CMD+B';
|
|
}
|
|
}
|