Redmine

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--bold">

      <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z"/>

      <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--h1">

      <path d="M19 18v-8l-2 2"/>

      <path d="M4 6v12"/>

      <path d="M12 6v12"/>

      <path d="M11 18h2"/>

      <path d="M3 18h2"/>

      <path d="M4 12h8"/>

      <path d="M3 6h2"/>

      <path d="M11 6h2"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--h2">

      <path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0"/>

      <path d="M4 6v12"/>

      <path d="M12 6v12"/>

      <path d="M11 18h2"/>

      <path d="M3 18h2"/>

      <path d="M4 12h8"/>

      <path d="M3 6h2"/>

      <path d="M11 6h2"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--h3">

      <path d="M19 14a2 2 0 1 0 -2 -2"/>

      <path d="M17 16a2 2 0 1 0 2 -2"/>

      <path d="M4 6v12"/>

      <path d="M12 6v12"/>

      <path d="M11 18h2"/>

      <path d="M3 18h2"/>

      <path d="M4 12h8"/>

      <path d="M3 6h2"/>

      <path d="M11 6h2"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--indent-decrease">

      <path d="M20 6l-7 0"/>

      <path d="M20 12l-9 0"/>

      <path d="M20 18l-7 0"/>

      <path d="M8 8l-4 4l4 4"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--indent-increase">

      <path d="M20 6l-11 0"/>

      <path d="M20 12l-7 0"/>

      <path d="M20 18l-11 0"/>

      <path d="M4 8l4 4l-4 4"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--inline-code">

      <path d="M18 9a5 5 0 0 0 -5 -5h-2a5 5 0 0 0 -5 5v6a5 5 0 0 0 5 5h2a5 5 0 0 0 5 -5"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--italic">

      <path d="M11 5l6 0"/>

      <path d="M7 19l6 0"/>

      <path d="M14 5l-4 14"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--list-check">

      <path d="M3.5 5.5l1.5 1.5l2.5 -2.5"/>

      <path d="M3.5 11.5l1.5 1.5l2.5 -2.5"/>

      <path d="M3.5 17.5l1.5 1.5l2.5 -2.5"/>

      <path d="M11 6l9 0"/>

      <path d="M11 12l9 0"/>

      <path d="M11 18l9 0"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--list-numbers">

      <path d="M11 6h9"/>

      <path d="M11 12h9"/>

      <path d="M12 18h8"/>

      <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"/>

      <path d="M6 10v-6l-2 2"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--strikethrough">

      <path d="M5 12l14 0"/>

      <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--table">

      <path d="M12.5 21h-7.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5"/>

      <path d="M3 10h18"/>

      <path d="M10 3v18"/>

      <path d="M16 19h6"/>

      <path d="M19 16v6"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--underline">

      <path d="M7 5v5a5 5 0 0 0 10 0v-5"/>

      <path d="M5 19h14"/>

    </symbol>

    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--wiki-link">

      <path d="M15.536 17.586a2.123 2.123 0 0 0 -2.929 0a1.951 1.951 0 0 0 0 2.828c.809 .781 2.12 .781 2.929 0c.809 -.781 -.805 .778 0 0l1.46 -1.41l1.46 -1.419"/>

      <path d="M15.54 17.582l1.46 1.42l1.46 1.41c.809 .78 -.805 -.779 0 0s2.12 .781 2.929 0a1.951 1.951 0 0 0 0 -2.828a2.123 2.123 0 0 0 -2.929 0"/>

      <path d="M14 3v4a1 1 0 0 0 1 1h4"/>

      <path d="M9.5 21h-2.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v6"/>

    </symbol>

