add delimiter settings

src/assets/editor/delimiter_l.svg.txt

@@ -0,0 +1 @@
+<svg width="19" height="4" viewBox="0 0 19 4" xmlns="http://www.w3.org/2000/svg"><path d="m 16.61577,0 -5.820501,0.28200371 c -1.6647133,0.0806555 -1.6633064,1.74209559 0,1.84786639 L 16.61577,2.5 c 1.663306,0.1057709 1.664713,-2.58065548 0,-2.5 z M 6.9186458,0.51113173 1.2612438,0.8454868 c -1.66376299,0.0983292 -1.68672099,0.7081403 -0.0221,0.7906147 l 5.697126,0.2822659 c 1.664625,0.082474 1.6461385,-1.50556481 -0.017624,-1.40723567 z" /></svg>

src/assets/editor/delimiter_r.svg.txt

@@ -0,0 +1 @@
+<svg width="19" height="4" viewBox="0 0 19 4" xmlns="http://www.w3.org/2000/svg"><path d="m 1.25,0 5.8205009,0.28200371 c 1.6647132,0.0806555 1.6633063,1.74209559 0,1.84786639 L 1.25,2.5 c -1.66330631,0.1057709 -1.66471321,-2.58065548 0,-2.5 z m 9.697124,0.51113173 5.657402,0.33435507 c 1.663763,0.0983292 1.686721,0.7081403 0.0221,0.7906147 L 10.9295,1.9183674 C 9.264875,2.0008418 9.2833615,0.41280259 10.947124,0.51113173 Z" /></svg>

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

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: '<svg></svg>', title: 'UnnamedPlugin' }
   }

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
   }
 

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