@ebl-vue/editor-full 2.31.11 → 2.31.12

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

@@ -0,0 +1,208 @@
+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';
+import { IconCheck } from "../../../icons"; 
+
+/**
+ * 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-bak/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-bak/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 {};
+  }
+}

package/src/plugins/list-bak/ListRenderer/UnorderedListRenderer.ts

@@ -0,0 +1,123 @@
+import type { UnorderedListItemMeta } from '../types/ItemMeta';
+import type { ListConfig } from '../types/ListParams';
+import { make, isEmpty } 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 UnoderedListCssClasses extends ListCssClasses {
+  /**
+   * CSS class of the unordered list
+   */
+  unorderedList: string;
+}
+
+/**
+ * Class that is responsible for unordered list rendering
+ */
+export class UnorderedListRenderer implements ListRendererInterface<UnorderedListItemMeta> {
+  /**
+   * 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(): UnoderedListCssClasses {
+    return {
+      ...DefaultListCssClasses,
+      unorderedList: `${CssPrefix}-unordered`,
+    };
+  }
+
+  /**
+   * 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 ul element
+   */
+  public renderWrapper(isRoot: boolean): HTMLUListElement {
+    let wrapperElement: HTMLUListElement;
+
+    /**
+     * Check if it's root level
+     */
+    if (isRoot === true) {
+      wrapperElement = make('ul', [UnorderedListRenderer.CSS.wrapper, UnorderedListRenderer.CSS.unorderedList]) as HTMLUListElement;
+    } else {
+      wrapperElement = make('ul', [UnorderedListRenderer.CSS.unorderedList, UnorderedListRenderer.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 unused in rendering of the unordered list
+   * @returns - created html list item element
+   */
+  public renderItem(content: string, _meta: UnorderedListItemMeta): HTMLLIElement {
+    const itemWrapper = make('li', UnorderedListRenderer.CSS.item);
+    const itemContent = make('div', UnorderedListRenderer.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(`.${UnorderedListRenderer.CSS.itemContent}`);
+
+    if (!contentNode) {
+      return '';
+    }
+
+    if (isEmpty(contentNode)) {
+      return '';
+    }
+
+    return contentNode.innerHTML;
+  }
+
+  /**
+   * Returns item meta, for unordered list
+   * @returns Item meta object
+   */
+  public getItemMeta(): UnorderedListItemMeta {
+    return {};
+  }
+
+  /**
+   * Returns default item meta used on creation of the new item
+   */
+  public composeDefaultMeta(): UnorderedListItemMeta {
+    return {};
+  }
+}

package/src/plugins/list-bak/ListRenderer/index.ts

@@ -0,0 +1,6 @@
+import { CheckListRenderer } from './ChecklistRenderer';
+import { OrderedListRenderer } from './OrderedListRenderer';
+import { UnorderedListRenderer } from './UnorderedListRenderer';
+import { DefaultListCssClasses } from './ListRenderer';
+
+export { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer, DefaultListCssClasses };