Redmine

  def wiki_textarea_stimulus_attributes

      controller: 'list-autofill table-paste',

      action: 'beforeinput->list-autofill#handleBeforeInput paste->table-paste#handlePaste',

      list_autofill_text_formatting_param: Setting.text_formatting,

      table_paste_text_formatting_param: Setting.text_formatting

      }.merge(wiki_textarea_stimulus_attributes)

      }.merge(wiki_textarea_stimulus_attributes)

import { Controller } from '@hotwired/stimulus'

class CommonMarkTableFormatter {

  format(rows) {

    const output = []

    output.push(this.#formatRow(rows[0]))

    const separator = rows[0].map(() => '--').join(' | ')

    output.push(`| ${separator} |`)

    for (let i = 1; i < rows.length; i++) {

      output.push(this.#formatRow(rows[i]))

    }

    return output.join('\n')

  }

  #formatRow(row) {

    return `| ${row.map(cell => this.#formatCell(cell)).join(' | ')} |`

  }

  #formatCell(cell) {

    return cell

      .replaceAll('|', '\\|')

      .replaceAll('\n', '<br>')

  }

}

class TextileTableFormatter {

  format(rows) {

    const output = []

    output.push(this.#formatHeader(rows[0]))

    for (let i = 1; i < rows.length; i++) {

      output.push(this.#formatRow(rows[i]))

    }

    return output.join('\n')

  }

  #formatHeader(row) {

    return `|_. ${row.map(cell => this.#formatCell(cell)).join(' |_. ')} |`

  }

  #formatRow(row) {

    return `| ${row.map(cell => this.#formatCell(cell)).join(' | ')} |`

  }

  #formatCell(cell) {

    return cell.replaceAll('|', '|')

  }

}

export default class extends Controller {

  handlePaste(event) {

    const formatter = this.#tableFormatterFor(event.params.textFormatting)

    if (!formatter) return

    const html = this.#htmlFromClipboard(event)

    if (!html) return

    // Extract the table only when the pasted HTML consists of a single table.

    const table = this.#extractTable(html)

    if (!table) return

    const tableData = this.#buildTableData(table)

    if (!tableData) return

    const formattedTable = formatter.format(tableData)

    if (!formattedTable) return

    event.preventDefault()

    this.#insertTextAtCursor(event.currentTarget, formattedTable)

  }

  // private

  #tableFormatterFor(textFormatting) {

    switch (textFormatting) {

      case 'common_mark':

        return new CommonMarkTableFormatter()

      case 'textile':

        return new TextileTableFormatter()

      default:

        return null

    }

  }

  #htmlFromClipboard(event) {

    const clipboardData = event.clipboardData

    if (!clipboardData) return null

    return clipboardData.getData('text/html') || null

  }

  #extractTable(html) {

    const temp = document.createElement('div')

    temp.innerHTML = html.replace(/\r?\n/g, '')

    const tables = temp.querySelectorAll('table')

    if (tables.length !== 1) return null

    const clone = temp.cloneNode(true)

    // Ignore metadata elements and confirm that nothing remains outside the table.

    clone.querySelectorAll('meta, style, link, title, table').forEach(element => element.remove())

    return clone.textContent.trim() === '' ? tables[0] : null

  }

  #buildTableData(table) {

    const rows = []

    table.querySelectorAll('tr').forEach(tr => {

      const cells = []

      tr.querySelectorAll('td, th').forEach(cell => {

        cells.push(this.#extractCellText(cell).trim())

      })

      if (cells.length > 0) {

        rows.push(cells)

      }

    })

    if (rows.length < 2) return null

    const maxColumns = rows.reduce((currentMax, row) => Math.max(currentMax, row.length), 0)

    if (maxColumns < 2) return null

    rows.forEach(row => {

      while (row.length < maxColumns) {

        row.push('')

      }

    })

    return rows

  }

  #extractCellText(cell) {

    const clone = cell.cloneNode(true)

    // Treat <br> as an in-cell line break and keep it as an internal newline

    // so each formatter can render it appropriately.

    clone.querySelectorAll('br').forEach(br => {

      br.replaceWith('\n')

    })

    return clone.textContent

  }

  #insertTextAtCursor(input, text) {

    const { selectionStart, selectionEnd } = input

    const replacement = `${text}\n\n`

    input.setRangeText(replacement, selectionStart, selectionEnd, 'end')

    const newCursorPos = selectionStart + replacement.length

    input.setSelectionRange(newCursorPos, newCursorPos)

    input.dispatchEvent(new Event('input', { bubbles: true }))

  }

}

                      :auto_complete => true

                    }.merge(wiki_textarea_stimulus_attributes)

              :auto_complete => true

            }.merge(wiki_textarea_stimulus_attributes),

                     :auto_complete => true

                   }.merge(wiki_textarea_stimulus_attributes),

                    :auto_complete => true

                  }.merge(wiki_textarea_stimulus_attributes)

            :auto_complete => true

          }.merge(wiki_textarea_stimulus_attributes)

                  :auto_complete => true

                }.merge(wiki_textarea_stimulus_attributes)

                     :auto_complete => true

                   }.merge(wiki_textarea_stimulus_attributes)

                  }.merge(wiki_textarea_stimulus_attributes)

<p><%= f.textarea :description, :rows => 8, :class => 'wiki-edit', :data => wiki_textarea_stimulus_attributes %></p>

<p><%= setting_textarea :welcome_text, :cols => 60, :rows => 5, :class => 'wiki-edit', :data => wiki_textarea_stimulus_attributes %></p>

<%= setting_textarea :emails_header, :label => false, :class => 'wiki-edit', :rows => 5, :data => wiki_textarea_stimulus_attributes %>