.jstBlock .jstb_pre::before {

.wiki-editor {

  border: 1px solid #d7d7d7;

  border-radius: 3px;

  margin-bottom: 10px;

  background: #fff;

}

.wiki-editor:has(.wiki-editor-edit:not(.hidden)):focus-within {

  border-color: var(--oc-blue-5);

}

.wiki-editor-header {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  /* Align tabs to bottom */

  justify-content: flex-start;

  padding-left: 0.5em;

  /* Remove bottom padding */

  background-color: #f6f6f6;

  border-bottom: 1px solid #d7d7d7;

  gap: 10px;

}

.wiki-editor-tabs {

  display: flex;

  align-items: stretch;

  gap: 4px;

  /* No gap between tabs */

}

.wiki-editor-tab {

  border: 1px solid transparent;

  height: auto;

  border-bottom: none;

  /* No bottom border to merge with header border */

  background: none;

  padding: 6px 12px;

  border-radius: 3px 3px 0 0;

  cursor: pointer;

  color: #555;

  font-size: 0.9em;

  font-weight: 500;

  margin-bottom: -1px;

  margin-top: -1px;

}

.wiki-editor-tab:hover {

  background-color: rgba(0, 0, 0, 0.05);

  color: #333;

}

.wiki-editor-tab.selected {

  background-color: #fff;

  border-color: #d7d7d7;

  color: #222;

  font-weight: 600;

  z-index: 2;

  /* Bring above header border */

}

.wiki-editor-buttons {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 2px;

  padding-bottom: 0;

}

.wiki-editor-buttons.hidden {

  display: none;

}

.wiki-editor-buttons button {

  background: none;

  border: 1px solid transparent;

  border-radius: 3px;

  padding: 2px;

  cursor: pointer;

  min-width: 24px;

  height: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #555;

}

.wiki-editor-buttons button:hover {

  background-color: #e6e6e6;

  border-color: #d0d0d0;

  color: #111;

}

.wiki-editor-buttons button svg {

  stroke-width: 2;

}

/* Icons are usually background images or fonts in Redmine.

   Assuming render_wikitoolbar_buttons outputs buttons with classes that have background icons.

   Existing jstoolbar.css usually handles .jstb_strong etc.

   We might need to ensure those classes still work or adapt them.

   For now, I'm setting structural CSS.

*/

.wiki-editor-pane {

  padding: 0;

}

.wiki-editor-pane textarea {

  width: 100%;

  border: none;

  padding: 10px;

  box-sizing: border-box;

  min-height: 200px;

  resize: vertical;

  display: block;

  outline: none;

  /* Let the container border handle focus focus indicator potentially, or keep default */

}

/* Adjustments for Redmine default styles overriding */

/* .wiki-editor-pane textarea:focus {

  box-shadow: none;

  outline: none;

} */

.wiki-editor-preview {

  padding: 10px;

  min-height: 200px;

  background-color: #fff;

}

.wiki-editor-preview>p:first-child {

  padding-top: 0 !important;

  margin-top: 0 !important;

}

.wiki-editor-preview>p:last-child {

  padding-bottom: 0 !important;

  margin-bottom: 0 !important;

}

/* Container alignment fix for tabular forms */

.tabular .wiki-edit-container {

  margin: 0;

  padding: 3px 0 3px 0;

  padding-left: 180px;

  min-height: 2em;

  clear: left;

  overflow: hidden;

}

/* Table Generator Picker */

.table-generator {

  position: absolute;

  border-collapse: collapse;

  z-index: 1000;

  background-color: #fff;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  border: 1px solid #d7d7d7;

}

.table-generator td {

  border: 1px solid #eee;

  padding: 10px;

  cursor: pointer;

  width: 10px;

  height: 10px;

}

.table-generator td.selected-cell {

  background-color: var(--oc-blue-1);

  border-color: var(--oc-blue-3);

}

  include WikiToolbarHelper

  include BrowserHelper

  def_delegators :wiki_helper, :wikitoolbar_for, :heads_for_wiki_formatter, :wikitoolbar_buttons, :wikitoolbar_controller_name

# frozen_string_literal: true

module BrowserHelper

  def mac_os?

    request.user_agent.downcase.include?('macintosh')

  end

  def modifier_key

    mac_os? ? '⌘' : 'Ctrl'

  end

end

# frozen_string_literal: true

module WikiToolbarHelper

  def wikitoolbar(field_id, preview_url = preview_text_path, &block)

    controller_name = wikitoolbar_controller_name

    content_tag(:div,

                class: 'wiki-editor',

                data: {

                  controller: controller_name,

                  field_id: field_id,

                  "#{controller_name}-preview-url-value": preview_url,

                  "#{controller_name}-help-url-value": help_wiki_syntax_path,

                  "#{controller_name}-languages-value": (User.current && User.current.pref.toolbar_language_options || UserPreference::DEFAULT_TOOLBAR_LANGUAGE_OPTIONS).split(',')

                }) do

      concat(

        content_tag(:div, class: 'wiki-editor-header') do

          concat(

            content_tag(:div, class: 'wiki-editor-tabs') do

              concat button_tag(l(:button_edit), type: 'button', class: 'wiki-editor-tab selected', data: { action: "#{controller_name}#edit", "#{controller_name}-target": "editTab" })

              concat button_tag(l(:label_preview), type: 'button', class: 'wiki-editor-tab', data: { action: "#{controller_name}#preview", "#{controller_name}-target": "previewTab" })

            end

          )

          concat(

            content_tag(:div, class: 'wiki-editor-buttons', data: { "#{controller_name}-target": "buttons" }) do

              render_wikitoolbar_buttons

            end

          )

        end

      )

      concat(

        content_tag(:div, class: 'wiki-editor-pane wiki-editor-edit', data: { "#{controller_name}-target": "editPane" }, &block)

      )

      concat(

        content_tag(:div, '', class: 'wiki-editor-pane wiki-editor-preview wiki hidden', data: { "#{controller_name}-target": "previewPane" })

      )

    end

  end

  def render_wikitoolbar_buttons

    buttons = wikitoolbar_buttons

    controller_name = wikitoolbar_controller_name

    buttons.map do |button|

      if button[:class] == 'jstSpacer' || button[:class] == 'spacer'

        content_tag('span', '', class: 'jstSpacer')

      else

        title = l(button[:label])

        title += " (#{modifier_key}+#{button[:shortcut].upcase})" if button[:shortcut]

        tag.button(

          wikitoolbar_button_content(button, title),

          type: 'button',

          class: button[:class],

          title: title,

          data: { action: "#{controller_name}##{button[:action]}" }

        )

      end

    end.join.html_safe

  end

  private

  def wikitoolbar_button_content(button, title)

    if button[:icon] == 'pre'

      content_tag(:svg, class: 's16 icon-svg', aria: { hidden: true }, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round',

'stroke-linejoin': 'round') do

        concat tag.rect(x: '3', y: '5', width: '18', height: '14', rx: '2')

        concat tag.text('pre', x: '12', y: '15', 'text-anchor': 'middle', style: 'font-size: 8px; font-weight: bold; font-family: monospace;', fill: 'currentColor', stroke: 'none')

      end

    else

      sprite_icon(button[:icon], title, icon_only: true, size: 16)

    end

  end

end

import WikiToolbarController from "controllers/wiki_toolbar_controller"

export default class extends WikiToolbarController {

    strong() {

        this.singleTag('**')

    }

    italic() {

        this.singleTag('*')

    }

    underline() {

        this.singleTag('<u>', '</u>')

    }

    deleted() {

        this.singleTag('~~')

    }

    inlineCode() {

        this.singleTag('`')

    }

    h1() {

        this.encloseLineSelection('# ', '', (str) => {

            return str.replace(/^#+\s+/, '')

        })

    }

    h2() {

        this.encloseLineSelection('## ', '', (str) => {

            return str.replace(/^#+\s+/, '')

        })

    }

    h3() {

        this.encloseLineSelection('### ', '', (str) => {

            return str.replace(/^#+\s+/, '')

        })

    }

    unorderedList() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)[#-]?\s*/g, "$1* ")

        })

    }

    orderedList() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)[*-]?\s*/g, "$11. ")

        })

    }

    taskList() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)[*-]?\s*/g, "$1* [ ] ")

        })

    }

    quote() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)( *)([^\n]*)/g, "$1> $2$3")

        })

    }

    unquote() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^) *(> ?)?( *)([^\n]*)/g, "$1$3$4")

        })

    }

    pre() {

        this.encloseLineSelection('```\n', '\n```')

    }

    image() {

        this.encloseSelection("![](", ")")

    }

    insertTable(cols, rows) {

        const alphabets = "ABCDEFGHIJ".split('')

        const header = '|' + alphabets.slice(0, cols).join(' |') + ' |\n'

        const separator = Array(cols + 1).join('|--') + '|\n'

        const cells = Array(rows + 1).join(Array(cols + 1).join('|  ') + '|\n')

        this.encloseLineSelection(header + separator + cells, '')

    }

    insertPrecode(lang) {

        this.encloseLineSelection('``` ' + lang + '\n', '\n```\n')

    }

}

