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