posts/a-poor-man-spell-checker-for-the-ipython-notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "OK, today I will release another **IPython** *js* extension: **Spellchecker**, which obviously do what you are thinking... spell check the content of your **IPython** notebook cells.\n",
    "\n",
    "And why it is a *poor man* extension? Because it is a simple workaround to get the spell checker functionality and not a broad solution... but it works, and solve my spelling problems!\n",
    "<!-- TEASER_END -->\n",
    "\n",
    "The main idea here is to use the spell checker functionality provided by your browser [yes, let to the others the complex things ;-)]. But, as you know, the spell checking functionality is disable inside the **IPython** notebook... and this is because each cell you actually see is a *codemirror* instance... and *codemirror* does not support spell checking by design... in fact, the *codemirror* text area (editor) is not a common html text area, hence the browser can not actually run the spell checker in this new text area. \n",
    "\n",
    "So, are we prohibited to apply a spell checker functionality over a *codemirror* instance? In fact, no... there is a way to do it applying something called *codemirror layouts* and using *js* spell checker libraries...\n",
    "\n",
    "But, I don't want to do this job yet (because of several causes which I do not describe here now), so I thought workaround and use the **IPython** *js* machinery to get a simple, narrow but useful solution.\n",
    "\n",
    "The workaround is simple:\n",
    "\n",
    "* The spell checker will do its job at the cell level.\n",
    "\n",
    "![](../galleries/spellchecker/1.png)\n",
    "\n",
    "* We need a way to get the content of the selected **IPython** notebook cell:\n",
    "\n",
    "    ```javascript\n",
    "    24\t    var input = IPython.notebook.get_selected_cell().get_text()\n",
    "    ```\n",
    "\n",
    "* Put the content in a common html text area, and use the spell checker capabilities from the browser:\n",
    "\n",
    "    ```javascript\n",
    "    26\t    var textarea = $('<textarea/>')\n",
    "    27\t        .attr('rows','15')\n",
    "    28\t        .attr('cols','80')\n",
    "    29\t        .attr('name','source')\n",
    "    30\t        .text(input);\n",
    "    ```\n",
    "\n",
    "* Make the corrections.\n",
    "\n",
    "![](../galleries/spellchecker/2.png)\n",
    "\n",
    "* Get back the corrected content into the selected **IPython** notebook cell.\n",
    "\n",
    "    ```javascript\n",
    "    60\t    var corr_input = `$`.trim(`$`(textarea).val()); // note: backticks to avoid mathjax rendering, sorry.\n",
    "    61\t    console.log(corr_input);\n",
    "    62\t    IPython.notebook.get_selected_cell().set_text(corr_input);\n",
    "    ```\n",
    "\n",
    "And that's all... the complete code below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "     1\t/*\r\n",
      "     2\t* ----------------------------------------------------------------------------\r\n",
      "     3\t* Copyright (c) 2013 - Damián Avila\r\n",
      "     4\t*\r\n",
      "     5\t* Distributed under the terms of the Modified BSD License.\r\n",
      "     6\t*\r\n",
      "     7\t* A little extension to spell check the selected cell from the IPython notebook.\r\n",
      "     8\t* ----------------------------------------------------------------------------\r\n",
      "     9\t*/\r\n",
      "    10\t\r\n",
      "    11\tfunction spellCheckerCSS() {\r\n",
      "    12\t    var link = document.createElement(\"link\");\r\n",
      "    13\t    link.type = \"text/css\";\r\n",
      "    14\t    link.rel = \"stylesheet\";\r\n",
      "    15\t    link.href = require.toUrl(\"./custom/spellchecker/main.css\");\r\n",
      "    16\t    document.getElementsByTagName(\"head\")[0].appendChild(link);\r\n",
      "    17\t}\r\n",
      "    18\t\r\n",
      "    19\tfunction spellChecker(dummy) {\r\n",
      "    20\t    console.log(dummy);\r\n",
      "    21\t\r\n",
      "    22\t    spellCheckerCSS();\r\n",
      "    23\t\r\n",
      "    24\t    var input = IPython.notebook.get_selected_cell().get_text()\r\n",
      "    25\t\r\n",
      "    26\t    var textarea = $('<textarea/>')\r\n",
      "    27\t        .attr('rows','15')\r\n",
      "    28\t        .attr('cols','80')\r\n",
      "    29\t        .attr('name','source')\r\n",
      "    30\t        .text(input);\r\n",
      "    31\t\r\n",
      "    32\t    var dialogform = $('<div/>')\r\n",
      "    33\t        .append(\r\n",
      "    34\t            $('<form/>').append(\r\n",
      "    35\t                $('<fieldset/>').append(\r\n",
      "    36\t                    $('<label/>')\r\n",
      "    37\t                    .attr('for','source')\r\n",
      "    38\t                    .text(\"Now you can edit the cell content and use \" +\r\n",
      "    39\t                    \"the spellchecker support of your browser over it. \" +\r\n",
      "    40\t                    \"In Chromium, just focus in the text area and \" +\r\n",
      "    41\t                    \"select the text you want to spell check. Then you will \" +\r\n",
      "    42\t                    \"be able to use the contextual menu (right click) to get \" +\r\n",
      "    43\t                    \"words suggestion and other configuration options (lang). \" +\r\n",
      "    44\t                    \"Finally press OK to get the corrected cell content into \" +\r\n",
      "    45\t                    \"your selected IPython notebook cell.\")\r\n",
      "    46\t                    )\r\n",
      "    47\t                    .append($('<br/>'))\r\n",
      "    48\t                    .append(\r\n",
      "    49\t                        textarea\r\n",
      "    50\t                    )\r\n",
      "    51\t                )\r\n",
      "    52\t        );\r\n",
      "    53\t\r\n",
      "    54\t    IPython.dialog.modal({\r\n",
      "    55\t        title: \"Edit and spell check your cell content\",\r\n",
      "    56\t        body: dialogform,\r\n",
      "    57\t            buttons: {\r\n",
      "    58\t                \"OK\": { class : \"btn-primary\",\r\n",
      "    59\t                    click: function() {\r\n",
      "    60\t                       var corr_input = $.trim($(textarea).val());\r\n",
      "    61\t                       console.log(corr_input);\r\n",
      "    62\t                       IPython.notebook.get_selected_cell().set_text(corr_input);\r\n",
      "    63\t                }},\r\n",
      "    64\t                Cancel: {}\r\n",
      "    65\t            }\r\n",
      "    66\t    });\r\n",
      "    67\t\r\n",
      "    68\t}\r\n",
      "    69\t\r\n",
      "    70\tdefine(function() {\r\n",
      "    71\t  return {\r\n",
      "    72\t    parameters: function setup(param1) {\r\n",
      "    73\t      IPython.toolbar.add_buttons_group([\r\n",
      "    74\t        {\r\n",
      "    75\t        'label'   : 'Spell check your selected cell content',\r\n",
      "    76\t        'icon'    : 'icon-check-sign',\r\n",
      "    77\t        'callback': function(){spellChecker(param1)},\r\n",
      "    78\t        'id'      : 'start_spellcheck'\r\n",
      "    79\t        },\r\n",
      "    80\t      ]);\r\n",
      "    81\t      var document_keydown = function(event) {\r\n",
      "    82\t        if (event.which == 83 && event.altKey) {\r\n",
      "    83\t          spellChecker(param1);\r\n",
      "    84\t          return false;\r\n",
      "    85\t        };\r\n",
      "    86\t        return true;\r\n",
      "    87\t      };\r\n",
      "    88\t      $(document).keydown(document_keydown);\r\n",
      "    89\t    }\r\n",
      "    90\t  }\r\n",
      "    91\t});\r\n"
     ]
    }
   ],
   "source": [
    "cat -n /media/datos/Desarrollos/mIPyex/custom/spellchecker/main.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As you can see at the end of the code... you have not only a button but also a keyboard shortcut to activate the spell checker extension: **ALT + S** (remember that the same goes for the **Tweet me** extension, but with **ALT + T**).\n",
    "\n",
    "Again, the extension lives in this new repo: [mIPyex](https://github.com/damianavila/mIPyex), where I will upload the development versions of my own extensions. When I get them enough stable, I will make a copy of them in the [IPython notebook extensions](https://github.com/ipython-contrib/IPython-notebook-extensions) repo where you can get a lot of and useful interesting extensions.\n",
    "\n",
    "OK, I hope you enjoy and use this extension... because the **IPython** notebook is not only for write code... it is also powered to write other things, such as this blog post, and we have to keep spelling mistakes as low as possible to make the read of our content *pleasant*...\n",
    "\n",
    "See you...\n",
    "\n",
    "Damián"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}