import WikiToolbarController from "controllers/wiki_toolbar_controller"

export default class extends WikiToolbarController {

    strong() {

        this.singleTag('*')

    }

    italic() {

        this.singleTag('_')

    }

    underline() {

        this.singleTag('+')

    }

    deleted() {

        this.singleTag('-')

    }

    inlineCode() {

        this.singleTag('@')

    }

    h1() {

        this.encloseLineSelection('h1. ', '', (str) => {

            return str.replace(/^h\d+\.\s+/, '')

        })

    }

    h2() {

        this.encloseLineSelection('h2. ', '', (str) => {

            return str.replace(/^h\d+\.\s+/, '')

        })

    }

    h3() {

        this.encloseLineSelection('h3. ', '', (str) => {

            return str.replace(/^h\d+\.\s+/, '')

        })

    }

    unorderedList() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)[#-]?\s*/g, "$1* ")

        })

    }

    orderedList() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)[*-]?\s*/g, "$1# ")

        })

    }

    quote() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^)( *)([^\n]*)/g, "$1> $2$3")

        })

    }

    unquote() {

        this.encloseLineSelection('', '', (str) => {

            str = str.replace(/\r/g, '')

            return str.replace(/(\n|^) *(> ?)?( *)([^\n]*)/g, "$1$3$4")

        })

    }

    pre() {

        this.encloseLineSelection('<pre>\n', '\n</pre>')

    }

    image() {

        this.encloseSelection("!", "!")

    }

    insertTable(cols, rows) {

        const alphabets = "ABCDEFGHIJ".split('')

        const header = '|_.' + alphabets.slice(0, cols).join('|_.') + '|\n'

        const cells = Array(rows + 1).join(Array(cols + 1).join('|  ') + '|\n')

        this.encloseLineSelection(header + cells, '')

    }

    insertPrecode(lang) {

        this.encloseLineSelection('<pre><code class="' + lang + '">\n', '\n</code></pre>\n')

    }

}

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  static targets = ["field", "previewPane", "editPane", "editTab", "previewTab", "buttons"]

  static values = {

    languages: Array,

    previewUrl: String,

    helpUrl: String

  }

  connect() {

    this.field = this.hasFieldTarget ? this.fieldTarget : document.getElementById(this.element.dataset.fieldId)

    if (!this.field) return

    this.setupShortcuts()

  }

  strong() {

    // abstract

  }

  italic() {

    // abstract

  }

  underline() {

    // abstract

  }

  deleted() {

    // abstract

  }

  inlineCode() {

    // abstract

  }

  h1() {

    // abstract

  }

  h2() {

    // abstract

  }

  h3() {

    // abstract

  }

  unorderedList() {

    // abstract

  }

  orderedList() {

    // abstract

  }

  quote() {

    // abstract

  }

  unquote() {

    // abstract

  }

  pre() {

    // abstract

  }

  help() {

    window.open(this.helpUrlValue, "_blank")

  }

  precode(event) {

    event.preventDefault()

    this.precodeMenu(event.currentTarget)

  }

  table(event) {

    event.preventDefault()

    this.tableMenu(event.currentTarget)

  }

  wikiLink() {

    this.encloseSelection("[[", "]]")

  }

  image() {

    // abstract

  }

  // Common text manipulation methods

  singleTag(startTag, endTag) {

    endTag = endTag || startTag

    this.encloseSelection(startTag, endTag)

  }

  encloseSelection(prefix, suffix, fn) {

    this.field.focus()

    prefix = prefix || ''

    suffix = suffix || ''

    let start = this.field.selectionStart

    let end = this.field.selectionEnd

    let scrollPos = this.field.scrollTop

    let sel = this.field.value.substring(start, end)

    let subst

    if (start > 0 && this.field.value.charAt(start - 1).match(/\S/)) {

      prefix = ' ' + prefix

    }

    if (this.field.value.charAt(end).match(/\S/)) {

      suffix = suffix + ' '

    }

    if (sel.match(/ $/)) {

      sel = sel.substring(0, sel.length - 1)

      suffix = suffix + " "

    }

    let res = (typeof fn === 'function') ? ((sel) ? fn.call(this, sel) : fn('')) : (sel ? sel : '')

    subst = prefix + res + suffix

    this.field.setRangeText(subst, start, end, 'select')

    this.field.selectionStart = start + prefix.length

    this.field.selectionEnd = start + prefix.length + res.length

    this.field.scrollTop = scrollPos

  }

  encloseLineSelection(prefix, suffix, fn) {

    this.field.focus()

    prefix = prefix || ''

    suffix = suffix || ''

    let start = this.field.selectionStart

    let end = this.field.selectionEnd

    let scrollPos = this.field.scrollTop

    // Go to start of line

    while (start > 0 && this.field.value.charAt(start - 1) !== '\n' && this.field.value.charAt(start - 1) !== '\r') {

      start--

    }

    // Go to end of line

    while (end < this.field.value.length && this.field.value.charAt(end) !== '\n' && this.field.value.charAt(end) !== '\r') {

      end++

    }

    let sel = this.field.value.substring(start, end)

    if (sel.match(/ $/)) {

      sel = sel.substring(0, sel.length - 1)

      suffix = suffix + " "

    }

    let res = (typeof fn === 'function') ? ((sel) ? fn.call(this, sel) : fn('')) : (sel ? sel : '')

    let subst = prefix + res + suffix

    this.field.setRangeText(subst, start, end, 'select')

    this.field.selectionStart = start + prefix.length

    this.field.selectionEnd = start + prefix.length + res.length

    this.field.scrollTop = scrollPos

  }

  setupShortcuts() {

    this.field.addEventListener('keydown', (e) => {

      if (this.isModifierKey(e)) {

        const key = e.key.toLowerCase()

        const shortcuts = {

          'b': 'strong',

          'i': 'italic',

          'u': 'underline'

        }

        if (shortcuts[key]) {

          e.preventDefault()

          this[shortcuts[key]]()

        }

      }

    })

  }

  isModifierKey(e) {

    const isMac = navigator.platform.toLowerCase().indexOf('mac') > -1

    return isMac ? e.metaKey : e.ctrlKey

  }

  async preview(event) {

    event.preventDefault()

    const previewTab = event.currentTarget

    if (previewTab.classList.contains('selected')) return

    const formData = new FormData()

    formData.append('text', this.field.value)

    const form = this.field.closest('form')

    const attachmentInputs = form.querySelectorAll('.attachments_fields input');

    attachmentInputs.forEach(input => {

      if (input.name && input.value) {

        formData.append(input.name, input.value);

      }

    });

    // Add authenticity token

    const token = document.querySelector('meta[name="csrf-token"]')

    if (token) {

      formData.append('authenticity_token', token.content)

    }

    try {

      const response = await fetch(this.previewUrlValue, {

        method: 'POST',

        body: formData,

        headers: {

          'X-Requested-With': 'XMLHttpRequest'

        }

      })

      if (response.ok) {

        const html = await response.text()

        this.showPreview(html)

      }

    } catch (error) {

      console.error("Preview failed", error)

    }

  }

  edit(event) {

    event.preventDefault()

    const editTab = event.currentTarget

    if (editTab.classList.contains('selected')) return

    this.hidePreview(editTab)

  }

  showPreview(html) {

    // Find or create preview div

    this.previewPaneTarget.innerHTML = html

    this.editPaneTarget.classList.add('hidden')

    this.previewPaneTarget.classList.remove('hidden')

    this.editTabTarget.classList.remove('selected')

    this.previewTabTarget.classList.add('selected')

    this.buttonsTarget.classList.add('hidden')

  }

  hidePreview(editTab) {

    this.editPaneTarget.classList.remove('hidden')

    this.previewPaneTarget.classList.add('hidden')

    this.editTabTarget.classList.add('selected')

    this.previewTabTarget.classList.remove('selected')

    this.buttonsTarget.classList.remove('hidden')

  }

  tableMenu(button) {

    if (this.menu) {

      this.menu.remove()

      this.menu = null

      return

    }

    const alphabets = "ABCDEFGHIJ".split('')

    const menu = document.createElement('table')

    menu.className = 'table-generator'

    this.menu = menu

    for (let r = 1; r <= 5; r++) {

      const row = document.createElement('tr')

      for (let c = 1; c <= 10; c++) {

        const cell = document.createElement('td')

        cell.dataset.row = r

        cell.dataset.col = c

        cell.title = `${c}×${r}`

        cell.addEventListener('mousedown', (e) => {

          e.preventDefault()

          this.insertTable(c, r)

          this.menu.remove()

          this.menu = null

        })

        cell.addEventListener('mouseenter', () => {

          const cells = menu.querySelectorAll('td')

          cells.forEach(el => {

            if (parseInt(el.dataset.row) <= r && parseInt(el.dataset.col) <= c) {

              el.classList.add('selected-cell')

            } else {

              el.classList.remove('selected-cell')

            }

          })

        })

        row.appendChild(cell)

      }

      menu.appendChild(row)

    }

    document.body.appendChild(menu)

    // Positioning

    const rect = button.getBoundingClientRect()

    menu.style.left = `${rect.left + window.scrollX}px`

    menu.style.top = `${rect.bottom + window.scrollY}px`

    const closeMenu = (e) => {

      if (this.menu && !this.menu.contains(e.target) && e.target !== button && !button.contains(e.target)) {

        this.menu.remove()

        this.menu = null

        document.removeEventListener('mousedown', closeMenu)

      }

    }

    document.addEventListener('mousedown', closeMenu)

  }

  insertTable(cols, rows) {

    // abstract

  }

  precodeMenu(button) {

    if (this.menu) {

      this.menu.remove()

      this.menu = null

      return

    }

    const menu = document.createElement('ul')

    menu.className = 'drdn-items'

    menu.style.position = 'absolute'

    menu.style.zIndex = '1000'

    menu.style.backgroundColor = '#fff'

    menu.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'

    menu.style.border = '1px solid #d7d7d7'

    menu.style.listStyle = 'none'

    menu.style.padding = '5px 0'

    menu.style.margin = '0'

    menu.style.minWidth = '150px'

    menu.style.maxHeight = '300px'

    menu.style.overflowY = 'auto'

    this.menu = menu

    this.languagesValue.forEach(lang => {

      const item = document.createElement('li')

      const link = document.createElement('a')

      link.href = '#'

      link.textContent = lang

      link.style.display = 'block'

      link.style.padding = '4px 12px'

      link.style.color = '#333'

      link.style.textDecoration = 'none'

      link.style.fontSize = '0.9em'

      link.addEventListener('mouseenter', () => {

        link.style.backgroundColor = '#3e70ad'

        link.style.color = '#fff'

      })

      link.addEventListener('mouseleave', () => {

        link.style.backgroundColor = 'transparent'

        link.style.color = '#333'

      })

      link.addEventListener('mousedown', (e) => {

        e.preventDefault()

        this.insertPrecode(lang)

        this.menu.remove()

        this.menu = null

      })

      item.appendChild(link)

      menu.appendChild(item)

    })

    document.body.appendChild(menu)

    // Positioning

    const rect = button.getBoundingClientRect()

    menu.style.left = `${rect.left + window.scrollX}px`

    menu.style.top = `${rect.bottom + window.scrollY}px`

    const closeMenu = (e) => {

      if (this.menu && !this.menu.contains(e.target) && e.target !== button && !button.contains(e.target)) {

        this.menu.remove()

        this.menu = null

        document.removeEventListener('mousedown', closeMenu)

      }

    }

    document.addEventListener('mousedown', closeMenu)

  }

  insertPrecode(lang) {

    // abstract

  }

}

      <%= wikitoolbar 'issue_notes', preview_issue_path(:project_id => @project, :issue_id => @issue) do %>

        <%= f.textarea :notes, :cols => 60, :rows => 10,

      <% end %>

