@ebl-vue/editor-full 1.0.8

package/src/plugins/inline-code/index.css

@@ -0,0 +1,11 @@
+.inline-code {
+  background: rgba(250, 239, 240, 0.78);
+  color: #b44437;
+  padding: 3px 4px;
+  border-radius: 5px;
+  margin: 0 1px;
+  font-family: inherit;
+  font-size: 0.86em;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+}

package/src/plugins/inline-code/index.ts

@@ -0,0 +1,205 @@
+/**
+ * Build styles
+ */
+import './index.css';
+const IconBrackets = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8L5 12L9 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 8L19 12L15 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+import { API, InlineTool, InlineToolConstructorOptions, SanitizerConfig } from "@editorjs/editorjs";
+
+interface IconClasses {
+  base: string;
+  active: string;
+}
+
+/**
+ * Inline Code Tool for the Editor.js
+ *
+ * Allows to wrap inline fragment and style it somehow.
+ */
+export default class InlineCode implements InlineTool {
+  /**
+   * Editor.js API
+   */
+  private api: API;
+  /**
+   * Button element for the toolbar
+   */
+  private button: HTMLButtonElement | null;
+  /**
+   * Tag representing the term
+   */
+  private tag: string = 'CODE';
+  /**
+   * CSS classes for the icon
+   */
+  private iconClasses: IconClasses;
+
+  /**
+   * Class name for term-tag
+   *
+   * @type {string}
+   */
+  static get CSS(): string {
+    return 'inline-code';
+  }
+
+  constructor({ api }: InlineToolConstructorOptions) {
+    this.api = api;
+
+    this.button = null;
+
+    this.iconClasses = {
+      base: this.api.styles.inlineToolButton,
+      active: this.api.styles.inlineToolButtonActive,
+    };
+  }
+
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   *
+   * @return {boolean}
+   */
+  static get isInline(): boolean {
+    return true;
+  }
+
+  /**
+   * Create button element for Toolbar
+   *
+   * @return {HTMLElement}
+   */
+  render(): HTMLElement {
+    this.button = document.createElement('button');
+    this.button.type = 'button';
+    this.button.classList.add(this.iconClasses.base);
+    this.button.innerHTML = this.toolboxIcon;
+
+    return this.button;
+  }
+
+  /**
+   * Wrap/Unwrap selected fragment
+   *
+   * @param {Range} range - selected fragment
+   */
+  surround(range: Range): void {
+    if (!range) {
+      return;
+    }
+
+    let termWrapper = this.api.selection.findParentTag(this.tag, InlineCode.CSS) as HTMLElement;
+
+    /**
+     * If the start or end of the selection range is within a highlighted block
+     */
+    if (termWrapper) {
+      this.unwrap(termWrapper);
+    } else {
+      const existingCodeTag = range.commonAncestorContainer.parentElement?.querySelector(this.tag);
+      if (!existingCodeTag) {
+        this.wrap(range);
+      }
+    }
+  }
+
+   /**
+   * Wrap selection with term-tag
+   *
+   * @param {Range} range - selected fragment
+   */
+  wrap(range: Range): void {
+    /**
+     * Create a wrapper for highlighting
+     */
+    let span = document.createElement(this.tag);
+
+    span.classList.add(InlineCode.CSS);
+
+    /**
+     * SurroundContent throws an error if the Range splits a non-Text node with only one of its boundary points
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents}
+     *
+     * // range.surroundContents(span);
+     */
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+
+    /**
+     * Expand (add) selection to highlighted block
+     */
+    this.api.selection.expandToTag(span);
+  }
+
+  /**
+   * Unwrap term-tag
+   *
+   * @param {HTMLElement} termWrapper - term wrapper tag
+   */
+  unwrap(termWrapper: HTMLElement): void {
+    /**
+     * Expand selection to all term-tag
+     */
+    this.api.selection.expandToTag(termWrapper);
+
+    const sel = window.getSelection();
+    if (!sel) return;
+
+    const range = sel.getRangeAt(0);
+    const unwrappedContent = range.extractContents();
+
+    /**
+     * Remove empty term-tag
+     */
+    termWrapper.parentNode?.removeChild(termWrapper);
+
+    /**
+     * Insert extracted content
+     */
+    range.insertNode(unwrappedContent);
+
+    /**
+     * Restore selection
+     */
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  /**
+   * Check and change Term's state for current selection
+   * 
+   * @return {boolean}
+   */
+  checkState(): boolean {
+    const termTag = this.api.selection.findParentTag(this.tag, InlineCode.CSS);
+
+    if (this.button) {
+      this.button.classList.toggle(this.iconClasses.active, !!termTag);
+    }
+
+    return !!termTag;
+  }
+
+
+  /**
+   * Get Tool icon's SVG
+   * @return {string}
+   */
+  get toolboxIcon(): string {
+    return IconBrackets;
+  }
+
+  /**
+   * Sanitizer rule
+   * @return {SanitizerConfig}
+   */
+  static get sanitize(): SanitizerConfig {
+    return {
+      code: {
+        class: InlineCode.CSS,
+      },
+    };
+  }
+}

package/src/plugins/list/ListRenderer/ChecklistRenderer.ts

@@ -0,0 +1,211 @@
+import type { ChecklistItemMeta } from '../types/ItemMeta';
+import type { ListConfig } from '../types/ListParams';
+import { isEmpty, make } from '@editorjs/dom';
+import { DefaultListCssClasses } from './ListRenderer';
+import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
+import { CssPrefix } from '../styles/CssPrefix';
+const IconCheck = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 12L10.4884 15.8372C10.5677 15.9245 10.705 15.9245 10.7844 15.8372L17 9" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>
+`;
+
+/**
+ * Interface that represents all list used only in unordered list rendering
+ */
+interface ChecklistCssClasses extends ListCssClasses {
+  /**
+   * CSS class of the checklist
+   */
+  checklist: string;
+
+  /**
+   * CSS class of the checked checkbox
+   */
+  itemChecked: string;
+
+  /**
+   * CSS class for the special hover behavior of the checkboc
+   */
+  noHover: string;
+
+  /**
+   * CSS class of the checkbox
+   */
+  checkbox: string;
+
+  /**
+   * CSS class of the checkbox container
+   */
+  checkboxContainer: string;
+
+  /**
+   * CSS class for disabled checkbox check
+   */
+  checkboxCheckDisabled: string;
+}
+
+/**
+ * Class that is responsible for checklist rendering
+ */
+export class CheckListRenderer implements ListRendererInterface<ChecklistItemMeta> {
+  /**
+   * Tool's configuration
+   */
+  protected config?: ListConfig;
+
+  /**
+   * Is Editorjs List Tool read-only option
+   */
+  private readOnly: boolean;
+
+  /**
+   * Getter for all CSS classes used in unordered list rendering
+   */
+  private static get CSS(): ChecklistCssClasses {
+    return {
+      ...DefaultListCssClasses,
+      checklist: `${CssPrefix}-checklist`,
+      itemChecked: `${CssPrefix}__checkbox--checked`,
+      noHover: `${CssPrefix}__checkbox--no-hover`,
+      checkbox: `${CssPrefix}__checkbox-check`,
+      checkboxContainer: `${CssPrefix}__checkbox`,
+      checkboxCheckDisabled: `${CssPrefix}__checkbox-check--disabled`,
+    };
+  }
+
+  /**
+   * Assign passed readonly mode and config to relevant class properties
+   * @param readonly - read-only mode flag
+   * @param config - user config for Tool
+   */
+  constructor(readonly: boolean, config?: ListConfig) {
+    this.config = config;
+    this.readOnly = readonly;
+  }
+
+  /**
+   * Renders ul wrapper for list
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
+   * @returns - created html ul element
+   */
+  public renderWrapper(isRoot: boolean): HTMLUListElement {
+    let wrapperElement: HTMLUListElement;
+
+    /**
+     * Check if it's root level
+     */
+    if (isRoot === true) {
+      wrapperElement = make('ul', [CheckListRenderer.CSS.wrapper, CheckListRenderer.CSS.checklist]) as HTMLUListElement;
+
+      /**
+       * Delegate clicks from wrapper to items
+       */
+      wrapperElement.addEventListener('click', (event) => {
+        const target = event.target as Element | null;
+
+        if (target) {
+          const checkbox = target.closest(`.${CheckListRenderer.CSS.checkboxContainer}`);
+
+          if (checkbox && checkbox.contains(target)) {
+            this.toggleCheckbox(checkbox);
+          }
+        }
+      });
+    } else {
+      wrapperElement = make('ul', [CheckListRenderer.CSS.checklist, CheckListRenderer.CSS.itemChildren]) as HTMLUListElement;
+    }
+
+    return wrapperElement;
+  }
+
+  /**
+   * Redners list item element
+   * @param content - content used in list item rendering
+   * @param meta - meta of the list item used in rendering of the checklist
+   * @returns - created html list item element
+   */
+  public renderItem(content: string, meta: ChecklistItemMeta): HTMLLIElement {
+    const itemWrapper = make('li', [CheckListRenderer.CSS.item, CheckListRenderer.CSS.item]);
+    const itemContent = make('div', CheckListRenderer.CSS.itemContent, {
+      innerHTML: content,
+      contentEditable: (!this.readOnly).toString(),
+    });
+
+    const checkbox = make('span', CheckListRenderer.CSS.checkbox);
+    const checkboxContainer = make('div', CheckListRenderer.CSS.checkboxContainer);
+
+    if (meta.checked === true) {
+      checkboxContainer.classList.add(CheckListRenderer.CSS.itemChecked);
+    }
+
+    // Disable checkbox interaction in read-only mode
+    if (this.readOnly) {
+      checkboxContainer.classList.add(CheckListRenderer.CSS.checkboxCheckDisabled);
+    }
+
+    checkbox.innerHTML = IconCheck;
+    checkboxContainer.appendChild(checkbox);
+
+    itemWrapper.appendChild(checkboxContainer);
+    itemWrapper.appendChild(itemContent);
+
+    return itemWrapper as HTMLLIElement;
+  }
+
+  /**
+   * Return the item content
+   * @param item - item wrapper (<li>)
+   * @returns - item content string
+   */
+  public getItemContent(item: Element): string {
+    const contentNode = item.querySelector(`.${CheckListRenderer.CSS.itemContent}`);
+
+    if (!contentNode) {
+      return '';
+    }
+
+    if (isEmpty(contentNode)) {
+      return '';
+    }
+
+    return contentNode.innerHTML;
+  }
+
+  /**
+   * Return meta object of certain element
+   * @param item - will be returned meta information of this item
+   * @returns Item meta object
+   */
+  public getItemMeta(item: Element): ChecklistItemMeta {
+    const checkbox = item.querySelector(`.${CheckListRenderer.CSS.checkboxContainer}`);
+
+    return {
+      checked: checkbox ? checkbox.classList.contains(CheckListRenderer.CSS.itemChecked) : false,
+    };
+  }
+
+  /**
+   * Returns default item meta used on creation of the new item
+   */
+  public composeDefaultMeta(): ChecklistItemMeta {
+    return { checked: false };
+  }
+
+  /**
+   * Toggle checklist item state
+   * @param checkbox - checkbox element to be toggled
+   */
+  private toggleCheckbox(checkbox: Element): void {
+    checkbox.classList.toggle(CheckListRenderer.CSS.itemChecked);
+    checkbox.classList.add(CheckListRenderer.CSS.noHover);
+    checkbox.addEventListener('mouseleave', () => this.removeSpecialHoverBehavior(checkbox), { once: true });
+  }
+
+  /**
+   * Removes class responsible for special hover behavior on an item
+   * @param el - item wrapper
+   */
+  private removeSpecialHoverBehavior(el: Element): void {
+    el.classList.remove(CheckListRenderer.CSS.noHover);
+  }
+}

package/src/plugins/list/ListRenderer/ListRenderer.ts

@@ -0,0 +1,73 @@
+import { CssPrefix } from '../styles/CssPrefix';
+/**
+ * CSS classes for the List Tool
+ */
+export const DefaultListCssClasses = {
+  wrapper: CssPrefix,
+  item: `${CssPrefix}__item`,
+  itemContent: `${CssPrefix}__item-content`,
+  itemChildren: `${CssPrefix}__item-children`,
+};
+
+/**
+ * Interface that represents default list css classes
+ */
+export interface ListCssClasses {
+  /**
+   * CSS class of the whole list wrapper
+   */
+  wrapper: string;
+
+  /**
+   * CSS class of the list item
+   */
+  item: string;
+
+  /**
+   * CSS class of the list item content element
+   */
+  itemContent: string;
+
+  /**
+   * CSS class of the children item wrapper
+   */
+  itemChildren: string;
+}
+
+/**
+ * Interface that represents all list renderer classes
+ */
+export interface ListRendererInterface<ItemMeta> {
+  /**
+   * Renders wrapper for list
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
+   * @returns - created html ul element
+   */
+  renderWrapper: (isRoot: boolean) => HTMLElement;
+
+  /**
+   * Redners list item element
+   * @param content - content of the list item
+   * @returns - created html list item element
+   */
+  renderItem: (content: string, meta: ItemMeta) => HTMLElement;
+
+  /**
+   * Return the item content
+   * @param {Element} item - item wrapper (<li>)
+   * @returns {string}
+   */
+  getItemContent: (item: Element) => string;
+
+  /**
+   * Return meta object of certain element
+   * @param {Element} item - item of the list to get meta from
+   * @returns {ItemMeta} Item meta object
+   */
+  getItemMeta: (item: Element) => ItemMeta;
+
+  /**
+   * Returns default item meta used on creation of the new item
+   */
+  composeDefaultMeta: () => ItemMeta;
+};

package/src/plugins/list/ListRenderer/OrderedListRenderer.ts

@@ -0,0 +1,123 @@
+import type { OrderedListItemMeta } from '../types/ItemMeta';
+import type { ListConfig } from '../types/ListParams';
+import { isEmpty, make } from '@editorjs/dom';
+import { DefaultListCssClasses } from './ListRenderer';
+import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
+import { CssPrefix } from '../styles/CssPrefix';
+
+/**
+ * Interface that represents all list used only in unordered list rendering
+ */
+interface OrderedListCssClasses extends ListCssClasses {
+  /**
+   * CSS class of the ordered list
+   */
+  orderedList: string;
+}
+
+/**
+ * Class that is responsible for ordered list rendering
+ */
+export class OrderedListRenderer implements ListRendererInterface<OrderedListItemMeta> {
+  /**
+   * Tool's configuration
+   */
+  protected config?: ListConfig;
+
+  /**
+   * Is Editorjs List Tool read-only option
+   */
+  private readOnly: boolean;
+
+  /**
+   * Getter for all CSS classes used in unordered list rendering
+   */
+  private static get CSS(): OrderedListCssClasses {
+    return {
+      ...DefaultListCssClasses,
+      orderedList: `${CssPrefix}-ordered`,
+    };
+  }
+
+  /**
+   * Assign passed readonly mode and config to relevant class properties
+   * @param readonly - read-only mode flag
+   * @param config - user config for Tool
+   */
+  constructor(readonly: boolean, config?: ListConfig) {
+    this.config = config;
+    this.readOnly = readonly;
+  }
+
+  /**
+   * Renders ol wrapper for list
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
+   * @returns - created html ol element
+   */
+  public renderWrapper(isRoot: boolean): HTMLOListElement {
+    let wrapperElement: HTMLOListElement;
+
+    /**
+     * Check if it's root level
+     */
+    if (isRoot === true) {
+      wrapperElement = make('ol', [OrderedListRenderer.CSS.wrapper, OrderedListRenderer.CSS.orderedList]) as HTMLOListElement;
+    } else {
+      wrapperElement = make('ol', [OrderedListRenderer.CSS.orderedList, OrderedListRenderer.CSS.itemChildren]) as HTMLOListElement;
+    }
+
+    return wrapperElement;
+  }
+
+  /**
+   * Redners list item element
+   * @param content - content used in list item rendering
+   * @param _meta - meta of the list item unused in rendering of the ordered list
+   * @returns - created html list item element
+   */
+  public renderItem(content: string, _meta: OrderedListItemMeta): HTMLLIElement {
+    const itemWrapper = make('li', OrderedListRenderer.CSS.item);
+    const itemContent = make('div', OrderedListRenderer.CSS.itemContent, {
+      innerHTML: content,
+      contentEditable: (!this.readOnly).toString(),
+    });
+
+    itemWrapper.appendChild(itemContent);
+
+    return itemWrapper as HTMLLIElement;
+  }
+
+  /**
+   * Return the item content
+   * @param item - item wrapper (<li>)
+   * @returns - item content string
+   */
+  public getItemContent(item: Element): string {
+    const contentNode = item.querySelector(`.${OrderedListRenderer.CSS.itemContent}`);
+
+    if (!contentNode) {
+      return '';
+    }
+
+    if (isEmpty(contentNode)) {
+      return '';
+    }
+
+    return contentNode.innerHTML;
+  }
+
+  /**
+   * Returns item meta, for ordered list
+   * @returns item meta object
+   */
+  public getItemMeta(): OrderedListItemMeta {
+    return {};
+  }
+
+  /**
+   * Returns default item meta used on creation of the new item
+   */
+  public composeDefaultMeta(): OrderedListItemMeta {
+    return {};
+  }
+}