Tables

RichEditorView/Resources/editor/rich_editor.js

@@ -360,6 +360,66 @@ RE.blurFocus = function() {
     RE.editor.blur();
 };
 
+// User editing table functionality
+RE.insertTable = function(width, height) {
+    var table = document.createElement("table");
+    for (let i = 0; i < height; i++) {
+        var row = table.insertRow();
+        for (let j = 0; j < width; j++) {
+            var cell = row.insertCell();
+        }
+    }
+
+    RE.insertHTML(table.outerHTML);
+    RE.callback("input");
+};
+
+function getNearestTableAncestor(htmlElementNode) {
+    while (htmlElementNode) {
+        htmlElementNode = htmlElementNode.parentNode;
+        if (htmlElementNode.tagName.toLowerCase() === 'table') {
+            return htmlElementNode;
+        }
+    }
+    return undefined;
+}
+
+RE.isCursorInTable = function() {
+    return document.querySelectorAll(":hover")[elements.length - 1] instanceof HTMLTableCellElement  
+};
+
+RE.addRowToTable = function() {
+    // Add row below current cursor's
+    var elements = document.querySelectorAll(":hover");
+    let rowIndex = elements[elements.length - 2].rowIndex;
+    let table = getNearestTableAncestor(elements[elements.length - 1]);
+    table.insertRow(rowIndex + 1);
+};
+
+RE.deleteRowFromTable = function() {
+    // Deletes the current cursor's row
+    var elements = document.querySelectorAll(":hover");
+    let rowIndex = elements[elements.length - 2].rowIndex;
+    let table = getNearestTableAncestor(elements[elements.length - 1]);
+    table.deleteRow(rowIndex);
+};
+
+RE.addColumnToTable = function() {
+    // Add column to the right of current cursor's
+    var elements = document.querySelectorAll(":hover");
+    let columnIndex = elements[elements.length - 1].cellIndex;
+    let row = elements[elements.length - 2];
+    row.insertCell(columnIndex + 1);
+}
+
+RE.deleteColumnFromTable = function() {
+    // Deletes the current cursor's column
+    var elements = document.querySelectorAll(":hover");
+    let columnIndex = elements[elements.length - 1].cellIndex;
+    let row = elements[elements.length - 2];
+    row.deleteCell(columnIndex);
+};
+
 /**
 Recursively search element ancestors to find a element nodeName e.g. A
 **/

RichEditorView/Resources/editor/style.css

@@ -77,3 +77,8 @@ video {
     width: 100%  !important;
     height: auto !important;
 }
+
+table {overflow-x: scroll;}
+th, td {max-width: 200px; min-width:50px;}
+table, td, th{border-collapse:collapse; border:1px solid #777;}
+td{padding:5px 10px; height:35px;}

RichEditorView/RichEditorOptionItem.swift

@@ -75,6 +75,7 @@ public enum RichEditorDefaultOption: RichEditorOption {
     case image
     case video
     case link
+    case table
 
     public static let all: [RichEditorDefaultOption] = [
         //.clear,
@@ -84,7 +85,7 @@ public enum RichEditorDefaultOption: RichEditorOption {
         .textColor, .textBackgroundColor,
         .header(1), .header(2), .header(3), .header(4), .header(5), .header(6),
         .indent, outdent, orderedList, unorderedList,
-        .alignLeft, .alignCenter, .alignRight, .image, .video, .link
+        .alignLeft, .alignCenter, .alignRight, .image, .video, .link, .table
     ]
 
     // MARK: RichEditorOption
@@ -114,6 +115,7 @@ public enum RichEditorDefaultOption: RichEditorOption {
         case .image: name = "insert_image"
         case .video: name = "insert_video"
         case .link: name = "insert_link"
+        case .table: name = "insert_table"
         }
 
         let bundle = Bundle(for: RichEditorToolbar.self)
@@ -145,6 +147,7 @@ public enum RichEditorDefaultOption: RichEditorOption {
         case .image: return NSLocalizedString("Image", comment: "")
         case .video: return NSLocalizedString("Video", comment: "")
         case .link: return NSLocalizedString("Link", comment: "")
+        case .table return NSLocalizedString("Table", comment: "")
         }
     }
 
@@ -173,6 +176,7 @@ public enum RichEditorDefaultOption: RichEditorOption {
         case .image: toolbar.delegate?.richEditorToolbarInsertImage?(toolbar)
         case .video: toolbar.delegate?.richEditorToolbarInsertVideo?(toolbar)
         case .link: toolbar.delegate?.richEditorToolbarInsertLink?(toolbar)
+        case .table: toolbar.delegate?.richEditorToolbarInsertTable?(toolbar)
         }
     }
 }

RichEditorView/RichEditorToolbar.swift

@@ -24,6 +24,9 @@ import UIKit
 
     /// Called when the Insert Link toolbar item is pressed.
     @objc optional func richEditorToolbarInsertLink(_ toolbar: RichEditorToolbar)
+
+    /// Called when the Insert Table toolbar item is pressed
+    @objc optional func richEditorToolbarInsertTable(_ toolbar: RichEditorToolbar)
 }
 
 /// RichBarButtonItem is a subclass of UIBarButtonItem that takes a callback as opposed to the target-action pattern

RichEditorView/RichEditorView.swift

@@ -388,6 +388,25 @@ public class RichEditorWebView: WKWebView {
         runJS("RE.setCheckbox('\(UUID().uuidString.prefix(8))')")
     }
 
+    // MARK: Table functionalities
+    public func insertTable(width: Int = 2, height: Int = 2) {
+        runJS("RE.prepareInsert()")
+        runJS("RE.insertTable(\(width), \(height))")
+    }
+
+    /// Checks if cursor is in a table element. If so, return true so that you can add menu items accordingly.
+    public func isCursorInTable() {
+        runJS("RE.isCursorInTable") { r in
+            return r
+        }
+    }
+
+    public func addRowToTable() { runJS("RE.addRowToTable()") }
+    public func deleteRowFromTable() { runJS("RE.deleteRowFromTable()") }
+    public func addRowToTable() { runJS("RE.addRowToTable()") }
+    public func deleteColumnFromTable() { runJS("RE.addRowToTable()") }
+
+
     /// Runs some JavaScript on the WKWebView and returns the result
     /// If there is no result, returns an empty string
     /// - parameter js: The JavaScript string to be run