@ebl-vue/editor-full 1.0.8

package/src/plugins/table/plugin.ts

@@ -0,0 +1,254 @@
+import Table from './table';
+import * as $ from './utils/dom';
+
+import { IconTable, IconTableWithHeadings, IconTableWithoutHeadings, IconStretch, IconCollapse } from '../../icons';
+import type { BlockTool, BlockToolConstructorOptions,PasteEvent } from '@ebl-vue/editorjs';
+
+/**
+ * @typedef {object} TableData - configuration that the user can set for the table
+ * @property {number} rows - number of rows in the table
+ * @property {number} cols - number of columns in the table
+ */
+/**
+ * @typedef {object} Tune - setting for the table
+ * @property {string} name - tune name
+ * @property {HTMLElement} icon - icon for the tune
+ * @property {boolean} isActive - default state of the tune
+ * @property {void} setTune - set tune state to the table data
+ */
+/**
+ * @typedef {object} TableConfig - object with the data transferred to form a table
+ * @property {boolean} withHeading - setting to use cells of the first row as headings
+ * @property {string[][]} content - two-dimensional array which contains table content
+ */
+/**
+ * @typedef {object} TableConstructor
+ * @property {TableConfig} data — previously saved data
+ * @property {TableConfig} config - user config for Tool
+ * @property {object} api - Editor.js API
+ * @property {boolean} readOnly - read-only mode flag
+ */
+/**
+ * @typedef {import('@editorjs/editorjs').PasteEvent} PasteEvent
+ */
+
+
+/**
+ * Table block for Editor.js
+ */
+export default class TableBlock implements BlockTool {
+  private api: any;
+  private data: any;
+  private config: any;
+  private container: any;
+  //private block: any;
+  private readOnly: any;
+  private table: any;
+  
+  /**
+   * Notify core that read-only mode is supported
+   *
+   * @returns {boolean}
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+  /**
+   * Allow to press Enter inside the CodeTool textarea
+   *
+   * @returns {boolean}
+   * @public
+   */
+  static get enableLineBreaks() {
+    return true;
+  }
+
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   *
+   * @param {TableConstructor} init
+   */
+  constructor({ data, config, api, readOnly, block }: BlockToolConstructorOptions) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this.config = config;
+    this.data = {
+      withHeadings: this.getConfig('withHeadings', undefined, data),
+      stretched: this.getConfig('stretched', undefined, data),
+      content: data && data.content ? data.content : [],
+      colWidth: data && data.colWidth ? data.colWidth : []
+    };
+    this.table = null;
+    //this.block = block;
+  }
+
+  /**
+   * Get Tool toolbox settings
+   * icon - Tool icon's SVG
+   * title - title to show in toolbox
+   *
+   * @returns {{icon: string, title: string}}
+   */
+  static get toolbox() {
+    return {
+      icon: IconTable,
+      title: 'Table'
+    };
+  }
+
+  /**
+   * Return Tool's view
+   *
+   * @returns {HTMLDivElement}
+   */
+  render() {
+    /** creating table */
+    this.table = new Table(this.readOnly, this.api, this.data, this.config);
+
+    /** creating container around table */
+    this.container = $.make('div', this.api.styles.block);
+    
+    this.container.appendChild(this.table.getWrapper());
+
+    this.table.setHeadingsSetting(this.data.withHeadings);
+
+    return this.container;
+  }
+
+  /**
+   * Returns plugin settings
+   *
+   * @returns {Array}
+   */
+  renderSettings() {
+    return [
+      {
+        label: this.api.i18n.t('With headings'),
+        icon: IconTableWithHeadings,
+        isActive: this.data.withHeadings,
+        closeOnActivate: true,
+        toggle: true,
+        hint: {
+          title: this.api.i18n.t('With headings')
+        },
+        onActivate: () => {
+          this.data.withHeadings = true;
+          this.table.setHeadingsSetting(this.data.withHeadings);
+        }
+      }, {
+        label: this.api.i18n.t('Without headings'),
+        icon: IconTableWithoutHeadings,
+        isActive: !this.data.withHeadings,
+        closeOnActivate: true,
+        toggle: true,
+        hint: {
+          title: this.api.i18n.t('Without headings')
+        },
+        onActivate: () => {
+          this.data.withHeadings = false;
+          this.table.setHeadingsSetting(this.data.withHeadings);
+        }
+      },
+      // {
+      //   label: this.data.stretched ? this.api.i18n.t('Collapse') : this.api.i18n.t('Stretch'),
+      //   icon: this.data.stretched ? IconCollapse : IconStretch,
+      //   closeOnActivate: true,
+      //   toggle: true,
+      //   onActivate: () => {
+      //     this.data.stretched = !this.data.stretched;
+      //     this.block.stretched = this.data.stretched;
+      //   }
+      // }
+    ];
+  }
+  /**
+   * Extract table data from the view
+   *
+   * @returns {TableData} - saved data
+   */
+  save() {
+    const tableContent = this.table.getData();
+
+    const result = {
+      withHeadings: this.data.withHeadings,
+      stretched: this.data.stretched,
+      content: tableContent
+    };
+
+    return result;
+  }
+
+  /**
+   * Plugin destroyer
+   *
+   * @returns {void}
+   */
+  destroy() {
+    this.table.destroy();
+  }
+
+  /**
+   * A helper to get config value.
+   *
+   * @param {string} configName - the key to get from the config.
+   * @param {any} defaultValue - default value if config doesn't have passed key
+   * @param {object} savedData - previously saved data. If passed, the key will be got from there, otherwise from the config
+   * @returns {any} - config value.
+   */
+  getConfig(configName: string, defaultValue = undefined, savedData = undefined) {
+    const data = this.data || savedData;
+
+    if (data) {
+      return data[configName] ? data[configName] : defaultValue;
+    }
+
+    return this.config && this.config[configName] ? this.config[configName] : defaultValue;
+  }
+
+  /**
+   * Table onPaste configuration
+   *
+   * @public
+   */
+  static get pasteConfig() {
+    return { tags: ['TABLE', 'TR', 'TH', 'TD'] };
+  }
+
+  /**
+   * On paste callback that is fired from Editor
+   *
+   * @param {PasteEvent} event - event with pasted data
+   */
+  onPaste(event: PasteEvent) {
+    if ('data' in event.detail) {
+      const table = event.detail.data as HTMLElement;
+
+      /** Check if the first row is a header */
+      const firstRowHeading = table.querySelector(':scope > thead, tr:first-of-type th');
+
+      /** Get all rows from the table */
+      const rows = Array.from(table.querySelectorAll('tr'));
+
+      /** Generate a content matrix */
+      const content = rows.map((row) => {
+        /** Get cells from row */
+        const cells = Array.from(row.querySelectorAll('th, td'))
+
+        /** Return cells content */
+        return cells.map((cell) => cell.innerHTML);
+      });
+
+      /** Update Tool's data */
+      this.data = {
+        withHeadings: firstRowHeading !== null,
+        content
+      };
+
+      /** Update table block */
+      if (this.table.wrapper) {
+        this.table.wrapper.replaceWith(this.render());
+      }
+    }
+  }
+}

