Wagtail Replace-Quote-Plugin for Draftail/DraftJS

draftail-api-monkeypatch.js

(function (draftail) {
  const registeredPlugins = []
  const initEditor = draftail.initEditor

  draftail.registerDraftPlugin = function (plugin) {
    registeredPlugins.push(plugin)
  }
  draftail.initEditor = function (selector, options, currentScript) {
    const plugins = (options.plugins || []).concat(registeredPlugins)
    const newOptions = Object.assign({}, options, { plugins: plugins })
    return initEditor(selector, newOptions, currentScript)
  }
})(window.draftail)

draftail-plugins-replace-quotes.js

(function (draftail, DraftJS, quotes) {
  const HANDLED = 'handled'
  const NOT_HANDLED = 'not_handled'

  const EditorState = DraftJS.EditorState
  const Modifier = DraftJS.Modifier

  draftail.registerDraftPlugin({
    handleBeforeInput: function (character, editorState, handle) {
      if (character === '"') {
        const selection = editorState.getSelection()
        const content = editorState.getCurrentContent()
        const currentBlock = content.getBlockForKey(selection.getStartKey())
        const textContent = currentBlock.getText()
        const textLength = textContent.length

        function replaceCharacter (newCharacter) {
          handle.setEditorState(
            EditorState.push(
              editorState,
              Modifier.insertText(content, selection, newCharacter),
              'transpose-characters')
          )
        }

        if (selection.getAnchorOffset() === 0) {
          replaceCharacter(quotes.QUOTE_START)
          return HANDLED
        } else if (textLength > 0) {
          const lastCharacter = textContent[textLength - 1]
          if (lastCharacter !== ' ') {
            replaceCharacter(quotes.QUOTE_END)
          } else {
            replaceCharacter(quotes.QUOTE_START)
          }
          return HANDLED
        }
      }
      return NOT_HANDLED
    }
  })
})(window.draftail, window.DraftJS, window.arrancaQuotingSettings)

wagtail_hooks.py

from django.conf import settings
from django.templatetags.static import static
from django.utils.html import format_html, format_html_join
from wagtail.core import hooks


@hooks.register('insert_editor_js')
def replace_quotes_in_textfields():
    quoting_files = (
        'wagtailadmin/js/draftail.js',
        'arranca-core/draftail-api-monkeypatch.js',
        'arranca-core/draftail-plugins-replace-quotes.js',
    )
    quoting_scripts = format_html_join(
        '\n', '<script src="{0}"></script>',
        ((static(filename),) for filename in quoting_files))
    quoting_settings = format_html(
        """
        <script>
            window.arrancaQuotingSettings = {{
                QUOTE_START: '{quote_start}',
                QUOTE_END: '{quote_end}',
            }}
        </script>
        """,
        quote_start=settings.ARRANCA_EDITOR_QUOTE_START,
        quote_end=settings.ARRANCA_EDITOR_QUOTE_END)
    return quoting_settings + quoting_scripts