diff --git a/src/components/inline-tools/inline-tool-bold.ts b/src/components/inline-tools/inline-tool-bold.ts index c3a4d9d2b..05b2bd12a 100644 --- a/src/components/inline-tools/inline-tool-bold.ts +++ b/src/components/inline-tools/inline-tool-bold.ts @@ -7,13 +7,11 @@ import type { MenuConfig } from '../../../types/tools'; * * Inline Toolbar Tool * - * Makes selected text bolder + * Makes selected text bold */ export default class BoldInlineTool implements InlineTool { /** * Specifies Tool as Inline Toolbar Tool - * - * @returns {boolean} */ public static isInline = true; @@ -25,13 +23,11 @@ export default class BoldInlineTool implements InlineTool { /** * Sanitizer Rule * Leave tags - * - * @returns {object} */ public static get sanitize(): SanitizerConfig { return { b: {}, - } as SanitizerConfig; + }; } /** @@ -55,8 +51,6 @@ export default class BoldInlineTool implements InlineTool { /** * Set a shortcut - * - * @returns {boolean} */ public get shortcut(): string { return 'CMD+B'; diff --git a/src/components/inline-tools/inline-tool-italic.ts b/src/components/inline-tools/inline-tool-italic.ts index 526a56779..278d0b968 100644 --- a/src/components/inline-tools/inline-tool-italic.ts +++ b/src/components/inline-tools/inline-tool-italic.ts @@ -1,5 +1,6 @@ import type { InlineTool, SanitizerConfig } from '../../../types'; import { IconItalic } from '@codexteam/icons'; +import type { MenuConfig } from '../../../types/tools'; /** * Italic Tool @@ -11,8 +12,6 @@ import { IconItalic } from '@codexteam/icons'; export default class ItalicInlineTool implements InlineTool { /** * Specifies Tool as Inline Toolbar Tool - * - * @returns {boolean} */ public static isInline = true; @@ -24,13 +23,11 @@ export default class ItalicInlineTool implements InlineTool { /** * Sanitizer Rule * Leave tags - * - * @returns {object} */ public static get sanitize(): SanitizerConfig { return { i: {}, - } as SanitizerConfig; + }; } /** @@ -38,50 +35,17 @@ export default class ItalicInlineTool implements InlineTool { */ private readonly commandName: string = 'italic'; - /** - * Styles - */ - private readonly CSS = { - button: 'ce-inline-tool', - buttonActive: 'ce-inline-tool--active', - buttonModifier: 'ce-inline-tool--italic', - }; - - /** - * Elements - */ - private nodes: {button: HTMLButtonElement} = { - button: null, - }; - /** * 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.innerHTML = IconItalic; - - return this.nodes.button; - } - - /** - * Wrap range with tag - */ - public surround(): void { - document.execCommand(this.commandName); - } - - /** - * Check selection and set activated state to button if there are tag - */ - public checkState(): boolean { - const isActive = document.queryCommandState(this.commandName); - - this.nodes.button.classList.toggle(this.CSS.buttonActive, isActive); - - return isActive; + public render(): MenuConfig { + return { + icon: IconItalic, + name: 'italic', + toggle: true, + onActivate: () => document.execCommand(this.commandName), + isActive: () => document.queryCommandState(this.commandName), + }; } /**