<div id="issue_description_and_toolbar_parent" class="wiki-edit-container">

    <%= wikitoolbar 'issue_description', preview_issue_path(:project_id => @issue.project, :issue_id => @issue.id) do |t| %>

  <% end %>

</div>

  <%# wikitoolbar_for "issue_custom_field_values_#{value.custom_field_id}", preview_issue_path(:project_id => @issue.project, :issue_id => @issue.id) if value.custom_field.full_text_formatting? %>

<%= stylesheet_link_tag 'jquery/jquery-ui-1.13.2', 'tribute-5.1.3', 'application', 'wiki_editor', 'responsive', :media => 'all' %>

  label_wiki_toolbar_strong: Strong

  label_wiki_toolbar_italic: Italic

  label_wiki_toolbar_underline: Underline

  label_wiki_toolbar_deleted: Deleted

  label_wiki_toolbar_code: Inline Code

  label_wiki_toolbar_heading_1: Heading 1

  label_wiki_toolbar_heading_2: Heading 2

  label_wiki_toolbar_heading_3: Heading 3

  label_wiki_toolbar_unordered_list: Unordered list

  label_wiki_toolbar_ordered_list: Ordered list

  label_wiki_toolbar_task_list: Task list

  label_wiki_toolbar_quote: Quote

  label_wiki_toolbar_unquote: Remove quote

  label_wiki_toolbar_table: Table

  label_wiki_toolbar_preformatted_text: Preformatted text

  label_wiki_toolbar_preformatted_code: Highlighted code

  label_wiki_toolbar_wiki_link: Link to a Wiki page

  label_wiki_toolbar_image: Image

  label_wiki_toolbar_help: Help

        def wikitoolbar_controller_name

          'common-mark-toolbar'

        end

        def wikitoolbar_buttons

          [

            { label: :label_wiki_toolbar_strong, class: 'jstb_strong', icon: 'bold', action: 'strong', shortcut: 'b' },

            { label: :label_wiki_toolbar_italic, class: 'jstb_em', icon: 'italic', action: 'italic', shortcut: 'i' },

            { label: :label_wiki_toolbar_underline, class: 'jstb_ins', icon: 'underline', action: 'underline', shortcut: 'u' },

            { label: :label_wiki_toolbar_deleted, class: 'jstb_del', icon: 'strikethrough', action: 'deleted' },

            { label: :label_wiki_toolbar_code, class: 'jstb_code', icon: 'inline-code', action: 'inlineCode' },

            { class: 'jstSpacer' },

            { label: :label_wiki_toolbar_heading_1, class: 'jstb_h1', icon: 'h1', action: 'h1' },

            { label: :label_wiki_toolbar_heading_2, class: 'jstb_h2', icon: 'h2', action: 'h2' },

            { label: :label_wiki_toolbar_heading_3, class: 'jstb_h3', icon: 'h3', action: 'h3' },

            { class: 'jstSpacer' },

            { label: :label_wiki_toolbar_unordered_list, class: 'jstb_ul', icon: 'list', action: 'unorderedList' },

            { label: :label_wiki_toolbar_ordered_list, class: 'jstb_ol', icon: 'list-numbers', action: 'orderedList' },

            { label: :label_wiki_toolbar_task_list, class: 'jstb_tl', icon: 'list-check', action: 'taskList' },

            { class: 'jstSpacer' },

            { label: :label_wiki_toolbar_quote, class: 'jstb_bq', icon: 'indent-increase', action: 'quote' },

            { label: :label_wiki_toolbar_unquote, class: 'jstb_unbq', icon: 'indent-decrease', action: 'unquote' },

            { label: :label_wiki_toolbar_table, class: 'jstb_table', icon: 'table', action: 'table' },

            { label: :label_wiki_toolbar_preformatted_text, class: 'jstb_pre', icon: 'pre', action: 'pre' },

            { label: :label_wiki_toolbar_preformatted_code, class: 'jstb_precode', icon: 'changeset', action: 'precode' },

            { label: :label_wiki_toolbar_wiki_link, class: 'jstb_wiki_link', icon: 'wiki-link', action: 'wikiLink' },

            { label: :label_wiki_toolbar_image, class: 'jstb_image', icon: 'image', action: 'image' },

            { class: 'spacer' },

            { label: :label_wiki_toolbar_help, class: 'jstb_help', icon: 'help', action: 'help' }

          ]

        end

        def wikitoolbar_controller_name

          'textile-toolbar'

        end

        def wikitoolbar_buttons

          [

            { label: :label_wiki_toolbar_strong, class: 'jstb_strong', icon: 'bold', action: 'strong', shortcut: 'b' },

            { label: :label_wiki_toolbar_italic, class: 'jstb_em', icon: 'italic', action: 'italic', shortcut: 'i' },

            { label: :label_wiki_toolbar_underline, class: 'jstb_ins', icon: 'underline', action: 'underline', shortcut: 'u' },

            { label: :label_wiki_toolbar_deleted, class: 'jstb_del', icon: 'strikethrough', action: 'deleted' },

            { label: :label_wiki_toolbar_code, class: 'jstb_code', icon: 'inline-code', action: 'inlineCode' },

            { class: 'spacer' },

            { label: :label_wiki_toolbar_heading_1, class: 'jstb_h1', icon: 'h1', action: 'h1' },

            { label: :label_wiki_toolbar_heading_2, class: 'jstb_h2', icon: 'h2', action: 'h2' },

            { label: :label_wiki_toolbar_heading_3, class: 'jstb_h3', icon: 'h3', action: 'h3' },

            { class: 'spacer' },

            { label: :label_wiki_toolbar_unordered_list, class: 'jstb_ul', icon: 'list', action: 'unorderedList' },

            { label: :label_wiki_toolbar_ordered_list, class: 'jstb_ol', icon: 'list-numbers', action: 'orderedList' },

            { class: 'spacer' },

            { label: :label_wiki_toolbar_quote, class: 'jstb_bq', icon: 'indent-increase', action: 'quote' },

            { label: :label_wiki_toolbar_unquote, class: 'jstb_unbq', icon: 'indent-decrease', action: 'unquote' },

            { label: :label_wiki_toolbar_table, class: 'jstb_table', icon: 'table', action: 'table' },

            { label: :label_wiki_toolbar_preformatted_text, class: 'jstb_pre', icon: 'pre', action: 'pre' },

            { label: :label_wiki_toolbar_preformatted_code, class: 'jstb_precode', icon: 'changeset', action: 'precode' },

            { label: :label_wiki_toolbar_wiki_link, class: 'jstb_wiki_link', icon: 'wiki-link', action: 'wikiLink' },

            { label: :label_wiki_toolbar_image, class: 'jstb_image', icon: 'image', action: 'image' },

            { class: 'spacer' },

            { label: :label_wiki_toolbar_help, class: 'jstb_help', icon: 'help', action: 'help' }

          ]

        end

  def test_wiki_textarea

    issue = Issue.new(:description => 'test description')

    labelled_form_for(issue) do |f|

      output = f.wiki_textarea(:description)

      assert_include '<label for="issue_description">Description</label>', output

      assert_include '<div class="wiki-editor" data-controller="common-mark-toolbar"', output

      assert_include 'test description', output

    end

  end