el-text-editor 0.0.30 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -774,20 +774,41 @@ class ElTextEditorComponent {
774
774
  reader.readAsDataURL(file);
775
775
  }
776
776
  }
777
+ // addTable() {
778
+ // const tableWidth = 825; // Table width in pixels
779
+ // const cols = 3; // Number of columns
780
+ // const cellMinWidth = tableWidth / cols; // Calculate minimum width for each cell
781
+ // let table = `<br /><table style="width: ${tableWidth}px;">`;
782
+ // for (let i = 0; i < 3; i++) { // Number of rows
783
+ // table += '<tr >';
784
+ // for (let j = 0; j < cols; j++) {
785
+ // table += `<td style=" word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
786
+ // }
787
+ // table += '</tr>';
788
+ // }
789
+ // table += '</table><br/ >';
790
+ // // document.execCommand('insertHTML', false, table);
791
+ // const editor = document.getElementById('editor');
792
+ // if (editor) {
793
+ // editor.focus();
794
+ // document.execCommand('insertHTML', false, table);
795
+ // }
796
+ // this.tableAdded = true;
797
+ // this.checkTableSelection();
798
+ // }
777
799
  addTable() {
778
800
  const tableWidth = 825; // Table width in pixels
779
801
  const cols = 3; // Number of columns
780
802
  const cellMinWidth = tableWidth / cols; // Calculate minimum width for each cell
781
803
  let table = `<br /><table style="width: ${tableWidth}px;">`;
782
804
  for (let i = 0; i < 3; i++) { // Number of rows
783
- table += '<tr class="table-border-bottom table-border-top vertical-align-middle">';
805
+ table += `<tr style="border-bottom: ${this.themeModeClrVerticalLineForTable()}">`; // Add border-bottom to the row
784
806
  for (let j = 0; j < cols; j++) {
785
- table += `<td class=" table-border-bottom" style=" word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
807
+ table += `<td style="word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
786
808
  }
787
809
  table += '</tr>';
788
810
  }
789
- table += '</table><br/ >';
790
- // document.execCommand('insertHTML', false, table);
811
+ table += '</table><br/>';
791
812
  const editor = document.getElementById('editor');
792
813
  if (editor) {
793
814
  editor.focus();
@@ -835,13 +856,23 @@ class ElTextEditorComponent {
835
856
  onBlur() {
836
857
  this.checkPlaceholder();
837
858
  }
859
+ // addRow() {
860
+ // if (this.selectedTable) {
861
+ // let row = this.selectedTable.insertRow();
862
+ // for (let i = 0; i < this.selectedTable.rows[0].cells.length; i++) {
863
+ // let cell = row.insertCell(i);
864
+ // cell.innerHTML = '&nbsp;';
865
+ // cell.style.border = '1px solid black';
866
+ // }
867
+ // }
868
+ // }
838
869
  addRow() {
839
870
  if (this.selectedTable) {
840
871
  let row = this.selectedTable.insertRow();
872
+ row.style.borderBottom = this.themeModeClrVerticalLineForTable(); // Add bottom border to the row
841
873
  for (let i = 0; i < this.selectedTable.rows[0].cells.length; i++) {
842
874
  let cell = row.insertCell(i);
843
875
  cell.innerHTML = '&nbsp;';
844
- cell.style.border = '1px solid black';
845
876
  }
846
877
  }
847
878
  }
@@ -891,6 +922,28 @@ class ElTextEditorComponent {
891
922
  // }
892
923
  // }
893
924
  // }
925
+ // addColumn() {
926
+ // if (this.selectedTable) {
927
+ // const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
928
+ // const tableWidth = this.selectedTable.offsetWidth;
929
+ // const minWidth = tableWidth / columnCount;
930
+ // for (let i = 0; i < this.selectedTable.rows.length; i++) {
931
+ // let cell = this.selectedTable.rows[i].insertCell(-1);
932
+ // cell.innerHTML = '&nbsp;';
933
+ // cell.style.border = '1px solid black';
934
+ // cell.style.minWidth = `${minWidth}px`;
935
+ // cell.style.wordWrap = 'break-word';
936
+ // cell.style.wordBreak = 'break-all';
937
+ // cell.style.whiteSpace = 'normal';
938
+ // }
939
+ // // Update existing cells' minWidth
940
+ // for (let i = 0; i < this.selectedTable.rows.length; i++) {
941
+ // for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
942
+ // this.selectedTable.rows[i].cells[j].style.minWidth = `${minWidth}px`;
943
+ // }
944
+ // }
945
+ // }
946
+ // }
894
947
  addColumn() {
895
948
  if (this.selectedTable) {
896
949
  const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
@@ -899,17 +952,14 @@ class ElTextEditorComponent {
899
952
  for (let i = 0; i < this.selectedTable.rows.length; i++) {
900
953
  let cell = this.selectedTable.rows[i].insertCell(-1);
901
954
  cell.innerHTML = '&nbsp;';
902
- cell.style.border = '1px solid black';
903
- cell.style.minWidth = `${minWidth}px`;
904
955
  cell.style.wordWrap = 'break-word';
905
956
  cell.style.wordBreak = 'break-all';
906
957
  cell.style.whiteSpace = 'normal';
958
+ cell.style.minWidth = `${minWidth}px`;
907
959
  }
908
- // Update existing cells' minWidth
960
+ // Update existing rows' bottom border
909
961
  for (let i = 0; i < this.selectedTable.rows.length; i++) {
910
- for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
911
- this.selectedTable.rows[i].cells[j].style.minWidth = `${minWidth}px`;
912
- }
962
+ this.selectedTable.rows[i].style.borderBottom = this.themeModeClrVerticalLineForTable();
913
963
  }
914
964
  }
915
965
  }
@@ -930,6 +980,15 @@ class ElTextEditorComponent {
930
980
  }
931
981
  }
932
982
  }
983
+ themeModeClrVerticalLineForTable() {
984
+ const clrMode = document.body.getAttribute('data-layout-color');
985
+ if (clrMode == 'dark') {
986
+ return '2px solid #414141 !important';
987
+ }
988
+ else {
989
+ return '2px solid #5F5F5F !important';
990
+ }
991
+ }
933
992
  adjustTableWidth(event) {
934
993
  if (this.selectedTable) {
935
994
  this.selectedTable.style.width = event.target.value + 'px';