<%= setting_textarea :emails_footer, :label => false, :class => 'wiki-edit', :rows => 5, :data => wiki_textarea_stimulus_attributes %>

                    :auto_complete => true

                  }.merge(wiki_textarea_stimulus_attributes)

  def test_wiki_textarea_stimulus_attributes

        controller: "list-autofill table-paste",

        action: "beforeinput->list-autofill#handleBeforeInput paste->table-paste#handlePaste",

        list_autofill_text_formatting_param: "textile",

        table_paste_text_formatting_param: "textile"

      assert_equal expected, wiki_textarea_stimulus_attributes

  def test_wiki_textarea_stimulus_attributes_with_blank_text_formatting

      assert_equal({}, wiki_textarea_stimulus_attributes)

# frozen_string_literal: true

# Redmine - project management software

# Copyright (C) 2006-  Jean-Philippe Lang

#

# This program is free software; you can redistribute it and/or

# modify it under the terms of the GNU General Public License

# as published by the Free Software Foundation; either version 2

# of the License, or (at your option) any later version.

#

# This program is distributed in the hope that it will be useful,

# but WITHOUT ANY WARRANTY; without even the implied warranty of

# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

# GNU General Public License for more details.

#

# You should have received a copy of the GNU General Public License

# along with this program; if not, write to the Free Software

# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

require_relative '../application_system_test_case'

class TablePasteSystemTest < ApplicationSystemTestCase

  HTML_TABLE = <<~'HTML'

    <table>

      <tr><th>Item</th><th>Notes</th></tr>

      <tr><td>Redmine 6.1</td><td>Supports &lt;wiki&gt; tags</td></tr>

      <tr><td>Multi-line</td><td>First line<br>Second line | escaped</td></tr>

      <tr><td>Path value</td><td>C:\Temp\redmine &amp; logs</td></tr>

    </table>

  HTML

  def test_paste_html_table_as_commonmark_table_in_issue_description

    with_settings text_formatting: 'common_mark' do

      log_user('jsmith', 'jsmith')

      visit '/projects/ecookbook/issues/new'

      result = dispatch_paste(find('#issue_description'), html: HTML_TABLE)

      assert_equal <<~'TEXT', result

        | Item | Notes |

        | -- | -- |

        | Redmine 6.1 | Supports <wiki> tags |

        | Multi-line | First line<br>Second line \| escaped |

        | Path value | C:\Temp\redmine & logs |

      TEXT

    end

  end

  def test_paste_html_table_as_textile_table_in_wiki_edit

    with_settings text_formatting: 'textile' do

      log_user('jsmith', 'jsmith')

      visit '/projects/ecookbook/wiki/CookBook_documentation/edit'

      result = dispatch_paste(find('#content_text'), html: HTML_TABLE)

      assert_equal <<~'TEXT', result

        |_. Item |_. Notes |

        | Redmine 6.1 | Supports <wiki> tags |

        | Multi-line | First line

        Second line | escaped |

        | Path value | C:\Temp\redmine & logs |

      TEXT

    end

  end

  def test_pastes_only_standalone_html_tables

    with_settings text_formatting: 'common_mark' do

      log_user('jsmith', 'jsmith')

      visit '/projects/ecookbook/issues/new'

      # Pasted content from Excel

      pasted = dispatch_paste(find('#issue_description'), html: <<~HTML)

        <html>

        <head>

        <meta http-equiv=Content-Type content="text/html; charset=utf-8">

        <meta name=ProgId content=Excel.Sheet>

        <style>td {white-space:nowrap;}</style>

        <link rel=File-List href="file:///C:/Temp/clip_filelist.xml">

        </head>

        <body>

        <table><tr><td>Item</td><td>Notes</td></tr><tr><td>Table</td><td>Value</td></tr></table>

        </body>

        </html>

      HTML

      assert_includes pasted, "| Item | Notes |"

      # Pasted content from Google Sheets

      pasted = dispatch_paste(find('#issue_description'), html: <<~HTML)

        <meta><style>td {border: 1px solid #cccccc;}</style>

        <table><tr><td>Item</td><td>Notes</td></tr><tr><td>Table</td><td>Value</td></tr></table>

      HTML

      assert_includes pasted, "| Item | Notes |"

      # Pasted content without a table

      pasted = dispatch_paste(find('#issue_description'), html: '<p>Content</p>')

      assert_equal '', pasted # Handled as a normal paste.

      # Pasted content with a table and other HTML content

      pasted = dispatch_paste(find('#issue_description'), html: <<~HTML)

        <h1>Title</h1><table><tr><td>Item</td><td>Notes</td></tr></table>

      HTML

      assert_equal '', pasted # Handled as a normal paste.

      # Pasted content with multiple tables

      pasted = dispatch_paste(find('#issue_description'), html: <<~HTML)

        <table><tr><td>Item</td><td>Notes</td></tr></table>

        <table><tr><td>Item</td><td>Notes</td></tr></table>

      HTML

      assert_equal '', pasted # Handled as a normal paste.

      # Pasted content with a single table row

      pasted = dispatch_paste(find('#issue_description'), html: <<~HTML)

        <table><tr><td>Item</td><td>Notes</td></tr></table>

      HTML

      assert_equal '', pasted # Handled as a normal paste.

    end

  end

  private

  def dispatch_paste(field, html:)

    page.evaluate_script(<<~JS, field, html)

      ((element, htmlText) => {

        element.value = ''

        element.setSelectionRange(0, 0)

        const clipboardData = {

          getData(type) {

            return type === 'text/html' ? htmlText : ''

          }

        }

        const event = new Event('paste', { bubbles: true, cancelable: true })

        Object.defineProperty(event, 'clipboardData', { value: clipboardData })

        element.dispatchEvent(event)

        return element.value

      })(arguments[0], arguments[1])

    JS

  end

end