ClojureScript goog.editor

editor.cljs

(ns frontend.view.editor
  (:require [reagent.core :as reagent]
            [goog.dom :as dom])
  (:import [goog.editor Field ContentEditableField Command]
           [goog.ui.editor DefaultToolbar ToolbarController ToolbarFactory]
           [goog.editor.plugins BasicTextFormatter RemoveFormatting ListTabHandler
            SpacesTabHandler EnterHandler HeaderFormatter TableEditor]))

(defn editor-view []
  (let [field-name (gensym)
        editable (atom nil)]
    (reagent/create-class
    {:component-did-mount
     (fn [this]
       (let [field (doto (ContentEditableField. (str field-name "_content"))
                     (.registerPlugin (BasicTextFormatter.))
                     ; Indent and deintent lists
                     (.registerPlugin (ListTabHandler.))
                     ; TAB -> 4 spaces when not in list
                     (.registerPlugin (SpacesTabHandler.))
                     ; Normalizes what happens when enter is pressed. Also 
                     (.registerPlugin (EnterHandler.))
                     ; Ctrl-1-4 shortcuts
                     (.registerPlugin (HeaderFormatter.))
                     ; Tables
                     (.registerPlugin (TableEditor.)))
             toolbar (DefaultToolbar.makeToolbar
                       #js [Command.BOLD Command.ITALIC
                            ; FIXME: Doesn't work
                            ; (doto (ToolbarFactory.makeMenuButton "" "Format" "Format")
                            ;   (ToolbarFactory.addFormatOption "H1" "H1"))
                            ; (ToolbarFactory.makeToggleButton HeaderFormatter.HEADER_COMMAND.H1 "Header 1" "Header 1" )
                            ; (ToolbarFactory.makeToggleButton HeaderFormatter.HEADER_COMMAND.H2 "Header 2" "Header 2" )
                            ; FIXME: Use menu button for table actions?
                            (ToolbarFactory.makeButton TableEditor.COMMAND.TABLE "Table" "Table")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.REMOVE_TABLE "Remove table" "Remove table")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_ROW_BEFORE "Insert row before" "Insert row before")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_ROW_AFTER "Insert row after" "Insert row after")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_COLUMN_BEFORE "Insert column before" "Insert column before")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_COLUMN_AFTER "Insert column after" "Insert column after")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.REMOVE_ROWS "Remove row" "Remove row")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.REMOVE_COLUMNS "Remove column" "Remove column")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.MERGE_CELLS "Merge cells" "Merge cells")
                            (ToolbarFactory.makeButton TableEditor.COMMAND.SPLIT_CELL "Split cell" "Split cell")
                            ]
                       (dom/getElement (str field-name "_toolbar")))]
         (reset! editable field)
         (ToolbarController. field toolbar)
         (.makeEditable field)))
     :component-will-unmount
     (fn [this]
       (if-let [field @editable]
         (.makeUneditable field)))
     :render
     (fn []
       [:div
        [:div {:id (str field-name "_toolbar")}]
        [:div {:id (str field-name "_content")
               :style {:border "1px solid #ccc"
                       :height "400px"
                       :padding "15px"}}]])})))

main.main.less

@import (inline) "goog/css/common.css";
@import (inline) "goog/css/button.css";
@import (inline) "goog/css/dialog.css";
@import (inline) "goog/css/linkbutton.css";
@import (inline) "goog/css/menu.css";
@import (inline) "goog/css/menuitem.css";
@import (inline) "goog/css/menuseparator.css";
@import (inline) "goog/css/tab.css";
@import (inline) "goog/css/tabbar.css";
@import (inline) "goog/css/toolbar.css";
@import (inline) "goog/css/colormenubutton.css";
@import (inline) "goog/css/palette.css";
@import (inline) "goog/css/colorpalette.css";
@import (inline) "goog/css/editor/bubble.css";
@import (inline) "goog/css/editor/dialog.css";
@import (inline) "goog/css/editor/linkdialog.css";
@import (inline) "goog/css/editortoolbar.css";