@cairn214/fluent-editor/lib/table/formats/list.cjs.js

A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Quill = require("quill");
const tableConfig = require("../table-config.cjs.js");
const Block = Quill.imports["blots/block"];
const Container = Quill.imports["blots/container"];
class ListContainer extends Container {
  format(name, value) {
    const { row, cell, rowspan, colspan } = this.domNode.dataset;
    if (name === ListContainer.blotName) {
      if (value) {
        super.format(name, { row, cell, rowspan, colspan });
      } else if (row) {
        this.replaceWith("table-cell-line", { row, cell, rowspan, colspan });
      }
    }
  }
}
ListContainer.blotName = "list-container";
ListContainer.tagName = "OL";
class ListItem extends Block {
  static create(value) {
    const node = super.create();
    if (typeof value === "string") {
      value = { value };
    } else {
      [...tableConfig.CELL_IDENTITY_KEYS, ...tableConfig.CELL_ATTRIBUTES].forEach((key) => {
        if (value[key]) {
          node.dataset[key] = value[key];
        }
      });
    }
    node.classList.add(value.value);
    return node;
  }
  static formats(domNode) {
    const formats = {};
    formats.value = domNode.classList.item(0) || void 0;
    return [...tableConfig.CELL_ATTRIBUTES, ...tableConfig.CELL_IDENTITY_KEYS].reduce((tableFormats, key) => {
      if (domNode.dataset[key]) {
        tableFormats[key] = domNode.dataset[key];
      }
      return tableFormats;
    }, formats);
  }
  static register() {
    Quill.register({ "formats/list-container": ListContainer }, true);
  }
  constructor(scroll, domNode) {
    super(scroll, domNode);
    const quill = Quill.find(scroll.domNode.parentNode);
    const range = quill.getSelection();
    if (range) {
      const [line] = quill.getLine(range.index);
      const td = line.domNode.closest("td");
      if (td) {
        [...tableConfig.CELL_IDENTITY_KEYS, ...tableConfig.CELL_ATTRIBUTES].forEach((key) => td.dataset[key] && domNode.setAttribute(`data-${key}`, td.dataset[key]));
      }
    }
    const ui = domNode.ownerDocument.createElement("span");
    const listEventHandler = (e) => {
      if (!scroll.isEnabled()) return;
      const { value } = this.statics.formats(domNode, scroll);
      if (value === "checked") {
        this.format("list", "unchecked");
        e.preventDefault();
      } else if (value === "unchecked") {
        this.format("list", "checked");
        e.preventDefault();
      }
    };
    ui.addEventListener("mousedown", listEventHandler);
    ui.addEventListener("touchstart", listEventHandler);
    this.attachUI(ui);
  }
  format(name, value) {
    if (name !== ListItem.blotName) {
      super.format(name, value);
      return;
    }
    const type = value && typeof value === "object" ? value.value : value;
    const oldClass = this.domNode.classList[0];
    const tdDom = this.domNode.closest(".editing-select-able");
    const tableCellBlot = tdDom && Quill.find(tdDom);
    const images = this.domNode.querySelectorAll("img[data-image-id]");
    if (!type || type === oldClass) {
      if (images && images.length) {
        images.forEach((img) => {
          img.style.verticalAlign = "baseLine";
        });
      }
      if (tableCellBlot && tableCellBlot.statics.blotName === "table") {
        const tableCellFormats = tableCellBlot.formats();
        this.replaceWith("table-cell-line", tableCellFormats);
        if (this.parent.statics.blotName === ListContainer.blotName) {
          this.parent.unwrap();
        }
      } else {
        super.format(name, value);
      }
    } else if (oldClass) {
      this.domNode.className = this.domNode.className.replace(oldClass, type);
    } else {
      this.domNode.classList.add(type);
    }
  }
  optimize(context) {
    const tail = this.prev && this.prev.domNode.lastChild;
    if (tail && tail.className && tail.className.includes("ql-soft-break")) {
      this.domNode.childNodes.forEach((v, i) => {
        if (i > 0) {
          this.prev.domNode.appendChild(v);
        }
      });
      this.remove();
      return;
    }
    super.optimize(context);
    const parentFormats = getFormats(this.parent.domNode);
    const formats = ListItem.formats(this.domNode);
    const data = this.domNode.dataset || [];
    const images = this.domNode.querySelectorAll("img[data-image-id]");
    if (parentFormats.list !== formats.value) {
      const oldClass = this.parent.domNode.classList[0];
      if (oldClass) {
        this.parent.domNode.className = this.parent.domNode.className.replace(oldClass, formats.value);
      } else {
        this.parent.domNode.classList.add(formats.value);
      }
    }
    if (data.cell && !parentFormats.cell) {
      [...tableConfig.CELL_IDENTITY_KEYS, ...tableConfig.CELL_ATTRIBUTES].forEach((key) => (formats[key] || data[key]) && this.parent.domNode.setAttribute(`data-${key}`, formats[key] || data[key]));
      if (this.parent.parent.statics.blotName !== "table") {
        delete formats.list;
        this.wrap("table", formats);
      }
    }
    if (images) {
      images.forEach((img) => {
        img.style.verticalAlign = "top";
      });
    }
  }
}
ListItem.blotName = "list";
ListItem.tagName = "LI";
ListContainer.allowedChildren = [ListItem];
ListItem.requiredContainer = ListContainer;
function getFormats(dom) {
  const formats = {};
  if (dom.tagName === "OL") {
    formats.list = dom.classList.item(0);
  }
  return [...tableConfig.CELL_ATTRIBUTES, ...tableConfig.CELL_IDENTITY_KEYS].reduce((tableFormats, attribute) => {
    if (dom.hasAttribute(`data-${attribute}`)) {
      tableFormats[attribute] = dom.getAttribute(`data-${attribute}`) || void 0;
    }
    return tableFormats;
  }, formats);
}
exports.ListContainer = ListContainer;
exports.default = ListItem;
//# sourceMappingURL=list.cjs.js.map