From fb5b5add6ed83d8821bbf6b126be9066149dbac0 Mon Sep 17 00:00:00 2001 From: koehr Date: Mon, 13 Apr 2020 01:22:54 +0200 Subject: [PATCH] add delimiter settings --- src/assets/editor/delimiter_l.svg.txt | 1 + src/assets/editor/delimiter_r.svg.txt | 1 + src/editor/content-block.ts | 12 +++------ src/editor/contentless-block.ts | 36 ++++++++++++++++++++++----- src/editor/delimiter.ts | 27 ++++++++++++++------ src/editor/heading.ts | 5 +--- 6 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 src/assets/editor/delimiter_l.svg.txt create mode 100644 src/assets/editor/delimiter_r.svg.txt diff --git a/src/assets/editor/delimiter_l.svg.txt b/src/assets/editor/delimiter_l.svg.txt new file mode 100644 index 0000000..6966b52 --- /dev/null +++ b/src/assets/editor/delimiter_l.svg.txt @@ -0,0 +1 @@ + diff --git a/src/assets/editor/delimiter_r.svg.txt b/src/assets/editor/delimiter_r.svg.txt new file mode 100644 index 0000000..fd9252f --- /dev/null +++ b/src/assets/editor/delimiter_r.svg.txt @@ -0,0 +1 @@ + diff --git a/src/editor/content-block.ts b/src/editor/content-block.ts index d766cdd..017a7a6 100644 --- a/src/editor/content-block.ts +++ b/src/editor/content-block.ts @@ -33,7 +33,7 @@ export interface ContentBlockArgs { data?: BlockToolData; } -interface CSSClasses { +export interface CSSClasses { [key: string]: string; } @@ -63,18 +63,14 @@ export class ContentBlock implements BlockTool { protected _data: ContentBlockData protected _config: ContentBlockConfig protected _placeholder: string - protected _CSS: CSSClasses + protected _CSS: CSSClasses = {} protected onKeyUp: (event: KeyboardEvent) => void protected _settingButtons: ContentBlockSettings = [] constructor ({ data, config, api }: ContentBlockArgs) { this.api = api this._config = config as ContentBlockConfig - - this._CSS = { - block: this.api.styles.block, - wrapper: 'card-content-block' - } + this._CSS.block = this.api.styles.block this.onKeyUp = (event: KeyboardEvent) => this._onKeyUp(event) @@ -98,7 +94,7 @@ export class ContentBlock implements BlockTool { // whenever a redraw is needed the result is saved in this._element protected _render (): HTMLElement { const el = document.createElement('DIV') - el.classList.add(this._CSS.wrapper, this._CSS.block) + el.classList.add(this._CSS.block) el.dataset.placeholder = this._placeholder el.addEventListener('keyup', this.onKeyUp) el.innerHTML = this.data.text diff --git a/src/editor/contentless-block.ts b/src/editor/contentless-block.ts index d048a01..7e88964 100644 --- a/src/editor/contentless-block.ts +++ b/src/editor/contentless-block.ts @@ -1,4 +1,5 @@ import { BlockTool, BlockToolData, ToolSettings, ToolboxConfig, API } from '@editorjs/editorjs' +import { ContentBlockSettings, CSSClasses } from './content-block' export interface BlockToolArgs { api: API; @@ -15,32 +16,55 @@ export class ContentlessBlock implements BlockTool { protected _element: HTMLElement protected _data: object protected _config: ToolSettings + protected _CSS: CSSClasses = {} + protected _settingButtons: ContentBlockSettings = [] constructor ({ data, config, api }: BlockToolArgs) { this.api = api this._config = config as ToolSettings this._data = data || {} + this._CSS.block = this.api.styles.block this._element = this._render() } - protected get _CSS (): { [key: string]: string } { - return { block: this.api.styles.block } - } - protected _render (): HTMLElement { const el = document.createElement('DIV') el.classList.add(this._CSS.block) return el } - render (): HTMLElement { + public render (): HTMLElement { return this._element } - save (_toolsContent: HTMLElement): object { + public save (_toolsContent: HTMLElement): object { return {} } + public renderSettings (): HTMLElement { + const wrapper = document.createElement('DIV') + + this._settingButtons.forEach(tune => { + // make sure the settings button does something + if (!tune.icon || typeof tune.action !== 'function') return + + const { name, icon, action, isActive } = tune + + const btn = document.createElement('SPAN') + btn.classList.add(this.api.styles.settingsButton) + + if (typeof isActive === 'function' && isActive(name)) { + btn.classList.add(this.api.styles.settingsButtonActive) + } + btn.innerHTML = icon + btn.addEventListener('click', event => action(name, event)) + + wrapper.appendChild(btn) + }) + + return wrapper + } + static get toolbox (): ToolboxConfig { return { icon: '', title: 'UnnamedPlugin' } } diff --git a/src/editor/delimiter.ts b/src/editor/delimiter.ts index 324b1da..99b3438 100644 --- a/src/editor/delimiter.ts +++ b/src/editor/delimiter.ts @@ -1,18 +1,31 @@ -import ContentlessBlock from './contentless-block' +import { ContentlessBlock, BlockToolArgs } from './contentless-block' import icon from '../assets/editor/delimiter.svg.txt' +import iconR from '../assets/editor/delimiter_r.svg.txt' +import iconL from '../assets/editor/delimiter_l.svg.txt' const title = 'Delimiter' -export class Delimiter extends ContentlessBlock { - protected get _CSS () { - return { - block: this.api.styles.block, - wrapper: 'card-delimiter' +class Delimiter extends ContentlessBlock { + constructor (args: BlockToolArgs) { + super(args) + this._settingButtons = [ + { name: 'straight', icon, action: (name: string) => this.setDelimiterType(name) }, + { name: 'pointing-left', icon: iconL, action: (name: string) => this.setDelimiterType(name) }, + { name: 'pointing-right', icon: iconR, action: (name: string) => this.setDelimiterType(name) } + ] + } + + private setDelimiterType (name: string) { + this._element.classList.remove('pointing-left') + this._element.classList.remove('pointing-right') + + if (name === 'pointing-left' || name === 'pointing-right') { + this._element.classList.add(name) } } protected _render (): HTMLElement { const el = document.createElement('HR') - el.classList.add(this._CSS.wrapper, this._CSS.block) + el.classList.add('card-delimiter', this._CSS.block) return el } diff --git a/src/editor/heading.ts b/src/editor/heading.ts index a7daa70..9859916 100644 --- a/src/editor/heading.ts +++ b/src/editor/heading.ts @@ -49,7 +49,6 @@ class Heading extends ContentBlock { constructor (args: ContentBlockArgs) { super(args) this._config = args.config as HeadingConfig - this._CSS.wrapper = 'card-content-block' if (this._config.levels === undefined) { this._config.levels = [HeadingLevel.Two, HeadingLevel.Three] @@ -110,11 +109,9 @@ class Heading extends ContentBlock { } protected _render (): HTMLElement { - console.log('render', `H${this.currentLevel}`, this.data) - const el = document.createElement(`H${this.currentLevel}`) el.innerHTML = this.data.text || '' - el.classList.add(this._CSS.wrapper, this._CSS.block) + el.classList.add(this._CSS.block) el.contentEditable = 'true' el.dataset.placeholder = this._config.placeholder || '' return el