package/src/plugins/table/style.css

@@ -0,0 +1,388 @@
+.tc-wrap {
+  --color-background: #f9f9fb;
+  --color-text-secondary: #7b7e89;
+  --color-border: #e8e8eb;
+  --cell-size: 34px;
+  --toolbox-icon-size: 18px;
+  --toolbox-padding: 6px;
+  --toolbox-aiming-field-size: calc(var(--toolbox-icon-size) + var(--toolbox-padding)*2);
+  --col-width: 100px 100px 100px;
+  position: relative;
+  height: 100%;
+  /* width: 100%; */
+  margin-top: var(--toolbox-icon-size);
+  box-sizing: border-box;
+  display: inline-grid;
+  
+  z-index: 0
+}
+
+.tc-wrap--readonly {
+
+}
+
+.tc-wrap svg {
+  vertical-align: top
+}
+
+@media print {
+  .tc-wrap {
+    border-left-color: var(--color-border);
+    border-left-style: solid;
+    border-left-width: 1px;
+   
+  }
+}
+
+@media print {
+  .tc-wrap .tc-row:after {
+    display: none
+  }
+}
+
+.tc-table {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  font-size: 14px;
+  border-top: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
+  line-height: 1.4;
+  overflow-x: auto;
+}
+
+.tc-table:after {
+  width: calc(var(--cell-size));
+  height: 100%;
+  left: calc(var(--cell-size)*-1);
+  top: 0
+}
+
+.tc-table:after,
+.tc-table:before {
+  position: absolute;
+  content: ""
+}
+
+.tc-table:before {
+  width: 100%;
+  height: var(--toolbox-aiming-field-size);
+  top: calc(var(--toolbox-aiming-field-size)*-1);
+  left: 0
+}
+
+.tc-table--heading .tc-row:first-child {
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--color-background)
+}
+
+.tc-table--heading .tc-row:first-child [contenteditable]:empty:before {
+  content: attr(heading);
+  color: var(--color-text-secondary)
+}
+
+.tc-table--heading .tc-row:first-child:after {
+  bottom: -2px;
+  border-bottom: 2px solid var(--color-border)
+}
+
+.tc-add-column,
+.tc-add-row {
+  display: flex;
+  color: var(--color-text-secondary)
+}
+
+@media print {
+  .tc-add {
+    display: none
+  }
+}
+
+.tc-add-column {
+  display: grid;
+  border-top: 1px solid var(--color-border);
+  
+  grid-auto-rows: var(--cell-size);
+  place-items: center
+}
+
+.tc-add-column svg {
+  padding: 5px;
+  position: sticky;
+  top: 0;
+  background-color: var(--color-background)
+}
+
+.tc-add-column--disabled {
+  visibility: hidden
+}
+
+@media print {
+  .tc-add-column {
+    display: none
+  }
+}
+
+.tc-add-row {
+  height: var(--cell-size);
+  align-items: center;
+  padding-left: 4px;
+  position: relative
+}
+
+.tc-add-row--disabled {
+  display: none
+}
+
+.tc-add-row:before {
+  content: "";
+  position: absolute;
+  right: calc(var(--cell-size)*-1);
+  width: var(--cell-size);
+  height: 100%
+}
+
+@media print {
+  .tc-add-row {
+    display: none
+  }
+}
+
+.tc-add-column,
+.tc-add-row {
+  transition: 0s;
+  cursor: pointer;
+  will-change: background-color
+}
+
+.tc-add-column:hover,
+.tc-add-row:hover {
+  transition: background-color .1s ease;
+  background-color: var(--color-background)
+}
+
+.tc-add-row {
+  margin-top: 1px
+}
+
+.tc-add-row:hover:before {
+  transition: .1s;
+  background-color: var(--color-background)
+}
+
+.tc-row {
+  display: grid;
+  /* grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); */
+  /* grid-template-columns: 100px 100px 100px; */
+  grid-template-columns:var(--col-width);
+  position: relative;
+  border-bottom: 1px solid var(--color-border)
+}
+
+/* .tc-row:after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  width: var(--cell-size);
+  height: 100%;
+  bottom: -1px;
+  right: calc(var(--cell-size)*-1);
+  border-bottom: 1px solid var(--color-border)
+} */
+
+.tc-row--selected {
+  background: var(--color-background)
+}
+
+.tc-row--selected:after {
+  background: var(--color-background)
+}
+
+.tc-cell {
+  border-right: 1px solid var(--color-border);
+  padding: 6px 12px;
+  overflow: hidden;
+  outline: none;
+  line-break: normal
+}
+
+.tc-cell--selected {
+  background: var(--color-background)
+}
+
+.tc-wrap--readonly .tc-row:after {
+  display: none
+}
+
+.tc-toolbox {
+  --toolbox-padding: 6px;
+  --popover-margin: 30px;
+  --toggler-click-zone-size: 30px;
+  --toggler-dots-color: #7b7e89;
+  --toggler-dots-color-hovered: #1d202b;
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity .1s;
+  will-change: left, opacity
+}
+
+.tc-toolbox--column {
+  top: calc(var(--toggler-click-zone-size)*-1);
+  transform: translate(calc(var(--toggler-click-zone-size)*-1/2));
+  will-change: left, opacity
+}
+
+.tc-toolbox--row {
+  left: calc(var(--popover-margin)*-1);
+  transform: translateY(calc(var(--toggler-click-zone-size)*-1/2));
+  margin-top: -1px;
+  will-change: top, opacity
+}
+
+.tc-toolbox--showed {
+  opacity: 1
+}
+
+.tc-toolbox .tc-popover {
+  position: absolute;
+  top: 0;
+  left: var(--popover-margin)
+}
+
+.tc-toolbox__toggler {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toggler-click-zone-size);
+  height: var(--toggler-click-zone-size);
+  color: var(--toggler-dots-color);
+  opacity: 0;
+  transition: opacity .15s ease;
+  will-change: opacity
+}
+
+.tc-toolbox__toggler:hover {
+  color: var(--toggler-dots-color-hovered)
+}
+
+.tc-toolbox__toggler svg {
+  fill: currentColor
+}
+
+.tc-wrap:hover .tc-toolbox__toggler {
+  opacity: 1
+}
+
+.tc-settings .cdx-settings-button {
+  width: 50%;
+  margin: 0
+}
+
+.tc-popover {
+  --color-border: #eaeaea;
+  --color-background: #fff;
+  --color-background-hover: rgba(232, 232, 235, .49);
+  --color-background-confirm: #e24a4a;
+  --color-background-confirm-hover: #d54040;
+  --color-text-confirm: #fff;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 3px 15px -3px #0d142121;
+  border-radius: 6px;
+  padding: 6px;
+  display: none;
+  will-change: opacity, transform
+}
+
+.tc-popover--opened {
+  display: block;
+  animation: menuShowing .1s cubic-bezier(.215, .61, .355, 1) forwards
+}
+
+.tc-popover__item {
+  display: flex;
+  align-items: center;
+  padding: 2px 14px 2px 2px;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none
+}
+
+.tc-popover__item:hover {
+  background: var(--color-background-hover)
+}
+
+.tc-popover__item:not(:last-of-type) {
+  margin-bottom: 2px
+}
+
+.tc-popover__item-icon {
+  display: inline-flex;
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-background);
+  border-radius: 5px;
+  border: 1px solid var(--color-border);
+  margin-right: 8px
+}
+
+.tc-popover__item-label {
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 500
+}
+
+.tc-popover__item--confirm {
+  background: var(--color-background-confirm);
+  color: var(--color-text-confirm)
+}
+
+.tc-popover__item--confirm:hover {
+  background-color: var(--color-background-confirm-hover)
+}
+
+.tc-popover__item--confirm .tc-popover__item-icon {
+  background: var(--color-background-confirm);
+  border-color: #0000001a
+}
+
+.tc-popover__item--confirm .tc-popover__item-icon svg {
+  transition: transform .2s ease-in;
+  transform: rotate(90deg) scale(1.2)
+}
+
+.tc-popover__item--hidden {
+  display: none
+}
+
+@keyframes menuShowing {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px) scale(.9)
+  }
+
+  70% {
+    opacity: 1;
+    transform: translateY(2px)
+  }
+
+  to {
+    transform: translateY(0)
+  }
+}
+
+.cell-resizable {
+  cursor: col-resize;
+}