JSFiddle - React, Tailwind, and code Playground

by JoshuaIRL

HTML

<input type="text" value="" class="js-fiddle-typeahead" />

CoffeeScript

# CEAuth - Form Field: Tokenizer Input
(($) ->
  debug = true
  log = ->
    console.log arguments[0] if debug

  methods = init: (options) ->
    settings = $.extend({}, $.uiTokenizer.defaults, options)
    @each ->
      new $.uiTokenizer(this, settings)

  $.fn.uiTokenizer = (method) ->
    if methods[method]
      methods[method].apply this, Array::slice.call(arguments, 1)
    else if typeof method is "object" or not method
      methods.init.apply this, arguments
    else
      $.error "Method " + method + " does not exist on uiTokenizer"

  $.uiTokenizer = (input, settings) ->
    makeDragShown = (ui) ->
      ui.item
          .addClass("shown")
          .removeClass("hidden")
          .find(".tokenImg")
          .show()

      ui.placeholder
          .addClass("shown shownPlaceholder")
          .css(
            height: 102
            width: 72
          )
          .removeClass("hidden hiddenPlaceholder")
          .find(".tokenImg")
          .show()

      ui.helper
          .addClass("shown shownPlaceholder")
          .css(
            height: 102
            width: 72
          )
          .removeClass("hidden hiddenPlaceholder")
          .find(".tokenImg")
          .show()
      return
    makeDragHidden = (ui) ->
      ui.item
        .removeClass("shown")
        .addClass("hidden")
        .find(".tokenImg")
        .hide()
      
      ui.placeholder
          .removeClass("shown shownPlaceholder")
          .css(
            height: 16
            width: 72
          ).addClass("hidden hiddenPlaceholder")
          .find(".tokenImg")
          .hide()

      ui.helper
          .removeClass("shown shownPlaceholder")
          .css(
            height: 16
            width: 72
          )
          .addClass("hidden hiddenPlaceholder")
          .find(".tokenImg")
          .hide()
      return

    makeTokenShown = (token) ->
      token
          .addClass("shown")
          .removeClass("hidden")
          .find(".tokenImg")
       ...